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>