Change player list

apps/web/src/components/Game/GameStatus.tsx

@@ -4,24 +4,16 @@ import Button from '../Button';
 import { useGame } from '../../providers/GameProvider';
 import { useLocation } from 'wouter';
 import DarkContainer from '../DarkContainer';
-import type { Player } from '../../utils/Player';
-import { useWallet } from '@solana/wallet-adapter-react';
+import PlayerTagContainer from '../PlayerTag';
 
 const getColor = (time: number) => {
   if (time > 5000) return 'lightgreen';
   if (time > 2000) return 'orange';
   return 'red';
 };
 
-const getTextDecoration = (p: Player, walletId: string | undefined) => {
-  if (p.isDead) return 'line-through';
-  if (p.walletId === walletId) return 'underline';
-  return 'none';
-};
-
 export const GameStatus = () => {
   const queryClient = useQueryClient();
-  const { publicKey: walletId } = useWallet();
 
   const {
     gameState,
@@ -93,20 +85,7 @@ export const GameStatus = () => {
           </Button>
         }
       </DarkContainer>
-      <DarkContainer className={c.rightFixed}>
-        {gameState?.players.map((p) => (
-          <div
-            key={p.walletId}
-            style={{
-              textDecoration: getTextDecoration(p, walletId?.toString()),
-              fontSize: p.won ? '20px' : '16px',
-            }}>
-            {p.playerType} {p.walletId === walletId ? ' (you)' : ''} | {p.cards}{' '}
-            / 3{p.won && ' WON!'}
-          </div>
-        ))}
-      </DarkContainer>
-      {/* </div> */}
+      <PlayerTagContainer gameState={gameState} />
     </div>
   );
 };

apps/web/src/components/PlayerTag/PlayerTag.tsx

@@ -0,0 +1,36 @@
+import { Player, PlayerType } from '../../utils/Player';
+import astronautImg from '../../assets/astronaut2.png';
+import alienImg from '../../assets/alien2.png';
+import robotImg from '../../assets/robot2.png';
+import wizardImg from '../../assets/wizard2.png';
+import c from './style.module.css';
+import clsx from 'clsx';
+
+type PlayerTagProps = {
+  player: Player;
+};
+
+const PlayerTag: React.FC<PlayerTagProps> = ({ player }) => {
+  let image = astronautImg;
+  if (player.playerType === PlayerType.Alien) {
+    image = alienImg;
+  }
+  if (player.playerType === PlayerType.Robot) {
+    image = robotImg;
+  }
+  if (player.playerType === PlayerType.Wizard) {
+    image = wizardImg;
+  }
+  return (
+    <div className={clsx(c.tagWrapper, { [c.grayscale]: player.isDead })}>
+      <p className={c.text}>
+        {player.playerType} {player.cards}/3
+      </p>
+      <div className={c.imageContainer}>
+        <img className={c.image} src={image} alt='' />
+      </div>
+    </div>
+  );
+};
+
+export default PlayerTag;

apps/web/src/components/PlayerTag/PlayerTagContainer.tsx

@@ -0,0 +1,21 @@
+import PlayerTag from './PlayerTag';
+import type { GameData } from '../../utils/GameData';
+import c from './style.module.css';
+
+type PlayerTagContainerProps = {
+  gameState: GameData | null | undefined;
+};
+
+const PlayerTagContainer: React.FC<PlayerTagContainerProps> = ({
+  gameState,
+}) => {
+  return (
+    <div className={c.container}>
+      {gameState?.players.map((p) => (
+        <PlayerTag key={p.walletId} player={p} />
+      ))}
+    </div>
+  );
+};
+
+export default PlayerTagContainer;

apps/web/src/components/PlayerTag/index.ts

@@ -0,0 +1,3 @@
+import PlayerTagContainer from './PlayerTagContainer';
+
+export default PlayerTagContainer;

apps/web/src/components/PlayerTag/style.module.css

@@ -0,0 +1,45 @@
+.container {
+  position: fixed;
+  right: 12px;
+  top: 20%;
+}
+
+.tagWrapper {
+  display: flex;
+  right: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  margin-bottom: 4px;
+}
+
+.text {
+  color: #f2e2b7;
+  font-family: 'Trebuchet MS', sans-serif;
+  font-size: 20px;
+  font-style: italic;
+  font-weight: 200;
+  line-height: 100%;
+  text-align: right;
+  margin: 0;
+}
+
+.imageContainer {
+  height: 50px;
+  width: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 4px solid #f2e2b7;
+  overflow: hidden;
+}
+
+.image {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.grayscale {
+  filter: grayscale(100%);
+}