{JSON.stringify(entry.requestBody, null, 2)} @@ -100,7 +98,9 @@ function RequestLogRow({ entry }: { entry: RequestLogEntry }) { {entry.responseBody !== null && ( - Response Body + + Response Body + & Pick) { +function LogTab({ + requestLog, + clearLog, +}: Pick & Pick) { return ( @@ -182,7 +185,9 @@ function MocksTab({ mocks, addMock, removeMock, clearAllMocks }: MocksTabProps) return ( - Add Mock + + Add Mock + Endpoint @@ -207,7 +212,9 @@ function MocksTab({ mocks, addMock, removeMock, clearAllMocks }: MocksTabProps) sx={{ fontFamily: "monospace", fontSize: 12 }} /> {jsonError && ( - {jsonError} + + {jsonError} + )} @@ -243,7 +250,10 @@ function MocksTab({ mocks, addMock, removeMock, clearAllMocks }: MocksTabProps) Remove - + {JSON.stringify(mock.response, null, 2)} @@ -271,14 +281,39 @@ const EVENT_TYPES: string[] = [ ]; const EVENT_TEMPLATES: Record = { - "discord:join-request": { eventType: "discord:join-request", timestamp: "", serverIp: "123.45.67.89", serverPort: 7777, serverName: "Test Server", forkName: "Unitystation", buildVersion: 1234, gameMode: "Secret", currentMap: "BoxStation", playerCount: 12, playerCountMax: 40, status: 0 }, + "discord:join-request": { + eventType: "discord:join-request", + timestamp: "", + serverIp: "123.45.67.89", + serverPort: 7777, + serverName: "Test Server", + forkName: "Unitystation", + buildVersion: 1234, + gameMode: "Secret", + currentMap: "BoxStation", + playerCount: 12, + playerCountMax: 40, + status: 0, + }, "tts:status-changed": { eventType: "tts:status-changed", timestamp: "", status: 0, message: "" }, - "tts:update-available": { eventType: "tts:update-available", timestamp: "", installedVersion: "1.0.0", latestVersion: "1.1.0" }, + "tts:update-available": { + eventType: "tts:update-available", + timestamp: "", + installedVersion: "1.0.0", + latestVersion: "1.1.0", + }, "tts:install-output": { eventType: "tts:install-output", timestamp: "", line: "" }, "servers:updated": { eventType: "servers:updated", timestamp: "" }, "installations:changed": { eventType: "installations:changed", timestamp: "" }, "game:state-changed": { eventType: "game:state-changed", timestamp: "" }, - "download:progress": { eventType: "download:progress", timestamp: "", downloadId: "", bytesDownloaded: 0, totalBytes: 0, speedBps: 0 }, + "download:progress": { + eventType: "download:progress", + timestamp: "", + downloadId: "", + bytesDownloaded: 0, + totalBytes: 0, + speedBps: 0, + }, "download:state-changed": { eventType: "download:state-changed", timestamp: "", downloadId: "", state: 0 }, }; @@ -295,7 +330,13 @@ interface EventsTabProps { addMock: DevToolsChannelActions["addMock"]; } -function PresetRunner({ injectEvent, addMock }: { injectEvent: DevToolsChannelActions["injectEvent"]; addMock: DevToolsChannelActions["addMock"] }) { +function PresetRunner({ + injectEvent, + addMock, +}: { + injectEvent: DevToolsChannelActions["injectEvent"]; + addMock: DevToolsChannelActions["addMock"]; +}) { const [runningLabel, setRunningLabel] = useState(null); const cancelRef = useRef(false); @@ -338,7 +379,9 @@ function PresetRunner({ injectEvent, addMock }: { injectEvent: DevToolsChannelAc return ( - TTS Presets + + TTS Presets + {ttsPresets.map((preset) => ( (EVENT_TYPES[0]); - const [payload, setPayload] = useState(JSON.stringify(EVENT_TEMPLATES[EVENT_TYPES[0]] ?? { eventType: EVENT_TYPES[0], timestamp: "" }, null, 2)); + const [payload, setPayload] = useState( + JSON.stringify(EVENT_TEMPLATES[EVENT_TYPES[0]] ?? { eventType: EVENT_TYPES[0], timestamp: "" }, null, 2), + ); const [jsonError, setJsonError] = useState(null); const [firedEvents, setFiredEvents] = useState([]); @@ -404,17 +449,23 @@ function EventsTab({ injectEvent, addMock }: EventsTabProps) { - Inject Event + + Inject Event + Event Type { if (v) handleTypeChange(v); }} + onChange={(_e, v) => { + if (v) handleTypeChange(v); + }} sx={{ fontFamily: "monospace", fontSize: 13 }} > {EVENT_TYPES.map((t) => ( - {t} + + {t} + ))} @@ -431,7 +482,9 @@ function EventsTab({ injectEvent, addMock }: EventsTabProps) { sx={{ fontFamily: "monospace", fontSize: 12 }} /> {jsonError && ( - {jsonError} + + {jsonError} + )} @@ -499,8 +552,15 @@ function StateTab({ stateSnapshot, requestStateSnapshot, isActive }: StateTabPro {Object.entries(stateSnapshot).map(([name, data]) => ( - - {name} + + + {name} + - setActiveTab(v as string)} sx={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}> + setActiveTab(v as string)} + sx={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }} + > Log Mocks diff --git a/src/devtools/bridge.ts b/src/devtools/bridge.ts index 3a0ade2..cef8ca4 100644 --- a/src/devtools/bridge.ts +++ b/src/devtools/bridge.ts @@ -4,90 +4,89 @@ import { DEVTOOLS_CHANNEL } from "./protocol"; type StateSource = () => unknown; class DevToolsBridgeImpl { - private channel: BroadcastChannel; - private mocks = new Map(); - private stateSources = new Map(); - private eventInjectors = new Set<(eventType: string, data: unknown) => void>(); + private channel: BroadcastChannel; + private mocks = new Map(); + private stateSources = new Map(); + private eventInjectors = new Set<(eventType: string, data: unknown) => void>(); - constructor() { - this.channel = new BroadcastChannel(DEVTOOLS_CHANNEL); - this.channel.onmessage = (event: MessageEvent) => { - this.handleCommand(event.data); - }; - } + constructor() { + this.channel = new BroadcastChannel(DEVTOOLS_CHANNEL); + this.channel.onmessage = (event: MessageEvent) => { + this.handleCommand(event.data); + }; + } - private handleCommand(command: DevToolsCommand): void { - switch (command.type) { - case "mock-endpoint": - this.mocks.set(command.endpoint, command.response); - break; - case "clear-mock": - this.mocks.delete(command.endpoint); - break; - case "clear-all-mocks": - this.mocks.clear(); - break; - case "inject-event": - for (const injector of this.eventInjectors) { - injector(command.eventType, command.data); - } - this.report({ - type: "event-injected", - eventType: command.eventType, - data: command.data, - timestamp: Date.now(), - }); - break; - case "request-state-snapshot": { - const sources: Record = {}; - for (const [name, fn] of this.stateSources) { - try { - sources[name] = fn(); - } catch { - sources[name] = { error: "Failed to collect state" }; - } + private handleCommand(command: DevToolsCommand): void { + switch (command.type) { + case "mock-endpoint": + this.mocks.set(command.endpoint, command.response); + break; + case "clear-mock": + this.mocks.delete(command.endpoint); + break; + case "clear-all-mocks": + this.mocks.clear(); + break; + case "inject-event": + for (const injector of this.eventInjectors) { + injector(command.eventType, command.data); + } + this.report({ + type: "event-injected", + eventType: command.eventType, + data: command.data, + timestamp: Date.now(), + }); + break; + case "request-state-snapshot": { + const sources: Record = {}; + for (const [name, fn] of this.stateSources) { + try { + sources[name] = fn(); + } catch { + sources[name] = { error: "Failed to collect state" }; + } + } + this.report({ type: "state-snapshot", sources }); + break; + } } - this.report({ type: "state-snapshot", sources }); - break; - } } - } - report(message: DevToolsReport): void { - this.channel.postMessage(message); - } + report(message: DevToolsReport): void { + this.channel.postMessage(message); + } - getMock(endpoint: string): unknown | undefined { - return this.mocks.get(endpoint); - } + getMock(endpoint: string): unknown | undefined { + return this.mocks.get(endpoint); + } - hasMock(endpoint: string): boolean { - return this.mocks.has(endpoint); - } + hasMock(endpoint: string): boolean { + return this.mocks.has(endpoint); + } - registerStateSource(name: string, fn: StateSource): () => void { - this.stateSources.set(name, fn); - return () => { - this.stateSources.delete(name); - }; - } + registerStateSource(name: string, fn: StateSource): () => void { + this.stateSources.set(name, fn); + return () => { + this.stateSources.delete(name); + }; + } - registerEventInjector(fn: (eventType: string, data: unknown) => void): () => void { - this.eventInjectors.add(fn); - return () => { - this.eventInjectors.delete(fn); - }; - } + registerEventInjector(fn: (eventType: string, data: unknown) => void): () => void { + this.eventInjectors.add(fn); + return () => { + this.eventInjectors.delete(fn); + }; + } - logRequest(entry: RequestLogEntry): void { - this.report({ type: "request-logged", entry }); - } + logRequest(entry: RequestLogEntry): void { + this.report({ type: "request-logged", entry }); + } - dispose(): void { - this.channel.close(); - } + dispose(): void { + this.channel.close(); + } } // Singleton, only created in dev -export const devBridge: DevToolsBridgeImpl | null = - import.meta.env.DEV ? new DevToolsBridgeImpl() : null; +export const devBridge: DevToolsBridgeImpl | null = import.meta.env.DEV ? new DevToolsBridgeImpl() : null; diff --git a/src/devtools/open-devtools-window.ts b/src/devtools/open-devtools-window.ts index 9a38827..be181eb 100644 --- a/src/devtools/open-devtools-window.ts +++ b/src/devtools/open-devtools-window.ts @@ -3,24 +3,24 @@ import { WebviewWindow } from "@tauri-apps/api/webviewWindow"; let devtoolsWindow: WebviewWindow | null = null; export async function openDevToolsWindow(): Promise { - // Check if already open - if (devtoolsWindow) { - try { - await devtoolsWindow.setFocus(); - return; - } catch { - devtoolsWindow = null; + // Check if already open + if (devtoolsWindow) { + try { + await devtoolsWindow.setFocus(); + return; + } catch { + devtoolsWindow = null; + } } - } - devtoolsWindow = new WebviewWindow("pudu-devtools", { - url: "/devtools", - title: "PuduLauncher DevTools", - width: 900, - height: 600, - }); + devtoolsWindow = new WebviewWindow("pudu-devtools", { + url: "/devtools", + title: "PuduLauncher DevTools", + width: 900, + height: 600, + }); - devtoolsWindow.once("tauri://destroyed", () => { - devtoolsWindow = null; - }); + devtoolsWindow.once("tauri://destroyed", () => { + devtoolsWindow = null; + }); } diff --git a/src/devtools/presets/tts-presets.ts b/src/devtools/presets/tts-presets.ts index 6a51184..2ee10bc 100644 --- a/src/devtools/presets/tts-presets.ts +++ b/src/devtools/presets/tts-presets.ts @@ -21,55 +21,151 @@ export const ttsPresets: EventPreset[] = [ { label: "Status \u2192 NotInstalled", description: "Set TTS status to NotInstalled", - mocks: [{ endpoint: "/api/tts/get-status", response: { success: true, data: { status: 0, updateAvailable: false } } }], + mocks: [ + { + endpoint: "/api/tts/get-status", + response: { success: true, data: { status: 0, updateAvailable: false } }, + }, + ], events: [ - { eventType: "tts:status-changed", data: { eventType: "tts:status-changed", timestamp: now(), status: 0, message: null } }, + { + eventType: "tts:status-changed", + data: { eventType: "tts:status-changed", timestamp: now(), status: 0, message: null }, + }, ], }, { label: "Status \u2192 Installed", description: "Set TTS status to Installed", - mocks: [{ endpoint: "/api/tts/get-status", response: { success: true, data: { status: 4, updateAvailable: false, installedVersion: "1.0.0" } } }], + mocks: [ + { + endpoint: "/api/tts/get-status", + response: { success: true, data: { status: 4, updateAvailable: false, installedVersion: "1.0.0" } }, + }, + ], events: [ - { eventType: "tts:status-changed", data: { eventType: "tts:status-changed", timestamp: now(), status: 4, message: "Installation complete" } }, + { + eventType: "tts:status-changed", + data: { + eventType: "tts:status-changed", + timestamp: now(), + status: 4, + message: "Installation complete", + }, + }, ], }, { label: "Status \u2192 ServerRunning", description: "Set TTS status to ServerRunning", events: [ - { eventType: "tts:status-changed", data: { eventType: "tts:status-changed", timestamp: now(), status: 6, message: "Server started" } }, + { + eventType: "tts:status-changed", + data: { eventType: "tts:status-changed", timestamp: now(), status: 6, message: "Server started" }, + }, ], }, { label: "Status \u2192 Error", description: "Set TTS status to Error with a message", - mocks: [{ endpoint: "/api/tts/get-status", response: { success: true, data: { status: 8, updateAvailable: false, errorMessage: "Something went wrong" } } }], + mocks: [ + { + endpoint: "/api/tts/get-status", + response: { + success: true, + data: { status: 8, updateAvailable: false, errorMessage: "Something went wrong" }, + }, + }, + ], events: [ - { eventType: "tts:status-changed", data: { eventType: "tts:status-changed", timestamp: now(), status: 8, message: "Something went wrong" } }, + { + eventType: "tts:status-changed", + data: { eventType: "tts:status-changed", timestamp: now(), status: 8, message: "Something went wrong" }, + }, ], }, { label: "Update Available", description: "Trigger update available notification", events: [ - { eventType: "tts:update-available", data: { eventType: "tts:update-available", timestamp: now(), installedVersion: "1.0.0", latestVersion: "1.0.2" } }, + { + eventType: "tts:update-available", + data: { + eventType: "tts:update-available", + timestamp: now(), + installedVersion: "1.0.0", + latestVersion: "1.0.2", + }, + }, ], }, { label: "Simulate Install Flow", description: "Full install sequence: Downloading \u2192 Installing \u2192 output lines \u2192 Installed", - mocks: [{ endpoint: "/api/tts/get-status", response: { success: true, data: { status: 4, updateAvailable: false, installedVersion: "1.0.0" } } }], + mocks: [ + { + endpoint: "/api/tts/get-status", + response: { success: true, data: { status: 4, updateAvailable: false, installedVersion: "1.0.0" } }, + }, + ], events: [ - { eventType: "tts:status-changed", data: { eventType: "tts:status-changed", timestamp: now(), status: 2, message: "Downloading..." } }, - { eventType: "tts:status-changed", data: { eventType: "tts:status-changed", timestamp: now(), status: 3, message: "Installing..." }, delayMs: 1500 }, - { eventType: "tts:install-output", data: { eventType: "tts:install-output", timestamp: now(), line: "[1 / 6] Checking Python installation..." }, delayMs: 500 }, - { eventType: "tts:install-output", data: { eventType: "tts:install-output", timestamp: now(), line: "[2 / 6] Creating virtual environment..." }, delayMs: 1000 }, - { eventType: "tts:install-output", data: { eventType: "tts:install-output", timestamp: now(), line: "[3 / 6] Installing requirements..." }, delayMs: 1000 }, - { eventType: "tts:install-output", data: { eventType: "tts:install-output", timestamp: now(), line: "[4 / 6] Installing eSpeak..." }, delayMs: 2000 }, - { eventType: "tts:install-output", data: { eventType: "tts:install-output", timestamp: now(), line: "[5 / 6] Downloading TTS model..." }, delayMs: 1500 }, - { eventType: "tts:install-output", data: { eventType: "tts:install-output", timestamp: now(), line: "[6 / 6] Writing manifest..." }, delayMs: 1000 }, - { eventType: "tts:status-changed", data: { eventType: "tts:status-changed", timestamp: now(), status: 4, message: "Installation complete" }, delayMs: 500 }, + { + eventType: "tts:status-changed", + data: { eventType: "tts:status-changed", timestamp: now(), status: 2, message: "Downloading..." }, + }, + { + eventType: "tts:status-changed", + data: { eventType: "tts:status-changed", timestamp: now(), status: 3, message: "Installing..." }, + delayMs: 1500, + }, + { + eventType: "tts:install-output", + data: { + eventType: "tts:install-output", + timestamp: now(), + line: "[1 / 6] Checking Python installation...", + }, + delayMs: 500, + }, + { + eventType: "tts:install-output", + data: { + eventType: "tts:install-output", + timestamp: now(), + line: "[2 / 6] Creating virtual environment...", + }, + delayMs: 1000, + }, + { + eventType: "tts:install-output", + data: { eventType: "tts:install-output", timestamp: now(), line: "[3 / 6] Installing requirements..." }, + delayMs: 1000, + }, + { + eventType: "tts:install-output", + data: { eventType: "tts:install-output", timestamp: now(), line: "[4 / 6] Installing eSpeak..." }, + delayMs: 2000, + }, + { + eventType: "tts:install-output", + data: { eventType: "tts:install-output", timestamp: now(), line: "[5 / 6] Downloading TTS model..." }, + delayMs: 1500, + }, + { + eventType: "tts:install-output", + data: { eventType: "tts:install-output", timestamp: now(), line: "[6 / 6] Writing manifest..." }, + delayMs: 1000, + }, + { + eventType: "tts:status-changed", + data: { + eventType: "tts:status-changed", + timestamp: now(), + status: 4, + message: "Installation complete", + }, + delayMs: 500, + }, ], }, ]; diff --git a/src/devtools/protocol.ts b/src/devtools/protocol.ts index e39c460..9bb298e 100644 --- a/src/devtools/protocol.ts +++ b/src/devtools/protocol.ts @@ -1,33 +1,33 @@ export interface RequestLogEntry { - id: string; - timestamp: number; - method: string; - endpoint: string; - requestBody: unknown | null; - responseBody: unknown | null; - wasMocked: boolean; - durationMs: number | null; - error: string | null; + id: string; + timestamp: number; + method: string; + endpoint: string; + requestBody: unknown | null; + responseBody: unknown | null; + wasMocked: boolean; + durationMs: number | null; + error: string | null; } export interface MockConfig { - endpoint: string; - response: unknown; + endpoint: string; + response: unknown; } // Commands: dev panel → main window export type DevToolsCommand = - | { type: "mock-endpoint"; endpoint: string; response: unknown } - | { type: "clear-mock"; endpoint: string } - | { type: "clear-all-mocks" } - | { type: "inject-event"; eventType: string; data: unknown } - | { type: "request-state-snapshot" }; + | { type: "mock-endpoint"; endpoint: string; response: unknown } + | { type: "clear-mock"; endpoint: string } + | { type: "clear-all-mocks" } + | { type: "inject-event"; eventType: string; data: unknown } + | { type: "request-state-snapshot" }; // Reports: main window → dev panel export type DevToolsReport = - | { type: "request-logged"; entry: RequestLogEntry } - | { type: "event-injected"; eventType: string; data: unknown; timestamp: number } - | { type: "state-snapshot"; sources: Record }; + | { type: "request-logged"; entry: RequestLogEntry } + | { type: "event-injected"; eventType: string; data: unknown; timestamp: number } + | { type: "state-snapshot"; sources: Record }; export type DevToolsMessage = DevToolsCommand | DevToolsReport; diff --git a/src/hooks/useInstallationState.ts b/src/hooks/useInstallationState.ts index f74325d..79ff729 100644 --- a/src/hooks/useInstallationState.ts +++ b/src/hooks/useInstallationState.ts @@ -51,9 +51,7 @@ export function useInstallationState() { }, []); const deleteInstallation = async (id: string) => { - setInstallations((prev) => - prev ? prev.filter((i) => i.id !== id) : prev, - ); + setInstallations((prev) => (prev ? prev.filter((i) => i.id !== id) : prev)); const api = new InstallationsApi(); try { diff --git a/src/hooks/usePaginatedCollection.ts b/src/hooks/usePaginatedCollection.ts index 3209d80..f39a4db 100644 --- a/src/hooks/usePaginatedCollection.ts +++ b/src/hooks/usePaginatedCollection.ts @@ -19,7 +19,7 @@ interface UsePaginatedCollectionResult { export function usePaginatedCollection( items: T[], pageSize: number, - options?: UsePaginatedCollectionOptions + options?: UsePaginatedCollectionOptions, ): UsePaginatedCollectionResult { const normalizedPageSize = Math.max(1, Math.floor(pageSize)); const totalItems = items.length; diff --git a/src/main.tsx b/src/main.tsx index 08ba942..0a6d03e 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -6,33 +6,33 @@ const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement) // Dev tools window gets its own minimal render tree, no ThemeProvider, no App. // This avoids touching App.tsx which would break React Compiler's JSX memoization. if (import.meta.env.DEV && window.location.pathname === "/devtools") { - import("./devtools/DevToolsPage").then(({ default: DevToolsPage }) => { - root.render( - - - , - ); - }); + import("./devtools/DevToolsPage").then(({ default: DevToolsPage }) => { + root.render( + + + , + ); + }); } else { - // Normal app, static imports keep App.tsx identical to its original form - const { ThemeProvider } = await import("./contextProviders/ThemeProvider"); - const { default: App } = await import("./App"); + // Normal app, static imports keep App.tsx identical to its original form + const { ThemeProvider } = await import("./contextProviders/ThemeProvider"); + const { default: App } = await import("./App"); - root.render( - - - - - , - ); + root.render( + + + + + , + ); - // Ctrl+Shift+D opens devtools window (dev only, outside React tree) - if (import.meta.env.DEV) { - window.addEventListener("keydown", (e) => { - if (e.ctrlKey && e.shiftKey && e.key === "D") { - e.preventDefault(); - void import("./devtools/open-devtools-window").then((m) => m.openDevToolsWindow()); - } - }); - } + // Ctrl+Shift+D opens devtools window (dev only, outside React tree) + if (import.meta.env.DEV) { + window.addEventListener("keydown", (e) => { + if (e.ctrlKey && e.shiftKey && e.key === "D") { + e.preventDefault(); + void import("./devtools/open-devtools-window").then((m) => m.openDevToolsWindow()); + } + }); + } } diff --git a/src/pudu/events/event-listener.ts b/src/pudu/events/event-listener.ts index 9b66b37..e04fb20 100644 --- a/src/pudu/events/event-listener.ts +++ b/src/pudu/events/event-listener.ts @@ -1,5 +1,5 @@ -import type { EventBase, PuduEvent, PuduEventMap, PuduEventType } from '../generated/types'; -import { getSidecarWsUrl } from '../sidecar'; +import type { EventBase, PuduEvent, PuduEventMap, PuduEventType } from "../generated/types"; +import { getSidecarWsUrl } from "../sidecar"; /** * WebSocket-based event listener for receiving real-time events from the sidecar. @@ -7,193 +7,190 @@ import { getSidecarWsUrl } from '../sidecar'; type EventHandler = (event: PuduEvent) => void; export class EventListener { - private ws: WebSocket | null = null; - private handlers = new Map(); - private reconnectInterval = 3000; - private reconnectTimer: number | null = null; - private shouldReconnect = true; - private connectionSession = 0; - private connectPromise: Promise | null = null; - - async connect(): Promise { - this.shouldReconnect = true; - - if (this.ws?.readyState === WebSocket.OPEN || this.ws?.readyState === WebSocket.CONNECTING) { - return; - } - - if (this.connectPromise) { - return this.connectPromise; - } - - this.connectPromise = this.doConnect(); - try { - await this.connectPromise; - } finally { - this.connectPromise = null; - } - } - - private async doConnect(): Promise { - const session = this.connectionSession; - - try { - const wsUrl = await getSidecarWsUrl(); - if (!this.shouldReconnect || session !== this.connectionSession) { - return; - } - - if (this.ws?.readyState === WebSocket.OPEN || this.ws?.readyState === WebSocket.CONNECTING) { - return; - } - - const ws = new WebSocket(`${wsUrl}/events`); - this.ws = ws; + private ws: WebSocket | null = null; + private handlers = new Map(); + private reconnectInterval = 3000; + private reconnectTimer: number | null = null; + private shouldReconnect = true; + private connectionSession = 0; + private connectPromise: Promise | null = null; + + async connect(): Promise { + this.shouldReconnect = true; + + if (this.ws?.readyState === WebSocket.OPEN || this.ws?.readyState === WebSocket.CONNECTING) { + return; + } - ws.onopen = () => { - if (!this.shouldReconnect || session !== this.connectionSession) { - ws.close(); - return; + if (this.connectPromise) { + return this.connectPromise; } - console.log('Connected to event stream'); - if (this.reconnectTimer) { - clearTimeout(this.reconnectTimer); - this.reconnectTimer = null; + this.connectPromise = this.doConnect(); + try { + await this.connectPromise; + } finally { + this.connectPromise = null; } - }; + } + + private async doConnect(): Promise { + const session = this.connectionSession; - ws.onmessage = (msg) => { try { - const event = JSON.parse(msg.data) as EventBase; - const eventType = event.eventType as PuduEventType; - const handlers = this.handlers.get(eventType); - - if (handlers) { - handlers.forEach((handler) => handler(event as PuduEvent)); - } else { - console.log('Unhandled event type:', event.eventType); - } + const wsUrl = await getSidecarWsUrl(); + if (!this.shouldReconnect || session !== this.connectionSession) { + return; + } + + if (this.ws?.readyState === WebSocket.OPEN || this.ws?.readyState === WebSocket.CONNECTING) { + return; + } + + const ws = new WebSocket(`${wsUrl}/events`); + this.ws = ws; + + ws.onopen = () => { + if (!this.shouldReconnect || session !== this.connectionSession) { + ws.close(); + return; + } + + console.log("Connected to event stream"); + if (this.reconnectTimer) { + clearTimeout(this.reconnectTimer); + this.reconnectTimer = null; + } + }; + + ws.onmessage = (msg) => { + try { + const event = JSON.parse(msg.data) as EventBase; + const eventType = event.eventType as PuduEventType; + const handlers = this.handlers.get(eventType); + + if (handlers) { + handlers.forEach((handler) => handler(event as PuduEvent)); + } else { + console.log("Unhandled event type:", event.eventType); + } + } catch (error) { + console.error("Error parsing event:", error); + } + }; + + ws.onerror = (error) => { + console.error("WebSocket error:", error); + }; + + ws.onclose = () => { + if (this.ws === ws) { + this.ws = null; + } + + console.log("Disconnected from event stream"); + if (this.shouldReconnect && session === this.connectionSession) { + this.scheduleReconnect(); + } + }; } catch (error) { - console.error('Error parsing event:', error); + console.error("Failed to connect to event stream:", error); + if (this.shouldReconnect && session === this.connectionSession) { + this.scheduleReconnect(); + } } - }; + } - ws.onerror = (error) => { - console.error('WebSocket error:', error); - }; + on( + eventType: TEventType, + handler: (event: PuduEventMap[TEventType]) => void, + ): void { + if (!this.handlers.has(eventType)) { + this.handlers.set(eventType, []); + } - ws.onclose = () => { - if (this.ws === ws) { - this.ws = null; + this.handlers.get(eventType)!.push(handler as EventHandler); + void this.connect(); + } + + off( + eventType: TEventType, + handler?: (event: PuduEventMap[TEventType]) => void, + ): void { + if (!handler) { + this.handlers.delete(eventType); + if (!this.hasHandlers()) { + this.disconnect(); + } + return; } - console.log('Disconnected from event stream'); - if (this.shouldReconnect && session === this.connectionSession) { - this.scheduleReconnect(); + const handlers = this.handlers.get(eventType); + if (handlers) { + const index = handlers.indexOf(handler as EventHandler); + if (index !== -1) { + handlers.splice(index, 1); + if (handlers.length === 0) { + this.handlers.delete(eventType); + } + } } - }; - } catch (error) { - console.error('Failed to connect to event stream:', error); - if (this.shouldReconnect && session === this.connectionSession) { - this.scheduleReconnect(); - } - } - } - - on( - eventType: TEventType, - handler: (event: PuduEventMap[TEventType]) => void - ): void { - if (!this.handlers.has(eventType)) { - this.handlers.set(eventType, []); - } - this.handlers.get(eventType)!.push(handler as EventHandler); - void this.connect(); - } - - off( - eventType: TEventType, - handler?: (event: PuduEventMap[TEventType]) => void - ): void { - if (!handler) { - this.handlers.delete(eventType); - if (!this.hasHandlers()) { - this.disconnect(); - } - return; + if (!this.hasHandlers()) { + this.disconnect(); + } } - const handlers = this.handlers.get(eventType); - if (handlers) { - const index = handlers.indexOf(handler as EventHandler); - if (index !== -1) { - handlers.splice(index, 1); - if (handlers.length === 0) { - this.handlers.delete(eventType); + injectEvent(eventType: TEventType, data: PuduEventMap[TEventType]): void { + const handlers = this.handlers.get(eventType); + if (handlers) { + handlers.forEach((handler) => handler(data as PuduEvent)); } - } } - if (!this.hasHandlers()) { - this.disconnect(); - } - } - - injectEvent( - eventType: TEventType, - data: PuduEventMap[TEventType] - ): void { - const handlers = this.handlers.get(eventType); - if (handlers) { - handlers.forEach((handler) => handler(data as PuduEvent)); - } - } + disconnect(): void { + this.shouldReconnect = false; + this.connectionSession += 1; + this.connectPromise = null; - disconnect(): void { - this.shouldReconnect = false; - this.connectionSession += 1; - this.connectPromise = null; + if (this.reconnectTimer) { + clearTimeout(this.reconnectTimer); + this.reconnectTimer = null; + } - if (this.reconnectTimer) { - clearTimeout(this.reconnectTimer); - this.reconnectTimer = null; + if (this.ws) { + this.ws.onclose = null; + this.ws.close(); + this.ws = null; + } } - if (this.ws) { - this.ws.onclose = null; - this.ws.close(); - this.ws = null; - } - } + private scheduleReconnect(): void { + if (this.reconnectTimer) { + return; + } - private scheduleReconnect(): void { - if (this.reconnectTimer) { - return; - } + const session = this.connectionSession; - const session = this.connectionSession; + this.reconnectTimer = window.setTimeout(() => { + this.reconnectTimer = null; - this.reconnectTimer = window.setTimeout(() => { - this.reconnectTimer = null; + if (!this.shouldReconnect || session !== this.connectionSession) { + return; + } - if (!this.shouldReconnect || session !== this.connectionSession) { - return; - } + console.log("Attempting to reconnect..."); + this.connect(); + }, this.reconnectInterval); + } - console.log('Attempting to reconnect...'); - this.connect(); - }, this.reconnectInterval); - } + private hasHandlers(): boolean { + for (const handlers of this.handlers.values()) { + if (handlers.length > 0) { + return true; + } + } - private hasHandlers(): boolean { - for (const handlers of this.handlers.values()) { - if (handlers.length > 0) { - return true; - } + return false; } - - return false; - } } diff --git a/src/pudu/log.ts b/src/pudu/log.ts index 4ced1ee..db381d0 100644 --- a/src/pudu/log.ts +++ b/src/pudu/log.ts @@ -1,24 +1,21 @@ -import { info, warn, error, debug, trace } from '@tauri-apps/plugin-log'; +import { info, warn, error, debug, trace } from "@tauri-apps/plugin-log"; -const isTauri = '__TAURI_INTERNALS__' in window; +const isTauri = "__TAURI_INTERNALS__" in window; -function wrap( - tauriFn: (msg: string) => Promise, - consoleFn: (...args: unknown[]) => void, -): (msg: string) => void { - return (msg: string) => { - if (isTauri) { - tauriFn(`[PuduFrontend] ${msg}`); - } else { - consoleFn(`[PuduFrontend] ${msg}`); - } - }; +function wrap(tauriFn: (msg: string) => Promise, consoleFn: (...args: unknown[]) => void): (msg: string) => void { + return (msg: string) => { + if (isTauri) { + tauriFn(`[PuduFrontend] ${msg}`); + } else { + consoleFn(`[PuduFrontend] ${msg}`); + } + }; } export const log = { - info: wrap(info, console.log), - warn: wrap(warn, console.warn), - error: wrap(error, console.error), - debug: wrap(debug, console.debug), - trace: wrap(trace, console.trace), + info: wrap(info, console.log), + warn: wrap(warn, console.warn), + error: wrap(error, console.error), + debug: wrap(debug, console.debug), + trace: wrap(trace, console.trace), }; diff --git a/src/pudu/pudu-fetch.ts b/src/pudu/pudu-fetch.ts index 1bdaf4d..50178ca 100644 --- a/src/pudu/pudu-fetch.ts +++ b/src/pudu/pudu-fetch.ts @@ -3,99 +3,99 @@ import { getSidecarBaseUrl } from "./sidecar"; let idCounter = 0; -export async function puduFetch( - endpoint: string, - init?: RequestInit, -): Promise { - const baseUrl = await getSidecarBaseUrl(); - const url = `${baseUrl}${endpoint}`; +export async function puduFetch(endpoint: string, init?: RequestInit): Promise { + const baseUrl = await getSidecarBaseUrl(); + const url = `${baseUrl}${endpoint}`; - if (!import.meta.env.DEV || !devBridge) { - return fetch(url, init); - } + if (!import.meta.env.DEV || !devBridge) { + return fetch(url, init); + } - const id = `req-${++idCounter}`; - const timestamp = Date.now(); - let requestBody: unknown = null; - if (init?.body && typeof init.body === "string") { - try { - requestBody = JSON.parse(init.body); - } catch { - requestBody = init.body; + const id = `req-${++idCounter}`; + const timestamp = Date.now(); + let requestBody: unknown = null; + if (init?.body && typeof init.body === "string") { + try { + requestBody = JSON.parse(init.body); + } catch { + requestBody = init.body; + } } - } - // Check for mock - if (devBridge.hasMock(endpoint)) { - const mockResponse = devBridge.getMock(endpoint); + // Check for mock + if (devBridge.hasMock(endpoint)) { + const mockResponse = devBridge.getMock(endpoint); - devBridge.logRequest({ - id, - timestamp, - method: init?.method ?? "GET", - endpoint, - requestBody, - responseBody: mockResponse, - wasMocked: true, - durationMs: 0, - error: null, - }); + devBridge.logRequest({ + id, + timestamp, + method: init?.method ?? "GET", + endpoint, + requestBody, + responseBody: mockResponse, + wasMocked: true, + durationMs: 0, + error: null, + }); + + return new Response(JSON.stringify(mockResponse), { + status: 200, + headers: { "Content-Type": "application/json" }, + }); + } - return new Response(JSON.stringify(mockResponse), { - status: 200, - headers: { "Content-Type": "application/json" }, - }); - } + // Real fetch, log in background to avoid delaying the response + const start = performance.now(); + try { + const response = await fetch(url, init); + const durationMs = Math.round(performance.now() - start); - // Real fetch, log in background to avoid delaying the response - const start = performance.now(); - try { - const response = await fetch(url, init); - const durationMs = Math.round(performance.now() - start); + // Fire-and-forget: clone + log without blocking the caller + response + .clone() + .json() + .then( + (responseBody) => { + devBridge!.logRequest({ + id, + timestamp, + method: init?.method ?? "GET", + endpoint, + requestBody, + responseBody, + wasMocked: false, + durationMs, + error: response.ok ? null : `HTTP ${response.status}`, + }); + }, + () => { + devBridge!.logRequest({ + id, + timestamp, + method: init?.method ?? "GET", + endpoint, + requestBody, + responseBody: null, + wasMocked: false, + durationMs, + error: response.ok ? null : `HTTP ${response.status}`, + }); + }, + ); - // Fire-and-forget: clone + log without blocking the caller - response.clone().json().then( - (responseBody) => { - devBridge!.logRequest({ - id, - timestamp, - method: init?.method ?? "GET", - endpoint, - requestBody, - responseBody, - wasMocked: false, - durationMs, - error: response.ok ? null : `HTTP ${response.status}`, - }); - }, - () => { - devBridge!.logRequest({ - id, - timestamp, - method: init?.method ?? "GET", - endpoint, - requestBody, - responseBody: null, - wasMocked: false, - durationMs, - error: response.ok ? null : `HTTP ${response.status}`, + return response; + } catch (error) { + devBridge.logRequest({ + id, + timestamp, + method: init?.method ?? "GET", + endpoint, + requestBody, + responseBody: null, + wasMocked: false, + durationMs: Math.round(performance.now() - start), + error: error instanceof Error ? error.message : "Network error", }); - }, - ); - - return response; - } catch (error) { - devBridge.logRequest({ - id, - timestamp, - method: init?.method ?? "GET", - endpoint, - requestBody, - responseBody: null, - wasMocked: false, - durationMs: Math.round(performance.now() - start), - error: error instanceof Error ? error.message : "Network error", - }); - throw error; - } + throw error; + } } diff --git a/src/pudu/sidecar.ts b/src/pudu/sidecar.ts index 1f31cf8..b940a6b 100644 --- a/src/pudu/sidecar.ts +++ b/src/pudu/sidecar.ts @@ -1,10 +1,10 @@ -import { invoke } from '@tauri-apps/api/core'; -import { listen } from '@tauri-apps/api/event'; +import { invoke } from "@tauri-apps/api/core"; +import { listen } from "@tauri-apps/api/event"; let cachedPort: number | null = null; let portPromise: Promise | null = null; -const isTauri = '__TAURI_INTERNALS__' in window; +const isTauri = "__TAURI_INTERNALS__" in window; const SIDECAR_TIMEOUT_MS = 60_000; @@ -17,61 +17,61 @@ const SIDECAR_TIMEOUT_MS = 60_000; * In standalone dev mode (no Tauri), reads from VITE_SIDECAR_PORT env var. */ export function getSidecarPort(): Promise { - if (cachedPort) return Promise.resolve(cachedPort); + if (cachedPort) return Promise.resolve(cachedPort); - if (!isTauri) { - const envPort = import.meta.env.VITE_SIDECAR_PORT; - if (!envPort) { - return Promise.reject(new Error('Running outside Tauri: set VITE_SIDECAR_PORT in .env.local')); + if (!isTauri) { + const envPort = import.meta.env.VITE_SIDECAR_PORT; + if (!envPort) { + return Promise.reject(new Error("Running outside Tauri: set VITE_SIDECAR_PORT in .env.local")); + } + cachedPort = Number(envPort); + return Promise.resolve(cachedPort); } - cachedPort = Number(envPort); - return Promise.resolve(cachedPort); - } - // Deduplicate concurrent callers, one shared promise. - if (!portPromise) { - portPromise = discoverPort(); - } + // Deduplicate concurrent callers, one shared promise. + if (!portPromise) { + portPromise = discoverPort(); + } - return portPromise; + return portPromise; } async function discoverPort(): Promise { - // The event may have already fired before we loaded. Try the command first. - try { - const port = await invoke('get_sidecar_port'); - cachedPort = port; - return port; - } catch { - // Not ready yet fall through to event listener. - } + // The event may have already fired before we loaded. Try the command first. + try { + const port = await invoke("get_sidecar_port"); + cachedPort = port; + return port; + } catch { + // Not ready yet fall through to event listener. + } - return new Promise((resolve, reject) => { - let settled = false; + return new Promise((resolve, reject) => { + let settled = false; - const timeout = setTimeout(() => { - if (!settled) { - settled = true; - reject(new Error('Sidecar did not start in time')); - } - }, SIDECAR_TIMEOUT_MS); + const timeout = setTimeout(() => { + if (!settled) { + settled = true; + reject(new Error("Sidecar did not start in time")); + } + }, SIDECAR_TIMEOUT_MS); - void listen('sidecar-ready', (event) => { - if (settled) return; - settled = true; - clearTimeout(timeout); - cachedPort = event.payload; - resolve(event.payload); + void listen("sidecar-ready", (event) => { + if (settled) return; + settled = true; + clearTimeout(timeout); + cachedPort = event.payload; + resolve(event.payload); + }); }); - }); } export async function getSidecarBaseUrl(): Promise { - const port = await getSidecarPort(); - return `http://localhost:${port}`; + const port = await getSidecarPort(); + return `http://localhost:${port}`; } export async function getSidecarWsUrl(): Promise { - const port = await getSidecarPort(); - return `ws://localhost:${port}`; + const port = await getSidecarPort(); + return `ws://localhost:${port}`; } diff --git a/src/storybook/mockProviders.tsx b/src/storybook/mockProviders.tsx index ab85c04..b80b4de 100644 --- a/src/storybook/mockProviders.tsx +++ b/src/storybook/mockProviders.tsx @@ -1,8 +1,5 @@ import type { PropsWithChildren } from "react"; -import { - FeedbackContext, - type FeedbackContextValue, -} from "../contextProviders/FeedbackContextProvider"; +import { FeedbackContext, type FeedbackContextValue } from "../contextProviders/FeedbackContextProvider"; import { OnboardingContextProvider, type OnboardingApiClient, @@ -15,11 +12,9 @@ interface OnboardingCommandResult { error?: string | null; } -const NOOP = () => { }; +const NOOP = () => {}; -export function createMockFeedbackContextValue( - overrides: Partial = {}, -): FeedbackContextValue { +export function createMockFeedbackContextValue(overrides: Partial = {}): FeedbackContextValue { return { showError: NOOP, showFatal: NOOP, @@ -40,9 +35,7 @@ export function MockFeedbackProvider(props: MockFeedbackProviderProps) { const { children, value } = props; return ( - - {children} - + {children} ); } @@ -96,27 +89,19 @@ interface MockOnboardingProviderProps extends PropsWithChildren { } export function MockOnboardingProvider(props: MockOnboardingProviderProps) { - const { - children, - pendingSteps, - createApi, - apiMockOptions, - feedbackContextValue, - errorReporter, - } = props; + const { children, pendingSteps, createApi, apiMockOptions, feedbackContextValue, errorReporter } = props; - const createApiForProvider = createApi - ?? (() => createOnboardingApiMock({ - pendingSteps, - ...apiMockOptions, - })); + const createApiForProvider = + createApi ?? + (() => + createOnboardingApiMock({ + pendingSteps, + ...apiMockOptions, + })); return ( - + {children} diff --git a/src/themes/australNight.ts b/src/themes/australNight.ts index 762b85a..7816aa2 100644 --- a/src/themes/australNight.ts +++ b/src/themes/australNight.ts @@ -1,5 +1,5 @@ -import {extendTheme} from "@mui/joy/styles"; -import {CSSProperties} from "react"; +import { extendTheme } from "@mui/joy/styles"; +import { CSSProperties } from "react"; const australNight = extendTheme({ colorSchemes: { @@ -88,11 +88,11 @@ const australNight = extendTheme({ }); export const australNightScrollbarStyles: Record = { - "*": {scrollbarWidth: "thin", scrollbarColor: "#1fab78 #0e1b14"}, - "*::-webkit-scrollbar": {width: "12px", height: "12px"}, - "*::-webkit-scrollbar-track": {background: "#0e1b14"}, - "*::-webkit-scrollbar-thumb": {backgroundColor: "#1fab78", border: "2px solid #0e1b14", borderRadius: "8px"}, - "*::-webkit-scrollbar-thumb:hover": {backgroundColor: "#3bc792"}, + "*": { scrollbarWidth: "thin", scrollbarColor: "#1fab78 #0e1b14" }, + "*::-webkit-scrollbar": { width: "12px", height: "12px" }, + "*::-webkit-scrollbar-track": { background: "#0e1b14" }, + "*::-webkit-scrollbar-thumb": { backgroundColor: "#1fab78", border: "2px solid #0e1b14", borderRadius: "8px" }, + "*::-webkit-scrollbar-thumb:hover": { backgroundColor: "#3bc792" }, }; export default australNight; diff --git a/src/themes/doors95.ts b/src/themes/doors95.ts index f587e6b..bbce6d4 100644 --- a/src/themes/doors95.ts +++ b/src/themes/doors95.ts @@ -1,13 +1,13 @@ -import {extendTheme} from "@mui/joy/styles"; -import {CSSProperties} from "react"; +import { extendTheme } from "@mui/joy/styles"; +import { CSSProperties } from "react"; // DOORS 95 PALETTE -const WIN95_TEAL = "#008080"; // Desktop Background -const WIN95_GRAY = "#C0C0C0"; // Surface/Window Color -const WIN95_BLUE = "#000080"; // Title Bar / Primary -const WIN95_WHITE = "#FFFFFF"; // Highlights -const WIN95_BLACK = "#000000"; // Text / Deep Shadows -const WIN95_DKGRAY = "#808080"; // Shadow mid-tone +const WIN95_TEAL = "#008080"; // Desktop Background +const WIN95_GRAY = "#C0C0C0"; // Surface/Window Color +const WIN95_BLUE = "#000080"; // Title Bar / Primary +const WIN95_WHITE = "#FFFFFF"; // Highlights +const WIN95_BLACK = "#000000"; // Text / Deep Shadows +const WIN95_DKGRAY = "#808080"; // Shadow mid-tone // VGA 16-color palette - the only colors Win95 actually had const WIN95_MAROON = "#800000"; @@ -239,7 +239,7 @@ const doors95 = extendTheme({ components: { JoyButton: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ boxShadow: bevelUp, border: "none", padding: "4px 12px", @@ -257,9 +257,10 @@ const doors95 = extendTheme({ color: WIN95_WHITE, }, }), - ...(ownerState.variant === "solid" && ownerState.color === "primary" && { - fontWeight: "bold", - }), + ...(ownerState.variant === "solid" && + ownerState.color === "primary" && { + fontWeight: "bold", + }), ...(ownerState.variant === "soft" && { boxShadow: "none", border: `1px solid ${WIN95_DKGRAY}`, @@ -276,7 +277,7 @@ const doors95 = extendTheme({ }, JoyIconButton: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ boxShadow: ownerState.variant === "solid" ? bevelUp : "none", border: "none", "&:active": { @@ -408,7 +409,7 @@ const doors95 = extendTheme({ }, JoySheet: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ color: WIN95_BLACK, ...(ownerState.variant === "outlined" && { backgroundColor: WIN95_GRAY, @@ -451,7 +452,7 @@ const doors95 = extendTheme({ }, JoyAlert: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ backgroundColor: WIN95_GRAY, color: WIN95_BLACK, boxShadow: bevelUp, @@ -464,7 +465,7 @@ const doors95 = extendTheme({ }, JoyChip: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ ...(ownerState.variant !== "solid" && { color: WIN95_BLACK, }), @@ -473,7 +474,7 @@ const doors95 = extendTheme({ }, JoySwitch: { styleOverrides: { - track: ({ownerState}) => ({ + track: ({ ownerState }) => ({ backgroundColor: WIN95_GRAY, boxShadow: sunkenWell, ...(ownerState.checked && { @@ -541,14 +542,17 @@ const doors95 = extendTheme({ }, JoyLinearProgress: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ backgroundColor: WIN95_GRAY, boxShadow: sunkenWell, "--LinearProgress-progressColor": - ownerState.color === "danger" ? WIN95_MAROON - : ownerState.color === "success" ? WIN95_GREEN - : ownerState.color === "warning" ? WIN95_OLIVE - : WIN95_BLUE, + ownerState.color === "danger" + ? WIN95_MAROON + : ownerState.color === "success" + ? WIN95_GREEN + : ownerState.color === "warning" + ? WIN95_OLIVE + : WIN95_BLUE, }), }, }, @@ -695,7 +699,7 @@ const doors95 = extendTheme({ }, JoyAvatar: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ ...(ownerState.variant !== "solid" && { color: WIN95_BLACK, }), @@ -768,8 +772,8 @@ const doors95 = extendTheme({ }); export const doors95ScrollbarStyles: Record = { - "*": {scrollbarWidth: "thin", scrollbarColor: `${WIN95_GRAY} ${WIN95_TEAL}`}, - "*::-webkit-scrollbar": {width: "16px", height: "16px"}, + "*": { scrollbarWidth: "thin", scrollbarColor: `${WIN95_GRAY} ${WIN95_TEAL}` }, + "*::-webkit-scrollbar": { width: "16px", height: "16px" }, "*::-webkit-scrollbar-track": { background: WIN95_TEAL, boxShadow: sunkenWell, @@ -779,7 +783,7 @@ export const doors95ScrollbarStyles: Record = { boxShadow: bevelUp, border: "none", }, - "*::-webkit-scrollbar-thumb:hover": {backgroundColor: WIN95_BLUE}, + "*::-webkit-scrollbar-thumb:hover": { backgroundColor: WIN95_BLUE }, }; export default doors95; diff --git a/src/themes/hotdogStand.ts b/src/themes/hotdogStand.ts index baeace6..a6acec8 100644 --- a/src/themes/hotdogStand.ts +++ b/src/themes/hotdogStand.ts @@ -1,5 +1,5 @@ -import {extendTheme} from "@mui/joy/styles"; -import {CSSProperties} from "react"; +import { extendTheme } from "@mui/joy/styles"; +import { CSSProperties } from "react"; // THE UNHOLY TRINITY const RETRO_RED = "#CC0000"; @@ -209,7 +209,7 @@ const hotdogStandTheme = extendTheme({ components: { JoyButton: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ border: `2px solid ${RETRO_BLACK}`, boxShadow: `2px 2px 0px 0px ${RETRO_BLACK}`, "&:active": { @@ -254,7 +254,7 @@ const hotdogStandTheme = extendTheme({ }, JoyIconButton: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ ...(ownerState.variant === "solid" && { backgroundColor: RETRO_YELLOW, color: RETRO_BLACK, @@ -276,7 +276,7 @@ const hotdogStandTheme = extendTheme({ backgroundColor: RETRO_YELLOW, color: RETRO_BLACK, border: `2px solid ${RETRO_BLACK}`, - "&::before": {display: "none"}, + "&::before": { display: "none" }, "&.Mui-disabled": { backgroundColor: RETRO_DKRED, color: "#CC9900", @@ -290,7 +290,7 @@ const hotdogStandTheme = extendTheme({ backgroundColor: RETRO_YELLOW, color: RETRO_BLACK, border: `2px solid ${RETRO_BLACK}`, - "&::before": {display: "none"}, + "&::before": { display: "none" }, }, }, }, @@ -300,7 +300,7 @@ const hotdogStandTheme = extendTheme({ backgroundColor: RETRO_YELLOW, color: RETRO_BLACK, border: `2px solid ${RETRO_BLACK}`, - "&::before": {display: "none"}, + "&::before": { display: "none" }, }, indicator: { color: RETRO_BLACK, @@ -395,7 +395,7 @@ const hotdogStandTheme = extendTheme({ }, JoySheet: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ color: RETRO_YELLOW, backgroundColor: RETRO_RED, ...(ownerState.variant === "outlined" && { @@ -412,7 +412,7 @@ const hotdogStandTheme = extendTheme({ }, JoyAlert: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ backgroundColor: RETRO_YELLOW, color: RETRO_BLACK, border: `2px solid ${RETRO_BLACK}`, @@ -431,7 +431,7 @@ const hotdogStandTheme = extendTheme({ }, JoyChip: { styleOverrides: { - root: ({ownerState}) => ({ + root: ({ ownerState }) => ({ ...(ownerState.variant === "solid" && { backgroundColor: RETRO_YELLOW, color: RETRO_BLACK, @@ -449,7 +449,7 @@ const hotdogStandTheme = extendTheme({ }, JoySwitch: { styleOverrides: { - track: ({ownerState}) => ({ + track: ({ ownerState }) => ({ backgroundColor: RETRO_BLACK, border: `2px solid ${RETRO_YELLOW}`, ...(ownerState.checked && { @@ -724,15 +724,15 @@ const hotdogStandTheme = extendTheme({ }); export const hotdogStandScrollbarStyles: Record = { - "*": {scrollbarWidth: "thin", scrollbarColor: `${RETRO_YELLOW} ${RETRO_RED}`}, - "*::-webkit-scrollbar": {width: "12px", height: "12px"}, - "*::-webkit-scrollbar-track": {background: RETRO_RED}, + "*": { scrollbarWidth: "thin", scrollbarColor: `${RETRO_YELLOW} ${RETRO_RED}` }, + "*::-webkit-scrollbar": { width: "12px", height: "12px" }, + "*::-webkit-scrollbar-track": { background: RETRO_RED }, "*::-webkit-scrollbar-thumb": { backgroundColor: RETRO_YELLOW, border: `2px solid ${RETRO_RED}`, borderRadius: "0px", }, - "*::-webkit-scrollbar-thumb:hover": {backgroundColor: RETRO_WHITE}, + "*::-webkit-scrollbar-thumb:hover": { backgroundColor: RETRO_WHITE }, }; export default hotdogStandTheme; diff --git a/src/themes/index.ts b/src/themes/index.ts index 56c8460..87460cf 100644 --- a/src/themes/index.ts +++ b/src/themes/index.ts @@ -1,10 +1,10 @@ import australNightTheme, { australNightScrollbarStyles } from "./australNight"; import doors95Theme, { doors95ScrollbarStyles } from "./doors95"; -import hotdogStandTheme, { hotdogStandScrollbarStyles } from "./hotdogStand" -import puduTheme, { puduScrollbarStyles } from "./pudu" -import riseAndShineTheme, { riseAndShineScrollbarStyles } from "./riseAndShine" -import vaporTheme, { vaporScrollbarStyles } from "./vapor" -import unitystationClassicTheme, { unitystationClassicScrollbarStyles } from "./unitystationClassic" +import hotdogStandTheme, { hotdogStandScrollbarStyles } from "./hotdogStand"; +import puduTheme, { puduScrollbarStyles } from "./pudu"; +import riseAndShineTheme, { riseAndShineScrollbarStyles } from "./riseAndShine"; +import vaporTheme, { vaporScrollbarStyles } from "./vapor"; +import unitystationClassicTheme, { unitystationClassicScrollbarStyles } from "./unitystationClassic"; import { CSSProperties } from "react"; export const themeRegistry = { diff --git a/src/themes/riseAndShine.ts b/src/themes/riseAndShine.ts index ba8a64f..88c9842 100644 --- a/src/themes/riseAndShine.ts +++ b/src/themes/riseAndShine.ts @@ -6,22 +6,22 @@ import { CSSProperties } from "react"; // White text, yellow accents, olive-green panels, uniform buttons // Olive-green background tones (from the VGUI panel backgrounds) -const VGUI_DARKEST = "#1b1e14"; // Deepest: behind everything -const VGUI_DARKER = "#272b1e"; // Body background -const VGUI_DARK = "#333828"; // Surface / panels -const VGUI_MID = "#3e4430"; // Elevated surfaces, popups, cards -const VGUI_BORDER = "#4e5540"; // Panel borders, dividers -const VGUI_RAISED = "#565e48"; // Button face, raised elements +const VGUI_DARKEST = "#1b1e14"; // Deepest: behind everything +const VGUI_DARKER = "#272b1e"; // Body background +const VGUI_DARK = "#333828"; // Surface / panels +const VGUI_MID = "#3e4430"; // Elevated surfaces, popups, cards +const VGUI_BORDER = "#4e5540"; // Panel borders, dividers +const VGUI_RAISED = "#565e48"; // Button face, raised elements // Text: white primary, with yellow as the accent -const VGUI_WHITE = "#e8e8e0"; // Primary text (warm white) -const VGUI_GRAY = "#b0b0a4"; // Secondary text -const VGUI_DIM = "#787870"; // Tertiary / disabled text +const VGUI_WHITE = "#e8e8e0"; // Primary text (warm white) +const VGUI_GRAY = "#b0b0a4"; // Secondary text +const VGUI_DIM = "#787870"; // Tertiary / disabled text // THE accent: VGUI yellow-gold (achievement titles, progress bars, highlights) -const VGUI_YELLOW = "#d4a838"; // Primary accent -const VGUI_YELLOW_HI = "#e8bc48"; // Hover / bright -const VGUI_YELLOW_LO = "#b08828"; // Pressed / muted +const VGUI_YELLOW = "#d4a838"; // Primary accent +const VGUI_YELLOW_HI = "#e8bc48"; // Hover / bright +const VGUI_YELLOW_LO = "#b08828"; // Pressed / muted const VGUI_YELLOW_SOFT = "rgba(212, 168, 56, 0.12)"; const VGUI_YELLOW_SOFT_HI = "rgba(212, 168, 56, 0.22)"; const VGUI_YELLOW_SOFT_ACT = "rgba(212, 168, 56, 0.32)"; @@ -429,9 +429,9 @@ const riseAndShineTheme = extendTheme({ }, }); -const SCROLL_TRACK = "#6b7058"; // Lighter muted olive (the background gutter) -const SCROLL_THUMB = "#4a5038"; // Darker olive (the draggable part) -const SCROLL_THUMB_HI = "#565c46"; // Thumb on hover +const SCROLL_TRACK = "#6b7058"; // Lighter muted olive (the background gutter) +const SCROLL_THUMB = "#4a5038"; // Darker olive (the draggable part) +const SCROLL_THUMB_HI = "#565c46"; // Thumb on hover export const riseAndShineScrollbarStyles: Record = { "*": { scrollbarWidth: "auto", scrollbarColor: `${SCROLL_THUMB} ${SCROLL_TRACK}` }, diff --git a/src/themes/vapor.ts b/src/themes/vapor.ts index 0a41f5a..7692a5f 100644 --- a/src/themes/vapor.ts +++ b/src/themes/vapor.ts @@ -180,14 +180,15 @@ const vaporTheme = extendTheme({ textTransform: "none" as const, letterSpacing: "0.02em", transition: "all 0.15s ease", - ...(ownerState.variant === "solid" && (ownerState.color === "primary" || ownerState.color === "warning") && { - background: `linear-gradient(to left, ${GP_DUSTY_BLUE} 5%, ${GP_CHALKY_BLUE} 95%)`, - color: "#ffffff", - "&:hover": { - background: `linear-gradient(to left, #4b9ac4 5%, #7ecef7 95%)`, + ...(ownerState.variant === "solid" && + (ownerState.color === "primary" || ownerState.color === "warning") && { + background: `linear-gradient(to left, ${GP_DUSTY_BLUE} 5%, ${GP_CHALKY_BLUE} 95%)`, color: "#ffffff", - }, - }), + "&:hover": { + background: `linear-gradient(to left, #4b9ac4 5%, #7ecef7 95%)`, + color: "#ffffff", + }, + }), }), }, },
{JSON.stringify(mock.response, null, 2)}
+