new: usr: registered users have avatars next to the timer #4

assets/js/mine-seeker/components/GameTimer.jsx

@@ -10,8 +10,20 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useGame } from '@mine-contexts';
 
+const renderAvatar = player => {
+  if (!player.registered) return null;
+  return (
+    <div className="timer-avatar">
+      {player.avatar
+        ? <img src={player.avatar} alt={player.name} className="timer-avatar__img" />
+        : <span className="timer-avatar__initials">{player.name.slice(0, 2).toUpperCase()}</span>
+      }
+    </div>
+  );
+};
+
 const GameTimer = () => {
-  const { overlay, connectionLost, endRef, activePlayer, webPlayer } = useGame();
+  const { overlay, connectionLost, endRef, activePlayer, red, blue } = useGame();
   const [redTime, setRedTime] = useState(0);
   const [blueTime, setBlueTime] = useState(0);
   const [isRunning, setIsRunning] = useState(false);
@@ -151,10 +163,12 @@ const GameTimer = () => {
   return (
     <div className="game-timer-container">
       <div className={`game-timer red-timer ${!activePlayer ? 'active' : ''}`}>
+        {renderAvatar(red)}
         <i className={`fa ${!activePlayer ? 'fa-hourglass-half' : 'fa-hourglass-start'} timer-icon`} />
         <span className="timer-display">{formatTime(redTime)}</span>
       </div>
       <div className={`game-timer blue-timer ${activePlayer ? 'active' : ''}`}>
+        {renderAvatar(blue)}
         <i className={`fa ${activePlayer ? 'fa-hourglass-half' : 'fa-hourglass-start'} timer-icon`} />
         <span className="timer-display">{formatTime(blueTime)}</span>
       </div>

assets/js/mine-seeker/hooks/useServerCommunication.jsx

@@ -90,10 +90,14 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
     syncRed(p => ({
       ...p,
       name: payload.users.red || payload.users.redAnon || p.name,
+      registered: !!payload.users.red,
+      avatar: payload.users.redAvatar ?? null,
     }));
     syncBlue(p => ({
       ...p,
       name: payload.users.blue || payload.users.blueAnon || p.name,
+      registered: !!payload.users.blue,
+      avatar: payload.users.blueAvatar ?? null,
       desc: 'blue' === webPlayerRef.current ? DESC.you : DESC.buddy,
       active: true,
     }));

assets/js/mine-seeker/utils/constants.jsx

@@ -36,6 +36,7 @@ export const IMAGES = {
 
 export const PLAYER_DEF = {
   name: '...', desc: '', active: false, mines: 0, haveBomb: true, enabledBomb: true,
+  registered: false, avatar: null,
 };
 
 export const DESC = {