@rydr/game-sdk 4.0.0 → 6.0.0
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 +36 -23
- package/dist/client/HardwareStore.d.ts +10 -0
- package/dist/client/HardwareStore.d.ts.map +1 -1
- package/dist/client/HardwareStore.js +10 -0
- package/dist/client/HardwareStore.js.map +1 -1
- package/dist/client/PlatformClient.d.ts +48 -13
- package/dist/client/PlatformClient.d.ts.map +1 -1
- package/dist/client/PlatformClient.js +44 -13
- package/dist/client/PlatformClient.js.map +1 -1
- package/dist/host/PlatformHost.d.ts +35 -12
- package/dist/host/PlatformHost.d.ts.map +1 -1
- package/dist/host/PlatformHost.js +41 -4
- package/dist/host/PlatformHost.js.map +1 -1
- package/dist/nav/README.md +5 -5
- package/dist/nav/scroll-nav.d.ts.map +1 -1
- package/dist/nav/scroll-nav.js +8 -4
- package/dist/nav/scroll-nav.js.map +1 -1
- package/dist/nav/spatial-nav.d.ts.map +1 -1
- package/dist/nav/spatial-nav.js +8 -4
- package/dist/nav/spatial-nav.js.map +1 -1
- package/dist/protocol/buttons.d.ts +96 -33
- package/dist/protocol/buttons.d.ts.map +1 -1
- package/dist/protocol/buttons.js +58 -21
- package/dist/protocol/buttons.js.map +1 -1
- package/dist/protocol/capabilities.d.ts +1 -1
- package/dist/protocol/glyphs.d.ts +47 -0
- package/dist/protocol/glyphs.d.ts.map +1 -0
- package/dist/protocol/glyphs.js +75 -0
- package/dist/protocol/glyphs.js.map +1 -0
- package/dist/protocol/index.d.ts +1 -0
- package/dist/protocol/index.d.ts.map +1 -1
- package/dist/protocol/index.js +1 -0
- package/dist/protocol/index.js.map +1 -1
- package/dist/protocol/messages.d.ts +24 -9
- package/dist/protocol/messages.d.ts.map +1 -1
- package/dist/protocol/perf.d.ts +37 -0
- package/dist/protocol/perf.d.ts.map +1 -0
- package/dist/protocol/perf.js +17 -0
- package/dist/protocol/perf.js.map +1 -0
- package/dist/protocol/version.d.ts +2 -2
- package/dist/protocol/version.d.ts.map +1 -1
- package/dist/protocol/version.js +48 -2
- package/dist/protocol/version.js.map +1 -1
- package/dist/three/README.md +1 -1
- package/dist/three/perf-marks.d.ts +2 -21
- package/dist/three/perf-marks.d.ts.map +1 -1
- package/dist/three/perf-marks.js.map +1 -1
- package/dist/ui/README.md +9 -6
- package/dist/ui/action-card.d.ts +4 -4
- package/dist/ui/action-card.d.ts.map +1 -1
- package/dist/ui/action-card.js.map +1 -1
- package/dist/ui/action-diamond.d.ts +3 -3
- package/dist/ui/action-diamond.d.ts.map +1 -1
- package/dist/ui/action-diamond.js +4 -2
- package/dist/ui/action-diamond.js.map +1 -1
- package/dist/ui/choice-card.d.ts +3 -3
- package/dist/ui/choice-card.d.ts.map +1 -1
- package/dist/ui/choice-card.js +1 -1
- package/dist/ui/choice-card.js.map +1 -1
- package/dist/ui/dialogue-card.d.ts +3 -3
- package/dist/ui/dialogue-card.d.ts.map +1 -1
- package/dist/ui/dialogue-card.js +1 -1
- package/dist/ui/dialogue-card.js.map +1 -1
- package/dist/ui/heat-vignette.d.ts +75 -0
- package/dist/ui/heat-vignette.d.ts.map +1 -0
- package/dist/ui/heat-vignette.js +126 -0
- package/dist/ui/heat-vignette.js.map +1 -0
- package/dist/ui/index.d.ts +7 -0
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +7 -0
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/keycap.d.ts +19 -5
- package/dist/ui/keycap.d.ts.map +1 -1
- package/dist/ui/keycap.js +63 -9
- package/dist/ui/keycap.js.map +1 -1
- package/dist/ui/labeled-diamond.d.ts +4 -4
- package/dist/ui/labeled-diamond.d.ts.map +1 -1
- package/dist/ui/labeled-diamond.js +7 -4
- package/dist/ui/labeled-diamond.js.map +1 -1
- package/dist/ui/overheat-glitch.d.ts +56 -0
- package/dist/ui/overheat-glitch.d.ts.map +1 -0
- package/dist/ui/overheat-glitch.js +177 -0
- package/dist/ui/overheat-glitch.js.map +1 -0
- package/dist/ui/overheat-hud-bar.d.ts +79 -0
- package/dist/ui/overheat-hud-bar.d.ts.map +1 -0
- package/dist/ui/overheat-hud-bar.js +302 -0
- package/dist/ui/overheat-hud-bar.js.map +1 -0
- package/dist/ui/showcase/index.d.ts.map +1 -1
- package/dist/ui/showcase/index.js +53 -27
- package/dist/ui/showcase/index.js.map +1 -1
- package/dist/ui/solo-labeled-diamond.d.ts +5 -5
- package/dist/ui/solo-labeled-diamond.d.ts.map +1 -1
- package/dist/ui/solo-labeled-diamond.js +4 -2
- package/dist/ui/solo-labeled-diamond.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `mountOverheatGlitch` — the **overheat lockout glitch overlay**, on its own.
|
|
3
|
+
*
|
|
4
|
+
* The "your engine just blew" screen dressing: a one-shot RGB chromatic-aberration burst on the
|
|
5
|
+
* frame the lockout begins (cyan slides left, red slides right, white pops in the middle, ~160 ms),
|
|
6
|
+
* then sustained scanlines + a red noise wash for as long as the lockout lasts. It makes a forced
|
|
7
|
+
* cooldown feel like a hardware failure rather than a stat change.
|
|
8
|
+
*
|
|
9
|
+
* This is the glitch **alone**, deliberately separable: a game that draws its own heat bar (e.g. the
|
|
10
|
+
* racing game's in-canvas gauge) still wants the lockout drama. Pair it with
|
|
11
|
+
* {@link mountHeatVignette} for the peripheral heat cue, or take the whole pre-assembled package —
|
|
12
|
+
* bar + vignette + glitch — from {@link mountOverheatHudBar}.
|
|
13
|
+
*
|
|
14
|
+
* Self-contained DOM/CSS like the rest of `@rydr/game-sdk/ui`: it injects its own scoped
|
|
15
|
+
* `.rydr-heat-glitch*` stylesheet once into `<head>`, needs no global styles, no CSS variables and no
|
|
16
|
+
* three.js. It is driven by a single boolean — the game owns the lockout state.
|
|
17
|
+
*
|
|
18
|
+
* ```ts
|
|
19
|
+
* const glitch = mountOverheatGlitch(hudHost);
|
|
20
|
+
* // every frame (edge-detected internally — cheap to call unconditionally):
|
|
21
|
+
* glitch.setLocked(heat.isLocked);
|
|
22
|
+
* // on teardown:
|
|
23
|
+
* glitch.dispose();
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* **Host contract:** the overlay is `position: absolute; inset: 0` at `z-index: 21`, so `host` must
|
|
27
|
+
* be positioned (and ideally `isolation: isolate`, so the z-index doesn't leak past it). A
|
|
28
|
+
* full-viewport `position: fixed; inset: 0; pointer-events: none; isolation: isolate` div over the
|
|
29
|
+
* game canvas is the intended host.
|
|
30
|
+
*/
|
|
31
|
+
/** Options for {@link mountOverheatGlitch}. */
|
|
32
|
+
export interface OverheatGlitchOptions {
|
|
33
|
+
/**
|
|
34
|
+
* Stacking order inside the host. Default `21` — above {@link mountHeatVignette} (19) and
|
|
35
|
+
* {@link mountOverheatHudBar}'s bar (20), so the three compose in the intended order.
|
|
36
|
+
*/
|
|
37
|
+
zIndex?: number;
|
|
38
|
+
}
|
|
39
|
+
/** Live handle to a mounted glitch overlay. Returned by {@link mountOverheatGlitch}. */
|
|
40
|
+
export interface OverheatGlitch {
|
|
41
|
+
/** The overlay element (already appended to the host). */
|
|
42
|
+
readonly root: HTMLDivElement;
|
|
43
|
+
/**
|
|
44
|
+
* Set the lockout state. Safe to call every frame — the entry burst fires only on the
|
|
45
|
+
* `false → true` edge, and the sustained dressing follows the flag.
|
|
46
|
+
*/
|
|
47
|
+
setLocked(locked: boolean): void;
|
|
48
|
+
/** Remove the overlay from the host and cancel any pending entry beat. Idempotent. */
|
|
49
|
+
dispose(): void;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Mount an overheat glitch overlay into `host`. See the module header for the host contract; drive
|
|
53
|
+
* it with {@link OverheatGlitch.setLocked}.
|
|
54
|
+
*/
|
|
55
|
+
export declare function mountOverheatGlitch(host: HTMLElement, opts?: OverheatGlitchOptions): OverheatGlitch;
|
|
56
|
+
//# sourceMappingURL=overheat-glitch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overheat-glitch.d.ts","sourceRoot":"","sources":["../../src/ui/overheat-glitch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAOH,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wFAAwF;AACxF,MAAM,WAAW,cAAc;IAC7B,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,sFAAsF;IACtF,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,EACjB,IAAI,GAAE,qBAA0B,GAC/B,cAAc,CAqChB"}
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `mountOverheatGlitch` — the **overheat lockout glitch overlay**, on its own.
|
|
3
|
+
*
|
|
4
|
+
* The "your engine just blew" screen dressing: a one-shot RGB chromatic-aberration burst on the
|
|
5
|
+
* frame the lockout begins (cyan slides left, red slides right, white pops in the middle, ~160 ms),
|
|
6
|
+
* then sustained scanlines + a red noise wash for as long as the lockout lasts. It makes a forced
|
|
7
|
+
* cooldown feel like a hardware failure rather than a stat change.
|
|
8
|
+
*
|
|
9
|
+
* This is the glitch **alone**, deliberately separable: a game that draws its own heat bar (e.g. the
|
|
10
|
+
* racing game's in-canvas gauge) still wants the lockout drama. Pair it with
|
|
11
|
+
* {@link mountHeatVignette} for the peripheral heat cue, or take the whole pre-assembled package —
|
|
12
|
+
* bar + vignette + glitch — from {@link mountOverheatHudBar}.
|
|
13
|
+
*
|
|
14
|
+
* Self-contained DOM/CSS like the rest of `@rydr/game-sdk/ui`: it injects its own scoped
|
|
15
|
+
* `.rydr-heat-glitch*` stylesheet once into `<head>`, needs no global styles, no CSS variables and no
|
|
16
|
+
* three.js. It is driven by a single boolean — the game owns the lockout state.
|
|
17
|
+
*
|
|
18
|
+
* ```ts
|
|
19
|
+
* const glitch = mountOverheatGlitch(hudHost);
|
|
20
|
+
* // every frame (edge-detected internally — cheap to call unconditionally):
|
|
21
|
+
* glitch.setLocked(heat.isLocked);
|
|
22
|
+
* // on teardown:
|
|
23
|
+
* glitch.dispose();
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* **Host contract:** the overlay is `position: absolute; inset: 0` at `z-index: 21`, so `host` must
|
|
27
|
+
* be positioned (and ideally `isolation: isolate`, so the z-index doesn't leak past it). A
|
|
28
|
+
* full-viewport `position: fixed; inset: 0; pointer-events: none; isolation: isolate` div over the
|
|
29
|
+
* game canvas is the intended host.
|
|
30
|
+
*/
|
|
31
|
+
const STYLE_ID = "rydr-heat-glitch-css";
|
|
32
|
+
/** How long the one-shot entry burst is allowed to run before its marker class is cleared (ms). */
|
|
33
|
+
const ENTRY_BEAT_MS = 500;
|
|
34
|
+
/**
|
|
35
|
+
* Mount an overheat glitch overlay into `host`. See the module header for the host contract; drive
|
|
36
|
+
* it with {@link OverheatGlitch.setLocked}.
|
|
37
|
+
*/
|
|
38
|
+
export function mountOverheatGlitch(host, opts = {}) {
|
|
39
|
+
injectCss();
|
|
40
|
+
const root = document.createElement("div");
|
|
41
|
+
root.className = "rydr-heat-glitch";
|
|
42
|
+
if (opts.zIndex !== undefined)
|
|
43
|
+
root.style.zIndex = String(opts.zIndex);
|
|
44
|
+
root.innerHTML = `
|
|
45
|
+
<div class="rydr-heat-glitch-scanlines"></div>
|
|
46
|
+
<div class="rydr-heat-glitch-noise"></div>
|
|
47
|
+
<div class="rydr-heat-glitch-flash">
|
|
48
|
+
<div class="flash-cyan"></div>
|
|
49
|
+
<div class="flash-red"></div>
|
|
50
|
+
<div class="flash-white"></div>
|
|
51
|
+
</div>
|
|
52
|
+
`;
|
|
53
|
+
host.appendChild(root);
|
|
54
|
+
let lastLocked = false;
|
|
55
|
+
/** Timer clearing the one-shot `.entry` marker after the entry burst. */
|
|
56
|
+
let entryTimer = 0;
|
|
57
|
+
return {
|
|
58
|
+
root,
|
|
59
|
+
setLocked(locked) {
|
|
60
|
+
if (locked === lastLocked)
|
|
61
|
+
return;
|
|
62
|
+
lastLocked = locked;
|
|
63
|
+
root.classList.toggle("locked", locked);
|
|
64
|
+
if (!locked)
|
|
65
|
+
return;
|
|
66
|
+
root.classList.add("entry");
|
|
67
|
+
clearTimeout(entryTimer);
|
|
68
|
+
entryTimer = window.setTimeout(() => root.classList.remove("entry"), ENTRY_BEAT_MS);
|
|
69
|
+
},
|
|
70
|
+
dispose() {
|
|
71
|
+
clearTimeout(entryTimer);
|
|
72
|
+
root.remove();
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
let cssInjected = false;
|
|
77
|
+
/** Inject the scoped glitch CSS once per document. */
|
|
78
|
+
function injectCss() {
|
|
79
|
+
if (cssInjected || document.getElementById(STYLE_ID)) {
|
|
80
|
+
cssInjected = true;
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
const style = document.createElement("style");
|
|
84
|
+
style.id = STYLE_ID;
|
|
85
|
+
style.textContent = CSS;
|
|
86
|
+
document.head.appendChild(style);
|
|
87
|
+
cssInjected = true;
|
|
88
|
+
}
|
|
89
|
+
const CSS = `
|
|
90
|
+
.rydr-heat-glitch {
|
|
91
|
+
position: absolute;
|
|
92
|
+
inset: 0;
|
|
93
|
+
pointer-events: none;
|
|
94
|
+
z-index: 21;
|
|
95
|
+
opacity: 0;
|
|
96
|
+
transition: opacity 0.2s;
|
|
97
|
+
}
|
|
98
|
+
.rydr-heat-glitch.locked { opacity: 1; }
|
|
99
|
+
|
|
100
|
+
/* ─── SUSTAINED DRESSING ──────────────────────────────────────── */
|
|
101
|
+
.rydr-heat-glitch-scanlines {
|
|
102
|
+
position: absolute;
|
|
103
|
+
inset: 0;
|
|
104
|
+
background: repeating-linear-gradient(
|
|
105
|
+
0deg,
|
|
106
|
+
rgba(0,0,0,0.18) 0 2px,
|
|
107
|
+
transparent 2px 4px
|
|
108
|
+
);
|
|
109
|
+
animation: rydr-heat-glitch-scan 0.7s linear infinite;
|
|
110
|
+
}
|
|
111
|
+
@keyframes rydr-heat-glitch-scan {
|
|
112
|
+
from { background-position: 0 0; }
|
|
113
|
+
to { background-position: 0 8px; }
|
|
114
|
+
}
|
|
115
|
+
.rydr-heat-glitch-noise {
|
|
116
|
+
position: absolute;
|
|
117
|
+
inset: 0;
|
|
118
|
+
background:
|
|
119
|
+
radial-gradient(at 20% 30%, rgba(239,68,68,0.12), transparent 60%),
|
|
120
|
+
radial-gradient(at 80% 70%, rgba(239,68,68,0.10), transparent 55%),
|
|
121
|
+
radial-gradient(at 50% 90%, rgba(220,38,38,0.08), transparent 50%);
|
|
122
|
+
mix-blend-mode: screen;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* ─── ENTRY BEAT — RGB FLASH ──────────────────────────────────────
|
|
126
|
+
Full-screen chromatic-aberration burst when the lockout begins. Cyan
|
|
127
|
+
layer slides left, red slides right, white pops in the middle. ~160 ms. */
|
|
128
|
+
.rydr-heat-glitch-flash {
|
|
129
|
+
position: absolute;
|
|
130
|
+
inset: 0;
|
|
131
|
+
opacity: 0;
|
|
132
|
+
pointer-events: none;
|
|
133
|
+
}
|
|
134
|
+
.rydr-heat-glitch-flash .flash-cyan,
|
|
135
|
+
.rydr-heat-glitch-flash .flash-red,
|
|
136
|
+
.rydr-heat-glitch-flash .flash-white {
|
|
137
|
+
position: absolute;
|
|
138
|
+
inset: 0;
|
|
139
|
+
mix-blend-mode: screen;
|
|
140
|
+
}
|
|
141
|
+
.rydr-heat-glitch-flash .flash-cyan { background: rgba(0, 220, 255, 0.40); }
|
|
142
|
+
.rydr-heat-glitch-flash .flash-red { background: rgba(255, 0, 80, 0.40); }
|
|
143
|
+
.rydr-heat-glitch-flash .flash-white { background: rgba(255, 255, 255, 0.35); }
|
|
144
|
+
|
|
145
|
+
.rydr-heat-glitch.entry .rydr-heat-glitch-flash {
|
|
146
|
+
animation: rydr-heat-glitch-flash-shell 0.16s ease-out forwards;
|
|
147
|
+
}
|
|
148
|
+
.rydr-heat-glitch.entry .rydr-heat-glitch-flash .flash-cyan {
|
|
149
|
+
animation: rydr-heat-glitch-shift-left 0.16s ease-out forwards;
|
|
150
|
+
}
|
|
151
|
+
.rydr-heat-glitch.entry .rydr-heat-glitch-flash .flash-red {
|
|
152
|
+
animation: rydr-heat-glitch-shift-right 0.16s ease-out forwards;
|
|
153
|
+
}
|
|
154
|
+
.rydr-heat-glitch.entry .rydr-heat-glitch-flash .flash-white {
|
|
155
|
+
animation: rydr-heat-glitch-pop 0.16s ease-out forwards;
|
|
156
|
+
}
|
|
157
|
+
@keyframes rydr-heat-glitch-flash-shell {
|
|
158
|
+
0% { opacity: 0; }
|
|
159
|
+
35% { opacity: 1; }
|
|
160
|
+
100% { opacity: 0; }
|
|
161
|
+
}
|
|
162
|
+
@keyframes rydr-heat-glitch-shift-left {
|
|
163
|
+
0% { transform: translateX(0); }
|
|
164
|
+
35% { transform: translateX(-14px); }
|
|
165
|
+
100% { transform: translateX(0); }
|
|
166
|
+
}
|
|
167
|
+
@keyframes rydr-heat-glitch-shift-right {
|
|
168
|
+
0% { transform: translateX(0); }
|
|
169
|
+
35% { transform: translateX(14px); }
|
|
170
|
+
100% { transform: translateX(0); }
|
|
171
|
+
}
|
|
172
|
+
@keyframes rydr-heat-glitch-pop {
|
|
173
|
+
0%, 100% { opacity: 0; }
|
|
174
|
+
35% { opacity: 1; }
|
|
175
|
+
}
|
|
176
|
+
`;
|
|
177
|
+
//# sourceMappingURL=overheat-glitch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overheat-glitch.js","sourceRoot":"","sources":["../../src/ui/overheat-glitch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,MAAM,QAAQ,GAAG,sBAAsB,CAAC;AAExC,mGAAmG;AACnG,MAAM,aAAa,GAAG,GAAG,CAAC;AAwB1B;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CACjC,IAAiB,EACjB,OAA8B,EAAE;IAEhC,SAAS,EAAE,CAAC;IAEZ,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,SAAS,GAAG,kBAAkB,CAAC;IACpC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS;QAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACvE,IAAI,CAAC,SAAS,GAAG;;;;;;;;GAQhB,CAAC;IACF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAEvB,IAAI,UAAU,GAAG,KAAK,CAAC;IACvB,yEAAyE;IACzE,IAAI,UAAU,GAAG,CAAC,CAAC;IAEnB,OAAO;QACL,IAAI;QACJ,SAAS,CAAC,MAAe;YACvB,IAAI,MAAM,KAAK,UAAU;gBAAE,OAAO;YAClC,UAAU,GAAG,MAAM,CAAC;YACpB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YACxC,IAAI,CAAC,MAAM;gBAAE,OAAO;YACpB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAC5B,YAAY,CAAC,UAAU,CAAC,CAAC;YACzB,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC,CAAC;QACtF,CAAC;QACD,OAAO;YACL,YAAY,CAAC,UAAU,CAAC,CAAC;YACzB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;KACF,CAAC;AACJ,CAAC;AAED,IAAI,WAAW,GAAG,KAAK,CAAC;AAExB,sDAAsD;AACtD,SAAS,SAAS;IAChB,IAAI,WAAW,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACrD,WAAW,GAAG,IAAI,CAAC;QACnB,OAAO;IACT,CAAC;IACD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,WAAW,GAAG,IAAI,CAAC;AACrB,CAAC;AAED,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFX,CAAC"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `mountOverheatHudBar` — the **complete overheat HUD package**: a big centered inferno bar with
|
|
3
|
+
* escalating warning stages, plus the screen-edge vignette and the lockout glitch overlay, wired
|
|
4
|
+
* together and driven by one `update()` call.
|
|
5
|
+
*
|
|
6
|
+
* This is the batteries-included option, and the one to reach for if you just want a heat mechanic
|
|
7
|
+
* to look right. It is assembled from the two separable pieces — {@link mountHeatVignette} and
|
|
8
|
+
* {@link mountOverheatGlitch} — so a game that draws its **own** heat bar (e.g. the racing game's
|
|
9
|
+
* in-canvas gauge) can take just the peripheral cues and skip this module entirely. Same visual
|
|
10
|
+
* language either way.
|
|
11
|
+
*
|
|
12
|
+
* What it renders:
|
|
13
|
+
* · a label that reads `OVERHEATING...` while heat builds and `OVERHEAT` once locked,
|
|
14
|
+
* · a track + fire-gradient fill (amber → orange → red) that pulses faster at each stage
|
|
15
|
+
* ({@link HEAT_STAGE_THRESHOLDS}: slow → fast → panic) and washes solid red near full,
|
|
16
|
+
* · a `COOLING DOWN` block with an optional ticking countdown during the lockout,
|
|
17
|
+
* · the vignette (z 19) and glitch overlay (z 21) around the bar (z 20).
|
|
18
|
+
*
|
|
19
|
+
* ```ts
|
|
20
|
+
* const overheat = mountOverheatHudBar(hudHost);
|
|
21
|
+
* // every frame:
|
|
22
|
+
* overheat.update(heat.fillRatio, heat.isLocked, heat.cooldownRemaining);
|
|
23
|
+
* // on teardown:
|
|
24
|
+
* overheat.dispose();
|
|
25
|
+
* ```
|
|
26
|
+
*
|
|
27
|
+
* Lockouts come in two flavours and both are supported: pass a positive `lockoutRemaining` for a
|
|
28
|
+
* fixed countdown (the digits tick down), or omit it for a continuous/timerless cooldown (the
|
|
29
|
+
* `COOLING DOWN` title and glitch still show, digits hidden).
|
|
30
|
+
*
|
|
31
|
+
* **Host contract:** everything is `position: absolute` inside `host`, which must be positioned and
|
|
32
|
+
* should set `isolation: isolate` so the internal z-indexes (19–21) don't leak. A full-viewport
|
|
33
|
+
* `position: fixed; inset: 0; pointer-events: none; isolation: isolate` div over the game canvas is
|
|
34
|
+
* the intended host.
|
|
35
|
+
*
|
|
36
|
+
* **Fonts:** the bar uses Rajdhani + Share Tech Mono and loads them from Google Fonts on first mount
|
|
37
|
+
* — the one place this kit reaches off-origin. Pass `loadFonts: false` to skip that (the CSS falls
|
|
38
|
+
* back to the local monospace/sans stack) if your page has a strict CSP or ships the faces itself.
|
|
39
|
+
*/
|
|
40
|
+
import type { HeatStage, HeatVignette } from "./heat-vignette.js";
|
|
41
|
+
import type { OverheatGlitch } from "./overheat-glitch.js";
|
|
42
|
+
/** Options for {@link mountOverheatHudBar}. */
|
|
43
|
+
export interface OverheatHudBarOptions {
|
|
44
|
+
/** Stage cut-offs (0..1) for the pulse ramp + vignette. Default {@link HEAT_STAGE_THRESHOLDS}. */
|
|
45
|
+
thresholds?: Readonly<Record<Exclude<HeatStage, "idle">, number>>;
|
|
46
|
+
/** Load Rajdhani + Share Tech Mono from Google Fonts on first mount. Default `true`. */
|
|
47
|
+
loadFonts?: boolean;
|
|
48
|
+
/** Render the screen-edge vignette alongside the bar. Default `true`. */
|
|
49
|
+
vignette?: boolean;
|
|
50
|
+
/** Render the lockout glitch overlay alongside the bar. Default `true`. */
|
|
51
|
+
glitch?: boolean;
|
|
52
|
+
}
|
|
53
|
+
/** Live handle to a mounted overheat HUD. Returned by {@link mountOverheatHudBar}. */
|
|
54
|
+
export interface OverheatHudBar {
|
|
55
|
+
/** The bar element (label + track + COOLING DOWN block). */
|
|
56
|
+
readonly root: HTMLDivElement;
|
|
57
|
+
/** The vignette handle, or `null` when `vignette: false`. */
|
|
58
|
+
readonly vignette: HeatVignette | null;
|
|
59
|
+
/** The glitch-overlay handle, or `null` when `glitch: false`. */
|
|
60
|
+
readonly glitch: OverheatGlitch | null;
|
|
61
|
+
/**
|
|
62
|
+
* Drive the whole package for one frame.
|
|
63
|
+
*
|
|
64
|
+
* @param heat01 Heat as a 0..1 fill ratio.
|
|
65
|
+
* @param locked True while the game is in its overheat lockout — forces the danger vignette +
|
|
66
|
+
* glitch and swaps the label to `OVERHEAT`.
|
|
67
|
+
* @param lockoutRemaining Seconds left in a **fixed** lockout, shown as a ticking countdown. Omit
|
|
68
|
+
* or pass `0` for a continuous (timerless) cooldown — the digits stay hidden.
|
|
69
|
+
*/
|
|
70
|
+
update(heat01: number, locked?: boolean, lockoutRemaining?: number): void;
|
|
71
|
+
/** Remove the bar, vignette and glitch overlay from the host. Idempotent. */
|
|
72
|
+
dispose(): void;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Mount the full overheat HUD (bar + vignette + glitch) into `host`. See the module header for the
|
|
76
|
+
* host contract; drive it every frame with {@link OverheatHudBar.update}.
|
|
77
|
+
*/
|
|
78
|
+
export declare function mountOverheatHudBar(host: HTMLElement, opts?: OverheatHudBarOptions): OverheatHudBar;
|
|
79
|
+
//# sourceMappingURL=overheat-hud-bar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overheat-hud-bar.d.ts","sourceRoot":"","sources":["../../src/ui/overheat-hud-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAQ3D,+CAA+C;AAC/C,MAAM,WAAW,qBAAqB;IACpC,kGAAkG;IAClG,UAAU,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAClE,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,sFAAsF;AACtF,MAAM,WAAW,cAAc;IAC7B,4DAA4D;IAC5D,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAC9B,6DAA6D;IAC7D,QAAQ,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IACvC,iEAAiE;IACjE,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IACvC;;;;;;;;OAQG;IACH,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1E,6EAA6E;IAC7E,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,EACjB,IAAI,GAAE,qBAA0B,GAC/B,cAAc,CA+FhB"}
|
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* `mountOverheatHudBar` — the **complete overheat HUD package**: a big centered inferno bar with
|
|
3
|
+
* escalating warning stages, plus the screen-edge vignette and the lockout glitch overlay, wired
|
|
4
|
+
* together and driven by one `update()` call.
|
|
5
|
+
*
|
|
6
|
+
* This is the batteries-included option, and the one to reach for if you just want a heat mechanic
|
|
7
|
+
* to look right. It is assembled from the two separable pieces — {@link mountHeatVignette} and
|
|
8
|
+
* {@link mountOverheatGlitch} — so a game that draws its **own** heat bar (e.g. the racing game's
|
|
9
|
+
* in-canvas gauge) can take just the peripheral cues and skip this module entirely. Same visual
|
|
10
|
+
* language either way.
|
|
11
|
+
*
|
|
12
|
+
* What it renders:
|
|
13
|
+
* · a label that reads `OVERHEATING...` while heat builds and `OVERHEAT` once locked,
|
|
14
|
+
* · a track + fire-gradient fill (amber → orange → red) that pulses faster at each stage
|
|
15
|
+
* ({@link HEAT_STAGE_THRESHOLDS}: slow → fast → panic) and washes solid red near full,
|
|
16
|
+
* · a `COOLING DOWN` block with an optional ticking countdown during the lockout,
|
|
17
|
+
* · the vignette (z 19) and glitch overlay (z 21) around the bar (z 20).
|
|
18
|
+
*
|
|
19
|
+
* ```ts
|
|
20
|
+
* const overheat = mountOverheatHudBar(hudHost);
|
|
21
|
+
* // every frame:
|
|
22
|
+
* overheat.update(heat.fillRatio, heat.isLocked, heat.cooldownRemaining);
|
|
23
|
+
* // on teardown:
|
|
24
|
+
* overheat.dispose();
|
|
25
|
+
* ```
|
|
26
|
+
*
|
|
27
|
+
* Lockouts come in two flavours and both are supported: pass a positive `lockoutRemaining` for a
|
|
28
|
+
* fixed countdown (the digits tick down), or omit it for a continuous/timerless cooldown (the
|
|
29
|
+
* `COOLING DOWN` title and glitch still show, digits hidden).
|
|
30
|
+
*
|
|
31
|
+
* **Host contract:** everything is `position: absolute` inside `host`, which must be positioned and
|
|
32
|
+
* should set `isolation: isolate` so the internal z-indexes (19–21) don't leak. A full-viewport
|
|
33
|
+
* `position: fixed; inset: 0; pointer-events: none; isolation: isolate` div over the game canvas is
|
|
34
|
+
* the intended host.
|
|
35
|
+
*
|
|
36
|
+
* **Fonts:** the bar uses Rajdhani + Share Tech Mono and loads them from Google Fonts on first mount
|
|
37
|
+
* — the one place this kit reaches off-origin. Pass `loadFonts: false` to skip that (the CSS falls
|
|
38
|
+
* back to the local monospace/sans stack) if your page has a strict CSP or ships the faces itself.
|
|
39
|
+
*/
|
|
40
|
+
import { mountHeatVignette, HEAT_STAGE_THRESHOLDS, heatStageFor } from "./heat-vignette.js";
|
|
41
|
+
import { mountOverheatGlitch } from "./overheat-glitch.js";
|
|
42
|
+
const STYLE_ID = "rydr-heat-bar-css";
|
|
43
|
+
const FONT_LINK_ID = "rydr-heat-bar-fonts";
|
|
44
|
+
/** Shared fire red — the bar's glow, label tint and lockout accents. */
|
|
45
|
+
const FIRE = "#ef4444";
|
|
46
|
+
/**
|
|
47
|
+
* Mount the full overheat HUD (bar + vignette + glitch) into `host`. See the module header for the
|
|
48
|
+
* host contract; drive it every frame with {@link OverheatHudBar.update}.
|
|
49
|
+
*/
|
|
50
|
+
export function mountOverheatHudBar(host, opts = {}) {
|
|
51
|
+
injectCss(opts.loadFonts ?? true);
|
|
52
|
+
const thresholds = opts.thresholds ?? HEAT_STAGE_THRESHOLDS;
|
|
53
|
+
const vignette = (opts.vignette ?? true) ? mountHeatVignette(host, { thresholds }) : null;
|
|
54
|
+
const glitch = (opts.glitch ?? true) ? mountOverheatGlitch(host) : null;
|
|
55
|
+
const root = document.createElement("div");
|
|
56
|
+
root.className = "rydr-heat-bar";
|
|
57
|
+
// The label starts in the verb form: heat is building but has not blown yet.
|
|
58
|
+
root.innerHTML = `
|
|
59
|
+
<div class="rydr-heat-bar-label">OVERHEATING...</div>
|
|
60
|
+
<div class="rydr-heat-bar-track">
|
|
61
|
+
<div class="rydr-heat-bar-fill"><div class="rydr-heat-bar-wash"></div></div>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="rydr-heat-cooling">
|
|
64
|
+
<div class="rydr-heat-cooling-title">COOLING DOWN</div>
|
|
65
|
+
<div class="rydr-heat-cooling-timer">3.0s</div>
|
|
66
|
+
</div>
|
|
67
|
+
`;
|
|
68
|
+
host.appendChild(root);
|
|
69
|
+
const track = root.querySelector(".rydr-heat-bar-track");
|
|
70
|
+
const label = root.querySelector(".rydr-heat-bar-label");
|
|
71
|
+
const timer = root.querySelector(".rydr-heat-cooling-timer");
|
|
72
|
+
// Cache last-applied state so a per-frame update() only touches the DOM on a transition.
|
|
73
|
+
let lastStage = "idle";
|
|
74
|
+
let lastLocked = false;
|
|
75
|
+
let lastVisible = false;
|
|
76
|
+
let lastTimerText = "";
|
|
77
|
+
let lastTimerShown = true;
|
|
78
|
+
return {
|
|
79
|
+
root,
|
|
80
|
+
vignette,
|
|
81
|
+
glitch,
|
|
82
|
+
update(heat01, locked = false, lockoutRemaining = 0) {
|
|
83
|
+
const clamped = Math.max(0, Math.min(1, heat01 || 0));
|
|
84
|
+
const remaining = Math.max(0, lockoutRemaining || 0);
|
|
85
|
+
const lockedOut = !!locked || remaining > 0;
|
|
86
|
+
root.style.setProperty("--heat", clamped.toFixed(3));
|
|
87
|
+
root.style.setProperty("--heat-pct", `${(clamped * 100).toFixed(1)}%`);
|
|
88
|
+
const visible = clamped > 0.02 || lockedOut;
|
|
89
|
+
if (visible !== lastVisible) {
|
|
90
|
+
root.style.opacity = visible ? "1" : "0";
|
|
91
|
+
lastVisible = visible;
|
|
92
|
+
}
|
|
93
|
+
// Pulse stage on the track. A lockout pins it to danger so the bar stays
|
|
94
|
+
// frantic even as heat drains through the forced cooldown.
|
|
95
|
+
const stage = lockedOut ? "danger" : heatStageFor(clamped, thresholds);
|
|
96
|
+
if (stage !== lastStage) {
|
|
97
|
+
track.classList.remove("stage-warn", "stage-crit", "stage-danger");
|
|
98
|
+
if (stage !== "idle")
|
|
99
|
+
track.classList.add(`stage-${stage}`);
|
|
100
|
+
lastStage = stage;
|
|
101
|
+
}
|
|
102
|
+
if (lockedOut !== lastLocked) {
|
|
103
|
+
track.classList.toggle("locked", lockedOut);
|
|
104
|
+
root.classList.toggle("locked", lockedOut);
|
|
105
|
+
// Verb form while the pool fills, noun form once it has actually blown.
|
|
106
|
+
label.textContent = lockedOut ? "OVERHEAT" : "OVERHEATING...";
|
|
107
|
+
lastLocked = lockedOut;
|
|
108
|
+
}
|
|
109
|
+
// Countdown digits only make sense for a fixed lockout window.
|
|
110
|
+
const showTimer = lockedOut && remaining > 0;
|
|
111
|
+
if (showTimer !== lastTimerShown) {
|
|
112
|
+
timer.style.display = showTimer ? "" : "none";
|
|
113
|
+
lastTimerShown = showTimer;
|
|
114
|
+
}
|
|
115
|
+
if (showTimer) {
|
|
116
|
+
const text = `${remaining.toFixed(1)}s`;
|
|
117
|
+
if (text !== lastTimerText) {
|
|
118
|
+
timer.textContent = text;
|
|
119
|
+
lastTimerText = text;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
else if (lastTimerText !== "") {
|
|
123
|
+
lastTimerText = "";
|
|
124
|
+
}
|
|
125
|
+
vignette?.setHeat(clamped, lockedOut);
|
|
126
|
+
glitch?.setLocked(lockedOut);
|
|
127
|
+
},
|
|
128
|
+
dispose() {
|
|
129
|
+
root.remove();
|
|
130
|
+
vignette?.dispose();
|
|
131
|
+
glitch?.dispose();
|
|
132
|
+
},
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
let cssInjected = false;
|
|
136
|
+
/** Inject the scoped bar CSS (and optionally the web fonts) once per document. */
|
|
137
|
+
function injectCss(loadFonts) {
|
|
138
|
+
if (loadFonts && !document.getElementById(FONT_LINK_ID)) {
|
|
139
|
+
const fontLink = document.createElement("link");
|
|
140
|
+
fontLink.id = FONT_LINK_ID;
|
|
141
|
+
fontLink.rel = "stylesheet";
|
|
142
|
+
fontLink.href =
|
|
143
|
+
"https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap";
|
|
144
|
+
document.head.appendChild(fontLink);
|
|
145
|
+
}
|
|
146
|
+
if (cssInjected || document.getElementById(STYLE_ID)) {
|
|
147
|
+
cssInjected = true;
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
const style = document.createElement("style");
|
|
151
|
+
style.id = STYLE_ID;
|
|
152
|
+
style.textContent = CSS;
|
|
153
|
+
document.head.appendChild(style);
|
|
154
|
+
cssInjected = true;
|
|
155
|
+
}
|
|
156
|
+
const CSS = `
|
|
157
|
+
/* ─── BAR ─────────────────────────────────────────────────────── */
|
|
158
|
+
.rydr-heat-bar {
|
|
159
|
+
position: absolute;
|
|
160
|
+
bottom: 152px;
|
|
161
|
+
left: 50%;
|
|
162
|
+
transform: translateX(-50%);
|
|
163
|
+
width: 50vw;
|
|
164
|
+
max-width: 900px;
|
|
165
|
+
min-width: 480px;
|
|
166
|
+
display: flex;
|
|
167
|
+
flex-direction: column;
|
|
168
|
+
align-items: center;
|
|
169
|
+
gap: 12px;
|
|
170
|
+
pointer-events: none;
|
|
171
|
+
opacity: 0;
|
|
172
|
+
transition: opacity 0.18s;
|
|
173
|
+
z-index: 20;
|
|
174
|
+
--heat: 0;
|
|
175
|
+
--heat-pct: 0%;
|
|
176
|
+
}
|
|
177
|
+
.rydr-heat-bar-label {
|
|
178
|
+
font-family: 'Rajdhani', 'SF Mono', Menlo, sans-serif;
|
|
179
|
+
font-weight: 700;
|
|
180
|
+
font-size: 36px;
|
|
181
|
+
letter-spacing: 8px;
|
|
182
|
+
text-transform: uppercase;
|
|
183
|
+
color: color-mix(
|
|
184
|
+
in oklab,
|
|
185
|
+
color-mix(in oklab, #fef3c7 calc((1 - var(--heat)) * 100%), #fda4af)
|
|
186
|
+
calc((1 - max(0, var(--heat) - 0.7) / 0.3) * 100%),
|
|
187
|
+
${FIRE}
|
|
188
|
+
);
|
|
189
|
+
text-shadow:
|
|
190
|
+
0 0 calc(2px + var(--heat) * 6px) ${FIRE},
|
|
191
|
+
0 0 calc(8px + var(--heat) * 24px) ${FIRE};
|
|
192
|
+
transition: color 0.2s;
|
|
193
|
+
}
|
|
194
|
+
.rydr-heat-bar-track {
|
|
195
|
+
position: relative;
|
|
196
|
+
width: 100%;
|
|
197
|
+
height: 36px;
|
|
198
|
+
background: #18181c;
|
|
199
|
+
border: 1px solid #2a2a32;
|
|
200
|
+
border-radius: 6px;
|
|
201
|
+
overflow: hidden;
|
|
202
|
+
box-shadow:
|
|
203
|
+
inset 0 1px 0 rgba(255,255,255,0.04),
|
|
204
|
+
inset 0 -1px 0 rgba(0,0,0,0.4);
|
|
205
|
+
}
|
|
206
|
+
.rydr-heat-bar-fill {
|
|
207
|
+
position: absolute;
|
|
208
|
+
inset: 0;
|
|
209
|
+
width: var(--heat-pct);
|
|
210
|
+
background: linear-gradient(
|
|
211
|
+
90deg,
|
|
212
|
+
#fbbf24 0%,
|
|
213
|
+
#f97316 35%,
|
|
214
|
+
#dc2626 70%,
|
|
215
|
+
${FIRE} 100%
|
|
216
|
+
);
|
|
217
|
+
background-size: 200% 100%;
|
|
218
|
+
background-position: calc(100% - var(--heat) * 100%) 0;
|
|
219
|
+
box-shadow:
|
|
220
|
+
0 0 calc(4px + var(--heat) * 28px)
|
|
221
|
+
color-mix(in oklab, #f97316 calc((1 - var(--heat)) * 100%), ${FIRE}),
|
|
222
|
+
inset 0 0 calc(2px + var(--heat) * 12px) #f97316;
|
|
223
|
+
transition: width 0.12s linear;
|
|
224
|
+
}
|
|
225
|
+
.rydr-heat-bar-wash {
|
|
226
|
+
position: absolute;
|
|
227
|
+
inset: 0;
|
|
228
|
+
background: ${FIRE};
|
|
229
|
+
opacity: calc(max(0, var(--heat) - 0.85) / 0.15);
|
|
230
|
+
pointer-events: none;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* ─── PULSE-RATE RAMP ────────────────────────────────────────── */
|
|
234
|
+
.rydr-heat-bar-track.stage-warn { animation: rydr-heat-bar-pulse 1.2s ease-in-out infinite; }
|
|
235
|
+
.rydr-heat-bar-track.stage-crit { animation: rydr-heat-bar-pulse 0.5s ease-in-out infinite; }
|
|
236
|
+
.rydr-heat-bar-track.stage-danger { animation: rydr-heat-bar-pulse 0.22s ease-in-out infinite; }
|
|
237
|
+
.rydr-heat-bar-track.locked { animation: rydr-heat-bar-frame-flash 0.4s steps(2) infinite; }
|
|
238
|
+
@keyframes rydr-heat-bar-pulse {
|
|
239
|
+
0%, 100% {
|
|
240
|
+
box-shadow:
|
|
241
|
+
inset 0 1px 0 rgba(255,255,255,0.04),
|
|
242
|
+
inset 0 -1px 0 rgba(0,0,0,0.4),
|
|
243
|
+
0 0 4px rgba(239,68,68,0.4);
|
|
244
|
+
}
|
|
245
|
+
50% {
|
|
246
|
+
box-shadow:
|
|
247
|
+
inset 0 1px 0 rgba(255,255,255,0.04),
|
|
248
|
+
inset 0 -1px 0 rgba(0,0,0,0.4),
|
|
249
|
+
0 0 28px rgba(239,68,68,0.95),
|
|
250
|
+
0 0 6px rgba(251,191,36,0.7);
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
@keyframes rydr-heat-bar-frame-flash {
|
|
254
|
+
0%, 100% { background: #18181c; }
|
|
255
|
+
50% { background: rgba(239, 68, 68, 0.22); }
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* ─── COOLING DOWN block ─────────────────────────────────────── */
|
|
259
|
+
.rydr-heat-cooling {
|
|
260
|
+
display: none;
|
|
261
|
+
flex-direction: column;
|
|
262
|
+
align-items: center;
|
|
263
|
+
gap: 6px;
|
|
264
|
+
margin-top: 6px;
|
|
265
|
+
}
|
|
266
|
+
.rydr-heat-bar.locked .rydr-heat-cooling { display: flex; }
|
|
267
|
+
.rydr-heat-cooling-title {
|
|
268
|
+
font-family: 'Rajdhani', sans-serif;
|
|
269
|
+
font-weight: 700;
|
|
270
|
+
font-size: 44px;
|
|
271
|
+
letter-spacing: 10px;
|
|
272
|
+
text-transform: uppercase;
|
|
273
|
+
color: #fff;
|
|
274
|
+
text-shadow:
|
|
275
|
+
-2px 0 rgba(0, 220, 255, 0.8),
|
|
276
|
+
2px 0 rgba(255, 0, 80, 0.8),
|
|
277
|
+
0 0 12px ${FIRE};
|
|
278
|
+
animation: rydr-heat-glitch-jitter 0.18s steps(2) infinite;
|
|
279
|
+
}
|
|
280
|
+
.rydr-heat-cooling-timer {
|
|
281
|
+
font-family: 'Share Tech Mono', 'SF Mono', Menlo, monospace;
|
|
282
|
+
font-weight: 700;
|
|
283
|
+
font-size: 30px;
|
|
284
|
+
color: #fef3c7;
|
|
285
|
+
text-shadow: 0 0 6px ${FIRE}, 0 0 14px ${FIRE};
|
|
286
|
+
min-width: 5ch;
|
|
287
|
+
text-align: center;
|
|
288
|
+
animation: rydr-heat-glitch-digit 0.65s steps(4) infinite;
|
|
289
|
+
}
|
|
290
|
+
@keyframes rydr-heat-glitch-jitter {
|
|
291
|
+
0%, 100% { transform: translateX(0); }
|
|
292
|
+
25% { transform: translateX(-1px); }
|
|
293
|
+
75% { transform: translateX(1px); }
|
|
294
|
+
}
|
|
295
|
+
@keyframes rydr-heat-glitch-digit {
|
|
296
|
+
0%, 90%, 100% { filter: none; }
|
|
297
|
+
92% { filter: invert(1) hue-rotate(120deg); }
|
|
298
|
+
94% { filter: none; }
|
|
299
|
+
96% { filter: invert(1) hue-rotate(-90deg); }
|
|
300
|
+
}
|
|
301
|
+
`;
|
|
302
|
+
//# sourceMappingURL=overheat-hud-bar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overheat-hud-bar.js","sourceRoot":"","sources":["../../src/ui/overheat-hud-bar.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/showcase/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/showcase/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AA0BH,OAAO,EAA2B,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAE7E,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAoBpD,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,mGAAmG;AACnG,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,GAAE,iBAAsB,GAAG,UAAU,CA6W3F"}
|