@freegamestore/games 0.18.0 → 0.19.1
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/README.md +51 -6
- package/dist/Confetti.d.ts +4 -6
- package/dist/Confetti.d.ts.map +1 -1
- package/dist/Confetti.js +16 -49
- package/dist/Confetti.js.map +1 -1
- package/dist/GameAuth.d.ts.map +1 -1
- package/dist/GameAuth.js +5 -87
- package/dist/GameAuth.js.map +1 -1
- package/dist/GameButton.d.ts +2 -1
- package/dist/GameButton.d.ts.map +1 -1
- package/dist/GameButton.js +16 -67
- package/dist/GameButton.js.map +1 -1
- package/dist/GameConfirm.d.ts.map +1 -1
- package/dist/GameConfirm.js +1 -7
- package/dist/GameConfirm.js.map +1 -1
- package/dist/GameModal.d.ts +2 -1
- package/dist/GameModal.d.ts.map +1 -1
- package/dist/GameModal.js +3 -40
- package/dist/GameModal.js.map +1 -1
- package/dist/GameOverScreen.d.ts +2 -1
- package/dist/GameOverScreen.d.ts.map +1 -1
- package/dist/GameOverScreen.js +3 -37
- package/dist/GameOverScreen.js.map +1 -1
- package/dist/GameResultScreen.d.ts +3 -8
- package/dist/GameResultScreen.d.ts.map +1 -1
- package/dist/GameResultScreen.js +8 -140
- package/dist/GameResultScreen.js.map +1 -1
- package/dist/GameShell.d.ts +3 -0
- package/dist/GameShell.d.ts.map +1 -1
- package/dist/GameShell.js +4 -43
- package/dist/GameShell.js.map +1 -1
- package/dist/GameTextSizeToggle.d.ts.map +1 -1
- package/dist/GameTextSizeToggle.js +1 -16
- package/dist/GameTextSizeToggle.js.map +1 -1
- package/dist/GameThemeToggle.d.ts.map +1 -1
- package/dist/GameThemeToggle.js +1 -14
- package/dist/GameThemeToggle.js.map +1 -1
- package/dist/Leaderboard.d.ts.map +1 -1
- package/dist/Leaderboard.js +2 -5
- package/dist/Leaderboard.js.map +1 -1
- package/dist/StartScreen.d.ts +3 -10
- package/dist/StartScreen.d.ts.map +1 -1
- package/dist/StartScreen.js +7 -136
- package/dist/StartScreen.js.map +1 -1
- package/dist/feel/ScorePopup.d.ts +0 -5
- package/dist/feel/ScorePopup.d.ts.map +1 -1
- package/dist/feel/ScorePopup.js +4 -20
- package/dist/feel/ScorePopup.js.map +1 -1
- package/dist/feel/index.d.ts +1 -1
- package/dist/feel/index.d.ts.map +1 -1
- package/dist/feel/index.js +1 -1
- package/dist/feel/index.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/theme.css +93 -0
- package/package.json +4 -3
package/dist/StartScreen.js
CHANGED
|
@@ -2,147 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useId, useState } from 'react';
|
|
3
3
|
import { GameButton } from './GameButton.js';
|
|
4
4
|
import { GameModal } from './GameModal.js';
|
|
5
|
-
import { LIGHT_COLOURS, MOTION_TOKENS, SHAPE_TOKENS, TYPOGRAPHY_TOKENS } from './tokens.js';
|
|
6
|
-
/** A CSS variable with a fallback taken from the #209 light tokens, so the screen renders without GAME_TOKENS_CSS. */
|
|
7
|
-
const v = (name, fallback) => `var(--${name}, ${fallback})`;
|
|
8
|
-
/**
|
|
9
|
-
* Styles for the start screen and its how-to-play list. The durations and
|
|
10
|
-
* easings come from the motion tokens, and everything stops under
|
|
11
|
-
* prefers-reduced-motion. Class names carry the `fgs-` prefix, so they cannot
|
|
12
|
-
* collide with a game's own styles.
|
|
13
|
-
*/
|
|
14
|
-
export const START_SCREEN_CSS = `
|
|
15
|
-
.fgs-start {
|
|
16
|
-
position: relative;
|
|
17
|
-
display: flex;
|
|
18
|
-
flex-direction: column;
|
|
19
|
-
align-items: center;
|
|
20
|
-
justify-content: center;
|
|
21
|
-
gap: clamp(0.75rem, 3svh, 1.5rem);
|
|
22
|
-
height: 100%;
|
|
23
|
-
padding: 1rem;
|
|
24
|
-
overflow: hidden;
|
|
25
|
-
background:
|
|
26
|
-
radial-gradient(120% 70% at 50% 0%, ${v('accent-soft', LIGHT_COLOURS.accentSoft)} 0%, transparent 65%),
|
|
27
|
-
${v('paper', LIGHT_COLOURS.paper)};
|
|
28
|
-
}
|
|
29
|
-
.fgs-start-artwork { width: min(11rem, 52vw); }
|
|
30
|
-
.fgs-start-artwork-inner { animation: fgs-start-float 7s ease-in-out infinite; }
|
|
31
|
-
.fgs-start-card {
|
|
32
|
-
display: flex;
|
|
33
|
-
flex-direction: column;
|
|
34
|
-
align-items: center;
|
|
35
|
-
gap: 0.5rem;
|
|
36
|
-
width: min(20rem, 100%);
|
|
37
|
-
padding: 1.5rem 1.25rem 1.25rem;
|
|
38
|
-
border-radius: ${v('radius', SHAPE_TOKENS.radius)};
|
|
39
|
-
text-align: center;
|
|
40
|
-
background: ${v('panel', LIGHT_COLOURS.panel)};
|
|
41
|
-
border: 1px solid ${v('line', LIGHT_COLOURS.line)};
|
|
42
|
-
box-shadow:
|
|
43
|
-
inset 0 1px 0 rgb(255 255 255 / 0.4),
|
|
44
|
-
0 1px 2px rgb(0 0 0 / 0.06),
|
|
45
|
-
0 18px 32px -18px rgb(0 0 0 / 0.35);
|
|
46
|
-
}
|
|
47
|
-
.fgs-start-title {
|
|
48
|
-
margin: 0;
|
|
49
|
-
font-family: ${v('font-display', TYPOGRAPHY_TOKENS.fontDisplay)};
|
|
50
|
-
font-weight: 800;
|
|
51
|
-
font-optical-sizing: auto;
|
|
52
|
-
font-variation-settings: "opsz" 144;
|
|
53
|
-
font-size: ${v('text-display', TYPOGRAPHY_TOKENS.textDisplay)};
|
|
54
|
-
line-height: 0.95;
|
|
55
|
-
letter-spacing: -0.03em;
|
|
56
|
-
color: ${v('ink', LIGHT_COLOURS.ink)};
|
|
57
|
-
text-wrap: balance;
|
|
58
|
-
}
|
|
59
|
-
.fgs-start-tagline {
|
|
60
|
-
margin: 0 0 0.5rem;
|
|
61
|
-
max-width: 18rem;
|
|
62
|
-
font-size: 0.95rem;
|
|
63
|
-
line-height: 1.4;
|
|
64
|
-
color: ${v('muted', LIGHT_COLOURS.muted)};
|
|
65
|
-
}
|
|
66
|
-
.fgs-start-actions {
|
|
67
|
-
display: flex;
|
|
68
|
-
flex-direction: column;
|
|
69
|
-
gap: 0.5rem;
|
|
70
|
-
width: 100%;
|
|
71
|
-
margin-top: 0.25rem;
|
|
72
|
-
}
|
|
73
|
-
.fgs-start-enter {
|
|
74
|
-
animation: fgs-start-rise ${v('motion-slow', MOTION_TOKENS.slow)} cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
|
75
|
-
animation-delay: var(--delay, 0ms);
|
|
76
|
-
}
|
|
77
|
-
@keyframes fgs-start-rise {
|
|
78
|
-
from { opacity: 0; transform: translateY(12px); }
|
|
79
|
-
to { opacity: 1; transform: none; }
|
|
80
|
-
}
|
|
81
|
-
@keyframes fgs-start-float {
|
|
82
|
-
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
83
|
-
50% { transform: translateY(-4px) rotate(-1deg); }
|
|
84
|
-
}
|
|
85
|
-
.fgs-how-steps {
|
|
86
|
-
display: flex;
|
|
87
|
-
flex-direction: column;
|
|
88
|
-
gap: 0.85rem;
|
|
89
|
-
margin: 0;
|
|
90
|
-
padding: 0;
|
|
91
|
-
list-style: none;
|
|
92
|
-
}
|
|
93
|
-
.fgs-how-steps li {
|
|
94
|
-
display: flex;
|
|
95
|
-
align-items: flex-start;
|
|
96
|
-
gap: 0.75rem;
|
|
97
|
-
animation: fgs-start-rise ${v('motion-base', MOTION_TOKENS.base)} ease-out both;
|
|
98
|
-
animation-delay: calc(var(--i, 0) * 60ms);
|
|
99
|
-
}
|
|
100
|
-
.fgs-how-num {
|
|
101
|
-
flex: none;
|
|
102
|
-
display: grid;
|
|
103
|
-
place-items: center;
|
|
104
|
-
width: 1.75rem;
|
|
105
|
-
height: 1.75rem;
|
|
106
|
-
border-radius: 0.5rem;
|
|
107
|
-
font-family: ${v('font-display', TYPOGRAPHY_TOKENS.fontDisplay)};
|
|
108
|
-
font-weight: 800;
|
|
109
|
-
color: #ffffff;
|
|
110
|
-
background: ${v('accent', LIGHT_COLOURS.accent)};
|
|
111
|
-
box-shadow:
|
|
112
|
-
inset 0 1px 0 rgb(255 255 255 / 0.35),
|
|
113
|
-
0 2px 4px rgb(0 0 0 / 0.2);
|
|
114
|
-
}
|
|
115
|
-
.fgs-how-steps strong {
|
|
116
|
-
display: block;
|
|
117
|
-
font-weight: 700;
|
|
118
|
-
color: ${v('ink', LIGHT_COLOURS.ink)};
|
|
119
|
-
}
|
|
120
|
-
.fgs-how-steps p {
|
|
121
|
-
margin: 0.15rem 0 0;
|
|
122
|
-
font-size: 0.9rem;
|
|
123
|
-
line-height: 1.4;
|
|
124
|
-
color: ${v('muted', LIGHT_COLOURS.muted)};
|
|
125
|
-
}
|
|
126
|
-
@media (prefers-reduced-motion: reduce) {
|
|
127
|
-
.fgs-start-enter,
|
|
128
|
-
.fgs-start-artwork-inner,
|
|
129
|
-
.fgs-how-steps li {
|
|
130
|
-
animation: none;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
`;
|
|
134
|
-
/** Entrance delay for one element, so the screen rises in a sequence. */
|
|
135
|
-
const delay = (ms) => ({ '--delay': `${ms}ms` });
|
|
136
5
|
/** The numbered steps of a game's rules. */
|
|
137
6
|
function HowToPlaySteps({ steps }) {
|
|
138
|
-
return (_jsx("ol", { className: "
|
|
7
|
+
return (_jsx("ol", { className: "m-0 flex list-none flex-col gap-[0.85rem] p-0", children: steps.map((step, i) => (_jsxs("li", { className: "flex animate-fgs-rise-step items-start gap-3 motion-reduce:animate-none",
|
|
8
|
+
// Dynamic: the entrance delay is staggered by the step's index.
|
|
9
|
+
style: { '--i': i }, children: [_jsx("span", { className: "grid size-7 flex-none place-items-center rounded-lg bg-accent font-display font-extrabold text-white shadow-[inset_0_1px_0_rgb(255_255_255/0.35),0_2px_4px_rgb(0_0_0/0.2)]", "aria-hidden": "true", children: i + 1 }), _jsxs("div", { children: [_jsx("strong", { className: "block font-bold text-ink", children: step.heading }), _jsx("p", { className: "m-0 mt-[0.15rem] text-[0.9rem] leading-[1.4] text-muted", children: step.text })] })] }, step.heading))) }));
|
|
139
10
|
}
|
|
140
11
|
/**
|
|
141
12
|
* A game's start screen: artwork, title, tagline, then Play and How to play.
|
|
142
|
-
* Motion is
|
|
13
|
+
* Motion is the `animate-fgs-*` utilities from the SDK's `theme.css`, and it
|
|
14
|
+
* stops under prefers-reduced-motion. The card sits on an opaque `bg-panel`.
|
|
143
15
|
*
|
|
144
|
-
*
|
|
145
|
-
* light values, so a game that loads GAME_TOKENS_CSS gets the full theme.
|
|
16
|
+
* Colours come from the platform tokens through the game's `@theme` mapping.
|
|
146
17
|
*/
|
|
147
18
|
export function StartScreen({ title, tagline, artwork, playLabel = 'Play', onPlay, onHowToPlay, howToPlay, }) {
|
|
148
19
|
const [helpOpen, setHelpOpen] = useState(false);
|
|
@@ -154,6 +25,6 @@ export function StartScreen({ title, tagline, artwork, playLabel = 'Play', onPla
|
|
|
154
25
|
else
|
|
155
26
|
setHelpOpen(true);
|
|
156
27
|
};
|
|
157
|
-
return (_jsxs("section", { className: "
|
|
28
|
+
return (_jsxs("section", { "data-fgs": "start", className: "relative flex h-full flex-col items-center justify-center gap-[clamp(0.75rem,3svh,1.5rem)] overflow-hidden bg-paper bg-[radial-gradient(120%_70%_at_50%_0%,var(--color-accent-soft)_0%,transparent_65%)] p-4", "aria-labelledby": titleId, children: [artwork !== undefined && artwork !== null && (_jsx("div", { "data-fgs": "start-artwork", className: "w-[min(11rem,52vw)] animate-fgs-rise [--delay:0ms] motion-reduce:animate-none", "aria-hidden": "true", children: _jsx("div", { className: "animate-fgs-float motion-reduce:animate-none", children: artwork }) })), _jsxs("div", { className: "flex w-[min(20rem,100%)] animate-fgs-rise flex-col items-center gap-2 rounded-fgs border border-line bg-panel px-5 pb-5 pt-6 text-center shadow-[inset_0_1px_0_rgb(255_255_255/0.4),0_1px_2px_rgb(0_0_0/0.06),0_18px_32px_-18px_rgb(0_0_0/0.35)] [--delay:120ms] motion-reduce:animate-none", children: [_jsx("h1", { id: titleId, className: "m-0 text-balance font-display text-fgs-display font-extrabold leading-[0.95] tracking-[-0.03em] text-ink [font-optical-sizing:auto] [font-variation-settings:'opsz'_144]", children: title }), tagline && (_jsx("p", { className: "m-0 mb-2 max-w-72 text-[0.95rem] leading-[1.4] text-muted", children: tagline })), _jsxs("div", { className: "mt-1 flex w-full flex-col gap-2", children: [_jsx(GameButton, { variant: "primary", size: "lg", block: true, onClick: onPlay, children: playLabel }), showsHelp && (_jsx(GameButton, { variant: "secondary", size: "md", block: true, onClick: openHelp, children: "How to play" }))] })] }), onHowToPlay === undefined && howToPlay !== undefined && (_jsx(GameModal, { open: helpOpen, onClose: () => setHelpOpen(false), title: "How to play", children: _jsx(HowToPlaySteps, { steps: howToPlay }) }))] }));
|
|
158
29
|
}
|
|
159
30
|
//# sourceMappingURL=StartScreen.js.map
|
package/dist/StartScreen.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StartScreen.js","sourceRoot":"","sources":["../src/StartScreen.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"StartScreen.js","sourceRoot":"","sources":["../src/StartScreen.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAmC3C,4CAA4C;AAC5C,SAAS,cAAc,CAAC,EAAE,KAAK,EAAyC;IACtE,OAAO,CACL,aAAI,SAAS,EAAC,+CAA+C,YAC1D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,cAEE,SAAS,EAAC,yEAAyE;YACnF,gEAAgE;YAChE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAyB,aAE1C,eACE,SAAS,EAAC,4KAA4K,iBAC1K,MAAM,YAEjB,CAAC,GAAG,CAAC,GACD,EACP,0BACE,iBAAQ,SAAS,EAAC,0BAA0B,YAAE,IAAI,CAAC,OAAO,GAAU,EACpE,YAAG,SAAS,EAAC,yDAAyD,YAAE,IAAI,CAAC,IAAI,GAAK,IAClF,KAdD,IAAI,CAAC,OAAO,CAed,CACN,CAAC,GACC,CACN,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAS,GAAG,MAAM,EAClB,MAAM,EACN,WAAW,EACX,SAAS,GACQ;IACjB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,SAAS,GAAG,WAAW,KAAK,SAAS,IAAI,SAAS,KAAK,SAAS,CAAC;IAEvE,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,WAAW;YAAE,WAAW,EAAE,CAAC;;YAC1B,WAAW,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,+BACW,OAAO,EAChB,SAAS,EAAC,8MAA8M,qBACvM,OAAO,aAEvB,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,IAAI,IAAI,CAC5C,0BACW,eAAe,EACxB,SAAS,EAAC,+EAA+E,iBAC7E,MAAM,YAElB,cAAK,SAAS,EAAC,8CAA8C,YAAE,OAAO,GAAO,GACzE,CACP,EACD,eAAK,SAAS,EAAC,6RAA6R,aAC1S,aACE,EAAE,EAAE,OAAO,EACX,SAAS,EAAC,0KAA0K,YAEnL,KAAK,GACH,EACJ,OAAO,IAAI,CACV,YAAG,SAAS,EAAC,2DAA2D,YAAE,OAAO,GAAK,CACvF,EACD,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,UAAU,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,QAAC,OAAO,EAAE,MAAM,YAC1D,SAAS,GACC,EACZ,SAAS,IAAI,CACZ,KAAC,UAAU,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,QAAC,OAAO,EAAE,QAAQ,4BAEpD,CACd,IACG,IACF,EACL,WAAW,KAAK,SAAS,IAAI,SAAS,KAAK,SAAS,IAAI,CACvD,KAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,KAAK,EAAC,aAAa,YAC/E,KAAC,cAAc,IAAC,KAAK,EAAE,SAAS,GAAI,GAC1B,CACb,IACO,CACX,CAAC;AACJ,CAAC"}
|
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
import type * as React from 'react';
|
|
2
2
|
/** How long a pop-up stays on screen, in ms. */
|
|
3
3
|
export declare const SCORE_POP_MS = 700;
|
|
4
|
-
/**
|
|
5
|
-
* Styles for the pop-up. Its colour is the accent-ink token, so it follows the
|
|
6
|
-
* theme, with a light-theme fallback. The motion itself is set from script.
|
|
7
|
-
*/
|
|
8
|
-
export declare const SCORE_POP_CSS = "\n.fgs-score-pop {\n position: absolute;\n z-index: 750;\n pointer-events: none;\n white-space: nowrap;\n font-family: var(--font-display, \"Fraunces\", Georgia, serif);\n font-size: var(--text-stat, 1.25rem);\n font-weight: 800;\n color: var(--accent-ink, #2563eb);\n text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);\n will-change: transform, opacity;\n}\n";
|
|
9
4
|
export interface ScorePopupProps {
|
|
10
5
|
/** The points to show, as `+N`. */
|
|
11
6
|
points: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScorePopup.d.ts","sourceRoot":"","sources":["../../src/feel/ScorePopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,gDAAgD;AAChD,eAAO,MAAM,YAAY,MAAM,CAAC;AAKhC
|
|
1
|
+
{"version":3,"file":"ScorePopup.d.ts","sourceRoot":"","sources":["../../src/feel/ScorePopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,gDAAgD;AAChD,eAAO,MAAM,YAAY,MAAM,CAAC;AAKhC,MAAM,WAAW,eAAe;IAC9B,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,CAAC,EAAE,MAAM,CAAC;IACV,sEAAsE;IACtE,CAAC,EAAE,MAAM,CAAC;IACV,wEAAwE;IACxE,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8CvF"}
|
package/dist/feel/ScorePopup.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useRef } from 'react';
|
|
3
3
|
import { easeInQuad, easeOutQuad } from './easing.js';
|
|
4
4
|
import { prefersReducedMotion } from './reducedMotion.js';
|
|
@@ -7,24 +7,6 @@ import { tweenProgress, tweenValue } from './tween.js';
|
|
|
7
7
|
export const SCORE_POP_MS = 700;
|
|
8
8
|
/** How far a pop-up rises before it fades, in px. */
|
|
9
9
|
const RISE_PX = 40;
|
|
10
|
-
/**
|
|
11
|
-
* Styles for the pop-up. Its colour is the accent-ink token, so it follows the
|
|
12
|
-
* theme, with a light-theme fallback. The motion itself is set from script.
|
|
13
|
-
*/
|
|
14
|
-
export const SCORE_POP_CSS = `
|
|
15
|
-
.fgs-score-pop {
|
|
16
|
-
position: absolute;
|
|
17
|
-
z-index: 750;
|
|
18
|
-
pointer-events: none;
|
|
19
|
-
white-space: nowrap;
|
|
20
|
-
font-family: var(--font-display, "Fraunces", Georgia, serif);
|
|
21
|
-
font-size: var(--text-stat, 1.25rem);
|
|
22
|
-
font-weight: 800;
|
|
23
|
-
color: var(--accent-ink, #2563eb);
|
|
24
|
-
text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
|
|
25
|
-
will-change: transform, opacity;
|
|
26
|
-
}
|
|
27
|
-
`;
|
|
28
10
|
/**
|
|
29
11
|
* A floating `+N` that rises and fades from (x, y), then calls `onDone`.
|
|
30
12
|
* Under reduced motion it holds still for the same time, so the number is still
|
|
@@ -62,6 +44,8 @@ export function ScorePopup({ points, x, y, onDone }) {
|
|
|
62
44
|
frame = requestAnimationFrame(step);
|
|
63
45
|
return () => cancelAnimationFrame(frame);
|
|
64
46
|
}, []);
|
|
65
|
-
return (
|
|
47
|
+
return (_jsx("span", { ref: ref, "data-fgs": "score-popup", className: "pointer-events-none absolute z-[750] whitespace-nowrap font-display text-fgs-stat font-extrabold text-accent-ink will-change-[transform,opacity] [text-shadow:0_1px_2px_rgb(0_0_0/0.55)] [transform:translate(-50%,-50%)]",
|
|
48
|
+
// Dynamic: the pop-up is placed at the caller's x and y; the rise and fade are set from script.
|
|
49
|
+
style: { left: x, top: y }, children: `+${points}` }));
|
|
66
50
|
}
|
|
67
51
|
//# sourceMappingURL=ScorePopup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScorePopup.js","sourceRoot":"","sources":["../../src/feel/ScorePopup.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEvD,gDAAgD;AAChD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC;AAEhC,qDAAqD;AACrD,MAAM,OAAO,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"ScorePopup.js","sourceRoot":"","sources":["../../src/feel/ScorePopup.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEvD,gDAAgD;AAChD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC;AAEhC,qDAAqD;AACrD,MAAM,OAAO,GAAG,EAAE,CAAC;AAanB;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAmB;IAClE,MAAM,GAAG,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,IAAI,oBAAoB,EAAE,EAAE,CAAC;YAC3B,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,CAAC;YAC/D,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QAChC,CAAC;QAED,IAAI,OAAO,GAAkB,IAAI,CAAC;QAClC,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE;YAC3B,OAAO,KAAK,GAAG,CAAC;YAChB,MAAM,OAAO,GAAG,GAAG,GAAG,OAAO,CAAC;YAC9B,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC;YACzE,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,+BAA+B,IAAI,MAAM,CAAC;YACpE,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC;YACpF,IAAI,aAAa,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC7C,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;YACtC,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QACF,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;QACpC,OAAO,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eACE,GAAG,EAAE,GAAG,cACC,aAAa,EACtB,SAAS,EAAC,2NAA2N;QACrO,gGAAgG;QAChG,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,YAEzB,IAAI,MAAM,EAAE,GACR,CACR,CAAC;AACJ,CAAC"}
|
package/dist/feel/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export { type Easing, easeInOutQuad, easeInQuad, easeOutBack, easeOutCubic, ease
|
|
|
8
8
|
export { HAPTICS, type VibrationPattern, vibrate } from './haptics.js';
|
|
9
9
|
export { type BurstOptions, createBurst, GRAVITY, MAX_PARTICLES, type Particle, particleAlpha, stepParticles, } from './particles.js';
|
|
10
10
|
export { prefersReducedMotion } from './reducedMotion.js';
|
|
11
|
-
export {
|
|
11
|
+
export { SCORE_POP_MS, ScorePopup, type ScorePopupProps } from './ScorePopup.js';
|
|
12
12
|
export { shakeKeyframes } from './shake.js';
|
|
13
13
|
export { tweenProgress, tweenValue } from './tween.js';
|
|
14
14
|
export { type Haptics, useHaptics } from './useHaptics.js';
|
package/dist/feel/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feel/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,KAAK,MAAM,EACX,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,WAAW,EACX,MAAM,GACP,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,EAAE,KAAK,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,EACL,KAAK,YAAY,EACjB,WAAW,EACX,OAAO,EACP,aAAa,EACb,KAAK,QAAQ,EACb,aAAa,EACb,aAAa,GACd,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feel/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,KAAK,MAAM,EACX,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,WAAW,EACX,MAAM,GACP,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,EAAE,KAAK,gBAAgB,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,EACL,KAAK,YAAY,EACjB,WAAW,EACX,OAAO,EACP,aAAa,EACb,KAAK,QAAQ,EACb,aAAa,EACb,aAAa,GACd,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,KAAK,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,KAAK,eAAe,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,KAAK,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}
|
package/dist/feel/index.js
CHANGED
|
@@ -8,7 +8,7 @@ export { easeInOutQuad, easeInQuad, easeOutBack, easeOutCubic, easeOutQuad, line
|
|
|
8
8
|
export { HAPTICS, vibrate } from './haptics.js';
|
|
9
9
|
export { createBurst, GRAVITY, MAX_PARTICLES, particleAlpha, stepParticles, } from './particles.js';
|
|
10
10
|
export { prefersReducedMotion } from './reducedMotion.js';
|
|
11
|
-
export {
|
|
11
|
+
export { SCORE_POP_MS, ScorePopup } from './ScorePopup.js';
|
|
12
12
|
export { shakeKeyframes } from './shake.js';
|
|
13
13
|
export { tweenProgress, tweenValue } from './tween.js';
|
|
14
14
|
export { useHaptics } from './useHaptics.js';
|
package/dist/feel/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/feel/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAEL,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,WAAW,EACX,MAAM,GACP,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,EAAyB,OAAO,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,EAEL,WAAW,EACX,OAAO,EACP,aAAa,EAEb,aAAa,EACb,aAAa,GACd,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/feel/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAEL,aAAa,EACb,UAAU,EACV,WAAW,EACX,YAAY,EACZ,WAAW,EACX,MAAM,GACP,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,EAAyB,OAAO,EAAE,MAAM,cAAc,CAAC;AACvE,OAAO,EAEL,WAAW,EACX,OAAO,EACP,aAAa,EAEb,aAAa,EACb,aAAa,GACd,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAwB,MAAM,iBAAiB,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAgB,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAwB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAqB,QAAQ,EAAE,MAAM,eAAe,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -12,20 +12,20 @@
|
|
|
12
12
|
* What you get:
|
|
13
13
|
* <GameShell topbar={<GameTopbar score={42} />}>{your game}</GameShell>
|
|
14
14
|
*/
|
|
15
|
-
export { CONFETTI_COLOURS,
|
|
15
|
+
export { CONFETTI_COLOURS, Confetti, type ConfettiProps, } from './Confetti.js';
|
|
16
16
|
export * from './feel/index.js';
|
|
17
17
|
export { GameAuth } from './GameAuth.js';
|
|
18
18
|
export { GameButton, type GameButtonProps, type GameButtonSize, type GameButtonVariant, } from './GameButton.js';
|
|
19
19
|
export { GameConfirm, type GameConfirmProps } from './GameConfirm.js';
|
|
20
20
|
export { GameModal, type GameModalProps } from './GameModal.js';
|
|
21
21
|
export { GameOverScreen, type GameOverScreenProps } from './GameOverScreen.js';
|
|
22
|
-
export { GameResultScreen, type GameResultScreenProps, type GameResultStat,
|
|
22
|
+
export { GameResultScreen, type GameResultScreenProps, type GameResultStat, } from './GameResultScreen.js';
|
|
23
23
|
export { GameShell, type GameShellProps } from './GameShell.js';
|
|
24
24
|
export { GameTextSizeToggle } from './GameTextSizeToggle.js';
|
|
25
25
|
export { GameThemeToggle } from './GameThemeToggle.js';
|
|
26
26
|
export { GameTopbar, type GameTopbarProps, type GameTopbarStat, } from './GameTopbar.js';
|
|
27
27
|
export { useSound } from './SoundContext.js';
|
|
28
|
-
export {
|
|
28
|
+
export { StartScreen, type StartScreenProps, type StartScreenStep, } from './StartScreen.js';
|
|
29
29
|
export { type ColourTokens, DARK_COLOUR_OVERRIDES, DARK_COLOURS, GAME_TOKENS_CSS, LIGHT_COLOURS, MOTION_TOKENS, type MotionTokens, REDUCED_MOTION_DURATIONS, SHAPE_TOKENS, type ShapeTokens, TYPOGRAPHY_TOKENS, type TypographyTokens, } from './tokens.js';
|
|
30
30
|
export { type User, useAuth } from './useAuth.js';
|
|
31
31
|
export { useGameSounds } from './useGameSounds.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EACL,gBAAgB,EAChB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EACL,gBAAgB,EAChB,QAAQ,EACR,KAAK,aAAa,GACnB,MAAM,eAAe,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,iBAAiB,CAAC;AAKzB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,KAAK,YAAY,EACjB,qBAAqB,EACrB,YAAY,EACZ,eAAe,EACf,aAAa,EACb,aAAa,EACb,KAAK,YAAY,EACjB,wBAAwB,EACxB,YAAY,EACZ,KAAK,WAAW,EAChB,iBAAiB,EACjB,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,KAAK,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -12,14 +12,14 @@
|
|
|
12
12
|
* What you get:
|
|
13
13
|
* <GameShell topbar={<GameTopbar score={42} />}>{your game}</GameShell>
|
|
14
14
|
*/
|
|
15
|
-
export { CONFETTI_COLOURS,
|
|
15
|
+
export { CONFETTI_COLOURS, Confetti, } from './Confetti.js';
|
|
16
16
|
export * from './feel/index.js';
|
|
17
17
|
export { GameAuth } from './GameAuth.js';
|
|
18
18
|
export { GameButton, } from './GameButton.js';
|
|
19
19
|
export { GameConfirm } from './GameConfirm.js';
|
|
20
20
|
export { GameModal } from './GameModal.js';
|
|
21
21
|
export { GameOverScreen } from './GameOverScreen.js';
|
|
22
|
-
export { GameResultScreen,
|
|
22
|
+
export { GameResultScreen, } from './GameResultScreen.js';
|
|
23
23
|
export { GameShell } from './GameShell.js';
|
|
24
24
|
export { GameTextSizeToggle } from './GameTextSizeToggle.js';
|
|
25
25
|
export { GameThemeToggle } from './GameThemeToggle.js';
|
|
@@ -29,7 +29,7 @@ export { GameTopbar, } from './GameTopbar.js';
|
|
|
29
29
|
// intact on purpose, as is the workers/leaderboard API and its data.
|
|
30
30
|
// export { Leaderboard, type LeaderboardProps } from './Leaderboard.js';
|
|
31
31
|
export { useSound } from './SoundContext.js';
|
|
32
|
-
export {
|
|
32
|
+
export { StartScreen, } from './StartScreen.js';
|
|
33
33
|
export { DARK_COLOUR_OVERRIDES, DARK_COLOURS, GAME_TOKENS_CSS, LIGHT_COLOURS, MOTION_TOKENS, REDUCED_MOTION_DURATIONS, SHAPE_TOKENS, TYPOGRAPHY_TOKENS, } from './tokens.js';
|
|
34
34
|
export { useAuth } from './useAuth.js';
|
|
35
35
|
export { useGameSounds } from './useGameSounds.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EACL,gBAAgB,EAChB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EACL,gBAAgB,EAChB,QAAQ,GAET,MAAM,eAAe,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACL,UAAU,GAIX,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,cAAc,EAA4B,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EACL,gBAAgB,GAGjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EACL,UAAU,GAGX,MAAM,iBAAiB,CAAC;AACzB,+EAA+E;AAC/E,+EAA+E;AAC/E,qEAAqE;AACrE,yEAAyE;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EACL,WAAW,GAGZ,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAEL,qBAAqB,EACrB,YAAY,EACZ,eAAe,EACf,aAAa,EACb,aAAa,EAEb,wBAAwB,EACxB,YAAY,EAEZ,iBAAiB,GAElB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAa,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,yDAAyD;AACzD,WAAW;AACX,2BAA2B;AAC3B,oBAAoB;AACpB,gCAAgC"}
|
package/dist/theme.css
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @freegamestore/games theme: the Tailwind entries the SDK components use
|
|
3
|
+
* beyond the token mapping every template already carries (paper, panel, ink,
|
|
4
|
+
* muted, line, accent, success, warning, danger, font-display).
|
|
5
|
+
*
|
|
6
|
+
* Import it once from the game's index.css, after `@import "tailwindcss"` and
|
|
7
|
+
* the SDK `@source`:
|
|
8
|
+
*
|
|
9
|
+
* @import "tailwindcss";
|
|
10
|
+
* @source "../node_modules/@freegamestore/games/dist";
|
|
11
|
+
* @import "@freegamestore/games/theme.css";
|
|
12
|
+
*
|
|
13
|
+
* Or copy this file's contents into index.css. Durations and easings read the
|
|
14
|
+
* motion tokens (`--motion-*`) with the same fallbacks as tokens.ts.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
@theme inline {
|
|
18
|
+
--color-accent-ink: var(--accent-ink, var(--accent));
|
|
19
|
+
--color-accent-soft: var(--accent-soft, transparent);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@theme {
|
|
23
|
+
--radius-fgs: var(--radius, 1.25rem);
|
|
24
|
+
--text-fgs-stat: var(--text-stat, 1.25rem);
|
|
25
|
+
--text-fgs-title: var(--text-title, clamp(2rem, 9vw, 2.6rem));
|
|
26
|
+
--text-fgs-display: var(--text-display, clamp(2.25rem, 11vw, 3.25rem));
|
|
27
|
+
|
|
28
|
+
--animate-fgs-fade: fgs-fade var(--motion-base, 240ms) ease-out both;
|
|
29
|
+
--animate-fgs-enter: fgs-enter var(--motion-slow, 420ms) cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
|
|
30
|
+
--animate-fgs-enter-title: fgs-enter var(--motion-slow, 420ms) cubic-bezier(0.2, 0.9, 0.3, 1.2)
|
|
31
|
+
120ms both;
|
|
32
|
+
--animate-fgs-enter-stat: fgs-enter var(--motion-base, 240ms) ease-out
|
|
33
|
+
calc(260ms + var(--i, 0) * 70ms) both;
|
|
34
|
+
--animate-fgs-enter-actions: fgs-enter var(--motion-base, 240ms) ease-out 480ms both;
|
|
35
|
+
--animate-fgs-enter-badge: fgs-enter var(--motion-base, 240ms) ease-out 560ms both;
|
|
36
|
+
--animate-fgs-rise: fgs-rise var(--motion-slow, 420ms) cubic-bezier(0.2, 0.8, 0.2, 1)
|
|
37
|
+
var(--delay, 0ms) both;
|
|
38
|
+
--animate-fgs-rise-step: fgs-rise var(--motion-base, 240ms) ease-out calc(var(--i, 0) * 60ms) both;
|
|
39
|
+
--animate-fgs-float: fgs-float 7s ease-in-out infinite;
|
|
40
|
+
--animate-fgs-confetti: fgs-confetti-fall var(--duration, 1.6s) cubic-bezier(0.3, 0, 0.7, 1)
|
|
41
|
+
var(--delay, 0ms) both;
|
|
42
|
+
|
|
43
|
+
@keyframes fgs-fade {
|
|
44
|
+
from {
|
|
45
|
+
opacity: 0;
|
|
46
|
+
}
|
|
47
|
+
to {
|
|
48
|
+
opacity: 1;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
@keyframes fgs-enter {
|
|
52
|
+
from {
|
|
53
|
+
opacity: 0;
|
|
54
|
+
transform: translateY(10px);
|
|
55
|
+
}
|
|
56
|
+
to {
|
|
57
|
+
opacity: 1;
|
|
58
|
+
transform: none;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
@keyframes fgs-rise {
|
|
62
|
+
from {
|
|
63
|
+
opacity: 0;
|
|
64
|
+
transform: translateY(12px);
|
|
65
|
+
}
|
|
66
|
+
to {
|
|
67
|
+
opacity: 1;
|
|
68
|
+
transform: none;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
@keyframes fgs-float {
|
|
72
|
+
0%,
|
|
73
|
+
100% {
|
|
74
|
+
transform: translateY(0) rotate(0deg);
|
|
75
|
+
}
|
|
76
|
+
50% {
|
|
77
|
+
transform: translateY(-4px) rotate(-1deg);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
@keyframes fgs-confetti-fall {
|
|
81
|
+
from {
|
|
82
|
+
transform: translate3d(0, 0, 0) rotate(0deg);
|
|
83
|
+
opacity: 1;
|
|
84
|
+
}
|
|
85
|
+
80% {
|
|
86
|
+
opacity: 1;
|
|
87
|
+
}
|
|
88
|
+
to {
|
|
89
|
+
transform: translate3d(var(--drift, 0px), 620px, 0) rotate(var(--spin, 360deg));
|
|
90
|
+
opacity: 0;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@freegamestore/games",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.19.1",
|
|
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",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
"./feel": {
|
|
15
15
|
"types": "./dist/feel/index.d.ts",
|
|
16
16
|
"import": "./dist/feel/index.js"
|
|
17
|
-
}
|
|
17
|
+
},
|
|
18
|
+
"./theme.css": "./dist/theme.css"
|
|
18
19
|
},
|
|
19
20
|
"homepage": "https://github.com/freegamestore-online/platform#readme",
|
|
20
21
|
"repository": {
|
|
@@ -60,7 +61,7 @@
|
|
|
60
61
|
},
|
|
61
62
|
"sideEffects": false,
|
|
62
63
|
"scripts": {
|
|
63
|
-
"build": "tsc && cp src/GameTopbar.module.css dist/",
|
|
64
|
+
"build": "tsc && cp src/GameTopbar.module.css src/theme.css dist/",
|
|
64
65
|
"typecheck": "tsc --noEmit",
|
|
65
66
|
"test": "vitest run"
|
|
66
67
|
}
|