ViewCard is now functioning

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

client/src/App.css

@@ -106,3 +106,11 @@ body {
   flex-grow: 1;
 }
 
+.Table .ViewCard {
+  display: flex;
+  positin: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

client/src/App.js

@@ -21,6 +21,7 @@ import { GameOrder } from "./GameOrder.js";
 import { Activities } from "./Activities.js";
 import { SelectPlayer } from "./SelectPlayer.js";
 import { PlayersStatus } from "./PlayersStatus.js";
+import { ViewCard } from "./ViewCard.js";
 import { Hand } from "./Hand.js";
 
 import history from "./history.js";
@@ -41,6 +42,7 @@ const Table = () => {
   const [players, setPlayers] = useState(undefined);
   const [player, setPlayer] = useState(undefined);
   const [buildActive, setBuildActive] = useState(false);
+  const [cardActive, setCardActive] = useState(undefined);
   const fields = [ 'id', 'state', 'color', 'name' ];
 
   useEffect(() => {
@@ -301,7 +303,7 @@ const Table = () => {
           { color && state === 'game-order' && <GameOrder/> }
           { /* state === 'normal' && <Trade/> */ }
           { /* state === 'winner' &&  <Winner color={winner}/>  */ }
-          { /* cardActive && <ViewCard card={cardActive}/> */ }
+          { <ViewCard {...{cardActive, setCardActive }}/> }
 
           { /*isTurn && turn && turn.actions && game.turn.actions.indexOf('select-resources') !== -1 &&
             <ChooseCard type={turn.active}/>
@@ -310,7 +312,7 @@ const Table = () => {
           <Board/>          
           <PlayersStatus/>
           <PlayersStatus active={true}/>
-          <Hand {...{buildActive, setBuildActive}}/>
+          <Hand {...{buildActive, setBuildActive, setCardActive}}/>
         </div>
         <div className="Sidebar">
           { name !== "" && <PlayerList/> }

client/src/Chat.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useRef, useCallback } from "react";
+import React, { useState, useEffect, useContext, useRef, useCallback, useMemo } from "react";
 import Paper from '@material-ui/core/Paper';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -22,7 +22,9 @@ const Chat = () => {
   const [startTime, setStartTime] = useState(0);
 
   const { ws, name } = useContext(GlobalContext);
-
+  const fields = useMemo(() => [
+    'chat', 'startTime'
+  ], []);
   const onWsMessage = (event) => {
     const data = JSON.parse(event.data);
     switch (data.type) {
@@ -54,9 +56,9 @@ const Chat = () => {
     if (!ws) { return; }
     ws.send(JSON.stringify({ 
       type: 'get', 
-      fields: ['chat', 'startTime' ]
+      fields
     }));
-  }, [ws]);
+  }, [ws, fields]);
 
   const chatKeyPress = useCallback((event) => {
     if (event.key === "Enter") {

client/src/ViewCard.js

@@ -1,21 +1,70 @@
-import React from "react";
-import "./ViewCard.css";
+import React, {useEffect, useContext, useMemo, useRef, useState,
+  useCallback} 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';
 
-const ViewCard = ({table, card}) => {
-  if (!table.game.player) {
+import "./ViewCard.css";
+import { Resource } from './Resource.js';
+import { GlobalContext } from "./GlobalContext.js";
+
+const ViewCard = ({cardActive, setCardActive}) => {
+  const { ws } = useContext(GlobalContext);
+  const [priv, setPriv] = useState(undefined);
+  const [turns, setTurns] = useState(0);
+  const fields = useMemo(() => [
+    'private', 'turns'
+  ], []);
+  const onWsMessage = (event) => {
+    const data = JSON.parse(event.data);
+    switch (data.type) {
+    case 'game-update':
+      console.log(`view-card - game update`);
+      if ('private' in data.update && !equal(data.update.private, priv)) {
+        setPriv(data.update.private);
+      }
+      if ('turns' in data.update && data.update.turns !== turns) {
+        setTurns(data.update.turns);
+      }
+      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 playCard = useCallback((event) => {
+    ws.send(JSON.stringify({
+      type: 'play-card',
+      card: cardActive
+    }));
+  }, [ws, cardActive]);
+
+  const close = (event) => {
+    setCardActive(undefined);
+  };
+
+  if (!cardActive) {
     return <></>;
   }
 
-  const playCard = (event) => {
-    table.playCard(card);
-  }
-  const close = (event) => {
-    table.closeCard();
-  };
-
   const capitalize = (string) => {
     if (string === 'vp') {
       return 'Victory Point';
@@ -28,10 +77,10 @@ const ViewCard = ({table, card}) => {
   };
 
   let description, lookup;
-  if (card.type === 'progress') {
-    lookup = `${card.type}-${card.card}`;
+  if (cardActive.type === 'progress') {
+    lookup = `${cardActive.type}-${cardActive.card}`;
   } else {
-    lookup = card.type;
+    lookup = cardActive.type;
   }
 
   switch (lookup) {
@@ -56,7 +105,7 @@ const ViewCard = ({table, card}) => {
       <div>This is still limited by the number of roads you have. If you do not have enough roads
         remaining, or if there are no valid road building locations, the number of roads
         you can place will be reduced.</div>
-      <div>You currently have <b>{table.game.player.roads}</b> roads remaining.</div>
+      <div>You currently have <b>{priv.roads}</b> roads remaining.</div>
       </>;
       break;
   case 'progress-monopoly':
@@ -77,31 +126,31 @@ const ViewCard = ({table, card}) => {
   };
 
   let canPlay = false;
-  if (card.type === 'vp') {
-    let points = table.game.player.points;
-    table.game.player.development.forEach(item => {
+  if (cardActive.type === 'vp') {
+    let points = priv.points;
+    priv.development.forEach(item => {
       if (item.type === 'vp') {
         points++;
       }
     });
     canPlay = points >= 10;
-    if (!canPlay && !card.played) {
+    if (!canPlay && !cardActive.played) {
       description = <>{description}<div>You do not have enough victory points to play this card yet. You can currently reach <b>{points}</b> points.</div></>;
     }
   } else {
-    canPlay = card.turn < table.game.turns;
+    canPlay = cardActive.turn < turns;
     if (!canPlay) {
       description = <>{description}<div>You can not play this card until your next turn.</div></>;
     }
     if (canPlay) {
-      canPlay = table.game.player.playedCard !== table.game.turns;
+      canPlay = priv.playedCard !== turns;
       if (!canPlay) {
         description = <>{description}<div>You have already played a development card this turn.</div></>;
       }
     }
   }
   
-  if (card.played) {
+  if (cardActive.played) {
     description = <>{description}<div>You have already played this card.</div></>;
     canPlay = false;
   }
@@ -109,12 +158,12 @@ const ViewCard = ({table, card}) => {
   return (
     <div className="ViewCard">
       <Paper>
-        <div className="Title">{capitalize(card.type)}</div>
+        <div className="Title">{capitalize(cardActive.type)}</div>
         <div style={{display: 'flex', flexDirection: 'row'}}>
-          <Resource type={`${card.type}-${card.card}`} disabled count={1}/>
+          <Resource type={`${cardActive.type}-${cardActive.card}`} disabled count={1}/>
           <div className="Description">{description}</div>
         </div>
-        { !card.played && 
+        { !cardActive.played && 
           <Button disabled={!canPlay}
             onClick={playCard}>play</Button>
         }
@@ -124,4 +173,4 @@ const ViewCard = ({table, card}) => {
   );
 };
 
-export default ViewCard;
+export {ViewCard};