add player lost color on nameplates

prrockzed · Dec 19, 2024 · b2be7d1 · b2be7d1
1 parent f202030
commit b2be7d1
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 36 deletions.
diff --git a/src/components/Arbiter/Arbiter.tsx b/src/components/Arbiter/Arbiter.tsx
@@ -185,7 +185,7 @@ export default function Arbiter() {
       </div>
 
       <ChessProvider whoseTurn={board.currentTeam}>
-        <ChessWrapper>
+        <ChessWrapper loseOrder={board.loseOrder}>
           <Chessboard
             playMove={playMove}
             pieces={board.pieces}

diff --git a/src/components/ChessWrapper/ChessWrapper.tsx b/src/components/ChessWrapper/ChessWrapper.tsx
@@ -1,12 +1,16 @@
-import "./ChessWrapper.css";
-import { useChessContext } from "../context/ChessContext";
-import { TeamType } from "../../Types";
+import './ChessWrapper.css'
+import { useChessContext } from '../context/ChessContext'
+import { TeamType } from '../../Types'
+
+type PlayerState = 'active' | 'inactive' | 'lost';
 
 /** Wrapper component for the chess board, holds player panels surrounding the board */
 export default function ChessWrapper({
   children,
+  loseOrder: lostTeams,
 }: {
   children: React.ReactNode;
+  loseOrder: TeamType[];
 }) {
   const { currentPlayer } = useChessContext();
   const players = [
@@ -16,48 +20,53 @@ export default function ChessWrapper({
     { name: "Green Player", color: "green", id: "g" },
   ];
 
-  const lostTeams: TeamType[] = [];
+  const getPlayerState = (playerId: TeamType): PlayerState => {
+    if (lostTeams.includes(playerId)) return 'lost'
+    return currentPlayer === playerId ? 'active' : 'inactive'
+  }
 
-  const displayBgColor = players.find((p) => p.id === currentPlayer)?.color || "grey";
-  const lostPlayerColor = "#eeeeee";
+  const displayBgColor = players.find((p) => p.id === currentPlayer)?.color || 'grey';
 
   return (
-    <div className="chess-wrapper">
-      <div className="game-display">
-        <div className="currentPlayerDisplay" style={{backgroundColor: displayBgColor}}>
+    <div className='chess-wrapper'>
+      <div className='game-display'>
+        <div
+          className='currentPlayerDisplay'
+          style={{ backgroundColor: displayBgColor }}
+        >
           {players.find((p) => p.id === currentPlayer)?.name}
         </div>
       </div>
-      <div className="game-layout">
-        <div className="panel-area">
+      <div className='game-layout'>
+        <div className='panel-area'>
           <PlayerPanel
-            name="Yellow Player"
-            color={ lostTeams.includes(TeamType.YELLOW) ? lostPlayerColor :  "yellow"}
-            isActive={currentPlayer === "y" && !lostTeams.includes(TeamType.YELLOW)}
+            name='Yellow Player'
+            color='yellow'
+            playerState={getPlayerState(TeamType.YELLOW)}
           />
         </div>
-        <div className="middle-panel">
-          <div className="panel-area middle-panels" id="left-panel">
+        <div className='middle-panel'>
+          <div className='panel-area middle-panels' id='left-panel'>
             <PlayerPanel
-              name="Blue Player"
-              color={ lostTeams.includes(TeamType.BLUE) ? lostPlayerColor :  "blue"}
-              isActive={currentPlayer === "b" && !lostTeams.includes(TeamType.BLUE)}
+              name='Blue Player'
+              color='blue'
+              playerState={getPlayerState(TeamType.BLUE)}
             />
           </div>
-          <div className="panel-area chessboard-container">{children}</div>
-          <div className="panel-area middle-panels">
+          <div className='panel-area chessboard-container'>{children}</div>
+          <div className='panel-area middle-panels'>
             <PlayerPanel
-              name="Green Player"
-              color={ lostTeams.includes(TeamType.GREEN) ? lostPlayerColor :  "green"}
-              isActive={currentPlayer === "g" && !lostTeams.includes(TeamType.GREEN)}
+              name='Green Player'
+              color='green'
+              playerState={getPlayerState(TeamType.GREEN)}
             />
           </div>
         </div>
-        <div className="panel-area">
+        <div className='panel-area'>
           <PlayerPanel
-            name="Red Player"
-            color={ lostTeams.includes(TeamType.RED) ? lostPlayerColor :  "red"}
-            isActive={currentPlayer === "r" && !lostTeams.includes(TeamType.RED)}
+            name='Red Player'
+            color='red'
+            playerState={getPlayerState(TeamType.RED)}
           />
         </div>
       </div>
@@ -66,19 +75,28 @@ export default function ChessWrapper({
 }
 
 interface PlayerPanelProps {
-  name: string;
-  color: string;
-  isActive: boolean;
+  name: string
+  color: string
+  playerState: PlayerState
 }
 
 /** Player panel component, holds player name and indicates active player */
-function PlayerPanel({ name, color, isActive }: PlayerPanelProps) {
+function PlayerPanel({ name, color, playerState }: PlayerPanelProps) {
+  const stateToColorMap = {
+    active: color,
+    inactive: 'grey',
+    lost: '#444',
+  }
+
   return (
     <div
-      className={`player-panel ${isActive ? "active" : ""}`}
-      style={{ backgroundColor: isActive ? color : "grey" }}
+      className={`player-panel ${playerState === 'active' ? 'active' : ''}`}
+      style={{ 
+        backgroundColor: stateToColorMap[playerState], 
+        color: playerState === 'lost' ? "#eee" : "black" 
+      }}
     >
-      <div className="player-name">{name}</div>
+      <div className='player-name'>{`${name} ${playerState === 'lost' ? 'lost' : ''}`}</div>
     </div>
   )
 }