From a87b55f2e522720a1ce542065296e9a97c837dc7 Mon Sep 17 00:00:00 2001
From: tsiklic1 <toma.siklic@gmail.com>
Date: Tue, 11 Nov 2025 16:42:54 +0100
Subject: [PATCH 1/5] add player tag

---
 apps/web/src/components/Game/GameStatus.tsx   |  7 ++++
 .../src/components/PlayerTag/PlayerTag.tsx    | 33 +++++++++++++++++++
 .../PlayerTag/PlayerTagContainer.tsx          | 20 +++++++++++
 apps/web/src/components/PlayerTag/index.ts    |  3 ++
 .../src/components/PlayerTag/style.module.css | 33 +++++++++++++++++++
 5 files changed, 96 insertions(+)
 create mode 100644 apps/web/src/components/PlayerTag/PlayerTag.tsx
 create mode 100644 apps/web/src/components/PlayerTag/PlayerTagContainer.tsx
 create mode 100644 apps/web/src/components/PlayerTag/index.ts
 create mode 100644 apps/web/src/components/PlayerTag/style.module.css

diff --git a/apps/web/src/components/Game/GameStatus.tsx b/apps/web/src/components/Game/GameStatus.tsx
index 60c8ba7..3375f1a 100644
--- a/apps/web/src/components/Game/GameStatus.tsx
+++ b/apps/web/src/components/Game/GameStatus.tsx
@@ -6,6 +6,7 @@ import { useLocation } from 'wouter';
 import DarkContainer from '../DarkContainer';
 import type { Player } from '../../utils/Player';
 import { useWallet } from '@solana/wallet-adapter-react';
+import PlayerTag from '../PlayerTag/PlayerTag';
 
 const getColor = (time: number) => {
   if (time > 5000) return 'lightgreen';
@@ -106,7 +107,13 @@ export const GameStatus = () => {
           </div>
         ))}
       </DarkContainer>
+      <div></div>
       {/* </div> */}
+      <div>
+        {gameState?.players.map((p) => (
+          <PlayerTag player={p} />
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/apps/web/src/components/PlayerTag/PlayerTag.tsx b/apps/web/src/components/PlayerTag/PlayerTag.tsx
new file mode 100644
index 0000000..c222109
--- /dev/null
+++ b/apps/web/src/components/PlayerTag/PlayerTag.tsx
@@ -0,0 +1,33 @@
+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';
+
+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={c.tagWrapper}>
+      <p className={c.text}>{player.playerType}</p>
+      <div className={c.imageContainer}>
+        <img className={c.image} src={image} alt='' />
+      </div>
+    </div>
+  );
+};
+
+export default PlayerTag;
diff --git a/apps/web/src/components/PlayerTag/PlayerTagContainer.tsx b/apps/web/src/components/PlayerTag/PlayerTagContainer.tsx
new file mode 100644
index 0000000..76d231e
--- /dev/null
+++ b/apps/web/src/components/PlayerTag/PlayerTagContainer.tsx
@@ -0,0 +1,20 @@
+import PlayerTag from './PlayerTag';
+import type { GameData } from '../../utils/GameData';
+
+type PlayerTagContainerProps = {
+  gameState: GameData;
+};
+
+const PlayerTagContainer: React.FC<PlayerTagContainerProps> = ({
+  gameState,
+}) => {
+  return (
+    <div>
+      {gameState?.players.map((p) => (
+        <PlayerTag player={p} />
+      ))}
+    </div>
+  );
+};
+
+export default PlayerTagContainer;
diff --git a/apps/web/src/components/PlayerTag/index.ts b/apps/web/src/components/PlayerTag/index.ts
new file mode 100644
index 0000000..737b8b0
--- /dev/null
+++ b/apps/web/src/components/PlayerTag/index.ts
@@ -0,0 +1,3 @@
+import PlayerTagContainer from './PlayerTagContainer';
+
+export default PlayerTagContainer;
diff --git a/apps/web/src/components/PlayerTag/style.module.css b/apps/web/src/components/PlayerTag/style.module.css
new file mode 100644
index 0000000..3406890
--- /dev/null
+++ b/apps/web/src/components/PlayerTag/style.module.css
@@ -0,0 +1,33 @@
+.tagWrapper {
+  display: flex;
+  right: 0;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+.text {
+  color: #f2e2b7;
+  font-family: 'Trebuchet MS', sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 200;
+  line-height: 140%;
+  text-align: right;
+}
+
+.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: 110%;
+  max-height: 110%;
+}

From fb752355fd0e1a0f98c734d9123ef2bd472364d2 Mon Sep 17 00:00:00 2001
From: tsiklic1 <toma.siklic@gmail.com>
Date: Tue, 11 Nov 2025 16:56:06 +0100
Subject: [PATCH 2/5] add styles

---
 apps/web/src/components/Game/GameStatus.tsx      | 12 ++++--------
 apps/web/src/components/PlayerTag/PlayerTag.tsx  |  4 +++-
 .../components/PlayerTag/PlayerTagContainer.tsx  |  7 ++++---
 .../src/components/PlayerTag/style.module.css    | 16 ++++++++++++----
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/Game/GameStatus.tsx b/apps/web/src/components/Game/GameStatus.tsx
index 3375f1a..816fdc9 100644
--- a/apps/web/src/components/Game/GameStatus.tsx
+++ b/apps/web/src/components/Game/GameStatus.tsx
@@ -6,7 +6,7 @@ import { useLocation } from 'wouter';
 import DarkContainer from '../DarkContainer';
 import type { Player } from '../../utils/Player';
 import { useWallet } from '@solana/wallet-adapter-react';
-import PlayerTag from '../PlayerTag/PlayerTag';
+import PlayerTagContainer from '../PlayerTag';
 
 const getColor = (time: number) => {
   if (time > 5000) return 'lightgreen';
@@ -94,7 +94,7 @@ export const GameStatus = () => {
           </Button>
         }
       </DarkContainer>
-      <DarkContainer className={c.rightFixed}>
+      {/* <DarkContainer className={c.rightFixed}>
         {gameState?.players.map((p) => (
           <div
             key={p.walletId}
@@ -106,14 +106,10 @@ export const GameStatus = () => {
             / 3{p.won && ' WON!'}
           </div>
         ))}
-      </DarkContainer>
+      </DarkContainer> */}
       <div></div>
       {/* </div> */}
-      <div>
-        {gameState?.players.map((p) => (
-          <PlayerTag player={p} />
-        ))}
-      </div>
+      <PlayerTagContainer gameState={gameState} />
     </div>
   );
 };
diff --git a/apps/web/src/components/PlayerTag/PlayerTag.tsx b/apps/web/src/components/PlayerTag/PlayerTag.tsx
index c222109..32a4440 100644
--- a/apps/web/src/components/PlayerTag/PlayerTag.tsx
+++ b/apps/web/src/components/PlayerTag/PlayerTag.tsx
@@ -22,7 +22,9 @@ const PlayerTag: React.FC<PlayerTagProps> = ({ player }) => {
   }
   return (
     <div className={c.tagWrapper}>
-      <p className={c.text}>{player.playerType}</p>
+      <p className={c.text}>
+        {player.playerType} {player.cards}/3
+      </p>
       <div className={c.imageContainer}>
         <img className={c.image} src={image} alt='' />
       </div>
diff --git a/apps/web/src/components/PlayerTag/PlayerTagContainer.tsx b/apps/web/src/components/PlayerTag/PlayerTagContainer.tsx
index 76d231e..967b39f 100644
--- a/apps/web/src/components/PlayerTag/PlayerTagContainer.tsx
+++ b/apps/web/src/components/PlayerTag/PlayerTagContainer.tsx
@@ -1,17 +1,18 @@
 import PlayerTag from './PlayerTag';
 import type { GameData } from '../../utils/GameData';
+import c from './style.module.css';
 
 type PlayerTagContainerProps = {
-  gameState: GameData;
+  gameState: GameData | null | undefined;
 };
 
 const PlayerTagContainer: React.FC<PlayerTagContainerProps> = ({
   gameState,
 }) => {
   return (
-    <div>
+    <div className={c.container}>
       {gameState?.players.map((p) => (
-        <PlayerTag player={p} />
+        <PlayerTag key={p.walletId} player={p} />
       ))}
     </div>
   );
diff --git a/apps/web/src/components/PlayerTag/style.module.css b/apps/web/src/components/PlayerTag/style.module.css
index 3406890..b4dce9a 100644
--- a/apps/web/src/components/PlayerTag/style.module.css
+++ b/apps/web/src/components/PlayerTag/style.module.css
@@ -1,19 +1,27 @@
+.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: normal;
+  font-style: italic;
   font-weight: 200;
-  line-height: 140%;
+  line-height: 100%;
   text-align: right;
+  margin: 0;
 }
 
 .imageContainer {
@@ -28,6 +36,6 @@
 }
 
 .image {
-  max-width: 110%;
-  max-height: 110%;
+  max-width: 100%;
+  max-height: 100%;
 }

From 771e9ae13490bf1a67605d76f2633d9cf593b91e Mon Sep 17 00:00:00 2001
From: tsiklic1 <toma.siklic@gmail.com>
Date: Tue, 11 Nov 2025 16:56:43 +0100
Subject: [PATCH 3/5] remove commented code

---
 apps/web/src/components/Game/GameStatus.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/apps/web/src/components/Game/GameStatus.tsx b/apps/web/src/components/Game/GameStatus.tsx
index 816fdc9..4c414ef 100644
--- a/apps/web/src/components/Game/GameStatus.tsx
+++ b/apps/web/src/components/Game/GameStatus.tsx
@@ -94,21 +94,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></div>
-      {/* </div> */}
       <PlayerTagContainer gameState={gameState} />
     </div>
   );

From 320cb57088664049b18a6854831462cc5a778e76 Mon Sep 17 00:00:00 2001
From: tsiklic1 <toma.siklic@gmail.com>
Date: Wed, 12 Nov 2025 09:58:23 +0100
Subject: [PATCH 4/5] styling player tags

---
 apps/web/src/components/Game/GameStatus.tsx   | 23 +++++++++++--------
 .../src/components/PlayerTag/PlayerTag.tsx    |  3 ++-
 .../src/components/PlayerTag/style.module.css |  4 ++++
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/Game/GameStatus.tsx b/apps/web/src/components/Game/GameStatus.tsx
index 4c414ef..07dfe8f 100644
--- a/apps/web/src/components/Game/GameStatus.tsx
+++ b/apps/web/src/components/Game/GameStatus.tsx
@@ -4,8 +4,6 @@ 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) => {
@@ -14,15 +12,8 @@ const getColor = (time: number) => {
   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,
@@ -94,7 +85,21 @@ 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></div>
+      {/* </div> */}
       <PlayerTagContainer gameState={gameState} />
     </div>
   );
diff --git a/apps/web/src/components/PlayerTag/PlayerTag.tsx b/apps/web/src/components/PlayerTag/PlayerTag.tsx
index 32a4440..1a64cd2 100644
--- a/apps/web/src/components/PlayerTag/PlayerTag.tsx
+++ b/apps/web/src/components/PlayerTag/PlayerTag.tsx
@@ -4,6 +4,7 @@ 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;
@@ -21,7 +22,7 @@ const PlayerTag: React.FC<PlayerTagProps> = ({ player }) => {
     image = wizardImg;
   }
   return (
-    <div className={c.tagWrapper}>
+    <div className={clsx(c.tagWrapper, { [c.grayscale]: player.isDead })}>
       <p className={c.text}>
         {player.playerType} {player.cards}/3
       </p>
diff --git a/apps/web/src/components/PlayerTag/style.module.css b/apps/web/src/components/PlayerTag/style.module.css
index b4dce9a..366b6ad 100644
--- a/apps/web/src/components/PlayerTag/style.module.css
+++ b/apps/web/src/components/PlayerTag/style.module.css
@@ -39,3 +39,7 @@
   max-width: 100%;
   max-height: 100%;
 }
+
+.grayscale {
+  filter: grayscale(100%);
+}

From 1030de771479cf1b65909d50ace3be3739d43948 Mon Sep 17 00:00:00 2001
From: tsiklic1 <toma.siklic@gmail.com>
Date: Wed, 12 Nov 2025 09:59:46 +0100
Subject: [PATCH 5/5] remove unused code

---
 apps/web/src/components/Game/GameStatus.tsx | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/apps/web/src/components/Game/GameStatus.tsx b/apps/web/src/components/Game/GameStatus.tsx
index 07dfe8f..405b22c 100644
--- a/apps/web/src/components/Game/GameStatus.tsx
+++ b/apps/web/src/components/Game/GameStatus.tsx
@@ -85,21 +85,6 @@ 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></div>
-      {/* </div> */}
       <PlayerTagContainer gameState={gameState} />
     </div>
   );