Add board and played cards

6 files changed, 131 insertions, 11 deletions

diff --git a/frontend/src/components/game/Board.css b/frontend/src/components/game/Board.css
new file mode 100644
index 00000000..0c0d49c9
--- /dev/null
+++ b/frontend/src/components/game/Board.css
@@ -0,0 +1,34 @@
+.board {
+    width: 100vw
+}
+
+.cards {
+    width: 100vw;
+}
+
+.card-column {
+    height: 40vh;
+    margin: auto;
+    position: relative;
+    width: 15vw;
+}
+
+.card {
+    position: absolute;
+    /* dynamic positioning in JS */
+}
+
+.table-card-img {
+    max-width: 10vw;
+    max-height: 25vh;
+}
+
+.wonder {
+    width: 100vw;
+    text-align: center;
+}
+
+.wonder-img {
+    max-height: 30vh;
+    max-width: 95vw;
+}
diff --git a/frontend/src/components/game/Board.jsx b/frontend/src/components/game/Board.jsx
new file mode 100644
index 00000000..9c5db971
--- /dev/null
+++ b/frontend/src/components/game/Board.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import type { ApiBoard, ApiTableCard, ApiWonder } from '../../api/model';
+import './Board.css'
+import { CardImage } from './CardImage';
+
+// card offsets in % of their size when displayed in columns
+const xOffset = 20;
+const yOffset = 23;
+
+type BoardProps = {
+  board: ApiBoard,
+}
+
+export const Board = ({board}: BoardProps) => {
+  return <div className='board'>
+    <TableCards cards={board.playedCards}/>
+    <Wonder wonder={board.wonder}/>
+  </div>;
+};
+
+type TableCardsProps = {
+  cards: ApiTableCard[],
+}
+
+const TableCards = ({cards}: TableCardsProps) => {
+  // TODO split cards into multiple columns
+  return <div className="cards">
+    <TableCardColumn cards={cards}/>
+  </div>
+};
+
+type TableCardColumnProps = {
+  cards: ApiTableCard[]
+}
+
+const TableCardColumn = ({cards}: TableCardColumnProps) => {
+  return <div className="card-column">
+    {cards.map((c, i) => <TableCard key={c.name} card={c} indexInColumn={i}/>)}
+  </div>
+};
+
+type TableCardProps = {
+  card: ApiTableCard,
+  indexInColumn: number,
+}
+
+const TableCard = ({card, indexInColumn}: TableCardProps) => {
+  let style = {
+    transform: `translate(${indexInColumn * xOffset}%, ${indexInColumn * yOffset}%)`,
+    zIndex: indexInColumn,
+  };
+  return <div className="card" style={style}>
+    <CardImage card={card} otherClasses="table-card-img"/>
+  </div>
+};
+
+type WonderProps = {
+  wonder: ApiWonder,
+}
+
+const Wonder = ({wonder}: WonderProps) => {
+  return <div className="wonder">
+    <img src={`/images/wonders/${wonder.image}`}
+         title={wonder.name}
+         alt={`Wonder ${wonder.name}`}
+         className="wonder-img"/>
+  </div>
+};
diff --git a/frontend/src/components/game/CardImage.css b/frontend/src/components/game/CardImage.css
new file mode 100644
index 00000000..795c1503
--- /dev/null
+++ b/frontend/src/components/game/CardImage.css
@@ -0,0 +1,4 @@
+.card-img {
+    border-radius: 5%;
+    box-shadow: 2px 2px 5px black;
+}
diff --git a/frontend/src/components/game/CardImage.jsx b/frontend/src/components/game/CardImage.jsx
index 110d9883..3c8a9f07 100644
--- a/frontend/src/components/game/CardImage.jsx
+++ b/frontend/src/components/game/CardImage.jsx
@@ -1,15 +1,26 @@
 import React from 'react';
 import type { ApiCard } from '../../api/model';
-import './Hand.css'
+import './CardImage.css'
 
 type CardImageProps = {
   card: ApiCard,
-  otherClasses: string
+  otherClasses: string,
+  highlightColor?: string
 }
 
-export const CardImage = ({card, otherClasses}: CardImageProps) => {
+export const CardImage = ({card, otherClasses, highlightColor}: CardImageProps) => {
+  const style = highlightStyle(highlightColor);
   return <img src={`/images/cards/${card.image}`}
               title={card.name}
               alt={'Card ' + card.name}
-              className={`card-img ${otherClasses}`}/>
+              className={`card-img ${otherClasses}`}
+              style={style}/>
 };
+
+function highlightStyle(highlightColor?: string) {
+  if (highlightColor) {
+    return { boxShadow: `0 0 1rem 0.1rem ${highlightColor}` };
+  } else {
+    return {};
+  }
+}
diff --git a/frontend/src/components/game/GameScene.jsx b/frontend/src/components/game/GameScene.jsx
index 23be5ef1..5221ab8e 100644
--- a/frontend/src/components/game/GameScene.jsx
+++ b/frontend/src/components/game/GameScene.jsx
@@ -9,6 +9,7 @@ import { actions } from '../../redux/actions/game';
 import { getCurrentTurnInfo } from '../../redux/currentGame';
 import { getCurrentGame } from '../../redux/games';
 import { getCurrentPlayer, getPlayers } from '../../redux/players';
+import { Board } from './Board';
 import { Hand } from './Hand';
 import './GameScene.css'
 import { ProductionBar } from './ProductionBar';
@@ -29,11 +30,6 @@ class GameScenePresenter extends Component<GameSceneProps> {
       <div className='gameSceneRoot fullscreen'>
         {!this.props.turnInfo && <GamePreStart onReadyClicked={this.props.sayReady}/>}
         {this.props.turnInfo && this.turnInfoScene()}
-
-        <h4 style={{marginTop: '2rem'}}>Debug</h4>
-        <div>
-          <pre>{JSON.stringify(this.props.turnInfo, null, 2) }</pre>
-        </div>
       </div>
     );
   }
@@ -43,6 +39,7 @@ class GameScenePresenter extends Component<GameSceneProps> {
     let board = turnInfo.table.boards[turnInfo.playerIndex];
     return <div>
       <p>{turnInfo.message}</p>
+      <Board board={board}/>
       <Hand cards={turnInfo.hand}
             wonderUpgradable={turnInfo.wonderBuildability.buildable}
             prepareMove={this.props.prepareMove}/>
diff --git a/frontend/src/components/game/Hand.css b/frontend/src/components/game/Hand.css
index c1aed09f..d26ddfb5 100644
--- a/frontend/src/components/game/Hand.css
+++ b/frontend/src/components/game/Hand.css
@@ -1,15 +1,17 @@
 .hand {
     align-items: center;
-    bottom: -11rem;
+    bottom: 0;
     display: flex;
     height: 345px; /* can hold enhanced cards */
     left: 50%;
+    max-height: 25vw;
     position: absolute;
-    transform: translateX(-50%);
+    transform: translate(-50%, 55%);
     transition: 0.5s
 }
 .hand:hover {
     bottom: 4rem;
+    transform: translate(-50%, 0%);
 }
 
 .hand-card {
@@ -23,6 +25,8 @@
     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;
@@ -33,6 +37,8 @@
 .hand-card:hover .hand-card-img {
     box-shadow: 0 10px 40px black;
     width: 14rem;
+    max-width: 15vw;
+    max-height: 90vh;
 }
 
 .hand-card .action-buttons {