From ec4a63b59b88f56cc732659759ae0ff151c3fb4c Mon Sep 17 00:00:00 2001 From: Maciej Caderek Date: Fri, 18 Feb 2022 04:21:35 +0100 Subject: [PATCH] WIP --- src/board/Board.ts | 30 ++++++++++++++++++++++- src/game/Game.ts | 14 ++++++++++- src/main.tsx | 49 +++++++++++++++++++++++++++---------- src/state.ts | 6 ++++- src/ui/App.css | 2 +- src/ui/components/Info.tsx | 33 +++++++++++++++---------- src/ui/components/Share.tsx | 6 ++++- src/utils/isLink.ts | 14 +++++++++++ 8 files changed, 123 insertions(+), 31 deletions(-) create mode 100644 src/utils/isLink.ts diff --git a/src/board/Board.ts b/src/board/Board.ts index 2572089..a8a43ee 100644 --- a/src/board/Board.ts +++ b/src/board/Board.ts @@ -7,6 +7,7 @@ import drawPieces from "./layers/drawPieces"; import drawHeader from "./layers/drawHeader"; import drawExtraInfo from "./layers/drawExtraInfo"; import boards from "./styles-board"; +import isLink from "../utils/isLink"; const defaultConfig: BoardConfig = { size: 720, @@ -130,6 +131,7 @@ class Board { setStyle(style: BoardStyle) { this.style = boards[style]; + this.cfg.boardStyle = style; this.refresh(); return this; } @@ -146,6 +148,26 @@ class Board { return this; } + flipWhite() { + if (!this.cfg.flipped) { + return; + } + + this.cfg.flipped = false; + this.refresh(); + return this; + } + + flipBlack() { + if (this.cfg.flipped) { + return; + } + + this.cfg.flipped = true; + this.refresh(); + return this; + } + hideBorder() { this.cfg.showBorder = false; this.setSize(this.size); @@ -182,8 +204,14 @@ class Board { Black: "Anonymous", WhitePretty: "Anonymous", BlackPretty: "Anonymous", + Site: isLink(this.header.Site) ? null : this.header.Site, } - : this.header; + : { + ...this.header, + Site: isLink(this.header.Site) + ? (this.header.Site as string).replace(/^http[s]*:\/\//, "") + : this.header.Site, + }; } async titleFrame(header: Header) { diff --git a/src/game/Game.ts b/src/game/Game.ts index 1785a1a..d23803e 100644 --- a/src/game/Game.ts +++ b/src/game/Game.ts @@ -1,7 +1,8 @@ -import { PieceType, PieceColor, BoardData, Position } from "../types"; +import { PieceType, PieceColor, BoardData, Position, Header } from "../types"; import { Chess, ChessInstance } from "chess.js"; import { cleanPGN } from "./PGNHelpers"; import { formatDate, formatName } from "../utils/formatters"; +import isLink from "../utils/isLink"; const MATERIAL_VALUE: Map = new Map([ ["q", 9], @@ -196,6 +197,17 @@ class Game { return this.game.pgn(); } + get anonymousPGN() { + const pgn = this.game + .pgn() + .replace(/\[White .+\]/, '[White "Anonymous"]') + .replace(/\[Black .+\]/, '[Black "Anonymous"]'); + + return isLink(this.header.Site) + ? pgn.replace(/\[Site .+\]/, '[Site "?"]') + : pgn; + } + getPosition(ply: number) { const position = this.positions[ply]; diff --git a/src/main.tsx b/src/main.tsx index 2712c7a..8a53a9a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -71,6 +71,13 @@ const main = async () => { toggleAnonymous() { setState("boardConfig", "anonymous", !state.boardConfig.anonymous); board.updateConfig({ anonymous: state.boardConfig.anonymous }); + + if (state.pgn !== "") { + const pgn = state.boardConfig.anonymous + ? state.game.anonymousPGN + : state.game.pgn; + window.location.hash = `v1/pgn/${compressPGN(pgn)}`; + } }, toggleTitleScreen() { setState("gameConfig", "titleScreen", !state.gameConfig.titleScreen); @@ -98,7 +105,7 @@ const main = async () => { setState("boardConfig", "piecesStyle", style); saveConfig("board"); }, - async loadPGN(pgn: string) { + async loadPGN(pgn: string, side: "w" | "b" = "w") { const game = new Game().loadPGN(pgn); setState({ pgn: game.pgn, @@ -111,23 +118,38 @@ const main = async () => { await player.load(game); setState("activeTab", "game"); + + if (side === "w") { + board.flipWhite(); + } else { + board.flipBlack(); + } + + setState("boardConfig", "flipped", side === "b"); + document.title = `SHORTCASTLE - ${game.getTitle({ anonymous: false })}`; }, - async loadFEN(fen: string) { + async loadFEN(fen: string, hash = true) { const game = new Game().loadFEN(fen); setState({ pgn: "", fen, moves: game.getMoves(), ply: 0, game }); - window.location.hash = `v1/fen/${state.fen}`; - await player.load(game); - setState("activeTab", "game"); - if ( - game.getPosition(0).turn === "b" && - state.boardConfig.flipped === false - ) { - setState("boardConfig", "flipped", true); - board.flip(); + await player.load(game); + + if (hash) { + window.location.hash = `v1/fen/${state.fen}`; + setState("activeTab", "game"); } + const side = game.getPosition(0).turn; + + if (side === "w") { + board.flipWhite(); + } else { + board.flipBlack(); + } + + setState("boardConfig", "flipped", side === "b"); + document.title = `SHORTCASTLE - FEN ${fen}`; }, async importPGN(link: string) { @@ -137,7 +159,7 @@ const main = async () => { return; } - await this.loadPGN(result.pgn); + await this.loadPGN(result.pgn, result.side); }, async downloadImage() { await new Promise((resolve) => setTimeout(resolve, 0)); @@ -182,7 +204,8 @@ const main = async () => { : fen ? handlers.loadFEN(fen) : handlers.loadFEN( - "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1" + "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1", + false )); /* Register events */ diff --git a/src/state.ts b/src/state.ts index c08611a..cf075fa 100644 --- a/src/state.ts +++ b/src/state.ts @@ -43,7 +43,11 @@ export type State = { }; const initialState: State = { - boardConfig: { ...initialBoardConfig, ...saved.boardConfig }, + boardConfig: { + ...initialBoardConfig, + ...saved.boardConfig, + anonymous: false, + }, gameConfig: { ...initialGameConfig, ...saved.gameConfig }, game: new Game(), pgn: "", diff --git a/src/ui/App.css b/src/ui/App.css index 3e21d5a..97c9ccc 100644 --- a/src/ui/App.css +++ b/src/ui/App.css @@ -162,7 +162,7 @@ a:hover { } .board { - border: solid 1rem var(--color-bg-block); + box-shadow: 0 0 2rem #00000099; border-radius: 5px; max-width: 100%; max-height: 100%; diff --git a/src/ui/components/Info.tsx b/src/ui/components/Info.tsx index 9efa4f1..4c305ee 100644 --- a/src/ui/components/Info.tsx +++ b/src/ui/components/Info.tsx @@ -3,6 +3,7 @@ import { Handlers } from "../../types"; import { state } from "../../state"; import "./Info.css"; import isSafeLink from "../../utils/isSafeLink"; +import isLink from "../../utils/isLink"; const Info: Component<{ handlers: Handlers }> = () => { return ( @@ -10,17 +11,17 @@ const Info: Component<{ handlers: Handlers }> = () => {

- {state.game.header.WhitePretty}{" "} - - {state.game.header.WhiteElo ?? "????"} - + + {state.game.header.WhitePretty}{" "} + + {state.game.header.WhiteElo}

- {state.game.header.BlackPretty}{" "} - - {state.game.header.BlackElo ?? "????"} - + + {state.game.header.BlackPretty}{" "} + + {state.game.header.BlackElo}

@@ -35,12 +36,18 @@ const Info: Component<{ handlers: Handlers }> = () => {

- - {state.game.header.Site?.replace(/^https:\/\//, "")} - + + + {state.game.header.Site?.replace(/^https:\/\//, "")} + +

diff --git a/src/ui/components/Share.tsx b/src/ui/components/Share.tsx index 3034480..9e72c5e 100644 --- a/src/ui/components/Share.tsx +++ b/src/ui/components/Share.tsx @@ -192,7 +192,11 @@ const Share: Component<{ handlers: Handlers }> = (props) => {