@freegamestore/games 0.20.0 → 0.20.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/GameTopbar.d.ts.map +1 -1
- package/dist/GameTopbar.js +2 -2
- package/dist/GameTopbar.js.map +1 -1
- package/dist/GameTopbar.styles.d.ts +15 -0
- package/dist/GameTopbar.styles.d.ts.map +1 -0
- package/dist/{GameTopbar.module.css → GameTopbar.styles.js} +78 -42
- package/dist/GameTopbar.styles.js.map +1 -0
- package/package.json +3 -3
package/dist/GameTopbar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GameTopbar.d.ts","sourceRoot":"","sources":["../src/GameTopbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,cAAc;IAC7B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAkED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,SAAiB,EACjB,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"GameTopbar.d.ts","sourceRoot":"","sources":["../src/GameTopbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,cAAc;IAC7B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAkED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,SAAiB,EACjB,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiLrC"}
|
package/dist/GameTopbar.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useEffect, useRef, useState } from 'react';
|
|
3
|
-
import styles from './GameTopbar.
|
|
3
|
+
import { styles, TOPBAR_CSS } from './GameTopbar.styles.js';
|
|
4
4
|
import { useSound } from './SoundContext.js';
|
|
5
5
|
/**
|
|
6
6
|
* Shared icon button for topbar controls. All buttons in the topbar (catalog,
|
|
@@ -35,7 +35,7 @@ export function GameTopbar({ title, score, showScore = false, stats, actions, ru
|
|
|
35
35
|
const sound = useSound();
|
|
36
36
|
const scorePill = showScore && score !== undefined ? [{ label: 'Score', value: score, accent: true }] : [];
|
|
37
37
|
const resolvedStats = [...scorePill, ...(stats ?? [])];
|
|
38
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.bar, children: [_jsxs("div", { className: `${styles.group} ${styles.groupStart}`, children: [_jsx(TopbarIconButton, { href: "https://freegamestore.online", target: "_blank", rel: "noopener noreferrer", ariaLabel: "Browse all games", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "2", y: "2", width: "5", height: "5", rx: "1" }), _jsx("rect", { x: "9", y: "2", width: "5", height: "5", rx: "1" }), _jsx("rect", { x: "2", y: "9", width: "5", height: "5", rx: "1" }), _jsx("rect", { x: "9", y: "9", width: "5", height: "5", rx: "1" })] }) }), rules !== undefined && (_jsx(TopbarIconButton, { onClick: () => setShowRules(true), ariaLabel: "Game rules", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 11.5v0M8 5v4" })] }) })), title !== undefined && _jsx("span", { className: styles.title, children: title })] }), _jsxs("div", { className: `${styles.group} ${styles.groupEnd}`, children: [resolvedStats.length > 0 && (_jsx("div", { className: styles.stats, children: resolvedStats.map((s) => (_jsx(Stat, { stat: s }, s.label))) })), onPlayPause !== undefined && (_jsx(TopbarIconButton, { onClick: onPlayPause, tone: "ink", ariaLabel: "Pause", ariaPressed: paused === true, children: paused ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M4 2l10 6-10 6V2z" }) })) : (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: [_jsx("rect", { x: "2", y: "2", width: "4", height: "12", rx: "1" }), _jsx("rect", { x: "10", y: "2", width: "4", height: "12", rx: "1" })] })) })), onRestart !== undefined && (_jsx(TopbarIconButton, { onClick: onRestart, ariaLabel: "Restart", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M2 8a6 6 0 0111.5-2.5" }), _jsx("path", { d: "M14 8a6 6 0 01-11.5 2.5" }), _jsx("path", { d: "M14 2v3.5h-3.5" }), _jsx("path", { d: "M2 14v-3.5h3.5" })] }) })), _jsx(TopbarIconButton, { onClick: () => setShowAbout(true), ariaLabel: "About this game", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 7.25v3.5" }), _jsx("path", { d: "M8 5.15v0" })] }) }), _jsx(TopbarIconButton, { onClick: sound.toggle, tone: sound.muted ? 'muted' : 'accent', ariaLabel: "Mute", ariaPressed: sound.muted, children: sound.muted ? (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M8 2L4 5.5H1.5v5H4L8 14V2z" }), _jsx("path", { d: "M12 5.5l4 5M16 5.5l-4 5" })] })) : (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M8 2L4 5.5H1.5v5H4L8 14V2z" }), _jsx("path", { d: "M11.5 5a4.5 4.5 0 010 6" }), _jsx("path", { d: "M13.5 3a7.5 7.5 0 010 10" })] })) }), actions !== undefined && _jsx("div", { className: styles.actions, children: actions })] })] }), showRules && rules !== undefined && (_jsx(RulesOverlay, { onClose: () => setShowRules(false), children: rules })), showAbout && (_jsx(AboutOverlay, { title: title, extra: about, onClose: () => setShowAbout(false) }))] }));
|
|
38
|
+
return (_jsxs(_Fragment, { children: [_jsx("style", { href: "fgs-topbar", precedence: "fgs", children: TOPBAR_CSS }), _jsxs("div", { className: styles.bar, children: [_jsxs("div", { className: `${styles.group} ${styles.groupStart}`, children: [_jsx(TopbarIconButton, { href: "https://freegamestore.online", target: "_blank", rel: "noopener noreferrer", ariaLabel: "Browse all games", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "2", y: "2", width: "5", height: "5", rx: "1" }), _jsx("rect", { x: "9", y: "2", width: "5", height: "5", rx: "1" }), _jsx("rect", { x: "2", y: "9", width: "5", height: "5", rx: "1" }), _jsx("rect", { x: "9", y: "9", width: "5", height: "5", rx: "1" })] }) }), rules !== undefined && (_jsx(TopbarIconButton, { onClick: () => setShowRules(true), ariaLabel: "Game rules", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 11.5v0M8 5v4" })] }) })), title !== undefined && _jsx("span", { className: styles.title, children: title })] }), _jsxs("div", { className: `${styles.group} ${styles.groupEnd}`, children: [resolvedStats.length > 0 && (_jsx("div", { className: styles.stats, children: resolvedStats.map((s) => (_jsx(Stat, { stat: s }, s.label))) })), onPlayPause !== undefined && (_jsx(TopbarIconButton, { onClick: onPlayPause, tone: "ink", ariaLabel: "Pause", ariaPressed: paused === true, children: paused ? (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M4 2l10 6-10 6V2z" }) })) : (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: [_jsx("rect", { x: "2", y: "2", width: "4", height: "12", rx: "1" }), _jsx("rect", { x: "10", y: "2", width: "4", height: "12", rx: "1" })] })) })), onRestart !== undefined && (_jsx(TopbarIconButton, { onClick: onRestart, ariaLabel: "Restart", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M2 8a6 6 0 0111.5-2.5" }), _jsx("path", { d: "M14 8a6 6 0 01-11.5 2.5" }), _jsx("path", { d: "M14 2v3.5h-3.5" }), _jsx("path", { d: "M2 14v-3.5h3.5" })] }) })), _jsx(TopbarIconButton, { onClick: () => setShowAbout(true), ariaLabel: "About this game", children: _jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M8 7.25v3.5" }), _jsx("path", { d: "M8 5.15v0" })] }) }), _jsx(TopbarIconButton, { onClick: sound.toggle, tone: sound.muted ? 'muted' : 'accent', ariaLabel: "Mute", ariaPressed: sound.muted, children: sound.muted ? (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M8 2L4 5.5H1.5v5H4L8 14V2z" }), _jsx("path", { d: "M12 5.5l4 5M16 5.5l-4 5" })] })) : (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M8 2L4 5.5H1.5v5H4L8 14V2z" }), _jsx("path", { d: "M11.5 5a4.5 4.5 0 010 6" }), _jsx("path", { d: "M13.5 3a7.5 7.5 0 010 10" })] })) }), actions !== undefined && _jsx("div", { className: styles.actions, children: actions })] })] }), showRules && rules !== undefined && (_jsx(RulesOverlay, { onClose: () => setShowRules(false), children: rules })), showAbout && (_jsx(AboutOverlay, { title: title, extra: about, onClose: () => setShowAbout(false) }))] }));
|
|
39
39
|
}
|
|
40
40
|
/** Compact "3 hours ago" style relative time — no dependency, no locale data. */
|
|
41
41
|
function relativeTime(iso) {
|
package/dist/GameTopbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GameTopbar.js","sourceRoot":"","sources":["../src/GameTopbar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"GameTopbar.js","sourceRoot":"","sources":["../src/GameTopbar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* GameTopbar styles, as a string the component renders in a <style> tag.
|
|
3
|
+
*
|
|
4
|
+
* They were a CSS module imported by GameTopbar.tsx (0.18.0 to 0.20.0). The published dist kept
|
|
5
|
+
* that bare `import './GameTopbar.module.css'`, which Node cannot load, so vitest suites in
|
|
6
|
+
* games that render SDK components failed (#512). Utilities are not an option here: most games
|
|
7
|
+
* do not `@source` the SDK's dist, so the bar would lose its styling. The rules are unchanged;
|
|
8
|
+
* the class names are fixed and prefixed `fgs-tb-` instead of hashed. Colours and the motion
|
|
9
|
+
* timing read the design tokens (TOKENS.md), each with a fallback, so the bar still renders when
|
|
10
|
+
* a game does not load GAME_TOKENS_CSS.
|
|
11
|
+
*/
|
|
12
|
+
export declare const TOPBAR_CSS = "\n.fgs-tb-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n padding: 0.25rem 0.75rem;\n height: 2rem;\n}\n\n.fgs-tb-group {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n min-width: 0;\n}\n\n.fgs-tb-groupEnd {\n gap: 0.75rem;\n}\n\n.fgs-tb-actions {\n display: flex;\n flex-shrink: 0;\n gap: 0.4rem;\n align-items: center;\n}\n\n/* The title side takes whatever room the right side leaves, but never less\n than its buttons plus the title's minimum width, so the right side cannot\n slide over it. */\n.fgs-tb-groupStart {\n flex: 1 1 auto;\n min-width: auto;\n}\n\n/* The stats are the only part of the right side that may give way, so a narrow\n screen never pushes a control (Sign in, sound) off the bar (#414). Each stat\n is one 2rem row: a stat that does not fit wraps onto the hidden next row\n whole, instead of being cut through its digits. */\n.fgs-tb-stats {\n display: flex;\n flex-wrap: wrap;\n align-content: flex-start;\n justify-content: flex-end;\n column-gap: 0.75rem;\n height: 2rem;\n min-width: 0;\n overflow: hidden;\n}\n\n.fgs-tb-title {\n font-family: var(--font-body, \"Manrope\", system-ui, sans-serif);\n font-weight: 600;\n font-size: 0.8rem;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n /* Truncate, never vanish: a few letters stay visible on a 320px screen (#414).\n inline-size containment drops the text's own width from the layout, so the\n title fills the room that is left (flex-grow) instead of claiming its full\n length, and the stats keep priority over the end of a long title. */\n flex: 1 1 auto;\n min-width: 2.5rem;\n contain: inline-size;\n}\n\n/* Icon buttons and the catalog link. Every control in the topbar uses this. */\n.fgs-tb-button {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n min-width: 2.75rem;\n min-height: 2.75rem;\n padding: 0;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--muted, #999);\n -webkit-tap-highlight-color: transparent;\n transition: opacity var(--motion-duration, 80ms) var(--motion-easing, ease-out);\n}\n\n.fgs-tb-link {\n text-decoration: none;\n}\n\n/* Tones: the play/pause icon is ink, the sound icon is accent when sound is on */\n.fgs-tb-toneMuted {\n color: var(--muted, #999);\n}\n\n.fgs-tb-toneInk {\n color: var(--ink, #f0f0f0);\n}\n\n.fgs-tb-toneAccent {\n color: var(--accent, #10b981);\n}\n\n/* A tap dips the control slightly, so it feels anchored on touch screens */\n.fgs-tb-button:active {\n opacity: 0.55;\n}\n\n.fgs-tb-button:focus-visible {\n outline: 2px solid var(--accent, #10b981);\n outline-offset: -2px;\n border-radius: 0.4rem;\n}\n\n/* Score and stat values */\n.fgs-tb-stat {\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex-shrink: 0;\n height: 2rem;\n text-align: right;\n line-height: 1.05;\n white-space: nowrap;\n}\n\n.fgs-tb-statValue {\n font-family: var(--font-body, \"Manrope\", system-ui, sans-serif);\n font-weight: 800;\n font-size: 0.85rem;\n color: var(--ink);\n font-variant-numeric: tabular-nums;\n line-height: 1;\n}\n\n.fgs-tb-statAccent {\n color: var(--accent);\n}\n\n/* Label under a stat. 0.65rem keeps it legible in sunlight and for low vision. */\n.fgs-tb-statLabel {\n font-size: 0.65rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--muted);\n line-height: 1;\n}\n\n/* Rules and About overlays: a full-screen panel with a header and a scrolling body */\n.fgs-tb-overlay {\n position: fixed;\n inset: 0;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n background: var(--paper, #0f0f0f);\n color: var(--ink, #f0f0f0);\n}\n\n.fgs-tb-overlayHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--line, #2a2a2a);\n}\n\n.fgs-tb-overlayTitle {\n font-family: var(--font-body, \"Manrope\", system-ui, sans-serif);\n font-weight: 700;\n font-size: 0.9rem;\n}\n\n.fgs-tb-overlayBody {\n flex: 1;\n overflow-y: auto;\n padding: 1rem;\n font-family: var(--font-body, \"Manrope\", system-ui, sans-serif);\n font-size: 0.9rem;\n line-height: 1.6;\n}\n\n/* About panel */\n.fgs-tb-aboutHeading {\n margin: 0 0 0.75rem;\n font-family: var(--font-display, \"Fraunces\", Georgia, serif);\n font-weight: 700;\n font-size: 1.5rem;\n}\n\n.fgs-tb-aboutExtra {\n margin-bottom: 1rem;\n}\n\n.fgs-tb-aboutGrid {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 0.35rem 1rem;\n margin: 0;\n font-size: 0.85rem;\n}\n\n.fgs-tb-aboutGrid dt {\n color: var(--muted, #999);\n}\n\n.fgs-tb-aboutGrid dd {\n margin: 0;\n font-variant-numeric: tabular-nums;\n}\n\n.fgs-tb-code {\n font-family: monospace;\n}\n\n.fgs-tb-aboutNote {\n margin-top: 1.25rem;\n font-size: 0.8rem;\n color: var(--muted, #999);\n}\n\n.fgs-tb-aboutLink {\n color: var(--accent, #10b981);\n text-decoration: none;\n}\n\n/* Phones (\u2264480px): tighter spacing, narrower icon buttons (still 44px tall),\n and stats show only their value. The label stays for screen readers. */\n@media (max-width: 480px) {\n .fgs-tb-bar {\n gap: 0.25rem;\n padding: 0.25rem;\n }\n\n .fgs-tb-groupEnd {\n gap: 0;\n }\n\n .fgs-tb-stats {\n column-gap: 0.5rem;\n margin-right: 0.25rem;\n }\n\n .fgs-tb-button {\n min-width: 1.75rem;\n }\n\n .fgs-tb-statLabel {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .fgs-tb-button {\n transition: none;\n }\n}\n";
|
|
13
|
+
/** Class names used by GameTopbar. Each key maps to the `fgs-tb-` class in TOPBAR_CSS. */
|
|
14
|
+
export declare const styles: Record<string, string>;
|
|
15
|
+
//# sourceMappingURL=GameTopbar.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GameTopbar.styles.d.ts","sourceRoot":"","sources":["../src/GameTopbar.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,UAAU,usLAwQtB,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA6BzC,CAAC"}
|
|
@@ -1,11 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
* GameTopbar styles
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
1
|
+
/**
|
|
2
|
+
* GameTopbar styles, as a string the component renders in a <style> tag.
|
|
3
|
+
*
|
|
4
|
+
* They were a CSS module imported by GameTopbar.tsx (0.18.0 to 0.20.0). The published dist kept
|
|
5
|
+
* that bare `import './GameTopbar.module.css'`, which Node cannot load, so vitest suites in
|
|
6
|
+
* games that render SDK components failed (#512). Utilities are not an option here: most games
|
|
7
|
+
* do not `@source` the SDK's dist, so the bar would lose its styling. The rules are unchanged;
|
|
8
|
+
* the class names are fixed and prefixed `fgs-tb-` instead of hashed. Colours and the motion
|
|
9
|
+
* timing read the design tokens (TOKENS.md), each with a fallback, so the bar still renders when
|
|
10
|
+
* a game does not load GAME_TOKENS_CSS.
|
|
6
11
|
*/
|
|
7
|
-
|
|
8
|
-
.bar {
|
|
12
|
+
export const TOPBAR_CSS = `
|
|
13
|
+
.fgs-tb-bar {
|
|
9
14
|
display: flex;
|
|
10
15
|
align-items: center;
|
|
11
16
|
justify-content: space-between;
|
|
@@ -14,18 +19,18 @@
|
|
|
14
19
|
height: 2rem;
|
|
15
20
|
}
|
|
16
21
|
|
|
17
|
-
.group {
|
|
22
|
+
.fgs-tb-group {
|
|
18
23
|
display: flex;
|
|
19
24
|
align-items: center;
|
|
20
25
|
gap: 0.25rem;
|
|
21
26
|
min-width: 0;
|
|
22
27
|
}
|
|
23
28
|
|
|
24
|
-
.groupEnd {
|
|
29
|
+
.fgs-tb-groupEnd {
|
|
25
30
|
gap: 0.75rem;
|
|
26
31
|
}
|
|
27
32
|
|
|
28
|
-
.actions {
|
|
33
|
+
.fgs-tb-actions {
|
|
29
34
|
display: flex;
|
|
30
35
|
flex-shrink: 0;
|
|
31
36
|
gap: 0.4rem;
|
|
@@ -35,7 +40,7 @@
|
|
|
35
40
|
/* The title side takes whatever room the right side leaves, but never less
|
|
36
41
|
than its buttons plus the title's minimum width, so the right side cannot
|
|
37
42
|
slide over it. */
|
|
38
|
-
.groupStart {
|
|
43
|
+
.fgs-tb-groupStart {
|
|
39
44
|
flex: 1 1 auto;
|
|
40
45
|
min-width: auto;
|
|
41
46
|
}
|
|
@@ -44,7 +49,7 @@
|
|
|
44
49
|
screen never pushes a control (Sign in, sound) off the bar (#414). Each stat
|
|
45
50
|
is one 2rem row: a stat that does not fit wraps onto the hidden next row
|
|
46
51
|
whole, instead of being cut through its digits. */
|
|
47
|
-
.stats {
|
|
52
|
+
.fgs-tb-stats {
|
|
48
53
|
display: flex;
|
|
49
54
|
flex-wrap: wrap;
|
|
50
55
|
align-content: flex-start;
|
|
@@ -55,7 +60,7 @@
|
|
|
55
60
|
overflow: hidden;
|
|
56
61
|
}
|
|
57
62
|
|
|
58
|
-
.title {
|
|
63
|
+
.fgs-tb-title {
|
|
59
64
|
font-family: var(--font-body, "Manrope", system-ui, sans-serif);
|
|
60
65
|
font-weight: 600;
|
|
61
66
|
font-size: 0.8rem;
|
|
@@ -73,7 +78,7 @@
|
|
|
73
78
|
}
|
|
74
79
|
|
|
75
80
|
/* Icon buttons and the catalog link. Every control in the topbar uses this. */
|
|
76
|
-
.button {
|
|
81
|
+
.fgs-tb-button {
|
|
77
82
|
display: flex;
|
|
78
83
|
align-items: center;
|
|
79
84
|
justify-content: center;
|
|
@@ -89,36 +94,36 @@
|
|
|
89
94
|
transition: opacity var(--motion-duration, 80ms) var(--motion-easing, ease-out);
|
|
90
95
|
}
|
|
91
96
|
|
|
92
|
-
.link {
|
|
97
|
+
.fgs-tb-link {
|
|
93
98
|
text-decoration: none;
|
|
94
99
|
}
|
|
95
100
|
|
|
96
101
|
/* Tones: the play/pause icon is ink, the sound icon is accent when sound is on */
|
|
97
|
-
.toneMuted {
|
|
102
|
+
.fgs-tb-toneMuted {
|
|
98
103
|
color: var(--muted, #999);
|
|
99
104
|
}
|
|
100
105
|
|
|
101
|
-
.toneInk {
|
|
106
|
+
.fgs-tb-toneInk {
|
|
102
107
|
color: var(--ink, #f0f0f0);
|
|
103
108
|
}
|
|
104
109
|
|
|
105
|
-
.toneAccent {
|
|
110
|
+
.fgs-tb-toneAccent {
|
|
106
111
|
color: var(--accent, #10b981);
|
|
107
112
|
}
|
|
108
113
|
|
|
109
114
|
/* A tap dips the control slightly, so it feels anchored on touch screens */
|
|
110
|
-
.button:active {
|
|
115
|
+
.fgs-tb-button:active {
|
|
111
116
|
opacity: 0.55;
|
|
112
117
|
}
|
|
113
118
|
|
|
114
|
-
.button:focus-visible {
|
|
119
|
+
.fgs-tb-button:focus-visible {
|
|
115
120
|
outline: 2px solid var(--accent, #10b981);
|
|
116
121
|
outline-offset: -2px;
|
|
117
122
|
border-radius: 0.4rem;
|
|
118
123
|
}
|
|
119
124
|
|
|
120
125
|
/* Score and stat values */
|
|
121
|
-
.stat {
|
|
126
|
+
.fgs-tb-stat {
|
|
122
127
|
display: flex;
|
|
123
128
|
flex-direction: column;
|
|
124
129
|
justify-content: center;
|
|
@@ -129,7 +134,7 @@
|
|
|
129
134
|
white-space: nowrap;
|
|
130
135
|
}
|
|
131
136
|
|
|
132
|
-
.statValue {
|
|
137
|
+
.fgs-tb-statValue {
|
|
133
138
|
font-family: var(--font-body, "Manrope", system-ui, sans-serif);
|
|
134
139
|
font-weight: 800;
|
|
135
140
|
font-size: 0.85rem;
|
|
@@ -138,12 +143,12 @@
|
|
|
138
143
|
line-height: 1;
|
|
139
144
|
}
|
|
140
145
|
|
|
141
|
-
.statAccent {
|
|
146
|
+
.fgs-tb-statAccent {
|
|
142
147
|
color: var(--accent);
|
|
143
148
|
}
|
|
144
149
|
|
|
145
150
|
/* Label under a stat. 0.65rem keeps it legible in sunlight and for low vision. */
|
|
146
|
-
.statLabel {
|
|
151
|
+
.fgs-tb-statLabel {
|
|
147
152
|
font-size: 0.65rem;
|
|
148
153
|
font-weight: 700;
|
|
149
154
|
text-transform: uppercase;
|
|
@@ -153,7 +158,7 @@
|
|
|
153
158
|
}
|
|
154
159
|
|
|
155
160
|
/* Rules and About overlays: a full-screen panel with a header and a scrolling body */
|
|
156
|
-
.overlay {
|
|
161
|
+
.fgs-tb-overlay {
|
|
157
162
|
position: fixed;
|
|
158
163
|
inset: 0;
|
|
159
164
|
z-index: 9999;
|
|
@@ -164,7 +169,7 @@
|
|
|
164
169
|
color: var(--ink, #f0f0f0);
|
|
165
170
|
}
|
|
166
171
|
|
|
167
|
-
.overlayHeader {
|
|
172
|
+
.fgs-tb-overlayHeader {
|
|
168
173
|
display: flex;
|
|
169
174
|
align-items: center;
|
|
170
175
|
justify-content: space-between;
|
|
@@ -173,13 +178,13 @@
|
|
|
173
178
|
border-bottom: 1px solid var(--line, #2a2a2a);
|
|
174
179
|
}
|
|
175
180
|
|
|
176
|
-
.overlayTitle {
|
|
181
|
+
.fgs-tb-overlayTitle {
|
|
177
182
|
font-family: var(--font-body, "Manrope", system-ui, sans-serif);
|
|
178
183
|
font-weight: 700;
|
|
179
184
|
font-size: 0.9rem;
|
|
180
185
|
}
|
|
181
186
|
|
|
182
|
-
.overlayBody {
|
|
187
|
+
.fgs-tb-overlayBody {
|
|
183
188
|
flex: 1;
|
|
184
189
|
overflow-y: auto;
|
|
185
190
|
padding: 1rem;
|
|
@@ -189,18 +194,18 @@
|
|
|
189
194
|
}
|
|
190
195
|
|
|
191
196
|
/* About panel */
|
|
192
|
-
.aboutHeading {
|
|
197
|
+
.fgs-tb-aboutHeading {
|
|
193
198
|
margin: 0 0 0.75rem;
|
|
194
199
|
font-family: var(--font-display, "Fraunces", Georgia, serif);
|
|
195
200
|
font-weight: 700;
|
|
196
201
|
font-size: 1.5rem;
|
|
197
202
|
}
|
|
198
203
|
|
|
199
|
-
.aboutExtra {
|
|
204
|
+
.fgs-tb-aboutExtra {
|
|
200
205
|
margin-bottom: 1rem;
|
|
201
206
|
}
|
|
202
207
|
|
|
203
|
-
.aboutGrid {
|
|
208
|
+
.fgs-tb-aboutGrid {
|
|
204
209
|
display: grid;
|
|
205
210
|
grid-template-columns: auto 1fr;
|
|
206
211
|
gap: 0.35rem 1rem;
|
|
@@ -208,26 +213,26 @@
|
|
|
208
213
|
font-size: 0.85rem;
|
|
209
214
|
}
|
|
210
215
|
|
|
211
|
-
.aboutGrid dt {
|
|
216
|
+
.fgs-tb-aboutGrid dt {
|
|
212
217
|
color: var(--muted, #999);
|
|
213
218
|
}
|
|
214
219
|
|
|
215
|
-
.aboutGrid dd {
|
|
220
|
+
.fgs-tb-aboutGrid dd {
|
|
216
221
|
margin: 0;
|
|
217
222
|
font-variant-numeric: tabular-nums;
|
|
218
223
|
}
|
|
219
224
|
|
|
220
|
-
.code {
|
|
225
|
+
.fgs-tb-code {
|
|
221
226
|
font-family: monospace;
|
|
222
227
|
}
|
|
223
228
|
|
|
224
|
-
.aboutNote {
|
|
229
|
+
.fgs-tb-aboutNote {
|
|
225
230
|
margin-top: 1.25rem;
|
|
226
231
|
font-size: 0.8rem;
|
|
227
232
|
color: var(--muted, #999);
|
|
228
233
|
}
|
|
229
234
|
|
|
230
|
-
.aboutLink {
|
|
235
|
+
.fgs-tb-aboutLink {
|
|
231
236
|
color: var(--accent, #10b981);
|
|
232
237
|
text-decoration: none;
|
|
233
238
|
}
|
|
@@ -235,25 +240,25 @@
|
|
|
235
240
|
/* Phones (≤480px): tighter spacing, narrower icon buttons (still 44px tall),
|
|
236
241
|
and stats show only their value. The label stays for screen readers. */
|
|
237
242
|
@media (max-width: 480px) {
|
|
238
|
-
.bar {
|
|
243
|
+
.fgs-tb-bar {
|
|
239
244
|
gap: 0.25rem;
|
|
240
245
|
padding: 0.25rem;
|
|
241
246
|
}
|
|
242
247
|
|
|
243
|
-
.groupEnd {
|
|
248
|
+
.fgs-tb-groupEnd {
|
|
244
249
|
gap: 0;
|
|
245
250
|
}
|
|
246
251
|
|
|
247
|
-
.stats {
|
|
252
|
+
.fgs-tb-stats {
|
|
248
253
|
column-gap: 0.5rem;
|
|
249
254
|
margin-right: 0.25rem;
|
|
250
255
|
}
|
|
251
256
|
|
|
252
|
-
.button {
|
|
257
|
+
.fgs-tb-button {
|
|
253
258
|
min-width: 1.75rem;
|
|
254
259
|
}
|
|
255
260
|
|
|
256
|
-
.statLabel {
|
|
261
|
+
.fgs-tb-statLabel {
|
|
257
262
|
position: absolute;
|
|
258
263
|
width: 1px;
|
|
259
264
|
height: 1px;
|
|
@@ -264,7 +269,38 @@
|
|
|
264
269
|
}
|
|
265
270
|
|
|
266
271
|
@media (prefers-reduced-motion: reduce) {
|
|
267
|
-
.button {
|
|
272
|
+
.fgs-tb-button {
|
|
268
273
|
transition: none;
|
|
269
274
|
}
|
|
270
275
|
}
|
|
276
|
+
`;
|
|
277
|
+
/** Class names used by GameTopbar. Each key maps to the `fgs-tb-` class in TOPBAR_CSS. */
|
|
278
|
+
export const styles = Object.fromEntries([
|
|
279
|
+
'aboutExtra',
|
|
280
|
+
'aboutGrid',
|
|
281
|
+
'aboutHeading',
|
|
282
|
+
'aboutLink',
|
|
283
|
+
'aboutNote',
|
|
284
|
+
'actions',
|
|
285
|
+
'bar',
|
|
286
|
+
'button',
|
|
287
|
+
'code',
|
|
288
|
+
'group',
|
|
289
|
+
'groupEnd',
|
|
290
|
+
'groupStart',
|
|
291
|
+
'link',
|
|
292
|
+
'overlay',
|
|
293
|
+
'overlayBody',
|
|
294
|
+
'overlayHeader',
|
|
295
|
+
'overlayTitle',
|
|
296
|
+
'stat',
|
|
297
|
+
'statAccent',
|
|
298
|
+
'statLabel',
|
|
299
|
+
'statValue',
|
|
300
|
+
'stats',
|
|
301
|
+
'title',
|
|
302
|
+
'toneAccent',
|
|
303
|
+
'toneInk',
|
|
304
|
+
'toneMuted',
|
|
305
|
+
].map((name) => [name, `fgs-tb-${name}`]));
|
|
306
|
+
//# sourceMappingURL=GameTopbar.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GameTopbar.styles.js","sourceRoot":"","sources":["../src/GameTopbar.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwQzB,CAAC;AAEF,0FAA0F;AAC1F,MAAM,CAAC,MAAM,MAAM,GAA2B,MAAM,CAAC,WAAW,CAC9D;IACE,YAAY;IACZ,WAAW;IACX,cAAc;IACd,WAAW;IACX,WAAW;IACX,SAAS;IACT,KAAK;IACL,QAAQ;IACR,MAAM;IACN,OAAO;IACP,UAAU;IACV,YAAY;IACZ,MAAM;IACN,SAAS;IACT,aAAa;IACb,eAAe;IACf,cAAc;IACd,MAAM;IACN,YAAY;IACZ,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;IACP,YAAY;IACZ,SAAS;IACT,WAAW;CACZ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,UAAU,IAAI,EAAE,CAAC,CAAC,CAC1C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@freegamestore/games",
|
|
3
|
-
"version": "0.20.
|
|
3
|
+
"version": "0.20.2",
|
|
4
4
|
"description": "Shared React UI primitives for games on FreeGameStore — GameShell, GameTopbar, etc. Brand-consistent, scroll-free.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -57,11 +57,11 @@
|
|
|
57
57
|
"react-dom": "19.2.6",
|
|
58
58
|
"typescript": "^5.7.0",
|
|
59
59
|
"vite": "^6",
|
|
60
|
-
"vitest": "^
|
|
60
|
+
"vitest": "^4.1.12"
|
|
61
61
|
},
|
|
62
62
|
"sideEffects": false,
|
|
63
63
|
"scripts": {
|
|
64
|
-
"build": "tsc && cp src/
|
|
64
|
+
"build": "tsc && cp src/theme.css dist/",
|
|
65
65
|
"typecheck": "tsc --noEmit",
|
|
66
66
|
"test": "vitest run"
|
|
67
67
|
}
|