From 0d3d7f6143e9e5928df2cf5cab93e9f75d4426c4 Mon Sep 17 00:00:00 2001 From: Maciej Caderek Date: Sat, 19 Feb 2022 04:53:42 +0100 Subject: [PATCH] WIP --- public/pieces/cases/bb.svg | 4 ++++ public/pieces/cases/bw.svg | 4 ++++ public/pieces/cases/kb.svg | 4 ++++ public/pieces/cases/kw.svg | 4 ++++ public/pieces/cases/nb.svg | 4 ++++ public/pieces/cases/nw.svg | 4 ++++ public/pieces/cases/pb.svg | 3 +++ public/pieces/cases/pw.svg | 4 ++++ public/pieces/cases/qb.svg | 4 ++++ public/pieces/cases/qw.svg | 4 ++++ public/pieces/cases/rb.svg | 4 ++++ public/pieces/cases/rw.svg | 4 ++++ public/pieces/color/bb.svg | 4 ++++ public/pieces/color/bw.svg | 4 ++++ public/pieces/color/kb.svg | 4 ++++ public/pieces/color/kw.svg | 4 ++++ public/pieces/color/nb.svg | 4 ++++ public/pieces/color/nw.svg | 4 ++++ public/pieces/color/pb.svg | 3 +++ public/pieces/color/pw.svg | 4 ++++ public/pieces/color/qb.svg | 4 ++++ public/pieces/color/qw.svg | 4 ++++ public/pieces/color/rb.svg | 4 ++++ public/pieces/color/rw.svg | 4 ++++ public/pieces/simple/bb.svg | 3 +++ public/pieces/simple/bw.svg | 4 ++++ public/pieces/simple/kb.svg | 3 +++ public/pieces/simple/kw.svg | 4 ++++ public/pieces/simple/nb.svg | 3 +++ public/pieces/simple/nw.svg | 4 ++++ public/pieces/simple/pb.svg | 3 +++ public/pieces/simple/pw.svg | 4 ++++ public/pieces/simple/qb.svg | 3 +++ public/pieces/simple/qw.svg | 4 ++++ public/pieces/simple/rb.svg | 3 +++ public/pieces/simple/rw.svg | 4 ++++ src/board/styles-pieces/cases.ts | 16 ++++++++++++++++ src/board/styles-pieces/color.ts | 16 ++++++++++++++++ src/board/styles-pieces/index.ts | 6 ++++++ src/board/styles-pieces/simple.ts | 16 ++++++++++++++++ src/main.tsx | 26 +++++++++++++++++--------- src/player/Player.ts | 12 ++++++++++++ src/state.ts | 2 ++ src/ui/components/Controls.tsx | 10 +++++++--- 44 files changed, 228 insertions(+), 12 deletions(-) create mode 100644 public/pieces/cases/bb.svg create mode 100644 public/pieces/cases/bw.svg create mode 100644 public/pieces/cases/kb.svg create mode 100644 public/pieces/cases/kw.svg create mode 100644 public/pieces/cases/nb.svg create mode 100644 public/pieces/cases/nw.svg create mode 100644 public/pieces/cases/pb.svg create mode 100644 public/pieces/cases/pw.svg create mode 100644 public/pieces/cases/qb.svg create mode 100644 public/pieces/cases/qw.svg create mode 100644 public/pieces/cases/rb.svg create mode 100644 public/pieces/cases/rw.svg create mode 100644 public/pieces/color/bb.svg create mode 100644 public/pieces/color/bw.svg create mode 100644 public/pieces/color/kb.svg create mode 100644 public/pieces/color/kw.svg create mode 100644 public/pieces/color/nb.svg create mode 100644 public/pieces/color/nw.svg create mode 100644 public/pieces/color/pb.svg create mode 100644 public/pieces/color/pw.svg create mode 100644 public/pieces/color/qb.svg create mode 100644 public/pieces/color/qw.svg create mode 100644 public/pieces/color/rb.svg create mode 100644 public/pieces/color/rw.svg create mode 100644 public/pieces/simple/bb.svg create mode 100644 public/pieces/simple/bw.svg create mode 100644 public/pieces/simple/kb.svg create mode 100644 public/pieces/simple/kw.svg create mode 100644 public/pieces/simple/nb.svg create mode 100644 public/pieces/simple/nw.svg create mode 100644 public/pieces/simple/pb.svg create mode 100644 public/pieces/simple/pw.svg create mode 100644 public/pieces/simple/qb.svg create mode 100644 public/pieces/simple/qw.svg create mode 100644 public/pieces/simple/rb.svg create mode 100644 public/pieces/simple/rw.svg create mode 100755 src/board/styles-pieces/cases.ts create mode 100755 src/board/styles-pieces/color.ts create mode 100755 src/board/styles-pieces/simple.ts diff --git a/public/pieces/cases/bb.svg b/public/pieces/cases/bb.svg new file mode 100644 index 0000000..f203c0b --- /dev/null +++ b/public/pieces/cases/bb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/cases/bw.svg b/public/pieces/cases/bw.svg new file mode 100644 index 0000000..8ac7d1f --- /dev/null +++ b/public/pieces/cases/bw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/cases/kb.svg b/public/pieces/cases/kb.svg new file mode 100644 index 0000000..4e8739a --- /dev/null +++ b/public/pieces/cases/kb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/cases/kw.svg b/public/pieces/cases/kw.svg new file mode 100644 index 0000000..62719dc --- /dev/null +++ b/public/pieces/cases/kw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/cases/nb.svg b/public/pieces/cases/nb.svg new file mode 100644 index 0000000..96d3b27 --- /dev/null +++ b/public/pieces/cases/nb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/cases/nw.svg b/public/pieces/cases/nw.svg new file mode 100644 index 0000000..29e6b8e --- /dev/null +++ b/public/pieces/cases/nw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/cases/pb.svg b/public/pieces/cases/pb.svg new file mode 100644 index 0000000..8171055 --- /dev/null +++ b/public/pieces/cases/pb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/cases/pw.svg b/public/pieces/cases/pw.svg new file mode 100644 index 0000000..f7ec922 --- /dev/null +++ b/public/pieces/cases/pw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/cases/qb.svg b/public/pieces/cases/qb.svg new file mode 100644 index 0000000..f7a5a9e --- /dev/null +++ b/public/pieces/cases/qb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/cases/qw.svg b/public/pieces/cases/qw.svg new file mode 100644 index 0000000..1799c5b --- /dev/null +++ b/public/pieces/cases/qw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/cases/rb.svg b/public/pieces/cases/rb.svg new file mode 100644 index 0000000..b86107a --- /dev/null +++ b/public/pieces/cases/rb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/cases/rw.svg b/public/pieces/cases/rw.svg new file mode 100644 index 0000000..3cbbcd6 --- /dev/null +++ b/public/pieces/cases/rw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/color/bb.svg b/public/pieces/color/bb.svg new file mode 100644 index 0000000..fe332d6 --- /dev/null +++ b/public/pieces/color/bb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/color/bw.svg b/public/pieces/color/bw.svg new file mode 100644 index 0000000..540371c --- /dev/null +++ b/public/pieces/color/bw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/color/kb.svg b/public/pieces/color/kb.svg new file mode 100644 index 0000000..c8c00f5 --- /dev/null +++ b/public/pieces/color/kb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/color/kw.svg b/public/pieces/color/kw.svg new file mode 100644 index 0000000..19b48fc --- /dev/null +++ b/public/pieces/color/kw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/color/nb.svg b/public/pieces/color/nb.svg new file mode 100644 index 0000000..3411b20 --- /dev/null +++ b/public/pieces/color/nb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/color/nw.svg b/public/pieces/color/nw.svg new file mode 100644 index 0000000..859b3d0 --- /dev/null +++ b/public/pieces/color/nw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/color/pb.svg b/public/pieces/color/pb.svg new file mode 100644 index 0000000..8171055 --- /dev/null +++ b/public/pieces/color/pb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/color/pw.svg b/public/pieces/color/pw.svg new file mode 100644 index 0000000..f7ec922 --- /dev/null +++ b/public/pieces/color/pw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/color/qb.svg b/public/pieces/color/qb.svg new file mode 100644 index 0000000..c1f2544 --- /dev/null +++ b/public/pieces/color/qb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/color/qw.svg b/public/pieces/color/qw.svg new file mode 100644 index 0000000..9f58455 --- /dev/null +++ b/public/pieces/color/qw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/color/rb.svg b/public/pieces/color/rb.svg new file mode 100644 index 0000000..f7fce43 --- /dev/null +++ b/public/pieces/color/rb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/color/rw.svg b/public/pieces/color/rw.svg new file mode 100644 index 0000000..54ad2bc --- /dev/null +++ b/public/pieces/color/rw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/simple/bb.svg b/public/pieces/simple/bb.svg new file mode 100644 index 0000000..108a37e --- /dev/null +++ b/public/pieces/simple/bb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/simple/bw.svg b/public/pieces/simple/bw.svg new file mode 100644 index 0000000..72fc763 --- /dev/null +++ b/public/pieces/simple/bw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/simple/kb.svg b/public/pieces/simple/kb.svg new file mode 100644 index 0000000..9faa9a5 --- /dev/null +++ b/public/pieces/simple/kb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/simple/kw.svg b/public/pieces/simple/kw.svg new file mode 100644 index 0000000..0585815 --- /dev/null +++ b/public/pieces/simple/kw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/simple/nb.svg b/public/pieces/simple/nb.svg new file mode 100644 index 0000000..f89797d --- /dev/null +++ b/public/pieces/simple/nb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/simple/nw.svg b/public/pieces/simple/nw.svg new file mode 100644 index 0000000..590b9ab --- /dev/null +++ b/public/pieces/simple/nw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/simple/pb.svg b/public/pieces/simple/pb.svg new file mode 100644 index 0000000..3726e8d --- /dev/null +++ b/public/pieces/simple/pb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/simple/pw.svg b/public/pieces/simple/pw.svg new file mode 100644 index 0000000..8854bb0 --- /dev/null +++ b/public/pieces/simple/pw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/simple/qb.svg b/public/pieces/simple/qb.svg new file mode 100644 index 0000000..ca41bd5 --- /dev/null +++ b/public/pieces/simple/qb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/simple/qw.svg b/public/pieces/simple/qw.svg new file mode 100644 index 0000000..c1c9977 --- /dev/null +++ b/public/pieces/simple/qw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/pieces/simple/rb.svg b/public/pieces/simple/rb.svg new file mode 100644 index 0000000..ab6d30e --- /dev/null +++ b/public/pieces/simple/rb.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/pieces/simple/rw.svg b/public/pieces/simple/rw.svg new file mode 100644 index 0000000..2781d79 --- /dev/null +++ b/public/pieces/simple/rw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/board/styles-pieces/cases.ts b/src/board/styles-pieces/cases.ts new file mode 100755 index 0000000..807e052 --- /dev/null +++ b/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; diff --git a/src/board/styles-pieces/color.ts b/src/board/styles-pieces/color.ts new file mode 100755 index 0000000..3f5d390 --- /dev/null +++ b/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; diff --git a/src/board/styles-pieces/index.ts b/src/board/styles-pieces/index.ts index 998b22a..cf3bea5 100755 --- a/src/board/styles-pieces/index.ts +++ b/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, }; diff --git a/src/board/styles-pieces/simple.ts b/src/board/styles-pieces/simple.ts new file mode 100755 index 0000000..1ab5d42 --- /dev/null +++ b/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; diff --git a/src/main.tsx b/src/main.tsx index 8a53a9a..3e6e2c5 100644 --- a/src/main.tsx +++ b/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](); } }); diff --git a/src/player/Player.ts b/src/player/Player.ts index 0f5136c..490d6f2 100644 --- a/src/player/Player.ts +++ b/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; @@ -19,6 +20,10 @@ class Player { .then((_) => this.board.render()); } + watch(fn: (playing: boolean, ply: number) => void) { + this.callback = fn; + } + updateConfig(config: Partial) { 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; } diff --git a/src/state.ts b/src/state.ts index cf075fa..9002681 100644 --- a/src/state.ts +++ b/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); diff --git a/src/ui/components/Controls.tsx b/src/ui/components/Controls.tsx index 87ec11a..f4ec6f0 100644 --- a/src/ui/components/Controls.tsx +++ b/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 (
@@ -22,9 +24,11 @@ const Controls: Component<{ handlers: Handlers }> = (props) => {