Link previews and a wizard in the tab

Sharing the game's URL now unfurls a proper card: Open Graph and
Twitter meta tags with a 1200x630 preview composed from the physical
set's own counter art — WIZ-WAR in tall caps over the parchment, the
tagline in script, a row of wizard, troll, and treasure tokens, and
the fan-project line beneath. The favicon becomes the purple wizard
in his black hat, cropped from the counter sheet; the your-turn
variant wears a red badge, replacing the old lettered SVGs.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
2026-08-16 11:28:22 -04:00
co-authored by Claude Fable 5
parent da4ab03135
commit ced4dc5749
8 changed files with 23 additions and 8 deletions
+3 -8
View File
@@ -630,14 +630,9 @@
view.outOfTurnWindow?.playerId === view.you)) ||
net.games.some((g) => g.yourTurn && g.roomId !== net.roomId),
);
const FAVICON_IDLE =
"data:image/svg+xml," + encodeURIComponent(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="%23171a20"/><text x="16" y="23" font-family="Georgia" font-size="19" font-weight="bold" fill="%23e9e1cb" text-anchor="middle">W</text></svg>`.replaceAll("%23", "#"),
);
const FAVICON_TURN =
"data:image/svg+xml," + encodeURIComponent(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="%23171a20"/><text x="16" y="23" font-family="Georgia" font-size="19" font-weight="bold" fill="%23e9e1cb" text-anchor="middle">W</text><circle cx="25" cy="7" r="6" fill="%232e7d32"/></svg>`.replaceAll("%23", "#"),
);
// The purple wizard from the physical counter sheet; a red badge marks your turn.
const FAVICON_IDLE = "/favicon.png";
const FAVICON_TURN = "/favicon-turn.png";
$effect(() => {
document.title = anyTurnWaiting ? "● Your turn — Wiz-War" : "Wiz-War";
let link = document.querySelector('link[rel="icon"]') as HTMLLinkElement | null;