1
0
Fork 0

Compare commits

..

No commits in common. "074fdb02bfe31f95dbf9930b65ade4c389d1970e" and "618f884527be49844b902ed37b4f6407f016e00f" have entirely different histories.

12 changed files with 91 additions and 350 deletions

View file

@ -1,19 +1,5 @@
# Changelog
# v0.2.38
Blackjack arrives as a full table game with its own economy: every minigame now feeds a persistent chip bank you spend on buy-ins at the card tables. Poker gains named tables, popup history, and dev controls; mission briefings and side ops move to a proper rich text editor, and rank promotions get a ceiling-based authority model.
### Features
- **Blackjack**: take a seat at a four-seat oval felt with betting, insurance, double, and split. Chip piles stack on the rail by denomination, wins fly chips down to your pile while losses float up to the dealer, and fullscreen mode keeps the felt centered at any window size. Deal whooshes, turn chimes, and win stingers come with a sound toggle that remembers your choice.
- **Chip bank**: minigame XP now earns play chips (10 per XP), spent as buy-ins at the poker and blackjack tables. The balance card stays pinned in the corner while you scroll, pops the delta when your balance moves, flashes green or red with the direction, and plays a rising or falling chime. A daily top-up is there to claim when you dip low.
- **Poker upgrades**: tables carry proper names, action popups keep a replayable history, and a dev panel exposes table controls for testing.
- **Respawn tickets**: mission attendance converts into respawn tickets, settled automatically after each op with balances that accumulate over time.
- **Rank promotions**: promotion authority now derives from your rank's ceiling instead of a flat staff check, and command staff can promote directly from a member's profile.
- **Mission briefings**: briefings and side-op narratives use a rich text editor with a formatting toolbar, inline wikilinks, and live preview; comms bodies render with matching styles.
- **Voiceover**: recordings gain a spoiler gate so unreleased content stays hidden until its time, plus clause-aware pause pacing.
---
# v0.2.36
Poker takes the spotlight in this stretch: a rebuilt table, synthesized sound, card skins, and glowing hand ranks. Alongside it, the awards program learns advancement series, and poker placement XP is paused while payouts get reworked; placements, hands won, and best chips still record as normal.

View file

@ -1,6 +1,6 @@
{
"name": "polaris-task-force",
"version": "0.2.39",
"version": "0.2.38",
"description": "Web app for the Arma 3 unit Polaris Task Force. Uses Next.js for client- and server-side rendering, with a Postgres database and some other neat libraries.",
"license": "MIT",
"type": "module",

View file

@ -1378,128 +1378,13 @@
transform: translate(-50%, -50%);
}
/* Blackjack seats share the poker seat panel CSS, whose commit pill and hand
reveal are absolutely positioned via poker-only arc classes that blackjack
slots never carry. Keep the pill in the panel row and push corner-seat
reveals outward, clear of the dealer block. */
.blackjack-felt .poker-seat-commit {
position: static;
transform: none;
}
.blackjack-felt .blackjack-seat-arc-corner-right .poker-seat-reveal {
left: calc(50% + 4.5rem);
}
.blackjack-felt .blackjack-seat-arc-corner-left .poker-seat-reveal {
left: calc(50% - 4.5rem);
}
/* Top-anchor the log below the dealer block (bottom edge reaches ~44% with
the turn clock) so the newest line can never climb over the time bar. */
.blackjack-felt .poker-action-log {
top: 46%;
bottom: auto;
}
/* Same fix for poker: bottom-anchoring let the newest line climb into the
center block's turn clock. The clock's bottom edge sits around 65% of the
4:3 felt during betting, so the log is top-anchored at 66.5% and capped
to three visible lines (about 0.95rem each plus gaps) so it ends before
the viewer card spot; the mask fades the capped tail. */
.poker-felt .poker-action-log {
top: 66.5%;
bottom: auto;
max-height: 2.95rem;
overflow: hidden;
}
/* Poker chip flight: every chip starts stacked at one origin and launches
one after another (130ms stagger, fill-mode both holds unlaunched chips
in the pile). Wins drop from the pot plaque (~40% of the felt) down to
the viewer card spot (bottom 7rem, so about 14rem of travel); losses fly
the reverse leg from the card spot up to the pot. Chips are the shared
.bj-chip pieces; the geometry is poker-scoped because blackjack flies
between different anchors. */
.poker-chip-flight {
position: absolute;
left: 50%;
z-index: 35;
width: 1.6rem;
height: 0.95rem;
transform: translateX(-50%);
pointer-events: none;
}
.poker-chip-flight-win {
top: 40%;
}
.poker-chip-flight-loss {
bottom: 7.6rem;
}
.poker-chip-flight .bj-chip {
bottom: auto;
left: 0;
}
.poker-chip-flight-win .bj-chip {
animation: poker-chip-fly-win 700ms ease-in both;
}
.poker-chip-flight-loss .bj-chip {
animation: poker-chip-fly-loss 700ms ease-in both;
}
@keyframes poker-chip-fly-win {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
70% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(14rem) scale(0.7);
}
}
@keyframes poker-chip-fly-loss {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
70% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-14rem) scale(0.7);
}
}
@media (prefers-reduced-motion: reduce) {
.poker-chip-flight {
display: none;
}
}
/* Fullscreen contain-fit: absolute with zero insets + auto margins sizes the
felt to the largest 4:3 rectangle inside the viewport area (the same rules
browsers use for replaced elements), so it can never collapse to content
size and never overflow. Must stay after .poker-felt-table to win the
width tie. */
.poker-felt-fullscreen {
position: absolute;
inset: 0;
margin: auto;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
aspect-ratio: 4 / 3;
min-height: max(76vh, 42rem);
border-radius: 50% / 48%;
}
.poker-felt-fullscreen::after {
border-radius: 50% / 46%;
}
.poker-seat-panel {
@ -1748,12 +1633,37 @@
white-space: nowrap;
}
.poker-seat-commit-label {
color: rgb(255 255 255 / 55%);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
.poker-seat-commit-chip {
position: relative;
display: inline-block;
width: 1.1rem;
height: 0.72rem;
border: 1px solid #d6b36a;
border-radius: 50%;
background: var(--poker-chip-clay);
box-shadow: 0 0.12rem 0 rgb(0 0 0 / 35%);
transform: rotate(-8deg);
}
.poker-seat-commit-chip::before,
.poker-seat-commit-chip::after {
position: absolute;
left: -0.05rem;
width: 1.1rem;
height: 0.72rem;
border: 1px solid color-mix(in srgb, #d6b36a 85%, white);
border-radius: 50%;
content: "";
}
.poker-seat-commit-chip::before {
top: -0.2rem;
background: color-mix(in srgb, var(--poker-chip-clay) 82%, white);
}
.poker-seat-commit-chip::after {
top: -0.4rem;
background: color-mix(in srgb, var(--poker-chip-clay) 72%, var(--poker-trim));
}
.poker-seat-arc-left .poker-seat-commit {
@ -1859,14 +1769,6 @@
0 0.25rem 0.5rem rgb(0 0 0 / 24%);
}
/* Big pots break down into up to seven denomination piles; let the pile row
wrap so the plaque can never outgrow the center block on narrow felts. */
.poker-pot-plaque .bj-chip-stack {
max-width: 100%;
justify-content: center;
flex-wrap: wrap;
}
.poker-pot-plaque .poker-console-kicker {
color: #f3d28b;
}
@ -1960,15 +1862,6 @@
font-size: 0.7rem;
}
/* Below-felt variant: on narrow screens the toolbar renders in normal flow
under the felt because the felt's overflow-hidden clips the overlay row
there; static positioning cancels the overlay anchor. */
.poker-action-toolbar-below {
position: static;
transform: none;
width: min(30rem, 100%);
}
.poker-action-toolbar .poker-betting-controls-compact {
width: 100%;
gap: 0.4rem;
@ -2901,34 +2794,22 @@
exact number always rides alongside in a text label. Pile heights are set
inline from the chip count so nothing clips or overlaps. */
.bj-chip-stack {
--bj-chip-w: 1.6rem;
--bj-chip-h: 0.95rem;
--bj-chip-step: 0.3rem;
display: inline-flex;
align-items: flex-end;
gap: 0.3rem;
}
/* Compact piles (sm) share the same markup with smaller discs so dense
surfaces like poker's bet pills and console readouts keep their height. */
.bj-chip-stack-sm {
--bj-chip-w: 1.15rem;
--bj-chip-h: 0.68rem;
--bj-chip-step: 0.2rem;
gap: 0.22rem;
}
.bj-chip-pile {
position: relative;
display: inline-block;
width: var(--bj-chip-w, 1.6rem);
width: 1.6rem;
}
.bj-chip {
position: absolute;
left: 0;
width: var(--bj-chip-w, 1.6rem);
height: var(--bj-chip-h, 0.95rem);
width: 1.6rem;
height: 0.95rem;
border: 2px dashed rgb(255 255 255 / 72%);
border-radius: 50%;
box-shadow:

View file

@ -1,7 +1,6 @@
"use client";
import type { BlackjackSnapshot } from "@/app/(frontend)/minigames/blackjack/actions";
import { cn } from "@/lib/utils";
import { BlackjackChipStack } from "./BlackjackChipStack";
import { BlackjackControls } from "./BlackjackControls";
@ -13,22 +12,18 @@ interface BlackjackActionToolbarProps {
readonly snapshot: SeatedSnapshot;
readonly onSnapshot: (snapshot: BlackjackSnapshot) => void;
readonly onActionFeedback: () => void;
readonly below?: boolean;
}
/**
* Minimal felt overlay: one bottom-centered column holding the bankroll
* pill plus either the waiting pill or the acting player's controls.
* Rendering them as a single stack keeps the pair collision-free at every
* phase; on a settled round only the bankroll pill remains. With `below`,
* the same stack renders in normal flow under the felt so narrow screens
* never clip it.
* phase; on a settled round only the bankroll pill remains.
*/
export function BlackjackActionToolbar({
snapshot,
onSnapshot,
onActionFeedback,
below = false,
}: BlackjackActionToolbarProps) {
const view = snapshot.you;
const viewerPlayer = view.players.find((player) => player.seatId === view.viewerSeat);
@ -63,21 +58,14 @@ export function BlackjackActionToolbar({
if (settled) {
return (
<div
className={cn(
"flex justify-center",
below
? "pointer-events-none mt-3"
: "pointer-events-none absolute inset-x-0 bottom-5 z-30",
)}
>
<div className="pointer-events-none absolute inset-x-0 bottom-5 z-30 flex justify-center">
{bankrollPill}
</div>
);
}
return (
<div className={cn("flex justify-center", below ? "mt-3" : "absolute inset-x-0 bottom-5 z-30")}>
<div className="absolute inset-x-0 bottom-5 z-30 flex justify-center">
<div className="flex flex-col items-center gap-2">
{bankrollPill}
{!view.yourTurn ? (
@ -86,7 +74,9 @@ export function BlackjackActionToolbar({
role="status"
>
{(() => {
const actingPlayer = view.players.find((player) => player.seatId === view.activeSeat);
const actingPlayer = view.players.find(
(player) => player.seatId === view.activeSeat,
);
return actingPlayer ? `Waiting for ${actingPlayer.name}` : "Waiting for the table";
})()}
</span>

View file

@ -6,9 +6,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
/**
* Renders an amount as a pile of casino chips: denomination-colored CSS
* discs stacked into piles, popping in as the amount grows. Purely visual;
* the exact number always rides alongside in a text label. `size="sm"`
* renders smaller discs for dense surfaces (poker bet pills, console
* readouts) without forking the markup.
* the exact number always rides alongside in a text label.
*/
interface ChipDenomination {
@ -57,6 +55,10 @@ export function chipFlightChips(amount: number, maxChips = 8): FlightChip[] {
return chips;
}
/** Must match the .bj-chip height + vertical step in styles.css. */
const CHIP_HEIGHT_REM = 0.95;
const CHIP_STEP_REM = 0.3;
interface ChipPile {
readonly key: string;
readonly tone: string;
@ -94,37 +96,27 @@ function pileUp(amount: number): ChipPile[] {
export function BlackjackChipStack({
amount,
className,
size = "md",
}: {
readonly amount: number;
readonly className?: string;
readonly size?: "md" | "sm";
}) {
if (amount <= 0) return null;
const piles = pileUp(amount);
return (
<TooltipProvider delayDuration={150}>
<span
className={cn("bj-chip-stack", size === "sm" && "bj-chip-stack-sm", className)}
aria-hidden="true"
>
<span className={cn("bj-chip-stack", className)} aria-hidden="true">
{piles.map((pile) => (
<Tooltip key={pile.key}>
<TooltipTrigger asChild>
<span
className="bj-chip-pile"
style={{
height: `calc(var(--bj-chip-h) + ${pile.count - 1} * var(--bj-chip-step))`,
}}
style={{ height: `${CHIP_HEIGHT_REM + (pile.count - 1) * CHIP_STEP_REM}rem` }}
>
{Array.from({ length: pile.count }, (_, chipIndex) => (
<span
key={`${pile.key}-${chipIndex}`}
className={cn("bj-chip", pile.tone)}
style={{
bottom: `calc(${chipIndex} * var(--bj-chip-step))`,
zIndex: chipIndex + 1,
}}
style={{ bottom: `${chipIndex * CHIP_STEP_REM}rem`, zIndex: chipIndex + 1 }}
/>
))}
</span>

View file

@ -64,17 +64,6 @@ export function BlackjackFeltCanvas({
const tableAnnouncements = popups.filter((popup) => popup.tone === "leave");
const liveTurn = view.phase !== "round-complete";
// Narrow screens render the action toolbar below the felt in flow: the
// overlay pill row is wider than the felt there and the felt clips it.
const [toolbarBelow, setToolbarBelow] = useState(false);
useEffect(() => {
const query = window.matchMedia("(max-width: 640px)");
const update = () => setToolbarBelow(query.matches);
update();
query.addEventListener("change", update);
return () => query.removeEventListener("change", update);
}, []);
// Chip flight: on the settle transition, chips launch one after another
// from the hand spot with denomination colors matching the money moved:
// payouts (and pushes) toward the bankroll pill, lost bets up to the
@ -275,7 +264,7 @@ export function BlackjackFeltCanvas({
</div>
)}
{!spectator && !toolbarBelow && (
{!spectator && (
<BlackjackActionToolbar
snapshot={snapshot}
onSnapshot={onSnapshot}
@ -379,15 +368,6 @@ export function BlackjackFeltCanvas({
</div>
)}
</div>
{!spectator && toolbarBelow && (
<BlackjackActionToolbar
snapshot={snapshot}
onSnapshot={onSnapshot}
onActionFeedback={onActionFeedback}
below
/>
)}
</div>
);
}

View file

@ -121,9 +121,7 @@ export function BlackjackSeat({
)}
</div>
{player.hands
.filter((hand) => hand.cards.length > 0)
.map((hand, handIndex) => (
{player.hands.map((hand, handIndex) => (
<div
key={`${player.seatId}-hand-${handIndex}`}
className={cn(

View file

@ -6,7 +6,6 @@ import type { PublicPlayerView } from "@/lib/minigames/poker";
import type { PokerSnapshot } from "@/app/(frontend)/minigames/poker/actions";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { BlackjackChipStack as ChipStack } from "../blackjack/BlackjackChipStack";
import { PokerClock } from "./PokerClock";
type SeatedSnapshot = PokerSnapshot & {
@ -182,11 +181,7 @@ export function PokerActionConsole({
<div className="poker-console-economy">
{!spectator && (
<div className="poker-chip-readout">
{chipsInPlay > 0 ? (
<ChipStack amount={chipsInPlay} size="sm" />
) : (
<span className="poker-chip-stack" aria-hidden="true" />
)}
<span className="poker-console-readout-copy">
<span className="poker-console-kicker">Chips in play</span>
<strong className="font-mono text-sm tabular-nums">

View file

@ -11,14 +11,12 @@ interface PokerActionToolbarProps {
readonly snapshot: SeatedSnapshot;
readonly onSnapshot: (snapshot: PokerSnapshot) => void;
readonly onActionFeedback: () => void;
readonly below?: boolean;
}
export function PokerActionToolbar({
snapshot,
onSnapshot,
onActionFeedback,
below = false,
}: PokerActionToolbarProps) {
const view = snapshot.you;
@ -27,20 +25,14 @@ export function PokerActionToolbar({
if (!view.yourTurn) {
const actingPlayer = view.players.find((player) => player.seatId === view.toActSeat);
return (
<div
className={`poker-action-toolbar poker-action-toolbar-waiting${below ? " poker-action-toolbar-below" : ""}`}
role="status"
>
<div className="poker-action-toolbar poker-action-toolbar-waiting" role="status">
{actingPlayer ? `Waiting for ${actingPlayer.name}` : "Waiting for the table"}
</div>
);
}
return (
<div
className={`poker-action-toolbar${below ? " poker-action-toolbar-below" : ""}`}
aria-label="Poker actions"
>
<div className="poker-action-toolbar" aria-label="Poker actions">
<BettingControls
tableId={snapshot.tableId}
snapshotVersion={snapshot.version}

View file

@ -1,8 +1,6 @@
"use client";
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";
import { BlackjackChipStack as ChipStack, chipFlightChips, type FlightChip } from "../blackjack/BlackjackChipStack";
import type { Card, PublicPlayerView } from "@/lib/minigames/poker";
import type { PokerSnapshot } from "@/app/(frontend)/minigames/poker/actions";
import { Badge } from "@/components/ui/badge";
@ -112,50 +110,12 @@ export function PokerFeltCanvas({
const viewerPopups = popupsForSeat(view.viewerSeat);
const tableAnnouncements = popups.filter((popup) => popup.tone === "leave");
// Narrow screens render the action toolbar below the felt in flow: the
// overlay row is wider than the felt there and the felt clips it.
const [toolbarBelow, setToolbarBelow] = useState(false);
useEffect(() => {
const query = window.matchMedia("(max-width: 640px)");
const update = () => setToolbarBelow(query.matches);
update();
query.addEventListener("change", update);
return () => query.removeEventListener("change", update);
}, []);
// Chip flight: on the settle transition the viewer's net chips fly between
// the pot plaque (felt center) and the viewer card spot: winnings drop
// from the pot, lost stakes climb to it. The hand number guards against
// refiring while the snapshot settles through showdown and hand-complete.
const previousSettleHandRef = useRef<number | null>(null);
const [chipFlights, setChipFlights] = useState<
{ key: number; direction: "win" | "loss"; chips: FlightChip[] }[]
>([]);
useEffect(() => {
const settling = view.phase === "showdown" || view.phase === "hand-complete";
if (!settling || !result || result.netChange === 0) {
previousSettleHandRef.current = null;
return;
}
if (previousSettleHandRef.current === view.handNumber) return;
previousSettleHandRef.current = view.handNumber;
setChipFlights([
{
key: Date.now(),
direction: result.netChange > 0 ? "win" : "loss",
chips: chipFlightChips(Math.abs(result.netChange)),
},
]);
const timer = setTimeout(() => setChipFlights([]), 2400);
return () => clearTimeout(timer);
}, [view.phase, view.handNumber, result]);
return (
<div className="poker-table-stage">
<div
className={cn(
"poker-felt-table poker-felt relative aspect-[4/3] overflow-hidden p-4",
fullscreen ? "poker-felt-fullscreen" : "min-h-[40rem] w-full max-w-[56rem]",
"poker-felt-table relative min-h-[36rem] overflow-hidden p-4 sm:min-h-[42rem]",
fullscreen && "poker-felt-fullscreen",
)}
>
{opponents.map((player: PublicPlayerView, opponentIndex) => {
@ -208,7 +168,6 @@ export function PokerFeltCanvas({
<PokerDeckOrigin />
<div className="poker-pot-plaque">
<span className="poker-console-kicker">Pot</span>
<ChipStack amount={view.potTotal} />
<strong className="font-mono text-lg tabular-nums">
{view.potTotal.toLocaleString()}
</strong>
@ -293,7 +252,7 @@ export function PokerFeltCanvas({
</div>
)}
{!spectator && !toolbarBelow && (
{!spectator && (
<PokerActionToolbar
snapshot={snapshot}
onSnapshot={onSnapshot}
@ -301,27 +260,6 @@ export function PokerFeltCanvas({
/>
)}
{chipFlights.map((flight) => (
<div
key={flight.key}
className={cn(
"poker-chip-flight",
flight.direction === "win"
? "poker-chip-flight-win"
: "poker-chip-flight-loss",
)}
aria-hidden="true"
>
{flight.chips.map((chip, chipIndex) => (
<span
key={chip.key}
className={cn("bj-chip", chip.tone)}
style={{ animationDelay: `${chipIndex * 130}ms` }}
/>
))}
</div>
))}
{viewerPopups.length > 0 && (
<div className="poker-popup-stack poker-popup-viewer-spot" aria-hidden="true">
{viewerPopups.map((popup) => (
@ -349,15 +287,6 @@ export function PokerFeltCanvas({
)}
</div>
{!spectator && toolbarBelow && (
<PokerActionToolbar
snapshot={snapshot}
onSnapshot={onSnapshot}
onActionFeedback={onActionFeedback}
below
/>
)}
<PokerActionConsole
snapshot={snapshot}
handLabel={handLabel}

View file

@ -121,7 +121,7 @@ export function PokerGameTable({
if (!mounted) return null;
return createPortal(
<div className="fixed inset-0 z-50 flex flex-col gap-3 overflow-hidden bg-black/92 p-4 backdrop-blur-sm">
<div className="fixed inset-0 z-50 flex flex-col gap-3 overflow-auto bg-black/92 p-4 backdrop-blur-sm">
<div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border border-white/15 bg-black/60 p-3 backdrop-blur-sm">
<div className="flex min-w-0 items-center gap-2">
<span className="truncate font-semibold text-white">{tableName}</span>
@ -159,7 +159,7 @@ export function PokerGameTable({
)}
</div>
</div>
<div className="relative min-h-0 flex-1">{feltCanvas}</div>
{feltCanvas}
</div>,
document.body,
);

View file

@ -4,7 +4,6 @@ import { useEffect, useRef, useState } from "react";
import { Shield } from "lucide-react";
import { cn } from "@/lib/utils";
import type { PublicPlayerView } from "@/lib/minigames/poker";
import { BlackjackChipStack as ChipStack } from "../blackjack/BlackjackChipStack";
import { CardView } from "./CardView";
interface PokerSeatProps {
@ -122,8 +121,7 @@ export function PokerSeat({
className="poker-seat-commit"
aria-label={`Current bet ${player.committed.toLocaleString()}`}
>
<span className="poker-seat-commit-label">Bet</span>
<ChipStack amount={player.committed} size="sm" />
<span className="poker-seat-commit-chip" aria-hidden="true" />
<span className="font-mono text-[0.75rem] tabular-nums">
{player.committed.toLocaleString()}
</span>