merged a huge portion of keystrokes support

Squashed commit of the following: commit 9c65f1c Author: Toni Barth <[email protected]> Date: Wed Aug 7 15:29:15 2024 +0200 add keystrokes for confirming commit 17919d8 Author: Toni Barth <[email protected]> Date: Wed Aug 7 15:04:09 2024 +0200 map alt + keystrokes to alt+shift instead decide against hiding the aria-live control to allow for instant speech feedback commit 720fe1e Author: Toni Barth <[email protected]> Date: Wed Aug 7 14:12:46 2024 +0200 add key shortcuts for resetting slot and submitting guess commit 65183a9 Author: Toni Barth <[email protected]> Date: Wed Aug 7 00:12:43 2024 +0200 squash multiple CI fixes [skip ci] commit 0f6c5f9 Merge: e53bb1a eb8b045 Author: Toni Barth <[email protected]> Date: Tue Aug 6 13:46:28 2024 +0200 Merge branch 'main' into h2-keystrokes commit e53bb1a Author: Toni Barth <[email protected]> Date: Mon Aug 5 23:25:05 2024 +0200 add alt + shift + arrow up / down to cycle between slots on slot selector commit ade50a5 Merge: 43ab026 e5ba859 Author: Toni Barth <[email protected]> Date: Mon Aug 5 19:45:16 2024 +0200 Merge branch 'development' into h2-keystrokes # Conflicts: # client/src/pages/game.tsx commit 43ab026 Author: Toni Barth <[email protected]> Date: Mon Aug 5 19:21:53 2024 +0200 add events to selecting slots (panning not yet working thanks to mp3's in html5 mode, see #12) commit aec187f Author: Toni Barth <[email protected]> Date: Sun Aug 4 22:46:02 2024 +0200 add keystrokes to join and leave a game commit 2e8945c Author: Toni Barth <[email protected]> Date: Sun Aug 4 15:44:31 2024 +0200 add useModalShown hook to check if a modal is currently open and use that to disable keystrokes when a modal is currently shown commit f33f456 Author: Toni Barth <[email protected]> Date: Sun Aug 4 14:31:57 2024 +0200 shortcuts to start public, private and local game in lobby commit 5b8c75b Author: Toni Barth <[email protected]> Date: Sat Aug 3 22:12:36 2024 +0200 add keystroke for starting and stopping the game
Timtam · Aug 7, 2024 · d412d60 · d412d60
1 parent b4183e7
commit d412d60
Show file tree

Hide file tree

Showing 12 changed files with 372 additions and 72 deletions.
diff --git a/.github/workflows/push_docker.yaml b/.github/workflows/push_docker.yaml
@@ -3,13 +3,19 @@ on:
     branches:
       - main
       - development
+    tags:
+      - '**'
 
 jobs:
   push_to_registry:
     name: Push Docker image to Docker Hub
     runs-on: ubuntu-latest
     if: "!contains(github.event.head_commit.message, '[skip ci]')"
     steps:
+      - name: Dump job github var
+        env:
+          GITHUB_VAR: ${{ toJson(github) }}
+        run: echo "$GITHUB_VAR"
       - 
         name: Checkout
         uses: actions/checkout@v3
@@ -28,6 +34,7 @@ jobs:
           password: ${{ secrets.DOCKERHUB_TOKEN }}
       - 
         name: Build and push Docker dev image
+        if: startsWith(github.ref, 'refs/heads/development')
         uses: docker/build-push-action@v6
         with:
           context: .

diff --git a/client/sfx/select_slot.opus b/client/sfx/select_slot.opus
diff --git a/client/sfx/slot_unavailable.opus b/client/sfx/slot_unavailable.opus
diff --git a/client/src/events.ts b/client/src/events.ts
@@ -1,4 +1,4 @@
-import { Game, GameMode, Hit, Player } from "./entities"
+import { Game, GameMode, Hit, Player, Slot } from "./entities"
 
 export enum Sfx {
     joinGame,
@@ -7,6 +7,8 @@ export enum Sfx {
     payToken,
     playHit,
     receiveToken,
+    selectSlot,
+    slotUnavailable,
     stopHit,
     youClaim,
     youFail,
@@ -17,6 +19,7 @@ export enum Sfx {
 
 export interface SfxData {
     sfx: Sfx
+    pan?: number
 }
 
 export interface PlaySfxData extends SfxData {}
@@ -77,6 +80,14 @@ export interface TokenReceivedData {
     game_mode: GameMode
 }
 
+export interface SlotSelectedData {
+    slot: Slot | null
+    slot_count: number
+    from_year: number
+    to_year: number
+    unavailable: boolean
+}
+
 export enum Events {
     claimedHit = "Claimed hit",
     gameEnded = "Game ended",
@@ -90,5 +101,6 @@ export enum Events {
     scored = "Scored",
     sfxEnded = "Sfx ended",
     skippedHit = "Skipped hit",
+    slotSelected = "Slot selected",
     tokenReceived = "Token received",
 }
diff --git a/client/src/hooks.ts b/client/src/hooks.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
 
 export const useRevalidate = () => {
@@ -30,3 +30,19 @@ export const useRevalidateOnInterval = ({
         [revalidate],
     )
 }
+
+export const useModalShown = (): boolean => {
+    let [shown, setShown] = useState(false)
+
+    useEffect(() => {
+        let id = setInterval(() => {
+            setShown(document.querySelector(".modal") !== null)
+        }, 50)
+
+        return () => {
+            clearInterval(id)
+        }
+    }, [])
+
+    return shown
+}
diff --git a/client/src/locale/de.json b/client/src/locale/de.json
@@ -34,8 +34,8 @@
         "otherInterceptHeading": "Du kannst jetzt für <0>{{player}}</0> eine andere Vermutung äußern",
         "confirmHeading": "Du musst nun bestätigen, ob <0>{{player}}</0> den Titel und Interpreten korrekt erraten hat. Sei fair!",
         "confirmText": "Hat <0>{{player}}</0> den Titel und Interpreten korrekt erraten?",
-        "no": "Nein",
-        "yes": "Ja",
+        "no": "Nein (Alt+Umschalt+N)",
+        "yes": "Ja (Alt+Umschalt+Y)",
         "guessText": "Wo, glaubst du, gehört dieser Hit hin?",
         "waitingText": "Dies sind die Möglichkeiten:",
         "dontIntercept": "Keine Vermutung äußern",
@@ -47,10 +47,10 @@
         "cannotSubmitGuess": "Du kannst derzeit keine Vermutung abgeben",
         "game_one": "Spiel",
         "gameActions": "Spielaktionen:",
-        "leaveGame": "Spiel verlassen",
-        "joinGame": "Spiel beitreten",
-        "stopGame": "Spiel stoppen",
-        "startGame": "Spiel starten",
+        "leaveGame": "Spiel verlassen (Alt+Umschalt+Q)",
+        "joinGame": "Spiel beitreten (Alt+Umschalt+J)",
+        "stopGame": "Spiel stoppen (Alt+Umschalt+S)",
+        "startGame": "Spiel starten (Alt+Umschalt+S)",
         "name": "Name",
         "token_one": "Chip",
         "token_other": "Chips",
@@ -109,9 +109,9 @@
         "gameSettingsPacks": "Wähle alle die Packs aus, welche in diesem Spiel genutzt werden sollen:",
         "save": "Speichern",
         "sfxVolume": "Lautstärke der Sound Effekte",
-        "publicGame": "Öffentliches Spiel",
-        "privateGame": "Privates Spiel",
-        "localGame": "Lokales Spiel",
+        "publicGame": "Öffentliches Spiel (Alt+Umschalt+U)",
+        "privateGame": "Privates Spiel (Alt+Umschalt+R)",
+        "localGame": "Lokales Spiel (Alt+Umschalt+L)",
         "addPlayer": "Lokalen Spieler hinzufügen",
         "addPlayerNotLocalGame": "Du kannst lokale Spieler nur in einem lokalen Spiel hinzufügen",
         "addPlayerNotWaiting": "Du kannst lokale Spieler nur hinzufügen, während das Spiel gestoppt ist",

diff --git a/client/src/locale/en.json b/client/src/locale/en.json
@@ -34,8 +34,8 @@
         "otherInterceptHeading": "You can now make another guess for <0>{{player}}</0>",
         "confirmHeading": "You now need to confirm if <0>{{player}}</0> guessed title and artist of the song correctly. Be fair!",
         "confirmText": "Did <0>{{player}}</0> guess artist and title correctly?",
-        "no": "No",
-        "yes": "Yes",
+        "no": "No (Alt+Shift+N)",
+        "yes": "Yes (Alt+Shift+Y)",
         "guessText": "Where do you think this hit belongs?",
         "waitingText": "These are the possible slots:",
         "dontIntercept": "Don't intercept",
@@ -47,10 +47,10 @@
         "cannotSubmitGuess": "You cannot submit a guess right now",
         "game_one": "Game",
         "gameActions": "Game actions:",
-        "leaveGame": "Leave game",
-        "joinGame": "Join game",
-        "stopGame": "Stop game",
-        "startGame": "Start game",
+        "leaveGame": "Leave game (Alt+Shift+Q)",
+        "joinGame": "Join game (Alt+Shift+J)",
+        "stopGame": "Stop game (Alt+Shift+S)",
+        "startGame": "Start game (Alt+Shift+S)",
         "name": "Name",
         "token_one": "Token",
         "token_other": "Tokens",
@@ -109,9 +109,9 @@
         "gameSettingsPacks": "Check all the packs you want to use in this game:",
         "save": "Save",
         "sfxVolume": "SFX Volume",
-        "publicGame": "Public game",
-        "privateGame": "Private game",
-        "localGame": "Local game",
+        "publicGame": "Public game (Alt+Shift+U)",
+        "privateGame": "Private game (Alt+Shift+R)",
+        "localGame": "Local game (Alt+Shift+L)",
         "addPlayer": "Add local player",
         "addPlayerNotLocalGame": "You can only add local players in a local game",
         "addPlayerNotWaiting": "You can only add local players while the game is stopped",

diff --git a/client/src/notification-player.tsx b/client/src/notification-player.tsx
@@ -26,7 +26,6 @@ const TIMER_DURATION: number = 150
 export default function NotificationPlayer({ user }: { user: User | null }) {
     let { t } = useTranslation()
     let [politeness, setPoliteness] = useState<"polite" | "assertive">("polite")
-    let [hidden, setHidden] = useState<boolean>(true)
     let output = useRef<HTMLParagraphElement | null>(null)
     let events = useRef<SpeechEvent[]>([])
     let timer = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -42,7 +41,6 @@ export default function NotificationPlayer({ user }: { user: User | null }) {
     const handleSpeechEvent = () => {
         if (events.current.length === 0) {
             if (output.current) output.current.innerHTML = ""
-            setHidden(true)
             timer.current = null
             return
         }
@@ -76,11 +74,7 @@ export default function NotificationPlayer({ user }: { user: User | null }) {
                         },
                     })
                 if (timer.current === null) {
-                    setHidden(false)
-                    timer.current = setTimeout(
-                        handleSpeechEvent,
-                        TIMER_DURATION,
-                    )
+                    handleSpeechEvent()
                 }
             },
         )
@@ -360,7 +354,6 @@ export default function NotificationPlayer({ user }: { user: User | null }) {
             aria-atomic={true}
             ref={output}
             className="visually-hidden"
-            aria-hidden={hidden}
         />
     )
 }
diff --git a/client/src/pages/game.tsx b/client/src/pages/game.tsx
@@ -36,6 +36,7 @@ import {
     SkippedHitData,
     TokenReceivedData,
 } from "../events"
+import { useModalShown } from "../hooks"
 import GameService from "../services/games.service"
 import AddLocalPlayerScreen from "./game/add-local-player"
 import GameEndScreen from "./game/end-screen"
@@ -70,6 +71,13 @@ export function Game() {
     let navigate = useNavigate()
     let { t } = useTranslation()
     let [winner, setWinner] = useImmer<Player | null>(null)
+    let modalShown = useModalShown()
+
+    const joinOrLeaveGame = async () => {
+        if (game.players.some((p) => p.id === user?.id))
+            await gameService.leave(game.id)
+        else await gameService.join(game.id)
+    }
 
     const startOrStopGame = async () => {
         if (game.state === GameState.Open) {
@@ -273,26 +281,37 @@ export function Game() {
 
     // register keystrokes
     useEffect(() => {
-        let startOrStopHandler = {
+        let handleJoinGame = {
+            onPressed: () => {
+                joinOrLeaveGame()
+            },
+        }
+        let handleLeaveGame = {
+            onPressed: () => {
+                joinOrLeaveGame()
+            },
+        }
+        let handleStartOrStopGame = {
             onPressed: () => {
                 startOrStopGame()
             },
         }
 
-        if (
-            !showSettings &&
-            !showHits.some((s) => s) &&
-            !showAddPlayer &&
-            !gameEndedState &&
-            canStartOrStopGame()
-        ) {
-            bindKeyCombo("alt + s", startOrStopHandler)
+        if (!modalShown) {
+            bindKeyCombo("alt + shift + j", handleJoinGame)
+            bindKeyCombo("alt + shift + q", handleLeaveGame)
+
+            if (canStartOrStopGame()) {
+                bindKeyCombo("alt + shift + s", handleStartOrStopGame)
+            }
         }
 
         return () => {
-            unbindKeyCombo("alt + s", startOrStopHandler)
+            unbindKeyCombo("alt + shift + j", handleJoinGame)
+            unbindKeyCombo("alt + shift + q", handleLeaveGame)
+            unbindKeyCombo("alt + shift + s", handleStartOrStopGame)
         }
-    }, [showSettings, showHits, showAddPlayer, gameEndedState, game, user])
+    }, [game, user, modalShown])
 
     const canStartOrStopGame = (): boolean => {
         return (
@@ -321,11 +340,7 @@ export function Game() {
                     game.state !== GameState.Open &&
                     !game.players.some((p) => p.id === user?.id)
                 }
-                onClick={async () => {
-                    if (game.players.some((p) => p.id === user?.id))
-                        await gameService.leave(game.id)
-                    else await gameService.join(game.id)
-                }}
+                onClick={joinOrLeaveGame}
             >
                 {game.players.some((p) => p.id === user?.id)
                     ? t("leaveGame")
@@ -337,7 +352,6 @@ export function Game() {
                         className="me-2"
                         disabled={!canStartOrStopGame()}
                         onClick={startOrStopGame}
-                        aria-keyshortcuts="Alt+S"
                     >
                         {canStartOrStopGame()
                             ? game.state !== GameState.Open