init

src/sections/index/board.tsx

@@ -0,0 +1,37 @@
+import { drawBoard } from "@/lib/board";
+import { drawEvaluationBar } from "@/lib/evalBar";
+import { useEffect, useRef } from "react";
+
+export default function Board() {
+  const boardRef = useRef<HTMLCanvasElement>(null);
+  const evalBarRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const ctx = boardRef.current?.getContext("2d");
+    if (!ctx) return;
+
+    drawBoard(ctx);
+
+    const evalCtx = evalBarRef.current?.getContext("2d");
+    if (!evalCtx) return;
+    drawEvaluationBar(evalCtx);
+  }, []);
+
+  return (
+    <div id="board-outer-container" className="center">
+      <canvas id="evaluation-bar" width="30" height="720" ref={evalBarRef} />
+
+      <div id="board-inner-container" className="center">
+        <div id="top-player-profile" className="profile">
+          Black Player (?)
+        </div>
+
+        <canvas id="board" width="720" height="720" ref={boardRef} />
+
+        <div id="bottom-player-profile" className="profile">
+          White Player (?)
+        </div>
+      </div>
+    </div>
+  );
+}

src/sections/index/reviewPanelBody.tsx

@@ -0,0 +1,30 @@
+import ReviewResult from "./reviewResult";
+import SelectDepth from "./selectDepth";
+import SelectGameOrigin from "./selectGame/selectGameOrigin";
+
+export default function ReviewPanelBody() {
+  return (
+    <div id="review-panel-main">
+      <h1 id="review-panel-title" className="white">
+        📑 Game Report
+      </h1>
+
+      <SelectGameOrigin />
+
+      <button id="review-button" className="std-btn success-btn white">
+        <img src="analysis_icon.png" height="25" />
+        <b>Analyse</b>
+      </button>
+
+      <SelectDepth />
+
+      {false && <progress id="evaluation-progress-bar" max="100" />}
+
+      <b id="status-message" />
+
+      <b id="secondary-message" className="white" />
+
+      {false && <ReviewResult />}
+    </div>
+  );
+}

src/sections/index/reviewPanelToolbar.tsx

@@ -0,0 +1,43 @@
+export default function ReviewPanelToolBar() {
+  return (
+    <div id="review-panel-toolbar">
+      <div id="review-panel-toolbar-buttons" className="center">
+        <img
+          id="flip-board-button"
+          src="flip.png"
+          alt="Flip Board"
+          title="Flip board"
+        />
+        <img
+          id="back-start-move-button"
+          src="back_to_start.png"
+          alt="Back to start"
+          title="Back to start"
+        />
+        <img id="back-move-button" src="back.png" alt="Back" title="Back" />
+        <img id="next-move-button" src="next.png" alt="Next" title="Next" />
+        <img
+          id="go-end-move-button"
+          src="go_to_end.png"
+          alt="Go to end"
+          title="Go to end"
+        />
+        <img
+          id="save-analysis-button"
+          src="save.png"
+          alt="Save analysis"
+          title="Save analysis"
+        />
+      </div>
+
+      <div className="white" style={{ marginBottom: "10px" }}>
+        <input
+          id="suggestion-arrows-setting"
+          type="checkbox"
+          style={{ marginRight: "0.4rem" }}
+        />
+        <span>Suggestion Arrows</span>
+      </div>
+    </div>
+  );
+}

src/sections/index/reviewResult.tsx

@@ -0,0 +1,28 @@
+export default function ReviewResult() {
+  return (
+    <div id="report-cards">
+      <h2 id="accuracies-title" className="white">
+        Accuracies
+      </h2>
+      <div id="accuracies">
+        <b id="white-accuracy">0%</b>
+        <b id="black-accuracy">0%</b>
+      </div>
+
+      <div id="classification-message-container">
+        <img id="classification-icon" src="book.png" height="25" />
+        <b id="classification-message" />
+      </div>
+
+      <b id="top-alternative-message">Qxf2+ was best</b>
+
+      <div id="engine-suggestions">
+        <h2 id="engine-suggestions-title" className="white">
+          Engine
+        </h2>
+      </div>
+
+      <span id="opening-name" className="white" />
+    </div>
+  );
+}

src/sections/index/selectDepth.tsx

@@ -0,0 +1,22 @@
+export default function SelectDepth() {
+  return (
+    <>
+      <b className="white">⚙️ Search depth</b>
+      <div id="depth-slider-container">
+        <input
+          id="depth-slider"
+          type="range"
+          min="14"
+          max="20"
+          defaultValue="16"
+        />
+        <span id="depth-counter" className="white">
+          16 🐇
+        </span>
+      </div>
+      <h6 id="depth-message" className="white">
+        Lower depths recommended for slower devices.
+      </h6>
+    </>
+  );
+}

src/sections/index/selectGame/inputGame.tsx

@@ -0,0 +1,16 @@
+interface Props {
+  placeholder?: string;
+}
+
+export default function InputGame({ placeholder }: Props) {
+  return (
+    <textarea
+      id="pgn"
+      className="white"
+      cols={30}
+      rows={10}
+      spellCheck="false"
+      placeholder={placeholder}
+    />
+  );
+}

src/sections/index/selectGame/selectGameAccount.tsx

@@ -0,0 +1,22 @@
+import { GameOrigin } from "@/types";
+
+interface Props {
+  gameOrigin: GameOrigin;
+}
+
+export default function SelectGameAccount({}: Props) {
+  return (
+    <div id="chess-site-username-container">
+      <textarea
+        id="chess-site-username"
+        className="white"
+        spellCheck="false"
+        maxLength={48}
+        placeholder="Username..."
+      />
+      <button id="fetch-account-games-button" className="std-btn success-btn">
+        <img src="next.png" alt=">" height="25" />
+      </button>
+    </div>
+  );
+}

src/sections/index/selectGame/selectGameOrigin.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import InputGame from "./inputGame";
+import SelectGameAccount from "./selectGameAccount";
+import { GameOrigin } from "@/types";
+
+export default function SelectGameOrigin() {
+  const [gameOrigin, setGameOrigin] = useState(GameOrigin.Pgn);
+  return (
+    <>
+      <div id="load-type-dropdown-container" className="white">
+        <span style={{ marginRight: "0.3rem" }}>Load game from</span>
+        <select
+          id="load-type-dropdown"
+          value={gameOrigin}
+          onChange={(e) => setGameOrigin(e.target.value as GameOrigin)}
+        >
+          {Object.values(GameOrigin).map((origin) => (
+            <option key={origin} value={origin}>
+              {gameOriginLabel[origin]}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {renderSelectGameInfo(gameOrigin)}
+    </>
+  );
+}
+
+const gameOriginLabel: Record<GameOrigin, string> = {
+  [GameOrigin.Pgn]: "PGN",
+  [GameOrigin.ChessCom]: "Chess.com",
+  [GameOrigin.Lichess]: "Lichess",
+  [GameOrigin.Json]: "JSON",
+};
+
+const renderSelectGameInfo = (gameOrigin: GameOrigin) => {
+  switch (gameOrigin) {
+    case GameOrigin.Pgn:
+      return <InputGame placeholder="Enter PGN here..." />;
+    case GameOrigin.Json:
+      return <InputGame placeholder="Enter JSON here..." />;
+    default:
+      return <SelectGameAccount gameOrigin={gameOrigin} />;
+  }
+};

src/sections/index/topBar.tsx

@@ -0,0 +1,7 @@
+export default function TopBar() {
+  return (
+    <div id="announcement">
+      <b>Welcome ❤️</b>
+    </div>
+  );
+}