@onnie81/murdoku-spor 1.0.0

package/client/src/art/portraits.jsx

@@ -0,0 +1,197 @@
+// Original flat "art-deco cozy mystery" suspect portraits. All hand-drawn SVG.
+import React from 'react';
+
+export const PERSON_COLORS = {
+  butler: '#6e56cf', chef: '#e5484d', heiress: '#e93d82', colonel: '#46a758',
+  professor: '#0090ff', gardener: '#f76b15', doctor: '#12a594', chauffeur: '#ad7f58',
+  diva: '#cf3897', journalist: '#ffc53d', magician: '#00a2c7', curator: '#bdee63'
+};
+export const DARK_TEXT_KEYS = new Set(['journalist', 'curator']);
+
+const SKIN = {
+  butler: '#f2c9a0', chef: '#f2c9a0', heiress: '#f5d5b5', colonel: '#d9a066',
+  professor: '#a9714b', gardener: '#7c4f33', doctor: '#f2c9a0', chauffeur: '#d9a066',
+  diva: '#a9714b', journalist: '#f5d5b5', magician: '#d9a066', curator: '#f2c9a0'
+};
+const INK = '#241e33';
+const COAT = '#2b2440';
+
+function Base({ k, children }) {
+  const skin = SKIN[k];
+  return (
+    <>
+      {/* shoulders / coat */}
+      <path d="M16,92 Q50,64 84,92 L84,102 L16,102 Z" fill={COAT} />
+      {/* neck + head */}
+      <rect x="43" y="56" width="14" height="16" rx="5" fill={skin} />
+      <ellipse cx="50" cy="45" rx="16.5" ry="18.5" fill={skin} />
+      {/* eyes */}
+      <circle cx="43.5" cy="46" r="1.9" fill={INK} />
+      <circle cx="56.5" cy="46" r="1.9" fill={INK} />
+      {children}
+    </>
+  );
+}
+
+const DETAILS = {
+  butler: (
+    <>
+      <path d="M33.5,42 Q34,26 50,26 Q66,26 66.5,42 Q64,32 50,31.5 Q36,32 33.5,42 Z" fill={INK} />
+      <circle cx="56.5" cy="46" r="5.4" fill="none" stroke="#c9a227" strokeWidth="1.6" />
+      <path d="M61.5,49 Q64,56 61,60" fill="none" stroke="#c9a227" strokeWidth="1.1" />
+      <path d="M40,78 L50,72 L60,78 L50,84 Z" fill="#efe6d0" />
+      <path d="M43,78 L50,74.5 L57,78 L50,81.5 Z" fill={INK} />
+    </>
+  ),
+  chef: (
+    <>
+      <path d="M32,34 Q30,18 40,17 Q42,10 50,11 Q58,10 60,17 Q70,18 68,34 Z" fill="#f4efe2" />
+      <rect x="33" y="32" width="34" height="6" rx="2.5" fill="#e3dbc8" />
+      <path d="M38,76 Q50,68 62,76 L58,82 Q50,76 42,82 Z" fill="#e5484d" />
+    </>
+  ),
+  heiress: (
+    <>
+      <ellipse cx="50" cy="29" rx="27" ry="7.5" fill="#3b2f54" />
+      <path d="M34,29 Q34,15 50,15 Q66,15 66,29 Z" fill="#3b2f54" />
+      <rect x="34" y="24" width="32" height="4.5" rx="2" fill="#e93d82" />
+      <path d="M35,45 Q37,58 44,63 L38,52 Z" fill="#8d4a2f" />
+      <path d="M65,45 Q63,58 56,63 L62,52 Z" fill="#8d4a2f" />
+      {[42, 46.5, 50, 53.5, 58].map((x, i) => (
+        <circle key={i} cx={x} cy={i % 2 ? 73 : 74.6} r="1.9" fill="#f4efe2" />
+      ))}
+    </>
+  ),
+  colonel: (
+    <>
+      <path d="M32,34 Q32,20 50,20 Q68,20 68,34 L68,37 L32,37 Z" fill="#3d4a33" />
+      <path d="M30,37 L70,37 L66,42 L34,42 Z" fill="#2c3625" />
+      <circle cx="50" cy="28" r="3" fill="#c9a227" />
+      <path d="M38,54 Q44,50 50,54 Q56,50 62,54 Q58,60 50,57 Q42,60 38,54 Z" fill="#cbc4d4" />
+      <rect x="18" y="84" width="12" height="4" rx="2" fill="#c9a227" />
+      <rect x="70" y="84" width="12" height="4" rx="2" fill="#c9a227" />
+    </>
+  ),
+  professor: (
+    <>
+      <circle cx="50" cy="20" r="7.5" fill="#5d4037" />
+      <path d="M33.5,42 Q34,26 50,26 Q66,26 66.5,42 Q62,31 50,30.5 Q38,31 33.5,42 Z" fill="#5d4037" />
+      <circle cx="43.5" cy="46" r="5.2" fill="none" stroke={INK} strokeWidth="1.7" />
+      <circle cx="56.5" cy="46" r="5.2" fill="none" stroke={INK} strokeWidth="1.7" />
+      <line x1="48.7" y1="46" x2="51.3" y2="46" stroke={INK} strokeWidth="1.7" />
+      <path d="M42,76 L50,71 L58,76 L50,80 Z" fill="#0090ff" />
+    </>
+  ),
+  gardener: (
+    <>
+      <ellipse cx="50" cy="31" rx="26" ry="6.5" fill="#d9b566" />
+      <path d="M36,31 Q36,17 50,17 Q64,17 64,31 Z" fill="#d9b566" />
+      <path d="M36,29 L64,29 L64,32 L36,32 Z" fill="#8d6b30" />
+      <path d="M38,74 Q50,68 62,74 L60,80 Q50,73 40,80 Z" fill="#f76b15" />
+      <circle cx="50" cy="77" r="2.4" fill="#c14f0e" />
+    </>
+  ),
+  doctor: (
+    <>
+      <path d="M33,48 Q31,26 50,26 Q69,26 67,48 Q66,34 50,33 Q34,34 33,48 Z" fill="#8d4a2f" />
+      <path d="M33,48 Q35,54 40,52 L36,44 Z" fill="#8d4a2f" />
+      <path d="M67,48 Q65,54 60,52 L64,44 Z" fill="#8d4a2f" />
+      <circle cx="44" cy="46.5" r="4.6" fill="none" stroke="#c9a227" strokeWidth="1.5" />
+      <circle cx="56" cy="46.5" r="4.6" fill="none" stroke="#c9a227" strokeWidth="1.5" />
+      <path d="M48.5,46.5 L51.5,46.5" stroke="#c9a227" strokeWidth="1.5" />
+      <path d="M56,51 Q60,58 58,64" stroke="#c9a227" strokeWidth="1.1" fill="none" />
+      <circle cx="50" cy="78" r="3.2" fill="#12a594" />
+    </>
+  ),
+  chauffeur: (
+    <>
+      <path d="M32,33 Q32,20 50,20 Q68,20 68,33 L68,35 L32,35 Z" fill="#41597a" />
+      <path d="M46,35 L74,35 L70,40 L46,38 Z" fill="#31435c" />
+      <circle cx="42" cy="27" r="5" fill="none" stroke="#b8c4d4" strokeWidth="2.2" />
+      <circle cx="55" cy="27" r="5" fill="none" stroke="#b8c4d4" strokeWidth="2.2" />
+      <path d="M40,76 Q50,70 60,76 Q55,80 50,78 Q45,80 40,76 Z" fill="#cbc4d4" />
+    </>
+  ),
+  diva: (
+    <>
+      <path d="M50,22 Q46,8 34,6 Q44,4 52,10 Q50,4 58,2 Q54,8 56,14 Q60,8 68,8 Q58,12 56,22 Z" fill="#cf3897" />
+      <path d="M34,40 Q34,24 50,24 Q66,24 66,40 Q60,29 50,29 Q40,29 34,40 Z" fill={INK} />
+      <rect x="36" y="35" width="28" height="3.6" rx="1.8" fill="#c9a227" />
+      <circle cx="50" cy="36.8" r="2.6" fill="#e93d82" />
+      <path d="M33,46 L33,58 M67,46 L67,58" stroke="#c9a227" strokeWidth="2" />
+      <circle cx="33" cy="60" r="2.4" fill="#c9a227" />
+      <circle cx="67" cy="60" r="2.4" fill="#c9a227" />
+    </>
+  ),
+  journalist: (
+    <>
+      <path d="M31,36 Q31,19 50,19 Q69,19 69,36 L69,38 L31,38 Z" fill="#7a4b2a" />
+      <ellipse cx="50" cy="38" rx="24" ry="4.5" fill="#5d3820" />
+      <rect x="55" y="24" width="9" height="10" rx="1" fill="#efe6d0" transform="rotate(8 59.5 29)" />
+      <path d="M57,27 L62,27 M57,29.5 L62,29.5 M57,32 L60,32" stroke={INK} strokeWidth="0.9" transform="rotate(8 59.5 29)" />
+      <path d="M33,44 Q33,56 40,60 L36,47 Z" fill="#7a4b2a" />
+      <path d="M67,44 Q67,56 60,60 L64,47 Z" fill="#7a4b2a" />
+    </>
+  ),
+  magician: (
+    <>
+      <rect x="36" y="6" width="28" height="22" rx="2" fill={INK} />
+      <rect x="36" y="22" width="28" height="5" fill="#00a2c7" />
+      <ellipse cx="50" cy="29" rx="21" ry="4" fill={INK} />
+      <path d="M40,52 Q44,55 47,52 M53,52 Q56,55 60,52" stroke={INK} strokeWidth="1.6" fill="none" />
+      <path d="M41,77 L50,72 L59,77 L50,82 Z" fill="#00a2c7" />
+    </>
+  ),
+  curator: (
+    <>
+      <path d="M31,33 Q30,18 48,17 Q70,15 67,28 Q60,22 50,24 Q36,26 36,36 Z" fill="#4a3a63" />
+      <circle cx="66" cy="24" r="3" fill="#4a3a63" />
+      <circle cx="43.5" cy="46" r="5" fill="none" stroke={INK} strokeWidth="1.5" />
+      <circle cx="56.5" cy="46" r="5" fill="none" stroke={INK} strokeWidth="1.5" />
+      <path d="M48.5,46 L51.5,46 M38.5,46 L34,44" stroke={INK} strokeWidth="1.5" />
+      <path d="M46,58 Q50,63 54,58 Q52,65 50,65 Q48,65 46,58 Z" fill="#4a3a63" />
+      <path d="M40,77 L60,77 L58,81 L42,81 Z" fill="#bdee63" />
+    </>
+  )
+};
+
+export function Portrait({ k, size = 44, victim = false, className = '', title }) {
+  const color = PERSON_COLORS[k] || '#888';
+  return (
+    <svg
+      viewBox="0 0 100 100" width={size} height={size}
+      className={`portrait ${victim ? 'portrait-victim' : ''} ${className}`}
+      role="img" aria-label={title || k}
+    >
+      <defs>
+        <clipPath id={`pc-${k}`}><circle cx="50" cy="50" r="48" /></clipPath>
+      </defs>
+      <circle cx="50" cy="50" r="48" fill={color} opacity={victim ? 0.45 : 1} />
+      <circle cx="50" cy="50" r="48" fill="#1a1526" opacity="0.18" />
+      <g clipPath={`url(#pc-${k})`} filter={victim ? 'grayscale(0.9)' : undefined}>
+        <Base k={k}>{DETAILS[k]}</Base>
+        {victim && (
+          <g stroke="#241e33" strokeWidth="2" opacity="0.9">
+            <path d="M40.5,44 L46.5,48 M46.5,44 L40.5,48" />
+            <path d="M53.5,44 L59.5,48 M59.5,44 L53.5,48" />
+          </g>
+        )}
+      </g>
+      <circle cx="50" cy="50" r="47" fill="none" stroke="#12101c" strokeWidth="2.5" opacity="0.55" />
+    </svg>
+  );
+}
+
+export function NumberBadge({ n, k, size = 16 }) {
+  const dark = DARK_TEXT_KEYS.has(k);
+  return (
+    <span
+      className="num-badge"
+      style={{
+        width: size, height: size, fontSize: size * 0.62,
+        background: PERSON_COLORS[k] || '#888',
+        color: dark ? '#241e33' : '#fff'
+      }}
+    >{n}</span>
+  );
+}

package/client/src/components/Board.jsx

@@ -0,0 +1,236 @@
+// The crime-scene board: rooms, walls, furniture, people, X marks, pencil
+// marks, legality graying, clue spotlights. Pure SVG, pointer-driven.
+import React, { forwardRef, useImperativeHandle, useRef, useMemo } from 'react';
+import { Portrait, PERSON_COLORS, DARK_TEXT_KEYS } from '../art/portraits.jsx';
+import { ObjectIcon } from '../art/objects.jsx';
+import { roomName } from '../i18n/index.js';
+
+const CS = 100; // cell size in svg units
+const M = 6;    // outer margin
+
+export const ROOM_COLORS = [
+  '#4e4370', '#3e5644', '#5e4141', '#39586e',
+  '#5f5535', '#35594f', '#5d3d5d', '#4d5533'
+];
+
+const NOTE_POS = [
+  [22, 22], [50, 22], [78, 22],
+  [22, 50], [50, 50], [78, 50],
+  [22, 78], [50, 78], [78, 78]
+];
+
+export const Board = forwardRef(function Board(
+  { store, snap, marks = 'numbers', dragTarget = null, onCellPointerDown },
+  ref
+) {
+  const { puzzle, N, objCells } = store;
+  const svgRef = useRef(null);
+  const size = N * CS + M * 2;
+
+  useImperativeHandle(ref, () => ({
+    cellFromPoint(clientX, clientY) {
+      const el = svgRef.current;
+      if (!el) return null;
+      const r = el.getBoundingClientRect();
+      const u = ((clientX - r.left) / r.width) * size - M;
+      const v = ((clientY - r.top) / r.height) * size - M;
+      const c = Math.floor(u / CS), row = Math.floor(v / CS);
+      if (c < 0 || row < 0 || c >= N || row >= N) return null;
+      return row * N + c;
+    },
+    el: () => svgRef.current
+  }), [N, size]);
+
+  const roomOf = useMemo(() => {
+    const arr = new Array(N * N).fill(0);
+    for (const r of puzzle.data.rooms) for (const c of r.cells) arr[c] = r.id;
+    return arr;
+  }, [puzzle, N]);
+
+  const roomAnchor = useMemo(() => {
+    const m = new Map();
+    for (const r of puzzle.data.rooms) m.set(r.id, Math.min(...r.cells));
+    return m;
+  }, [puzzle]);
+
+  const cellOwner = useMemo(() => {
+    const m = new Map();
+    for (const [p, c] of Object.entries(snap.placed)) m.set(c, Number(p));
+    return m;
+  }, [snap.placed]);
+
+  // legality view: which cells gray out for the active person
+  const activePerson = dragTarget != null ? dragTarget : snap.selected;
+  const legalSet = useMemo(
+    () => (activePerson != null && snap.status === 'active' ? store.legalCells(activePerson) : null),
+    [activePerson, snap.placed, snap.xmarks, snap.status] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  const hl = snap.highlight;
+  const hlCells = useMemo(() => new Set(hl?.cells || []), [hl]);
+  const hlRooms = useMemo(() => new Set(hl?.rooms || []), [hl]);
+  const hlPersons = useMemo(() => new Set(hl?.persons || []), [hl]);
+  const xset = useMemo(() => new Set(snap.xmarks), [snap.xmarks]);
+  const wrongSet = useMemo(() => new Set(snap.wrongCells), [snap.wrongCells]);
+
+  const cells = [];
+  for (let cell = 0; cell < N * N; cell++) {
+    const r = Math.floor(cell / N), c = cell % N;
+    const x = M + c * CS, y = M + r * CS;
+    const room = roomOf[cell];
+    cells.push({ cell, r, c, x, y, room });
+  }
+
+  // walls between rooms
+  const walls = [];
+  for (const { cell, r, c, x, y, room } of cells) {
+    if (c < N - 1 && roomOf[cell + 1] !== room) walls.push(<line key={`v${cell}`} x1={x + CS} y1={y - 1} x2={x + CS} y2={y + CS + 1} />);
+    if (r < N - 1 && roomOf[cell + N] !== room) walls.push(<line key={`h${cell}`} x1={x - 1} y1={y + CS} x2={x + CS + 1} y2={y + CS} />);
+  }
+
+  return (
+    <svg
+      ref={svgRef}
+      className="board"
+      viewBox={`0 0 ${size} ${size}`}
+      role="grid"
+      aria-label="crime scene"
+    >
+      {/* room fills */}
+      {cells.map(({ cell, x, y, room }) => (
+        <rect key={cell} x={x} y={y} width={CS} height={CS}
+          fill={ROOM_COLORS[room % ROOM_COLORS.length]}
+          className={hlRooms.has(room) ? 'room-hl' : undefined} />
+      ))}
+      {/* subtle inner grid */}
+      {Array.from({ length: N - 1 }, (_, i) => (
+        <g key={i} stroke="#00000030" strokeWidth="1.5">
+          <line x1={M + (i + 1) * CS} y1={M} x2={M + (i + 1) * CS} y2={size - M} />
+          <line x1={M} y1={M + (i + 1) * CS} x2={size - M} y2={M + (i + 1) * CS} />
+        </g>
+      ))}
+      {/* clue spotlight on cells */}
+      {cells.filter(({ cell }) => hlCells.has(cell)).map(({ cell, x, y }) => (
+        <rect key={`hl${cell}`} x={x + 2} y={y + 2} width={CS - 4} height={CS - 4}
+          className="cell-spot" rx="8" />
+      ))}
+      {/* walls */}
+      <g stroke="#161022" strokeWidth="6" strokeLinecap="square">{walls}</g>
+      <rect x={M} y={M} width={N * CS} height={N * CS} fill="none" stroke="#161022" strokeWidth="10" rx="4" />
+
+      {/* room labels */}
+      {puzzle.data.rooms.map(room => {
+        const anchor = roomAnchor.get(room.id);
+        const r = Math.floor(anchor / N), c = anchor % N;
+        return (
+          <text key={room.id} x={M + c * CS + 8} y={M + r * CS + 20}
+            className="room-label">{roomName(puzzle, room.id, 'n').toUpperCase()}</text>
+        );
+      })}
+
+      {/* objects */}
+      {puzzle.data.objects.map(o => {
+        const r = Math.floor(o.cell / N), c = o.cell % N;
+        return (
+          <g key={o.id} className="obj" transform={`translate(${M + c * CS + 14},${M + r * CS + 16})`}>
+            <ObjectIcon type={o.type} size={72} />
+          </g>
+        );
+      })}
+
+      {/* X marks */}
+      {snap.xmarks.map(cell => {
+        const r = Math.floor(cell / N), c = cell % N;
+        const x = M + c * CS, y = M + r * CS;
+        return (
+          <g key={`x${cell}`} className="xmark" strokeLinecap="round">
+            <line x1={x + 30} y1={y + 30} x2={x + 70} y2={y + 70} />
+            <line x1={x + 70} y1={y + 30} x2={x + 30} y2={y + 70} />
+          </g>
+        );
+      })}
+
+      {/* pencil marks */}
+      {Object.entries(snap.notes).map(([cellStr, list]) => {
+        const cell = Number(cellStr);
+        const r = Math.floor(cell / N), c = cell % N;
+        const x = M + c * CS, y = M + r * CS;
+        return (
+          <g key={`n${cell}`}>
+            {list.slice(0, 9).map((p, i) => {
+              const [nx, ny] = NOTE_POS[i];
+              const k = puzzle.data.cast[p]?.key;
+              if (marks === 'faces') {
+                return (
+                  <g key={p} transform={`translate(${x + nx - 13},${y + ny - 13})`} opacity="0.92">
+                    <Portrait k={k} size={26} victim={p === puzzle.data.victim} />
+                  </g>
+                );
+              }
+              return (
+                <g key={p}>
+                  <circle cx={x + nx} cy={y + ny} r="12.5" fill={PERSON_COLORS[k]} opacity="0.92" />
+                  <text x={x + nx} y={y + ny + 5.2} textAnchor="middle" className="note-num"
+                    fill={DARK_TEXT_KEYS.has(k) ? '#241e33' : '#fff'}>{p + 1}</text>
+                </g>
+              );
+            })}
+          </g>
+        );
+      })}
+
+      {/* placed persons */}
+      {[...cellOwner.entries()].map(([cell, p]) => {
+        const r = Math.floor(cell / N), c = cell % N;
+        const x = M + c * CS, y = M + r * CS;
+        const k = puzzle.data.cast[p]?.key;
+        const isVictim = p === puzzle.data.victim;
+        const selected = snap.selected === p;
+        const wrong = wrongSet.has(cell);
+        const spotted = hlPersons.has(p);
+        return (
+          <g key={`p${p}`} className={`piece${selected ? ' piece-sel' : ''}${dragTarget === p ? ' piece-drag' : ''}`}>
+            {(selected || spotted) && (
+              <circle cx={x + 50} cy={y + 50} r="45" className={spotted && !selected ? 'ring-spot' : 'ring-sel'} />
+            )}
+            {wrong && <circle cx={x + 50} cy={y + 50} r="44" className="ring-wrong" />}
+            <g transform={`translate(${x + 11},${y + 11})`}>
+              <Portrait k={k} size={78} victim={isVictim} />
+            </g>
+            <circle cx={x + 82} cy={y + 20} r="13" fill={isVictim ? '#8d1d2c' : PERSON_COLORS[k]} stroke="#161022" strokeWidth="2" />
+            <text x={x + 82} y={y + 25.5} textAnchor="middle" className="piece-num"
+              fill={!isVictim && DARK_TEXT_KEYS.has(k) ? '#241e33' : '#fff'}>
+              {isVictim ? 'V' : p + 1}
+            </text>
+          </g>
+        );
+      })}
+
+      {/* graying of non-allowed positions for the active person */}
+      {legalSet && cells.map(({ cell, x, y }) => {
+        if (legalSet.has(cell)) return null;
+        if (cellOwner.get(cell) === activePerson) return null;
+        return <rect key={`g${cell}`} x={x} y={y} width={CS} height={CS} className="cell-gray" />;
+      })}
+      {/* legal glow */}
+      {legalSet && cells.filter(({ cell }) => legalSet.has(cell)).map(({ cell, x, y }) => (
+        <rect key={`l${cell}`} x={x + 3} y={y + 3} width={CS - 6} height={CS - 6}
+          rx="10" className="cell-legal" />
+      ))}
+      {/* illegal tap flash */}
+      {snap.flashCell != null && (() => {
+        const r = Math.floor(snap.flashCell / N), c = snap.flashCell % N;
+        return <rect x={M + c * CS + 3} y={M + r * CS + 3} width={CS - 6} height={CS - 6}
+          rx="10" className="cell-flash" />;
+      })()}
+
+      {/* hit layer */}
+      {cells.map(({ cell, x, y }) => (
+        <rect key={`t${cell}`} x={x} y={y} width={CS} height={CS} fill="transparent"
+          style={{ cursor: 'pointer' }}
+          onPointerDown={(e) => onCellPointerDown?.(cell, e)}
+          onContextMenu={(e) => { e.preventDefault(); store.actions.toggleX(cell); }} />
+      ))}
+    </svg>
+  );
+});

package/client/src/components/CluePanel.jsx

@@ -0,0 +1,43 @@
+// Testimony list: tap to spotlight on the board, tap the badge to cross off.
+import React from 'react';
+import { Portrait } from '../art/portraits.jsx';
+import { clueText, t } from '../i18n/index.js';
+
+export function CluePanel({ store, snap }) {
+  const { puzzle } = store;
+  return (
+    <div className="clue-panel">
+      <div className="clue-head">
+        <h3>{t('clues')}</h3>
+        <span className="clue-hint">{t('clueTapHint')}</span>
+      </div>
+      <ul className="clue-list">
+        {puzzle.data.clues.map(clue => {
+          const struck = snap.struck.includes(clue.id);
+          const active = snap.highlight?.clueId === clue.id;
+          const subjects = [clue.s, clue.t].filter(v => v != null);
+          return (
+            <li key={clue.id}
+              className={`clue${struck ? ' clue-struck' : ''}${active ? ' clue-active' : ''}`}>
+              <button
+                className="clue-check"
+                aria-label="strike"
+                onClick={(e) => { e.stopPropagation(); store.actions.strike(clue.id); }}
+              >{struck ? '✓' : ''}</button>
+              <button className="clue-body" onClick={() => store.actions.highlightClue(clue)}>
+                <span className="clue-faces">
+                  {subjects.length
+                    ? subjects.map(p => (
+                      <Portrait key={p} k={puzzle.data.cast[p]?.key} size={26} />
+                    ))
+                    : <span className="clue-glass">🔍</span>}
+                </span>
+                <span className="clue-text">{clueText(clue, puzzle)}</span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/client/src/components/DailyView.jsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { api } from '../api.js';
+import { useApp, navigate, toast } from '../store.js';
+import { t, fmtTime, fmtDate } from '../i18n/index.js';
+
+export function DailyView() {
+  const app = useApp();
+  const [date, setDate] = useState(null);
+  const [daily, setDaily] = useState(null);
+  const [board, setBoard] = useState(null); // {difficulty, scope, data}
+
+  const load = (d) => {
+    api.daily(d).then(res => {
+      setDaily(res);
+      setDate(res.date);
+    }).catch(() => toast(t('errGeneric')));
+  };
+  useEffect(() => { load(); }, []);
+
+  const openBoard = async (difficulty, scope) => {
+    try {
+      const data = await api.leaderboard(date, difficulty, scope);
+      setBoard({ difficulty, scope, data });
+    } catch (e) {
+      toast(e.code === 'login_required' ? t('friendsLoginNote') : t('errGeneric'));
+    }
+  };
+
+  const play = async (difficulty) => {
+    try {
+      const res = await api.newGame('daily', difficulty, date);
+      navigate(`#/play/${res.game.id}`);
+    } catch { toast(t('errGeneric')); }
+  };
+
+  if (!daily) return <div className="view-pad loading">{t('loading')}</div>;
+
+  return (
+    <div className="view">
+      <div className="card-head view-head">
+        <h1>{t('dailyTitle')}</h1>
+        <p className="muted">{t('dailySub')}</p>
+      </div>
+
+      <div className="card">
+        <div className="archive-row">
+          <label className="muted" htmlFor="daily-date">{t('archive')}:</label>
+          <input
+            id="daily-date" type="date" value={date || ''}
+            max={daily.today}
+            onChange={e => { if (e.target.value) load(e.target.value); }}
+          />
+          {date !== daily.today && (
+            <button className="link-btn" onClick={() => load(daily.today)}>{t('todayIs')} →</button>
+          )}
+        </div>
+      </div>
+
+      {daily.tiers.map(tier => (
+        <div key={tier.difficulty} className="card daily-tier">
+          <div className="daily-tier-row">
+            <div className="daily-tier-info">
+              <b>{t(tier.difficulty)}</b>
+              <span className="muted"> · {tier.size}×{tier.size} · {t('playersSolved', { n: tier.solvedCount })}</span>
+            </div>
+            <div className="daily-tier-actions">
+              {tier.status === 'won'
+                ? <span className="won-chip">✓ {fmtTime(tier.timeMs)}</span>
+                : <button className="btn btn-sm btn-gold" onClick={() => play(tier.difficulty)}>
+                  {tier.status === 'active' ? t('resume') : t('play')}
+                </button>}
+              <button className="btn btn-sm" onClick={() => openBoard(tier.difficulty, 'global')}>
+                {t('leaderboard')}
+              </button>
+            </div>
+          </div>
+
+          {board && board.difficulty === tier.difficulty && (
+            <div className="lb">
+              <div className="lb-tabs">
+                <button className={board.scope === 'global' ? 'on' : ''}
+                  onClick={() => openBoard(tier.difficulty, 'global')}>{t('global')}</button>
+                <button className={board.scope === 'friends' ? 'on' : ''}
+                  onClick={() => openBoard(tier.difficulty, 'friends')}>{t('friendsScope')}</button>
+              </div>
+              {board.data.rows.length === 0
+                ? <p className="muted">{t('noResults')}</p>
+                : (
+                  <table className="lb-table">
+                    <tbody>
+                      {board.data.rows.map(r => (
+                        <tr key={r.rank} className={app.me && r.username === app.me.username ? 'lb-me' : ''}>
+                          <td className="lb-rank">#{r.rank}</td>
+                          <td>{r.username}</td>
+                          <td className="lb-time">{fmtTime(r.timeMs)}</td>
+                          <td className="lb-mist">✗{r.mistakes}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                )}
+              {board.data.me && (
+                <p className="muted lb-mine">
+                  {t('yourTime')}: {fmtTime(board.data.me.timeMs)}
+                  {board.data.me.rank ? ` · #${board.data.me.rank}` : ` (${t('unranked')})`}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}