Design pass: the client becomes Eric's table
The design system is the physical set itself, taken from the scans: card-stock cream, warm ink, and the six wizard marker colors, laid on a dark leather tabletop. Cards in your hand are now the actual cards — vertical corner rails (ATTACK / L.O.S. / ADJACENT), condensed gothic titles, brown body text on cream, number cards as big bordered numerals with per-value border styles; selecting lifts a card from the fan. The board matches the physical tiles: ink-outlined white brick walls on cracked flagstone, plank doors, eight-point home stars in each wizard's color, swirled treasure discs, warp arrows. The sidebar is paper: a turn slip, the rulebook's own hand-scrawled life-points score sheet (Caveat over ruled lines), and a typewritten chronicle that scrolls itself. The lobby is the box lid. Type: Oswald condensed display / Archivo Narrow body / Courier Prime log. Buttons are ink stamps. Board height-caps so board, actions, and the full hand share one screen; responsive stack below 900px; reduced motion respected. Verified with live screenshots at 1440x900. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
co-authored by
Claude Fable 5
Claude Fable 5
parent
c9524a37db
commit
9501a85be4
+448
-219
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { net } from "./net.svelte";
|
||||
import Board from "./Board.svelte";
|
||||
import Card from "./Card.svelte";
|
||||
import { allCardDefs, cardDef, isNumberCard, SIDES, stepTarget, cellKey } from "@wizwar/engine";
|
||||
import type { CardInstance, Side } from "@wizwar/engine";
|
||||
|
||||
@@ -350,6 +351,12 @@
|
||||
function drop() { net.command({ type: "dropTreasure" }); }
|
||||
function pass() { net.command({ type: "pass" }); }
|
||||
|
||||
let chronicleEl = $state<HTMLElement | null>(null);
|
||||
$effect(() => {
|
||||
void net.log.length;
|
||||
if (chronicleEl) chronicleEl.scrollTop = chronicleEl.scrollHeight;
|
||||
});
|
||||
|
||||
const PLAYER_COLORS = ["#1a9c46", "#d3352b", "#c9308f", "#3a3ac0", "#2ab0c9", "#c9a72a"];
|
||||
function playerColor(id: string): string {
|
||||
const idx = view?.players.findIndex((p) => p.id === id) ?? 0;
|
||||
@@ -357,50 +364,73 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<h1>Wiz-War <span class="subtitle">6th edition</span></h1>
|
||||
<div class="table">
|
||||
<header class="masthead">
|
||||
<span class="mast-title">Wiz-War</span>
|
||||
<span class="mast-sub">sixth edition</span>
|
||||
{#if net.roomId}
|
||||
<span class="mast-room">room <b>{net.roomId}</b></span>
|
||||
{/if}
|
||||
<span class="mast-status" class:offline={net.status !== "connected"}>
|
||||
{net.status === "connected" ? "" : "reconnecting…"}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
{#if net.error}
|
||||
<div class="toast">{net.error}</div>
|
||||
<div class="toast" role="alert">{net.error}</div>
|
||||
{/if}
|
||||
|
||||
{#if !net.roomId}
|
||||
<section class="lobby">
|
||||
<p class="status">server: {net.status}</p>
|
||||
<input placeholder="your wizard's name" bind:value={name} maxlength="20" />
|
||||
<div class="lobby-actions">
|
||||
<button disabled={!name.trim()} onclick={() => net.create(name)}>Create game</button>
|
||||
<span>or</span>
|
||||
<input placeholder="room code" bind:value={joinCode} maxlength="4" class="code" />
|
||||
<button disabled={!name.trim() || !joinCode.trim()} onclick={() => net.join(joinCode, name)}>
|
||||
Join
|
||||
</button>
|
||||
<section class="boxlid">
|
||||
<div class="boxlid-inner">
|
||||
<div class="boxlid-title">Wiz-War</div>
|
||||
<div class="boxlid-tag">A game of magical combat in a stone labyrinth</div>
|
||||
<label class="field">
|
||||
<span>Your wizard's name</span>
|
||||
<input bind:value={name} maxlength="20" placeholder="e.g. Mordecai" />
|
||||
</label>
|
||||
<div class="boxlid-actions">
|
||||
<button class="stamp" disabled={!name.trim()} onclick={() => net.create(name)}>
|
||||
Create a game
|
||||
</button>
|
||||
<span class="or">or join one</span>
|
||||
<input class="code" bind:value={joinCode} maxlength="4" placeholder="CODE" />
|
||||
<button class="stamp" disabled={!name.trim() || !joinCode.trim()} onclick={() => net.join(joinCode, name)}>
|
||||
Join
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{:else if !net.started}
|
||||
<section class="lobby">
|
||||
<h2>Room <code>{net.roomId}</code></h2>
|
||||
<p>Share the code with your opponents.</p>
|
||||
<ul>
|
||||
{#each net.players as p (p)}
|
||||
<li>{p}{p === net.hostId ? " (host)" : ""}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if net.you === net.hostId}
|
||||
<label><input type="checkbox" bind:checked={withExpansion} /> include Expansion Set #1 (monsters & wands)</label>
|
||||
<button
|
||||
disabled={net.players.length !== 2 && net.players.length !== 4}
|
||||
onclick={() => net.start(withExpansion)}
|
||||
>
|
||||
Start game ({net.players.length} wizards — need 2 or 4)
|
||||
</button>
|
||||
{:else}
|
||||
<p>Waiting for {net.hostId} to start…</p>
|
||||
{/if}
|
||||
<section class="boxlid">
|
||||
<div class="boxlid-inner">
|
||||
<div class="boxlid-title small">Room {net.roomId}</div>
|
||||
<div class="boxlid-tag">Share the code. Two or four wizards enter the maze.</div>
|
||||
<ul class="roster">
|
||||
{#each net.players as p (p)}
|
||||
<li><span class="dot" style:background={playerColor(p)}></span>{p}{p === net.hostId ? " — host" : ""}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if net.you === net.hostId}
|
||||
<label class="check">
|
||||
<input type="checkbox" bind:checked={withExpansion} />
|
||||
Include Expansion Set #1 — monsters & wands
|
||||
</label>
|
||||
<button
|
||||
class="stamp big"
|
||||
disabled={net.players.length !== 2 && net.players.length !== 4}
|
||||
onclick={() => net.start(withExpansion)}
|
||||
>
|
||||
Flip the boards ({net.players.length} of 2 or 4)
|
||||
</button>
|
||||
{:else}
|
||||
<p class="waiting">Waiting for {net.hostId} to flip the boards…</p>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
{:else if view}
|
||||
<div class="game">
|
||||
<div class="board-pane">
|
||||
<section class="board-zone">
|
||||
<Board
|
||||
{view}
|
||||
edgeSelectMode={edgeSelectMode && isYourTurn}
|
||||
@@ -410,64 +440,93 @@
|
||||
onPlayerClick={clickPlayer}
|
||||
onCreatureClick={clickCreature}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="side-pane">
|
||||
<aside class="paper-rail">
|
||||
{#if view.phase === "finished"}
|
||||
<div class="banner winner">🏆 {view.winner} wins!</div>
|
||||
<div class="slip winner">🏆 {view.winner} wins!</div>
|
||||
{:else if youMustRespond}
|
||||
<div class="banner respond">
|
||||
<div class="slip urgent">
|
||||
{#if view.stack?.defenderId === view.you}
|
||||
<strong>{view.stack.attackerId}</strong> attacks you
|
||||
{#if view.stack.attackCard}with <strong>{cardDef(view.stack.attackCard.cardId).name}</strong>{:else}with a punch{/if}!
|
||||
Click a counteraction card, or
|
||||
Play a counteraction, or
|
||||
{:else}
|
||||
Respond to the counteraction, or
|
||||
{/if}
|
||||
<button onclick={pass}>let it resolve</button>
|
||||
<button class="stamp tiny" onclick={pass}>let it resolve</button>
|
||||
</div>
|
||||
{:else if view.stack}
|
||||
<div class="banner">Waiting for {view.stack.waitingOn}…</div>
|
||||
<div class="slip">Waiting on {view.stack.waitingOn}…</div>
|
||||
{:else if view.outOfTurnWindow?.playerId === view.you}
|
||||
<div class="slip urgent">Your interruption — cast now, or <button class="stamp tiny" onclick={pass}>waste it</button></div>
|
||||
{:else if isYourTurn}
|
||||
<div class="banner your-turn">
|
||||
<div class="slip yours">
|
||||
Your turn — round {view.turn.round}.
|
||||
Moves: {view.turn.movementAllowance - view.turn.movementUsed}
|
||||
{view.turn.attackUsed ? "· attack used" : ""}
|
||||
{view.turn.movementAllowance - view.turn.movementUsed} moves left{view.turn.attackUsed ? " · attack spent" : ""}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="banner">{view.activePlayerId} is taking their turn…</div>
|
||||
<div class="slip">{view.activePlayerId} is taking their turn…</div>
|
||||
{/if}
|
||||
|
||||
<div class="players">
|
||||
<div class="scoresheet">
|
||||
<div class="scoresheet-head">life-points</div>
|
||||
{#each view.players as p (p.id)}
|
||||
<div class="player" class:dead={!p.alive} class:active={p.id === view.activePlayerId}>
|
||||
<div class="score-row" class:dead={!p.alive} class:active={p.id === view.activePlayerId}>
|
||||
<span class="dot" style:background={playerColor(p.id)}></span>
|
||||
<span class="pname">{p.id}{p.id === view.you ? " (you)" : ""}</span>
|
||||
<span class="life">♥ {p.life}</span>
|
||||
<span class="cards">🂠 {p.handCount}</span>
|
||||
{#if p.lostTurns > 0}<span title="lost turns">💫{p.lostTurns}</span>{/if}
|
||||
{#if p.carriedTreasureId}<span title="carrying treasure">💰</span>{/if}
|
||||
<span class="score-name">{p.id}{p.id === view.you ? " (you)" : ""}</span>
|
||||
<span class="score-life">{p.life}</span>
|
||||
<span class="score-marks">
|
||||
{p.handCount} cards{#if p.lostTurns > 0} · dazed {p.lostTurns}{/if}{#if p.carriedTreasureId} · 💰{/if}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="deck-info">deck {view.deckCount} · discard {view.discardCount}</div>
|
||||
<div class="deck-line">draw pile {view.deckCount} · discards {view.discardCount}</div>
|
||||
</div>
|
||||
|
||||
{#if selectedDef}
|
||||
<div class="cast-hint">
|
||||
<strong>{selectedDef.name}</strong>
|
||||
{#if edgeSelectMode}
|
||||
— click a wall line on the board
|
||||
{:else if selectedDef.cardType === "attack"}
|
||||
— click a target wizard{attachedNumber ? ` (powered by a ${numberTotal})` : " (click a number card to power it)"}
|
||||
<div class="chronicle" aria-label="game log" bind:this={chronicleEl}>
|
||||
{#each net.log.slice(-60) as line, i (i)}
|
||||
<div>{line}</div>
|
||||
{/each}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="table-edge">
|
||||
{#if selectedDef || youMustDiscard || discardSelection.size > 0}
|
||||
<div class="hint-strip">
|
||||
{#if youMustDiscard}
|
||||
<span class="hint-alert">Hand over the limit — mark cards and discard.</span>
|
||||
{/if}
|
||||
{#if discardSelection.size > 0}
|
||||
<button class="stamp tiny" onclick={doDiscard}>Discard {discardSelection.size} marked</button>
|
||||
{/if}
|
||||
{#if selectedDef}
|
||||
<strong class="hint-name">{selectedDef.name}</strong>
|
||||
{#if edgeSelectMode}<span>— click a wall line</span>{/if}
|
||||
{#if selectedDef.cardType === "attack" && !edgeSelectMode && !cellSelectMode}
|
||||
<span>— click a target{attachedNumber ? ` (powered by a ${numberTotal})` : " (tap a number card to power it)"}</span>
|
||||
{/if}
|
||||
{#if selectedCard?.cardId === "waterbolt"}
|
||||
<label>damage <input type="number" min="0" max={numberTotal} bind:value={wbDamage} /></label>
|
||||
(knockback {numberTotal - wbDamage})
|
||||
{#if attachedMods.length > 0}
|
||||
<span class="hint-mods">[+ {attachedMods.map((m) => cardDef(m.cardId).name).join(", ")}]</span>
|
||||
{/if}
|
||||
{#if selectedCard?.cardId === "boobytrap"}
|
||||
<span>— place 4 tokens ({trapCells.length}/4; the first is real)</span>
|
||||
{/if}
|
||||
{#if selectedCard && TWO_CELL_CARDS.has(selectedCard.cardId)}
|
||||
<span>{tradeFrom ? "— now the second square" : "— click the first square"}</span>
|
||||
{/if}
|
||||
{#if selectedCard?.cardId === "rotate-sector"}
|
||||
<label class="inline"><input type="checkbox" bind:checked={rotateCW} /> clockwise</label>
|
||||
<span>— click the sector</span>
|
||||
{/if}
|
||||
{#if selectedCard?.cardId === "relocate-sector"}
|
||||
<span>{pendingSectorFrom ? "— now the destination area" : "— click the sector to move"}</span>
|
||||
{/if}
|
||||
{#if selectedCard && NAMED_CARDS.has(selectedCard.cardId)}
|
||||
<label>card name <input bind:value={nameInput} placeholder="e.g. Fireball or treasure" /></label>
|
||||
<label class="inline">name <input class="text-input" bind:value={nameInput} placeholder="e.g. Fireball" /></label>
|
||||
{#if selectedCard.cardId === "deja-vu"}
|
||||
<button onclick={() => {
|
||||
<button class="stamp tiny" onclick={() => {
|
||||
const id = nameToCardId(nameInput);
|
||||
if (id && selectedCard) {
|
||||
net.command({ type: "cast", instanceId: selectedCard.instanceId, params: { cardId: id } });
|
||||
@@ -475,181 +534,351 @@
|
||||
}
|
||||
}}>Retrieve</button>
|
||||
{:else}
|
||||
— then click the target wizard
|
||||
<span>— then click the target</span>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if attachedMods.length > 0}
|
||||
[+ {attachedMods.map((m) => cardDef(m.cardId).name).join(", ")}]
|
||||
{/if}
|
||||
{#if selectedCard?.cardId === "rotate-sector"}
|
||||
<label><input type="checkbox" bind:checked={rotateCW} /> clockwise</label>
|
||||
— click a square in the sector to rotate
|
||||
{/if}
|
||||
{#if selectedCard?.cardId === "boobytrap"}
|
||||
— place 4 tokens ({trapCells.length}/4; the FIRST is the real trap)
|
||||
{/if}
|
||||
{#if selectedCard && TWO_CELL_CARDS.has(selectedCard.cardId)}
|
||||
{tradeFrom ? "— now the second square" : "— click the first square"}
|
||||
{/if}
|
||||
{#if selectedCard?.cardId === "power-attack"}
|
||||
(select an attack first, then attach Power Attack via number input)
|
||||
{/if}
|
||||
{#if selectedCard?.cardId === "relocate-sector"}
|
||||
{#if pendingSectorFrom}
|
||||
— now click the destination area
|
||||
{:else}
|
||||
— click a square in the sector to move
|
||||
{/if}
|
||||
{#if selectedCard?.cardId === "waterbolt"}
|
||||
<label class="inline">damage <input class="num-input" type="number" min="0" max={numberTotal} bind:value={wbDamage} /></label>
|
||||
<span>(knockback {numberTotal - wbDamage})</span>
|
||||
{/if}
|
||||
{#if selectedCard?.cardId === "power-run"}
|
||||
<label>life to trade <input type="number" min="1" max="10" bind:value={runPoints} /></label>
|
||||
<button onclick={castPowerRun}>Run!</button>
|
||||
<label class="inline">life to trade <input class="num-input" type="number" min="1" max="10" bind:value={runPoints} /></label>
|
||||
<button class="stamp tiny" onclick={castPowerRun}>Run!</button>
|
||||
{/if}
|
||||
{#if selectedCard && SELF_CARDS.has(selectedCard.cardId)}
|
||||
<button onclick={castSelfWithNumber}>
|
||||
<button class="stamp tiny" onclick={castSelfWithNumber}>
|
||||
Cast{attachedNumber ? ` with the ${numberTotal}` : " (duration 1)"}
|
||||
</button>
|
||||
{/if}
|
||||
{#if pendingCellFor}
|
||||
— now click the destination square for {pendingCellFor}
|
||||
{/if}
|
||||
{#if selectedCard && CELL_CARDS.has(selectedCard.cardId)}
|
||||
— click a square on the board
|
||||
{/if}
|
||||
<button class="link" onclick={clearSelection}>cancel</button>
|
||||
</div>
|
||||
<button class="hint-cancel" onclick={clearSelection}>cancel</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="actions">
|
||||
{#if isYourTurn && view.dimWarps.some((w) => {
|
||||
const me = view.players.find((p) => p.id === view.you)!;
|
||||
return (w.a.x === me.position.x && w.a.y === me.position.y) ||
|
||||
(w.b.x === me.position.x && w.b.y === me.position.y);
|
||||
})}
|
||||
<button class="stamp" onclick={() => net.command({ type: "warpStep" })}>Step through the warp</button>
|
||||
{/if}
|
||||
{#if isYourTurn}
|
||||
<button class="stamp" onclick={pickUp}>Pick up treasure</button>
|
||||
<button class="stamp" onclick={drop}>Drop treasure</button>
|
||||
<label class="inline draw-pick">
|
||||
draw
|
||||
<select bind:value={drawCount}>
|
||||
<option value={0}>0</option>
|
||||
<option value={1}>1</option>
|
||||
<option value={2}>2</option>
|
||||
</select>
|
||||
</label>
|
||||
<button class="stamp primary" onclick={endTurn}>End turn</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="hand">
|
||||
{#each view.yourHand as card (card.instanceId)}
|
||||
{@const def = cardDef(card.cardId)}
|
||||
<button
|
||||
class="card"
|
||||
class:selected={selectedCard?.instanceId === card.instanceId}
|
||||
class:attached={attachedNumber?.instanceId === card.instanceId}
|
||||
class:marked={discardSelection.has(card.instanceId)}
|
||||
title={def.text ?? ""}
|
||||
onclick={() => selectCard(card)}
|
||||
>
|
||||
<span class="card-type">{def.cardType}</span>
|
||||
<span class="card-name">{def.name}</span>
|
||||
{#if view.players.find((p) => p.id === view.you)?.displayed.some((c) => c.instanceId === card.instanceId)}
|
||||
<span class="displayed-badge">
|
||||
displayed{view.wandCharges[card.instanceId] != null ? ` · ${view.wandCharges[card.instanceId]} ⚡` : ""}
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
{#if youMustDiscard}
|
||||
<div class="banner respond">Hand over 7 — select cards and discard.</div>
|
||||
{/if}
|
||||
{#if discardSelection.size > 0}
|
||||
<button onclick={doDiscard}>Discard {discardSelection.size} selected</button>
|
||||
{/if}
|
||||
{#if isYourTurn && view.dimWarps.some((w) => {
|
||||
const me = view.players.find((p) => p.id === view.you)!;
|
||||
return (w.a.x === me.position.x && w.a.y === me.position.y) ||
|
||||
(w.b.x === me.position.x && w.b.y === me.position.y);
|
||||
})}
|
||||
<button onclick={() => net.command({ type: "warpStep" })}>Step through the warp</button>
|
||||
{/if}
|
||||
{#if view.outOfTurnWindow?.playerId === view.you}
|
||||
<div class="banner respond">Your interruption! Cast your spell (or pass).</div>
|
||||
<button onclick={pass}>Pass (waste it)</button>
|
||||
{/if}
|
||||
{#if isYourTurn}
|
||||
<button onclick={pickUp}>Pick up treasure</button>
|
||||
<button onclick={drop}>Drop treasure</button>
|
||||
<label>
|
||||
draw
|
||||
<select bind:value={drawCount}>
|
||||
<option value={0}>0</option>
|
||||
<option value={1}>1</option>
|
||||
<option value={2}>2</option>
|
||||
</select>
|
||||
</label>
|
||||
<button class="primary" onclick={endTurn}>End turn</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="log">
|
||||
{#each net.log.slice(-40) as line, i (i)}
|
||||
<div>{line}</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="hand" aria-label="your hand">
|
||||
{#each view.yourHand as card (card.instanceId)}
|
||||
<Card
|
||||
{card}
|
||||
selected={selectedCard?.instanceId === card.instanceId}
|
||||
attached={attachedNumber?.instanceId === card.instanceId ||
|
||||
attachedMods.some((m) => m.instanceId === card.instanceId)}
|
||||
marked={discardSelection.has(card.instanceId)}
|
||||
displayed={view.players.find((p) => p.id === view.you)?.displayed.some((c) => c.instanceId === card.instanceId) ?? false}
|
||||
charges={view.wandCharges[card.instanceId] ?? null}
|
||||
onclick={() => selectCard(card)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
main {
|
||||
font-family: system-ui, sans-serif;
|
||||
padding: 1rem 1.5rem;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
:global(html, body) {
|
||||
margin: 0;
|
||||
background: #171a20;
|
||||
}
|
||||
h1 { margin: 0 0 0.75rem; }
|
||||
.subtitle { font-size: 0.55em; color: #887; font-weight: normal; }
|
||||
.table {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 0%, rgba(64, 74, 92, 0.25), transparent 55%),
|
||||
repeating-linear-gradient(115deg, rgba(255,255,255,0.012) 0 3px, transparent 3px 7px),
|
||||
#171a20;
|
||||
color: #d8d2c0;
|
||||
font-family: "Archivo Narrow", system-ui, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 1.1rem 1.1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.masthead {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.7rem;
|
||||
padding: 0.7rem 0.2rem 0.6rem;
|
||||
border-bottom: 1px solid rgba(216, 210, 192, 0.15);
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
.mast-title {
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: #e9e1cb;
|
||||
}
|
||||
.mast-sub {
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.24em;
|
||||
text-transform: uppercase;
|
||||
color: #8d8672;
|
||||
}
|
||||
.mast-room { margin-left: auto; font-size: 0.85rem; color: #a49c86; }
|
||||
.mast-room b { color: #e9e1cb; letter-spacing: 0.12em; }
|
||||
.mast-status { font-size: 0.8rem; color: #c98a2a; }
|
||||
|
||||
.toast {
|
||||
background: #b33; color: white; padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px; margin-bottom: 0.5rem;
|
||||
}
|
||||
.lobby { display: flex; flex-direction: column; gap: 0.75rem; max-width: 420px; }
|
||||
.lobby input { padding: 0.5rem; font-size: 1rem; }
|
||||
.lobby-actions { display: flex; gap: 0.5rem; align-items: center; }
|
||||
.code { width: 6ch; text-transform: uppercase; }
|
||||
.status { color: #887; margin: 0; }
|
||||
|
||||
.game { display: grid; grid-template-columns: minmax(320px, 640px) minmax(280px, 1fr); gap: 1rem; }
|
||||
@media (max-width: 800px) { .game { grid-template-columns: 1fr; } }
|
||||
.side-pane { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
|
||||
|
||||
.banner { padding: 0.5rem 0.75rem; border-radius: 6px; background: #eee; }
|
||||
.banner.your-turn { background: #d8efd8; }
|
||||
.banner.respond { background: #f6dcb5; }
|
||||
.banner.winner { background: gold; font-size: 1.2em; }
|
||||
|
||||
.players { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.player { display: flex; gap: 0.5rem; align-items: center; padding: 0.2rem 0.4rem; border-radius: 4px; }
|
||||
.player.active { background: #eef4ff; }
|
||||
.player.dead { opacity: 0.45; text-decoration: line-through; }
|
||||
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
|
||||
.pname { font-weight: 600; }
|
||||
.deck-info { color: #887; font-size: 0.85em; }
|
||||
|
||||
.cast-hint { background: #eef; padding: 0.4rem 0.6rem; border-radius: 6px; }
|
||||
.cast-hint input { width: 4ch; }
|
||||
.link { background: none; border: none; color: #36c; cursor: pointer; text-decoration: underline; }
|
||||
|
||||
.hand { display: flex; flex-wrap: wrap; gap: 0.4rem; }
|
||||
.card {
|
||||
display: flex; flex-direction: column; align-items: flex-start;
|
||||
border: 1.5px solid #998; border-radius: 6px; background: #f6f2e6;
|
||||
padding: 0.35rem 0.5rem; cursor: pointer; min-width: 7.5rem; text-align: left;
|
||||
}
|
||||
.card:hover { border-color: #333; }
|
||||
.card.selected { border-color: #26c; background: #e6ecfc; }
|
||||
.card.attached { border-color: #2a2; background: #e2f4e2; }
|
||||
.card.marked { border-color: #c33; background: #fce6e6; }
|
||||
.card-type { font-size: 0.65em; text-transform: uppercase; color: #776; }
|
||||
.card-name { font-weight: 600; font-size: 0.9em; }
|
||||
.displayed-badge {
|
||||
font-size: 0.6em; text-transform: uppercase; color: #fff;
|
||||
background: #7a5f2a; border-radius: 3px; padding: 0 4px; margin-top: 2px;
|
||||
background: #6d2119;
|
||||
color: #f2e6d8;
|
||||
border: 1px solid #96382c;
|
||||
padding: 0.5rem 0.85rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.7rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
|
||||
button { padding: 0.4rem 0.7rem; border-radius: 6px; border: 1px solid #998; background: #fff; cursor: pointer; }
|
||||
button.primary { background: #26c; color: white; border-color: #26c; }
|
||||
button:disabled { opacity: 0.5; cursor: default; }
|
||||
.boxlid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.boxlid-inner {
|
||||
background: #e9e1cb;
|
||||
color: #43331f;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #b3a687;
|
||||
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
|
||||
padding: 2.2rem 2.6rem 2rem;
|
||||
max-width: 26rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.boxlid-title {
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.boxlid-title.small { font-size: 1.7rem; }
|
||||
.boxlid-tag {
|
||||
font-size: 0.95rem;
|
||||
color: #6b5a41;
|
||||
margin: 0.5rem 0 1.4rem;
|
||||
}
|
||||
.field { display: block; text-align: left; margin-bottom: 1rem; }
|
||||
.field span {
|
||||
display: block;
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #6b5a41;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.field input, .code {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #f4eede;
|
||||
border: 1px solid #b3a687;
|
||||
border-radius: 4px;
|
||||
padding: 0.55rem 0.7rem;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
color: #43331f;
|
||||
}
|
||||
.boxlid-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
|
||||
.or { font-size: 0.85rem; color: #6b5a41; }
|
||||
.code { width: 7.5ch; text-transform: uppercase; text-align: center; letter-spacing: 0.15em; }
|
||||
.roster { list-style: none; padding: 0; margin: 0 0 1rem; text-align: left; }
|
||||
.roster li { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 1.05rem; }
|
||||
.check { display: flex; gap: 0.5rem; align-items: center; justify-content: center; font-size: 0.92rem; margin-bottom: 1rem; }
|
||||
.waiting { color: #6b5a41; font-style: italic; }
|
||||
|
||||
.log {
|
||||
background: #1e1c18; color: #cfc9ba; font-size: 0.8em;
|
||||
border-radius: 6px; padding: 0.5rem 0.7rem; max-height: 240px;
|
||||
overflow-y: auto; font-family: ui-monospace, monospace;
|
||||
.stamp {
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
background: #e9e1cb;
|
||||
color: #43331f;
|
||||
border: 1.5px solid #43331f;
|
||||
border-radius: 3px;
|
||||
padding: 0.42rem 0.9rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.stamp:hover:not(:disabled) { background: #f4eede; }
|
||||
.stamp:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.35); }
|
||||
.stamp:disabled { opacity: 0.45; cursor: default; }
|
||||
.stamp.primary { background: #43331f; color: #e9e1cb; }
|
||||
.stamp.primary:hover:not(:disabled) { background: #5a4429; }
|
||||
.stamp.big { font-size: 0.95rem; padding: 0.6rem 1.3rem; }
|
||||
.stamp.tiny { font-size: 0.62rem; padding: 0.22rem 0.5rem; box-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
|
||||
.stamp:focus-visible { outline: 2px solid #d8b23a; outline-offset: 2px; }
|
||||
|
||||
.game {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(340px, 1fr) minmax(250px, 330px);
|
||||
gap: 1.1rem;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.board-zone { display: flex; align-items: flex-start; justify-content: center; min-width: 0; }
|
||||
.board-zone :global(svg.board) {
|
||||
max-height: calc(100vh - 21.5rem);
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.paper-rail { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
|
||||
|
||||
.slip {
|
||||
background: #e9e1cb;
|
||||
color: #43331f;
|
||||
border-radius: 3px;
|
||||
padding: 0.55rem 0.8rem;
|
||||
font-size: 0.95rem;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
|
||||
transform: rotate(-0.4deg);
|
||||
}
|
||||
.slip.yours { border-left: 4px solid #2e7d32; }
|
||||
.slip.urgent { border-left: 4px solid #b3372b; transform: rotate(0.4deg); }
|
||||
.slip.winner {
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-size: 1.25rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
border-left: 4px solid #c9a72a;
|
||||
}
|
||||
|
||||
.scoresheet {
|
||||
background: #f2ecdb;
|
||||
color: #43331f;
|
||||
border-radius: 2px;
|
||||
padding: 0.6rem 0.8rem 0.5rem;
|
||||
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45);
|
||||
background-image: repeating-linear-gradient(
|
||||
transparent 0 1.55rem,
|
||||
rgba(95, 74, 51, 0.18) 1.55rem calc(1.55rem + 1px)
|
||||
);
|
||||
}
|
||||
.scoresheet-head {
|
||||
font-family: "Caveat", cursive;
|
||||
font-size: 1.05rem;
|
||||
color: #6b5a41;
|
||||
border-bottom: 1.5px solid #6b5a41;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.score-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
height: 1.55rem;
|
||||
}
|
||||
.score-row.active .score-name { font-weight: 700; }
|
||||
.score-row.dead { opacity: 0.5; text-decoration: line-through; }
|
||||
.score-name { font-family: "Caveat", cursive; font-size: 1.25rem; line-height: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.score-life { font-family: "Caveat", cursive; font-size: 1.4rem; font-weight: 700; min-width: 1.6rem; text-align: right; }
|
||||
.score-marks { font-size: 0.75rem; color: #6b5a41; }
|
||||
.deck-line {
|
||||
font-family: "Courier Prime", monospace;
|
||||
font-size: 0.72rem;
|
||||
color: #8a7a5e;
|
||||
padding-top: 0.3rem;
|
||||
}
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.4); }
|
||||
|
||||
.chronicle {
|
||||
flex: 1;
|
||||
min-height: 8rem;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
background: #efe8d4;
|
||||
color: #3a2f1f;
|
||||
font-family: "Courier Prime", monospace;
|
||||
font-size: 0.74rem;
|
||||
line-height: 1.5;
|
||||
padding: 0.6rem 0.75rem;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.chronicle div + div { margin-top: 0.05rem; }
|
||||
|
||||
.table-edge {
|
||||
margin-top: 0.9rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.hint-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
background: rgba(233, 225, 203, 0.12);
|
||||
border: 1px dashed rgba(233, 225, 203, 0.35);
|
||||
border-radius: 4px;
|
||||
padding: 0.45rem 0.7rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.hint-name { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: #e9e1cb; }
|
||||
.hint-mods { color: #9fca6a; }
|
||||
.hint-alert { color: #e8a03c; }
|
||||
.hint-cancel {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #a49c86;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.inline { display: inline-flex; align-items: center; gap: 0.35rem; }
|
||||
.num-input { width: 3.2rem; }
|
||||
.text-input { width: 9rem; }
|
||||
.num-input, .text-input, .draw-pick select {
|
||||
background: #e9e1cb;
|
||||
border: 1px solid #43331f;
|
||||
border-radius: 3px;
|
||||
padding: 0.2rem 0.35rem;
|
||||
font-family: inherit;
|
||||
color: #43331f;
|
||||
}
|
||||
|
||||
.actions { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; min-height: 2rem; }
|
||||
.draw-pick { color: #a49c86; font-size: 0.9rem; }
|
||||
|
||||
.hand {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
padding: 0.9rem 0.3rem 0.35rem;
|
||||
overflow-x: auto;
|
||||
overflow-y: visible;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.game { grid-template-columns: 1fr; }
|
||||
.paper-rail { order: 2; }
|
||||
.chronicle { max-height: 22vh; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user