Started hooking in players-status

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

client/src/App.css

@@ -59,6 +59,11 @@ body {
   padding: 1rem;
 }
 
+
+.Table .PlayersStatus {
+  z-index: 5000;
+}
+
 .Table .Game {
   position: relative;
   display: flex;

client/src/App.js

@@ -20,6 +20,7 @@ import { base, gamesPath } from './Common.js';
 import { GameOrder } from "./GameOrder.js";
 import { Activities } from "./Activities.js";
 import { SelectPlayer } from "./SelectPlayer.js";
+import { PlayersStatus } from "./PlayersStatus.js";
 
 import history from "./history.js";
 import "./App.css";
@@ -296,7 +297,8 @@ const Table = () => {
           { color && state === 'game-order' && <GameOrder/> }
 
           <Board/>          
-          
+          <PlayersStatus/>
+          <PlayersStatus active={true}/>
           { /* state === 'winner' && 
             <Winner color={winner}/>
           }

client/src/BoardPieces.js

@@ -19,12 +19,7 @@ const City = ({ color, onClick }) => {
   return <div className="City" onClick={() => onClick('city')}><div className={['Shape', classes[color]].join(' ')}/></div>;
 }
 
-const BoardPieces = ({ table, color, onClick }) => {
-  if (!table.game || !table.game.player) {
-    return <></>;
-  }
-
-  const player = table.game.players[color];
+const BoardPieces = ({ player, onClick, color }) => {
   if (!player) {
     return <></>;
   }
@@ -51,4 +46,4 @@ const BoardPieces = ({ table, color, onClick }) => {
   );
 };
 
-export default BoardPieces;
+export {BoardPieces};

client/src/MediaControl.js

@@ -72,11 +72,14 @@ const MediaAgent = () => {
         return;
       }
       const connection = new RTCPeerConnection({
-        /*configuration: {
+        configuration: {
           offerToReceiveAudio: true,
           offerToReceiveVideo: false
-        },*/
-        iceServers: [ { urls: "stun:stun.l.google.com:19302" } ]
+        },
+        iceServers: [ 
+          { urls: "stun:stun.l.google.com:19302" },
+          { urls: "stun:stun.stunprotocol.org:3478" } 
+        ]
       }, {
          /* this will no longer be needed by chrome
           * eventually (supposedly), but is necessary 

client/src/Placard.js

@@ -76,4 +76,4 @@ const Placard = ({table, type, active, disabled, count}) => {
   }
 };
 
-export default Placard;
+export {Placard};

client/src/PlayersStatus.js

@@ -1,17 +1,18 @@
-import React from "react";
-import Resource from './Resource.js';
-import "./PlayersStatus.css";
-import BoardPieces from './BoardPieces.js';
-import { getPlayerName } from './Common.js';
-import PlayerColor from './PlayerColor.js';
-import Placard from './Placard.js';
+import React, { useContext, useState, useMemo, useRef, useEffect } from "react";
+import equal from "fast-deep-equal";
 
-const Player = ({ table, color, onClick, reverse }) => {
-  if (!table.game) {
+import "./PlayersStatus.css";
+import { BoardPieces } from './BoardPieces.js';
+import { Resource } from './Resource.js';
+import { PlayerColor } from './PlayerColor.js';
+import { Placard } from './Placard.js';
+import { GlobalContext } from './GlobalContext.js';
+
+const Player = ({ player, onClick, reverse, color,
+  largestArmy, largestArmySize, isSelf, longestRoad, longestRoadLength }) => {
+  if (!player) {
     return <></>;
   }
-  const game = table.game;
-  const player = game.players[color];
   
   const developmentCards = player.unplayed
     ? <Resource label={true} type={'progress-back'} 
@@ -29,28 +30,28 @@ const Player = ({ table, color, onClick, reverse }) => {
       disabled/><b>{player.points}</b></>;
   }
   
-  const longestRoad = game.longestRoad && game.longestRoad === color ?
+  const longestRoadPlacard = longestRoad && longestRoad === color ?
       <Placard
         disabled
         active={false}
         type='longest-road'
-        count={game.longestRoadLength}
+        count={longestRoadLength}
       /> : undefined;
 
-    const largestArmy = game.largestArmy && game.largestArmy === color ?
+    const largestArmyPlacard = largestArmy && largestArmy === color ?
       <Placard
         disabled
         active={false}
         type='largest-army'
-        count={game.largestArmySize}
+        count={largestArmySize}
       /> : undefined;
   
   return <div className="Player">
       <div className="Who">
-        <PlayerColor color={color}/>{getPlayerName(game.sessions, color)}
+        <PlayerColor color={color}/>{player.name}
       </div>
       <div className="What">
-        { game.color === color &&
+        { isSelf &&
           <div className="LongestRoad">
             Longest road: {player.longestRoad ? player.longestRoad : 0}
           </div>
@@ -59,58 +60,98 @@ const Player = ({ table, color, onClick, reverse }) => {
         { (largestArmy || longestRoad || armyCards || developmentCards) && <>
           <div className="Has">
             { !reverse && <>
-              { largestArmy }
-              { longestRoad }
-              { !largestArmy && armyCards }
+              { largestArmyPlacard }
+              { longestRoadPlacard }
+              { !largestArmyPlacard && armyCards }
               { developmentCards }
             </> }
             { reverse && <>
               { developmentCards }
-              { !largestArmy && armyCards }
-              { longestRoad }
-              { largestArmy }
+              { !largestArmyPlacard && armyCards }
+              { longestRoadPlacard }
+              { largestArmyPlacard }
             </> }
           </div>
         </> }
       </div>
       <div className={`${onClick ? 'Normal' : 'Shrunken'}`}>
-        <BoardPieces onClick={onClick} table={table} color={color}/>
+        <BoardPieces onClick={onClick} player={player}/>
       </div>
     </div>
 };
 
-const PlayersStatus = ({ table, onClick, color, active }) => {
-  if (!table.game) {
+const PlayersStatus = ({ active }) => {
+  const { ws } = useContext(GlobalContext);
+  const [players, setPlayers] = useState(undefined);
+  const [color, setColor] = useState(undefined);
+  const fields = useMemo(() => [
+    'players', 'color'
+  ], []);
+  const onWsMessage = (event) => {
+    const data = JSON.parse(event.data);
+    switch (data.type) {
+    case 'game-update':
+      console.log(`players-status - game-update: `, data.update);
+      if ('players' in data.update && !equal(players, data.update.players)) {
+        setPlayers(data.update.players);
+      }   
+      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]);
+
+  if (!players) {
     return <></>;
   }
 
-  const game = table.game;
-  let players;
-  if (color) {
-    players = <Player
-      onClick={onClick}
+  const buildItem = () => {
+    console.log(`player-status - build-item`);
+  }
+  
+  let elements;
+  if (active) {
+    elements = <Player
+      player={players[color]}
+      onClick={buildItem}
       reverse
-      key={`PlayerStatus-${getPlayerName(game.sessions, color)}`}
-      table={table}
+      key={`PlayerStatus-${color}`}
       color={color}/>;
   } else {
-    players = Object.getOwnPropertyNames(game.players)
-    .filter(color => game.players[color].status === 'Active' 
-      && game.color !== color)
-    .map(color => {
+    elements = Object.getOwnPropertyNames(players)
+    .filter(key => players[key].status === 'Active' 
+      && color !== key)
+    .map(key => {
       return <Player
-        onClick={onClick}
-        key={`PlayerStatus-${getPlayerName(game.sessions, color)}`}
-        table={table}
-        color={color}/>;
+        player={players[key]}
+        key={`PlayerStatus-${key}}`}
+        color={key}/>;
     });
   }
 
   return (
     <div className={`PlayersStatus ${active ? 'ActivePlayer' : ''}`}>
-      { players }
+      { elements }
     </div>
   );
 }
 
-export default PlayersStatus;
+export { PlayersStatus };