Skip to content

Refine card crops and table contrast #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
8tp merged 1 commit into from
Aug 8, 2026
Merged

Refine card crops and table contrast #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/ASSETS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ This app should use generated raster assets where they add mood, identity, or ca

- **Home title banner** -- The first screen benefits from a branded raster masthead instead of plain SVG text. Current asset: `public/assets/brand/coup-online-banner-v2.webp`.
- **Influence card faces** -- Character portraits make known and revealed cards feel like real influence cards. Current UI assets: `public/assets/cards/{duke,assassin,captain,ambassador,contessa,inquisitor}-v3.webp`.
- **Small-card close crops** -- Tiny mobile cards should use face/prop-forward crops instead of the full portrait composition. Current UI assets: `public/assets/cards/focus/{duke,assassin,captain,ambassador,contessa,inquisitor}-v3.webp`.
- **Small-card close crops** -- Tiny mobile cards should use face/prop-forward crops instead of the full portrait composition. Duke, Assassin, Captain, and Inquisitor use v3 focus assets; Ambassador and Contessa use the refined v4 focus crops.
- **Influence card back** -- Hidden cards need one recognizable card-back treatment. Current assets: `public/assets/cards/back-v2.webp` and `public/assets/cards/focus/back-v2.webp`.
- **Game table backgrounds** -- The shared app background can use subtle raster tabletops because they add atmosphere without carrying gameplay state. Current assets: `public/assets/backgrounds/game-table-v2.webp` and `public/assets/backgrounds/game-table-mobile-v2.webp`.
- **Game table backgrounds** -- The shared app background can use subtle raster tabletops because they add atmosphere without carrying gameplay state. Current assets: `public/assets/backgrounds/game-table-v2.webp` and `public/assets/backgrounds/game-table-mobile-v2.webp`; responsive CSS fading layers mute their contrast behind the UI.
- **App/project icon** -- Home-screen/PWA icons need a strong raster emblem that reads at 16-512 px. The 1024 px master is `public/assets/brand/app-icon-v2.png`; versioned PWA, Apple touch, maskable, and favicon derivatives live under `public/icons/` and `public/`.
- **Social/share imagery** -- Open Graph, README screenshots, and store/promotional surfaces can use composed raster art because they are not interactive controls. Current assets: `public/og-image-v3.png` and `public/embed-image-v3.png`.

Expand Down Expand Up @@ -107,8 +107,8 @@ Each source was a 1792×2688 four-up grid. The approved 896×1344 quadrant was e
| Duke | `0bfa152b…`, top-left | `120, 0, 720, 1080` | Plum and antique gold; silver-haired corporate ruler at an obsidian council dais |
| Assassin | `ae7ca449…`, top-left | `32, 0, 832, 1248` | Slate and electric blue; female operative with a blunt fringe and sculptural platinum ponytail |
| Captain | `879c6c0f…`, top-left | `64, 0, 768, 1152` | Cobalt and brass; naval commander over a tactical display |
| Ambassador | `22544db9…`, bottom-right | `128, 0, 768, 1152` | Chartreuse and amber; diplomat with a translation visor in an embassy concourse |
| Contessa | `c4aeb41c…`, top-left | `64, 0, 768, 1152` | Crimson and gold; aristocratic protector with a strong heraldic silhouette |
| Ambassador | `22544db9…`, bottom-right | `128, 0, 640, 960` | Chartreuse and amber; diplomat with a translation visor in an embassy concourse |
| Contessa | `c4aeb41c…`, top-left | `16, 0, 864, 1296` | Crimson and gold; aristocratic protector with a strong heraldic silhouette |
| Inquisitor | `e450c4c8…`, top-left | `64, 0, 768, 1152` | Deep teal and pale cyan; watchful investigator with an optical device |

The prompt structure kept the renderer, era, finish, and framing consistent while varying each role's casting, silhouette, location, palette, and readable prop:
Expand All @@ -130,7 +130,7 @@ Role prompts should describe the character rather than name an existing actor or

1. Download the original Midjourney grid, not an HD reinterpretation, so the approved variation remains exact.
2. Crop the selected quadrant losslessly at 896×1344.
3. Create the full asset by scaling the quadrant to 512×768 and encode it as WebP at quality 84.
3. Create the full asset by scaling the quadrant to 512×768 and encode it as WebP at quality 86.
4. Create a separate 2:3 focus crop around the face and role prop, then scale and encode it with the same settings. Leave extra vertical safety for the UI's `object-cover` card containers.
5. Update both maps in `src/app/utils/assets.ts`, the service-worker precache list, README thumbnails, social previews, and this document.
6. Bump versioned filenames and `CACHE_NAME` in `public/sw.js` together so installed clients do not retain the previous portraits.
Expand Down
Binary file removed public/assets/cards/focus/ambassador-v3.webp
View file
Open in desktop
Binary file not shown.
Binary file added public/assets/cards/focus/ambassador-v4.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/assets/cards/focus/contessa-v3.webp
View file
Open in desktop
Binary file not shown.
Binary file added public/assets/cards/focus/contessa-v4.webp
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions public/sw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const CACHE_NAME = 'coup-assets-v3';
const CACHE_NAME = 'coup-assets-v4';
const ASSET_URLS = [
'/icons/icon-192-v2.png',
'/icons/icon-512-v2.png',
Expand All @@ -18,8 +18,8 @@ const ASSET_URLS = [
'/assets/cards/focus/duke-v3.webp',
'/assets/cards/focus/assassin-v3.webp',
'/assets/cards/focus/captain-v3.webp',
'/assets/cards/focus/ambassador-v3.webp',
'/assets/cards/focus/contessa-v3.webp',
'/assets/cards/focus/ambassador-v4.webp',
'/assets/cards/focus/contessa-v4.webp',
'/assets/cards/focus/inquisitor-v3.webp',
'/audio/velvet-court.mp3',
'/audio/court-crowned.mp3',
Expand Down
19 changes: 13 additions & 6 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
-webkit-tap-highlight-color: transparent;
background-color: #090d0e;
background-image:
radial-gradient(circle at top, rgba(214,161,42,0.10), transparent 34rem),
radial-gradient(circle at bottom left, rgba(95,20,28,0.18), transparent 28rem),
linear-gradient(rgba(9,13,14,0.42), rgba(9,13,14,0.56)),
radial-gradient(circle at top, rgba(214,161,42,0.06), transparent 34rem),
radial-gradient(circle at bottom left, rgba(95,20,28,0.10), transparent 28rem),
linear-gradient(rgba(5,9,10,0.58), rgba(5,9,10,0.70)),
url('/assets/backgrounds/game-table-v2.webp');
background-size: auto, auto, auto, cover;
background-position: center;
Expand All @@ -28,9 +28,9 @@
@media (max-width: 640px) {
body {
background-image:
radial-gradient(circle at top, rgba(214,161,42,0.08), transparent 22rem),
radial-gradient(circle at bottom left, rgba(95,20,28,0.16), transparent 20rem),
linear-gradient(rgba(9,13,14,0.36), rgba(9,13,14,0.50)),
radial-gradient(circle at top, rgba(214,161,42,0.05), transparent 22rem),
radial-gradient(circle at bottom left, rgba(95,20,28,0.08), transparent 20rem),
linear-gradient(rgba(5,9,10,0.62), rgba(5,9,10,0.74)),
url('/assets/backgrounds/game-table-mobile-v2.webp');
background-size: auto, auto, auto, cover;
background-position: center;
Expand All @@ -40,6 +40,13 @@
}

@layer components {
.brand-wordmark {
filter:
brightness(1.28)
contrast(1.08)
drop-shadow(0 4px 14px rgba(0,0,0,0.92));
}

.btn-primary {
@apply bg-coup-accent text-coup-bg font-bold py-3 px-6 rounded-xl
active:scale-95 transition-all duration-100
Expand Down
2 changes: 1 addition & 1 deletion src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ function HomeContent() {
/>

<div className="max-w-xs sm:max-w-sm lg:max-w-md w-full text-center relative">
<CoupLogo className="w-64 lg:w-72 h-auto mx-auto mb-2" />
<CoupLogo className="brand-wordmark w-64 lg:w-72 h-auto mx-auto mb-2" />
<p className="text-gray-400 mb-1 text-sm">The classic bluffing game</p>
<p className="text-gray-500 text-xs mb-6">
{playersOnline} player{playersOnline !== 1 ? 's' : ''} online · {gamesInProgress} game{gamesInProgress !== 1 ? 's' : ''} in progress
Expand Down
4 changes: 2 additions & 2 deletions src/app/utils/assets.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ export const CHARACTER_CARD_FOCUS_ART: Record<Character, string> = {
[Character.Duke]: '/assets/cards/focus/duke-v3.webp',
[Character.Assassin]: '/assets/cards/focus/assassin-v3.webp',
[Character.Captain]: '/assets/cards/focus/captain-v3.webp',
[Character.Ambassador]: '/assets/cards/focus/ambassador-v3.webp',
[Character.Contessa]: '/assets/cards/focus/contessa-v3.webp',
[Character.Ambassador]: '/assets/cards/focus/ambassador-v4.webp',
[Character.Contessa]: '/assets/cards/focus/contessa-v4.webp',
[Character.Inquisitor]: '/assets/cards/focus/inquisitor-v3.webp',
};

Expand Down