Score easy to track with stars

web/src/App.tsx

@@ -43,8 +43,7 @@ export const App: React.FC = () => {
             Leave game
           </Button>
           {game?.stage === Game.Stage.NOT_STARTED && <p>Waiting for Player 2 to join</p>}
-          {game.stage === Game.Stage.ENDED && <p>You {game.won ? 'won' : 'lost'}</p>}
-          {client && game?.stage === Game.Stage.GAME_ON && (
+          {client && game?.stage !== Game.Stage.NOT_STARTED && (
             <GamePlaying
               game={game}
               playHandsign={(handsign: Msg.Handsign) =>

web/src/GamePlaying.tsx

@@ -5,6 +5,7 @@ import Grid from '@material-ui/core/Grid';
 import Handsign from './components/Handsign';
 import * as Msg from './msg';
 import * as Game from './game';
+import ScoreStar from './components/ScoreStar';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -15,26 +16,54 @@ const useStyles = makeStyles((theme) => ({
     textAlign: 'center',
     color: theme.palette.text.secondary,
   },
+  star: {
+    paddingLeft: '0.5em',
+    paddingRight: '0.5em',
+  },
+  stars: {
+    paddingBottom: '0.7em',
+  },
 }));
 
 interface Props {
   game: Game.Game;
   playHandsign: Function;
 }
 
+enum DisplayContent {
+  PickHandsign,
+  SelectedHandsign,
+  Ending,
+}
+
 export default (props: Props) => {
   const classes = useStyles();
   const { game, playHandsign } = props;
 
+  let displayContent: DisplayContent = DisplayContent.PickHandsign;
+  if (game.played) {
+    displayContent = DisplayContent.SelectedHandsign;
+  }
+  if (game.stage === Game.Stage.ENDED) {
+    displayContent = DisplayContent.Ending;
+  }
+
   return (
     <div className={classes.root}>
       <Grid container spacing={3}>
         <Grid item xs={6}>
           <Paper className={classes.paper}>
-            <p>Your score {game.wins}</p>
-            {game.played ? (
-              game.lastHandsign && <Handsign handsign={game.lastHandsign} />
-            ) : (
+            <div className={classes.stars}>
+              <ScoreStar pos={0} score={game.wins} className={classes.star} />
+              <ScoreStar pos={1} score={game.wins} className={classes.star} />
+              <ScoreStar pos={2} score={game.wins} className={classes.star} />
+            </div>
+
+            {displayContent === DisplayContent.SelectedHandsign && game.lastHandsign && (
+              <Handsign handsign={game.lastHandsign} />
+            )}
+            {displayContent === DisplayContent.Ending && <p>You {game.won ? 'won' : 'lost'}</p>}
+            {displayContent === DisplayContent.PickHandsign && (
               <Grid container justify="center" alignItems="center" spacing={3}>
                 <Grid item sm={4}>
                   <Handsign
@@ -60,8 +89,14 @@ export default (props: Props) => {
         </Grid>
         <Grid item xs={6}>
           <Paper className={classes.paper}>
-            <p>Opponent score {game.losses}</p>
-            <p>{game.opponenPlayed ? 'Opponent played' : 'Waiting for opponent to play'}</p>
+            <div className={classes.stars}>
+              <ScoreStar pos={0} score={game.losses} className={classes.star} />
+              <ScoreStar pos={1} score={game.losses} className={classes.star} />
+              <ScoreStar pos={2} score={game.losses} className={classes.star} />
+            </div>
+            {game.stage === Game.Stage.ENDED && <p>Game over</p>}
+            {game.stage === Game.Stage.GAME_ON &&
+              (game.opponentPlayed ? <p>Opponent played</p> : <p>Waiting for opponent to play</p>)}
           </Paper>
         </Grid>
       </Grid>

web/src/components/ScoreStar.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
+import starBlank from '../image/star-blank.svg';
+import starGold from '../image/star-gold.svg';
+
+interface Props {
+  pos: number;
+  score: number;
+  className?: string;
+}
+
+const useStyles = makeStyles((theme) => ({
+  star: {
+    maxWidth: '2em',
+  },
+}));
+
+export default (props: Props) => {
+  const classes = useStyles();
+  const { pos, score, className } = props;
+  const cls = clsx(className, classes.star);
+  console.log(classes);
+
+  return <img src={pos < score ? starGold : starBlank} alt={'star blank'} className={cls} />;
+};

web/src/game.ts

@@ -9,7 +9,7 @@ interface Game_ {
   readonly wins: number;
   readonly losses: number;
   readonly played: boolean;
-  readonly opponenPlayed: boolean;
+  readonly opponentPlayed: boolean;
   readonly lastHandsign: Msg.Handsign | undefined;
 }
 
@@ -28,7 +28,7 @@ const create = (contract: string, creator: boolean): Game => {
     wins: 0,
     losses: 0,
     played: false,
-    opponenPlayed: false,
+    opponentPlayed: false,
     lastHandsign: undefined,
   };
 };
@@ -52,7 +52,7 @@ const tick = async (client: SecretJS.SigningCosmWasmClient, game: Game): Promise
       losses: status.player2_wins,
       played: status.player1_played,
       lastHandsign: status.player1_played ? game.lastHandsign : undefined,
-      opponenPlayed: status.player2_played,
+      opponentPlayed: status.player2_played,
     };
   } else {
     return {
@@ -63,7 +63,7 @@ const tick = async (client: SecretJS.SigningCosmWasmClient, game: Game): Promise
       losses: status.player1_wins,
       played: status.player2_played,
       lastHandsign: status.player2_played ? game.lastHandsign : undefined,
-      opponenPlayed: status.player1_played,
+      opponentPlayed: status.player1_played,
     };
   }
 };