tomecraft/tome-web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Show current power and add win/lose message

Browse Source
This commit is contained in:
snen 2021-09-30 22:33:20 -04:00
parent e2d00188f6
commit bbd7f606dc
3 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/game/BoardSlot.tsx
View File

@ -19,7 +19,7 @@ export default function BoardSlot(props: CardTokenProps): JSX.Element {
return ( return (
<button <button
type="button" type="button"
className={`board-slot${isSelected ? ' selected' : ''}`} className={`board-card${isSelected ? ' selected' : ''}`}
onClick={onSelect} onClick={onSelect}
disabled={disabled} disabled={disabled}
> >
@ -28,11 +28,14 @@ export default function BoardSlot(props: CardTokenProps): JSX.Element {
) )
} }
return ( return (
<CardToken <div className="board-slot">
onSelect={onSelect} <CardToken
cardKey={card.type} cardKey={card.type}
isSelected={isSelected} onSelect={onSelect}
disabled={disabled} isSelected={isSelected}
/> disabled={disabled}
/>
<span>{card.power}</span>
</div>
) )
} }

26
client/game/Game.tsx
View File

@ -14,6 +14,9 @@ import {
type GameProps = GameHandle type GameProps = GameHandle
const GAME_STATUS_SENTINAL_WIN = 4
const GAME_STATUS_SCOURGE_WIN = 5
export default function Game(props: GameProps): JSX.Element { export default function Game(props: GameProps): JSX.Element {
const { const {
team, team,
@ -64,6 +67,13 @@ export default function Game(props: GameProps): JSX.Element {
const allyBoard = team === 1 ? board.sentinal : board.scourge const allyBoard = team === 1 ? board.sentinal : board.scourge
const isMyTurn = currentTurn === team const isMyTurn = currentTurn === team
const maybeIsGameWinner =
gameStatus === GAME_STATUS_SCOURGE_WIN || gameStatus === GAME_STATUS_SENTINAL_WIN ? (
team === 1
? gameStatus === GAME_STATUS_SENTINAL_WIN
: gameStatus === GAME_STATUS_SCOURGE_WIN
) : null
return ( return (
<div className="game-container"> <div className="game-container">
<div className="game-sidebar"> <div className="game-sidebar">
@ -72,11 +82,17 @@ export default function Game(props: GameProps): JSX.Element {
<p>Life: {enemyLife}</p> <p>Life: {enemyLife}</p>
<p>Deck: {enemyDeckSize}</p> <p>Deck: {enemyDeckSize}</p>
</div> </div>
<div> {maybeIsGameWinner === null ? (
<p>{isMyTurn ? 'My' : 'Enemy'} Turn</p> <div>
{isMyTurn && canDraw && <button type="button" onClick={startDraw}>Start Draw</button>} <p>{isMyTurn ? 'My' : 'Enemy'} Turn</p>
{isMyTurn && hasDrawn && <button type="button" onClick={endTurn}>End Turn</button>} {isMyTurn && canDraw && <button type="button" onClick={startDraw}>Start Draw</button>}
</div> {isMyTurn && hasDrawn && <button type="button" onClick={endTurn}>End Turn</button>}
</div>
) : (
<div>
{maybeIsGameWinner ? "You Lose!" : "You Win!"}
</div>
)}
<div className="player-info"> <div className="player-info">
<p>Life: {player.life}</p> <p>Life: {player.life}</p>
<p>Deck: {deckSize}</p> <p>Deck: {deckSize}</p>

6
client/styles.css
View File

@ -196,6 +196,12 @@ h2 {
} }
.board-slot { .board-slot {
display: flex;
flex-direction: column;
align-items: center;
}
.board-card {
width: 5em; width: 5em;
height: 7em; height: 7em;
margin: 0 1em; margin: 0 1em;