Visualize move, protection and threat status in chess (opens in new tab)

I've been thinking to make the exact same thing in Javascript using Chess.js and Chessboard.js

https://github.com/jhlywa/chess.js/blob/master/README.md http://chessboardjs.com/

I got a half-working version and will opensource the code once it's ready.

I think it could be a nice tool to help people starting with the game, but also as an analysis tool for more advanced players.

[Edit] I just uploaded what I did so far on a server, just in case you want to take a look

http://www.hotpixel.mx/chess/index.html

my idea is to use little icons (now really terrible looking) with numbers and playing with opacity to give an idea of the strength for each square of the board. I still have some problems in some cases displaying incorrect numbers, but I hope to fix that as soon as I have some spare time :)

I have a couple bits of cosmetic feedback for you:

I would like the chess pieces to appear much larger within each of their squares, ala http://www.365chess.com/opening.php

Also, the green border around protected cells is difficult for me to discern. (Might be due to my colorblindness.)

I was working on something similar recently: https://github.com/blevinstein/chess_assistant/blob/master/s...

I had been thinking about ways to analyze the graph of "threats", so I focused on which pieces were threatening which. I wanted to eventually extend this to also include which pieces were threatening which squares, but never got that far.

And I assume even more advanced modes highlight perhaps central squares that might be obtained and which open lines. See https://en.m.wikibooks.org/wiki/Chess_Strategy/Open_lines for a nice example.