WIP

src/board/styles-pieces/cases.ts

@@ -0,0 +1,16 @@
+const cases = {
+  kw: "/pieces/cases/kw.svg",
+  qw: "/pieces/cases/qw.svg",
+  rw: "/pieces/cases/rw.svg",
+  bw: "/pieces/cases/bw.svg",
+  nw: "/pieces/cases/nw.svg",
+  pw: "/pieces/cases/pw.svg",
+  kb: "/pieces/cases/kb.svg",
+  qb: "/pieces/cases/qb.svg",
+  rb: "/pieces/cases/rb.svg",
+  bb: "/pieces/cases/bb.svg",
+  nb: "/pieces/cases/nb.svg",
+  pb: "/pieces/cases/pb.svg",
+};
+
+export default cases;

src/board/styles-pieces/color.ts

@@ -0,0 +1,16 @@
+const color = {
+  kw: "/pieces/color/kw.svg",
+  qw: "/pieces/color/qw.svg",
+  rw: "/pieces/color/rw.svg",
+  bw: "/pieces/color/bw.svg",
+  nw: "/pieces/color/nw.svg",
+  pw: "/pieces/color/pw.svg",
+  kb: "/pieces/color/kb.svg",
+  qb: "/pieces/color/qb.svg",
+  rb: "/pieces/color/rb.svg",
+  bb: "/pieces/color/bb.svg",
+  nb: "/pieces/color/nb.svg",
+  pb: "/pieces/color/pb.svg",
+};
+
+export default color;

src/board/styles-pieces/index.ts

@@ -1,6 +1,8 @@
 import alpha from "./alpha";
 import cardinal from "./cardinal";
+import cases from "./cases";
 import cburnett from "./cburnett";
+import color from "./color";
 import companion from "./companion";
 import fantasy from "./fantasy";
 import gioco from "./gioco";
@@ -8,13 +10,16 @@ import governor from "./governor";
 import horsey from "./horsey";
 import maestro from "./maestro";
 import merida from "./merida";
+import simple from "./simple";
 import staunty from "./staunty";
 import tatiana from "./tatiana";
 
 const piecesSets = {
   alpha,
   cardinal,
+  cases,
   cburnett,
+  color,
   companion,
   fantasy,
   gioco,
@@ -22,6 +27,7 @@ const piecesSets = {
   horsey,
   maestro,
   merida,
+  simple,
   staunty,
   tatiana,
 };

src/board/styles-pieces/simple.ts

@@ -0,0 +1,16 @@
+const simple = {
+  kw: "/pieces/simple/kw.svg",
+  qw: "/pieces/simple/qw.svg",
+  rw: "/pieces/simple/rw.svg",
+  bw: "/pieces/simple/bw.svg",
+  nw: "/pieces/simple/nw.svg",
+  pw: "/pieces/simple/pw.svg",
+  kb: "/pieces/simple/kb.svg",
+  qb: "/pieces/simple/qb.svg",
+  rb: "/pieces/simple/rb.svg",
+  bb: "/pieces/simple/bb.svg",
+  nb: "/pieces/simple/nb.svg",
+  pb: "/pieces/simple/pb.svg",
+};
+
+export default simple;

src/main.tsx

@@ -24,6 +24,8 @@ const main = async () => {
   const board = new Board(state.boardConfig);
   const player = new Player(board, state.gameConfig);
 
+  player.watch((playing) => setState("playing", playing));
+
   /* Register handlers */
 
   const handlers = {
@@ -43,12 +45,18 @@ const main = async () => {
       player.pause();
       player.last();
     },
+    togglePlay() {
+      player.playing ? player.pause() : player.play();
+    },
+    goto(ply: number) {
+      player.pause();
+      player.goto(ply);
+    },
     toggleBorder() {
       board.toggleBorder();
       setState("boardConfig", "showBorder", !state.boardConfig.showBorder);
       saveConfig("board");
     },
-
     showBorder() {
       board.showBorder();
       setState("boardConfig", "showBorder", true);
@@ -88,13 +96,6 @@ const main = async () => {
       board.flip();
       setState("boardConfig", "flipped", !state.boardConfig.flipped);
     },
-    togglePlay() {
-      player.playing ? player.pause() : player.play();
-    },
-    goto(ply: number) {
-      player.pause();
-      player.goto(ply);
-    },
     changeBoardStyle(style: BoardStyle) {
       board.setStyle(style);
       setState("boardConfig", "boardStyle", style);
@@ -131,7 +132,13 @@ const main = async () => {
     },
     async loadFEN(fen: string, hash = true) {
       const game = new Game().loadFEN(fen);
-      setState({ pgn: "", fen, moves: game.getMoves(), ply: 0, game });
+      setState({
+        pgn: "",
+        fen,
+        moves: game.getMoves(),
+        ply: 0,
+        game,
+      });
 
       await player.load(game);
 
@@ -230,6 +237,7 @@ const main = async () => {
         target?.nodeName !== "INPUT" &&
         target?.nodeName !== "TEXTAREA"
       ) {
+        e.preventDefault();
         keyMapping[e.key]();
       }
     });

src/player/Player.ts

@@ -9,6 +9,7 @@ class Player {
   private interval = 1000;
   private game: Game = new Game();
   private ply: number = 0;
+  private callback: (playing: boolean, ply: number) => void = () => {};
   public playing: boolean = false;
 
   private firstRender: Promise<void>;
@@ -19,6 +20,10 @@ class Player {
       .then((_) => this.board.render());
   }
 
+  watch(fn: (playing: boolean, ply: number) => void) {
+    this.callback = fn;
+  }
+
   updateConfig(config: Partial<GameConfig>) {
     this.config = { ...this.config, ...config };
   }
@@ -44,6 +49,11 @@ class Player {
 
   async play() {
     this.playing = true;
+    this.callback(this.playing, this.ply);
+
+    if (this.ply === this.game.getMoves().length) {
+      this.first();
+    }
 
     while (true) {
       await delay(this.interval);
@@ -57,6 +67,7 @@ class Player {
 
   pause() {
     this.playing = false;
+    this.callback(this.playing, this.ply);
   }
 
   async prev() {
@@ -82,6 +93,7 @@ class Player {
     const ply = this.ply + 1;
 
     if (ply >= this.game.length) {
+      this.pause();
       return;
     }
 

src/state.ts

@@ -40,6 +40,7 @@ export type State = {
   ply: number;
   mobile: boolean;
   activeTab: "game" | "load";
+  playing: boolean;
 };
 
 const initialState: State = {
@@ -56,6 +57,7 @@ const initialState: State = {
   ply: 0,
   mobile,
   activeTab: "load",
+  playing: false,
 };
 
 const [state, setState] = createStore(initialState);

src/ui/components/Controls.tsx

@@ -1,7 +1,9 @@
-import { Component } from "solid-js";
+import { Component, Show } from "solid-js";
 import { Handlers } from "../../types";
 import "./Controls.css";
 
+import { state } from "../../state";
+
 const Controls: Component<{ handlers: Handlers }> = (props) => {
   return (
     <div class="controls">
@@ -22,9 +24,11 @@ const Controls: Component<{ handlers: Handlers }> = (props) => {
       <button
         class="controls__button"
         onClick={props.handlers.togglePlay}
-        title="PLAY"
+        title={state.playing ? "PAUSE" : "PLAY"}
       >
-        <i class="las la-play"></i>
+        <Show when={!state.playing} fallback={<i class="las la-pause"></i>}>
+          <i class="las la-play"></i>
+        </Show>
       </button>
       <button
         class="controls__button"