randyjc/Rahoot
1
0
Fork 0
mirror of https://github.com/randyjc/Rahoot.git synced 2026-03-14 04:25:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve reconnect, add ESLint configuration for common and socket

Browse Source
This commit is contained in:
Ralex
2025-10-19 00:37:26 +02:00
parent 8bdb8f47ef
commit 96bff164c0
36 changed files with 1571 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/web/src/app/game/[gameId]/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { Status } from "@rahoot/common/types/game/status"
import { STATUS } from "@rahoot/common/types/game/status"
import GameWrapper from "@rahoot/web/components/game/GameWrapper"
import Answers from "@rahoot/web/components/game/states/Answers"
import Prepared from "@rahoot/web/components/game/states/Prepared"
@@ -17,10 +17,9 @@ import toast from "react-hot-toast"
export default function Game() {
const router = useRouter()
const { socket, isConnected } = useSocket()
const { socket } = useSocket()
const { gameId: gameIdParam }: { gameId?: string } = useParams()
const { status, setPlayer, logout, setGameId, setStatus, resetStatus } =
usePlayerStore()
const { status, setPlayer, setGameId, setStatus, reset } = usePlayerStore()
const { setQuestionStates } = useQuestionStore()
useEvent("connect", () => {
@@ -45,16 +44,16 @@ export default function Game() {
}
})
useEvent("game:reset", () => {
useEvent("game:kick", () => {
router.replace("/")
resetStatus()
logout()
toast("The game has been reset by the host")
reset()
})
if (!isConnected) {
return null
}
useEvent("game:reset", () => {
router.replace("/")
reset()
toast("The game has been reset by the host")
})
if (!gameIdParam) {
return null
@@ -63,36 +62,36 @@ export default function Game() {
let component = null
switch (status.name) {
case Status.WAIT:
case STATUS.WAIT:
component = <Wait data={status.data} />
break
case Status.SHOW_START:
case STATUS.SHOW_START:
component = <Start data={status.data} />
break
case Status.SHOW_PREPARED:
case STATUS.SHOW_PREPARED:
component = <Prepared data={status.data} />
break
case Status.SHOW_QUESTION:
case STATUS.SHOW_QUESTION:
component = <Question data={status.data} />
break
case Status.SHOW_RESULT:
case STATUS.SHOW_RESULT:
component = <Result data={status.data} />
break
case Status.SELECT_ANSWER:
case STATUS.SELECT_ANSWER:
component = <Answers data={status.data} />
break
}
return <GameWrapper>{component}</GameWrapper>
return <GameWrapper statusName={status.name}>{component}</GameWrapper>
}

55
packages/web/src/app/game/manager/[gameId]/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { Status } from "@rahoot/common/types/game/status"
import { STATUS } from "@rahoot/common/types/game/status"
import GameWrapper from "@rahoot/web/components/game/GameWrapper"
import Answers from "@rahoot/web/components/game/states/Answers"
import Leaderboard from "@rahoot/web/components/game/states/Leaderboard"
@@ -15,15 +15,14 @@ import { useManagerStore } from "@rahoot/web/stores/manager"
import { useQuestionStore } from "@rahoot/web/stores/question"
import { GAME_STATE_COMPONENTS_MANAGER } from "@rahoot/web/utils/constants"
import { useParams, useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import toast from "react-hot-toast"
export default function ManagerGame() {
const router = useRouter()
const { gameId: gameIdParam }: { gameId?: string } = useParams()
const { socket, isConnected } = useSocket()
const [nextText, setNextText] = useState("Start")
const { gameId, status, setGameId, setStatus, setPlayers } = useManagerStore()
const { socket } = useSocket()
const { gameId, status, setGameId, setStatus, setPlayers, reset } =
useManagerStore()
const { setQuestionStates } = useQuestionStore()
useEvent("game:status", ({ name, data }) => {
@@ -41,6 +40,7 @@ export default function ManagerGame() {
useEvent(
"manager:successReconnect",
({ gameId, status, players, currentQuestion }) => {
console.log("manager:successReconnect", gameId)
setGameId(gameId)
setStatus(status.name, status.data)
setPlayers(players)
@@ -50,43 +50,32 @@ export default function ManagerGame() {
useEvent("game:reset", () => {
router.replace("/manager")
reset()
toast("Game is not available anymore")
})
useEffect(() => {
if (status.name === Status.SHOW_START) {
setNextText("Start")
}
}, [status.name])
if (!isConnected) {
return null
}
if (!gameId) {
return null
}
const handleSkip = () => {
setNextText("Skip")
if (!gameId) {
return
}
switch (status.name) {
case Status.SHOW_ROOM:
case STATUS.SHOW_ROOM:
socket?.emit("manager:startGame", { gameId })
break
case Status.SELECT_ANSWER:
case STATUS.SELECT_ANSWER:
socket?.emit("manager:abortQuiz", { gameId })
break
case Status.SHOW_RESPONSES:
case STATUS.SHOW_RESPONSES:
socket?.emit("manager:showLeaderboard", { gameId })
break
case Status.SHOW_LEADERBOARD:
case STATUS.SHOW_LEADERBOARD:
socket?.emit("manager:nextQuestion", { gameId })
break
@@ -96,49 +85,49 @@ export default function ManagerGame() {
let component = null
switch (status.name) {
case Status.SHOW_ROOM:
case STATUS.SHOW_ROOM:
component = <Room data={status.data} />
break
case Status.SHOW_START:
case STATUS.SHOW_START:
component = <Start data={status.data} />
break
case Status.SHOW_PREPARED:
case STATUS.SHOW_PREPARED:
component = <Prepared data={status.data} />
break
case Status.SHOW_QUESTION:
case STATUS.SHOW_QUESTION:
component = <Question data={status.data} />
break
case Status.SELECT_ANSWER:
case STATUS.SELECT_ANSWER:
component = <Answers data={status.data} />
break
case Status.SHOW_RESPONSES:
case STATUS.SHOW_RESPONSES:
component = <Responses data={status.data} />
break
case Status.SHOW_LEADERBOARD:
case STATUS.SHOW_LEADERBOARD:
component = <Leaderboard data={status.data} />
break
case Status.FINISHED:
case STATUS.FINISHED:
component = <Podium data={status.data} />
break
}
return (
<GameWrapper textNext={nextText} onNext={handleSkip} manager>
<GameWrapper statusName={status.name} onNext={handleSkip} manager>
{component}
</GameWrapper>
)