diff --git a/src/index.tsx b/src/index.tsx index 2bcefd5..60ddaf2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,17 +2,14 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import ThemeContextProvider from "./utils/contexts/ThemeContext"; -import AuthContextProvider from "./utils/contexts/AuthContext"; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( - - - - - + + + ); \ No newline at end of file diff --git a/src/layout/components/Game.tsx b/src/layout/components/Game.tsx new file mode 100644 index 0000000..7822622 --- /dev/null +++ b/src/layout/components/Game.tsx @@ -0,0 +1,46 @@ +import React, {FunctionComponent} from "react"; +import Deck from "./Deck"; +import Hand from "./Hand"; + +interface GameState { + PlayerName: string; + Hand: string[]; + CurrentCard: string; + CurrentPlayer: string; + Players: string[]; +} + +interface Props { + gameState: GameState + handleCardSend: (cardString: string) => void; + handleDraw: () => void; +} + +const Game:FunctionComponent = ({gameState, handleCardSend, handleDraw}) => { + return ( +
+ { + gameState.CurrentCard && + + } + { + gameState.Hand && + + } +
    + { + gameState.Players && + gameState.Players.map((player, index) => { + const isCurrentPlayer = player === gameState.CurrentPlayer; + const isMe = player === gameState.PlayerName; + return
  • + {player} {isMe && '(You)'} +
  • + }) + } +
+
+ ) +} + +export default Game; \ No newline at end of file diff --git a/src/layout/pages/Room.tsx b/src/layout/pages/Room.tsx index fa1e076..c11db28 100644 --- a/src/layout/pages/Room.tsx +++ b/src/layout/pages/Room.tsx @@ -3,8 +3,7 @@ import React from "react"; import {useNavigate, useParams} from "react-router"; import {GHButton} from "../components/Button"; import useTitle from "../../utils/hooks/TitleHook"; -import Hand from "../components/Hand"; -import Deck from "../components/Deck"; +import Game from "../components/Game"; interface GameState { PlayerName: string; @@ -14,6 +13,16 @@ interface GameState { Players: string[]; } +interface ChatMessage { + PlayerName: string; + Message: string; +} + +interface SocketMessage { + Type: string; + Payload: any; +} + const Room = () => { useTitle('Mau!'); @@ -31,6 +40,8 @@ const Room = () => { CurrentPlayer: '', Players: [] }); + const [chatMessages, setChatMessages] = React.useState([]); + const [chatInput, setChatInput] = React.useState(''); const websocket = useWebSocket(WS_URL, { onOpen: () => { @@ -38,7 +49,9 @@ const Room = () => { }, onMessage: (event) => { const data = JSON.parse(event.data); - setGameState(data); + const payload = JSON.parse(data.Payload); + if (data.Type === 'GAME') setGameState(payload); + if (data.Type === 'CHAT') setChatMessages(prev => [...prev, payload]); } }); @@ -48,44 +61,51 @@ const Room = () => { navigateTo('/'); } + const handleSend = (message: SocketMessage) => { + websocket.sendMessage(JSON.stringify(message)); + } + const handleCardSend = (card: string) => { - const formattedAction = JSON.stringify({ - Action: "PLAYCARD", - Data: JSON.stringify({CardType: card.split(' ')[0], CardValue: card.split(' ')[1]}) - }); - websocket.sendMessage(formattedAction); + handleSend({ + Type: "GAME", + Payload: JSON.stringify({ + Action: "PLAYCARD", + Data: JSON.stringify({ + CardType: card.split(' ')[0], + CardValue: card.split(' ')[1] + }) + }) + }) } const handleDraw = () => { - const formattedAction = JSON.stringify({ - Action: "DRAW", - Data: "" + handleSend({ + Type: "GAME", + Payload: JSON.stringify({ + Action: "DRAW", + Data: "" + }) + }); + } + + const handleChat = (message: string) => { + handleSend({ + Type: "CHAT", + Payload: message }); - websocket.sendMessage(formattedAction); } return (

Room {roomId}

Leave Room - { - gameState.CurrentCard && - - } - { - gameState.Hand && - - } + + setChatInput(e.target.value)} /> +
    - { - gameState.Players.map((player, index) => { - const isCurrentPlayer = player === gameState.CurrentPlayer; - const isMe = player === gameState.PlayerName; - return
  • - {player} {isMe && '(You)'} -
  • - }) - } + {chatMessages.map((message, index) => ( +
  • {message.PlayerName}: {message.Message}
  • + ))}
) diff --git a/src/utils/contexts/AuthContext.tsx b/src/utils/contexts/AuthContext.tsx deleted file mode 100644 index c1b21bc..0000000 --- a/src/utils/contexts/AuthContext.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from "react"; - -const AUTH_URL = `http://${process.env.REACT_APP_API_URL}/auth`; - -interface IAuthContext { - sessionToken: string -} - -const AuthContext = React.createContext({ - sessionToken: '' -}); - -export const useAuth = () => React.useContext(AuthContext); - -const AuthContextProvider = ({children}: any) => { - const [sessionToken] = React.useState(''); - - React.useEffect(() => { - const token = window.localStorage.getItem('session_token'); - if (!token) { - fetch(AUTH_URL, { - method: 'GET' - }).then(res => res.json()).then(token => { - window.localStorage.setItem('session_token', token); - }); - } - }, []); - - return ( - - {children} - - ); -}; - -export default AuthContextProvider; \ No newline at end of file