From 6a01bc8d472b0db3dfd37d845297649c57763eae Mon Sep 17 00:00:00 2001 From: DTieman Date: Sat, 22 Apr 2023 12:42:23 +0200 Subject: [PATCH 1/4] fix --- src/layout/components/Game.tsx | 46 ++++++++++++++++++++++ src/layout/pages/Room.tsx | 72 ++++++++++++++++++++-------------- 2 files changed, 89 insertions(+), 29 deletions(-) create mode 100644 src/layout/components/Game.tsx 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..2f530cb 100644 --- a/src/layout/pages/Room.tsx +++ b/src/layout/pages/Room.tsx @@ -5,6 +5,7 @@ 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 +15,16 @@ interface GameState { Players: string[]; } +interface ChatMessage { + PlayerName: string; + Message: string; +} + +interface SocketMessage { + Type: string; + Payload: any; +} + const Room = () => { useTitle('Mau!'); @@ -31,6 +42,7 @@ const Room = () => { CurrentPlayer: '', Players: [] }); + const [chatMessages, setChatMessages] = React.useState([]); const websocket = useWebSocket(WS_URL, { onOpen: () => { @@ -38,7 +50,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,45 +62,45 @@ 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: { + 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: { + Action: "DRAW", + Data: "" + } + }); + } + + const handleChat = (Message: string) => { + handleSend({ + Type: "CHAT", + Payload: { Message } }); - websocket.sendMessage(formattedAction); } return (

Room {roomId}

Leave Room - { - gameState.CurrentCard && - - } - { - gameState.Hand && - - } -
    - { - gameState.Players.map((player, index) => { - const isCurrentPlayer = player === gameState.CurrentPlayer; - const isMe = player === gameState.PlayerName; - return
  • - {player} {isMe && '(You)'} -
    • - }) - } -
+
) } From a1d763002663c6e088f59552c3e64a73ca4ba855 Mon Sep 17 00:00:00 2001 From: DTieman Date: Sat, 22 Apr 2023 12:47:01 +0200 Subject: [PATCH 2/4] fix --- src/layout/pages/Room.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/layout/pages/Room.tsx b/src/layout/pages/Room.tsx index 2f530cb..e29262a 100644 --- a/src/layout/pages/Room.tsx +++ b/src/layout/pages/Room.tsx @@ -3,8 +3,6 @@ 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 { @@ -69,23 +67,23 @@ const Room = () => { const handleCardSend = (card: string) => { handleSend({ Type: "GAME", - Payload: { + Payload: JSON.stringify({ Action: "PLAYCARD", Data: JSON.stringify({ CardType: card.split(' ')[0], CardValue: card.split(' ')[1] }) - } + }) }) } const handleDraw = () => { handleSend({ Type: "GAME", - Payload: { + Payload: JSON.stringify({ Action: "DRAW", Data: "" - } + }) }); } From f2d0d2faf8cc9d8e6abb76ea7d5b35f4e6a58904 Mon Sep 17 00:00:00 2001 From: DTieman Date: Sat, 22 Apr 2023 13:57:18 +0200 Subject: [PATCH 3/4] fix --- src/layout/pages/Room.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/layout/pages/Room.tsx b/src/layout/pages/Room.tsx index e29262a..c11db28 100644 --- a/src/layout/pages/Room.tsx +++ b/src/layout/pages/Room.tsx @@ -41,6 +41,7 @@ const Room = () => { Players: [] }); const [chatMessages, setChatMessages] = React.useState([]); + const [chatInput, setChatInput] = React.useState(''); const websocket = useWebSocket(WS_URL, { onOpen: () => { @@ -87,10 +88,10 @@ const Room = () => { }); } - const handleChat = (Message: string) => { + const handleChat = (message: string) => { handleSend({ Type: "CHAT", - Payload: { Message } + Payload: message }); } @@ -99,6 +100,13 @@ const Room = () => {

Room {roomId}

Leave Room + setChatInput(e.target.value)} /> + +
    + {chatMessages.map((message, index) => ( +
  • {message.PlayerName}: {message.Message}
    • + ))} +
) } From 19d4eb7f9e40e65f81c3586830233ce42d35c1ad Mon Sep 17 00:00:00 2001 From: DTieman Date: Mon, 24 Apr 2023 13:59:52 +0200 Subject: [PATCH 4/4] removed auth --- src/index.tsx | 9 +++----- src/utils/contexts/AuthContext.tsx | 36 ------------------------------ 2 files changed, 3 insertions(+), 42 deletions(-) delete mode 100644 src/utils/contexts/AuthContext.tsx 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/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