assets/js/hooks/chessBoard.js

@@ -34,12 +34,11 @@ export const ChessBoard = {
     const move = this.chess.move({ from: orig, to: dest, promotion: 'q' });
 
     if (move) {
-        const san = move.san
       this.pushEvent("move_played", { 
         from: orig, 
         to: dest, 
-        san: san,
-        fen: this.chess.fen()
+        fen: this.chess.fen(),
+        san: move.san,
       });
 
       const nextTurnColor = this.chess.turn() === 'w' ? 'white' : 'black';

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, san: "None yet")}
+    {:ok, assign(socket, last_move: "None yet", san: "None yet", move_list: [])}
   end
 
   @impl true
@@ -17,10 +17,13 @@ defmodule ChesstrainerWeb.ChessTestLive do
           <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>
-          <p class="text-lg font-bold">{@total_moves}</p>
+          <p class="text-lg font-mono text-emerald-600">
+            {if length(@move_list) == 0 do
+              "No Moves"
+            else
+              Enum.reverse(@move_list) |> Enum.join(", ")
+            end}
+          </p>
         </div>
       </div>
 
@@ -43,10 +46,12 @@ defmodule ChesstrainerWeb.ChessTestLive do
         %{"from" => from, "to" => to, "fen" => _fen, "san" => san},
         socket
       ) do
+    current_moves = socket.assigns.move_list
+
     {:noreply,
      socket
      |> assign(:last_move, "#{from} ➔ #{to}")
      |> assign(:san, san)
-     |> assign(:total_moves, socket.assigns.total_moves + 1)}
+     |> assign(:move_list, [san | current_moves])}
   end
 end