Display round and better leave game

lindlof · Nov 16, 2020 · fc66f5a · fc66f5a
1 parent 6ec424e
commit fc66f5a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -36,17 +36,14 @@ export const App: React.FC = () => {
       </Grid>
       {client && game && (
         <GameTicker client={client} game={game} setGame={setGame}>
-          <p>Game contract {game.contract}</p>
-          <Button variant="contained" color="primary" onClick={() => leaveGame(setGame)}>
-            Leave game
-          </Button>
           {game?.stage === Game.Stage.Lobby && <p>Waiting for Player 2 to join</p>}
           {game?.stage !== Game.Stage.Lobby && (
             <GamePlaying
               game={game}
               playHandsign={(handsign: Msg.Handsign) =>
                 playHandsign(client, game, handsign, setGame, enqueueSnackbar)
               }
+              leaveGame={() => setGame(undefined)}
               claimInactivity={() => claimInactivity(client, game, setGame, enqueueSnackbar)}
             />
           )}
@@ -93,10 +90,6 @@ const playGame = async (
   }
 };
 
-const leaveGame = async (setGame: Function) => {
-  setGame(undefined);
-};
-
 const playHandsign = async (
   client: SecretJS.SigningCosmWasmClient,
   game: Game.Game,

diff --git a/web/src/GamePlaying.tsx b/web/src/GamePlaying.tsx
@@ -25,11 +25,19 @@ const useStyles = makeStyles((theme) => ({
   stars: {
     paddingBottom: '0.7em',
   },
+  round: {
+    textAlign: 'center',
+  },
+  leave: {
+    textAlign: 'right',
+    margin: '1em',
+  },
 }));
 
 interface Props {
   game: Game.Game;
   playHandsign: Function;
+  leaveGame: Function;
   claimInactivity: () => void;
 }
 
@@ -42,7 +50,7 @@ enum DisplayContent {
 
 export default (props: Props) => {
   const classes = useStyles();
-  const { game, playHandsign, claimInactivity } = props;
+  const { game, playHandsign, leaveGame, claimInactivity } = props;
   const [pickedRound, setPickedRound] = useState<number>();
   const pickHandsign = (handsign: Msg.Handsign) => {
     setPickedRound(game.round);
@@ -62,6 +70,9 @@ export default (props: Props) => {
 
   return (
     <div className={classes.root}>
+      <h2 className={classes.round}>
+        Round {game.stage === Game.Stage.Over ? game.round - 1 : game.round}
+      </h2>
       <Grid container spacing={3}>
         <Grid item xs={6}>
           <Paper className={classes.paper}>
@@ -129,6 +140,11 @@ export default (props: Props) => {
           </Paper>
         </Grid>
       </Grid>
+      <div className={classes.leave}>
+        <Button variant="contained" color="primary" onClick={() => leaveGame()}>
+          Leave game
+        </Button>
+      </div>
     </div>
   );
 };