token-larper 1.0.0 → 1.6.1

package/src/client/lib/shareCard.ts

@@ -1,3 +1,4 @@
+import { logoPaths } from "../logoMark.ts";
 import { formatCompactNumber, formatCurrency } from "../utils.ts";
 import { formatSpan } from "./range.ts";
 import { lastDefeated, nextRival, rankFor, TIERS, type LifetimeStats } from "./rank.ts";
@@ -94,12 +95,7 @@ export function shareCardSvg(stats: LifetimeStats, opts: CardOptions, c: CardCol
 
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${CARD_W}" height="${CARD_H}" viewBox="0 0 ${CARD_W} ${CARD_H}" font-family="${FONT}">
 <rect width="${CARD_W}" height="${CARD_H}" fill="${c.bg}"/>
-<g transform="translate(80 64) scale(0.875)">
-<rect x="3" y="3" width="58" height="58" rx="14" fill="${c.accent}"/>
-<path d="M20 12h8v31.5c0 1.7.8 2.5 2.5 2.5H35v7h-6.5C22.8 53 20 50.2 20 44.5z" fill="${c.accentInk}"/>
-<rect x="13" y="21" width="22" height="7" fill="${c.accentInk}"/>
-<circle cx="45" cy="47.5" r="5.5" fill="${c.gold}"/>
-</g>
+<g transform="translate(80 64) scale(0.875)">${logoPaths(c.text)}</g>
 <text x="148" y="104" font-size="28" font-weight="700" fill="${c.text}">Token Larper</text>
 <text x="${CARD_W - 80}" y="104" font-size="20" fill="${c.text3}" text-anchor="end">${esc(since)}</text>
 <text x="80" y="196" font-size="22" font-weight="700" letter-spacing="3" fill="${c.gold}">LARP RANK · LEVEL ${rank.tier.level} OF ${TIERS.length}</text>

package/src/client/lib/trayTheme.ts

@@ -0,0 +1,71 @@
+// Keeps the Windows tray popup in the same colors as the dashboard. Themes can use any CSS
+// color syntax (oklch, color-mix, …), which the tray can't parse, so each token is painted
+// onto a 1×1 canvas and read back as #rrggbb.
+
+const TOKENS = {
+  surface: "--surface",
+  text: "--text",
+  text2: "--text-2",
+  text3: "--text-3",
+  border: "--border",
+  accent: "--accent",
+  accentInk: "--accent-ink",
+  gold: "--gold",
+} as const;
+
+function toHex(color: string, ctx: CanvasRenderingContext2D): string {
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = "#000";
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, 1, 1);
+  const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+  return `#${[r, g, b].map((v) => (v ?? 0).toString(16).padStart(2, "0")).join("")}`;
+}
+
+function readTheme(): Record<string, string> | null {
+  const ctx = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+  if (!ctx) return null;
+  // A probe element resolves var() chains and color-mix() to a computed color.
+  const probe = document.createElement("span");
+  probe.style.display = "none";
+  document.body.appendChild(probe);
+  const out: Record<string, string> = { mode: document.documentElement.dataset.theme === "light" ? "light" : "dark" };
+  for (const [key, token] of Object.entries(TOKENS)) {
+    probe.style.color = `var(${token})`;
+    out[key] = toHex(getComputedStyle(probe).color, ctx);
+  }
+  probe.remove();
+  return out;
+}
+
+export function startTrayThemeSync(): () => void {
+  let last = "";
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const send = () => {
+    const theme = readTheme();
+    if (!theme) return;
+    const body = JSON.stringify(theme);
+    if (body === last) return;
+    last = body;
+    void fetch("/api/ui-theme", { method: "POST", headers: { "Content-Type": "application/json" }, body }).catch(() => {
+      last = ""; // Retry on the next change if the server was briefly unavailable.
+    });
+  };
+  const schedule = () => {
+    clearTimeout(timer);
+    timer = setTimeout(send, 250);
+  };
+
+  const observer = new MutationObserver(schedule);
+  // data-palette is today's theme switch; data-style and data-accent come with style presets.
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme", "data-palette", "data-style", "data-accent", "style", "class"],
+  });
+  schedule();
+  return () => {
+    observer.disconnect();
+    clearTimeout(timer);
+  };
+}

package/src/client/lib/updates.ts

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { UpdateStatus } from "../../types.ts";
+
+export const RELEASES_URL = "https://github.com/YarooqH/token-larper/releases";
+export const UPDATE_COMMAND = "bunx token-larper@latest";
+
+export type UpdatePhase = "idle" | "updating" | "failed";
+
+export interface Updates {
+  status: UpdateStatus | null;
+  checking: boolean;
+  phase: UpdatePhase;
+  error: string | null;
+  check: (force?: boolean) => Promise<void>;
+  update: () => Promise<void>;
+}
+
+async function readVersion(query: string): Promise<UpdateStatus> {
+  const res = await fetch(`/api/version${query}`);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return (await res.json()) as UpdateStatus;
+}
+
+// The new version downloads, then replaces this server. Give a slow connection time.
+const UPDATE_TIMEOUT_MS = 3 * 60 * 1000;
+
+export function useUpdates(autoCheck: boolean): Updates {
+  const [status, setStatus] = useState<UpdateStatus | null>(null);
+  const [checking, setChecking] = useState(false);
+  const [phase, setPhase] = useState<UpdatePhase>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const polling = useRef<number | null>(null);
+
+  const check = useCallback(async (force = false) => {
+    setChecking(true);
+    setError(null);
+    try {
+      const next = await readVersion(`?check=1${force ? "&force=1" : ""}`);
+      setStatus(next);
+      if (next.error) setError(`Couldn't check for updates: ${next.error}`);
+    } catch (e) {
+      setError(`Couldn't check for updates: ${e instanceof Error ? e.message : "unknown error"}`);
+    } finally {
+      setChecking(false);
+    }
+  }, []);
+
+  // Without automatic checks, only the installed version is read; nothing leaves the machine.
+  useEffect(() => {
+    if (autoCheck) void check();
+    else readVersion("").then(setStatus).catch(() => {});
+  }, [autoCheck, check]);
+
+  useEffect(() => () => {
+    if (polling.current !== null) window.clearInterval(polling.current);
+  }, []);
+
+  const update = useCallback(async () => {
+    const from = status?.current;
+    setPhase("updating");
+    setError(null);
+    try {
+      const res = await fetch("/api/update", { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" });
+      if (!res.ok) {
+        const body = (await res.json().catch(() => ({}))) as { error?: string };
+        throw new Error(body.error || `HTTP ${res.status}`);
+      }
+    } catch (e) {
+      setPhase("failed");
+      setError(e instanceof Error ? e.message : "Could not start the update");
+      return;
+    }
+
+    // While the servers swap, requests fail; keep asking until a different version answers.
+    const started = Date.now();
+    polling.current = window.setInterval(async () => {
+      if (Date.now() - started > UPDATE_TIMEOUT_MS) {
+        window.clearInterval(polling.current!);
+        polling.current = null;
+        setPhase("failed");
+        setError(`The update didn't finish. Run ${UPDATE_COMMAND} in a terminal to update.`);
+        return;
+      }
+      try {
+        const next = await readVersion("");
+        if (next.current !== from) location.reload();
+      } catch {
+        // The old server has stopped and the new one isn't up yet.
+      }
+    }, 1500);
+  }, [status?.current]);
+
+  return { status, checking, phase, error, check, update };
+}

package/src/client/logoMark.ts

@@ -0,0 +1,103 @@
+// The Burning t.: one-color logo on a transparent background. Every surface draws it
+// from these paths (the dashboard inline, the favicon SVG, the share card, and the tray
+// icon via flattenPath), so they can't drift apart. 64×64 units.
+
+export const LOGO_VIEWBOX = "0 0 64 64";
+
+export const LOGO_PATHS = {
+  t: "M20 7h10v12h13v10H30v14c0 2 1 3 3 3h4v10h-6c-7 0-11-4-11-11V29H10V19h10z",
+  // The flame and its hollow core are one even-odd shape.
+  flame:
+    "M50 34c1 5 8 8 8 15c0 4.418-3.582 8-8 8c-4.418 0-8-3.582-8-8c0-4 2-6.5 4-8.5c.3 2.6 1.4 4.3 3.2 5c-1.2-4.6-.2-8.3.8-11.5z" +
+    "M50 44.5c.5 2 3 3.5 3 6c0 1.657-1.343 3-3 3c-1.657 0-3-1.343-3-3c0-1.8 1.5-3.5 3-6z",
+};
+
+/** The logo as SVG markup in one fill color. */
+export function logoPaths(fill: string): string {
+  return `<path d="${LOGO_PATHS.t}" fill="${fill}"/><path d="${LOGO_PATHS.flame}" fill="${fill}" fill-rule="evenodd"/>`;
+}
+
+/**
+ * A standalone SVG file. The favicon has no page theme to read, so it follows the OS:
+ * black on light, white on dark.
+ */
+export function logoSvgFile(): string {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${LOGO_VIEWBOX}" role="img" aria-labelledby="title">
+  <title id="title">Token Larper</title>
+  <style>path { fill: #141414 } @media (prefers-color-scheme: dark) { path { fill: #f5f5f5 } }</style>
+  <path d="${LOGO_PATHS.t}"/>
+  <path d="${LOGO_PATHS.flame}" fill-rule="evenodd"/>
+</svg>
+`;
+}
+
+/**
+ * Flatten an SVG path (M, L, H, V, C and Z, absolute or relative) into polygons of
+ * [x, y] points, sampling each cubic curve. The tray draws these with GDI+, which has
+ * no SVG parser; filling them even-odd reproduces the flame's hollow core.
+ */
+export function flattenPath(d: string, curveSteps = 10): [number, number][][] {
+  const tokens = d.match(/[a-zA-Z]|-?(?:\d+\.?\d*|\.\d+)(?:e-?\d+)?/g) ?? [];
+  const polygons: [number, number][][] = [];
+  let current: [number, number][] = [];
+  let x = 0;
+  let y = 0;
+  let startX = 0;
+  let startY = 0;
+  let command = "";
+  let i = 0;
+  const num = () => Number(tokens[i++]);
+  const isCommand = (t: string | undefined) => t !== undefined && /[a-zA-Z]/.test(t);
+
+  while (i < tokens.length) {
+    if (isCommand(tokens[i])) command = tokens[i++]!;
+    const rel = command === command.toLowerCase();
+    switch (command.toUpperCase()) {
+      case "M": {
+        if (current.length) polygons.push(current);
+        x = (rel ? x : 0) + num();
+        y = (rel ? y : 0) + num();
+        [startX, startY] = [x, y];
+        current = [[x, y]];
+        command = rel ? "l" : "L"; // Further pairs after M are line-tos.
+        break;
+      }
+      case "L":
+        x = (rel ? x : 0) + num();
+        y = (rel ? y : 0) + num();
+        current.push([x, y]);
+        break;
+      case "H":
+        x = (rel ? x : 0) + num();
+        current.push([x, y]);
+        break;
+      case "V":
+        y = (rel ? y : 0) + num();
+        current.push([x, y]);
+        break;
+      case "C": {
+        const [ox, oy] = rel ? [x, y] : [0, 0];
+        const x1 = ox + num(), y1 = oy + num(), x2 = ox + num(), y2 = oy + num(), ex = ox + num(), ey = oy + num();
+        for (let s = 1; s <= curveSteps; s++) {
+          const t = s / curveSteps;
+          const u = 1 - t;
+          current.push([
+            u * u * u * x + 3 * u * u * t * x1 + 3 * u * t * t * x2 + t * t * t * ex,
+            u * u * u * y + 3 * u * u * t * y1 + 3 * u * t * t * y2 + t * t * t * ey,
+          ]);
+        }
+        [x, y] = [ex, ey];
+        break;
+      }
+      case "Z":
+        [x, y] = [startX, startY];
+        if (current.length) polygons.push(current);
+        current = [];
+        break;
+      default:
+        throw new Error(`Unsupported path command "${command}" in logo path`);
+    }
+  }
+  if (current.length) polygons.push(current);
+  return polygons;
+}

package/src/client/main.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App.tsx";
+import { startTrayThemeSync } from "./lib/trayTheme.ts";
+
+startTrayThemeSync();
 
 const rootEl = document.getElementById("root");
 if (rootEl) {