From fc66f5a19ec8472c168badc72154787be3a222df Mon Sep 17 00:00:00 2001
From: Mikael Lindlof <mikuz.dev@gmail.com>
Date: Mon, 16 Nov 2020 00:02:51 +0000
Subject: [PATCH] Display round and better leave game

---
 web/src/App.tsx         |  9 +--------
 web/src/GamePlaying.tsx | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 5be5517..c08783c 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -36,10 +36,6 @@ 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
@@ -47,6 +43,7 @@ export const App: React.FC = () => {
               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
index 5a292b5..b3bc018 100644
--- 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>
   );
 };