Blackjack pays 1.5x, fix appearances

I'll lead with this so it doesn't look like I snuck it in: Winning by blackjack is special and usually pays 1.5x so I made it so :) All the infrastructure was already in place.

Fixed bkack-on-black text, I didn't even know the game kept count of your cards for you! Improved the way it's displayed a bit (screenshot in PR)

Also simplified the code that determines gains and applies the win since there was some duplication there.

src/Casino/Blackjack.tsx

@@ -217,30 +217,19 @@ export class Blackjack extends Game<Props, State> {
   };
 
   finishGame = (result: Result): void => {
-    let gains = 0;
+    const gains = result === Result.DealerWon ? 0 : // We took away the bet at the start, don't need to take more
-    if (this.isPlayerWinResult(result)) {
+      result === Result.Tie ? this.state.bet : // We took away the bet at the start, give it back
-      gains = this.state.bet;
+      result === Result.PlayerWon ? 2 * this.state.bet : // Give back their bet plus their winnings
-      // We 2x the gains because we took away money at the start, so we need to give the original bet back.
+      result === Result.PlayerWonByBlackjack ? 2.5 * this.state.bet : // Blackjack pays out 1.5x bet!
-      this.win(this.props.p, 2 * gains);
+      (() => { throw new Error(`Unexpected result: ${result}`); })(); // This can't happen, right?
-    } else if (result === Result.DealerWon) {
+    this.win(this.props.p, gains);
-      gains = -1 * this.state.bet;
-      this.win(this.props.p, 0); // We took away the bet at the start, don't need to take more
-      // Dont need to take money here since we already did it at the start
-    } else if (result === Result.Tie) {
-      this.win(this.props.p, this.state.bet); // Get the original bet back
-    }
-
     this.setState({
       gameInProgress: false,
       result,
-      gains: this.state.gains + gains,
+      gains: this.state.gains + gains - this.state.bet, // Not updated upfront - only tracks the final outcome
     });
   };
 
-  isPlayerWinResult = (result: Result): boolean => {
-    return result === Result.PlayerWon || result === Result.PlayerWonByBlackjack;
-  };
-
   wagerOnChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
     const { p } = this.props;
     const betInput = event.target.value;
@@ -356,20 +345,20 @@ export class Blackjack extends Game<Props, State> {
         )}
 
         {/* Main game part. Displays both if the game is in progress OR if there's a result so you can see
-         * the cards that led to that result. */}
+        * the cards that led to that result. */}
         {(gameInProgress || result !== Result.Pending) && (
           <>
             <Box display="flex">
               <Paper elevation={2}>
-                <pre>Player</pre>
+                <Typography>Player</Typography>
                 {playerHand.cards.map((card, i) => (
                   <ReactCard card={card} key={i} />
                 ))}
 
-                <pre>Value(s): </pre>
+                <Typography>Count: {
-                {playerHandValues.map((value, i) => (
+                  playerHandValues.map<React.ReactNode>((value, i) => <span key={i}>{value}</span>)
-                  <pre key={i}>{value}</pre>
+                    .reduce((prev, curr) => [prev, ' or ', curr])
-                ))}
+                }</Typography>
               </Paper>
             </Box>
 
@@ -377,7 +366,7 @@ export class Blackjack extends Game<Props, State> {
 
             <Box display="flex">
               <Paper elevation={2}>
-                <pre>Dealer</pre>
+                <Typography>Dealer</Typography>
                 {dealerHand.cards.map((card, i) => (
                   // Hide every card except the first while game is in progress
                   <ReactCard card={card} hidden={gameInProgress && i !== 0} key={i} />
@@ -385,10 +374,10 @@ export class Blackjack extends Game<Props, State> {
 
                 {!gameInProgress && (
                   <>
-                    <pre>Value(s): </pre>
+                    <Typography>Count: {
-                    {dealerHandValues.map((value, i) => (
+                      dealerHandValues.map<React.ReactNode>((value, i) => <span key={i}>{value}</span>)
-                      <pre key={i}>{value}</pre>
+                        .reduce((prev, curr) => [prev, ' or ', curr])
-                    ))}
+                    }</Typography>
                   </>
                 )}
               </Paper>
@@ -399,9 +388,10 @@ export class Blackjack extends Game<Props, State> {
         {/* Results from previous round */}
         {result !== Result.Pending && (
           <Typography>
-            {result}
+            {result}&nbsp;
-            {this.isPlayerWinResult(result) && <Money money={this.state.bet} />}
+            {result === Result.PlayerWon && <Money money={this.state.bet} />}
-            {result === Result.DealerWon && <Money money={this.state.bet} />}
+            {result === Result.PlayerWonByBlackjack && <Money money={this.state.bet * 1.5} />}
+            {result === Result.DealerWon && <Money money={-this.state.bet} />}
           </Typography>
         )}
       </>