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

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

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

import "./SelectPlayer.css";

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

const SelectPlayer = () => {
  const { ws } = useContext(GlobalContext);
  const [turn, setTurn] = useState(undefined);
  const [color, setColor] = useState(undefined);
  const fields = useMemo(() => [
    'turn', 'color'
  ], []);

  const onWsMessage = (event) => {
    const data = JSON.parse(event.data);
    switch (data.type) {
    case 'game-update':
      console.log(`select-players - 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 playerClick = useCallback((event) => {
    ws.send(JSON.stringify({
      type: 'steal-resource',
      color: event.currentTarget.getAttribute('data-color')
    }));
  }, [ws]);

  if (!color || !turn || turn.color !== color || !turn.limits || !turn.limits.players) {
    return (<></>);
  }

  const list = turn.limits.players.map(item =>
    <div className="SelectPlayerItem" 
      onClick={playerClick}
      data-color={item.color}
      key={`player-${item.color}`}>
      <PlayerColor color={item.color}/>
      <div>{item.name}</div>
    </div>
  );

  return (
    <div className="SelectPlayer">
      <Paper>
        <div className="Title">Select Player to Steal From</div>
        <div className="SelectPlayerList">
          { list }
        </div>
      </Paper>
    </div>
  );
};

export { SelectPlayer };