@bloopjs/web 0.0.56 → 0.0.58
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/App.d.ts +9 -1
- package/dist/App.d.ts.map +1 -1
- package/dist/debugui/DebugUi.d.ts.map +1 -1
- package/dist/debugui/components/BottomBar.d.ts +8 -0
- package/dist/debugui/components/BottomBar.d.ts.map +1 -0
- package/dist/debugui/components/DebugToggle.d.ts.map +1 -1
- package/dist/debugui/components/Root.d.ts.map +1 -1
- package/dist/debugui/components/TopBar.d.ts +7 -0
- package/dist/debugui/components/TopBar.d.ts.map +1 -0
- package/dist/debugui/components/VerticalBar.d.ts +9 -0
- package/dist/debugui/components/VerticalBar.d.ts.map +1 -0
- package/dist/debugui/state.d.ts +12 -1
- package/dist/debugui/state.d.ts.map +1 -1
- package/dist/debugui/styles.d.ts +1 -1
- package/dist/debugui/styles.d.ts.map +1 -1
- package/dist/mod.js +624 -26
- package/dist/mod.js.map +12 -9
- package/package.json +3 -3
- package/src/App.ts +48 -2
- package/src/debugui/DebugUi.ts +7 -7
- package/src/debugui/components/BottomBar.tsx +68 -0
- package/src/debugui/components/DebugToggle.tsx +2 -6
- package/src/debugui/components/Root.tsx +84 -17
- package/src/debugui/components/TopBar.tsx +36 -0
- package/src/debugui/components/VerticalBar.tsx +26 -0
- package/src/debugui/state.ts +82 -5
- package/src/debugui/styles.ts +249 -2
package/dist/App.d.ts
CHANGED
|
@@ -45,6 +45,8 @@ export declare class App {
|
|
|
45
45
|
beforeFrame: ReturnType<typeof createListener>;
|
|
46
46
|
/** Event listeners for after a frame is processed */
|
|
47
47
|
afterFrame: ReturnType<typeof createListener>;
|
|
48
|
+
/** Event listeners for HMR events */
|
|
49
|
+
onHmr: ReturnType<typeof createListener>;
|
|
48
50
|
/** Subscribe to the browser events and start the render loop */
|
|
49
51
|
subscribe(): void;
|
|
50
52
|
/** Clean up wasm resources and event listeners */
|
|
@@ -58,10 +60,13 @@ export declare class App {
|
|
|
58
60
|
* import.meta.hot?.accept("./game", async (newModule) => {
|
|
59
61
|
* await app.acceptHmr(newModule?.game, {
|
|
60
62
|
* wasmUrl: monorepoWasmUrl,
|
|
63
|
+
* files: ["./game"],
|
|
61
64
|
* });
|
|
62
65
|
* ```
|
|
63
66
|
*/
|
|
64
|
-
acceptHmr(module: any, opts?: Partial<MountOpts>
|
|
67
|
+
acceptHmr(module: any, opts?: Partial<MountOpts> & {
|
|
68
|
+
files?: string[];
|
|
69
|
+
}): Promise<void>;
|
|
65
70
|
}
|
|
66
71
|
declare function createListener<T extends any[]>(): {
|
|
67
72
|
subscribe: (callback: (...args: T) => void) => UnsubscribeFn;
|
|
@@ -69,5 +74,8 @@ declare function createListener<T extends any[]>(): {
|
|
|
69
74
|
unsubscribeAll: UnsubscribeFn;
|
|
70
75
|
};
|
|
71
76
|
export type UnsubscribeFn = () => void;
|
|
77
|
+
export type HmrEvent = {
|
|
78
|
+
files: string[];
|
|
79
|
+
};
|
|
72
80
|
export {};
|
|
73
81
|
//# sourceMappingURL=App.d.ts.map
|
package/dist/App.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,SAAS,EAAS,KAAK,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAG7E,OAAO,EAEL,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,SAAS,EAAS,KAAK,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAG7E,OAAO,EAEL,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGhE,MAAM,MAAM,YAAY,GAAG;IACzB,4BAA4B;IAC5B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,yEAAyE;IACzE,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,sDAAsD;IACtD,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,qFAAqF;IACrF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wFAAwF;IACxF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;CACpC,CAAC;AAIF,oCAAoC;AACpC,wBAAsB,KAAK,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,CAwB5D;AAED;;;;;;GAMG;AACH,qBAAa,GAAG;;IAEd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;gBAQzB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,EAChB,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,cAAc;IAmB9B,uDAAuD;IACvD,IAAI,GAAG,IAAI,GAAG,CAEb;IAED,IAAI,GAAG,CAAC,GAAG,EAAE,GAAG,EAEf;IASD,+BAA+B;IAC/B,IAAI,OAAO,IAAI,OAAO,GAAG,IAAI,CAE5B;IAED,gEAAgE;IAChE,IAAI,MAAM,IAAI,iBAAiB,GAAG,IAAI,CAErC;IAED,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,GAAG,IAAI;IAIrD,sDAAsD;IACtD,WAAW,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAA8B;IAC5E,qDAAqD;IACrD,UAAU,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAA8B;IAC3E,qCAAqC;IACrC,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAgC;IAExE,gEAAgE;IAChE,SAAS,IAAI,IAAI;IAyIjB,kDAAkD;IAClD,OAAO,IAAI,IAAI;IASf;;;;;;;;;;;;OAYG;IACG,SAAS,CACb,MAAM,EAAE,GAAG,EACX,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,GAC/C,OAAO,CAAC,IAAI,CAAC;CAwBjB;AAED,iBAAS,cAAc,CAAC,CAAC,SAAS,GAAG,EAAE,KAAK;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,KAAK,aAAa,CAAC;IAC7D,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,cAAc,EAAE,aAAa,CAAC;CAC/B,CAuBA;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DebugUi.d.ts","sourceRoot":"","sources":["../../src/debugui/DebugUi.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,
|
|
1
|
+
{"version":3,"file":"DebugUi.d.ts","sourceRoot":"","sources":["../../src/debugui/DebugUi.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAA2B,MAAM,YAAY,CAAC;AAGtE,MAAM,MAAM,cAAc,GAAG;IAC3B,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB,CAAC;AAEF,qBAAa,OAAO;;gBAQN,OAAO,GAAE,cAAmB;IAgExC,4CAA4C;IAC5C,IAAI,MAAM,IAAI,iBAAiB,CAE9B;IAED,mDAAmD;IACnD,IAAI,KAAK,IAAI,UAAU,CAEtB;IAED,mDAAmD;IACnD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,OAAO,IAAI,IAAI;CAKhB"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
type BottomBarProps = {
|
|
2
|
+
tapeUtilization: number;
|
|
3
|
+
playheadPosition: number;
|
|
4
|
+
isPlaying: boolean;
|
|
5
|
+
};
|
|
6
|
+
export declare function BottomBar({ tapeUtilization, playheadPosition, isPlaying, }: BottomBarProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=BottomBar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BottomBar.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/BottomBar.tsx"],"names":[],"mappings":"AAAA,KAAK,cAAc,GAAG;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,eAAmB,EACnB,gBAAoB,EACpB,SAAgB,GACjB,EAAE,cAAc,2CAyDhB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DebugToggle.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/DebugToggle.tsx"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,MAAiB,EAAE,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"DebugToggle.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/DebugToggle.tsx"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,MAAiB,EAAE,EAAE,gBAAgB,2CAclE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/Root.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/Root.tsx"],"names":[],"mappings":"AASA,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,MAAiB,EAAE,EAAE,SAAS,2CAwC5D"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/TopBar.tsx"],"names":[],"mappings":"AAEA,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,WAAW,2CA4B5D"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
type VerticalBarProps = {
|
|
2
|
+
value: number;
|
|
3
|
+
max: number;
|
|
4
|
+
side: "left" | "right";
|
|
5
|
+
color?: string;
|
|
6
|
+
};
|
|
7
|
+
export declare function VerticalBar({ value, max, side, color, }: VerticalBarProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=VerticalBar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalBar.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/VerticalBar.tsx"],"names":[],"mappings":"AAAA,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,IAAI,EACJ,KAAiB,GAClB,EAAE,gBAAgB,2CAalB"}
|
package/dist/debugui/state.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { type ReadonlySignal, type Signal } from "@preact/signals";
|
|
2
2
|
import type { Log } from "../netcode/logs.ts";
|
|
3
3
|
export type FrameNumber = number;
|
|
4
|
+
export type LayoutMode = "off" | "letterboxed" | "full";
|
|
4
5
|
export type Peer = {
|
|
5
6
|
id: string;
|
|
6
7
|
nickname: string;
|
|
@@ -15,13 +16,23 @@ export type NetStatus = {
|
|
|
15
16
|
peers: Peer[];
|
|
16
17
|
};
|
|
17
18
|
export type DebugState = {
|
|
18
|
-
|
|
19
|
+
layoutMode: Signal<LayoutMode>;
|
|
20
|
+
isVisible: ReadonlySignal<boolean>;
|
|
19
21
|
netStatus: Signal<NetStatus>;
|
|
20
22
|
logs: Signal<Log[]>;
|
|
21
23
|
peer: ReadonlySignal<Peer | null>;
|
|
22
24
|
advantage: ReadonlySignal<number | null>;
|
|
25
|
+
fps: Signal<number>;
|
|
26
|
+
frameTime: Signal<number>;
|
|
27
|
+
snapshotSize: Signal<number>;
|
|
28
|
+
frameNumber: Signal<number>;
|
|
29
|
+
hmrFlash: Signal<boolean>;
|
|
23
30
|
};
|
|
24
31
|
export declare const debugState: DebugState;
|
|
32
|
+
/** Cycle through layout modes: off -> letterboxed -> full -> off */
|
|
33
|
+
export declare function cycleLayout(): void;
|
|
34
|
+
/** Trigger HMR flash (only when debug UI is visible) */
|
|
35
|
+
export declare function triggerHmrFlash(): void;
|
|
25
36
|
export declare function addLog(log: Log): void;
|
|
26
37
|
export declare function updatePeer(id: string, updates: Partial<Peer>): void;
|
|
27
38
|
export declare function addPeer(peer: Peer): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/debugui/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,MAAM,EAEZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,WAAW,CAAC;IACjB,GAAG,EAAE,WAAW,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,
|
|
1
|
+
{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/debugui/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,MAAM,EAEZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,aAAa,GAAG,MAAM,CAAC;AAExD,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,WAAW,CAAC;IACjB,GAAG,EAAE,WAAW,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC/B,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;IACpB,IAAI,EAAE,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAClC,SAAS,EAAE,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAEzC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAE5B,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;CAC3B,CAAC;AAgBF,eAAO,MAAM,UAAU,EAAE,UA8BxB,CAAC;AAEF,oEAAoE;AACpE,wBAAgB,WAAW,IAAI,IAAI,CASlC;AAID,wDAAwD;AACxD,wBAAgB,eAAe,IAAI,IAAI,CAatC;AAiBD,wBAAgB,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CAErC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAiBnE;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAKxC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAK3C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAK3C;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAK5C;AAED,wBAAgB,SAAS,IAAI,IAAI,CAEhC;AAED,wBAAgB,UAAU,IAAI,IAAI,CAcjC"}
|
package/dist/debugui/styles.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const styles = "\n/* Reset for shadow DOM */\n* {\n box-sizing: border-box;\n}\n\n/* Layout */\n.fullscreen {\n width:
|
|
1
|
+
export declare const styles = "\n/* Reset for shadow DOM */\n* {\n box-sizing: border-box;\n}\n\n/* Layout */\n.fullscreen {\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 0;\n overflow: hidden;\n}\n\n.fullscreen .canvas-container {\n width: 100%;\n height: 100%;\n}\n\n.fullscreen canvas {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n.layout {\n display: grid;\n grid-template-areas:\n \"game stats\"\n \"logs logs\";\n grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);\n grid-template-rows: calc(50% - 0.5rem) calc(50% - 0.5rem);\n gap: 1rem;\n width: 100%;\n height: 100%;\n padding: 1rem;\n}\n\n/* Letterboxed layout - using equal vw/vh percentages keeps game at viewport aspect ratio */\n.layout-letterboxed {\n display: grid;\n grid-template-areas:\n \"top-bar top-bar top-bar\"\n \"left-bar game right-bar\"\n \"bottom-bar bottom-bar bottom-bar\";\n grid-template-columns: 2vw 1fr 2vw;\n grid-template-rows: 2vh 1fr 2vh;\n width: 100vw;\n height: 100vh;\n background: #1a1a1a;\n overflow: hidden;\n overscroll-behavior: none;\n}\n\n.top-bar {\n grid-area: top-bar;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #111;\n color: #aaa;\n font-family: monospace;\n font-size: 12px;\n padding: 0;\n}\n\n.top-bar-side-label {\n width: 2vw;\n text-align: center;\n font-size: 9px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n color: #666;\n}\n\n.top-bar-center {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 24px;\n flex: 1;\n}\n\n.top-bar-item {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.top-bar-label {\n opacity: 0.6;\n}\n\n.top-bar-value {\n color: #fff;\n font-weight: 500;\n}\n\n.left-bar {\n grid-area: left-bar;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n background: #111;\n padding: 4px 0;\n}\n\n.right-bar {\n grid-area: right-bar;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-end;\n background: #111;\n padding: 4px 0;\n}\n\n.vertical-bar {\n width: 12px;\n flex: 1;\n background: #333;\n border-radius: 2px;\n position: relative;\n overflow: hidden;\n}\n\n.vertical-bar-fill {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: #4a9eff;\n border-radius: 2px;\n transition: height 0.1s ease-out;\n}\n\n\n.bottom-bar {\n grid-area: bottom-bar;\n display: flex;\n align-items: center;\n background: #111;\n padding: 0 8px;\n gap: 8px;\n}\n\n.playbar-controls {\n display: flex;\n align-items: center;\n gap: 2px;\n flex-shrink: 0;\n}\n\n.playbar-btn {\n width: 1.5vh;\n height: 1.5vh;\n min-width: 18px;\n min-height: 18px;\n border: none;\n background: transparent;\n color: #888;\n font-size: 10px;\n cursor: pointer;\n border-radius: 2px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s, color 0.15s;\n position: relative;\n}\n\n.playbar-btn:hover {\n background: #333;\n color: #fff;\n}\n\n.playbar-btn:hover .tooltip {\n opacity: 1;\n visibility: visible;\n}\n\n.tooltip {\n position: absolute;\n bottom: calc(100% + 4px);\n left: 50%;\n transform: translateX(-50%);\n background: #222;\n color: #ccc;\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 10px;\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.15s;\n pointer-events: none;\n z-index: 10;\n}\n\n.tooltip-left {\n left: 0;\n transform: none;\n}\n\n.tooltip kbd {\n background: #444;\n padding: 1px 4px;\n border-radius: 2px;\n margin-left: 4px;\n font-family: monospace;\n}\n\n.seek-bar {\n flex: 1;\n height: 16px;\n background: #222;\n border-radius: 4px;\n position: relative;\n cursor: pointer;\n overflow: hidden;\n}\n\n.seek-bar-fill {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n background: linear-gradient(to right, #4a2070, #7b3fa0);\n border-radius: 4px;\n transition: width 0.1s ease-out;\n}\n\n.seek-bar-position {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 2px;\n background: #fff;\n}\n\n.letterboxed-game {\n grid-area: game;\n overflow: hidden;\n}\n\n.letterboxed-game .canvas-container {\n width: 100%;\n height: 100%;\n}\n\n.letterboxed-game canvas {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n.letterboxed-game {\n position: relative;\n}\n\n.letterboxed-game.hmr-flash::after {\n content: \"\";\n position: absolute;\n inset: 0;\n pointer-events: none;\n animation: hmr-pulse 0.3s ease-out forwards;\n}\n\n@keyframes hmr-pulse {\n 0% { box-shadow: inset 0 0 0 36px #7b3fa0; }\n 100% { box-shadow: inset 0 0 0 0 #7b3fa0; }\n}\n\n.game {\n grid-area: game;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.stats {\n grid-area: stats;\n background-color: #f0f0f0;\n padding: 1rem;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.logs {\n grid-area: logs;\n background-color: #f0f0f0;\n padding: 1rem;\n border-radius: 8px;\n overflow: hidden;\n}\n\n/* Canvas container */\n.canvas-container {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.canvas-container canvas {\n max-width: 100%;\n max-height: 100%;\n}\n\n/* Debug toggle button */\n.debug-toggle {\n position: fixed;\n bottom: 16px;\n right: 16px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: none;\n background-color: rgba(0, 0, 0, 0.5);\n color: white;\n font-size: 18px;\n cursor: pointer;\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s;\n}\n\n.debug-toggle:hover {\n background-color: rgba(0, 0, 0, 0.7);\n}\n\n/* Stats panel */\n.stats-panel {\n background: rgba(0, 0, 0, 0.7);\n color: white;\n padding: 12px;\n border-radius: 8px;\n font-family: monospace;\n font-size: 14px;\n max-width: 100%;\n overflow: hidden;\n}\n\n.stats-panel h3 {\n margin: 0 0 8px 0;\n font-size: 14px;\n font-weight: 600;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.stats-panel table {\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n}\n\n.stats-panel tr {\n border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.stats-panel tr:last-child {\n border-bottom: none;\n}\n\n.stats-panel td {\n padding: 4px 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.stats-panel td:first-child {\n opacity: 0.7;\n width: 60%;\n}\n\n.stats-panel td:last-child {\n text-align: right;\n font-weight: 600;\n width: 40%;\n}\n\n.stats-panel p {\n margin: 0;\n opacity: 0.7;\n}\n\n/* Logs panel */\n.logs-list {\n width: 100%;\n height: 100%;\n overflow: auto;\n margin: 0;\n padding: 0;\n}\n\n.logs-list li {\n margin: 0 0 24px 0;\n list-style: none;\n}\n\n.logs-list h3 {\n font-size: 16px;\n font-weight: 500;\n margin: 0;\n}\n\n.logs-list .ws {\n color: darkolivegreen;\n}\n\n.logs-list .webrtc {\n color: darkmagenta;\n}\n\n.logs-list .rollback {\n color: darkblue;\n}\n\n.logs-list .local {\n color: #333;\n}\n\n.logs-list .content {\n font-size: 16px;\n}\n\n.logs-list p {\n margin: 4px 0;\n}\n\n.logs-list pre {\n margin: 0;\n white-space: pre-wrap;\n word-break: break-word;\n background-color: oldlace;\n padding: 8px;\n border-radius: 4px;\n border: 1px inset lavender;\n}\n";
|
|
2
2
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/debugui/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/debugui/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,6xOA8blB,CAAC"}
|