Merge pull request #58 from Owlvernyte/fiezt/update-board-events

update board events
Owlvernyte · Oct 23, 2023 · 1245e35 · 1245e35
2 parents 768eb0f + 0ccb541
commit 1245e35
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 25 deletions.
diff --git a/app/(basic)/rooms/[id]/Game.tsx b/app/(basic)/rooms/[id]/Game.tsx
@@ -5,7 +5,7 @@ import useGetRoomById from '@/features/room/useGetRoomById'
 import { User } from '@/features/user/user.types'
 import GameBoard from '@/lib/game/Board'
 import GamePiece from '@/lib/game/QuanCo/Piece'
-import useSignalR from '@/lib/hooks/useSignalR'
+import useSignalR, { SignalREventName } from '@/lib/hooks/useSignalR'
 import {
     DndContext,
     DragEndEvent,
@@ -14,6 +14,7 @@ import {
 } from '@dnd-kit/core'
 import { HubConnectionState } from '@microsoft/signalr'
 import { AxiosError } from 'axios'
+import { useRouter } from 'next/navigation'
 import { enqueueSnackbar } from 'notistack'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import Board from './Board'
@@ -40,6 +41,7 @@ const systemMsgProps = {
 }
 
 function Game({ roomCode, accessToken, user }: GameProps) {
+    const router = useRouter()
     const audioMsgRef = useRef<HTMLAudioElement>(null)
     const audioMoveRef = useRef<HTMLAudioElement>(null)
     const audioWonRef = useRef<HTMLAudioElement>(null)
@@ -103,16 +105,16 @@ function Game({ roomCode, accessToken, user }: GameProps) {
         : (board.isHostRed && isHost) || (!board.isHostRed && !isHost))
 
     useEffect(() => {
-        connection.on('error', (e) => {
+        connection.on(SignalREventName.Error, (e) => {
             console.log('ws error', e)
         })
 
-        connection.on('connected', (e) => {
+        connection.on(SignalREventName.Connected, (e) => {
             console.log('ws', e)
         })
 
         connection.on(
-            'LoadBoard',
+            SignalREventName.LoadBoard,
             (
                 squares: Matrix<GamePiece | null>,
                 isHostRed: boolean,
@@ -129,7 +131,7 @@ function Game({ roomCode, accessToken, user }: GameProps) {
         )
 
         connection.on(
-            'Moved',
+            SignalREventName.Moved,
             (
                 source: CoordinationType,
                 destination: CoordinationType,
@@ -141,30 +143,33 @@ function Game({ roomCode, accessToken, user }: GameProps) {
         )
 
         connection.on(
-            'MoveFailed',
+            SignalREventName.MoveFailed,
             (source: CoordinationType, destination: CoordinationType) => {
                 enqueueSnackbar('Di chuyển thất bại', {
                     variant: 'error',
                 })
             }
         )
 
-        connection.on('Ended', (isRed: boolean, winUser: UserDto) => {
-            setMessages((a) => [
-                ...a,
-                {
-                    content: `${winUser.userName} thắng!`,
-                    ...systemMsgProps,
-                },
-            ])
-            audioWonRef.current?.play()
-            enqueueSnackbar(`${winUser.userName} thắng!`, {
-                variant: 'warning',
-            })
-        })
+        connection.on(
+            SignalREventName.Ended,
+            (isRed: boolean, winUser: UserDto) => {
+                setMessages((a) => [
+                    ...a,
+                    {
+                        content: `${winUser.userName} thắng!`,
+                        ...systemMsgProps,
+                    },
+                ])
+                audioWonRef.current?.play()
+                enqueueSnackbar(`${winUser.userName} thắng!`, {
+                    variant: 'warning',
+                })
+            }
+        )
 
         connection.on(
-            'Chatted',
+            SignalREventName.Chatted,
             (messageContent: string, roomCode: string, userDto: UserDto) => {
                 setMessages((a) => [
                     ...a,
@@ -179,7 +184,7 @@ function Game({ roomCode, accessToken, user }: GameProps) {
             }
         )
 
-        connection.on('Joined', (userDto: UserDto) => {
+        connection.on(SignalREventName.Joined, (userDto: UserDto) => {
             if (status !== HubConnectionState.Connected)
                 setStatus(HubConnectionState.Connected)
 
@@ -193,7 +198,7 @@ function Game({ roomCode, accessToken, user }: GameProps) {
             ])
         })
 
-        connection.on('Left', (userDto: UserDto) => {
+        connection.on(SignalREventName.Left, (userDto: UserDto) => {
             refetch()
             setMessages((a) => [
                 ...a,
@@ -204,14 +209,21 @@ function Game({ roomCode, accessToken, user }: GameProps) {
             ])
         })
 
-        connection.on('HostLeft', (seconds: number) => {
+        connection.on(SignalREventName.HostLeft, (seconds: number) => {
             enqueueSnackbar(
                 `Phòng sẽ bị xóa sau ${seconds} giây nếu chủ phòng không vào lại`,
                 {
                     variant: 'warning',
                 }
             )
         })
+
+        connection.on(SignalREventName.RoomDeleted, () => {
+            enqueueSnackbar(`Đã xóa phòng!`, {
+                variant: 'warning',
+            })
+            router.push('/rooms')
+        })
     }, [])
 
     useEffect(() => {

diff --git a/components/rooms/FindRoomButton.tsx b/components/rooms/FindRoomButton.tsx
@@ -1,19 +1,21 @@
 'use client'
 
 import Image from 'next/image'
-import { redirect } from 'next/navigation'
+import { useRouter } from 'next/navigation'
 import React from 'react'
 import IconButton from '../ui/IconButton'
 
 function FindRoomButton() {
+    const router = useRouter()
     const handleSubmit = React.useCallback(function handleSubmit(
         e: React.FormEvent<HTMLFormElement>
     ) {
         e.preventDefault()
         const roomCode = e.currentTarget['roomCode'].value as string
-        redirect(`/rooms/${roomCode}`)
+        router.push(`/rooms/${roomCode}`)
     },
     [])
+
     return (
         <>
             <button

diff --git a/lib/hooks/useSignalR.ts b/lib/hooks/useSignalR.ts
@@ -38,3 +38,17 @@ function useSignalR(webSocketURI: string, options?: IHttpConnectionOptions) {
 }
 
 export default useSignalR
+
+export enum SignalREventName {
+    LoadBoard = 'LoadBoard',
+    Moved = 'Moved',
+    MoveFailed = 'MoveFailed',
+    Ended = 'Ended',
+    Chatted = 'Chatted',
+    Joined = 'Joined',
+    Left = 'Left',
+    HostLeft = 'HostLeft',
+    RoomDeleted = 'RoomDeleted',
+    Connected = "connected",
+    Error = "error"
+}