Eric WagonerandClaude Fable 5
bc0c69de11
Tom Jolly's 2002 Rules FAQ settled three table disputes this week from a text file only I could read. Now it lives in the game: 95 cards gained their FAQ sections (extracted verbatim from the official document, alias-matched — Slime, Mistbody, Buck and friends resolved to their proper cards), joining the handful already present for 102 cards with rulings in all. The card faces stay pure card text; an "Official FAQ" button appears under any enlarged card that has rulings — the hand inspector, the peek overlay, and as an FAQ chip in the card library — opening a booklet modal with the rulings and their provenance: "the cards overrule the rules, and the designer overrules the table." Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
96 lines
2.4 KiB
Svelte
96 lines
2.4 KiB
Svelte
<script lang="ts">
|
||
import { cardDef } from "@wizwar/engine";
|
||
|
||
let { cardId, onclose }: { cardId: string; onclose: () => void } = $props();
|
||
const def = $derived(cardDef(cardId));
|
||
|
||
function onkeydown(e: KeyboardEvent) {
|
||
if (e.key === "Escape") onclose();
|
||
}
|
||
</script>
|
||
|
||
<svelte:window {onkeydown} />
|
||
|
||
<div class="scrim" role="button" tabindex="-1" onclick={onclose} onkeydown={() => {}}>
|
||
<div
|
||
class="faq-book"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label="official FAQ ruling"
|
||
tabindex="-1"
|
||
onclick={(e) => e.stopPropagation()}
|
||
onkeydown={() => {}}
|
||
>
|
||
<header class="faq-head">
|
||
<span class="faq-title">{def.name} — Official FAQ</span>
|
||
<button class="close" onclick={onclose} aria-label="close">×</button>
|
||
</header>
|
||
<div class="faq-body">
|
||
{#each def.faqRulings as ruling, i (i)}
|
||
<p>{ruling}</p>
|
||
{/each}
|
||
<p class="colophon">
|
||
From Tom Jolly's official Wiz-War Rules FAQ (wizwar.com, September 2002).
|
||
Rulings occasionally reference other editions; the cards overrule the rules,
|
||
and the designer overrules the table.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.scrim {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(10, 12, 16, 0.72);
|
||
display: grid;
|
||
place-items: center;
|
||
z-index: 60;
|
||
padding: 1.5rem 1rem;
|
||
}
|
||
.faq-book {
|
||
background: #efe8d4;
|
||
color: #43331f;
|
||
width: min(34rem, 100%);
|
||
max-height: calc(100vh - 4rem);
|
||
border-radius: 6px;
|
||
border: 1px solid #b3a687;
|
||
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
.faq-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0.6rem 1rem;
|
||
border-bottom: 2px solid #43331f;
|
||
}
|
||
.faq-title {
|
||
font-family: "Oswald", sans-serif;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
.close {
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.3rem;
|
||
color: #6b5a41;
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
}
|
||
.close:hover { color: #b3372b; }
|
||
.faq-body {
|
||
overflow-y: auto;
|
||
padding: 0.9rem 1.2rem 1.1rem;
|
||
font-family: "Archivo Narrow", sans-serif;
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
}
|
||
.faq-body p { margin: 0 0 0.6rem; }
|
||
.colophon { font-style: italic; color: #6b5a41; font-size: 0.8rem; }
|
||
</style>
|