Allow click movement on the client

2 files changed, 41 insertions, 3 deletions

diff --git a/index.html b/index.html
index 52a5335..02b7d8c 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,14 @@
         border: 1px solid green;
     }
 
+    .legalmove.white {
+        background: cadetblue;
+    }
+
+    .legalmove.black {
+        background: olive;
+    }
+
     #warn {
         display: block;
         position: fixed;
@@ -87,6 +95,7 @@
             window.addEventListener('beforeunload', () => {
                 this.ended = true
             })
+            this.legalMoves = []
             this.socket.addEventListener('message', ev => {
                 const message = JSON.parse(ev.data)
                 console.log(message)
@@ -95,6 +104,8 @@
                 this.lastMove = message.lastmove || ''
                 this.ended ||= message.event === 'game_over'
                 this.result = message.result
+                this.legalMoves = message.legalmoves || []
+                this.awaitResync = false
                 this.synchronizeBoard()
             })
             this.socket.addEventListener('close', () => {
@@ -111,12 +122,19 @@
                     let field = document.createElement("td")
                     field.className = "board-field " + (((i + j) % 2) === 0 ? 'black' : 'white');
                     let name = indiciesToFieldName(i, j)
-                    field.innerText = name;
                     field.addEventListener("dragover", ev => ev.preventDefault())
                     field.addEventListener("drop", ev => {
                         ev.preventDefault()
                         this.playMove(ev.dataTransfer.getData("text"), name)
                     })
+                    field.addEventListener('click', ev => {
+                        if (this.partialMove) {
+                            this.playMove(this.partialMove, name)
+                        } else {
+                            this.partialMove = name
+                        }
+                        this.updateHighlightedMoves()
+                    })
                     this.fields [name] = field
                     row.appendChild(field)
                 }
@@ -126,10 +144,13 @@
             this.turnIndicator = document.createElement('p')
             this.turnIndicator.className = "turn-indicator status"
             elem.appendChild(this.turnIndicator)
+            this.partialMove = null
         }
 
         playMove(fromField, toField) {
-            if (!this.isPlayerTurn) return
+            if (!this.isPlayerTurn || this.awaitResync) return
+            this.awaitResync = true
+            this.partialMove = null
             let uci = fromField + toField
             if (((toField[1] === '8' && this.playerColor === 'white')
                     || (toField[2] === '1' && this.playerColor === 'black'))
@@ -152,6 +173,16 @@
             return this.playerColor === this.boardState.turn
         }
 
+        updateHighlightedMoves() {
+            const allowedMoves = this.partialMove ? this.legalMoves.filter(it => it.startsWith(this.partialMove)).map(it => it.slice(2)) : []
+            for (const field in this.fields) {
+                const canMoveHere = allowedMoves.find(it => it.startsWith(field))
+                this.fields[field].classList.remove('legalmove')
+                if (canMoveHere)
+                    this.fields[field].classList.add('legalmove')
+            }
+        }
+
         synchronizeBoard() {
             this.turnIndicator.innerHTML = `<b>${capitalize(this.boardState.turn)}</b>s turn`
             if (this.ended) {
@@ -167,6 +198,12 @@
                     piece.innerText = notationToPieceUnicode(this.boardState[field])
                     piece.addEventListener("dragstart", ev => {
                         ev.dataTransfer.setData("text", field)
+                        this.partialMove = field
+                        this.updateHighlightedMoves()
+                    })
+                    piece.addEventListener('dragend', ev => {
+                        this.partialMove = null
+                        this.updateHighlightedMoves()
                     })
                     piece.draggable = this.canPlay
                     fieldDOM.appendChild(piece)
diff --git a/server.py b/server.py
index 2c19026..c7abb20 100644
--- a/server.py
+++ b/server.py
@@ -34,13 +34,14 @@ async def handle_socket(request: web.Request):
     try:
         board = chess.Board()
         transport, engine = await chess.engine.popen_uci('stockfish')
-        await ws.send_json(dict(event="ready", player_color='white', board=board.fen()))
 
         async def send_to_user(message: dict):
             message['board'] = board.fen()
             message['legalmoves'] = [m.uci() for m in board.legal_moves]
             await ws.send_json(message)
 
+        await send_to_user(dict(event="ready", player_color='white'))
+
         async for msg in ws:
             msg: aiohttp.WSMessage
             if msg.type == aiohttp.WSMsgType.TEXT: