Game plays through! Need to process the "progress cards".

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/Table.js

@@ -15,6 +15,7 @@ import PlayerColor from './PlayerColor.js';
 import Dice from './Dice.js';
 import Resource from './Resource.js';
 import ViewCard from './ViewCard.js';
+import Winner from './Winner.js';
 
 /* Start of withRouter polyfill */
 // https://reactrouter.com/docs/en/v6/faq#what-happened-to-withrouter-i-need-it
@@ -1073,6 +1074,10 @@ class Table extends React.Component {
           </> }
         </div> }
 
+        { game && game.state === 'winner' && 
+          <Winner table={this} color={game.winner}/>
+        }
+
         { this.state.cardActive &&
           <ViewCard table={this} card={this.state.cardActive}/>
         }

client/src/Winner.css

@@ -0,0 +1,37 @@
+.Winner {
+  display: flex;
+  position: absolute;
+  left: 0;
+  right: 40vw;
+  bottom: 0;
+  top: 0;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0,0,0,0.5);
+  z-index: 1000;
+}
+
+.Winner .Title {
+  align-self: center;
+  padding: 2px;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+}
+
+.Winner .Description {
+  padding: 1em;
+  max-width: 20vw;
+  box-sizing: border-box;
+}
+
+.Winner > * {
+/*  min-width: 40em;*/
+  display: inline-flex;
+  padding: 0.5em;
+  flex-direction: column;
+}
+
+.Winner .Resource {
+  width: 10em; /* 5x7 aspect ratio */
+  height: 14em;
+}

client/src/Winner.js

@@ -0,0 +1,49 @@
+import React from "react";
+import "./Winner.css";
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+import Resource from './Resource.js';
+import { getPlayerName } from './Common.js';
+
+const Winner = ({table, color}) => {
+  const quitClicked = (event) => {
+    table.setSelected("");
+  }
+
+  if (!table.game) {
+    return <></>;
+  }
+
+  const name = getPlayerName(table.game.sessions, color),
+    player = table.game.players[color];
+  
+  let description = <>Congratulations, <b>{name}</b>!</>;
+  for (let key in table.game.players) {
+    if (key === color) {
+      continue;
+    }
+    let tmp = table.game.players[key];
+    if (tmp.status === 'Not active') {
+      continue;
+    }
+    let line = <>{getPlayerName(table.game.sessions, key)} finished with {tmp.points} victory points.</>
+    description = <>{description}<p>{line}</p></>;
+  }
+
+  return (
+    <div className="Winner">
+      <Paper>
+        <div className="Title">{name} has won with {player.points} victory points!</div>
+        <div style={{display: 'flex', flexDirection: 'row'}}>
+          <Resource type={`vp-palace`} disabled count={1}/>
+          <div className="Description">
+            {description}
+          </div>
+        </div>
+        <Button onClick={quitClicked}>Go back to Lobby</Button>
+      </Paper>
+    </div>
+  );
+};
+
+export default Winner;

server/routes/games.js

@@ -2173,10 +2173,17 @@ const sendGame = async (req, res, game, error) => {
     player.points += MAX_SETTLEMENTS - player.settlements;
     player.points += 2 * (MAX_CITIES - player.cities);
 
-    if (!game.winner && player.points > 10 && session.color === key) {
+    player.development.forEach(card => {
+      if (card.type === 'vp' && card.played) {
+        player.points++;
+      }
+    });
+
+    if (!game.winner && (player.points >= 10 && session.color === key)) {
       addChatMessage(game, null, `${playerNameFromColor(game, key)} won the game with ${player.points} victory points!`);
-      game.winner = player;
+      game.winner = key;
       game.state = 'winner';
+      delete game.turn.roll;
     }
   }