blob: b29b847fbe6c30a0b590653d56e866a00b3191f0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
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 = 21;
type BoardProps = {
board: ApiBoard,
}
export const Board = ({board}: BoardProps) => {
return <div className='board'>
<TableCards cardColumns={board.playedCards}/>
<Wonder wonder={board.wonder}/>
</div>;
};
type TableCardsProps = {
cardColumns: ApiTableCard[][],
}
const TableCards = ({cardColumns}: TableCardsProps) => {
return <div className="cards">
{cardColumns.map(column => <TableCardColumn key={column[0].color} cards={column}/>)}
</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>
};
|
