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

assets/css/mineseeker/_timer.scss

@@ -49,6 +49,36 @@
     box-shadow: 0 0 16px rgba(35, 111, 135, 0.75), 0 0 5px rgba(149, 207, 245, 0.5);
 }
 
+#mine-wrapper .game-timer .timer-avatar {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    font-weight: bold;
+    font-family: 'Rajdhani', sans-serif;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+#mine-wrapper .game-timer .timer-avatar__img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+#mine-wrapper .game-timer.red-timer .timer-avatar__initials {
+    color: rgba(246, 125, 82, 0.85);
+}
+
+#mine-wrapper .game-timer.blue-timer .timer-avatar__initials {
+    color: rgba(149, 207, 245, 0.85);
+}
+
 #mine-wrapper .game-timer .timer-icon {
     font-size: 15px;
     opacity: 0.7;

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 = {