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}
+ {success ? '✓' : '✕'}
+ {/if}
{#if owner}{owner}{/if}
{:else}
@@ -39,6 +42,9 @@
{val}
{suit}
+ {#if success !== null}
+ {success ? '✓' : '✕'}
+ {/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.'] },