79c857023f
UNO, played for chips. You stake once, sit down against one to three bots, and going out first pays the table: 2.2x heads up, 3.6x against a full house. Anybody else going out first takes the stake. The table size is the tier, because it is the only dial UNO has. The bots move inside ApplyMove. A game with opponents is normally where you reach for a socket, and the plan says solo UNO must not — so one request plays your move and every bot turn behind it, and hands back the whole lap as a script the felt plays in order. The RNG is in the state rather than an argument to it: the bots choose and a spent deck reshuffles, so the engine needs randomness mid-game, and there is no generator alive across requests to pass in. The seed rides in the state and each step derives its own. The game still replays exactly as it fell. The zero value of Color is Wild, and that is the whole point of it: a wild played with the colour field missing from the JSON must be refused, not quietly played as a red one. It was red for an hour. The browser never sees a bot's card — not the deck, not a hand, not the face of a card a bot drew, which is most of the deck. Seats cross the wire as a name and a count. The multiples are measured, not guessed: playing the first legal card you hold wins 43/32/27% of the time against these bots, so the tiers price that to lose about 8% a game and leave good play worth roughly the house's edge. PeteFX.flyNode is the throw with the chip taken out of it, so a card can be thrown across the felt the same way. fly() is now that with a chip in it. Not yet driven in a browser, which in this room means not yet finished. Claude-Session: https://claude.ai/code/session_013M5nD7PgUboJXoDcYHzpuJ
179 lines
8.9 KiB
HTML
179 lines
8.9 KiB
HTML
{{define "title"}}UNO · {{.Room.Name}}{{end}}
|
||
|
||
{{define "main"}}
|
||
<div class="space-y-6" data-uno>
|
||
|
||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||
<div class="flex items-center gap-3 min-w-0">
|
||
<a href="/games" class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-[color:var(--card)] shadow-pete border-2 border-[color:var(--ink)]/10 hover:bg-[color:var(--ink)]/5 transition" title="Back to the casino">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5" aria-hidden="true">
|
||
<path d="M19 12H5"></path><polyline points="12 19 5 12 12 5"></polyline>
|
||
</svg>
|
||
<span class="sr-only">Back to the casino</span>
|
||
</a>
|
||
<h1 class="font-display text-3xl font-bold">UNO</h1>
|
||
</div>
|
||
<p class="text-sm text-[color:var(--ink)]/50">Go out first, or it was somebody else's night</p>
|
||
</div>
|
||
|
||
{{template "_chipbar" .}}
|
||
|
||
<!-- The felt. The board takes the room and the money lives in a rail beside it:
|
||
there is no corner free on this table for the house rack to sit in. -->
|
||
<section class="pete-felt pete-uno relative overflow-hidden rounded-3xl p-4 sm:p-6 lg:p-8 shadow-pete-lg border-2 border-[color:var(--ink)]/10">
|
||
<div class="grid gap-5 lg:grid-cols-[minmax(0,1fr),auto] lg:gap-8">
|
||
|
||
<div class="min-w-0 space-y-5">
|
||
|
||
<!-- The bots. Each one is a name, a fan of backs, and a count — which is
|
||
all you are ever told about them, and all a real opponent shows you. -->
|
||
<div data-seats class="flex flex-wrap items-start justify-center gap-3 sm:gap-5" aria-label="The other players"></div>
|
||
|
||
<!-- The middle: what you draw from, and what you play onto. -->
|
||
<div class="flex items-center justify-center gap-5 sm:gap-8">
|
||
<button type="button" data-deck class="pete-uno-deck" aria-label="Draw a card">
|
||
<span class="pete-uno-back" aria-hidden="true"></span>
|
||
<span data-deck-count class="pete-uno-deck-count">0</span>
|
||
</button>
|
||
|
||
<div class="flex flex-col items-center gap-2">
|
||
<div data-discard class="pete-uno-discard" aria-label="The card in play"></div>
|
||
<p data-colour class="pete-uno-colour" aria-live="polite"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Your hand. -->
|
||
<div class="space-y-2">
|
||
<div class="flex items-baseline justify-between gap-2">
|
||
<p data-turn-label class="text-xs font-bold uppercase tracking-wider text-white/50" aria-live="polite"></p>
|
||
<p data-count-label class="text-xs font-bold uppercase tracking-wider text-white/40"></p>
|
||
</div>
|
||
<div data-hand class="pete-uno-hand" aria-label="Your hand"></div>
|
||
</div>
|
||
|
||
<div class="flex min-h-[2.75rem] items-center justify-center">
|
||
<p data-verdict class="hidden rounded-full bg-white/95 px-5 py-2 font-display text-lg font-bold text-[#2b2118] shadow-pete"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- The rail. -->
|
||
<aside class="pete-rail">
|
||
<div class="pete-rack" data-at="rail" data-house aria-hidden="true">
|
||
<span data-chip="500" style="--stack: 5"></span>
|
||
<span data-chip="100" style="--stack: 7"></span>
|
||
<span data-chip="25" style="--stack: 4"></span>
|
||
<span data-chip="5" style="--stack: 6"></span>
|
||
</div>
|
||
|
||
<div class="pete-spot" data-spot>
|
||
<span class="pete-spot-label">Bet</span>
|
||
<div class="pete-stack" data-stack></div>
|
||
<span data-spot-total class="pete-spot-total hidden"></span>
|
||
</div>
|
||
|
||
<div class="text-center">
|
||
<div class="pete-meter" data-meter>
|
||
<span class="pete-meter-label">Pays</span>
|
||
<span data-pays class="pete-meter-value">—</span>
|
||
</div>
|
||
<p data-table-name class="mt-1.5 text-xs font-bold uppercase tracking-wider text-white/40"></p>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<!-- Naming a colour for a wild. It sits over the felt because until it is
|
||
answered there is no legal move on the table underneath it. -->
|
||
<div data-wild class="pete-uno-wild hidden" role="dialog" aria-label="Pick a colour">
|
||
<div class="pete-uno-wild-box">
|
||
<p class="font-display text-lg font-bold text-white">Pick a colour</p>
|
||
<div class="mt-3 grid grid-cols-2 gap-2.5">
|
||
<button type="button" data-colour-pick="red" class="pete-uno-swatch" data-c="red">Red</button>
|
||
<button type="button" data-colour-pick="blue" class="pete-uno-swatch" data-c="blue">Blue</button>
|
||
<button type="button" data-colour-pick="yellow" class="pete-uno-swatch" data-c="yellow">Yellow</button>
|
||
<button type="button" data-colour-pick="green" class="pete-uno-swatch" data-c="green">Green</button>
|
||
</div>
|
||
<button type="button" data-colour-cancel class="mt-3 text-xs font-semibold text-white/50 hover:text-white/80 transition">Play something else</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Playing: shown while a game is live. -->
|
||
<section data-playing class="hidden rounded-3xl bg-[color:var(--card)] p-5 sm:p-6 shadow-pete border-2 border-[color:var(--ink)]/10">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<p class="text-sm text-[color:var(--ink)]/50">
|
||
Click a card that lights up. Nothing lights up? Draw one.
|
||
</p>
|
||
<div class="ml-auto flex flex-wrap items-center gap-2">
|
||
<button type="button" data-draw
|
||
class="rounded-full border-2 border-[color:var(--ink)]/15 bg-[color:var(--card)] px-6 py-3 font-display text-lg font-bold shadow-pete
|
||
hover:bg-[color:var(--ink)]/5 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
|
||
Draw
|
||
</button>
|
||
<button type="button" data-pass
|
||
class="hidden rounded-full bg-[color:var(--accent)] px-6 py-3 font-display text-lg font-bold text-white shadow-pete
|
||
hover:brightness-105 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
|
||
Keep it
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<p data-game-msg class="hidden mt-3 rounded-2xl bg-[color:var(--ink)]/5 px-4 py-2 text-sm font-semibold"></p>
|
||
</section>
|
||
|
||
<!-- Betting: shown between games. -->
|
||
<section data-betting class="rounded-3xl bg-[color:var(--card)] p-5 sm:p-6 shadow-pete border-2 border-[color:var(--ink)]/10">
|
||
|
||
<div class="text-xs font-semibold uppercase tracking-wider text-[color:var(--ink)]/50">Who are you playing?</div>
|
||
<div class="mt-2 grid gap-2 sm:grid-cols-3">
|
||
{{range .Tables}}
|
||
<button type="button" data-tier="{{.Slug}}"
|
||
class="pete-tier rounded-2xl border-2 p-3 text-left transition">
|
||
<div class="flex items-baseline justify-between gap-2">
|
||
<span class="font-display text-lg font-bold">{{.Name}}</span>
|
||
<span class="font-display text-lg font-bold tabular-nums text-[color:var(--accent)]">{{printf "%.1f" .Base}}×</span>
|
||
</div>
|
||
<p class="mt-0.5 text-xs text-[color:var(--ink)]/50">{{.Blurb}}</p>
|
||
<p class="mt-1.5 text-xs font-semibold text-[color:var(--ink)]/40">
|
||
{{.Bots}} bot{{if gt .Bots 1}}s{{end}} · seven cards each
|
||
</p>
|
||
</button>
|
||
{{end}}
|
||
</div>
|
||
|
||
<div class="mt-5 flex flex-wrap items-center gap-x-6 gap-y-4">
|
||
<div>
|
||
<div class="text-xs font-semibold uppercase tracking-wider text-[color:var(--ink)]/50">Your bet</div>
|
||
<div class="font-display text-3xl font-bold tabular-nums"><span data-bet-amount>0</span></div>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
{{range .Denominations}}
|
||
<button type="button" data-chip="{{.}}" aria-label="Bet {{.}} more"
|
||
class="pete-chip pete-disc grid h-12 w-12 place-items-center font-display text-sm font-bold text-white">
|
||
<span>{{.}}</span>
|
||
</button>
|
||
{{end}}
|
||
<button type="button" data-bet-clear
|
||
class="rounded-full px-3 py-2 text-sm font-semibold text-[color:var(--ink)]/50 hover:text-[color:var(--ink)] transition">Clear</button>
|
||
</div>
|
||
|
||
<button type="button" data-start
|
||
class="ml-auto rounded-full bg-[color:var(--accent)] px-8 py-3 font-display text-lg font-bold text-white shadow-pete
|
||
hover:brightness-105 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
|
||
Deal
|
||
</button>
|
||
</div>
|
||
<p class="mt-3 text-center text-xs text-[color:var(--ink)]/40">
|
||
Normal rules: no stacking a +2 on a +2, and a reverse is a skip when it's just the two of you.
|
||
</p>
|
||
<p data-table-msg class="hidden mt-3 rounded-2xl bg-[color:var(--ink)]/5 px-4 py-2 text-sm font-semibold"></p>
|
||
</section>
|
||
|
||
</div>
|
||
{{end}}
|
||
|
||
{{define "scripts"}}
|
||
<script src="/static/js/casino-fx.js" defer></script>
|
||
<script src="/static/js/games.js" defer></script>
|
||
<script src="/static/js/uno.js" defer></script>
|
||
{{end}}
|