diff options
Diffstat (limited to 'sw-ui/src/components/game')
-rw-r--r-- | sw-ui/src/components/game/Board.css | 38 | ||||
-rw-r--r-- | sw-ui/src/components/game/Board.tsx | 67 | ||||
-rw-r--r-- | sw-ui/src/components/game/CardImage.css | 4 | ||||
-rw-r--r-- | sw-ui/src/components/game/CardImage.tsx | 26 | ||||
-rw-r--r-- | sw-ui/src/components/game/GameScene.css | 13 | ||||
-rw-r--r-- | sw-ui/src/components/game/GameScene.tsx | 77 | ||||
-rw-r--r-- | sw-ui/src/components/game/Hand.css | 50 | ||||
-rw-r--r-- | sw-ui/src/components/game/Hand.tsx | 44 | ||||
-rw-r--r-- | sw-ui/src/components/game/ProductionBar.css | 50 | ||||
-rw-r--r-- | sw-ui/src/components/game/ProductionBar.tsx | 87 | ||||
-rw-r--r-- | sw-ui/src/components/game/background-papyrus.jpg | bin | 100272 -> 0 bytes |
11 files changed, 0 insertions, 456 deletions
diff --git a/sw-ui/src/components/game/Board.css b/sw-ui/src/components/game/Board.css deleted file mode 100644 index 0600bd14..00000000 --- a/sw-ui/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/sw-ui/src/components/game/Board.tsx b/sw-ui/src/components/game/Board.tsx deleted file mode 100644 index 98298a1f..00000000 --- a/sw-ui/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/sw-ui/src/components/game/CardImage.css b/sw-ui/src/components/game/CardImage.css deleted file mode 100644 index 795c1503..00000000 --- a/sw-ui/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/sw-ui/src/components/game/CardImage.tsx b/sw-ui/src/components/game/CardImage.tsx deleted file mode 100644 index a37595ad..00000000 --- a/sw-ui/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/sw-ui/src/components/game/GameScene.css b/sw-ui/src/components/game/GameScene.css deleted file mode 100644 index 3417459b..00000000 --- a/sw-ui/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/sw-ui/src/components/game/GameScene.tsx b/sw-ui/src/components/game/GameScene.tsx deleted file mode 100644 index 465d0840..00000000 --- a/sw-ui/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/sw-ui/src/components/game/Hand.css b/sw-ui/src/components/game/Hand.css deleted file mode 100644 index 8e7d93c5..00000000 --- a/sw-ui/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/sw-ui/src/components/game/Hand.tsx b/sw-ui/src/components/game/Hand.tsx deleted file mode 100644 index 744c45cc..00000000 --- a/sw-ui/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/sw-ui/src/components/game/ProductionBar.css b/sw-ui/src/components/game/ProductionBar.css deleted file mode 100644 index 77a3b8fc..00000000 --- a/sw-ui/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/sw-ui/src/components/game/ProductionBar.tsx b/sw-ui/src/components/game/ProductionBar.tsx deleted file mode 100644 index 3e5c6d34..00000000 --- a/sw-ui/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/sw-ui/src/components/game/background-papyrus.jpg b/sw-ui/src/components/game/background-papyrus.jpg Binary files differdeleted file mode 100644 index 57bdffcf..00000000 --- a/sw-ui/src/components/game/background-papyrus.jpg +++ /dev/null |