load FEN string, parse through chess.js and load correct orientaton etc

assets/js/hooks/chessBoard.js

@@ -3,24 +3,41 @@ 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
-        dests: this.getValidDests() // Only allow legal chess moves
+                free: false,
+                dests: this.getValidDests()
             },
             events: {
-        // Triggered when a piece is successfully dropped
                 move: (orig, dest, _metadata) => {
                 this.handleMove(orig, dest);
                 }
             }
         });
+
+        this.handleEvent("set_fen", ({ fen }) => {
+            try {
+                this.chess.load(fen);
+
+                const currentTurnColor = this.chess.turn() === 'w' ? 'white' : 'black';
+                
+                this.ground.set({
+                    fen: fen,
+                    turnColor: currentTurnColor,
+                    movable: {
+                        color: currentTurnColor,
+                        dests: this.getValidDests()
+                    }
+                });
+            } catch (error) {
+                console.error("Invalid FEN string submitted:", error);
+                alert("Invalid FEN configuration!");
+            }
+        });
   },
 
   getValidDests() {
@@ -34,30 +51,26 @@ 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
       this.pushEvent("move_played", { 
         from: orig, 
         to: dest, 
-        fen: this.chess.fen() 
+        fen: this.chess.fen(),
+        san: move.san,
       });
 
-      // 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!
-          dests: this.getValidDests() // Re-calculates valid legal squares for Black
+          color: nextTurnColor,
+          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", san: "None yet", move_list: [])}
   end
 
   @impl true
@@ -12,14 +12,36 @@ defmodule ChesstrainerWeb.ChessTestLive do
     <div class="mx-auto max-w-2xl p-6">
       <h1 class="text-2xl font-bold mb-4">Chessground LiveView Test</h1>
 
+      <form phx-submit="load_fen" class="mb-6 flex gap-2 bg-gray-50 p-4 rounded-lg shadow-sm">
+        <div class="flex-1">
+          <input
+            type="text"
+            name="fen"
+            placeholder="Paste FEN string here (e.g., rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1)"
+            class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
+            required
+          />
+        </div>
+        <button
+          type="submit"
+          class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition"
+        >
+          Load FEN
+        </button>
+      </form>
+
       <div class="bg-gray-100 p-4 rounded mb-4 flex justify-between items-center shadow-sm">
         <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>
-        </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-blue-600">{@san}</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>
 
@@ -37,11 +59,29 @@ defmodule ChesstrainerWeb.ChessTestLive do
   end
 
   @impl true
-  def handle_event("move_played", %{"from" => from, "to" => to, "fen" => _fen}, socket) do
-    # Receive the payload sent from the client JS Hook via this.pushEvent
+  def handle_event("load_fen", %{"fen" => fen}, socket) do
+    clean_fen = String.trim(fen)
+
+    {:noreply,
+     socket
+     |> assign(:last_move, "Position Loaded")
+     |> assign(:san, "None yet")
+     |> assign(:move_list, [])
+     |> push_event("set_fen", %{fen: clean_fen})}
+  end
+
+  @impl true
+  def handle_event(
+        "move_played",
+        %{"from" => from, "to" => to, "fen" => _fen, "san" => san},
+        socket
+      ) do
+    current_moves = socket.assigns.move_list
+
     {:noreply,
      socket
      |> assign(:last_move, "#{from} ➔ #{to}")
-     |> assign(:total_moves, socket.assigns.total_moves + 1)}
+     |> assign(:san, san)
+     |> assign(:move_list, [san | current_moves])}
   end
 end