diff --git a/client/package-lock.json b/client/package-lock.json index 4f3d974..a43f296 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -14,6 +14,7 @@ "boolify-string": "^2.0.2", "bootstrap": "^5.3.3", "deepcopy": "^2.1.0", + "detect-browser": "^5.3.0", "howler": "^2.2.4", "i18next": "^23.10.1", "i18next-browser-languagedetector": "^7.2.1", @@ -2022,6 +2023,12 @@ "node": ">=6" } }, + "node_modules/detect-browser": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.3.0.tgz", + "integrity": "sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==", + "license": "MIT" + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", diff --git a/client/package.json b/client/package.json index 38e7660..ac5b06b 100644 --- a/client/package.json +++ b/client/package.json @@ -17,6 +17,7 @@ "boolify-string": "^2.0.2", "bootstrap": "^5.3.3", "deepcopy": "^2.1.0", + "detect-browser": "^5.3.0", "howler": "^2.2.4", "i18next": "^23.10.1", "i18next-browser-languagedetector": "^7.2.1", diff --git a/client/src/pages/game.tsx b/client/src/pages/game.tsx index b6da079..68cb975 100644 --- a/client/src/pages/game.tsx +++ b/client/src/pages/game.tsx @@ -1,6 +1,7 @@ import EventManager from "@lomray/event-manager" import { bindKeyCombo, unbindKeyCombo } from "@rwh/keystrokes" import deepcopy from "deepcopy" +import { detect } from "detect-browser" import { useEffect, useMemo } from "react" import Button from "react-bootstrap/Button" import ButtonGroup from "react-bootstrap/ButtonGroup" @@ -364,6 +365,13 @@ export function Game() { : t("startGameShortcut") : "" } + aria-label={ + detect()?.name === "firefox" && canStartOrStopGame() + ? game.state !== GameState.Open + ? `${t("stopGameShortcut")} ${t("stopGame")}` + : `${t("startGameShortcut")} ${t("startGame")}` + : "" + } > {canStartOrStopGame() ? game.state !== GameState.Open diff --git a/client/src/pages/game/slot-selector.tsx b/client/src/pages/game/slot-selector.tsx index 394c4bc..ffbd822 100644 --- a/client/src/pages/game/slot-selector.tsx +++ b/client/src/pages/game/slot-selector.tsx @@ -1,5 +1,6 @@ import EventManager from "@lomray/event-manager" import { bindKeyCombo, unbindKeyCombo } from "@rwh/keystrokes" +import { detect } from "detect-browser" import { useEffect, useState } from "react" import Button from "react-bootstrap/Button" import ToggleButton from "react-bootstrap/ToggleButton" @@ -380,6 +381,11 @@ export default ({ game }: { game: Game }) => { className="me-2" onClick={async () => await confirm(false)} aria-keyshortcuts={t("noShortcut")} + aria-label={ + detect()?.name === "firefox" + ? `${t("noShortcut")} ${t("no")}` + : "" + } > {t("no")} @@ -387,6 +393,11 @@ export default ({ game }: { game: Game }) => { className="me-2" onClick={async () => await confirm(true)} aria-keyshortcuts={t("yesShortcut")} + aria-label={ + detect()?.name === "firefox" + ? `${t("yesShortcut")} ${t("yes")}` + : "" + } > {t("yes")} @@ -406,7 +417,24 @@ export default ({ game }: { game: Game }) => { type="radio" defaultValue="0" value={selectedSlot} - onChange={(e) => setSelectedSlot(e)} + onChange={(e) => { + setSelectedKeySlot(e) + setSelectedSlot(e) + + let p = game.players.find( + (p) => p.turn_player, + ) as Player + + EventManager.publish(Events.slotSelected, { + unavailable: true, + slot: null, + from_year: p.slots[0].to_year, + to_year: + p.slots[p.slots.length - 1] + .from_year, + slot_count: p.slots.length, + } satisfies SlotSelectedData) + }} > { ? t("submitGuessShortcut") : "" } + aria-label={ + detect()?.name === "firefox" && + ((actionRequired() === PlayerState.Guessing && + selectedSlot !== "0") || + actionRequired() === PlayerState.Intercepting) + ? `${t("submitGuessShortcut")} ${t("submitGuess")}` + : "" + } > {actionRequired() === PlayerState.Guessing || actionRequired() === PlayerState.Intercepting diff --git a/client/src/pages/lobby.tsx b/client/src/pages/lobby.tsx index e87e532..30a517c 100644 --- a/client/src/pages/lobby.tsx +++ b/client/src/pages/lobby.tsx @@ -1,5 +1,6 @@ import EventManager from "@lomray/event-manager" import { bindKeyCombo, unbindKeyCombo } from "@rwh/keystrokes" +import { detect } from "detect-browser" import { useEffect, useMemo } from "react" import Dropdown from "react-bootstrap/Dropdown" import Table from "react-bootstrap/Table" @@ -75,18 +76,33 @@ export function Lobby() { createGame(GameMode.Public)} aria-keyshortcuts={t("publicGameShortcut")} + aria-label={ + detect()?.name === "firefox" + ? `${t("publicGameShortcut")} ${t("publicGame")}` + : "" + } > {t("publicGame")} createGame(GameMode.Private)} aria-keyshortcuts={t("privateGameShortcut")} + aria-label={ + detect()?.name === "firefox" + ? `${t("privateGameShortcut")} ${t("privateGame")}` + : "" + } > {t("privateGame")} createGame(GameMode.Local)} aria-keyshortcuts={t("localGameShortcut")} + aria-label={ + detect()?.name === "firefox" + ? `${t("localGameShortcut")} ${t("localGame")}` + : "" + } > {t("localGame")}