initial commit

assets/js/app.js

@@ -0,0 +1,89 @@
+// If you want to use Phoenix channels, run `mix help phx.gen.channel`
+// to get started and then uncomment the line below.
+// import "./user_socket.js"
+
+// You can include dependencies in two ways.
+//
+// The simplest option is to put them in assets/vendor and
+// import them using relative paths:
+//
+//     import "../vendor/some-package.js"
+//
+// Alternatively, you can `npm install some-package --prefix assets` and import
+// them using a path starting with the package name:
+//
+//     import "some-package"
+//
+// If you have dependencies that try to import CSS, esbuild will generate a separate `app.css` file.
+// To load it, simply add a second `<link>` to your `root.html.heex` file.
+
+// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
+import "phoenix_html"
+// Establish Phoenix Socket and LiveView configuration.
+import {Socket} from "phoenix"
+import {LiveSocket} from "phoenix_live_view"
+import {hooks as colocatedHooks} from "phoenix-colocated/chesstrainer"
+import topbar from "../vendor/topbar"
+import { ChessBoard } from "./hooks/chessBoard"
+
+let Hooks = {
+  ...colocatedHooks,
+  ChessBoard
+}
+
+const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+const liveSocket = new LiveSocket("/live", Socket, {
+  longPollFallbackMs: 2500,
+  params: {_csrf_token: csrfToken},
+  hooks: Hooks,
+})
+
+// Show progress bar on live navigation and form submits
+topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
+window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+
+// connect if there are any LiveViews on the page
+liveSocket.connect()
+
+// expose liveSocket on window for web console debug logs and latency simulation:
+// >> liveSocket.enableDebug()
+// >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
+// >> liveSocket.disableLatencySim()
+window.liveSocket = liveSocket
+
+// The lines below enable quality of life phoenix_live_reload
+// development features:
+//
+//     1. stream server logs to the browser console
+//     2. click on elements to jump to their definitions in your code editor
+//
+if (process.env.NODE_ENV === "development") {
+  window.addEventListener("phx:live_reload:attached", ({detail: reloader}) => {
+    // Enable server log streaming to client.
+    // Disable with reloader.disableServerLogs()
+    reloader.enableServerLogs()
+
+    // Open configured PLUG_EDITOR at file:line of the clicked element's HEEx component
+    //
+    //   * click with "c" key pressed to open at caller location
+    //   * click with "d" key pressed to open at function component definition location
+    let keyDown
+    window.addEventListener("keydown", e => keyDown = e.key)
+    window.addEventListener("keyup", _e => keyDown = null)
+    window.addEventListener("click", e => {
+      if(keyDown === "c"){
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        reloader.openEditorAtCaller(e.target)
+      } else if(keyDown === "d"){
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        reloader.openEditorAtDef(e.target)
+      }
+    }, true)
+
+    window.liveReloader = reloader
+  })
+}
+

assets/js/hooks/chessBoard.js

@@ -0,0 +1,64 @@
+import { Chessground } from 'chessground';
+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
+      },
+      events: {
+        // Triggered when a piece is successfully dropped
+        move: (orig, dest, _metadata) => {
+          this.handleMove(orig, dest);
+        }
+      }
+    });
+  },
+
+  getValidDests() {
+    // Convert chess.js moves into the Map format Chessground expects
+    const dests = new Map();
+    this.chess.moves({ verbose: true }).forEach(m => {
+      if (!dests.has(m.from)) dests.set(m.from, []);
+      dests.get(m.from).push(m.to);
+    });
+    return dests;
+  },
+
+  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() 
+      });
+
+      // 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
+        movable: {
+          color: nextTurnColor,   // 👈 THIS IS CRITICAL: Changes who is allowed to drag pieces!
+          dests: this.getValidDests() // Re-calculates valid legal squares for Black
+        }
+      });
+    } else {
+      // If chess.js says it's an illegal move, snap the piece back instantly
+      this.ground.set({ fen: this.chess.fen() });
+    }
+  }
+}