assets/js/hooks/chessBoard.js

@@ -3,19 +3,16 @@ import { Chess } from 'chess.js';
 
 export const ChessBoard = {
     mounted() {
-    // Initialize chess.js for local rule validation
     this.chess = new Chess();
 
-    // Initialize Chessground
     this.ground = Chessground(this.el, {
       fen: this.chess.fen(),
       movable: {
         color: 'white',
-        free: false, // Don't allow completely arbitrary drops
+        free: false,
-        dests: this.getValidDests() // Only allow legal chess moves
+        dests: this.getValidDests()
       },
       events: {
-        // Triggered when a piece is successfully dropped
         move: (orig, dest, _metadata) => {
           this.handleMove(orig, dest);
         }
@@ -34,30 +31,27 @@ export const ChessBoard = {
   },
 
   handleMove(orig, dest) {
-    // 1. Try to execute the move in chess.js state
     const move = this.chess.move({ from: orig, to: dest, promotion: 'q' });
 
     if (move) {
-      // 2. Telemetry back up to Phoenix LiveView
+        const san = move.san
       this.pushEvent("move_played", { 
         from: orig, 
         to: dest, 
+        san: san,
         fen: this.chess.fen()
       });
 
-      // 3. Determine whose turn it is now ('w' or 'b')
       const nextTurnColor = this.chess.turn() === 'w' ? 'white' : 'black';
 
-      // 4. Force Chessground to update its internal state for the next player
       this.ground.set({
-        turnColor: nextTurnColor, // Switches turn tracking
+        turnColor: nextTurnColor,
         movable: {
-          color: nextTurnColor,   // 👈 THIS IS CRITICAL: Changes who is allowed to drag pieces!
+          color: nextTurnColor,
-          dests: this.getValidDests() // Re-calculates valid legal squares for Black
+          dests: this.getValidDests()
         }
       });
     } else {
-      // If chess.js says it's an illegal move, snap the piece back instantly
       this.ground.set({ fen: this.chess.fen() });
     }
   }

lib/chesstrainer_web/live/chess_test_live.ex

@@ -3,7 +3,7 @@ defmodule ChesstrainerWeb.ChessTestLive do
 
   @impl true
   def mount(_params, _session, socket) do
-    {:ok, assign(socket, last_move: "None yet", total_moves: 0)}
+    {:ok, assign(socket, last_move: "None yet", total_moves: 0, san: "None yet")}
   end
 
   @impl true
@@ -16,6 +16,7 @@ defmodule ChesstrainerWeb.ChessTestLive do
         <div>
           <p class="text-sm text-gray-600 font-semibold">Last Played Move:</p>
           <p class="text-lg font-mono text-blue-600">{@last_move}</p>
+          <p class="text-lg font-mono text-blue-600">{@san}</p>
         </div>
         <div>
           <p class="text-sm text-gray-600 font-semibold">Total Moves:</p>
@@ -37,11 +38,15 @@ defmodule ChesstrainerWeb.ChessTestLive do
   end
 
   @impl true
-  def handle_event("move_played", %{"from" => from, "to" => to, "fen" => _fen}, socket) do
+  def handle_event(
-    # Receive the payload sent from the client JS Hook via this.pushEvent
+        "move_played",
+        %{"from" => from, "to" => to, "fen" => _fen, "san" => san},
+        socket
+      ) do
     {:noreply,
      socket
      |> assign(:last_move, "#{from} ➔ #{to}")
+     |> assign(:san, san)
      |> assign(:total_moves, socket.assigns.total_moves + 1)}
   end
 end