Merge branch 'issues/20-ask-before-leaving-a-running-game' into devel…

…opment

client/src/events.ts

@@ -6,6 +6,7 @@ export enum Sfx {
     noInterception,
     payToken,
     playHit,
+    popup,
     receiveToken,
     selectSlot,
     slotUnavailable,
@@ -98,6 +99,7 @@ export enum Events {
     leftGame = "Left",
     notification = "Notification",
     playSfx = "Play sfx",
+    popup = "Popup",
     scored = "Scored",
     sfxEnded = "Sfx ended",
     skippedHit = "Skipped hit",

client/src/locale/de.yml

@@ -105,6 +105,7 @@ kick: Kicken
 knownAs: Du bist derzeit bekannt als {{username}}
 language: Sprache
 leaveGame: Spiel verlassen
+leaveGameQuestion: Möchtest du das Spiel wirklich verlassen, während es noch läuft?
 leaveGameShortcut: Alt+Umschalt+Q
 light: Hell
 loading: Lädt, bitte warten...

client/src/locale/en.yml

@@ -103,6 +103,7 @@ kick: Kick
 knownAs: You are currently known as {{username}}
 language: Language
 leaveGame: Leave game
+leaveGameQuestion: Do you want to leave the game while it's still running?
 leaveGameShortcut: Alt+Shift+Q
 light: Light
 loading: Loading...

client/src/modals/welcome.tsx

@@ -1,10 +1,12 @@
+import EventManager from "@lomray/event-manager"
 import sum from "ml-array-sum"
 import { useEffect, useState } from "react"
 import Modal from "react-bootstrap/Modal"
 import Spinner from "react-bootstrap/Spinner"
 import Tab from "react-bootstrap/Tab"
 import Tabs from "react-bootstrap/Tabs"
 import { Trans, useTranslation } from "react-i18next"
+import { Events } from "../events"
 import HitService from "../services/hits.service"
 
 export default function WelcomModale({
@@ -24,6 +26,7 @@ export default function WelcomModale({
                 let availablePacks = await hs.getAllPacks()
                 setPacks(availablePacks)
             })()
+            EventManager.publish(Events.popup)
         }
     }, [show])
 

client/src/pages/game.tsx

@@ -47,6 +47,7 @@ import AddLocalPlayerScreen from "./game/add-local-player"
 import GameEndScreen from "./game/end-screen"
 import { HitPlayer } from "./game/hit-player"
 import HitsView from "./game/hits-view"
+import LeaveGameQuestion from "./game/leave-game-question"
 import GameSettings from "./game/settings"
 import SlotSelector from "./game/slot-selector"
 
@@ -77,11 +78,13 @@ export function Game() {
     let { t } = useTranslation()
     let [winner, setWinner] = useImmer<Player | null>(null)
     let modalShown = useModalShown()
+    let [showLeaveGameQuestion, setShowLeaveGameQuestion] = useImmer(false)
 
     const joinOrLeaveGame = async () => {
-        if (game.players.some((p) => p.id === user?.id))
-            await gameService.leave(game.id)
-        else await gameService.join(game.id)
+        if (game.players.some((p) => p.id === user?.id)) {
+            if (game.state === "Open") await gameService.leave(game.id)
+            else setShowLeaveGameQuestion(true)
+        } else await gameService.join(game.id)
     }
 
     const startOrStopGame = async () => {
@@ -379,6 +382,13 @@ export function Game() {
             <h2 className="h4">
                 {t("gameId")}: {game.id}, {t("state")}: {game.state}
             </h2>
+            <LeaveGameQuestion
+                show={showLeaveGameQuestion}
+                onHide={(yes: boolean) => {
+                    if (yes) (async () => await gameService.leave(game.id))()
+                    setShowLeaveGameQuestion(false)
+                }}
+            />
             <p>{t("gameActions")}</p>
             <Button
                 className="me-2"

client/src/pages/game/leave-game-question.tsx

@@ -0,0 +1,39 @@
+import EventManager from "@lomray/event-manager"
+import { useEffect } from "react"
+import Button from "react-bootstrap/Button"
+import Modal from "react-bootstrap/Modal"
+import { useTranslation } from "react-i18next"
+import { Events } from "../../events"
+
+export default function LeaveGameQuestion({
+    show,
+    onHide,
+}: {
+    show: boolean
+    onHide: (yes: boolean) => void
+}) {
+    let { t } = useTranslation()
+
+    useEffect(() => {
+        if (show) EventManager.publish(Events.popup)
+    }, [show])
+
+    return (
+        <Modal show={show} onHide={() => {}}>
+            <Modal.Header>
+                <Modal.Title>{t("leaveGame")}</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {show ? (
+                    <>
+                        <h2>{t("leaveGameQuestion")}</h2>
+                        <Button onClick={() => onHide(false)}>{t("no")}</Button>
+                        <Button onClick={() => onHide(true)}>{t("yes")}</Button>
+                    </>
+                ) : (
+                    ""
+                )}
+            </Modal.Body>
+        </Modal>
+    )
+}

client/src/sfx-player.tsx

@@ -76,6 +76,10 @@ const getSfx = (sfx: Sfx): Howl => {
             url = new URL("../sfx/claim_hit.opus", import.meta.url).href
             break
         }
+        case Sfx.popup: {
+            url = new URL("../sfx/popup.opus", import.meta.url).href
+            break
+        }
     }
     return new Howl({
         src: [url],
@@ -241,6 +245,12 @@ export default function SfxPlayer({ user }: { user: User | null }) {
             },
         )
 
+        let unsubscribePopup = EventManager.subscribe(Events.popup, () => {
+            EventManager.publish(Events.playSfx, {
+                sfx: Sfx.popup,
+            } satisfies PlaySfxData)
+        })
+
         return () => {
             unsubscribeClaimed()
             unsubscribeGuessed()
@@ -250,6 +260,7 @@ export default function SfxPlayer({ user }: { user: User | null }) {
             unsubscribeLeftGame()
             unsubscribeReceivedToken()
             unsubscribeSlotSelected()
+            unsubscribePopup()
         }
     }, [user])