Show viewcard

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

client/src/App.css

@@ -106,9 +106,35 @@ body {
   flex-grow: 1;
 }
 
+.Table .Dialogs {
+  position: absolute;
+  display: flex;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  justify-content: space-around;
+  align-items: center;
+  z-index: 20000;
+  pointer-events: none;
+}
+
+.Table .Dialogs > * {
+  pointer-events: all;
+}
+
 .Table .ViewCard {
   display: flex;
-  positin: relative;
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.Table .ChooseCard {
+  display: flex;
+  position: relative;
   top: 0;
   left: 0;
   right: 0;

client/src/App.js

@@ -22,6 +22,7 @@ import { Activities } from "./Activities.js";
 import { SelectPlayer } from "./SelectPlayer.js";
 import { PlayersStatus } from "./PlayersStatus.js";
 import { ViewCard } from "./ViewCard.js";
+import { ChooseCard } from "./ChooseCard.js";
 import { Hand } from "./Hand.js";
 
 import history from "./history.js";
@@ -290,25 +291,24 @@ const Table = () => {
       <div className="Table">
         <Activities/>
         <div className="Game">
-          { error && <div className="ErrorDialog">
+          <div className="Dialogs">
-            <Paper className="Error">
+            { error && <div className="ErrorDialog">
-              <div>{ error }</div>
+              <Paper className="Error">
-              <Button onClick={() => { setError("")}}>dismiss</Button>
+                <div>{ error }</div>
-            </Paper>
+                <Button onClick={() => { setError("")}}>dismiss</Button>
-          </div> }
+              </Paper>
-          { warning && <div className="WarningDialog">
+            </div> }
-            <Paper className="Warning">{ warning }</Paper>
+            { warning && <div className="WarningDialog">
-          </div> }
+              <Paper className="Warning">{ warning }</Paper>
-          { state === 'normal' && <SelectPlayer/> }
+            </div> }
-          { color && state === 'game-order' && <GameOrder/> }
+            { state === 'normal' && <SelectPlayer/> }
-          { /* state === 'normal' && <Trade/> */ }
+            { color && state === 'game-order' && <GameOrder/> }
-          { /* state === 'winner' &&  <Winner color={winner}/>  */ }
+            { /* state === 'normal' && <Trade/> */ }
-          { <ViewCard {...{cardActive, setCardActive }}/> }
+            { /* state === 'winner' &&  <Winner color={winner}/>  */ }
-
+            <ViewCard {...{cardActive, setCardActive }}/>
-          { /*isTurn && turn && turn.actions && game.turn.actions.indexOf('select-resources') !== -1 &&
+            <ChooseCard/>
-            <ChooseCard type={turn.active}/>
+          </div>
-          */ }
+         
-
           <Board/>          
           <PlayersStatus/>
           <PlayersStatus active={true}/>

client/src/ChooseCard.css

@@ -1,10 +1,5 @@
 .ChooseCard {
   display: flex;
-  position: absolute;
-  left: 0;
-  right: 30rem;
-  bottom: 0;
-  top: 0;
   justify-content: center;
   align-items: center;
   background: rgba(0,0,0,0.5);

client/src/ChooseCard.js

@@ -1,13 +1,63 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect, useMemo, useRef,
-import "./ChooseCard.css";
+  useContext } from "react";
+import equal from "fast-deep-equal";
+
 import Paper from '@material-ui/core/Paper';
 import Button from '@material-ui/core/Button';
-import Resource from './Resource.js';
+import "./ChooseCard.css";
+import {Resource} from './Resource.js';
+import {GlobalContext} from './GlobalContext.js';
 
-const ChooseCard = ({table, type}) => {
+const ChooseCard = () => {
+  const { ws } = useContext(GlobalContext);
+  const [turn, setTurn] = useState(undefined);
+  const [color, setColor] = useState(undefined);
   const [cards, setCards] = useState([]);
-  const count = (type === 'monopoly') ? 1 : 2;
+  const fields = useMemo(() => [
+    'turn', 'color'
+  ], []);
+ 
+  const onWsMessage = (event) => {
+    const data = JSON.parse(event.data);
+    switch (data.type) {
+    case 'game-update':
+      console.log(`choose-card - game-update: `, data.update);
+      if ('turn' in data.update && !equal(turn, data.update.turn)) {
+        setTurn(data.update.turn);
+      }   
+      if ('color' in data.update && data.update.color !== color) {
+        setColor(data.update.color);
+      }
+      break;
+    default:
+      break;
+    }
+  };
+  const refWsMessage = useRef(onWsMessage);
+  useEffect(() => { refWsMessage.current = onWsMessage; });
+  useEffect(() => {
+    if (!ws) { return; }
+    const cbMessage = e => refWsMessage.current(e);
+    ws.addEventListener('message', cbMessage);
+    return () => { ws.removeEventListener('message', cbMessage); }
+  }, [ws, refWsMessage]);
+  useEffect(() => {
+    if (!ws) { return; }
+    ws.send(JSON.stringify({ 
+      type: 'get', 
+      fields
+    }));
+  }, [ws, fields]);
 
+  const selectResources = useCallback((event) => {
+    ws.send(JSON.stringify({
+      type: 'select-resources',
+      cards
+    }));
+  }, [ws]);
+
+  const count = (turn && turn.active === 'monopoly') ? 1 : 2;
+  
   const selectCard = useCallback((event) => {
     event.target.classList.toggle('Selected');
  
@@ -27,16 +77,14 @@ const ChooseCard = ({table, type}) => {
     setCards(tmp);
   }, [ setCards, count ]);
 
-  if (!table.game) {
+  if (!turn 
+  || turn.color !== color
+  || !turn.actions 
+  || turn.actions.indexOf('select-resources') === -1 
+  || !turn.active) {
     return <></>;
   }
-
+    
-  console.log(cards.length, count);
-
-  const submitCards = () => {
-    table.selectResources(cards);
-  }
-
   const resources = [
     'wheat', 'brick', 'stone', 'sheep', 'wood'
   ].map(type => {
@@ -48,7 +96,7 @@ const ChooseCard = ({table, type}) => {
   });
 
   let title;
-  switch (type) {
+  switch (turn.active) {
   case 'monopoly':
     title = <><b>Monopoly</b>! Tap the resource type you want everyone to give you!</>;
     break;
@@ -56,7 +104,7 @@ const ChooseCard = ({table, type}) => {
     title = <><b>Year of Plenty</b>! Tap the two resources you want to receive from the bank!</>;
     break;
   default:
-    title = <>Unknown card type {type}.</>;
+    title = <>Unknown card type {turn.active}.</>;
     break;
   }
 
@@ -67,10 +115,10 @@ const ChooseCard = ({table, type}) => {
         <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'center'}}>
           { resources }
         </div>
-        <div className="Actions"><Button disabled={cards.length !== count} onClick={submitCards}>submit</Button></div>
+        <div className="Actions"><Button disabled={cards.length !== count} onClick={selectResources}>submit</Button></div>
       </Paper>
     </div>
   );
 };
 
-export default ChooseCard;
+export {ChooseCard};

server/routes/games.js

@@ -3436,7 +3436,7 @@ router.ws("/ws/:id", async (ws, req) => {
       }
       break;
     case 'select-resources':
-      console.log(`${short}: <- select-resources:${getName(session)}`);
+      console.log(`${short}: <- select-resources:${getName(session)} - `, data.cards);
       warning = selectResources(game, session, data.cards);
       if (warning) {
         sendWarning(session, warning);