Merge branch 'h2-keystrokes' into development

Timtam · Sep 25, 2024 · 5d1733e · 5d1733e
2 parents de09909 + 04283d6
commit 5d1733e
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 1 deletion.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git 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
@@ -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
@@ -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,13 +381,23 @@ 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")}
                     </Button>
                     <Button
                         className="me-2"
                         onClick={async () => await confirm(true)}
                         aria-keyshortcuts={t("yesShortcut")}
+                        aria-label={
+                            detect()?.name === "firefox"
+                                ? `${t("yesShortcut")} ${t("yes")}`
+                                : ""
+                        }
                     >
                         {t("yes")}
                     </Button>
@@ -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)
+                                }}
                             >
                                 <ToggleButton
                                     className="me-2 mb-2 border-0"
@@ -514,6 +542,14 @@ export default ({ game }: { game: Game }) => {
                                 ? 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
@@ -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() {
                     <Dropdown.Item
                         onClick={() => createGame(GameMode.Public)}
                         aria-keyshortcuts={t("publicGameShortcut")}
+                        aria-label={
+                            detect()?.name === "firefox"
+                                ? `${t("publicGameShortcut")} ${t("publicGame")}`
+                                : ""
+                        }
                     >
                         {t("publicGame")}
                     </Dropdown.Item>
                     <Dropdown.Item
                         onClick={() => createGame(GameMode.Private)}
                         aria-keyshortcuts={t("privateGameShortcut")}
+                        aria-label={
+                            detect()?.name === "firefox"
+                                ? `${t("privateGameShortcut")} ${t("privateGame")}`
+                                : ""
+                        }
                     >
                         {t("privateGame")}
                     </Dropdown.Item>
                     <Dropdown.Item
                         onClick={() => createGame(GameMode.Local)}
                         aria-keyshortcuts={t("localGameShortcut")}
+                        aria-label={
+                            detect()?.name === "firefox"
+                                ? `${t("localGameShortcut")} ${t("localGame")}`
+                                : ""
+                        }
                     >
                         {t("localGame")}
                     </Dropdown.Item>