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

assets/js/hooks/chessBoard.js

@@ -3,21 +3,41 @@ import { Chess } from 'chess.js';
 
 export const ChessBoard = {
     mounted() {
-    this.chess = new Chess();
+        this.chess = new Chess();
 
-    this.ground = Chessground(this.el, {
+        this.ground = Chessground(this.el, {
-      fen: this.chess.fen(),
+            fen: this.chess.fen(),
-      movable: {
+            movable: {
-        color: 'white',
+                color: 'white',
-        free: false,
+                free: false,
-        dests: this.getValidDests()
+                dests: this.getValidDests()
-      },
+            },
-      events: {
+            events: {
-        move: (orig, dest, _metadata) => {
+                move: (orig, dest, _metadata) => {
-          this.handleMove(orig, dest);
+                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() {

lib/chesstrainer_web/live/chess_test_live.ex

@@ -12,6 +12,24 @@ 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>
@@ -40,6 +58,18 @@ defmodule ChesstrainerWeb.ChessTestLive do
     """
   end
 
+  @impl true
+  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",