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

26
client/game/Game.tsx
View File

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

6
client/styles.css
View File

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