From 811a80a4c933cab80f79764d46a4cf464d04c656 Mon Sep 17 00:00:00 2001 From: Tim McCarthy Date: Fri, 4 Sep 2026 19:34:26 -0700 Subject: [PATCH] Mark played-card outcomes with corner checks and crosses --- TODO.md | 2 +- frontend/src/assets/css/card.css | 37 +++++++++++++++++-- frontend/src/assets/css/scene-play.css | 12 +----- frontend/src/components/Card.svelte | 10 ++++- .../src/components/scene/ObstacleItem.svelte | 4 +- frontend/src/lib/changelog.js | 3 +- 6 files changed, 48 insertions(+), 20 deletions(-) diff --git a/TODO.md b/TODO.md index 985e2a5..be606e9 100644 --- a/TODO.md +++ b/TODO.md @@ -3,7 +3,7 @@ - [x] Add an online indicator that displays if a player is connected - [x] PvP challenges should linger in the UI after completion so that players can see the result - [x] Add hat/gun icons next to player names on the player list to indicate if they're the captain and/or have a gat -- [ ] Replace red/green borders of successful/failed cards with checks and crosses in the upper corner of the card. +- [x] Replace red/green borders of successful/failed cards with checks and crosses in the upper corner of the card. - [ ] Add a note taking area to store game state between sessions ## Polish diff --git a/frontend/src/assets/css/card.css b/frontend/src/assets/css/card.css index d08caf9..914017c 100644 --- a/frontend/src/assets/css/card.css +++ b/frontend/src/assets/css/card.css @@ -46,12 +46,41 @@ margin: 0 4px; } -.card-mini.success { - box-shadow: 0 0 0 2px var(--success); +.card-mini.success, .card-mini.failure { + box-shadow: none; } -.card-mini.failure { - box-shadow: 0 0 0 2px var(--danger); +/* Remains visible in the exposed top strip of overlapping played cards. */ +.card-result { + position: absolute; + top: 3px; + right: 4px; + display: grid; + place-items: center; + width: 1.1rem; + height: 1.1rem; + border-radius: 50%; + background: var(--card-face); + color: var(--card-ink-black); + font-size: 1rem; + font-weight: 900; + line-height: 1; +} + +.card-mini .card-result { + top: 1px; + right: 1px; + width: 0.7rem; + height: 0.7rem; + font-size: 0.65rem; +} + +.card-mini.rotated .card-result { + top: auto; + right: auto; + bottom: 1px; + left: 1px; + transform: rotate(-90deg); } .card-mini .val { diff --git a/frontend/src/assets/css/scene-play.css b/frontend/src/assets/css/scene-play.css index fb84858..6f6a32f 100644 --- a/frontend/src/assets/css/scene-play.css +++ b/frontend/src/assets/css/scene-play.css @@ -264,8 +264,8 @@ /* Overlapping card column for an Obstacle. Cards stack with a heavy negative margin so each earlier card shows only its top strip (rank + suit); the most - recent play sits fully visible at the bottom. Rings: accent = the original - card, green/red = a play that did / didn't beat the difficulty. */ + recent play sits fully visible at the bottom. The original has an accent ring; + played cards show a result mark in the exposed upper corner. */ .obstacle-stack { --peek: 34px; /* visible strip of each earlier card */ --card-h: 112px; /* medium card height (card.css) */ @@ -290,14 +290,6 @@ box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); } -.stack-card.is-success { - box-shadow: 0 0 0 2px var(--success); -} - -.stack-card.is-failure { - box-shadow: 0 0 0 2px var(--danger); -} - .suit-badge { font-weight: 900; font-size: 1.1rem; diff --git a/frontend/src/components/Card.svelte b/frontend/src/components/Card.svelte index 1b4dde2..8d822b9 100644 --- a/frontend/src/components/Card.svelte +++ b/frontend/src/components/Card.svelte @@ -6,7 +6,7 @@ export let size = 'large'; // 'large' | 'medium' | 'mini' export let draggable = false; export let rotated = false; // mini: rendered as a played (rotated) column card - export let success = null; // mini: true/false adds success/failure styling + export let success = null; // true/false displays a success/failure corner mark export let owner = ''; // mini: short label of who played the card export let title = ''; // explicit override; otherwise the card describes itself export let techs = null; // large: {J, Q, K} technique names for the face-card overlay @@ -21,7 +21,7 @@ // tooltip describing the card itself (suit theme + Obstacle meaning), which // recomputes once the obstacle table loads. $: tipContent = title ? title : { html: cardTooltipHtml(card, $obstacleTable) }; - $: ariaLabel = title || cardTooltip(card, $obstacleTable); + $: ariaLabel = (title || cardTooltip(card, $obstacleTable)) + (success === true ? ' — Success' : success === false ? ' — Failure' : ''); {#if size === 'mini'} @@ -29,6 +29,9 @@ use:tooltip={tipContent} aria-label={ariaLabel}> {val} {suit} + {#if success !== null} + + {/if} {#if owner}{owner}{/if} {:else} @@ -39,6 +42,9 @@ {val} {suit} + {#if success !== null} + + {/if}
{#if joker} 🃏 diff --git a/frontend/src/components/scene/ObstacleItem.svelte b/frontend/src/components/scene/ObstacleItem.svelte index b679dac..a0cc632 100644 --- a/frontend/src/components/scene/ObstacleItem.svelte +++ b/frontend/src/components/scene/ObstacleItem.svelte @@ -80,10 +80,10 @@
{#each column_cards as pc, i (i)} -
- +
{/each} diff --git a/frontend/src/lib/changelog.js b/frontend/src/lib/changelog.js index f1c5813..f65a10e 100644 --- a/frontend/src/lib/changelog.js +++ b/frontend/src/lib/changelog.js @@ -6,10 +6,11 @@ // - Add a CHANGELOG entry only when a commit changes something players can // see. Skip refactors, tests, and tooling. Keep wording player-facing. -export const VERSION = 39; +export const VERSION = 40; // Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }. export const CHANGELOG = [ + { version: 40, date: '2026-09-04', changes: ['Played cards show a check or cross in the upper corner instead of a green or red outline, so results remain clear in stacked cards.'] }, { version: 39, date: '2026-09-04', changes: ['Completed duels stay visible for the rest of the scene, showing the winner, both cards, and how the defense resolved.'] }, { version: 38, date: '2026-09-04', changes: ['The crew roster shows who is online, with hat and gun icons for the Captain and Pi-Rats who have a Gat.'] }, { version: 37, date: '2026-09-04', changes: ['Color-match replacement cards arrive after the Deep resolves a Challenge. Each applied Obstacle accepts one card per Challenge, and each assistant can contribute one card.'] },