optimized image rendering, tweaks to game ui

src/components/Card/Card.tsx

@@ -6,7 +6,7 @@ import { buyCardActions } from '../Player/ActionMethods';
 import { hasMaxReserved, reserveCard } from '../Player/ActionMethods/reserveCardActions';
 const { buyCard, tooExpensive } = buyCardActions;
 
-export default function Card({ data, state, setState, reserved = false }: CardProps) {
+export default function Card({ data, state, setState, reserved = false, collapsed = false }: CardProps) {
     const currentPlayer = useCurrentPlayer(state);
     if (!data || !currentPlayer) return <div className="card"></div>;
 
@@ -18,7 +18,7 @@ export default function Card({ data, state, setState, reserved = false }: CardPr
 
     return (
         <div className='card' key={v4()}>
-            <img src={data.image} loading="lazy" />
+            { collapsed ? <div className={`img-placeholder-${data.gemValue}`}></div> : <img src={data.image} loading="lazy" /> }
             <div className={reserved ? `foreground-${data.gemValue}` : 'foreground'}>
                 <section className="card-top-section">
                     <p>{data.gemValue.toUpperCase()}</p>

src/components/Card/CardRow.scss

@@ -5,7 +5,7 @@
     display: flex;
     flex-flow: column nowrap;
     margin: 1rem 0;
-    width: 55vw;
+    width: 45vw;
 
     &.collapsed {
         width: 15vw;
@@ -22,12 +22,12 @@
 
     .card-row-cards-visible {
         display: flex;
-        flex-flow: row nowrap;
+        flex-flow: row wrap;
+        justify-content: right;
         width: 100%;
-        justify-content: space-around;
 
         .card {
-            width: 25%;
+            width: 35%;
             height: 40vh;
             border: 2px solid black;
 

src/components/Card/CardRow.tsx

@@ -37,7 +37,7 @@ export default function CardRow({tier, state, setState}: CardRowProps) {
                     <p>Remaining: {state.gameboard.deck[typedTier].length}</p>
                 </div>
                 { cards && cards.map((cardData: CardData) => {
-                    return <Card key={v4()} data={cardData} state={state} setState={setState} />
+                    return <Card key={v4()} data={cardData} state={state} setState={setState} collapsed={collapsed} />
                 })}
             </div>
         </div>

src/components/Gameboard/Gameboard.scss

@@ -1,31 +1,37 @@
 .gameboard {
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: column nowrap;
     align-items: flex-start;
     justify-content: center;
 
     background-color: rgb(57, 57, 65);
-    width: 100%;
+    width: 90vw;
+    padding: 0 18px 12px;
 
-    section {
+    #round-marker {
+        padding-left: 8px;
+    }
+
+    .gameboard-columns {
         display: flex;
-        flex-flow: column nowrap;
+        flex-flow: row nowrap;
-        align-items: center;
         justify-content: center;
-        margin: 1rem;
-        padding: 1rem;
-    }
-
-    .gameboard-left {
         align-items: flex-start;
-    }
+        width: 100%;
+        
+        section {
+            display: flex;
+            flex-flow: column nowrap;
+        }
 
-    .gameboard-right {
+        .gameboard-left {
-        max-width: 30vw;
+            align-items: flex-start;
-        align-items: flex-end;
+            width: 50%;
-    }
+        }
 
-    .round-marker {
+        .gameboard-right {
-        font-size: 1.5rem;
+            justify-content: flex-end;
+            width: 50%;
+        }
     }
 }

src/components/Gameboard/Gameboard.tsx

@@ -87,18 +87,18 @@ export default function Gameboard({ state, setState }: StateProps) {
         } else {
             setView(
                 <div className="gameboard">
-                    <section className="gameboard-left">
+                    <h2 id="round-marker">Round: {state.round}</h2>
-                        <h2>Round: {state.round}</h2>
+                    <div className="gameboard-columns">
-                        <Nobles state={state} setState={setState} />
+                        <section className="gameboard-left">
-                        <CardRow tier={3} state={state} setState={setState} />
+                            <Nobles state={state} setState={setState} />
-                        <CardRow tier={2} state={state} setState={setState} />
+                            <CardRow tier={3} state={state} setState={setState} />
-                        <CardRow tier={1} state={state} setState={setState} />
+                            <CardRow tier={2} state={state} setState={setState} />
-                    </section>
+                            <CardRow tier={1} state={state} setState={setState} />
-                    <section className="gameboard-right">
+                        </section>
-                        <SelectionView state={state} setState={setState} />
+                        <section className="gameboard-right">
-                        <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
+                            <AllPlayers state={state} setState={setState} liftSelection={liftSelection} />
-                        <AllPlayers state={state} setState={setState} />
+                        </section>
-                    </section>
+                    </div>
                 </div>
             )
         }

src/components/Player/AllPlayers.scss

@@ -4,21 +4,26 @@
 
 .all-players {
     display: flex;
+    flex-flow: column nowrap;
     justify-content: space-around;
-    max-width: 80vw;
+    align-items: center;
-    padding: 0 2rem;
     background-color: rgb(237, 213, 156);
     color: black;
 
     .player-ui {
-        width: 30vw;
-        p {
-            margin: 1rem;
-        }
         .subheader {
             font-weight: bold;
         }
 
+        background-color:rgb(172, 149, 94);
+        margin: 1rem 0;
+        padding: 0 2rem;
+
+        .turn-and-action-based {
+            display: flex;
+            flex-flow: row nowrap;
+        }
+
         .resources {
             .player-chips-enum {
                 display: flex;

src/components/Player/AllPlayers.tsx

@@ -1,15 +1,29 @@
 import { v4 } from "uuid";
 import Player from "./Player";
 import { PlayerData } from "../../util/types";
-import { StateProps } from "../../util/propTypes";
+import { ResourceProps } from "../../util/propTypes";
 import "./AllPlayers.scss"
+import AvailableChips from "../Resources/AvailableChips";
+import SelectionView from "../Resources/SelectionView";
+import { useEffect, useState } from "react";
+import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
+
+export default function AllPlayers({ state, setState, liftSelection }: ResourceProps) {
+    const [playerView, setPlayerView] = useState<JSX.Element>();
 
-export default function AllPlayers({ state, setState }: StateProps) {
     const playerPool = state.players?.map((player: PlayerData) => <Player key={v4()} player={player} state={state} setState={setState} />);
 
+    useEffect(() => {
+        const currentPlayer = useCurrentPlayer(state);
+        if (!currentPlayer) return;
+        setPlayerView(<Player key={v4()} player={currentPlayer} state={state} setState={setState} />);
+    }, [state]);
+
     return (
         <div className="all-players">
-            { playerPool }
+            <SelectionView state={state} setState={setState} />
+            <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
+            { playerView }
         </div>
     )
 }

src/components/Player/Player.tsx

@@ -52,14 +52,11 @@ export default function Player({ player, state, setState }: PlayerProps) {
     }
 
     return (
-        <div className={dynamic && dynamic.turnActive ? 'player-ui' : 'hidden'} key={v4()}>
+        <div className="player-ui" key={v4()}>
             <p className="subheader">Name: {player.name} {player.starter && "(round starter)"}</p>
+            <p>Score: {dynamic && dynamic.points}</p>
 
-            {/* Dynamic data from state */}
             <section className="turn-and-action-based">
-                <p>Score: {dynamic && dynamic.points}</p>
-
-                {/* Player actions */}
                 <button
                     disabled={(dynamic && hasMaxChips(dynamic)) || (!dynamic?.turnActive)}
                     onClick={() => handleClick(0)}>

src/util/propTypes.ts

@@ -8,16 +8,13 @@ export interface StateProps {
 export interface CardProps extends StateProps {
     data: CardData
     reserved?: boolean
+    collapsed?: boolean
 }
 
 export interface CardRowProps extends StateProps {
     tier: number
 }
 
-export interface AllPlayersProps extends StateProps {
-    setActionState: (value: SetActionType, player?: PlayerData) => void
-}
-
 export interface PlayerProps extends StateProps {
     player: PlayerData
 }