add linter and formatter

assets/js/app.js

@@ -18,39 +18,39 @@
 // 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"
+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"
+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
-}
+  ChessBoard,
+};
 
-const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
 const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
-  params: {_csrf_token: csrfToken},
+  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())
+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()
+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
+window.liveSocket = liveSocket;
 
 // The lines below enable quality of life phoenix_live_reload
 // development features:
@@ -59,31 +59,34 @@ window.liveSocket = liveSocket
 //     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}) => {
+  window.addEventListener("phx:live_reload:attached", ({ detail: reloader }) => {
     // Enable server log streaming to client.
     // Disable with reloader.disableServerLogs()
-    reloader.enableServerLogs()
+    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)
+    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
-  })
+    window.liveReloader = reloader;
+  });
 }
-

assets/js/hooks/chessBoard.js

@@ -1,49 +1,49 @@
-import { Chessground } from 'chessground';
-import { Chess } from 'chess.js';
+import { Chessground } from "chessground";
+import { Chess } from "chess.js";
 
 export const ChessBoard = {
-    mounted() {
-        this.chess = new Chess();
+  mounted() {
+    this.chess = new Chess();
 
-        this.ground = Chessground(this.el, {
-            fen: this.chess.fen(),
-            movable: {
-                color: 'white',
-                free: false,
-                dests: this.getValidDests()
-            },
-            events: {
-                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!");
-            }
+    this.ground = Chessground(this.el, {
+      fen: this.chess.fen(),
+      movable: {
+        color: "white",
+        free: false,
+        dests: this.getValidDests(),
+      },
+      events: {
+        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() {
     // Convert chess.js moves into the Map format Chessground expects
     const dests = new Map();
-    this.chess.moves({ verbose: true }).forEach(m => {
+    this.chess.moves({ verbose: true }).forEach((m) => {
       if (!dests.has(m.from)) dests.set(m.from, []);
       dests.get(m.from).push(m.to);
     });
@@ -51,27 +51,35 @@ export const ChessBoard = {
   },
 
   handleMove(orig, dest) {
-    const move = this.chess.move({ from: orig, to: dest, promotion: 'q' });
+    const move = this.chess.move({ from: orig, to: dest, promotion: "q" });
 
     if (move) {
-      this.pushEvent("move_played", { 
-        from: orig, 
-        to: dest, 
+      const piece = this.chess.get(orig);
+
+      if (piece && piece.type === "p" && (dest[1] === "8" || dest[1] === "1")) {
+        this.pendingPromotion = { orig, dest };
+        this.showPromotionDialog();
+        return;
+      }
+
+      this.pushEvent("move_played", {
+        from: orig,
+        to: dest,
         fen: this.chess.fen(),
         san: move.san,
       });
 
-      const nextTurnColor = this.chess.turn() === 'w' ? 'white' : 'black';
+      const nextTurnColor = this.chess.turn() === "w" ? "white" : "black";
 
       this.ground.set({
         turnColor: nextTurnColor,
         movable: {
           color: nextTurnColor,
-          dests: this.getValidDests()
-        }
+          dests: this.getValidDests(),
+        },
       });
     } else {
       this.ground.set({ fen: this.chess.fen() });
     }
-  }
-}
+  },
+};