show last played (#48)

SWU-Karabast · Jan 9, 2025 · 2714513 · 2714513
1 parent 4b84f5c
commit 2714513
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx b/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx
@@ -7,8 +7,15 @@ import DeckDiscard from '../_subcomponents/PlayerTray/DeckDiscard';
 import { IOpponentCardTrayProps } from '@/app/_components/Gameboard/GameboardTypes';
 import { useGame } from '@/app/_contexts/Game.context';
 import { useRouter } from 'next/navigation';
+import { s3CardImageURL } from '@/app/_utils/s3Utils';
 
 const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer }) => {
+    const { gameState, connectedPlayer, getOpponent } = useGame();
+    const router = useRouter();
+    const handleExitButton = () =>{
+        router.push('/');
+    }
+
     // ---------------Styles------------------- //
     const styles = {
         leftColumn: {
@@ -30,23 +37,20 @@ const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer }) => {
             alignItems: 'center',
             justifyContent: 'flex-end',
             pr: '2em',
-            pt: '2em',
+            py: '1em',
         },
         lastPlayed: {
-            border: '2px solid #FFFFFF55'
-
+            height: '100%',
+            aspectRatio: '359 / 500',
+            backgroundSize: 'cover',
+            backgroundImage: gameState.lastPlayedCard ? `url(${s3CardImageURL({ setId: gameState.lastPlayedCard, type: '' })})` : 'none',
         },
         menuStyles: {
             display: 'flex',
             flexDirection: 'column',
         }
     };
 
-    const { gameState, connectedPlayer, getOpponent } = useGame();
-    const router = useRouter();
-    const handleExitButton = () =>{
-        router.push('/');
-    }
 
 
     return (
@@ -67,7 +71,6 @@ const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer }) => {
                     <Typography variant={'h4'}>Initiative</Typography>
                 </Box>
                 <Box sx={styles.lastPlayed} mr={2}>
-                    <Typography variant={'h4'}>Last Played:</Typography>
                 </Box>
                 <Box sx={styles.menuStyles}>
                     <CloseOutlined onClick={handleExitButton} sx={{ cursor:'pointer' }}/>

diff --git a/src/app/_utils/s3Utils.ts b/src/app/_utils/s3Utils.ts
@@ -67,13 +67,22 @@ type IIdToInternalNameMapping = {
     subtitle: string
 }
 
+type ISetCode = {
+    setId: {
+        set: string;
+        number: number;
+    }
+    type: string;
+}
+
 export const s3ImageURL = (path: string) => {
     const s3Bucket = 'https://karabast-assets.s3.amazonaws.com/';
     return s3Bucket + path;
 };
 
-export const s3CardImageURL = (card: ICardData) => {
+export const s3CardImageURL = (card: ICardData | ISetCode) => {
     if (!card) return 'game/epic-action-token.webp';
+    console.log(card);
     const cardNumber = card.setId.number.toString().padStart(3, '0') + (card.type === 'leaderUnit' ? '-portrait' : '');
     return s3ImageURL(`cards/${card.setId.set}/${cardNumber}.webp`);
 };