2d653bf439
Trivia had every Go test passing and had never been in a browser, which this plan's own rule says means nothing. So: play it. The game itself holds up. The clock drains honestly and does not restart on a reload, the multiple compounds, walking pays exactly what the felt quoted, the reveal marks the right answer, and the auto-submit at zero lands as a timeout rather than an illegal move. The next question's answer never crosses the wire. Two bugs only the browser could show: - The spot printed double the stake after every settled game. standing() set spot.amount and *then* poured the chips on, and pour grows the pile from what it is told is already there. The money was always right; the number under the chips was not, which is the one rule the felt is built on. - The house rack sat on top of the multiplier at 390px. Its 5.75rem inset is not a margin, it is the width of blackjack's shoe — so on a phone the rack sits in the middle of the felt. It now shrinks on small screens and pulls into the corner where the corner is empty; data-at says which rack is which, because pulling blackjack's to the edge slides it under the deck. The dev rig seeds its own question bank now (one real OpenTDB batch per difficulty), because a fresh dev database 503s every start otherwise.
134 lines
6.5 KiB
HTML
134 lines
6.5 KiB
HTML
{{define "title"}}Blackjack · {{.Room.Name}}{{end}}
|
|
|
|
{{define "main"}}
|
|
<div class="space-y-6" data-blackjack>
|
|
|
|
<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">Blackjack</h1>
|
|
</div>
|
|
<p class="text-sm text-[color:var(--ink)]/50">Six decks · pays 3:2 · dealer hits soft 17</p>
|
|
</div>
|
|
|
|
{{template "_chipbar" .}}
|
|
|
|
<!-- The felt. The two things on it that aren't cards are the shoe the cards
|
|
come out of and the rack the money comes out of — a chip on this table is
|
|
always travelling between one of those and the spot in front of you. -->
|
|
<section class="pete-felt relative overflow-hidden rounded-3xl p-6 sm:p-10 shadow-pete-lg border-2 border-[color:var(--ink)]/10">
|
|
|
|
<div class="pete-rack" data-at="shoe" 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>
|
|
|
|
<!-- The shoe every card flies out of. -->
|
|
<div class="pete-shoe" aria-hidden="true"></div>
|
|
|
|
<div class="relative space-y-8">
|
|
|
|
<!-- Dealer -->
|
|
<div>
|
|
<div class="mb-2 flex items-center gap-2">
|
|
<span data-dealer-label class="text-xs font-bold uppercase tracking-wider text-white/60">Dealer</span>
|
|
<span data-dealer-total class="hidden rounded-full bg-black/25 px-2.5 py-0.5 text-xs font-bold tabular-nums text-white"></span>
|
|
</div>
|
|
<div data-dealer class="pete-hand" aria-live="polite"></div>
|
|
</div>
|
|
|
|
<!-- What just happened. -->
|
|
<div class="flex min-h-[2.75rem] items-center justify-center">
|
|
<!-- The pill is white, so its text is ink — not var(--ink), which is the
|
|
room's cream and would be white on white. -->
|
|
<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>
|
|
|
|
<!-- Player: the bet sits in front of the cards it's riding on. -->
|
|
<div>
|
|
<div class="mb-2 flex items-center gap-2">
|
|
<span class="text-xs font-bold uppercase tracking-wider text-white/60">You</span>
|
|
<span data-player-total class="hidden rounded-full bg-black/25 px-2.5 py-0.5 text-xs font-bold tabular-nums text-white"></span>
|
|
</div>
|
|
<div class="flex items-center gap-5">
|
|
<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 data-player class="pete-hand flex-1" aria-live="polite"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Betting: shown between hands. -->
|
|
<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="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-deal
|
|
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 data-table-msg class="hidden mt-3 rounded-2xl bg-[color:var(--ink)]/5 px-4 py-2 text-sm font-semibold"></p>
|
|
</section>
|
|
|
|
<!-- Playing: shown while a hand is live. -->
|
|
<section data-actions 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 justify-center gap-3">
|
|
<button type="button" data-move="hit"
|
|
class="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">
|
|
Hit
|
|
</button>
|
|
<button type="button" data-move="stand"
|
|
class="rounded-full bg-[color:var(--card)] px-8 py-3 font-display text-lg font-bold shadow-pete border-2 border-[color:var(--ink)]/10
|
|
hover:bg-[color:var(--ink)]/5 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
|
|
Stand
|
|
</button>
|
|
<button type="button" data-move="double"
|
|
class="rounded-full bg-[color:var(--card)] px-8 py-3 font-display text-lg font-bold shadow-pete border-2 border-[color:var(--ink)]/10
|
|
hover:bg-[color:var(--ink)]/5 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
|
|
Double
|
|
</button>
|
|
</div>
|
|
<p class="mt-3 text-center text-xs text-[color:var(--ink)]/40">
|
|
<kbd>h</kbd> hit · <kbd>s</kbd> stand · <kbd>d</kbd> double
|
|
</p>
|
|
</section>
|
|
|
|
</div>
|
|
{{end}}
|
|
|
|
{{define "scripts"}}
|
|
<script src="/static/js/casino-fx.js" defer></script>
|
|
<script src="/static/js/casino-cards.js" defer></script>
|
|
<script src="/static/js/games.js" defer></script>
|
|
<script src="/static/js/blackjack.js" defer></script>
|
|
{{end}}
|