timandClaude Sonnet 5
2c2f07c2ec
Frontend: - Dark green/gold "velvet table" visual redesign across the whole app (Auth, Lobby, GameList, GameTable, History, GameOver, modals), with Playfair Display/DM Sans typography and a centralized Tailwind palette. - Desktop game table fit-scales to fill the window; mobile gets overlapping hand/trick layouts and larger touch-friendly cards. - Standings sidebar now groups completed rounds by series with a per-series subtotal row, struck-through tips on missed bids. - History page rewritten into a scoreboard-style detail view (player totals beside names, series grouped 2-up on desktop / stacked on mobile) and gained game names, completed/abandoned status, and a button to reopen a prematurely-ended game back into the lobby. Backend: - Fix started games being deleted from memory (and vanishing from everyone's lobby) when all players disconnect; only `end_game` tears down a started game now. - Fix a crash writing a timezone-aware datetime into the naive `ended_at` Postgres column. - Add `reopen_game`/`restore_game` to un-end a prematurely-ended game from history and resume it from the lobby. - Let any seated player end an abandoned game once the host is offline, not just the host, so the game isn't stuck forever. - Expose SERIES_PER_GAME/ROUNDS_PER_SERIES as named constants on the engine so the persistence layer derives game-completion rules from bridzik.py instead of re-encoding them. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import { useLayoutEffect, useRef, useState } from 'react';
|
|
|
|
/**
|
|
* Zooms the desktop board to fill the whole window. The board is a canvas of
|
|
* fixed height (`designHeight`) whose width is computed to span the viewport,
|
|
* and the scale is driven by height — so everything (cards, circles, text,
|
|
* header) grows and shrinks together while the felt always uses the full width.
|
|
*
|
|
* Returns the container ref (the viewport), the `scale` for `transform`, and
|
|
* `contentWidth` — the pre-scale canvas width (`viewportWidth / scale`) so that
|
|
* after scaling it exactly fills the viewport width.
|
|
*
|
|
* `deps` should change when the layout swaps (mobile↔desktop) so the observer
|
|
* re-attaches to the freshly rendered element.
|
|
*/
|
|
export function useFitScale(deps: unknown[] = [], designHeight = 860, maxScale = 2.6) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [box, setBox] = useState({ scale: 1, contentWidth: 1280 });
|
|
|
|
useLayoutEffect(() => {
|
|
const el = containerRef.current;
|
|
if (!el) return;
|
|
|
|
const measure = () => {
|
|
const availW = el.clientWidth;
|
|
const availH = el.clientHeight;
|
|
if (!availW || !availH) return;
|
|
const scale = Math.min(maxScale, availH / designHeight);
|
|
const contentWidth = availW / scale;
|
|
setBox((prev) =>
|
|
Math.abs(prev.scale - scale) > 0.004 || Math.abs(prev.contentWidth - contentWidth) > 1
|
|
? { scale, contentWidth }
|
|
: prev,
|
|
);
|
|
};
|
|
|
|
measure();
|
|
const ro = new ResizeObserver(measure);
|
|
ro.observe(el);
|
|
return () => ro.disconnect();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, deps);
|
|
|
|
return { containerRef, scale: box.scale, contentWidth: box.contentWidth };
|
|
}
|