summaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/components/game/Board.css34
-rw-r--r--frontend/src/components/game/Board.jsx68
-rw-r--r--frontend/src/components/game/CardImage.css4
-rw-r--r--frontend/src/components/game/CardImage.jsx19
-rw-r--r--frontend/src/components/game/GameScene.jsx7
-rw-r--r--frontend/src/components/game/Hand.css10
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 {
bgstack15