peddlers-of-ketran/client/src/GameOrder.js

import React, { useState, useEffect, useContext, useRef, useMemo } from "react";
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import equal from "fast-deep-equal";

import { Dice } from "./Dice.js";
import { PlayerColor } from "./PlayerColor.js";

import "./GameOrder.css";

import { GlobalContext } from "./GlobalContext.js";

const GameOrder = () => {
  const { ws } = useContext(GlobalContext);
  const [players, setPlayers] = useState({});
  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(`GameOrder 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]);

  const sendMessage = (data) => {
    ws.send(JSON.stringify(data));
  }
  
  const rollClick = (event) => {
    sendMessage({ type: 'roll' });
  }
  
  let playerElements = [], hasRolled = true;
  for (let key in players) {
    const item = players[key], name = item.name;
    if (!name) {
      continue;
    }
    if (!item.orderRoll) {
      item.orderRoll = 0;
    }
    if (key === color) {
      hasRolled = item.orderRoll !== 0;
    }
    playerElements.push({ name, color: key, ...item });
  }

  playerElements.sort((A, B) => {
    if (A.order === B.order) {
      if (A.orderRoll === B.orderRoll) {
        return A.name.localeCompare(B.name);
      }    
      return B.orderRoll - A.orderRoll;
    }
    return B.order - A.order;
  });

  playerElements = playerElements.map(item => 
    <div className="GameOrderPlayer" key={`player-${item.color}`}>
      <PlayerColor color={item.color}/>
      <div>{item.name}</div>
      { item.orderRoll !== 0 && <>rolled <Dice pips={item.orderRoll}/>. {item.orderStatus}</> }
      { item.orderRoll === 0 && <>has not rolled yet. {item.orderStatus}</>}
    </div>
  );

  return (
    <div className="GameOrder">
      <Paper>
        <div className="Title">Game Order</div>
        <div className="PlayerList">
          { playerElements }
        </div>
        <Button disabled={hasRolled} onClick={rollClick}>Roll Dice</Button>
      </Paper>
    </div>
  );
};

export { GameOrder };