summaryrefslogtreecommitdiff
path: root/frontend/src/components/game
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/game')
-rw-r--r--frontend/src/components/game/Board.css38
-rw-r--r--frontend/src/components/game/Board.tsx67
-rw-r--r--frontend/src/components/game/CardImage.css4
-rw-r--r--frontend/src/components/game/CardImage.tsx26
-rw-r--r--frontend/src/components/game/GameScene.css13
-rw-r--r--frontend/src/components/game/GameScene.tsx77
-rw-r--r--frontend/src/components/game/Hand.css50
-rw-r--r--frontend/src/components/game/Hand.tsx44
-rw-r--r--frontend/src/components/game/ProductionBar.css50
-rw-r--r--frontend/src/components/game/ProductionBar.tsx87
-rw-r--r--frontend/src/components/game/background-papyrus.jpgbin100272 -> 0 bytes
11 files changed, 0 insertions, 456 deletions
diff --git a/frontend/src/components/game/Board.css b/frontend/src/components/game/Board.css
deleted file mode 100644
index 0600bd14..00000000
--- a/frontend/src/components/game/Board.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.board {
- width: 100vw
-}
-
-.cards {
- display: flex;
- height: 40vh;
- 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 {
- 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.tsx b/frontend/src/components/game/Board.tsx
deleted file mode 100644
index 98298a1f..00000000
--- a/frontend/src/components/game/Board.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import { 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>
-};
diff --git a/frontend/src/components/game/CardImage.css b/frontend/src/components/game/CardImage.css
deleted file mode 100644
index 795c1503..00000000
--- a/frontend/src/components/game/CardImage.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.card-img {
- border-radius: 5%;
- box-shadow: 2px 2px 5px black;
-}
diff --git a/frontend/src/components/game/CardImage.tsx b/frontend/src/components/game/CardImage.tsx
deleted file mode 100644
index a37595ad..00000000
--- a/frontend/src/components/game/CardImage.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { ApiCard } from '../../api/model';
-import './CardImage.css'
-
-type CardImageProps = {
- card: ApiCard,
- otherClasses: string,
- highlightColor?: string
-}
-
-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}`}
- 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.css b/frontend/src/components/game/GameScene.css
deleted file mode 100644
index 3417459b..00000000
--- a/frontend/src/components/game/GameScene.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.gameSceneRoot {
- background: url('background-papyrus.jpg') center no-repeat;
- background-size: cover;
-}
-
-.fullscreen {
- position: fixed;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- overflow: hidden;
-}
diff --git a/frontend/src/components/game/GameScene.tsx b/frontend/src/components/game/GameScene.tsx
deleted file mode 100644
index 465d0840..00000000
--- a/frontend/src/components/game/GameScene.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Button, Classes, Intent, NonIdealState } from '@blueprintjs/core';
-import { List } from 'immutable';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { ApiPlayer, ApiPlayerMove, ApiPlayerTurnInfo } from '../../api/model';
-import { GlobalState } from '../../reducers';
-import { actions } from '../../redux/actions/game';
-import { getCurrentTurnInfo } from '../../redux/currentGame';
-import { getCurrentGame } from '../../redux/games';
-import { Board } from './Board';
-import './GameScene.css'
-import { Hand } from './Hand';
-import { ProductionBar } from './ProductionBar';
-
-type GameSceneStateProps = {
- players: List<ApiPlayer>,
- turnInfo: ApiPlayerTurnInfo | null,
-}
-
-type GameSceneDispatchProps = {
- sayReady: () => void,
- prepareMove: (move: ApiPlayerMove) => void,
-}
-
-type GameSceneProps = GameSceneStateProps & GameSceneDispatchProps
-
-class GameScenePresenter extends Component<GameSceneProps> {
-
- render() {
- return (
- <div className='gameSceneRoot fullscreen'>
- {!this.props.turnInfo && <GamePreStart onReadyClicked={this.props.sayReady}/>}
- {this.props.turnInfo && this.turnInfoScene(this.props.turnInfo)}
- </div>
- );
- }
-
- turnInfoScene(turnInfo: ApiPlayerTurnInfo) {
- 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}/>
- <ProductionBar gold={board.gold} production={board.production}/>
- </div>
- }
-}
-
-type GamePreStartProps = {
- onReadyClicked: () => void
-}
-const GamePreStart = ({onReadyClicked}: GamePreStartProps) => <NonIdealState
- description={<p>Click "ready" when you are</p>}
- action={<Button text="READY" className={Classes.LARGE} intent={Intent.PRIMARY} icon='play'
- onClick={() => onReadyClicked()}/>}
-/>;
-
-function mapStateToProps(state: GlobalState): GameSceneStateProps {
- const game = getCurrentGame(state);
- console.info(game);
-
- return {
- players: game ? List(game.players) : List(),
- turnInfo: getCurrentTurnInfo(state),
- };
-}
-
-function mapDispatchToProps(): GameSceneDispatchProps {
- return {
- sayReady: actions.sayReady,
- prepareMove: actions.prepareMove,
- }
-}
-
-export const GameScene = connect(mapStateToProps, mapDispatchToProps)(GameScenePresenter);
diff --git a/frontend/src/components/game/Hand.css b/frontend/src/components/game/Hand.css
deleted file mode 100644
index 8e7d93c5..00000000
--- a/frontend/src/components/game/Hand.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.hand {
- align-items: center;
- bottom: 0;
- display: flex;
- height: 345px; /* can hold enhanced cards */
- left: 50%;
- max-height: 25vw;
- position: absolute;
- transform: translate(-50%, 55%);
- transition: 0.5s;
- z-index: 30;
-}
-.hand:hover {
- bottom: 4rem;
- transform: translate(-50%, 0%);
-}
-
-.hand-card {
- align-items: flex-end;
- display: grid;
- margin: 0.2rem;
-}
-
-.hand-card .hand-card-img {
- grid-row: 1;
- grid-column: 1;
- max-width: 13vw;
- max-height: 60vh;
- transition: 0.1s;
- width: 11rem;
-}
-.hand-card.unplayable .hand-card-img {
- filter: grayscale(50%) contrast(50%);
-}
-.hand-card:hover .hand-card-img {
- box-shadow: 0 10px 40px black;
- width: 14rem;
- max-width: 15vw;
- max-height: 90vh;
-}
-
-.hand-card .action-buttons {
- align-items: flex-end;
- display: none;
- grid-row: 1;
- grid-column: 1;
-}
-.hand-card:hover .action-buttons {
- display: flex;
-}
diff --git a/frontend/src/components/game/Hand.tsx b/frontend/src/components/game/Hand.tsx
deleted file mode 100644
index 744c45cc..00000000
--- a/frontend/src/components/game/Hand.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Button, ButtonGroup, Classes, Intent } from '@blueprintjs/core';
-import React from 'react';
-import { ApiHandCard, ApiPlayerMove } from '../../api/model';
-import './Hand.css'
-import { CardImage } from './CardImage';
-
-type HandProps = {
- cards: ApiHandCard[],
- wonderUpgradable: boolean,
- prepareMove: (move: ApiPlayerMove) => void
-}
-
-export const Hand = ({cards, wonderUpgradable, prepareMove}: HandProps) => {
- return <div className='hand'>{cards.map((c, i) => <HandCard key={i} card={c}
- wonderUpgradable={wonderUpgradable}
- prepareMove={prepareMove}/>)}</div>;
-};
-
-type HandCardProps = {
- card: ApiHandCard,
- wonderUpgradable: boolean,
- prepareMove: (move: ApiPlayerMove) => void
-}
-
-const HandCard = ({card, wonderUpgradable, prepareMove}: HandCardProps) => {
- let playableClass = card.playability.playable ? '' : 'unplayable';
- return <div className={`hand-card ${playableClass}`}>
- <CardImage card={card} otherClasses="hand-card-img"/>
- <ActionButtons card={card} wonderUpgradable={wonderUpgradable} prepareMove={prepareMove} />
- </div>
-};
-
-type ActionButtonsProps = HandCardProps
-
-const ActionButtons = ({card, wonderUpgradable, prepareMove}: ActionButtonsProps) => <ButtonGroup className="action-buttons">
- <Button title="PLAY" className={Classes.LARGE} intent={Intent.SUCCESS} icon='play'
- disabled={!card.playability.playable}
- onClick={() => prepareMove({type: 'PLAY', cardName: card.name, boughtResources: []})}/>
- <Button title="BUILD WONDER" className={Classes.LARGE} intent={Intent.PRIMARY} icon='key-shift'
- disabled={!wonderUpgradable}
- onClick={() => prepareMove({type: 'UPGRADE_WONDER', cardName: card.name, boughtResources: []})}/>
- <Button title="DISCARD" className={Classes.LARGE} intent={Intent.DANGER} icon='cross'
- onClick={() => prepareMove({type: 'DISCARD', cardName: card.name, boughtResources: []})}/>
-</ButtonGroup>;
diff --git a/frontend/src/components/game/ProductionBar.css b/frontend/src/components/game/ProductionBar.css
deleted file mode 100644
index 77a3b8fc..00000000
--- a/frontend/src/components/game/ProductionBar.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.production-bar {
- align-items: center;
- background: lightgray;
- bottom: 0;
- border-top: 1px #8b8b8b solid;
- background: linear-gradient(#eaeaea, #888 7%);
- box-shadow: 0 0 15px 0 #747474;
- display: flex;
- height: 3.5rem;
- position: fixed;
- width: 100vw;
- z-index: 99;
-}
-
-.fixed-resources {
- margin: auto;
- display: flex;
-}
-.alternative-resources {
- margin: auto;
- display: flex;
-}
-
-.resource-with-count {
- margin-left: 1rem
-}
-.resource-choice {
- margin-left: 1.5rem;
-}
-
-.choice-separator {
- font-size: 2rem;
- vertical-align: middle;
- margin: 5px;
- color: #c29929;
- text-shadow: 0 0 1px black;
-}
-
-.token-img {
- height: 3rem;
- vertical-align: middle;
- width: 3rem;
-}
-
-.token-count {
- font-family: fantasy;
- font-size: 1.5rem;
- margin-left: 0.2rem;
- vertical-align: middle;
-}
diff --git a/frontend/src/components/game/ProductionBar.tsx b/frontend/src/components/game/ProductionBar.tsx
deleted file mode 100644
index 3e5c6d34..00000000
--- a/frontend/src/components/game/ProductionBar.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from 'react';
-import { ApiCountedResource, ApiProduction, ApiResourceType } from '../../api/model';
-import './ProductionBar.css'
-
-type ProductionBarProps = {
- gold: number,
- production: ApiProduction,
-}
-
-export const ProductionBar = ({gold, production}: ProductionBarProps) => {
- return <div className='production-bar'>
- <GoldIndicator amount={gold}/>
- <FixedResources resources={production.fixedResources}/>
- <AlternativeResources resources={production.alternativeResources}/>
- </div>;
-};
-
-type GoldIndicatorProps = {
- amount: number,
-}
-const GoldIndicator = ({amount}: GoldIndicatorProps) => {
- return <TokenWithCount tokenName="coin" count={amount} otherClasses="gold-indicator"/>
-};
-
-type FixedResourcesProps = {
- resources: ApiCountedResource[],
-}
-const FixedResources = ({resources}: FixedResourcesProps) => {
- return <div className="fixed-resources">
- {resources.map(r => <TokenWithCount key={r.type}
- tokenName={getTokenName(r.type)}
- count={r.count}
- otherClasses="resource-with-count"/>)}
- </div>
-};
-
-type AlternativeResourcesProps = {
- resources: ApiResourceType[][],
-}
-const AlternativeResources = ({resources}: AlternativeResourcesProps) => {
- return <div className="alternative-resources">
- {resources.map((types, i) => <ResourceChoice key={i} types={types}/>)}
- </div>
-};
-
-type ResourceChoiceProps = {
- types: ApiResourceType[],
-}
-const ResourceChoice = ({types}: ResourceChoiceProps) => {
- let typeImages = types.map(type => <TokenImage key={type} tokenName={getTokenName(type)}/>);
- let separator = <span className="choice-separator">∕</span>;
- return <div className="resource-choice">
- {intersperce(typeImages, separator)}
- </div>
-};
-
-function intersperce<T>(array: T[], separator: T): T[] {
- let result = array.reduce((acc: T[], elt: T) => acc.concat(elt, separator), []);
- return result.slice(0, -1); // remove extra separator at the end
-}
-
-type TokenWithCountProps = {
- tokenName: string,
- count: number,
- otherClasses?: string,
-}
-const TokenWithCount = ({tokenName, count, otherClasses = ""}: TokenWithCountProps) => {
- return <div className={`token-with-count ${otherClasses}`}>
- <TokenImage tokenName={tokenName}/>
- <span className="token-count">× {count}</span>
- </div>
-};
-
-type TokenImageProps = {
- tokenName: string,
-}
-const TokenImage = ({tokenName}: TokenImageProps) => {
- return <img src={getTokenImagePath(tokenName)} title={tokenName} alt={tokenName} className="token-img"/>
-};
-
-function getTokenImagePath(tokenName: string): string {
- return `/images/tokens/${tokenName}.png`;
-}
-
-function getTokenName(resourceType: ApiResourceType): string {
- return `resources/${resourceType.toLowerCase()}`;
-}
diff --git a/frontend/src/components/game/background-papyrus.jpg b/frontend/src/components/game/background-papyrus.jpg
deleted file mode 100644
index 57bdffcf..00000000
--- a/frontend/src/components/game/background-papyrus.jpg
+++ /dev/null
Binary files differ
bgstack15