I wrote a quick and dirty program that generates the grid and displays the (x+n) using the equation: nn + (2d - 1)*(n - 1) + (n - 1) + (f - 2).

It's written in javascript and the zip contains 3 files. Index.html, index.js and theend.js. Index.html contains just the markup. theend.js generates the grid and writes it to the DOM tree as table rows (Horrible I know) and index.js draws up the x+n square using canvas.

I'm not much of a frontend developer and I have never touched canvas before so the code is quick and dirty. I only spend a few hours on it. To run it I recommend Chrome as some of the javascript is es6 and might not be supported by other browsers (although firefox probably works fine with it, but safari might be no-go).

There's a lot of room for improvement, but this is just something I threw together today so we at least have something.

To run it I've been using a static http-server. I'm not sure how it works if you just open it as a file, since it requires two javascript-files to run. I'm using http-server which is nodejs static webserver you can install by using npm, but that requires you to install nodejs.

Zip is available here: http://www.filedropper.com/stuff_27