diff --git a/apps/web/src/components/Game/GameStatus.tsx b/apps/web/src/components/Game/GameStatus.tsx index 60c8ba7..405b22c 100644 --- a/apps/web/src/components/Game/GameStatus.tsx +++ b/apps/web/src/components/Game/GameStatus.tsx @@ -4,8 +4,7 @@ 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'; @@ -13,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, @@ -93,20 +85,7 @@ export const GameStatus = () => { } - - {gameState?.players.map((p) => ( -
- {p.playerType} {p.walletId === walletId ? ' (you)' : ''} | {p.cards}{' '} - / 3{p.won && ' WON!'} -
- ))} -
- {/* */} + ); }; diff --git a/apps/web/src/components/PlayerTag/PlayerTag.tsx b/apps/web/src/components/PlayerTag/PlayerTag.tsx new file mode 100644 index 0000000..1a64cd2 --- /dev/null +++ b/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 = ({ 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 ( +
+

+ {player.playerType} {player.cards}/3 +

+
+ +
+
+ ); +}; + +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..967b39f --- /dev/null +++ b/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 = ({ + gameState, +}) => { + return ( +
+ {gameState?.players.map((p) => ( + + ))} +
+ ); +}; + +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..366b6ad --- /dev/null +++ b/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%); +}