kokopu-react 3.0.1 → 3.1.0

package/src/navigationboard/NavigationBoard.tsx

@@ -0,0 +1,231 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    Kokopu-React is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import * as React from 'react';
+
+import { Database, Game, Node as GameNode, Variation } from 'kokopu';
+
+import { sanitizeBoolean, sanitizeOptional, sanitizeString } from '../sanitization';
+
+import { DynamicBoardGraphicProps, defaultDynamicBoardProps } from '../chessboard/BoardProperties';
+import { Chessboard } from '../chessboard/Chessboard';
+import { parseGame } from '../errorbox/parsing';
+import { NavigationField, firstNodeId, previousNodeId, nextNodeId, lastNodeId } from '../navigationboard/NavigationField';
+import { NavigationToolbar } from './NavigationToolbar';
+
+
+export interface NavigationBoardProps extends DynamicBoardGraphicProps {
+
+	/**
+	 * Displayed game. Can be a [kokopu.Game](https://kokopu.yo35.org/docs/current/classes/Game.html) object,
+	 * a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html) object,
+	 * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation).
+	 */
+	game: Game | Database | string;
+
+	/**
+	 * Index of the game to display (only if attribute `game` is a [kokopu.Database](https://kokopu.yo35.org/docs/current/classes/Database.html)
+	 * or a [PGN string](https://en.wikipedia.org/wiki/Portable_Game_Notation)): `0` for the first game of the database/PGN, `1` for the second one, etc.
+	 * If omitted, the first game of the database/PGN is displayed.
+	 */
+	gameIndex: number;
+
+	/**
+	 * ID of the move initially selected (or `'start'`/`'end'` for the beginning/end of the main variation) when the component is uncontrolled.
+	 * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
+	 * Ignored if the `nodeId` attribute is provided.
+	 */
+	initialNodeId: string;
+
+	/**
+	 * ID of the selected move (or `'start'`/`'end'` for the beginning/end of the main variation).
+	 * Use [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id) to get the ID of a game move.
+	 * If provided (i.e. if the component is controlled), the attribute `onNodeIdChanged` must be provided as well.
+	 */
+	nodeId?: string;
+
+	/**
+	 * Callback invoked in controlled-component mode, when the user changes the selected move.
+	 *
+	 * @param nodeId - ID of the selected move (as returned by [kokopu.Node#id](https://kokopu.yo35.org/docs/current/classes/Node.html#id)),
+	 *                 or `'start'` for the beginning of the main variation.
+	 */
+	onNodeIdChanged?: (nodeId: string) => void;
+
+	/**
+	 * Whether the board is initially flipped (i.e. seen from Black's point of view) or not, when the flip state is uncontrolled.
+	 * Ignored if the `flipped` attribute is provided.
+	 */
+	initialFlipped: boolean;
+
+	/**
+	 * Whether the board is flipped (i.e. seen from Black's point of view) or not.
+	 * If provided (i.e. if the flip state is controlled), the attribute `onFlippedChanged` must be provided as well.
+	 */
+	flipped?: boolean;
+
+	/**
+	 * Callback invoked in controlled-flip-state mode, when the user flips the board.
+	 *
+	 * @param flipped - New flip state.
+	 */
+	onFlippedChanged?: (flipped: boolean) => void;
+
+	/**
+	 * Whether the flip button is visible or not in the toolbar.
+	 */
+	flipButtonVisible: boolean;
+}
+
+
+interface NavigationBoardState {
+	nodeIdAsUncontrolled: string;
+	flippedAsUncontrolled: boolean;
+}
+
+
+/**
+ * Component displaying the positions occurring in a chess game, with navigation buttons to browse these positions.
+ */
+export class NavigationBoard extends React.Component<NavigationBoardProps, NavigationBoardState> {
+
+	static defaultProps = {
+		...defaultDynamicBoardProps(),
+		game: new Game(),
+		gameIndex: 0,
+		initialNodeId: 'start',
+		initialFlipped: false,
+		flipButtonVisible: true,
+	};
+
+	private navigationFieldRef: React.RefObject<NavigationField> = React.createRef();
+
+	constructor(props: NavigationBoardProps) {
+		super(props);
+		this.state = {
+			nodeIdAsUncontrolled: sanitizeString(props.initialNodeId),
+			flippedAsUncontrolled: sanitizeBoolean(props.initialFlipped),
+		};
+	}
+
+	render() {
+
+		// Validate the game and game-index attributes.
+		const info = parseGame(this.props.game, this.props.gameIndex, 'NavigationBoard');
+		if (info.error) {
+			return info.errorBox;
+		}
+
+		// Fetch the current node/variation.
+		const currentNodeId = sanitizeOptional(this.props.nodeId, sanitizeString) ?? this.state.nodeIdAsUncontrolled;
+		const currentNode = info.game.findById(currentNodeId) ?? info.game.mainVariation();
+
+		// Flip state.
+		const flipped = sanitizeOptional(this.props.flipped, sanitizeBoolean) ?? this.state.flippedAsUncontrolled;
+
+		return (
+			<div className="kokopu-navigationBoard">
+				{this.renderBoard(info.game, currentNode, flipped)}
+				{this.renderNavigationField(info.game, currentNode.id())}
+			</div>
+		);
+	}
+
+	private renderBoard(game: Game, node: GameNode | Variation, flipped: boolean) {
+		const position = node instanceof GameNode ? node.positionBefore() : node.initialPosition();
+		const move = node instanceof GameNode ? node.notation() : undefined;
+		return <Chessboard
+			position={position} move={move} flipped={flipped}
+			squareMarkers={node.tag('csl')} arrowMarkers={node.tag('cal')} textMarkers={node.tag('ctl')}
+			squareSize={this.props.squareSize}
+			coordinateVisible={this.props.coordinateVisible}
+			turnVisible={this.props.turnVisible}
+			colorset={this.props.colorset}
+			pieceset={this.props.pieceset}
+			smallScreenLimits={this.props.smallScreenLimits}
+			moveArrowVisible={this.props.moveArrowVisible}
+			moveArrowColor={this.props.moveArrowColor}
+			animated={this.props.animated}
+			bottomComponent={({ squareSize }) => this.renderToolbar(game, node.id(), squareSize)}
+		/>;
+	}
+
+	private renderNavigationField(game: Game, currentNodeId: string) {
+		return <NavigationField ref={this.navigationFieldRef}
+			onFirstPressed={() => this.handleNavigationButtonClicked(firstNodeId(game, currentNodeId))}
+			onPreviousPressed={() => this.handleNavigationButtonClicked(previousNodeId(game, currentNodeId))}
+			onNextPressed={() => this.handleNavigationButtonClicked(nextNodeId(game, currentNodeId))}
+			onLastPressed={() => this.handleNavigationButtonClicked(lastNodeId(game, currentNodeId))}
+		/>;
+	}
+
+	private renderToolbar(game: Game, currentNodeId: string, squareSize: number) {
+		const flipButtonVisible = sanitizeBoolean(this.props.flipButtonVisible);
+		return <NavigationToolbar flipButtonVisible={flipButtonVisible} squareSize={squareSize}
+			onFirstClicked={() => this.handleNavigationButtonClicked(firstNodeId(game, currentNodeId))}
+			onPreviousClicked={() => this.handleNavigationButtonClicked(previousNodeId(game, currentNodeId))}
+			onNextClicked={() => this.handleNavigationButtonClicked(nextNodeId(game, currentNodeId))}
+			onLastClicked={() => this.handleNavigationButtonClicked(lastNodeId(game, currentNodeId))}
+			onFlipClicked={() => this.handleFlipButtonClicked()}
+		/>;
+	}
+
+	private handleNavigationButtonClicked(targetNodeId: string | undefined) {
+		this.focus();
+		if (targetNodeId === undefined) {
+			return;
+		}
+
+		if (this.props.nodeId === undefined) { // uncontrolled-component behavior
+			this.setState({ nodeIdAsUncontrolled: targetNodeId });
+		}
+		else if (this.props.onNodeIdChanged) { // controlled-component behavior
+			this.props.onNodeIdChanged(targetNodeId);
+		}
+	}
+
+	private handleFlipButtonClicked() {
+		this.focus();
+		if (this.props.flipped === undefined) { // uncontrolled flip state
+			this.setState({ flippedAsUncontrolled: !this.state.flippedAsUncontrolled });
+		}
+		else if (this.props.onFlippedChanged) { // controlled flip state
+			this.props.onFlippedChanged(!this.props.flipped);
+		}
+	}
+
+	/**
+	 * Set the focus to the current component.
+	 *
+	 * @public
+	 */
+	focus(): void {
+		const target = this.navigationFieldRef.current;
+		// istanbul ignore else
+		if (target) {
+			target.focus();
+		}
+	}
+
+}

package/src/navigationboard/NavigationField.css

@@ -0,0 +1,36 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    Kokopu-React is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+.kokopu-focusFieldContainer {
+	position: fixed;
+	bottom: 0px;
+	right: 0px;
+	width: 0px;
+	height: 0px;
+	overflow: hidden;
+}
+
+.kokopu-focusField {
+	position: absolute; /* see #1 */
+}

package/src/navigationboard/NavigationField.tsx

@@ -0,0 +1,185 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    Kokopu-React is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+import * as React from 'react';
+
+import { Game, Variation } from 'kokopu';
+
+import './NavigationField.css';
+
+
+interface NavigationFieldProps {
+	onFirstPressed?: () => void;
+	onPreviousPressed?: () => void;
+	onNextPressed?: () => void;
+	onLastPressed?: () => void;
+	onExitPressed?: () => void;
+}
+
+
+/**
+ * Invisible field, to capture keyboard events.
+ */
+export class NavigationField extends React.Component<NavigationFieldProps> {
+
+	private focusFieldRef: React.RefObject<HTMLAnchorElement> = React.createRef();
+
+	render() {
+		return (
+			<div className="kokopu-focusFieldContainer">
+				<a className="kokopu-focusField" href="#" ref={this.focusFieldRef} onKeyDown={evt => this.handleKeyDown(evt)}></a>
+			</div>
+		);
+	}
+
+	private handleKeyDown(evt: React.KeyboardEvent<HTMLAnchorElement>) {
+		/* eslint-disable no-unused-expressions */
+		doHandleKeyDown(evt, 'Home', this.props.onFirstPressed) ||
+		doHandleKeyDown(evt, 'ArrowLeft', this.props.onPreviousPressed) ||
+		doHandleKeyDown(evt, 'ArrowRight', this.props.onNextPressed) ||
+		doHandleKeyDown(evt, 'End', this.props.onLastPressed) ||
+		doHandleKeyDown(evt, 'Escape', this.props.onExitPressed);
+		/* eslint-enable */
+	}
+
+	/**
+	 * Set the focus to the component.
+	 */
+	focus(): void {
+		const target = this.focusFieldRef.current;
+		// istanbul ignore else
+		if (target) {
+			target.focus();
+		}
+	}
+
+}
+
+
+function doHandleKeyDown(evt: React.KeyboardEvent<HTMLAnchorElement>, targetKey: string, targetCallback: (() => void) | undefined) {
+
+	// Skip if the pressed key does not match the target key.
+	if (evt.key !== targetKey) {
+		return false;
+	}
+
+	// Otherwise, invoke the callback.
+	if (targetCallback) {
+		evt.preventDefault();
+		targetCallback();
+	}
+	return true;
+}
+
+
+/**
+ * Return the ID of the main variation in the given chess game.
+ * If the given selection corresponds already at the main variation, `undefined` is returned.
+ *
+ * @param game - Considered chess game.
+ * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
+ * @public
+ */
+export function firstNodeId(game: Game, selection: string): string | undefined {
+	if (!game.findById(selection)) {
+		return undefined;
+	}
+	return selection === 'start' ? undefined : 'start';
+}
+
+
+/**
+ * Return the ID of the node immediately preceding the given selection in the given chess game.
+ * If no such node exists, `undefined` is returned.
+ *
+ * @param game - Considered chess game.
+ * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
+ * @public
+ */
+export function previousNodeId(game: Game, selection: string): string | undefined {
+	let currentNode = game.findById(selection);
+	if (!currentNode) {
+		return undefined;
+	}
+	if (currentNode instanceof Variation) {
+		currentNode = currentNode.parentNode();
+		if (!currentNode) {
+			return undefined; // This case corresponds to the first variation being selected initially.
+		}
+	}
+	while (currentNode) {
+		const previousNode = currentNode.previous();
+		if (previousNode) {
+			return previousNode.id();
+		}
+		currentNode = currentNode.parentVariation().parentNode();
+	}
+	return 'start';
+}
+
+
+/**
+ * Return the ID of the node immediately following the given selection in the given chess game.
+ * If no such node exists, `undefined` is returned.
+ *
+ * @param game - Considered chess game.
+ * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
+ * @public
+ */
+export function nextNodeId(game: Game, selection: string): string | undefined {
+	const currentNode = game.findById(selection);
+	if (!currentNode) {
+		return undefined;
+	}
+	const nextNode = currentNode instanceof Variation ? currentNode.first() : currentNode.next();
+	return nextNode ? nextNode.id() : undefined;
+}
+
+
+/**
+ * Return the ID of the node at then end of the variation in which lies the given selection in the given chess game.
+ * If the selection is already at the end its variation, `undefined` is returned.
+ *
+ * @param game - Considered chess game.
+ * @param selection - ID of the selected move (or `'start'` for the beginning of the main variation).
+ * @public
+ */
+export function lastNodeId(game: Game, selection: string): string | undefined {
+	let currentNode = game.findById(selection);
+	if (!currentNode) {
+		return undefined;
+	}
+	currentNode = currentNode instanceof Variation ? currentNode.first() : currentNode.next();
+	if (!currentNode) { // Ensure that the input node is not already the last one.
+		return undefined;
+	}
+	let currentNodeNotNull = currentNode;
+	while (true) {
+		const nextNode = currentNodeNotNull.next();
+		if (!nextNode) {
+			return currentNodeNotNull.id();
+		}
+		currentNodeNotNull = nextNode;
+	}
+}

package/src/navigationboard/NavigationToolbar.css

@@ -0,0 +1,51 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    Kokopu-React is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+.kokopu-navigationBoard {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.kokopu-navigationToolbar {
+	line-height: 0px;
+}
+
+.kokopu-navigationButton {
+	display: inline-block;
+	cursor: pointer;
+}
+
+.kokopu-navigationButton:hover {
+	opacity: 0.6;
+}
+
+* + .kokopu-navigationButton {
+	margin-left: 2px;
+}
+
+.kokopu-navigationSpacer {
+	display: inline-block;
+	width: 10px;
+}

package/src/navigationboard/NavigationToolbar.tsx

@@ -0,0 +1,174 @@
+/*!
+ * -------------------------------------------------------------------------- *
+ *                                                                            *
+ *    Kokopu-React - A React-based library of chess-related components.       *
+ *    <https://www.npmjs.com/package/kokopu-react>                            *
+ *    Copyright (C) 2021-2024  Yoann Le Montagner <yo35 -at- melix.net>       *
+ *                                                                            *
+ *    Kokopu-React is free software: you can redistribute it and/or           *
+ *    modify it under the terms of the GNU Lesser General Public License      *
+ *    as published by the Free Software Foundation, either version 3 of       *
+ *    the License, or (at your option) any later version.                     *
+ *                                                                            *
+ *    Kokopu-React is distributed in the hope that it will be useful,         *
+ *    but WITHOUT ANY WARRANTY; without even the implied warranty of          *
+ *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the            *
+ *    GNU Lesser General Public License for more details.                     *
+ *                                                                            *
+ *    You should have received a copy of the GNU Lesser General               *
+ *    Public License along with this program. If not, see                     *
+ *    <http://www.gnu.org/licenses/>.                                         *
+ *                                                                            *
+ * -------------------------------------------------------------------------- */
+
+
+
+import * as React from 'react';
+
+import { i18n } from '../i18n';
+
+import './NavigationToolbar.css';
+
+const THICKNESS = 2;
+const CHEVRON_SIZE = 7;
+const ARROW_SIZE = 5;
+const ARROW_LENGTH = 16;
+
+
+interface NavigationToolbarProps {
+	flipButtonVisible: boolean;
+	squareSize: number;
+	onFirstClicked?: () => void;
+	onPreviousClicked?: () => void;
+	onNextClicked?: () => void;
+	onLastClicked?: () => void;
+	onFlipClicked?: () => void;
+}
+
+
+/**
+ * Toolbar below the navigation board.
+ */
+export class NavigationToolbar extends React.Component<NavigationToolbarProps> {
+
+	render() {
+		const buttonSize = computeButtonSize(this.props.squareSize);
+		const marginTop = Math.round(buttonSize / 4);
+		return (
+			<div className="kokopu-navigationToolbar" style={{ marginTop: marginTop }}>
+				<NavigationButton size={buttonSize} tooltip={i18n.TOOLTIP_GO_FIRST} path={chevronPath(14, 16, -1) + ' ' + chevronPath(10, 16, -1)}
+					onClick={this.props.onFirstClicked} />
+				<NavigationButton size={buttonSize} tooltip={i18n.TOOLTIP_GO_PREVIOUS} path={chevronPath(12, 16, -1)}
+					onClick={this.props.onPreviousClicked} />
+				<NavigationButton size={buttonSize} tooltip={i18n.TOOLTIP_GO_NEXT} path={chevronPath(20, 16, 1)}
+					onClick={this.props.onNextClicked} />
+				<NavigationButton size={buttonSize} tooltip={i18n.TOOLTIP_GO_LAST} path={chevronPath(18, 16, 1) + ' ' + chevronPath(22, 16, 1)}
+					onClick={this.props.onLastClicked} />
+				{this.renderFlipButton(buttonSize)}
+			</div>
+		);
+	}
+
+	private renderFlipButton(buttonSize: number) {
+		if (!this.props.flipButtonVisible) {
+			return undefined;
+		}
+		return (<>
+			<div className="kokopu-navigationSpacer" />
+			<NavigationButton size={buttonSize} tooltip={i18n.TOOLTIP_FLIP} path={arrowPath(11, 25, 1) + ' ' + arrowPath(21, 7, -1)}
+				onClick={this.props.onFlipClicked} />
+		</>);
+	}
+
+}
+
+
+interface NavigationButtonProps {
+	size: number;
+	tooltip: string;
+	path: string;
+	onClick?: () => void;
+}
+
+
+/**
+ * Button for the navigation toolbar.
+ */
+function NavigationButton({ size, tooltip, path, onClick }: NavigationButtonProps) {
+	return (
+		<div className="kokopu-navigationButton" title={tooltip} onClick={onClick}>
+			<svg viewBox="0 0 32 32" width={size} height={size}>
+				<path d={`M 16 0 A 16 16 0 0 0 16 32 A 16 16 0 0 0 16 0 Z ${path}`} fill="currentcolor" />
+			</svg>
+		</div>
+	);
+}
+
+
+/**
+ *      * C
+ *     / \
+ *  B *   \
+ *     \   \
+ *      \   \
+ *     A *   * D
+ *      /   /
+ *     /   /
+ *  F *   /
+ *     \ /
+ *      * E
+ *
+ * (x,y) = middle of [AD]
+ */
+function chevronPath(x: number, y: number, direction: 1 | -1) {
+	const xA = x - direction * THICKNESS * Math.sqrt(2) / 2;
+	const xB = x - direction * (CHEVRON_SIZE + THICKNESS / Math.sqrt(2) / 2);
+	const xC = x - direction * (CHEVRON_SIZE - THICKNESS / Math.sqrt(2) / 2);
+	const xD = x + direction * THICKNESS * Math.sqrt(2) / 2;
+	const yB = y - direction * (CHEVRON_SIZE - THICKNESS / Math.sqrt(2) / 2);
+	const yC = y - direction * (CHEVRON_SIZE + THICKNESS / Math.sqrt(2) / 2);
+	const yE = y + direction * (CHEVRON_SIZE + THICKNESS / Math.sqrt(2) / 2);
+	const yF = y + direction * (CHEVRON_SIZE - THICKNESS / Math.sqrt(2) / 2);
+	return `M ${xA} ${y} L ${xB} ${yB} L ${xC} ${yC} L ${xD} ${y} L ${xC} ${yE} L ${xB} ${yF} Z`;
+}
+
+
+/**
+ *      D +---+ E
+ *        |   |
+ *        |   |
+ *        |   |
+ *   B *  |   |  * G
+ *    / \ |   | / \
+ * A *   \|   |/   * H
+ *    \   *   *   /
+ *     \  C   F  /
+ *      \   O   /
+ *       \  *  /
+ *        \   /
+ *         \ /
+ *          *
+ *        (x,y)
+ */
+function arrowPath(x: number, y: number, direction: 1 | -1) {
+	const xA = x - direction * (ARROW_SIZE + THICKNESS / Math.sqrt(2) / 2);
+	const xB = x - direction * (ARROW_SIZE - THICKNESS / Math.sqrt(2) / 2);
+	const xC = x - direction * THICKNESS / 2;
+	const xF = x + direction * THICKNESS / 2;
+	const xG = x + direction * (ARROW_SIZE - THICKNESS / Math.sqrt(2) / 2);
+	const xH = x + direction * (ARROW_SIZE + THICKNESS / Math.sqrt(2) / 2);
+	const y0 = y - direction * THICKNESS * Math.sqrt(2) / 2;
+	const yA = y0 - direction * (ARROW_SIZE - THICKNESS / Math.sqrt(2) / 2);
+	const yB = y0 - direction * (ARROW_SIZE + THICKNESS / Math.sqrt(2) / 2);
+	const yC = yB + (xC - xB);
+	const yD = y - direction * ARROW_LENGTH;
+	return `M ${x} ${y} L ${xA} ${yA} L ${xB} ${yB} L ${xC} ${yC} V ${yD} H ${xF} V ${yC} L ${xG} ${yB} L ${xH} ${yA} Z`;
+}
+
+
+/**
+ * Return the height/width of the buttons assuming the given square size.
+ */
+function computeButtonSize(squareSize: number) {
+	return Math.round((squareSize * 2 + 116) / 7);
+}