Skip to content

Commit 12ea62c

Browse files
aqkaqk
authored
Merge pull request #78 from Chia-Network/CHIA-refactor-components-sockets
Refactor socket and components
2 parents cb5baee + 13a625c commit 12ea62c

File tree

3 files changed

+225
-236
lines changed

3 files changed

+225
-236
lines changed

‎resources/gaming-fe/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
"typescript": "^5.8.2",
2525
"web-vitals": "^4.2.4"
2626
},
27+
"overrides": {
28+
"typescript": "^5.8.2"
29+
},
2730
"scripts": {
2831
"start": "react-scripts start",
2932
"build": "react-scripts build",

‎resources/gaming-fe/src/components/Game.tsx

+128-164
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,47 @@
1-
import React, {cloneElement, useState} from "react";
2-
import { Box, Button,
1+
import React, { cloneElement, useState } from "react";
2+
import {
3+
Box,
4+
Button,
35
ButtonGroup,
46
Divider,
57
FormControl,
68
InputLabel,
7-
Link,
89
MenuItem,
910
Select,
10-
SxProps,
11-
Typography, } from "@mui/material";
11+
Typography,
12+
} from "@mui/material";
1213
import useGameSocket from "../hooks/useGameSocket";
1314
import PlayerSection from "./PlayerSection";
1415
import OpponentSection from "./OpponentSection";
1516
import GameLog from "./GameLog";
1617
import WaitingScreen from "./WaitingScreen";
1718
import LobbyScreen from "./LobbyScreen";
1819
import { useWalletConnect } from "../hooks/WalletConnectContext";
19-
import { useRpcUi } from "../hooks/useRpcUi"
20-
//import { useWalletConnectCalls } from "../hooks/useWalletConnect";
20+
import { useRpcUi } from "../hooks/useRpcUi";
2121
import useDebug from "../hooks/useDebug";
2222
import Debug from "./Debug";
2323

24-
// Game is the entry point
2524
const Game: React.FC = () => {
26-
27-
28-
const {client, session, pairings, connect, disconnect } = useWalletConnect();
29-
25+
const { client, session, pairings, connect, disconnect } = useWalletConnect();
3026
const [command, setCommand] = useState(0);
31-
const { commands, responseData } = useRpcUi();
27+
const { commands } = useRpcUi();
28+
const commandEntries = Object.entries(commands);
29+
const selectedCommandEntry = commandEntries[command];
3230

33-
const commandEntry = Object.entries(commands)[command];
34-
{
35-
console.log("WC", client, session, pairings, connect, disconnect);
36-
}
37-
const onConnect = () => {
38-
if (!client) throw new Error('WalletConnect is not initialized.');
31+
console.log("WC", client, session, pairings, connect, disconnect);
32+
33+
const handleConnectWallet = () => {
34+
if (!client) throw new Error("WalletConnect is not initialized.");
3935

4036
if (pairings.length === 1) {
41-
connect({ topic: pairings[0].topic });
37+
connect({ topic: pairings[0].topic });
4238
} else if (pairings.length) {
43-
console.log('The pairing modal is not implemented.', pairings);
39+
console.log("The pairing modal is not implemented.", pairings);
4440
} else {
45-
connect();
41+
connect();
4642
}
4743
};
4844

49-
// const onDisconnect = () => { 0; }
50-
5145
const {
5246
gameState,
5347
wagerAmount,
@@ -66,9 +60,7 @@ const Game: React.FC = () => {
6660
handleEndTurn,
6761
} = useGameSocket();
6862

69-
const {
70-
wcInfo, setWcInfo,
71-
} = useDebug();
63+
const { wcInfo, setWcInfo } = useDebug();
7264

7365
if (gameState === "idle") {
7466
return (
@@ -78,152 +70,124 @@ const Game: React.FC = () => {
7870
handleFindOpponent={handleFindOpponent}
7971
/>
8072
);
81-
} else if (gameState === "searching") {
73+
}
74+
75+
if (gameState === "searching") {
8276
return <WaitingScreen />;
83-
} else if (gameState === "playing") {
84-
return (
85-
<Box p={4}>
86-
<Typography variant="h4" align="center">
87-
Cal Poker
88-
</Typography>
89-
<br />
90-
<Typography
91-
variant="h6"
92-
align="center"
93-
color={isPlayerTurn ? "success" : "warning"}
94-
>
95-
{isPlayerTurn ? "Your turn" : "Opponent's turn"}
96-
</Typography>
97-
<br />
98-
<Box
99-
display="flex"
100-
flexDirection={{ xs: "column", md: "row" }}
101-
alignItems="stretch"
102-
gap={2}
103-
mb={4}
104-
>
105-
<Box flex={1} display="flex" flexDirection="column">
106-
<PlayerSection
107-
playerNumber={playerNumber}
108-
playerCoins={playerCoins}
109-
wagerAmount={wagerAmount}
110-
playerHand={playerHand}
111-
isPlayerTurn={isPlayerTurn}
112-
handleBet={handleBet}
113-
handleMakeMove={handleMakeMove}
114-
handleEndTurn={handleEndTurn}
115-
/>
116-
</Box>
117-
<Box flex={1} display="flex" flexDirection="column">
118-
<OpponentSection
119-
playerNumber={playerNumber}
120-
opponentCoins={opponentCoins}
121-
opponentWager={opponentWager}
122-
opponentHand={opponentHand}
123-
/>
124-
</Box>
77+
}
78+
79+
return (
80+
<Box p={4}>
81+
<Typography variant="h4" align="center">
82+
Cal Poker
83+
</Typography>
84+
<br />
85+
<Typography
86+
variant="h6"
87+
align="center"
88+
color={isPlayerTurn ? "success" : "warning"}
89+
>
90+
{isPlayerTurn ? "Your turn" : "Opponent's turn"}
91+
</Typography>
92+
<br />
93+
<Box
94+
display="flex"
95+
flexDirection={{ xs: "column", md: "row" }}
96+
alignItems="stretch"
97+
gap={2}
98+
mb={4}
99+
>
100+
<Box flex={1} display="flex" flexDirection="column">
101+
<PlayerSection
102+
playerNumber={playerNumber}
103+
playerCoins={playerCoins}
104+
wagerAmount={wagerAmount}
105+
playerHand={playerHand}
106+
isPlayerTurn={isPlayerTurn}
107+
handleBet={handleBet}
108+
handleMakeMove={handleMakeMove}
109+
handleEndTurn={handleEndTurn}
110+
/>
111+
</Box>
112+
<Box flex={1} display="flex" flexDirection="column">
113+
<OpponentSection
114+
playerNumber={playerNumber}
115+
opponentCoins={opponentCoins}
116+
opponentWager={opponentWager}
117+
opponentHand={opponentHand}
118+
/>
125119
</Box>
126-
<GameLog log={log} />
127-
<Debug connectString={wcInfo} setConnectString={setWcInfo}/>
128-
<Typography variant="h4" align="center">
129-
WC Client state: {/*JSON.stringify(Object.keys(client ? client : {}))*/}
130-
{/* client.protocol version name metadata context */}
131-
{ !client ? "nil" : JSON.stringify(client.context)}
132-
</Typography>
133-
{session ?
120+
</Box>
121+
<GameLog log={log} />
122+
<Debug connectString={wcInfo} setConnectString={setWcInfo} />
123+
<Typography variant="h4" align="center">
124+
WC Client state: {client ? JSON.stringify(client.context) : "nil"}
125+
</Typography>
126+
{session ? (
134127
<>
135-
<FormControl fullWidth sx={{ mt: 2 }}>
136-
<InputLabel id='command-select-label'>
137-
Command
138-
</InputLabel>
128+
<FormControl fullWidth sx={{ mt: 2 }}>
129+
<InputLabel id="command-select-label">Command</InputLabel>
139130
<Select
140-
labelId='command-select-label'
141-
id='command-select-label'
142-
value={command}
143-
label='Command'
144-
onChange={(e) =>
145-
setCommand(e.target.value as number)
146-
}
131+
labelId="command-select-label"
132+
id="command-select"
133+
value={command}
134+
label="Command"
135+
onChange={(e) => setCommand(Number(e.target.value))}
147136
>
148-
{Object.keys(commands).map((name, i) => (
149-
<MenuItem key={i} value={i}>
150-
{name}
151-
</MenuItem>
152-
))}
137+
{commandEntries.map(([name], i) => (
138+
<MenuItem key={i} value={i}>
139+
{name}
140+
</MenuItem>
141+
))}
153142
</Select>
154-
</FormControl>
155-
156-
<Divider sx={{ mt: 4 }} />
157-
158-
<Box mt={3}>
159-
<Typography variant='h5' mb={2}>
160-
<code>{commandEntry[0]}</code>
143+
</FormControl>
144+
<Divider sx={{ mt: 4 }} />
145+
<Box mt={3}>
146+
<Typography variant="h5" mb={2}>
147+
<code>{selectedCommandEntry[0]}</code>
161148
</Typography>
162-
163-
{commandEntry[1].map((element, i) =>
164-
cloneElement(element, { key: i })
149+
{selectedCommandEntry[1].map((element, i) =>
150+
cloneElement(element, { key: i })
165151
)}
166-
167-
<ButtonGroup variant='outlined'>
168-
<Button
169-
fullWidth
170-
variant='outlined'
171-
color='error'
172-
onClick={() => disconnect()}
173-
>
174-
Unlink Wallet
175-
</Button>
176-
177-
<Button
178-
fullWidth
179-
variant='outlined'
180-
color='error'
181-
onClick={() => {
182-
localStorage.clear();
183-
window.location.href = '';
184-
}}
185-
>
186-
Reset Storage
187-
</Button>
152+
<ButtonGroup variant="outlined" fullWidth>
153+
<Button variant="outlined" color="error" onClick={() => disconnect()}>
154+
Unlink Wallet
155+
</Button>
156+
<Button
157+
variant="outlined"
158+
color="error"
159+
onClick={() => {
160+
localStorage.clear();
161+
window.location.href = "";
162+
}}
163+
>
164+
Reset Storage
165+
</Button>
188166
</ButtonGroup>
189-
</Box>
190-
191-
<Divider sx={{ mt: 4 }} />
192-
193-
<Box mt={3}>
194-
<Typography variant='h5'>Response</Typography>
195-
196-
197-
198-
<Button
199-
fullWidth
200-
variant='outlined'
201-
color='error'
202-
onClick={() => {
203-
localStorage.clear();
204-
window.location.href = '';
205-
}}
206-
>
207-
Unlink Wallet
208-
</Button>
209-
</Box>
210-
</>
211-
:
212-
213-
<Button
214-
variant='contained'
215-
onClick={onConnect}
216-
sx={{ mt: 3 }}
217-
>
218-
Link Wallet
219-
</Button>
220-
}
221-
</Box>
222-
);
223-
}
224-
225-
return null;
167+
</Box>
168+
<Divider sx={{ mt: 4 }} />
169+
<Box mt={3}>
170+
<Typography variant="h5">Response</Typography>
171+
<Button
172+
fullWidth
173+
variant="outlined"
174+
color="error"
175+
onClick={() => {
176+
localStorage.clear();
177+
window.location.href = "";
178+
}}
179+
>
180+
Unlink Wallet
181+
</Button>
182+
</Box>
183+
</>
184+
) : (
185+
<Button variant="contained" onClick={handleConnectWallet} sx={{ mt: 3 }}>
186+
Link Wallet
187+
</Button>
188+
)}
189+
</Box>
190+
);
226191
};
227192

228193
export default Game;
229-

0 commit comments

Comments
 (0)