Add support for multiple columns

5 files changed, 14 insertions, 12 deletions

diff --git a/frontend/src/api/model.js b/frontend/src/api/model.js
index 011b59ec..2d1d2dde 100644
--- a/frontend/src/api/model.js
+++ b/frontend/src/api/model.js
@@ -56,7 +56,7 @@ export type ApiBoard = {
   publicProduction: ApiProduction,
   science: ApiScience,
   military: ApiMilitary,
-  playedCards: ApiTableCard[],
+  playedCards: ApiTableCard[][],
   gold: number,
 };
 
diff --git a/frontend/src/components/game/Board.css b/frontend/src/components/game/Board.css
index 0c0d49c9..0600bd14 100644
--- a/frontend/src/components/game/Board.css
+++ b/frontend/src/components/game/Board.css
@@ -3,6 +3,8 @@
 }
 
 .cards {
+    display: flex;
+    height: 40vh;
     width: 100vw;
 }
 
@@ -29,6 +31,8 @@
 }
 
 .wonder-img {
+    border-radius: 0.5%/1.5%;
+    box-shadow: 0.2rem 0.2rem 0.5rem black;
     max-height: 30vh;
     max-width: 95vw;
 }
diff --git a/frontend/src/components/game/Board.jsx b/frontend/src/components/game/Board.jsx
index 9c5db971..b29b847f 100644
--- a/frontend/src/components/game/Board.jsx
+++ b/frontend/src/components/game/Board.jsx
@@ -5,7 +5,7 @@ import { CardImage } from './CardImage';
 
 // card offsets in % of their size when displayed in columns
 const xOffset = 20;
-const yOffset = 23;
+const yOffset = 21;
 
 type BoardProps = {
   board: ApiBoard,
@@ -13,19 +13,18 @@ type BoardProps = {
 
 export const Board = ({board}: BoardProps) => {
   return <div className='board'>
-    <TableCards cards={board.playedCards}/>
+    <TableCards cardColumns={board.playedCards}/>
     <Wonder wonder={board.wonder}/>
   </div>;
 };
 
 type TableCardsProps = {
-  cards: ApiTableCard[],
+  cardColumns: ApiTableCard[][],
 }
 
-const TableCards = ({cards}: TableCardsProps) => {
-  // TODO split cards into multiple columns
+const TableCards = ({cardColumns}: TableCardsProps) => {
   return <div className="cards">
-    <TableCardColumn cards={cards}/>
+    {cardColumns.map(column => <TableCardColumn key={column[0].color} cards={column}/>)}
   </div>
 };
 
diff --git a/frontend/src/components/game/Hand.css b/frontend/src/components/game/Hand.css
index d26ddfb5..8e7d93c5 100644
--- a/frontend/src/components/game/Hand.css
+++ b/frontend/src/components/game/Hand.css
@@ -7,7 +7,8 @@
     max-height: 25vw;
     position: absolute;
     transform: translate(-50%, 55%);
-    transition: 0.5s
+    transition: 0.5s;
+    z-index: 30;
 }
 .hand:hover {
     bottom: 4rem;
@@ -21,18 +22,15 @@
 }
 
 .hand-card .hand-card-img {
-    border-radius: 0.5rem;
-    box-shadow: 2px 2px 5px black;
     grid-row: 1;
     grid-column: 1;
     max-width: 13vw;
     max-height: 60vh;
-    opacity: 1;
     transition: 0.1s;
     width: 11rem;
 }
 .hand-card.unplayable .hand-card-img {
-    opacity: 0.7;
+    filter: grayscale(50%) contrast(50%);
 }
 .hand-card:hover .hand-card-img {
     box-shadow: 0 10px 40px black;
diff --git a/frontend/src/components/game/ProductionBar.css b/frontend/src/components/game/ProductionBar.css
index 15893b59..77a3b8fc 100644
--- a/frontend/src/components/game/ProductionBar.css
+++ b/frontend/src/components/game/ProductionBar.css
@@ -9,6 +9,7 @@
     height: 3.5rem;
     position: fixed;
     width: 100vw;
+    z-index: 99;
 }
 
 .fixed-resources {