WIP

src/board/Board.ts

@@ -6,7 +6,7 @@ import drawMoveIndicators from "./layers/drawMoveIndicators";
 import drawPieces from "./layers/drawPieces";
 import drawHeader from "./layers/drawHeader";
 import drawExtraInfo from "./layers/drawExtraInfo";
-import boards from "./styles-board";
+import boards from "./styles-board/boardStyles";
 import isLink from "../utils/isLink";
 import { PiecesStyle } from "./styles-pieces/piecesStyles";
 

src/board/styles-pieces/piecesStyles.ts

@@ -3,7 +3,8 @@ const piecesStyles = [
   "alfonso_x",
   "alpha",
   "anarchy",
-  "anarchy_color",
+  "anarchy_candy",
+  "anarchy_sepia",
   "berlin",
   "california",
   "cardinal",

src/boot/loadFromUrl.ts

@@ -1,10 +1,18 @@
-import { Handlers } from "./../types";
+import { PiecesStyle } from "./../board/styles-pieces/piecesStyles";
+import { BoardStyle, Handlers } from "./../types";
 import { setState } from "../state";
 import link from "../persistance/link";
+import boardStyles from "../board/styles-board/boardStyles";
+import piecesStyles from "../board/styles-pieces/piecesStyles";
+import Board from "../board/Board";
 
-const loadFromUrl = async (refreshHash: boolean, handlers: Handlers) => {
+const loadFromUrl = async (
+  refreshHash: boolean,
+  handlers: Handlers,
+  board: Board
+) => {
   setState("refreshHash", refreshHash);
-  const { pgn, fen, side, ply } = await link.read();
+  const { pgn, fen, side, ply, boardStyle, piecesStyle } = await link.read();
 
   await (pgn
     ? handlers.loadPGN(pgn, side, ply)
@@ -19,6 +27,18 @@ const loadFromUrl = async (refreshHash: boolean, handlers: Handlers) => {
     handlers.goto(ply);
   }
 
+  if (boardStyle && Object.keys(boardStyles).includes(boardStyle)) {
+    setState("boardConfig", "boardStyle", boardStyle as BoardStyle);
+    board.setStyle(boardStyle as BoardStyle);
+  }
+
+  console.log({ piecesStyle });
+
+  if (piecesStyle && piecesStyles.includes(piecesStyle as PiecesStyle)) {
+    setState("boardConfig", "piecesStyle", piecesStyle as PiecesStyle);
+    board.setPiecesStyle(piecesStyle as PiecesStyle);
+  }
+
   setState("refreshHash", true);
 };
 

src/main.tsx

@@ -7,7 +7,6 @@ import App from "./ui/App";
 
 import { state, setState } from "./state";
 
-import link from "./persistance/link";
 import registerHandlers from "./boot/registerHandlers";
 import loadFromUrl from "./boot/loadFromUrl";
 import registerEvents from "./boot/registerEvents";
@@ -20,10 +19,6 @@ const main = async () => {
 
   player.watch((playing) => setState("playing", playing));
 
-  /* Load game from url hash */
-
-  link.read();
-
   /* Register handlers */
 
   const handlers = registerHandlers(player, board);
@@ -42,7 +37,7 @@ const main = async () => {
   /* Initialize the game */
 
   await player.init();
-  await loadFromUrl(false, handlers);
+  await loadFromUrl(false, handlers, board);
 
   /* Register events */
 

src/persistance/link.ts

@@ -59,6 +59,7 @@ const link = {
   },
 
   async read() {
+    const url = new URL(location.href);
     const [type, ...rest] = location.hash.split("/");
 
     if (/fen/.test(type)) {
@@ -93,6 +94,8 @@ const link = {
       fen: linkData.fen,
       side: linkData.side,
       ply: linkData.ply,
+      boardStyle: url.searchParams.get("b"),
+      piecesStyle: url.searchParams.get("p"),
     };
   },
 

src/player/sfx.ts

@@ -63,19 +63,19 @@ const sfx = {
   }),
   toyMove: new Howl({
     src: ["/sfx/anarchy/toy-move.mp3"],
-    volume: 0.6,
+    volume: 0.9,
   }),
   toyTake: new Howl({
     src: ["/sfx/anarchy/toy-take.mp3"],
-    volume: 0.5,
+    volume: 0.8,
   }),
   deathMove: new Howl({
     src: ["/sfx/anarchy/death-move.mp3"],
-    volume: 0.3,
+    volume: 0.4,
   }),
   deathTake: new Howl({
     src: ["/sfx/anarchy/death-take.mp3"],
-    volume: 0.2,
+    volume: 0.25,
   }),
   death: new Howl({
     src: ["/sfx/anarchy/checkmate.mp3"],
@@ -83,7 +83,7 @@ const sfx = {
   }),
   hit: new Howl({
     src: ["/sfx/anarchy/hit.mp3"],
-    volume: 0.4,
+    volume: 0.25,
   }),
 };
 

src/state.ts

@@ -14,7 +14,7 @@ const initialBoardConfig: BoardConfig = {
   tiles: 8,
   boardStyle: "standard",
   piecesStyle: "tatiana",
-  showBorder: !mobile,
+  showBorder: false,
   showExtraInfo: true,
   showMaterial: true,
   showMoveIndicator: true,

src/types.ts

@@ -1,5 +1,5 @@
 import { Move } from "chess.js";
-import stylesBoard from "./board/styles-board";
+import stylesBoard from "./board/styles-board/boardStyles";
 import { PiecesStyle } from "./board/styles-pieces/piecesStyles";
 
 export type GradientDir =

src/ui/components/Boards.tsx

@@ -2,7 +2,7 @@ import { Component, For, createSignal } from "solid-js";
 import { Handlers, StyleCategory, BoardStyle, Style } from "../../types";
 import Scrollable from "./reusable/Scrollable";
 import "./Boards.css";
-import styles from "../../board/styles-board";
+import styles from "../../board/styles-board/boardStyles";
 import Board from "../../board/Board";
 import { state, setState } from "../../state";
 

src/utils/isPGN.ts

@@ -1,5 +1,5 @@
 const REGEX =
-  /((\[[a-z0-9]+ +"[^"\n\r]+"](\r\n|\r|\n))*(\r\n|\r|\n)+){0,1}\d+\. +[a-h1-8x+#=]+/i;
+  /((\[[a-z0-9]+ +"[^"\n\r]+"](\r\n|\r|\n))*(\r\n|\r|\n)+){0,1}\d+\. *[a-h1-8x+#=]+/i;
 
 const isPGN = (data: string) => {
   return REGEX.test(data);