From 5dbc96172ca3b9244ce59b6c1ccaf575c982b534 Mon Sep 17 00:00:00 2001 From: Francisco Casiano Date: Sat, 5 Jul 2025 15:49:56 -0400 Subject: [PATCH 01/16] Removed unnecessary label and emoji --- .github/workflows/merge_protection.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/merge_protection.yml b/.github/workflows/merge_protection.yml index 35b8ba9..8600b73 100644 --- a/.github/workflows/merge_protection.yml +++ b/.github/workflows/merge_protection.yml @@ -106,7 +106,7 @@ jobs: owner: context.repo.owner, repo: context.repo.repo, issue_number: context.issue.number, - labels: ['branch-protection-violation', 'needs-attention'] + labels: ['branch-protection-violation'] }); - name: Optional - Auto-close PR @@ -125,5 +125,5 @@ jobs: owner: context.repo.owner, repo: context.repo.repo, issue_number: context.issue.number, - body: '🔒 This PR has been automatically closed due to branch protection rules. Please follow the correct workflow and create a new PR.' + body: 'This PR has been automatically closed due to branch protection rules. Please follow the correct workflow and create a new PR.' }); From a3f1649bbdb4357daa7f98929ef09a279482f08b Mon Sep 17 00:00:00 2001 From: Francisco Casiano Date: Sat, 5 Jul 2025 15:53:59 -0400 Subject: [PATCH 02/16] Added protection for the main branch --- .github/workflows/merge_protection.yml | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/.github/workflows/merge_protection.yml b/.github/workflows/merge_protection.yml index 8600b73..6998d3c 100644 --- a/.github/workflows/merge_protection.yml +++ b/.github/workflows/merge_protection.yml @@ -19,6 +19,25 @@ jobs: echo "Base branch: ${{ github.base_ref }}" echo "Head branch: ${{ github.head_ref }}" + # Check testnet protection + if [[ "${{ github.base_ref }}" == "main" && "${{ github.head_ref }}" != "dev" ]]; then + echo "violation=testnet" >> $GITHUB_OUTPUT + { + echo 'message<> $GITHUB_OUTPUT + exit 1 + fi + # Check testnet protection if [[ "${{ github.base_ref }}" == "testnet" && "${{ github.head_ref }}" != "main" ]]; then echo "violation=testnet" >> $GITHUB_OUTPUT From 5392748dd1e700c9d851cf762d8991d1b8b5b9bb Mon Sep 17 00:00:00 2001 From: Francisco Casiano Date: Mon, 7 Jul 2025 13:26:45 -0400 Subject: [PATCH 03/16] Implemented dynamic branch based import logic. --- .env.example | 7 + .gitignore | 6 +- public/or-wasm/monster_view.d.ts | 42 - public/or-wasm/monster_view.js | 2947 ---------------------- public/or-wasm/monster_view_bg.wasm.d.ts | 16 - src/api/constants.ts | 6 +- src/components/DrivesAndPrograms.tsx | 8 +- src/components/ProgramDatabase.tsx | 6 +- src/components/ProgramEventDemo.tsx | 5 +- src/utils/assetPreloader.ts | 8 +- 10 files changed, 33 insertions(+), 3018 deletions(-) create mode 100644 .env.example delete mode 100644 public/or-wasm/monster_view.d.ts delete mode 100644 public/or-wasm/monster_view.js delete mode 100644 public/or-wasm/monster_view_bg.wasm.d.ts diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..e90907c --- /dev/null +++ b/.env.example @@ -0,0 +1,7 @@ +# WASM Engine URL - Points to the compiled WebAssembly binary +# Dev: main branch WASM build / Testnet: testnet branch WASM build / Mainnet: mainnent branch WASM build +VITE_WASM_ENGINE_URL=https://your-domain.com/monster_view_bg.wasm + +# WASM JS Bindings URL - Points to the JavaScript bindings +# Dev: main branch bindings / Testnet: testnet bindings / Mainnet: mainnet branch production bindings +VITE_WASM_BINDINGS_URL=https://your-domain.com/monster_view.js diff --git a/.gitignore b/.gitignore index 76add87..a968684 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,6 @@ +# Autogenerated files & directories node_modules -dist \ No newline at end of file +dist + +# Environment Variables +.env diff --git a/public/or-wasm/monster_view.d.ts b/public/or-wasm/monster_view.d.ts deleted file mode 100644 index d3bfc6b..0000000 --- a/public/or-wasm/monster_view.d.ts +++ /dev/null @@ -1,42 +0,0 @@ -/* tslint:disable */ -/* eslint-disable */ - -export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module; - -export interface InitOutput { - readonly memory: WebAssembly.Memory; - readonly main: (a: number, b: number) => number; - readonly __externref_table_alloc: () => number; - readonly __wbindgen_export_1: WebAssembly.Table; - readonly __wbindgen_exn_store: (a: number) => void; - readonly __wbindgen_malloc: (a: number, b: number) => number; - readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number; - readonly __wbindgen_free: (a: number, b: number, c: number) => void; - readonly __wbindgen_export_6: WebAssembly.Table; - readonly _dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3d0cb53df6af5394: (a: number, b: number) => void; - readonly closure8019_externref_shim: (a: number, b: number, c: any) => void; - readonly _dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hf83f95ed8b47fb63: (a: number, b: number, c: number) => void; - readonly closure8362_externref_shim: (a: number, b: number, c: any, d: any) => void; - readonly __wbindgen_start: () => void; -} - -export type SyncInitInput = BufferSource | WebAssembly.Module; -/** -* Instantiates the given `module`, which can either be bytes or -* a precompiled `WebAssembly.Module`. -* -* @param {{ module: SyncInitInput }} module - Passing `SyncInitInput` directly is deprecated. -* -* @returns {InitOutput} -*/ -export function initSync(module: { module: SyncInitInput } | SyncInitInput): InitOutput; - -/** -* If `module_or_path` is {RequestInfo} or {URL}, makes a request and -* for everything else, calls `WebAssembly.instantiate` directly. -* -* @param {{ module_or_path: InitInput | Promise }} module_or_path - Passing `InitInput` directly is deprecated. -* -* @returns {Promise} -*/ -export default function __wbg_init (module_or_path?: { module_or_path: InitInput | Promise } | InitInput | Promise): Promise; diff --git a/public/or-wasm/monster_view.js b/public/or-wasm/monster_view.js deleted file mode 100644 index 1fd82fc..0000000 --- a/public/or-wasm/monster_view.js +++ /dev/null @@ -1,2947 +0,0 @@ -import * as __wbg_star0 from './game_api.js'; - -const lAudioContext = (typeof AudioContext !== 'undefined' ? AudioContext : (typeof webkitAudioContext !== 'undefined' ? webkitAudioContext : undefined)); -let wasm; - -function isLikeNone(x) { - return x === undefined || x === null; -} - -function addToExternrefTable0(obj) { - const idx = wasm.__externref_table_alloc(); - wasm.__wbindgen_export_1.set(idx, obj); - return idx; -} - -const cachedTextDecoder = (typeof TextDecoder !== 'undefined' ? new TextDecoder('utf-8', { ignoreBOM: true, fatal: true }) : { decode: () => { throw Error('TextDecoder not available') } } ); - -if (typeof TextDecoder !== 'undefined') { cachedTextDecoder.decode(); }; - -let cachedUint8ArrayMemory0 = null; - -function getUint8ArrayMemory0() { - if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) { - cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer); - } - return cachedUint8ArrayMemory0; -} - -function getStringFromWasm0(ptr, len) { - ptr = ptr >>> 0; - return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len)); -} - -function handleError(f, args) { - try { - return f.apply(this, args); - } catch (e) { - const idx = addToExternrefTable0(e); - wasm.__wbindgen_exn_store(idx); - } -} - -let WASM_VECTOR_LEN = 0; - -const cachedTextEncoder = (typeof TextEncoder !== 'undefined' ? new TextEncoder('utf-8') : { encode: () => { throw Error('TextEncoder not available') } } ); - -const encodeString = (typeof cachedTextEncoder.encodeInto === 'function' - ? function (arg, view) { - return cachedTextEncoder.encodeInto(arg, view); -} - : function (arg, view) { - const buf = cachedTextEncoder.encode(arg); - view.set(buf); - return { - read: arg.length, - written: buf.length - }; -}); - -function passStringToWasm0(arg, malloc, realloc) { - - if (realloc === undefined) { - const buf = cachedTextEncoder.encode(arg); - const ptr = malloc(buf.length, 1) >>> 0; - getUint8ArrayMemory0().subarray(ptr, ptr + buf.length).set(buf); - WASM_VECTOR_LEN = buf.length; - return ptr; - } - - let len = arg.length; - let ptr = malloc(len, 1) >>> 0; - - const mem = getUint8ArrayMemory0(); - - let offset = 0; - - for (; offset < len; offset++) { - const code = arg.charCodeAt(offset); - if (code > 0x7F) break; - mem[ptr + offset] = code; - } - - if (offset !== len) { - if (offset !== 0) { - arg = arg.slice(offset); - } - ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0; - const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len); - const ret = encodeString(arg, view); - - offset += ret.written; - ptr = realloc(ptr, len, offset, 1) >>> 0; - } - - WASM_VECTOR_LEN = offset; - return ptr; -} - -let cachedDataViewMemory0 = null; - -function getDataViewMemory0() { - if (cachedDataViewMemory0 === null || cachedDataViewMemory0.buffer.detached === true || (cachedDataViewMemory0.buffer.detached === undefined && cachedDataViewMemory0.buffer !== wasm.memory.buffer)) { - cachedDataViewMemory0 = new DataView(wasm.memory.buffer); - } - return cachedDataViewMemory0; -} - -let cachedFloat32ArrayMemory0 = null; - -function getFloat32ArrayMemory0() { - if (cachedFloat32ArrayMemory0 === null || cachedFloat32ArrayMemory0.byteLength === 0) { - cachedFloat32ArrayMemory0 = new Float32Array(wasm.memory.buffer); - } - return cachedFloat32ArrayMemory0; -} - -function getArrayF32FromWasm0(ptr, len) { - ptr = ptr >>> 0; - return getFloat32ArrayMemory0().subarray(ptr / 4, ptr / 4 + len); -} - -let cachedInt32ArrayMemory0 = null; - -function getInt32ArrayMemory0() { - if (cachedInt32ArrayMemory0 === null || cachedInt32ArrayMemory0.byteLength === 0) { - cachedInt32ArrayMemory0 = new Int32Array(wasm.memory.buffer); - } - return cachedInt32ArrayMemory0; -} - -function getArrayI32FromWasm0(ptr, len) { - ptr = ptr >>> 0; - return getInt32ArrayMemory0().subarray(ptr / 4, ptr / 4 + len); -} - -let cachedUint32ArrayMemory0 = null; - -function getUint32ArrayMemory0() { - if (cachedUint32ArrayMemory0 === null || cachedUint32ArrayMemory0.byteLength === 0) { - cachedUint32ArrayMemory0 = new Uint32Array(wasm.memory.buffer); - } - return cachedUint32ArrayMemory0; -} - -function getArrayU32FromWasm0(ptr, len) { - ptr = ptr >>> 0; - return getUint32ArrayMemory0().subarray(ptr / 4, ptr / 4 + len); -} - -function getArrayU8FromWasm0(ptr, len) { - ptr = ptr >>> 0; - return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len); -} - -let cachedUint8ClampedArrayMemory0 = null; - -function getUint8ClampedArrayMemory0() { - if (cachedUint8ClampedArrayMemory0 === null || cachedUint8ClampedArrayMemory0.byteLength === 0) { - cachedUint8ClampedArrayMemory0 = new Uint8ClampedArray(wasm.memory.buffer); - } - return cachedUint8ClampedArrayMemory0; -} - -function getClampedArrayU8FromWasm0(ptr, len) { - ptr = ptr >>> 0; - return getUint8ClampedArrayMemory0().subarray(ptr / 1, ptr / 1 + len); -} - -const CLOSURE_DTORS = (typeof FinalizationRegistry === 'undefined') - ? { register: () => {}, unregister: () => {} } - : new FinalizationRegistry(state => { - wasm.__wbindgen_export_6.get(state.dtor)(state.a, state.b) -}); - -function makeMutClosure(arg0, arg1, dtor, f) { - const state = { a: arg0, b: arg1, cnt: 1, dtor }; - const real = (...args) => { - // First up with a closure we increment the internal reference - // count. This ensures that the Rust closure environment won't - // be deallocated while we're invoking it. - state.cnt++; - const a = state.a; - state.a = 0; - try { - return f(a, state.b, ...args); - } finally { - if (--state.cnt === 0) { - wasm.__wbindgen_export_6.get(state.dtor)(a, state.b); - CLOSURE_DTORS.unregister(state); - } else { - state.a = a; - } - } - }; - real.original = state; - CLOSURE_DTORS.register(real, state, state); - return real; -} - -function debugString(val) { - // primitive types - const type = typeof val; - if (type == 'number' || type == 'boolean' || val == null) { - return `${val}`; - } - if (type == 'string') { - return `"${val}"`; - } - if (type == 'symbol') { - const description = val.description; - if (description == null) { - return 'Symbol'; - } else { - return `Symbol(${description})`; - } - } - if (type == 'function') { - const name = val.name; - if (typeof name == 'string' && name.length > 0) { - return `Function(${name})`; - } else { - return 'Function'; - } - } - // objects - if (Array.isArray(val)) { - const length = val.length; - let debug = '['; - if (length > 0) { - debug += debugString(val[0]); - } - for(let i = 1; i < length; i++) { - debug += ', ' + debugString(val[i]); - } - debug += ']'; - return debug; - } - // Test for built-in - const builtInMatches = /\[object ([^\]]+)\]/.exec(toString.call(val)); - let className; - if (builtInMatches && builtInMatches.length > 1) { - className = builtInMatches[1]; - } else { - // Failed to match the standard '[object ClassName]' - return toString.call(val); - } - if (className == 'Object') { - // we're a user defined class or Object - // JSON.stringify avoids problems with cycles, and is generally much - // easier than looping through ownProperties of `val`. - try { - return 'Object(' + JSON.stringify(val) + ')'; - } catch (_) { - return 'Object'; - } - } - // errors - if (val instanceof Error) { - return `${val.name}: ${val.message}\n${val.stack}`; - } - // TODO we could test for more things here, like `Set`s and `Map`s. - return className; -} -function __wbg_adapter_40(arg0, arg1) { - wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3d0cb53df6af5394(arg0, arg1); -} - -function __wbg_adapter_43(arg0, arg1, arg2) { - wasm.closure8019_externref_shim(arg0, arg1, arg2); -} - -function __wbg_adapter_56(arg0, arg1, arg2) { - wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hf83f95ed8b47fb63(arg0, arg1, isLikeNone(arg2) ? 0 : addToExternrefTable0(arg2)); -} - -function __wbg_adapter_65(arg0, arg1, arg2, arg3) { - wasm.closure8362_externref_shim(arg0, arg1, arg2, arg3); -} - -const __wbindgen_enum_GamepadMappingType = ["", "standard"]; - -const __wbindgen_enum_GpuCompilationMessageType = ["error", "warning", "info"]; - -const __wbindgen_enum_GpuDeviceLostReason = ["unknown", "destroyed"]; - -const __wbindgen_enum_GpuErrorFilter = ["validation", "out-of-memory", "internal"]; - -const __wbindgen_enum_GpuIndexFormat = ["uint16", "uint32"]; - -const __wbindgen_enum_GpuTextureFormat = ["r8unorm", "r8snorm", "r8uint", "r8sint", "r16uint", "r16sint", "r16float", "rg8unorm", "rg8snorm", "rg8uint", "rg8sint", "r32uint", "r32sint", "r32float", "rg16uint", "rg16sint", "rg16float", "rgba8unorm", "rgba8unorm-srgb", "rgba8snorm", "rgba8uint", "rgba8sint", "bgra8unorm", "bgra8unorm-srgb", "rgb9e5ufloat", "rgb10a2uint", "rgb10a2unorm", "rg11b10ufloat", "rg32uint", "rg32sint", "rg32float", "rgba16uint", "rgba16sint", "rgba16float", "rgba32uint", "rgba32sint", "rgba32float", "stencil8", "depth16unorm", "depth24plus", "depth24plus-stencil8", "depth32float", "depth32float-stencil8", "bc1-rgba-unorm", "bc1-rgba-unorm-srgb", "bc2-rgba-unorm", "bc2-rgba-unorm-srgb", "bc3-rgba-unorm", "bc3-rgba-unorm-srgb", "bc4-r-unorm", "bc4-r-snorm", "bc5-rg-unorm", "bc5-rg-snorm", "bc6h-rgb-ufloat", "bc6h-rgb-float", "bc7-rgba-unorm", "bc7-rgba-unorm-srgb", "etc2-rgb8unorm", "etc2-rgb8unorm-srgb", "etc2-rgb8a1unorm", "etc2-rgb8a1unorm-srgb", "etc2-rgba8unorm", "etc2-rgba8unorm-srgb", "eac-r11unorm", "eac-r11snorm", "eac-rg11unorm", "eac-rg11snorm", "astc-4x4-unorm", "astc-4x4-unorm-srgb", "astc-5x4-unorm", "astc-5x4-unorm-srgb", "astc-5x5-unorm", "astc-5x5-unorm-srgb", "astc-6x5-unorm", "astc-6x5-unorm-srgb", "astc-6x6-unorm", "astc-6x6-unorm-srgb", "astc-8x5-unorm", "astc-8x5-unorm-srgb", "astc-8x6-unorm", "astc-8x6-unorm-srgb", "astc-8x8-unorm", "astc-8x8-unorm-srgb", "astc-10x5-unorm", "astc-10x5-unorm-srgb", "astc-10x6-unorm", "astc-10x6-unorm-srgb", "astc-10x8-unorm", "astc-10x8-unorm-srgb", "astc-10x10-unorm", "astc-10x10-unorm-srgb", "astc-12x10-unorm", "astc-12x10-unorm-srgb", "astc-12x12-unorm", "astc-12x12-unorm-srgb"]; - -const __wbindgen_enum_PremultiplyAlpha = ["none", "premultiply", "default"]; - -const __wbindgen_enum_ResizeObserverBoxOptions = ["border-box", "content-box", "device-pixel-content-box"]; - -const __wbindgen_enum_VisibilityState = ["hidden", "visible"]; - -async function __wbg_load(module, imports) { - if (typeof Response === 'function' && module instanceof Response) { - if (typeof WebAssembly.instantiateStreaming === 'function') { - try { - return await WebAssembly.instantiateStreaming(module, imports); - - } catch (e) { - if (module.headers.get('Content-Type') != 'application/wasm') { - console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve Wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e); - - } else { - throw e; - } - } - } - - const bytes = await module.arrayBuffer(); - return await WebAssembly.instantiate(bytes, imports); - - } else { - const instance = await WebAssembly.instantiate(module, imports); - - if (instance instanceof WebAssembly.Instance) { - return { instance, module }; - - } else { - return instance; - } - } -} - -function __wbg_get_imports() { - const imports = {}; - imports.wbg = {}; - imports.wbg.__wbg_Window_02fa58b243352adf = function(arg0) { - const ret = arg0.Window; - return ret; - }; - imports.wbg.__wbg_Window_ab94a0bfe4755cad = function(arg0) { - const ret = arg0.Window; - return ret; - }; - imports.wbg.__wbg_Window_cf5b693340a7c469 = function(arg0) { - const ret = arg0.Window; - return ret; - }; - imports.wbg.__wbg_WorkerGlobalScope_354364d1b0bd06e5 = function(arg0) { - const ret = arg0.WorkerGlobalScope; - return ret; - }; - imports.wbg.__wbg_WorkerGlobalScope_7b9805991ec727df = function(arg0) { - const ret = arg0.WorkerGlobalScope; - return ret; - }; - imports.wbg.__wbg_abort_775ef1d17fc65868 = function(arg0) { - arg0.abort(); - }; - imports.wbg.__wbg_activeElement_367599fdfa7ad115 = function(arg0) { - const ret = arg0.activeElement; - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_activeTexture_0f19d8acfa0a14c2 = function(arg0, arg1) { - arg0.activeTexture(arg1 >>> 0); - }; - imports.wbg.__wbg_activeTexture_460f2e367e813fb0 = function(arg0, arg1) { - arg0.activeTexture(arg1 >>> 0); - }; - imports.wbg.__wbg_addEventListener_90e553fdce254421 = function() { return handleError(function (arg0, arg1, arg2, arg3) { - arg0.addEventListener(getStringFromWasm0(arg1, arg2), arg3); - }, arguments) }; - imports.wbg.__wbg_addListener_2982bb811b6385c5 = function() { return handleError(function (arg0, arg1) { - arg0.addListener(arg1); - }, arguments) }; - imports.wbg.__wbg_altKey_c33c03aed82e4275 = function(arg0) { - const ret = arg0.altKey; - return ret; - }; - imports.wbg.__wbg_altKey_d7495666df921121 = function(arg0) { - const ret = arg0.altKey; - return ret; - }; - imports.wbg.__wbg_animate_6dc0eb5c1275f013 = function(arg0, arg1, arg2) { - const ret = arg0.animate(arg1, arg2); - return ret; - }; - imports.wbg.__wbg_appendChild_8204974b7328bf98 = function() { return handleError(function (arg0, arg1) { - const ret = arg0.appendChild(arg1); - return ret; - }, arguments) }; - imports.wbg.__wbg_arrayBuffer_d1b44c4390db422f = function() { return handleError(function (arg0) { - const ret = arg0.arrayBuffer(); - return ret; - }, arguments) }; - imports.wbg.__wbg_attachShader_3d4eb6af9e3e7bd1 = function(arg0, arg1, arg2) { - arg0.attachShader(arg1, arg2); - }; - imports.wbg.__wbg_attachShader_94e758c8b5283eb2 = function(arg0, arg1, arg2) { - arg0.attachShader(arg1, arg2); - }; - imports.wbg.__wbg_axes_b1da727bd9ea422d = function(arg0) { - const ret = arg0.axes; - return ret; - }; - imports.wbg.__wbg_beginComputePass_90d5303e604970cb = function(arg0, arg1) { - const ret = arg0.beginComputePass(arg1); - return ret; - }; - imports.wbg.__wbg_beginQuery_6af0b28414b16c07 = function(arg0, arg1, arg2) { - arg0.beginQuery(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_beginRenderPass_9739520c601001c3 = function(arg0, arg1) { - const ret = arg0.beginRenderPass(arg1); - return ret; - }; - imports.wbg.__wbg_bindAttribLocation_40da4b3e84cc7bd5 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.bindAttribLocation(arg1, arg2 >>> 0, getStringFromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_bindAttribLocation_ce2730e29976d230 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.bindAttribLocation(arg1, arg2 >>> 0, getStringFromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_bindBufferRange_454f90f2b1781982 = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.bindBufferRange(arg1 >>> 0, arg2 >>> 0, arg3, arg4, arg5); - }; - imports.wbg.__wbg_bindBuffer_309c9a6c21826cf5 = function(arg0, arg1, arg2) { - arg0.bindBuffer(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_bindBuffer_f32f587f1c2962a7 = function(arg0, arg1, arg2) { - arg0.bindBuffer(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_bindFramebuffer_bd02c8cc707d670f = function(arg0, arg1, arg2) { - arg0.bindFramebuffer(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_bindFramebuffer_e48e83c0f973944d = function(arg0, arg1, arg2) { - arg0.bindFramebuffer(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_bindRenderbuffer_53eedd88e52b4cb5 = function(arg0, arg1, arg2) { - arg0.bindRenderbuffer(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_bindRenderbuffer_55e205fecfddbb8c = function(arg0, arg1, arg2) { - arg0.bindRenderbuffer(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_bindSampler_9f59cf2eaa22eee0 = function(arg0, arg1, arg2) { - arg0.bindSampler(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_bindTexture_a6e795697f49ebd1 = function(arg0, arg1, arg2) { - arg0.bindTexture(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_bindTexture_bc8eb316247f739d = function(arg0, arg1, arg2) { - arg0.bindTexture(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_bindVertexArrayOES_da8e7059b789629e = function(arg0, arg1) { - arg0.bindVertexArrayOES(arg1); - }; - imports.wbg.__wbg_bindVertexArray_6b4b88581064b71f = function(arg0, arg1) { - arg0.bindVertexArray(arg1); - }; - imports.wbg.__wbg_blendColor_15ba1eff44560932 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.blendColor(arg1, arg2, arg3, arg4); - }; - imports.wbg.__wbg_blendColor_6446fba673f64ff0 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.blendColor(arg1, arg2, arg3, arg4); - }; - imports.wbg.__wbg_blendEquationSeparate_c1aa26a9a5c5267e = function(arg0, arg1, arg2) { - arg0.blendEquationSeparate(arg1 >>> 0, arg2 >>> 0); - }; - imports.wbg.__wbg_blendEquationSeparate_f3d422e981d86339 = function(arg0, arg1, arg2) { - arg0.blendEquationSeparate(arg1 >>> 0, arg2 >>> 0); - }; - imports.wbg.__wbg_blendEquation_c23d111ad6d268ff = function(arg0, arg1) { - arg0.blendEquation(arg1 >>> 0); - }; - imports.wbg.__wbg_blendEquation_cec7bc41f3e5704c = function(arg0, arg1) { - arg0.blendEquation(arg1 >>> 0); - }; - imports.wbg.__wbg_blendFuncSeparate_483be8d4dd635340 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.blendFuncSeparate(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4 >>> 0); - }; - imports.wbg.__wbg_blendFuncSeparate_dafeabfc1680b2ee = function(arg0, arg1, arg2, arg3, arg4) { - arg0.blendFuncSeparate(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4 >>> 0); - }; - imports.wbg.__wbg_blendFunc_9454884a3cfd2911 = function(arg0, arg1, arg2) { - arg0.blendFunc(arg1 >>> 0, arg2 >>> 0); - }; - imports.wbg.__wbg_blendFunc_c3b74be5a39c665f = function(arg0, arg1, arg2) { - arg0.blendFunc(arg1 >>> 0, arg2 >>> 0); - }; - imports.wbg.__wbg_blitFramebuffer_7303bdff77cfe967 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10) { - arg0.blitFramebuffer(arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9 >>> 0, arg10 >>> 0); - }; - imports.wbg.__wbg_blockSize_1490803190b57a34 = function(arg0) { - const ret = arg0.blockSize; - return ret; - }; - imports.wbg.__wbg_body_942ea927546a04ba = function(arg0) { - const ret = arg0.body; - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_brand_6a99e79241a4eebf = function(arg0, arg1) { - const ret = arg1.brand; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_brands_cee72125111fa414 = function(arg0) { - const ret = arg0.brands; - return ret; - }; - imports.wbg.__wbg_bufferData_3261d3e1dd6fc903 = function(arg0, arg1, arg2, arg3) { - arg0.bufferData(arg1 >>> 0, arg2, arg3 >>> 0); - }; - imports.wbg.__wbg_bufferData_33c59bf909ea6fd3 = function(arg0, arg1, arg2, arg3) { - arg0.bufferData(arg1 >>> 0, arg2, arg3 >>> 0); - }; - imports.wbg.__wbg_bufferData_463178757784fcac = function(arg0, arg1, arg2, arg3) { - arg0.bufferData(arg1 >>> 0, arg2, arg3 >>> 0); - }; - imports.wbg.__wbg_bufferData_d99b6b4eb5283f20 = function(arg0, arg1, arg2, arg3) { - arg0.bufferData(arg1 >>> 0, arg2, arg3 >>> 0); - }; - imports.wbg.__wbg_bufferSubData_4e973eefe9236d04 = function(arg0, arg1, arg2, arg3) { - arg0.bufferSubData(arg1 >>> 0, arg2, arg3); - }; - imports.wbg.__wbg_bufferSubData_dcd4d16031a60345 = function(arg0, arg1, arg2, arg3) { - arg0.bufferSubData(arg1 >>> 0, arg2, arg3); - }; - imports.wbg.__wbg_buffer_09165b52af8c5237 = function(arg0) { - const ret = arg0.buffer; - return ret; - }; - imports.wbg.__wbg_buffer_609cc3eee51ed158 = function(arg0) { - const ret = arg0.buffer; - return ret; - }; - imports.wbg.__wbg_button_f75c56aec440ea04 = function(arg0) { - const ret = arg0.button; - return ret; - }; - imports.wbg.__wbg_buttons_b6346af6f04e4686 = function(arg0) { - const ret = arg0.buttons; - return ret; - }; - imports.wbg.__wbg_buttons_c4b2b5a0c27f0743 = function(arg0) { - const ret = arg0.buttons; - return ret; - }; - imports.wbg.__wbg_call_672a4d21634d4a24 = function() { return handleError(function (arg0, arg1) { - const ret = arg0.call(arg1); - return ret; - }, arguments) }; - imports.wbg.__wbg_call_7cccdd69e0791ae2 = function() { return handleError(function (arg0, arg1, arg2) { - const ret = arg0.call(arg1, arg2); - return ret; - }, arguments) }; - imports.wbg.__wbg_cancelAnimationFrame_089b48301c362fde = function() { return handleError(function (arg0, arg1) { - arg0.cancelAnimationFrame(arg1); - }, arguments) }; - imports.wbg.__wbg_cancelIdleCallback_669eb1ed294c8b8b = function(arg0, arg1) { - arg0.cancelIdleCallback(arg1 >>> 0); - }; - imports.wbg.__wbg_cancel_697c380da9c4a373 = function(arg0) { - arg0.cancel(); - }; - imports.wbg.__wbg_catch_a6e601879b2610e9 = function(arg0, arg1) { - const ret = arg0.catch(arg1); - return ret; - }; - imports.wbg.__wbg_clearBuffer_6164fc25d22b25cc = function(arg0, arg1, arg2, arg3) { - arg0.clearBuffer(arg1, arg2, arg3); - }; - imports.wbg.__wbg_clearBuffer_cfcaaf1fb2baa885 = function(arg0, arg1, arg2) { - arg0.clearBuffer(arg1, arg2); - }; - imports.wbg.__wbg_clearBufferfv_65ea413f7f2554a2 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.clearBufferfv(arg1 >>> 0, arg2, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_clearBufferiv_c003c27b77a0245b = function(arg0, arg1, arg2, arg3, arg4) { - arg0.clearBufferiv(arg1 >>> 0, arg2, getArrayI32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_clearBufferuiv_8c285072f2026a37 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.clearBufferuiv(arg1 >>> 0, arg2, getArrayU32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_clearDepth_17cfee5be8476fae = function(arg0, arg1) { - arg0.clearDepth(arg1); - }; - imports.wbg.__wbg_clearDepth_670d19914a501259 = function(arg0, arg1) { - arg0.clearDepth(arg1); - }; - imports.wbg.__wbg_clearStencil_4323424f1acca0df = function(arg0, arg1) { - arg0.clearStencil(arg1); - }; - imports.wbg.__wbg_clearStencil_7addd3b330b56b27 = function(arg0, arg1) { - arg0.clearStencil(arg1); - }; - imports.wbg.__wbg_clearTimeout_b2651b7485c58446 = function(arg0, arg1) { - arg0.clearTimeout(arg1); - }; - imports.wbg.__wbg_clear_62b9037b892f6988 = function(arg0, arg1) { - arg0.clear(arg1 >>> 0); - }; - imports.wbg.__wbg_clear_f8d5f3c348d37d95 = function(arg0, arg1) { - arg0.clear(arg1 >>> 0); - }; - imports.wbg.__wbg_clientWaitSync_6930890a42bd44c0 = function(arg0, arg1, arg2, arg3) { - const ret = arg0.clientWaitSync(arg1, arg2 >>> 0, arg3 >>> 0); - return ret; - }; - imports.wbg.__wbg_close_414b379454494b29 = function(arg0) { - arg0.close(); - }; - imports.wbg.__wbg_close_5a97ef05b337f8ce = function() { return handleError(function (arg0) { - const ret = arg0.close(); - return ret; - }, arguments) }; - imports.wbg.__wbg_code_459c120478e1ab6e = function(arg0, arg1) { - const ret = arg1.code; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_colorMask_5e7c60b9c7a57a2e = function(arg0, arg1, arg2, arg3, arg4) { - arg0.colorMask(arg1 !== 0, arg2 !== 0, arg3 !== 0, arg4 !== 0); - }; - imports.wbg.__wbg_colorMask_6dac12039c7145ae = function(arg0, arg1, arg2, arg3, arg4) { - arg0.colorMask(arg1 !== 0, arg2 !== 0, arg3 !== 0, arg4 !== 0); - }; - imports.wbg.__wbg_compileShader_0ad770bbdbb9de21 = function(arg0, arg1) { - arg0.compileShader(arg1); - }; - imports.wbg.__wbg_compileShader_2307c9d370717dd5 = function(arg0, arg1) { - arg0.compileShader(arg1); - }; - imports.wbg.__wbg_compressedTexSubImage2D_71877eec950ca069 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.compressedTexSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8, arg9); - }; - imports.wbg.__wbg_compressedTexSubImage2D_99abf4cfdb7c3fd8 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8) { - arg0.compressedTexSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8); - }; - imports.wbg.__wbg_compressedTexSubImage2D_d66dcfcb2422e703 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8) { - arg0.compressedTexSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8); - }; - imports.wbg.__wbg_compressedTexSubImage3D_58506392da46b927 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10) { - arg0.compressedTexSubImage3D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9 >>> 0, arg10); - }; - imports.wbg.__wbg_compressedTexSubImage3D_81477746675a4017 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, arg11) { - arg0.compressedTexSubImage3D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9 >>> 0, arg10, arg11); - }; - imports.wbg.__wbg_configure_2414aed971d368cd = function(arg0, arg1) { - arg0.configure(arg1); - }; - imports.wbg.__wbg_connect_b22945d106632a36 = function() { return handleError(function (arg0, arg1) { - const ret = arg0.connect(arg1); - return ret; - }, arguments) }; - imports.wbg.__wbg_connected_18470c3ee82326ee = function(arg0) { - const ret = arg0.connected; - return ret; - }; - imports.wbg.__wbg_contains_3361c7eda6c95afd = function(arg0, arg1) { - const ret = arg0.contains(arg1); - return ret; - }; - imports.wbg.__wbg_contentRect_81407eb60e52248f = function(arg0) { - const ret = arg0.contentRect; - return ret; - }; - imports.wbg.__wbg_copyBufferSubData_9469a965478e33b5 = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.copyBufferSubData(arg1 >>> 0, arg2 >>> 0, arg3, arg4, arg5); - }; - imports.wbg.__wbg_copyBufferToBuffer_1ba67191114656a1 = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.copyBufferToBuffer(arg1, arg2, arg3, arg4, arg5); - }; - imports.wbg.__wbg_copyBufferToTexture_878d31d479e48f28 = function(arg0, arg1, arg2, arg3) { - arg0.copyBufferToTexture(arg1, arg2, arg3); - }; - imports.wbg.__wbg_copyExternalImageToTexture_7878d196c0b60d39 = function(arg0, arg1, arg2, arg3) { - arg0.copyExternalImageToTexture(arg1, arg2, arg3); - }; - imports.wbg.__wbg_copyTexSubImage2D_05e7e8df6814a705 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8) { - arg0.copyTexSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8); - }; - imports.wbg.__wbg_copyTexSubImage2D_607ad28606952982 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8) { - arg0.copyTexSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8); - }; - imports.wbg.__wbg_copyTexSubImage3D_32e92c94044e58ca = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.copyTexSubImage3D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9); - }; - imports.wbg.__wbg_copyTextureToBuffer_6a8fe0e90f0a663d = function(arg0, arg1, arg2, arg3) { - arg0.copyTextureToBuffer(arg1, arg2, arg3); - }; - imports.wbg.__wbg_copyTextureToTexture_0a06a393d6726b4a = function(arg0, arg1, arg2, arg3) { - arg0.copyTextureToTexture(arg1, arg2, arg3); - }; - imports.wbg.__wbg_copyToChannel_b81ecf19fd54e146 = function() { return handleError(function (arg0, arg1, arg2, arg3) { - arg0.copyToChannel(getArrayF32FromWasm0(arg1, arg2), arg3); - }, arguments) }; - imports.wbg.__wbg_createBindGroupLayout_1d93b6d41c87ba9d = function(arg0, arg1) { - const ret = arg0.createBindGroupLayout(arg1); - return ret; - }; - imports.wbg.__wbg_createBindGroup_61cd07ec9d423432 = function(arg0, arg1) { - const ret = arg0.createBindGroup(arg1); - return ret; - }; - imports.wbg.__wbg_createBufferSource_f7860a96f709acbd = function() { return handleError(function (arg0) { - const ret = arg0.createBufferSource(); - return ret; - }, arguments) }; - imports.wbg.__wbg_createBuffer_7a9ec3d654073660 = function(arg0) { - const ret = arg0.createBuffer(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createBuffer_926beeec3ff39b5a = function() { return handleError(function (arg0, arg1, arg2, arg3) { - const ret = arg0.createBuffer(arg1 >>> 0, arg2 >>> 0, arg3); - return ret; - }, arguments) }; - imports.wbg.__wbg_createBuffer_963aa00d5fe859e4 = function(arg0, arg1) { - const ret = arg0.createBuffer(arg1); - return ret; - }; - imports.wbg.__wbg_createBuffer_9886e84a67b68c89 = function(arg0) { - const ret = arg0.createBuffer(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createCommandEncoder_f0e1613e9a2dc1eb = function(arg0, arg1) { - const ret = arg0.createCommandEncoder(arg1); - return ret; - }; - imports.wbg.__wbg_createComputePipeline_b9616b9fe2f4eb2f = function(arg0, arg1) { - const ret = arg0.createComputePipeline(arg1); - return ret; - }; - imports.wbg.__wbg_createElement_8c9931a732ee2fea = function() { return handleError(function (arg0, arg1, arg2) { - const ret = arg0.createElement(getStringFromWasm0(arg1, arg2)); - return ret; - }, arguments) }; - imports.wbg.__wbg_createFramebuffer_7824f69bba778885 = function(arg0) { - const ret = arg0.createFramebuffer(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createFramebuffer_c8d70ebc4858051e = function(arg0) { - const ret = arg0.createFramebuffer(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createImageBitmap_eaa22bfb3a8626e8 = function() { return handleError(function (arg0, arg1, arg2) { - const ret = arg0.createImageBitmap(arg1, arg2); - return ret; - }, arguments) }; - imports.wbg.__wbg_createObjectURL_6e98d2f9c7bd9764 = function() { return handleError(function (arg0, arg1) { - const ret = URL.createObjectURL(arg1); - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }, arguments) }; - imports.wbg.__wbg_createPipelineLayout_56c6cf983f892d2b = function(arg0, arg1) { - const ret = arg0.createPipelineLayout(arg1); - return ret; - }; - imports.wbg.__wbg_createProgram_8ff56c485f3233d0 = function(arg0) { - const ret = arg0.createProgram(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createProgram_da203074cafb1038 = function(arg0) { - const ret = arg0.createProgram(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createQuerySet_c14be802adf7c207 = function(arg0, arg1) { - const ret = arg0.createQuerySet(arg1); - return ret; - }; - imports.wbg.__wbg_createQuery_5ed5e770ec1009c1 = function(arg0) { - const ret = arg0.createQuery(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createRenderBundleEncoder_8e4bdffea72f8c1f = function(arg0, arg1) { - const ret = arg0.createRenderBundleEncoder(arg1); - return ret; - }; - imports.wbg.__wbg_createRenderPipeline_079a88a0601fcce1 = function(arg0, arg1) { - const ret = arg0.createRenderPipeline(arg1); - return ret; - }; - imports.wbg.__wbg_createRenderbuffer_d88aa9403faa38ea = function(arg0) { - const ret = arg0.createRenderbuffer(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createRenderbuffer_fd347ae14f262eaa = function(arg0) { - const ret = arg0.createRenderbuffer(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createSampler_ef5578990df3baf7 = function(arg0, arg1) { - const ret = arg0.createSampler(arg1); - return ret; - }; - imports.wbg.__wbg_createSampler_f76e29d7522bec9e = function(arg0) { - const ret = arg0.createSampler(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createShaderModule_17f451ea25cae47c = function(arg0, arg1) { - const ret = arg0.createShaderModule(arg1); - return ret; - }; - imports.wbg.__wbg_createShader_4a256a8cc9c1ce4f = function(arg0, arg1) { - const ret = arg0.createShader(arg1 >>> 0); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createShader_983150fb1243ee56 = function(arg0, arg1) { - const ret = arg0.createShader(arg1 >>> 0); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createTexture_01cc1cd2fea732d9 = function(arg0, arg1) { - const ret = arg0.createTexture(arg1); - return ret; - }; - imports.wbg.__wbg_createTexture_9c536c79b635fdef = function(arg0) { - const ret = arg0.createTexture(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createTexture_bfaa54c0cd22e367 = function(arg0) { - const ret = arg0.createTexture(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createVertexArrayOES_991b44f100f93329 = function(arg0) { - const ret = arg0.createVertexArrayOES(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createVertexArray_e435029ae2660efd = function(arg0) { - const ret = arg0.createVertexArray(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_createView_04701884291e1ccc = function(arg0, arg1) { - const ret = arg0.createView(arg1); - return ret; - }; - imports.wbg.__wbg_crypto_574e78ad8b13b65f = function(arg0) { - const ret = arg0.crypto; - return ret; - }; - imports.wbg.__wbg_ctrlKey_1e826e468105ac11 = function(arg0) { - const ret = arg0.ctrlKey; - return ret; - }; - imports.wbg.__wbg_ctrlKey_cdbe8154dfb00d1f = function(arg0) { - const ret = arg0.ctrlKey; - return ret; - }; - imports.wbg.__wbg_cullFace_187079e6e20a464d = function(arg0, arg1) { - arg0.cullFace(arg1 >>> 0); - }; - imports.wbg.__wbg_cullFace_fbae6dd4d5e61ba4 = function(arg0, arg1) { - arg0.cullFace(arg1 >>> 0); - }; - imports.wbg.__wbg_currentTime_adef4d803f58eb66 = function(arg0) { - const ret = arg0.currentTime; - return ret; - }; - imports.wbg.__wbg_decode_3ad9767b863c0d8e = function(arg0) { - const ret = arg0.decode(); - return ret; - }; - imports.wbg.__wbg_deleteBuffer_7ed96e1bf7c02e87 = function(arg0, arg1) { - arg0.deleteBuffer(arg1); - }; - imports.wbg.__wbg_deleteBuffer_a7822433fc95dfb8 = function(arg0, arg1) { - arg0.deleteBuffer(arg1); - }; - imports.wbg.__wbg_deleteFramebuffer_66853fb7101488cb = function(arg0, arg1) { - arg0.deleteFramebuffer(arg1); - }; - imports.wbg.__wbg_deleteFramebuffer_cd3285ee5a702a7a = function(arg0, arg1) { - arg0.deleteFramebuffer(arg1); - }; - imports.wbg.__wbg_deleteProgram_3fa626bbc0001eb7 = function(arg0, arg1) { - arg0.deleteProgram(arg1); - }; - imports.wbg.__wbg_deleteProgram_71a133c6d053e272 = function(arg0, arg1) { - arg0.deleteProgram(arg1); - }; - imports.wbg.__wbg_deleteQuery_6a2b7cd30074b20b = function(arg0, arg1) { - arg0.deleteQuery(arg1); - }; - imports.wbg.__wbg_deleteRenderbuffer_59f4369653485031 = function(arg0, arg1) { - arg0.deleteRenderbuffer(arg1); - }; - imports.wbg.__wbg_deleteRenderbuffer_8808192853211567 = function(arg0, arg1) { - arg0.deleteRenderbuffer(arg1); - }; - imports.wbg.__wbg_deleteSampler_7f02bb003ba547f0 = function(arg0, arg1) { - arg0.deleteSampler(arg1); - }; - imports.wbg.__wbg_deleteShader_8d42f169deda58ac = function(arg0, arg1) { - arg0.deleteShader(arg1); - }; - imports.wbg.__wbg_deleteShader_c65a44796c5004d8 = function(arg0, arg1) { - arg0.deleteShader(arg1); - }; - imports.wbg.__wbg_deleteSync_5a3fbe5d6b742398 = function(arg0, arg1) { - arg0.deleteSync(arg1); - }; - imports.wbg.__wbg_deleteTexture_a30f5ca0163c4110 = function(arg0, arg1) { - arg0.deleteTexture(arg1); - }; - imports.wbg.__wbg_deleteTexture_bb82c9fec34372ba = function(arg0, arg1) { - arg0.deleteTexture(arg1); - }; - imports.wbg.__wbg_deleteVertexArrayOES_1ee7a06a4b23ec8c = function(arg0, arg1) { - arg0.deleteVertexArrayOES(arg1); - }; - imports.wbg.__wbg_deleteVertexArray_77fe73664a3332ae = function(arg0, arg1) { - arg0.deleteVertexArray(arg1); - }; - imports.wbg.__wbg_deltaMode_9bfd9fe3f6b4b240 = function(arg0) { - const ret = arg0.deltaMode; - return ret; - }; - imports.wbg.__wbg_deltaX_5c1121715746e4b7 = function(arg0) { - const ret = arg0.deltaX; - return ret; - }; - imports.wbg.__wbg_deltaY_f9318542caea0c36 = function(arg0) { - const ret = arg0.deltaY; - return ret; - }; - imports.wbg.__wbg_depthFunc_2906916f4536d5d7 = function(arg0, arg1) { - arg0.depthFunc(arg1 >>> 0); - }; - imports.wbg.__wbg_depthFunc_f34449ae87cc4e3e = function(arg0, arg1) { - arg0.depthFunc(arg1 >>> 0); - }; - imports.wbg.__wbg_depthMask_5fe84e2801488eda = function(arg0, arg1) { - arg0.depthMask(arg1 !== 0); - }; - imports.wbg.__wbg_depthMask_76688a8638b2f321 = function(arg0, arg1) { - arg0.depthMask(arg1 !== 0); - }; - imports.wbg.__wbg_depthRange_3cd6b4dc961d9116 = function(arg0, arg1, arg2) { - arg0.depthRange(arg1, arg2); - }; - imports.wbg.__wbg_depthRange_f9c084ff3d81fd7b = function(arg0, arg1, arg2) { - arg0.depthRange(arg1, arg2); - }; - imports.wbg.__wbg_destination_6400091abd6f01b3 = function(arg0) { - const ret = arg0.destination; - return ret; - }; - imports.wbg.__wbg_destroy_35f94012e5bb9c17 = function(arg0) { - arg0.destroy(); - }; - imports.wbg.__wbg_destroy_767d9dde1008e293 = function(arg0) { - arg0.destroy(); - }; - imports.wbg.__wbg_destroy_c6af4226dda95dbd = function(arg0) { - arg0.destroy(); - }; - imports.wbg.__wbg_devicePixelContentBoxSize_a6de82cb30d70825 = function(arg0) { - const ret = arg0.devicePixelContentBoxSize; - return ret; - }; - imports.wbg.__wbg_devicePixelRatio_68c391265f05d093 = function(arg0) { - const ret = arg0.devicePixelRatio; - return ret; - }; - imports.wbg.__wbg_disableVertexAttribArray_452cc9815fced7e4 = function(arg0, arg1) { - arg0.disableVertexAttribArray(arg1 >>> 0); - }; - imports.wbg.__wbg_disableVertexAttribArray_afd097fb465dc100 = function(arg0, arg1) { - arg0.disableVertexAttribArray(arg1 >>> 0); - }; - imports.wbg.__wbg_disable_2702df5b5da5dd21 = function(arg0, arg1) { - arg0.disable(arg1 >>> 0); - }; - imports.wbg.__wbg_disable_8b53998501a7a85b = function(arg0, arg1) { - arg0.disable(arg1 >>> 0); - }; - imports.wbg.__wbg_disconnect_2118016d75479985 = function(arg0) { - arg0.disconnect(); - }; - imports.wbg.__wbg_disconnect_ac3f4ba550970c76 = function(arg0) { - arg0.disconnect(); - }; - imports.wbg.__wbg_dispatchWorkgroupsIndirect_8b25efab93a7a433 = function(arg0, arg1, arg2) { - arg0.dispatchWorkgroupsIndirect(arg1, arg2); - }; - imports.wbg.__wbg_dispatchWorkgroups_c102fa81b955935d = function(arg0, arg1, arg2, arg3) { - arg0.dispatchWorkgroups(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0); - }; - imports.wbg.__wbg_document_d249400bd7bd996d = function(arg0) { - const ret = arg0.document; - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_drawArraysInstancedANGLE_342ee6b5236d9702 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.drawArraysInstancedANGLE(arg1 >>> 0, arg2, arg3, arg4); - }; - imports.wbg.__wbg_drawArraysInstanced_622ea9f149b0b80c = function(arg0, arg1, arg2, arg3, arg4) { - arg0.drawArraysInstanced(arg1 >>> 0, arg2, arg3, arg4); - }; - imports.wbg.__wbg_drawArrays_6acaa2669c105f3a = function(arg0, arg1, arg2, arg3) { - arg0.drawArrays(arg1 >>> 0, arg2, arg3); - }; - imports.wbg.__wbg_drawArrays_6d29ea2ebc0c72a2 = function(arg0, arg1, arg2, arg3) { - arg0.drawArrays(arg1 >>> 0, arg2, arg3); - }; - imports.wbg.__wbg_drawBuffersWEBGL_9fdbdf3d4cbd3aae = function(arg0, arg1) { - arg0.drawBuffersWEBGL(arg1); - }; - imports.wbg.__wbg_drawBuffers_e729b75c5a50d760 = function(arg0, arg1) { - arg0.drawBuffers(arg1); - }; - imports.wbg.__wbg_drawElementsInstancedANGLE_096b48ab8686c5cf = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.drawElementsInstancedANGLE(arg1 >>> 0, arg2, arg3 >>> 0, arg4, arg5); - }; - imports.wbg.__wbg_drawElementsInstanced_f874e87d0b4e95e9 = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.drawElementsInstanced(arg1 >>> 0, arg2, arg3 >>> 0, arg4, arg5); - }; - imports.wbg.__wbg_drawIndexedIndirect_34484fc6227c7bc8 = function(arg0, arg1, arg2) { - arg0.drawIndexedIndirect(arg1, arg2); - }; - imports.wbg.__wbg_drawIndexedIndirect_5a7c30bb5f1d5b67 = function(arg0, arg1, arg2) { - arg0.drawIndexedIndirect(arg1, arg2); - }; - imports.wbg.__wbg_drawIndexed_115af1449b52a948 = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.drawIndexed(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4, arg5 >>> 0); - }; - imports.wbg.__wbg_drawIndexed_a587cce4c317791f = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.drawIndexed(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4, arg5 >>> 0); - }; - imports.wbg.__wbg_drawIndirect_036d71498a21f1a3 = function(arg0, arg1, arg2) { - arg0.drawIndirect(arg1, arg2); - }; - imports.wbg.__wbg_drawIndirect_a1d7c5e893aa5756 = function(arg0, arg1, arg2) { - arg0.drawIndirect(arg1, arg2); - }; - imports.wbg.__wbg_draw_5351b12033166aca = function(arg0, arg1, arg2, arg3, arg4) { - arg0.draw(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4 >>> 0); - }; - imports.wbg.__wbg_draw_e2a7c5d66fb2d244 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.draw(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4 >>> 0); - }; - imports.wbg.__wbg_enableVertexAttribArray_607be07574298e5e = function(arg0, arg1) { - arg0.enableVertexAttribArray(arg1 >>> 0); - }; - imports.wbg.__wbg_enableVertexAttribArray_93c3d406a41ad6c7 = function(arg0, arg1) { - arg0.enableVertexAttribArray(arg1 >>> 0); - }; - imports.wbg.__wbg_enable_51114837e05ee280 = function(arg0, arg1) { - arg0.enable(arg1 >>> 0); - }; - imports.wbg.__wbg_enable_d183fef39258803f = function(arg0, arg1) { - arg0.enable(arg1 >>> 0); - }; - imports.wbg.__wbg_endQuery_17aac36532ca7d47 = function(arg0, arg1) { - arg0.endQuery(arg1 >>> 0); - }; - imports.wbg.__wbg_end_0ac71677a5c1717a = function(arg0) { - arg0.end(); - }; - imports.wbg.__wbg_end_6f776519f1faa582 = function(arg0) { - arg0.end(); - }; - imports.wbg.__wbg_entries_3265d4158b33e5dc = function(arg0) { - const ret = Object.entries(arg0); - return ret; - }; - imports.wbg.__wbg_error_1004b8c64097413f = function(arg0, arg1) { - console.error(arg0, arg1); - }; - imports.wbg.__wbg_error_7534b8e9a36f1ab4 = function(arg0, arg1) { - let deferred0_0; - let deferred0_1; - try { - deferred0_0 = arg0; - deferred0_1 = arg1; - console.error(getStringFromWasm0(arg0, arg1)); - } finally { - wasm.__wbindgen_free(deferred0_0, deferred0_1, 1); - } - }; - imports.wbg.__wbg_error_e98e6aadd08e0b94 = function(arg0) { - const ret = arg0.error; - return ret; - }; - imports.wbg.__wbg_eval_e10dc02e9547f640 = function() { return handleError(function (arg0, arg1) { - const ret = eval(getStringFromWasm0(arg0, arg1)); - return ret; - }, arguments) }; - imports.wbg.__wbg_exec_3e2d2d0644c927df = function(arg0, arg1, arg2) { - const ret = arg0.exec(getStringFromWasm0(arg1, arg2)); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_executeBundles_8e6c0614da2805d4 = function(arg0, arg1) { - arg0.executeBundles(arg1); - }; - imports.wbg.__wbg_exitFullscreen_909f35c20d9db949 = function(arg0) { - arg0.exitFullscreen(); - }; - imports.wbg.__wbg_exitPointerLock_7b6e7252c7133f69 = function(arg0) { - arg0.exitPointerLock(); - }; - imports.wbg.__wbg_features_1b464383ea8a7691 = function(arg0) { - const ret = arg0.features; - return ret; - }; - imports.wbg.__wbg_features_e5fbbc2760867852 = function(arg0) { - const ret = arg0.features; - return ret; - }; - imports.wbg.__wbg_fenceSync_02d142d21e315da6 = function(arg0, arg1, arg2) { - const ret = arg0.fenceSync(arg1 >>> 0, arg2 >>> 0); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_fetch_1b7e793ab8320753 = function(arg0, arg1, arg2) { - const ret = arg0.fetch(getStringFromWasm0(arg1, arg2)); - return ret; - }; - imports.wbg.__wbg_fetch_6fed924f7801d8f3 = function(arg0, arg1, arg2) { - const ret = arg0.fetch(getStringFromWasm0(arg1, arg2)); - return ret; - }; - imports.wbg.__wbg_finish_20711371c58df61c = function(arg0) { - const ret = arg0.finish(); - return ret; - }; - imports.wbg.__wbg_finish_34b2c54329c8719f = function(arg0, arg1) { - const ret = arg0.finish(arg1); - return ret; - }; - imports.wbg.__wbg_finish_a9ab917e756ea00c = function(arg0, arg1) { - const ret = arg0.finish(arg1); - return ret; - }; - imports.wbg.__wbg_finish_e0a6c97c0622f843 = function(arg0) { - const ret = arg0.finish(); - return ret; - }; - imports.wbg.__wbg_focus_7d08b55eba7b368d = function() { return handleError(function (arg0) { - arg0.focus(); - }, arguments) }; - imports.wbg.__wbg_framebufferRenderbuffer_2fdd12e89ad81eb9 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.framebufferRenderbuffer(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4); - }; - imports.wbg.__wbg_framebufferRenderbuffer_8b88592753b54715 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.framebufferRenderbuffer(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4); - }; - imports.wbg.__wbg_framebufferTexture2D_81a565732bd5d8fe = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.framebufferTexture2D(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4, arg5); - }; - imports.wbg.__wbg_framebufferTexture2D_ed855d0b097c557a = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.framebufferTexture2D(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4, arg5); - }; - imports.wbg.__wbg_framebufferTextureLayer_5e6bd1b0cb45d815 = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.framebufferTextureLayer(arg1 >>> 0, arg2 >>> 0, arg3, arg4, arg5); - }; - imports.wbg.__wbg_framebufferTextureMultiviewOVR_e54f936c3cc382cb = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6) { - arg0.framebufferTextureMultiviewOVR(arg1 >>> 0, arg2 >>> 0, arg3, arg4, arg5, arg6); - }; - imports.wbg.__wbg_frontFace_289c9d7a8569c4f2 = function(arg0, arg1) { - arg0.frontFace(arg1 >>> 0); - }; - imports.wbg.__wbg_frontFace_4d4936cfaeb8b7df = function(arg0, arg1) { - arg0.frontFace(arg1 >>> 0); - }; - imports.wbg.__wbg_fullscreenElement_a2f691b04c3b3de5 = function(arg0) { - const ret = arg0.fullscreenElement; - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_getBindGroupLayout_4a94df6108ac6667 = function(arg0, arg1) { - const ret = arg0.getBindGroupLayout(arg1 >>> 0); - return ret; - }; - imports.wbg.__wbg_getBindGroupLayout_80e803d942962f6a = function(arg0, arg1) { - const ret = arg0.getBindGroupLayout(arg1 >>> 0); - return ret; - }; - imports.wbg.__wbg_getBoundingClientRect_9073b0ff7574d76b = function(arg0) { - const ret = arg0.getBoundingClientRect(); - return ret; - }; - imports.wbg.__wbg_getBufferSubData_8ab2dcc5fcf5770f = function(arg0, arg1, arg2, arg3) { - arg0.getBufferSubData(arg1 >>> 0, arg2, arg3); - }; - imports.wbg.__wbg_getCoalescedEvents_5490d23af440f0f0 = function(arg0) { - const ret = arg0.getCoalescedEvents; - return ret; - }; - imports.wbg.__wbg_getCoalescedEvents_a7d49de30111f6b8 = function(arg0) { - const ret = arg0.getCoalescedEvents(); - return ret; - }; - imports.wbg.__wbg_getCompilationInfo_2af3ecdfeda551a3 = function(arg0) { - const ret = arg0.getCompilationInfo(); - return ret; - }; - imports.wbg.__wbg_getComputedStyle_046dd6472f8e7f1d = function() { return handleError(function (arg0, arg1) { - const ret = arg0.getComputedStyle(arg1); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }, arguments) }; - imports.wbg.__wbg_getContext_3ae09aaa73194801 = function() { return handleError(function (arg0, arg1, arg2, arg3) { - const ret = arg0.getContext(getStringFromWasm0(arg1, arg2), arg3); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }, arguments) }; - imports.wbg.__wbg_getContext_e9cf379449413580 = function() { return handleError(function (arg0, arg1, arg2) { - const ret = arg0.getContext(getStringFromWasm0(arg1, arg2)); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }, arguments) }; - imports.wbg.__wbg_getContext_f65a0debd1e8f8e8 = function() { return handleError(function (arg0, arg1, arg2) { - const ret = arg0.getContext(getStringFromWasm0(arg1, arg2)); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }, arguments) }; - imports.wbg.__wbg_getContext_fc19859df6331073 = function() { return handleError(function (arg0, arg1, arg2, arg3) { - const ret = arg0.getContext(getStringFromWasm0(arg1, arg2), arg3); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }, arguments) }; - imports.wbg.__wbg_getCurrentTexture_5a79cda2ff36e1ee = function(arg0) { - const ret = arg0.getCurrentTexture(); - return ret; - }; - imports.wbg.__wbg_getExtension_ff0fb1398bcf28c3 = function() { return handleError(function (arg0, arg1, arg2) { - const ret = arg0.getExtension(getStringFromWasm0(arg1, arg2)); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }, arguments) }; - imports.wbg.__wbg_getGamepads_1f997cef580c9088 = function() { return handleError(function (arg0) { - const ret = arg0.getGamepads(); - return ret; - }, arguments) }; - imports.wbg.__wbg_getIndexedParameter_f9211edc36533919 = function() { return handleError(function (arg0, arg1, arg2) { - const ret = arg0.getIndexedParameter(arg1 >>> 0, arg2 >>> 0); - return ret; - }, arguments) }; - imports.wbg.__wbg_getMappedRange_932dd043ae22ee0a = function(arg0, arg1, arg2) { - const ret = arg0.getMappedRange(arg1, arg2); - return ret; - }; - imports.wbg.__wbg_getOwnPropertyDescriptor_9dd936a3c0cbd368 = function(arg0, arg1) { - const ret = Object.getOwnPropertyDescriptor(arg0, arg1); - return ret; - }; - imports.wbg.__wbg_getParameter_1f0887a2b88e6d19 = function() { return handleError(function (arg0, arg1) { - const ret = arg0.getParameter(arg1 >>> 0); - return ret; - }, arguments) }; - imports.wbg.__wbg_getParameter_e3429f024018310f = function() { return handleError(function (arg0, arg1) { - const ret = arg0.getParameter(arg1 >>> 0); - return ret; - }, arguments) }; - imports.wbg.__wbg_getPreferredCanvasFormat_de73c02773a5209e = function(arg0) { - const ret = arg0.getPreferredCanvasFormat(); - return (__wbindgen_enum_GpuTextureFormat.indexOf(ret) + 1 || 96) - 1; - }; - imports.wbg.__wbg_getProgramInfoLog_631c180b1b21c8ed = function(arg0, arg1, arg2) { - const ret = arg1.getProgramInfoLog(arg2); - var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - var len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_getProgramInfoLog_a998105a680059db = function(arg0, arg1, arg2) { - const ret = arg1.getProgramInfoLog(arg2); - var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - var len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_getProgramParameter_0c411f0cd4185c5b = function(arg0, arg1, arg2) { - const ret = arg0.getProgramParameter(arg1, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_getProgramParameter_360f95ff07ac068d = function(arg0, arg1, arg2) { - const ret = arg0.getProgramParameter(arg1, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_getPropertyValue_e623c23a05dfb30c = function() { return handleError(function (arg0, arg1, arg2, arg3) { - const ret = arg1.getPropertyValue(getStringFromWasm0(arg2, arg3)); - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }, arguments) }; - imports.wbg.__wbg_getQueryParameter_8921497e1d1561c1 = function(arg0, arg1, arg2) { - const ret = arg0.getQueryParameter(arg1, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_getRandomValues_3c9c0d586e575a16 = function() { return handleError(function (arg0, arg1) { - globalThis.crypto.getRandomValues(getArrayU8FromWasm0(arg0, arg1)); - }, arguments) }; - imports.wbg.__wbg_getRandomValues_b8f5dbd5f3995a9e = function() { return handleError(function (arg0, arg1) { - arg0.getRandomValues(arg1); - }, arguments) }; - imports.wbg.__wbg_getShaderInfoLog_7e7b38fb910ec534 = function(arg0, arg1, arg2) { - const ret = arg1.getShaderInfoLog(arg2); - var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - var len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_getShaderInfoLog_f59c3112acc6e039 = function(arg0, arg1, arg2) { - const ret = arg1.getShaderInfoLog(arg2); - var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - var len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_getShaderParameter_511b5f929074fa31 = function(arg0, arg1, arg2) { - const ret = arg0.getShaderParameter(arg1, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_getShaderParameter_6dbe0b8558dc41fd = function(arg0, arg1, arg2) { - const ret = arg0.getShaderParameter(arg1, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_getSupportedExtensions_8c007dbb54905635 = function(arg0) { - const ret = arg0.getSupportedExtensions(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_getSupportedProfiles_10d2a4d32a128384 = function(arg0) { - const ret = arg0.getSupportedProfiles(); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_getSyncParameter_7cb8461f5891606c = function(arg0, arg1, arg2) { - const ret = arg0.getSyncParameter(arg1, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_getUniformBlockIndex_288fdc31528171ca = function(arg0, arg1, arg2, arg3) { - const ret = arg0.getUniformBlockIndex(arg1, getStringFromWasm0(arg2, arg3)); - return ret; - }; - imports.wbg.__wbg_getUniformLocation_657a2b6d102bd126 = function(arg0, arg1, arg2, arg3) { - const ret = arg0.getUniformLocation(arg1, getStringFromWasm0(arg2, arg3)); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_getUniformLocation_838363001c74dc21 = function(arg0, arg1, arg2, arg3) { - const ret = arg0.getUniformLocation(arg1, getStringFromWasm0(arg2, arg3)); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_get_b9b93047fe3cf45b = function(arg0, arg1) { - const ret = arg0[arg1 >>> 0]; - return ret; - }; - imports.wbg.__wbg_get_e27dfaeb6f46bd45 = function(arg0, arg1) { - const ret = arg0[arg1 >>> 0]; - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_gpu_87871e8f7ace8fee = function(arg0) { - const ret = arg0.gpu; - return ret; - }; - imports.wbg.__wbg_has_624cbf0451d880e8 = function(arg0, arg1, arg2) { - const ret = arg0.has(getStringFromWasm0(arg1, arg2)); - return ret; - }; - imports.wbg.__wbg_height_1d93eb7f5e355d97 = function(arg0) { - const ret = arg0.height; - return ret; - }; - imports.wbg.__wbg_height_1f8226c8f6875110 = function(arg0) { - const ret = arg0.height; - return ret; - }; - imports.wbg.__wbg_height_838cee19ba8597db = function(arg0) { - const ret = arg0.height; - return ret; - }; - imports.wbg.__wbg_height_d3f39e12f0f62121 = function(arg0) { - const ret = arg0.height; - return ret; - }; - imports.wbg.__wbg_height_df1aa98dfbbe11ad = function(arg0) { - const ret = arg0.height; - return ret; - }; - imports.wbg.__wbg_height_e3c322f23d99ad2f = function(arg0) { - const ret = arg0.height; - return ret; - }; - imports.wbg.__wbg_id_290cc18d62a31d87 = function(arg0, arg1) { - const ret = arg1.id; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_includes_937486a108ec147b = function(arg0, arg1, arg2) { - const ret = arg0.includes(arg1, arg2); - return ret; - }; - imports.wbg.__wbg_index_ff9a331b48fca2da = function(arg0) { - const ret = arg0.index; - return ret; - }; - imports.wbg.__wbg_inlineSize_8ff96b3ec1b24423 = function(arg0) { - const ret = arg0.inlineSize; - return ret; - }; - imports.wbg.__wbg_instanceof_ArrayBuffer_e14585432e3737fc = function(arg0) { - let result; - try { - result = arg0 instanceof ArrayBuffer; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_DomException_ed1ccb7aaf39034c = function(arg0) { - let result; - try { - result = arg0 instanceof DOMException; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_GpuAdapter_0731153d2b08720b = function(arg0) { - let result; - try { - result = arg0 instanceof GPUAdapter; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_GpuCanvasContext_d14121c7bd72fcef = function(arg0) { - let result; - try { - result = arg0 instanceof GPUCanvasContext; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_GpuDeviceLostInfo_a3677ebb8241d800 = function(arg0) { - let result; - try { - result = arg0 instanceof GPUDeviceLostInfo; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_GpuOutOfMemoryError_391d9a08edbfa04b = function(arg0) { - let result; - try { - result = arg0 instanceof GPUOutOfMemoryError; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_GpuValidationError_f4d803c383da3c92 = function(arg0) { - let result; - try { - result = arg0 instanceof GPUValidationError; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_HtmlCanvasElement_2ea67072a7624ac5 = function(arg0) { - let result; - try { - result = arg0 instanceof HTMLCanvasElement; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_Object_7f2dcef8f78644a4 = function(arg0) { - let result; - try { - result = arg0 instanceof Object; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_Response_f2cc20d9f7dfd644 = function(arg0) { - let result; - try { - result = arg0 instanceof Response; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_Uint8Array_17156bcf118086a9 = function(arg0) { - let result; - try { - result = arg0 instanceof Uint8Array; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_WebGl2RenderingContext_2b6045efeb76568d = function(arg0) { - let result; - try { - result = arg0 instanceof WebGL2RenderingContext; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_instanceof_Window_def73ea0955fc569 = function(arg0) { - let result; - try { - result = arg0 instanceof Window; - } catch (_) { - result = false; - } - const ret = result; - return ret; - }; - imports.wbg.__wbg_invalidateFramebuffer_83f643d2a4936456 = function() { return handleError(function (arg0, arg1, arg2) { - arg0.invalidateFramebuffer(arg1 >>> 0, arg2); - }, arguments) }; - imports.wbg.__wbg_isIntersecting_e68706dac9c5f2e9 = function(arg0) { - const ret = arg0.isIntersecting; - return ret; - }; - imports.wbg.__wbg_isSecureContext_aedcf3816338189a = function(arg0) { - const ret = arg0.isSecureContext; - return ret; - }; - imports.wbg.__wbg_is_c7481c65e7e5df9e = function(arg0, arg1) { - const ret = Object.is(arg0, arg1); - return ret; - }; - imports.wbg.__wbg_key_7b5c6cb539be8e13 = function(arg0, arg1) { - const ret = arg1.key; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_label_2082ab37d2ad170d = function(arg0, arg1) { - const ret = arg1.label; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_length_9df32f7add647235 = function(arg0) { - const ret = arg0.length; - return ret; - }; - imports.wbg.__wbg_length_a446193dc22c12f8 = function(arg0) { - const ret = arg0.length; - return ret; - }; - imports.wbg.__wbg_length_e2d2a49132c1b256 = function(arg0) { - const ret = arg0.length; - return ret; - }; - imports.wbg.__wbg_limits_2dd632c891786ddf = function(arg0) { - const ret = arg0.limits; - return ret; - }; - imports.wbg.__wbg_limits_f6411f884b0b2d62 = function(arg0) { - const ret = arg0.limits; - return ret; - }; - imports.wbg.__wbg_lineNum_0246de1e072ffe19 = function(arg0) { - const ret = arg0.lineNum; - return ret; - }; - imports.wbg.__wbg_linkProgram_067ee06739bdde81 = function(arg0, arg1) { - arg0.linkProgram(arg1); - }; - imports.wbg.__wbg_linkProgram_e002979fe36e5b2a = function(arg0, arg1) { - arg0.linkProgram(arg1); - }; - imports.wbg.__wbg_location_9b435486be8f98c2 = function(arg0) { - const ret = arg0.location; - return ret; - }; - imports.wbg.__wbg_log_0cc1b7768397bcfe = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) { - let deferred0_0; - let deferred0_1; - try { - deferred0_0 = arg0; - deferred0_1 = arg1; - console.log(getStringFromWasm0(arg0, arg1), getStringFromWasm0(arg2, arg3), getStringFromWasm0(arg4, arg5), getStringFromWasm0(arg6, arg7)); - } finally { - wasm.__wbindgen_free(deferred0_0, deferred0_1, 1); - } - }; - imports.wbg.__wbg_log_cb9e190acc5753fb = function(arg0, arg1) { - let deferred0_0; - let deferred0_1; - try { - deferred0_0 = arg0; - deferred0_1 = arg1; - console.log(getStringFromWasm0(arg0, arg1)); - } finally { - wasm.__wbindgen_free(deferred0_0, deferred0_1, 1); - } - }; - imports.wbg.__wbg_lost_6e4d29847ce2a34a = function(arg0) { - const ret = arg0.lost; - return ret; - }; - imports.wbg.__wbg_mapAsync_37f5e03edf2e1352 = function(arg0, arg1, arg2, arg3) { - const ret = arg0.mapAsync(arg1 >>> 0, arg2, arg3); - return ret; - }; - imports.wbg.__wbg_mapping_4346bd44a2f56d13 = function(arg0) { - const ret = arg0.mapping; - return (__wbindgen_enum_GamepadMappingType.indexOf(ret) + 1 || 3) - 1; - }; - imports.wbg.__wbg_mark_7438147ce31e9d4b = function(arg0, arg1) { - performance.mark(getStringFromWasm0(arg0, arg1)); - }; - imports.wbg.__wbg_matchMedia_bf8807a841d930c1 = function() { return handleError(function (arg0, arg1, arg2) { - const ret = arg0.matchMedia(getStringFromWasm0(arg1, arg2)); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }, arguments) }; - imports.wbg.__wbg_matches_e9ca73fbf8a3a104 = function(arg0) { - const ret = arg0.matches; - return ret; - }; - imports.wbg.__wbg_maxBindGroups_768ca5e8623bf450 = function(arg0) { - const ret = arg0.maxBindGroups; - return ret; - }; - imports.wbg.__wbg_maxBindingsPerBindGroup_057972d600d69719 = function(arg0) { - const ret = arg0.maxBindingsPerBindGroup; - return ret; - }; - imports.wbg.__wbg_maxBufferSize_e237b44f19a5a62b = function(arg0) { - const ret = arg0.maxBufferSize; - return ret; - }; - imports.wbg.__wbg_maxChannelCount_a06f8ca4190698ed = function(arg0) { - const ret = arg0.maxChannelCount; - return ret; - }; - imports.wbg.__wbg_maxColorAttachmentBytesPerSample_d6c7b4051d22c6d6 = function(arg0) { - const ret = arg0.maxColorAttachmentBytesPerSample; - return ret; - }; - imports.wbg.__wbg_maxColorAttachments_7a18ba24c05edcfd = function(arg0) { - const ret = arg0.maxColorAttachments; - return ret; - }; - imports.wbg.__wbg_maxComputeInvocationsPerWorkgroup_b99c2f3611633992 = function(arg0) { - const ret = arg0.maxComputeInvocationsPerWorkgroup; - return ret; - }; - imports.wbg.__wbg_maxComputeWorkgroupSizeX_adb26da9ed7f77f7 = function(arg0) { - const ret = arg0.maxComputeWorkgroupSizeX; - return ret; - }; - imports.wbg.__wbg_maxComputeWorkgroupSizeY_cc217559c98be33b = function(arg0) { - const ret = arg0.maxComputeWorkgroupSizeY; - return ret; - }; - imports.wbg.__wbg_maxComputeWorkgroupSizeZ_66606a80e2cf2309 = function(arg0) { - const ret = arg0.maxComputeWorkgroupSizeZ; - return ret; - }; - imports.wbg.__wbg_maxComputeWorkgroupStorageSize_cb6235497b8c4997 = function(arg0) { - const ret = arg0.maxComputeWorkgroupStorageSize; - return ret; - }; - imports.wbg.__wbg_maxComputeWorkgroupsPerDimension_6bf550b5f21d57cf = function(arg0) { - const ret = arg0.maxComputeWorkgroupsPerDimension; - return ret; - }; - imports.wbg.__wbg_maxDynamicStorageBuffersPerPipelineLayout_c6ac20334e328b47 = function(arg0) { - const ret = arg0.maxDynamicStorageBuffersPerPipelineLayout; - return ret; - }; - imports.wbg.__wbg_maxDynamicUniformBuffersPerPipelineLayout_aa8f14a74b440f01 = function(arg0) { - const ret = arg0.maxDynamicUniformBuffersPerPipelineLayout; - return ret; - }; - imports.wbg.__wbg_maxSampledTexturesPerShaderStage_db7c4922cc60144a = function(arg0) { - const ret = arg0.maxSampledTexturesPerShaderStage; - return ret; - }; - imports.wbg.__wbg_maxSamplersPerShaderStage_538705fe2263e710 = function(arg0) { - const ret = arg0.maxSamplersPerShaderStage; - return ret; - }; - imports.wbg.__wbg_maxStorageBufferBindingSize_32178c0f5f7f85cb = function(arg0) { - const ret = arg0.maxStorageBufferBindingSize; - return ret; - }; - imports.wbg.__wbg_maxStorageBuffersPerShaderStage_9f67e9eae0089f77 = function(arg0) { - const ret = arg0.maxStorageBuffersPerShaderStage; - return ret; - }; - imports.wbg.__wbg_maxStorageTexturesPerShaderStage_57239664936031cf = function(arg0) { - const ret = arg0.maxStorageTexturesPerShaderStage; - return ret; - }; - imports.wbg.__wbg_maxTextureArrayLayers_db5d4e486c78ae04 = function(arg0) { - const ret = arg0.maxTextureArrayLayers; - return ret; - }; - imports.wbg.__wbg_maxTextureDimension1D_3475085ffacabbdc = function(arg0) { - const ret = arg0.maxTextureDimension1D; - return ret; - }; - imports.wbg.__wbg_maxTextureDimension2D_7c8d5ecf09eb8519 = function(arg0) { - const ret = arg0.maxTextureDimension2D; - return ret; - }; - imports.wbg.__wbg_maxTextureDimension3D_8bd976677a0f91d4 = function(arg0) { - const ret = arg0.maxTextureDimension3D; - return ret; - }; - imports.wbg.__wbg_maxUniformBufferBindingSize_95b1a54e7e4a0f0f = function(arg0) { - const ret = arg0.maxUniformBufferBindingSize; - return ret; - }; - imports.wbg.__wbg_maxUniformBuffersPerShaderStage_5f475d9a453af14d = function(arg0) { - const ret = arg0.maxUniformBuffersPerShaderStage; - return ret; - }; - imports.wbg.__wbg_maxVertexAttributes_4c48ca2f5d32f860 = function(arg0) { - const ret = arg0.maxVertexAttributes; - return ret; - }; - imports.wbg.__wbg_maxVertexBufferArrayStride_2233f6933ecc5a16 = function(arg0) { - const ret = arg0.maxVertexBufferArrayStride; - return ret; - }; - imports.wbg.__wbg_maxVertexBuffers_c47e508cd7348554 = function(arg0) { - const ret = arg0.maxVertexBuffers; - return ret; - }; - imports.wbg.__wbg_measure_fb7825c11612c823 = function() { return handleError(function (arg0, arg1, arg2, arg3) { - let deferred0_0; - let deferred0_1; - let deferred1_0; - let deferred1_1; - try { - deferred0_0 = arg0; - deferred0_1 = arg1; - deferred1_0 = arg2; - deferred1_1 = arg3; - performance.measure(getStringFromWasm0(arg0, arg1), getStringFromWasm0(arg2, arg3)); - } finally { - wasm.__wbindgen_free(deferred0_0, deferred0_1, 1); - wasm.__wbindgen_free(deferred1_0, deferred1_1, 1); - } - }, arguments) }; - imports.wbg.__wbg_media_552eec81313ef78b = function(arg0, arg1) { - const ret = arg1.media; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_message_0762358e59db7ed6 = function(arg0, arg1) { - const ret = arg1.message; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_message_5c5d919204d42400 = function(arg0, arg1) { - const ret = arg1.message; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_message_7957ab09f64c6822 = function(arg0, arg1) { - const ret = arg1.message; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_message_b163994503433c9e = function(arg0, arg1) { - const ret = arg1.message; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_messages_da071582f72bc978 = function(arg0) { - const ret = arg0.messages; - return ret; - }; - imports.wbg.__wbg_metaKey_0b25f7848e014cc8 = function(arg0) { - const ret = arg0.metaKey; - return ret; - }; - imports.wbg.__wbg_metaKey_e1dd47d709a80ce5 = function(arg0) { - const ret = arg0.metaKey; - return ret; - }; - imports.wbg.__wbg_minStorageBufferOffsetAlignment_51b4801fac3a58de = function(arg0) { - const ret = arg0.minStorageBufferOffsetAlignment; - return ret; - }; - imports.wbg.__wbg_minUniformBufferOffsetAlignment_5d62a77924b2335f = function(arg0) { - const ret = arg0.minUniformBufferOffsetAlignment; - return ret; - }; - imports.wbg.__wbg_movementX_1aa05f864931369b = function(arg0) { - const ret = arg0.movementX; - return ret; - }; - imports.wbg.__wbg_movementY_8acfedb38a70e624 = function(arg0) { - const ret = arg0.movementY; - return ret; - }; - imports.wbg.__wbg_msCrypto_a61aeb35a24c1329 = function(arg0) { - const ret = arg0.msCrypto; - return ret; - }; - imports.wbg.__wbg_navigator_0a9bf1120e24fec2 = function(arg0) { - const ret = arg0.navigator; - return ret; - }; - imports.wbg.__wbg_navigator_1577371c070c8947 = function(arg0) { - const ret = arg0.navigator; - return ret; - }; - imports.wbg.__wbg_new_18b1151f3a6a9280 = function() { return handleError(function (arg0) { - const ret = new IntersectionObserver(arg0); - return ret; - }, arguments) }; - imports.wbg.__wbg_new_24b2c5b645cded8d = function() { return handleError(function () { - const ret = new MessageChannel(); - return ret; - }, arguments) }; - imports.wbg.__wbg_new_405e22f390576ce2 = function() { - const ret = new Object(); - return ret; - }; - imports.wbg.__wbg_new_5f34cc0c99fcc488 = function() { return handleError(function (arg0) { - const ret = new ResizeObserver(arg0); - return ret; - }, arguments) }; - imports.wbg.__wbg_new_6377da097a44ce6e = function() { return handleError(function () { - const ret = new Image(); - return ret; - }, arguments) }; - imports.wbg.__wbg_new_63847613cde5d4bc = function(arg0, arg1, arg2, arg3) { - const ret = new RegExp(getStringFromWasm0(arg0, arg1), getStringFromWasm0(arg2, arg3)); - return ret; - }; - imports.wbg.__wbg_new_78feb108b6472713 = function() { - const ret = new Array(); - return ret; - }; - imports.wbg.__wbg_new_8a6f238a6ece86ea = function() { - const ret = new Error(); - return ret; - }; - imports.wbg.__wbg_new_a12002a7f91c75be = function(arg0) { - const ret = new Uint8Array(arg0); - return ret; - }; - imports.wbg.__wbg_new_b1a33e5095abf678 = function() { return handleError(function (arg0, arg1) { - const ret = new Worker(getStringFromWasm0(arg0, arg1)); - return ret; - }, arguments) }; - imports.wbg.__wbg_new_e25e5aab09ff45db = function() { return handleError(function () { - const ret = new AbortController(); - return ret; - }, arguments) }; - imports.wbg.__wbg_newnoargs_105ed471475aaf50 = function(arg0, arg1) { - const ret = new Function(getStringFromWasm0(arg0, arg1)); - return ret; - }; - imports.wbg.__wbg_newwithbyteoffsetandlength_840f3c038856d4e9 = function(arg0, arg1, arg2) { - const ret = new Int8Array(arg0, arg1 >>> 0, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_newwithbyteoffsetandlength_999332a180064b59 = function(arg0, arg1, arg2) { - const ret = new Int32Array(arg0, arg1 >>> 0, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_newwithbyteoffsetandlength_d4a86622320ea258 = function(arg0, arg1, arg2) { - const ret = new Uint16Array(arg0, arg1 >>> 0, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_newwithbyteoffsetandlength_d97e637ebe145a9a = function(arg0, arg1, arg2) { - const ret = new Uint8Array(arg0, arg1 >>> 0, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_newwithbyteoffsetandlength_e6b7e69acd4c7354 = function(arg0, arg1, arg2) { - const ret = new Float32Array(arg0, arg1 >>> 0, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_newwithbyteoffsetandlength_f1dead44d1fc7212 = function(arg0, arg1, arg2) { - const ret = new Uint32Array(arg0, arg1 >>> 0, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_newwithbyteoffsetandlength_f254047f7e80e7ff = function(arg0, arg1, arg2) { - const ret = new Int16Array(arg0, arg1 >>> 0, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_newwithcontextoptions_b62c06fed7900366 = function() { return handleError(function (arg0) { - const ret = new lAudioContext(arg0); - return ret; - }, arguments) }; - imports.wbg.__wbg_newwithlength_a381634e90c276d4 = function(arg0) { - const ret = new Uint8Array(arg0 >>> 0); - return ret; - }; - imports.wbg.__wbg_newwithstrsequenceandoptions_aaff55b467c81b63 = function() { return handleError(function (arg0, arg1) { - const ret = new Blob(arg0, arg1); - return ret; - }, arguments) }; - imports.wbg.__wbg_newwithu8clampedarray_0fcf78a036c89a97 = function() { return handleError(function (arg0, arg1, arg2) { - const ret = new ImageData(getClampedArrayU8FromWasm0(arg0, arg1), arg2 >>> 0); - return ret; - }, arguments) }; - imports.wbg.__wbg_node_905d3e251edff8a2 = function(arg0) { - const ret = arg0.node; - return ret; - }; - imports.wbg.__wbg_now_2c95c9de01293173 = function(arg0) { - const ret = arg0.now(); - return ret; - }; - imports.wbg.__wbg_now_807e54c39636c349 = function() { - const ret = Date.now(); - return ret; - }; - imports.wbg.__wbg_observe_d2e7378f15f7ca72 = function(arg0, arg1) { - arg0.observe(arg1); - }; - imports.wbg.__wbg_observe_eafddfc5a0c60e02 = function(arg0, arg1) { - arg0.observe(arg1); - }; - imports.wbg.__wbg_observe_ed4adb1c245103c5 = function(arg0, arg1, arg2) { - arg0.observe(arg1, arg2); - }; - imports.wbg.__wbg_of_2eaf5a02d443ef03 = function(arg0) { - const ret = Array.of(arg0); - return ret; - }; - imports.wbg.__wbg_of_66b3ee656cbd962b = function(arg0, arg1) { - const ret = Array.of(arg0, arg1); - return ret; - }; - imports.wbg.__wbg_offsetX_5ad3b37427ea2f19 = function(arg0) { - const ret = arg0.offsetX; - return ret; - }; - imports.wbg.__wbg_offsetY_8f5d90630a62a1d9 = function(arg0) { - const ret = arg0.offsetY; - return ret; - }; - imports.wbg.__wbg_offset_336f14c993863b76 = function(arg0) { - const ret = arg0.offset; - return ret; - }; - imports.wbg.__wbg_performance_7a3ffd0b17f663ad = function(arg0) { - const ret = arg0.performance; - return ret; - }; - imports.wbg.__wbg_persisted_d32ce73b8e522062 = function(arg0) { - const ret = arg0.persisted; - return ret; - }; - imports.wbg.__wbg_pixelStorei_6aba5d04cdcaeaf6 = function(arg0, arg1, arg2) { - arg0.pixelStorei(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_pixelStorei_c8520e4b46f4a973 = function(arg0, arg1, arg2) { - arg0.pixelStorei(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_play_46e3e3a0bff60043 = function(arg0) { - arg0.play(); - }; - imports.wbg.__wbg_pointerId_585e63ee80a49927 = function(arg0) { - const ret = arg0.pointerId; - return ret; - }; - imports.wbg.__wbg_pointerType_6bd934aa20d9db49 = function(arg0, arg1) { - const ret = arg1.pointerType; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_polygonOffset_773fe0017b2c8f51 = function(arg0, arg1, arg2) { - arg0.polygonOffset(arg1, arg2); - }; - imports.wbg.__wbg_polygonOffset_8c11c066486216c4 = function(arg0, arg1, arg2) { - arg0.polygonOffset(arg1, arg2); - }; - imports.wbg.__wbg_popErrorScope_af0b22f136a861d6 = function(arg0) { - const ret = arg0.popErrorScope(); - return ret; - }; - imports.wbg.__wbg_port1_70af0ea6e4a96f9d = function(arg0) { - const ret = arg0.port1; - return ret; - }; - imports.wbg.__wbg_port2_0584c7f0938b6fe6 = function(arg0) { - const ret = arg0.port2; - return ret; - }; - imports.wbg.__wbg_postMessage_e55d059efb191dc5 = function() { return handleError(function (arg0, arg1) { - arg0.postMessage(arg1); - }, arguments) }; - imports.wbg.__wbg_postMessage_f961e53b9731ca83 = function() { return handleError(function (arg0, arg1, arg2) { - arg0.postMessage(arg1, arg2); - }, arguments) }; - imports.wbg.__wbg_postTask_4c71ec307d7c281c = function(arg0, arg1, arg2) { - const ret = arg0.postTask(arg1, arg2); - return ret; - }; - imports.wbg.__wbg_pressed_b3de5f0878ceb06e = function(arg0) { - const ret = arg0.pressed; - return ret; - }; - imports.wbg.__wbg_pressure_adda5a83a9cec94d = function(arg0) { - const ret = arg0.pressure; - return ret; - }; - imports.wbg.__wbg_preventDefault_c2314fd813c02b3c = function(arg0) { - arg0.preventDefault(); - }; - imports.wbg.__wbg_process_dc0fbacc7c1c06f7 = function(arg0) { - const ret = arg0.process; - return ret; - }; - imports.wbg.__wbg_prototype_33233eaa371905ad = function() { - const ret = ResizeObserverEntry.prototype; - return ret; - }; - imports.wbg.__wbg_pushErrorScope_b52914ff10ba6ce3 = function(arg0, arg1) { - arg0.pushErrorScope(__wbindgen_enum_GpuErrorFilter[arg1]); - }; - imports.wbg.__wbg_push_737cfc8c1432c2c6 = function(arg0, arg1) { - const ret = arg0.push(arg1); - return ret; - }; - imports.wbg.__wbg_queryCounterEXT_7aed85645b7ec1da = function(arg0, arg1, arg2) { - arg0.queryCounterEXT(arg1, arg2 >>> 0); - }; - imports.wbg.__wbg_querySelectorAll_40998fd748f057ef = function() { return handleError(function (arg0, arg1, arg2) { - const ret = arg0.querySelectorAll(getStringFromWasm0(arg1, arg2)); - return ret; - }, arguments) }; - imports.wbg.__wbg_querySelector_c69f8b573958906b = function() { return handleError(function (arg0, arg1, arg2) { - const ret = arg0.querySelector(getStringFromWasm0(arg1, arg2)); - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }, arguments) }; - imports.wbg.__wbg_queueMicrotask_65a6c48ee9790d40 = function(arg0, arg1) { - arg0.queueMicrotask(arg1); - }; - imports.wbg.__wbg_queueMicrotask_97d92b4fcc8a61c5 = function(arg0) { - queueMicrotask(arg0); - }; - imports.wbg.__wbg_queueMicrotask_d3219def82552485 = function(arg0) { - const ret = arg0.queueMicrotask; - return ret; - }; - imports.wbg.__wbg_queue_bea4017efaaf9904 = function(arg0) { - const ret = arg0.queue; - return ret; - }; - imports.wbg.__wbg_randomFillSync_ac0988aba3254290 = function() { return handleError(function (arg0, arg1) { - arg0.randomFillSync(arg1); - }, arguments) }; - imports.wbg.__wbg_readBuffer_1c35b1e4939f881d = function(arg0, arg1) { - arg0.readBuffer(arg1 >>> 0); - }; - imports.wbg.__wbg_readPixels_51a0c02cdee207a5 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) { - arg0.readPixels(arg1, arg2, arg3, arg4, arg5 >>> 0, arg6 >>> 0, arg7); - }, arguments) }; - imports.wbg.__wbg_readPixels_a6cbb21794452142 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) { - arg0.readPixels(arg1, arg2, arg3, arg4, arg5 >>> 0, arg6 >>> 0, arg7); - }, arguments) }; - imports.wbg.__wbg_readPixels_cd64c5a7b0343355 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) { - arg0.readPixels(arg1, arg2, arg3, arg4, arg5 >>> 0, arg6 >>> 0, arg7); - }, arguments) }; - imports.wbg.__wbg_reason_43acd39cce242b50 = function(arg0) { - const ret = arg0.reason; - return (__wbindgen_enum_GpuDeviceLostReason.indexOf(ret) + 1 || 3) - 1; - }; - imports.wbg.__wbg_removeEventListener_056dfe8c3d6c58f9 = function() { return handleError(function (arg0, arg1, arg2, arg3) { - arg0.removeEventListener(getStringFromWasm0(arg1, arg2), arg3); - }, arguments) }; - imports.wbg.__wbg_removeListener_e55db581b73ccf65 = function() { return handleError(function (arg0, arg1) { - arg0.removeListener(arg1); - }, arguments) }; - imports.wbg.__wbg_removeProperty_0e85471f4dfc00ae = function() { return handleError(function (arg0, arg1, arg2, arg3) { - const ret = arg1.removeProperty(getStringFromWasm0(arg2, arg3)); - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }, arguments) }; - imports.wbg.__wbg_renderbufferStorageMultisample_13fbd5e58900c6fe = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.renderbufferStorageMultisample(arg1 >>> 0, arg2, arg3 >>> 0, arg4, arg5); - }; - imports.wbg.__wbg_renderbufferStorage_73e01ea83b8afab4 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.renderbufferStorage(arg1 >>> 0, arg2 >>> 0, arg3, arg4); - }; - imports.wbg.__wbg_renderbufferStorage_f010012bd3566942 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.renderbufferStorage(arg1 >>> 0, arg2 >>> 0, arg3, arg4); - }; - imports.wbg.__wbg_repeat_1882aa0d0072c705 = function(arg0) { - const ret = arg0.repeat; - return ret; - }; - imports.wbg.__wbg_requestAdapter_e6dcfac497cafa7a = function(arg0, arg1) { - const ret = arg0.requestAdapter(arg1); - return ret; - }; - imports.wbg.__wbg_requestAnimationFrame_d7fd890aaefc3246 = function() { return handleError(function (arg0, arg1) { - const ret = arg0.requestAnimationFrame(arg1); - return ret; - }, arguments) }; - imports.wbg.__wbg_requestDevice_03b802707d5a382c = function(arg0, arg1) { - const ret = arg0.requestDevice(arg1); - return ret; - }; - imports.wbg.__wbg_requestFullscreen_2a1f96e1cb3b431e = function(arg0) { - const ret = arg0.requestFullscreen(); - return ret; - }; - imports.wbg.__wbg_requestFullscreen_78a96c51b3444d3d = function(arg0) { - const ret = arg0.requestFullscreen; - return ret; - }; - imports.wbg.__wbg_requestIdleCallback_dcce714dd6586868 = function(arg0) { - const ret = arg0.requestIdleCallback; - return ret; - }; - imports.wbg.__wbg_requestIdleCallback_e3eefd34962470e1 = function() { return handleError(function (arg0, arg1) { - const ret = arg0.requestIdleCallback(arg1); - return ret; - }, arguments) }; - imports.wbg.__wbg_requestPointerLock_304dd9ccfe548767 = function(arg0) { - arg0.requestPointerLock(); - }; - imports.wbg.__wbg_require_60cc747a6bc5215a = function() { return handleError(function () { - const ret = module.require; - return ret; - }, arguments) }; - imports.wbg.__wbg_resolveQuerySet_811661fb23f3b699 = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.resolveQuerySet(arg1, arg2 >>> 0, arg3 >>> 0, arg4, arg5 >>> 0); - }; - imports.wbg.__wbg_resolve_4851785c9c5f573d = function(arg0) { - const ret = Promise.resolve(arg0); - return ret; - }; - imports.wbg.__wbg_resume_35efdc4ffe13bf18 = function() { return handleError(function (arg0) { - const ret = arg0.resume(); - return ret; - }, arguments) }; - imports.wbg.__wbg_revokeObjectURL_27267efebeb457c7 = function() { return handleError(function (arg0, arg1) { - URL.revokeObjectURL(getStringFromWasm0(arg0, arg1)); - }, arguments) }; - imports.wbg.__wbg_samplerParameterf_909baf50360c94d4 = function(arg0, arg1, arg2, arg3) { - arg0.samplerParameterf(arg1, arg2 >>> 0, arg3); - }; - imports.wbg.__wbg_samplerParameteri_d5c292172718da63 = function(arg0, arg1, arg2, arg3) { - arg0.samplerParameteri(arg1, arg2 >>> 0, arg3); - }; - imports.wbg.__wbg_scheduler_244546754ebd8ef3 = function(arg0) { - const ret = arg0.scheduler; - return ret; - }; - imports.wbg.__wbg_scheduler_f6dc60a2117f5c82 = function(arg0) { - const ret = arg0.scheduler; - return ret; - }; - imports.wbg.__wbg_scissor_e917a332f67a5d30 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.scissor(arg1, arg2, arg3, arg4); - }; - imports.wbg.__wbg_scissor_eb177ca33bf24a44 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.scissor(arg1, arg2, arg3, arg4); - }; - imports.wbg.__wbg_setAttribute_2704501201f15687 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) { - arg0.setAttribute(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4)); - }, arguments) }; - imports.wbg.__wbg_setBindGroup_62a3045b0921e429 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6) { - arg0.setBindGroup(arg1 >>> 0, arg2, getArrayU32FromWasm0(arg3, arg4), arg5, arg6 >>> 0); - }; - imports.wbg.__wbg_setBindGroup_6c0fd18e9a53a945 = function(arg0, arg1, arg2) { - arg0.setBindGroup(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_setBindGroup_7f3b61f1f482133b = function(arg0, arg1, arg2) { - arg0.setBindGroup(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_setBindGroup_bf767a5aa46a33ce = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6) { - arg0.setBindGroup(arg1 >>> 0, arg2, getArrayU32FromWasm0(arg3, arg4), arg5, arg6 >>> 0); - }; - imports.wbg.__wbg_setBindGroup_c4aaff14063226b4 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6) { - arg0.setBindGroup(arg1 >>> 0, arg2, getArrayU32FromWasm0(arg3, arg4), arg5, arg6 >>> 0); - }; - imports.wbg.__wbg_setBindGroup_f82e771dc1b69093 = function(arg0, arg1, arg2) { - arg0.setBindGroup(arg1 >>> 0, arg2); - }; - imports.wbg.__wbg_setBlendConstant_016723821cfb3aa4 = function(arg0, arg1) { - arg0.setBlendConstant(arg1); - }; - imports.wbg.__wbg_setIndexBuffer_286a40afdff411b7 = function(arg0, arg1, arg2, arg3) { - arg0.setIndexBuffer(arg1, __wbindgen_enum_GpuIndexFormat[arg2], arg3); - }; - imports.wbg.__wbg_setIndexBuffer_7efd0b7a40c65fb9 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.setIndexBuffer(arg1, __wbindgen_enum_GpuIndexFormat[arg2], arg3, arg4); - }; - imports.wbg.__wbg_setIndexBuffer_e091a9673bb575e2 = function(arg0, arg1, arg2, arg3) { - arg0.setIndexBuffer(arg1, __wbindgen_enum_GpuIndexFormat[arg2], arg3); - }; - imports.wbg.__wbg_setIndexBuffer_f0759f00036f615f = function(arg0, arg1, arg2, arg3, arg4) { - arg0.setIndexBuffer(arg1, __wbindgen_enum_GpuIndexFormat[arg2], arg3, arg4); - }; - imports.wbg.__wbg_setPipeline_ba92070b8ee81cf9 = function(arg0, arg1) { - arg0.setPipeline(arg1); - }; - imports.wbg.__wbg_setPipeline_c344f76bae58c4d6 = function(arg0, arg1) { - arg0.setPipeline(arg1); - }; - imports.wbg.__wbg_setPipeline_d76451c50a121598 = function(arg0, arg1) { - arg0.setPipeline(arg1); - }; - imports.wbg.__wbg_setPointerCapture_c04dafaf4d00ffad = function() { return handleError(function (arg0, arg1) { - arg0.setPointerCapture(arg1); - }, arguments) }; - imports.wbg.__wbg_setProperty_f2cf326652b9a713 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) { - arg0.setProperty(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4)); - }, arguments) }; - imports.wbg.__wbg_setScissorRect_0b6ee0852ef0b6b9 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.setScissorRect(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4 >>> 0); - }; - imports.wbg.__wbg_setStencilReference_34fd3d59673a5a9d = function(arg0, arg1) { - arg0.setStencilReference(arg1 >>> 0); - }; - imports.wbg.__wbg_setTimeout_461fec76662b35ea = function() { return handleError(function (arg0, arg1) { - const ret = arg0.setTimeout(arg1); - return ret; - }, arguments) }; - imports.wbg.__wbg_setTimeout_f2fe5af8e3debeb3 = function() { return handleError(function (arg0, arg1, arg2) { - const ret = arg0.setTimeout(arg1, arg2); - return ret; - }, arguments) }; - imports.wbg.__wbg_setVertexBuffer_06a90dc78e1ad9c4 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.setVertexBuffer(arg1 >>> 0, arg2, arg3, arg4); - }; - imports.wbg.__wbg_setVertexBuffer_1540e9118b6c451d = function(arg0, arg1, arg2, arg3) { - arg0.setVertexBuffer(arg1 >>> 0, arg2, arg3); - }; - imports.wbg.__wbg_setVertexBuffer_5166eedc06450701 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.setVertexBuffer(arg1 >>> 0, arg2, arg3, arg4); - }; - imports.wbg.__wbg_setVertexBuffer_8621784e5014065b = function(arg0, arg1, arg2, arg3) { - arg0.setVertexBuffer(arg1 >>> 0, arg2, arg3); - }; - imports.wbg.__wbg_setViewport_731ad30abb13f744 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6) { - arg0.setViewport(arg1, arg2, arg3, arg4, arg5, arg6); - }; - imports.wbg.__wbg_set_65595bdd868b3009 = function(arg0, arg1, arg2) { - arg0.set(arg1, arg2 >>> 0); - }; - imports.wbg.__wbg_set_bb8cecf6a62b9f46 = function() { return handleError(function (arg0, arg1, arg2) { - const ret = Reflect.set(arg0, arg1, arg2); - return ret; - }, arguments) }; - imports.wbg.__wbg_setbox_2786f3ccea97cac4 = function(arg0, arg1) { - arg0.box = __wbindgen_enum_ResizeObserverBoxOptions[arg1]; - }; - imports.wbg.__wbg_setbuffer_10a9ee2a05c73896 = function(arg0, arg1) { - arg0.buffer = arg1; - }; - imports.wbg.__wbg_setchannelCount_876fcf5798895180 = function(arg0, arg1) { - arg0.channelCount = arg1 >>> 0; - }; - imports.wbg.__wbg_setcursor_4cdafcef870c627c = function(arg0, arg1, arg2) { - arg0.cursor = getStringFromWasm0(arg1, arg2); - }; - imports.wbg.__wbg_setduration_1bd9df5786d0e3fb = function(arg0, arg1) { - arg0.duration = arg1; - }; - imports.wbg.__wbg_setheight_433680330c9420c3 = function(arg0, arg1) { - arg0.height = arg1 >>> 0; - }; - imports.wbg.__wbg_setheight_da683a33fa99843c = function(arg0, arg1) { - arg0.height = arg1 >>> 0; - }; - imports.wbg.__wbg_setiterations_c198340cc23d08e9 = function(arg0, arg1) { - arg0.iterations = arg1; - }; - imports.wbg.__wbg_setonended_00ff85c70a4f819f = function(arg0, arg1) { - arg0.onended = arg1; - }; - imports.wbg.__wbg_setonmessage_23d122da701b8ddb = function(arg0, arg1) { - arg0.onmessage = arg1; - }; - imports.wbg.__wbg_setonuncapturederror_19541466822d790b = function(arg0, arg1) { - arg0.onuncapturederror = arg1; - }; - imports.wbg.__wbg_setpremultiplyalpha_fcd6afcf3903b790 = function(arg0, arg1) { - arg0.premultiplyAlpha = __wbindgen_enum_PremultiplyAlpha[arg1]; - }; - imports.wbg.__wbg_setsamplerate_8bc3fd769a6db02b = function(arg0, arg1) { - arg0.sampleRate = arg1; - }; - imports.wbg.__wbg_setsrc_c239193cc7ab0470 = function(arg0, arg1, arg2) { - arg0.src = getStringFromWasm0(arg1, arg2); - }; - imports.wbg.__wbg_settype_39ed370d3edd403c = function(arg0, arg1, arg2) { - arg0.type = getStringFromWasm0(arg1, arg2); - }; - imports.wbg.__wbg_setwidth_660ca581e3fbe279 = function(arg0, arg1) { - arg0.width = arg1 >>> 0; - }; - imports.wbg.__wbg_setwidth_c5fed9f5e7f0b406 = function(arg0, arg1) { - arg0.width = arg1 >>> 0; - }; - imports.wbg.__wbg_shaderSource_72d3e8597ef85b67 = function(arg0, arg1, arg2, arg3) { - arg0.shaderSource(arg1, getStringFromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_shaderSource_ad0087e637a35191 = function(arg0, arg1, arg2, arg3) { - arg0.shaderSource(arg1, getStringFromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_shiftKey_2bebb3b703254f47 = function(arg0) { - const ret = arg0.shiftKey; - return ret; - }; - imports.wbg.__wbg_shiftKey_86e737105bab1a54 = function(arg0) { - const ret = arg0.shiftKey; - return ret; - }; - imports.wbg.__wbg_signal_aaf9ad74119f20a4 = function(arg0) { - const ret = arg0.signal; - return ret; - }; - imports.wbg.__wbg_size_661bddb3f9898121 = function(arg0) { - const ret = arg0.size; - return ret; - }; - imports.wbg.__wbg_stack_0ed75d68575b0f3c = function(arg0, arg1) { - const ret = arg1.stack; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbg_start_2c099369ce831bf1 = function(arg0) { - arg0.start(); - }; - imports.wbg.__wbg_start_e81f89e130c3c86e = function() { return handleError(function (arg0, arg1) { - arg0.start(arg1); - }, arguments) }; - imports.wbg.__wbg_static_accessor_GLOBAL_88a902d13a557d07 = function() { - const ret = typeof global === 'undefined' ? null : global; - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_static_accessor_GLOBAL_THIS_56578be7e9f832b0 = function() { - const ret = typeof globalThis === 'undefined' ? null : globalThis; - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_static_accessor_SELF_37c5d418e4bf5819 = function() { - const ret = typeof self === 'undefined' ? null : self; - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_static_accessor_WINDOW_5de37043a91a9c40 = function() { - const ret = typeof window === 'undefined' ? null : window; - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_status_f6360336ca686bf0 = function(arg0) { - const ret = arg0.status; - return ret; - }; - imports.wbg.__wbg_stencilFuncSeparate_91700dcf367ae07e = function(arg0, arg1, arg2, arg3, arg4) { - arg0.stencilFuncSeparate(arg1 >>> 0, arg2 >>> 0, arg3, arg4 >>> 0); - }; - imports.wbg.__wbg_stencilFuncSeparate_c1a6fa2005ca0aaf = function(arg0, arg1, arg2, arg3, arg4) { - arg0.stencilFuncSeparate(arg1 >>> 0, arg2 >>> 0, arg3, arg4 >>> 0); - }; - imports.wbg.__wbg_stencilMaskSeparate_4f1a2defc8c10956 = function(arg0, arg1, arg2) { - arg0.stencilMaskSeparate(arg1 >>> 0, arg2 >>> 0); - }; - imports.wbg.__wbg_stencilMaskSeparate_f8a0cfb5c2994d4a = function(arg0, arg1, arg2) { - arg0.stencilMaskSeparate(arg1 >>> 0, arg2 >>> 0); - }; - imports.wbg.__wbg_stencilMask_1e602ef63f5b4144 = function(arg0, arg1) { - arg0.stencilMask(arg1 >>> 0); - }; - imports.wbg.__wbg_stencilMask_cd8ca0a55817e599 = function(arg0, arg1) { - arg0.stencilMask(arg1 >>> 0); - }; - imports.wbg.__wbg_stencilOpSeparate_1fa08985e79e1627 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.stencilOpSeparate(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4 >>> 0); - }; - imports.wbg.__wbg_stencilOpSeparate_ff6683bbe3838ae6 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.stencilOpSeparate(arg1 >>> 0, arg2 >>> 0, arg3 >>> 0, arg4 >>> 0); - }; - imports.wbg.__wbg_stringify_f7ed6987935b4a24 = function() { return handleError(function (arg0) { - const ret = JSON.stringify(arg0); - return ret; - }, arguments) }; - imports.wbg.__wbg_style_fb30c14e5815805c = function(arg0) { - const ret = arg0.style; - return ret; - }; - imports.wbg.__wbg_subarray_aa9065fa9dc5df96 = function(arg0, arg1, arg2) { - const ret = arg0.subarray(arg1 >>> 0, arg2 >>> 0); - return ret; - }; - imports.wbg.__wbg_submit_f635072bb3d05faa = function(arg0, arg1) { - arg0.submit(arg1); - }; - imports.wbg.__wbg_texImage2D_5f2835f02b1d1077 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.texImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8 >>> 0, arg9); - }, arguments) }; - imports.wbg.__wbg_texImage2D_b8edcb5692f65f88 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.texImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8 >>> 0, arg9); - }, arguments) }; - imports.wbg.__wbg_texImage3D_921b54d09bf45af0 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10) { - arg0.texImage3D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8 >>> 0, arg9 >>> 0, arg10); - }, arguments) }; - imports.wbg.__wbg_texParameteri_8112b26b3c360b7e = function(arg0, arg1, arg2, arg3) { - arg0.texParameteri(arg1 >>> 0, arg2 >>> 0, arg3); - }; - imports.wbg.__wbg_texParameteri_ef50743cb94d507e = function(arg0, arg1, arg2, arg3) { - arg0.texParameteri(arg1 >>> 0, arg2 >>> 0, arg3); - }; - imports.wbg.__wbg_texStorage2D_fbda848497f3674e = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.texStorage2D(arg1 >>> 0, arg2, arg3 >>> 0, arg4, arg5); - }; - imports.wbg.__wbg_texStorage3D_fd7a7ca30e7981d1 = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6) { - arg0.texStorage3D(arg1 >>> 0, arg2, arg3 >>> 0, arg4, arg5, arg6); - }; - imports.wbg.__wbg_texSubImage2D_061605071aad9d2c = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.texSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8 >>> 0, arg9); - }, arguments) }; - imports.wbg.__wbg_texSubImage2D_aa9a084093764796 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.texSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8 >>> 0, arg9); - }, arguments) }; - imports.wbg.__wbg_texSubImage2D_c7951ed97252bdff = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.texSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8 >>> 0, arg9); - }, arguments) }; - imports.wbg.__wbg_texSubImage2D_d52d1a0d3654c60b = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.texSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8 >>> 0, arg9); - }, arguments) }; - imports.wbg.__wbg_texSubImage2D_dd9cac68ad5fe0b6 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.texSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8 >>> 0, arg9); - }, arguments) }; - imports.wbg.__wbg_texSubImage2D_e6d34f5bb062e404 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.texSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8 >>> 0, arg9); - }, arguments) }; - imports.wbg.__wbg_texSubImage2D_f39ea52a2d4bd2f7 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.texSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8 >>> 0, arg9); - }, arguments) }; - imports.wbg.__wbg_texSubImage2D_fbdf91268228c757 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9) { - arg0.texSubImage2D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7 >>> 0, arg8 >>> 0, arg9); - }, arguments) }; - imports.wbg.__wbg_texSubImage3D_04731251d7cecc83 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, arg11) { - arg0.texSubImage3D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9 >>> 0, arg10 >>> 0, arg11); - }, arguments) }; - imports.wbg.__wbg_texSubImage3D_37f0045d16871670 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, arg11) { - arg0.texSubImage3D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9 >>> 0, arg10 >>> 0, arg11); - }, arguments) }; - imports.wbg.__wbg_texSubImage3D_3a871f6405d2f183 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, arg11) { - arg0.texSubImage3D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9 >>> 0, arg10 >>> 0, arg11); - }, arguments) }; - imports.wbg.__wbg_texSubImage3D_66acd67f56e3b214 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, arg11) { - arg0.texSubImage3D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9 >>> 0, arg10 >>> 0, arg11); - }, arguments) }; - imports.wbg.__wbg_texSubImage3D_a051de089266fa1b = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, arg11) { - arg0.texSubImage3D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9 >>> 0, arg10 >>> 0, arg11); - }, arguments) }; - imports.wbg.__wbg_texSubImage3D_b28c55f839bbec41 = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, arg11) { - arg0.texSubImage3D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9 >>> 0, arg10 >>> 0, arg11); - }, arguments) }; - imports.wbg.__wbg_texSubImage3D_f18bf091cd48774c = function() { return handleError(function (arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9, arg10, arg11) { - arg0.texSubImage3D(arg1 >>> 0, arg2, arg3, arg4, arg5, arg6, arg7, arg8, arg9 >>> 0, arg10 >>> 0, arg11); - }, arguments) }; - imports.wbg.__wbg_then_44b73946d2fb3e7d = function(arg0, arg1) { - const ret = arg0.then(arg1); - return ret; - }; - imports.wbg.__wbg_then_48b406749878a531 = function(arg0, arg1, arg2) { - const ret = arg0.then(arg1, arg2); - return ret; - }; - imports.wbg.__wbg_toBlob_b9c8aa2351e3ea86 = function() { return handleError(function (arg0, arg1) { - arg0.toBlob(arg1); - }, arguments) }; - imports.wbg.__wbg_transferFromImageBitmap_79b631bb9a257746 = function(arg0, arg1) { - arg0.transferFromImageBitmap(arg1); - }; - imports.wbg.__wbg_type_c0d5d83032e9858a = function(arg0) { - const ret = arg0.type; - return (__wbindgen_enum_GpuCompilationMessageType.indexOf(ret) + 1 || 4) - 1; - }; - imports.wbg.__wbg_uniform1f_21390b04609a9fa5 = function(arg0, arg1, arg2) { - arg0.uniform1f(arg1, arg2); - }; - imports.wbg.__wbg_uniform1f_dc009a0e7f7e5977 = function(arg0, arg1, arg2) { - arg0.uniform1f(arg1, arg2); - }; - imports.wbg.__wbg_uniform1i_5ddd9d8ccbd390bb = function(arg0, arg1, arg2) { - arg0.uniform1i(arg1, arg2); - }; - imports.wbg.__wbg_uniform1i_ed95b6129dce4d84 = function(arg0, arg1, arg2) { - arg0.uniform1i(arg1, arg2); - }; - imports.wbg.__wbg_uniform1ui_66e092b67a21c84d = function(arg0, arg1, arg2) { - arg0.uniform1ui(arg1, arg2 >>> 0); - }; - imports.wbg.__wbg_uniform2fv_656fce9525420996 = function(arg0, arg1, arg2, arg3) { - arg0.uniform2fv(arg1, getArrayF32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform2fv_d8bd2a36da7ce440 = function(arg0, arg1, arg2, arg3) { - arg0.uniform2fv(arg1, getArrayF32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform2iv_4d39fc5a26f03f55 = function(arg0, arg1, arg2, arg3) { - arg0.uniform2iv(arg1, getArrayI32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform2iv_e967139a28017a99 = function(arg0, arg1, arg2, arg3) { - arg0.uniform2iv(arg1, getArrayI32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform2uiv_4c340c9e8477bb07 = function(arg0, arg1, arg2, arg3) { - arg0.uniform2uiv(arg1, getArrayU32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform3fv_7d828b7c4c91138e = function(arg0, arg1, arg2, arg3) { - arg0.uniform3fv(arg1, getArrayF32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform3fv_8153c834ce667125 = function(arg0, arg1, arg2, arg3) { - arg0.uniform3fv(arg1, getArrayF32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform3iv_58662d914661aa10 = function(arg0, arg1, arg2, arg3) { - arg0.uniform3iv(arg1, getArrayI32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform3iv_f30d27ec224b4b24 = function(arg0, arg1, arg2, arg3) { - arg0.uniform3iv(arg1, getArrayI32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform3uiv_38673b825dc755f6 = function(arg0, arg1, arg2, arg3) { - arg0.uniform3uiv(arg1, getArrayU32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform4f_36b8f9be15064aa7 = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.uniform4f(arg1, arg2, arg3, arg4, arg5); - }; - imports.wbg.__wbg_uniform4f_f7ea07febf8b5108 = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.uniform4f(arg1, arg2, arg3, arg4, arg5); - }; - imports.wbg.__wbg_uniform4fv_8827081a7585145b = function(arg0, arg1, arg2, arg3) { - arg0.uniform4fv(arg1, getArrayF32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform4fv_c01fbc6c022abac3 = function(arg0, arg1, arg2, arg3) { - arg0.uniform4fv(arg1, getArrayF32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform4iv_7fe05be291899f06 = function(arg0, arg1, arg2, arg3) { - arg0.uniform4iv(arg1, getArrayI32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform4iv_84fdf80745e7ff26 = function(arg0, arg1, arg2, arg3) { - arg0.uniform4iv(arg1, getArrayI32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniform4uiv_9de55998fbfef236 = function(arg0, arg1, arg2, arg3) { - arg0.uniform4uiv(arg1, getArrayU32FromWasm0(arg2, arg3)); - }; - imports.wbg.__wbg_uniformBlockBinding_18117f4bda07115b = function(arg0, arg1, arg2, arg3) { - arg0.uniformBlockBinding(arg1, arg2 >>> 0, arg3 >>> 0); - }; - imports.wbg.__wbg_uniformMatrix2fv_98681e400347369c = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix2fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_uniformMatrix2fv_bc019eb4784a3b8c = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix2fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_uniformMatrix2x3fv_6421f8d6f7f4d144 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix2x3fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_uniformMatrix2x4fv_27d807767d7aadc6 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix2x4fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_uniformMatrix3fv_3d6ad3a1e0b0b5b6 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix3fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_uniformMatrix3fv_3df529aab93cf902 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix3fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_uniformMatrix3x2fv_79357317e9637d05 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix3x2fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_uniformMatrix3x4fv_9d1a88b5abfbd64b = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix3x4fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_uniformMatrix4fv_da94083874f202ad = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix4fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_uniformMatrix4fv_e87383507ae75670 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix4fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_uniformMatrix4x2fv_aa507d918a0b5a62 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix4x2fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_uniformMatrix4x3fv_6712c7a3b4276fb4 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.uniformMatrix4x3fv(arg1, arg2 !== 0, getArrayF32FromWasm0(arg3, arg4)); - }; - imports.wbg.__wbg_unmap_8c2e8131b2aaa844 = function(arg0) { - arg0.unmap(); - }; - imports.wbg.__wbg_unobserve_02f53d1ca2d1d801 = function(arg0, arg1) { - arg0.unobserve(arg1); - }; - imports.wbg.__wbg_usage_13caa02888040e9f = function(arg0) { - const ret = arg0.usage; - return ret; - }; - imports.wbg.__wbg_useProgram_473bf913989b6089 = function(arg0, arg1) { - arg0.useProgram(arg1); - }; - imports.wbg.__wbg_useProgram_9b2660f7bb210471 = function(arg0, arg1) { - arg0.useProgram(arg1); - }; - imports.wbg.__wbg_userAgentData_0fcb47db996297d1 = function(arg0) { - const ret = arg0.userAgentData; - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_userAgent_12e9d8e62297563f = function() { return handleError(function (arg0, arg1) { - const ret = arg1.userAgent; - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }, arguments) }; - imports.wbg.__wbg_valueOf_39a18758c25e8b95 = function(arg0) { - const ret = arg0.valueOf(); - return ret; - }; - imports.wbg.__wbg_value_f992786d714424bd = function(arg0) { - const ret = arg0.value; - return ret; - }; - imports.wbg.__wbg_versions_c01dfd4722a88165 = function(arg0) { - const ret = arg0.versions; - return ret; - }; - imports.wbg.__wbg_vertexAttribDivisorANGLE_11e909d332960413 = function(arg0, arg1, arg2) { - arg0.vertexAttribDivisorANGLE(arg1 >>> 0, arg2 >>> 0); - }; - imports.wbg.__wbg_vertexAttribDivisor_4d361d77ffb6d3ff = function(arg0, arg1, arg2) { - arg0.vertexAttribDivisor(arg1 >>> 0, arg2 >>> 0); - }; - imports.wbg.__wbg_vertexAttribIPointer_d0c67543348c90ce = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.vertexAttribIPointer(arg1 >>> 0, arg2, arg3 >>> 0, arg4, arg5); - }; - imports.wbg.__wbg_vertexAttribPointer_550dc34903e3d1ea = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6) { - arg0.vertexAttribPointer(arg1 >>> 0, arg2, arg3 >>> 0, arg4 !== 0, arg5, arg6); - }; - imports.wbg.__wbg_vertexAttribPointer_7a2a506cdbe3aebc = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6) { - arg0.vertexAttribPointer(arg1 >>> 0, arg2, arg3 >>> 0, arg4 !== 0, arg5, arg6); - }; - imports.wbg.__wbg_videoHeight_3a43327a766c1f03 = function(arg0) { - const ret = arg0.videoHeight; - return ret; - }; - imports.wbg.__wbg_videoWidth_4b400cf6f4744a4d = function(arg0) { - const ret = arg0.videoWidth; - return ret; - }; - imports.wbg.__wbg_viewport_a1b4d71297ba89af = function(arg0, arg1, arg2, arg3, arg4) { - arg0.viewport(arg1, arg2, arg3, arg4); - }; - imports.wbg.__wbg_viewport_e615e98f676f2d39 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.viewport(arg1, arg2, arg3, arg4); - }; - imports.wbg.__wbg_visibilityState_f3cc18a6f3831137 = function(arg0) { - const ret = arg0.visibilityState; - return (__wbindgen_enum_VisibilityState.indexOf(ret) + 1 || 3) - 1; - }; - imports.wbg.__wbg_webkitExitFullscreen_5386b88af2d95207 = function(arg0) { - arg0.webkitExitFullscreen(); - }; - imports.wbg.__wbg_webkitFullscreenElement_1cbc91608b1fb2d6 = function(arg0) { - const ret = arg0.webkitFullscreenElement; - return isLikeNone(ret) ? 0 : addToExternrefTable0(ret); - }; - imports.wbg.__wbg_webkitRequestFullscreen_0c42a6ea3a879bd0 = function(arg0) { - arg0.webkitRequestFullscreen(); - }; - imports.wbg.__wbg_width_4f334fc47ef03de1 = function(arg0) { - const ret = arg0.width; - return ret; - }; - imports.wbg.__wbg_width_5dde457d606ba683 = function(arg0) { - const ret = arg0.width; - return ret; - }; - imports.wbg.__wbg_width_8fe4e8f77479c2a6 = function(arg0) { - const ret = arg0.width; - return ret; - }; - imports.wbg.__wbg_width_b0c1d9f437a95799 = function(arg0) { - const ret = arg0.width; - return ret; - }; - imports.wbg.__wbg_width_cdaf02311c1621d1 = function(arg0) { - const ret = arg0.width; - return ret; - }; - imports.wbg.__wbg_width_f54c7178d3c78f16 = function(arg0) { - const ret = arg0.width; - return ret; - }; - imports.wbg.__wbg_writeBuffer_5ca4981365eb5ac0 = function(arg0, arg1, arg2, arg3, arg4, arg5) { - arg0.writeBuffer(arg1, arg2, arg3, arg4, arg5); - }; - imports.wbg.__wbg_writeTexture_246118eb2f5a1592 = function(arg0, arg1, arg2, arg3, arg4) { - arg0.writeTexture(arg1, arg2, arg3, arg4); - }; - imports.wbg.__wbg_x_2bc3f61e11d9f2e1 = function(arg0) { - const ret = arg0.x; - return ret; - }; - imports.wbg.__wbg_y_be10a4f665290032 = function(arg0) { - const ret = arg0.y; - return ret; - }; - imports.wbg.__wbindgen_boolean_get = function(arg0) { - const v = arg0; - const ret = typeof(v) === 'boolean' ? (v ? 1 : 0) : 2; - return ret; - }; - imports.wbg.__wbindgen_cb_drop = function(arg0) { - const obj = arg0.original; - if (obj.cnt-- == 1) { - obj.a = 0; - return true; - } - const ret = false; - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper68814 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_40); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper69660 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_43); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper71079 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_43); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper73257 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_43); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper73259 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_43); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper73261 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_43); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper73263 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_43); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper73265 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_56); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper73269 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_43); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper73271 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_43); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper73273 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_40); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper73275 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_65); - return ret; - }; - imports.wbg.__wbindgen_closure_wrapper73278 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 7969, __wbg_adapter_43); - return ret; - }; - imports.wbg.__wbindgen_debug_string = function(arg0, arg1) { - const ret = debugString(arg1); - const ptr1 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - const len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbindgen_error_new = function(arg0, arg1) { - const ret = new Error(getStringFromWasm0(arg0, arg1)); - return ret; - }; - imports.wbg.__wbindgen_init_externref_table = function() { - const table = wasm.__wbindgen_export_1; - const offset = table.grow(4); - table.set(0, undefined); - table.set(offset + 0, undefined); - table.set(offset + 1, null); - table.set(offset + 2, true); - table.set(offset + 3, false); - ; - }; - imports.wbg.__wbindgen_is_function = function(arg0) { - const ret = typeof(arg0) === 'function'; - return ret; - }; - imports.wbg.__wbindgen_is_null = function(arg0) { - const ret = arg0 === null; - return ret; - }; - imports.wbg.__wbindgen_is_object = function(arg0) { - const val = arg0; - const ret = typeof(val) === 'object' && val !== null; - return ret; - }; - imports.wbg.__wbindgen_is_string = function(arg0) { - const ret = typeof(arg0) === 'string'; - return ret; - }; - imports.wbg.__wbindgen_is_undefined = function(arg0) { - const ret = arg0 === undefined; - return ret; - }; - imports.wbg.__wbindgen_jsval_loose_eq = function(arg0, arg1) { - const ret = arg0 == arg1; - return ret; - }; - imports.wbg.__wbindgen_memory = function() { - const ret = wasm.memory; - return ret; - }; - imports.wbg.__wbindgen_number_get = function(arg0, arg1) { - const obj = arg1; - const ret = typeof(obj) === 'number' ? obj : undefined; - getDataViewMemory0().setFloat64(arg0 + 8 * 1, isLikeNone(ret) ? 0 : ret, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, !isLikeNone(ret), true); - }; - imports.wbg.__wbindgen_number_new = function(arg0) { - const ret = arg0; - return ret; - }; - imports.wbg.__wbindgen_string_get = function(arg0, arg1) { - const obj = arg1; - const ret = typeof(obj) === 'string' ? obj : undefined; - var ptr1 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc); - var len1 = WASM_VECTOR_LEN; - getDataViewMemory0().setInt32(arg0 + 4 * 1, len1, true); - getDataViewMemory0().setInt32(arg0 + 4 * 0, ptr1, true); - }; - imports.wbg.__wbindgen_string_new = function(arg0, arg1) { - const ret = getStringFromWasm0(arg0, arg1); - return ret; - }; - imports.wbg.__wbindgen_throw = function(arg0, arg1) { - throw new Error(getStringFromWasm0(arg0, arg1)); - }; - imports['./game_api.js'] = __wbg_star0; - - return imports; -} - -function __wbg_init_memory(imports, memory) { - -} - -function __wbg_finalize_init(instance, module) { - wasm = instance.exports; - __wbg_init.__wbindgen_wasm_module = module; - cachedDataViewMemory0 = null; - cachedFloat32ArrayMemory0 = null; - cachedInt32ArrayMemory0 = null; - cachedUint32ArrayMemory0 = null; - cachedUint8ArrayMemory0 = null; - cachedUint8ClampedArrayMemory0 = null; - - - wasm.__wbindgen_start(); - return wasm; -} - -function initSync(module) { - if (wasm !== undefined) return wasm; - - - if (typeof module !== 'undefined') { - if (Object.getPrototypeOf(module) === Object.prototype) { - ({module} = module) - } else { - console.warn('using deprecated parameters for `initSync()`; pass a single object instead') - } - } - - const imports = __wbg_get_imports(); - - __wbg_init_memory(imports); - - if (!(module instanceof WebAssembly.Module)) { - module = new WebAssembly.Module(module); - } - - const instance = new WebAssembly.Instance(module, imports); - - return __wbg_finalize_init(instance, module); -} - -async function __wbg_init(module_or_path) { - if (wasm !== undefined) return wasm; - - - if (typeof module_or_path !== 'undefined') { - if (Object.getPrototypeOf(module_or_path) === Object.prototype) { - ({module_or_path} = module_or_path) - } else { - console.warn('using deprecated parameters for the initialization function; pass a single object instead') - } - } - - if (typeof module_or_path === 'undefined') { - module_or_path = new URL('monster_view_bg.wasm', import.meta.url); - } - const imports = __wbg_get_imports(); - - if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) { - module_or_path = fetch(module_or_path); - } - - __wbg_init_memory(imports); - - const { instance, module } = await __wbg_load(await module_or_path, imports); - - return __wbg_finalize_init(instance, module); -} - -export { initSync }; -export default __wbg_init; diff --git a/public/or-wasm/monster_view_bg.wasm.d.ts b/public/or-wasm/monster_view_bg.wasm.d.ts deleted file mode 100644 index d0d079d..0000000 --- a/public/or-wasm/monster_view_bg.wasm.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* tslint:disable */ -/* eslint-disable */ -export const memory: WebAssembly.Memory; -export const main: (a: number, b: number) => number; -export const __externref_table_alloc: () => number; -export const __wbindgen_export_1: WebAssembly.Table; -export const __wbindgen_exn_store: (a: number) => void; -export const __wbindgen_malloc: (a: number, b: number) => number; -export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number; -export const __wbindgen_free: (a: number, b: number, c: number) => void; -export const __wbindgen_export_6: WebAssembly.Table; -export const _dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h3d0cb53df6af5394: (a: number, b: number) => void; -export const closure8019_externref_shim: (a: number, b: number, c: any) => void; -export const _dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__hf83f95ed8b47fb63: (a: number, b: number, c: number) => void; -export const closure8362_externref_shim: (a: number, b: number, c: any, d: any) => void; -export const __wbindgen_start: () => void; diff --git a/src/api/constants.ts b/src/api/constants.ts index c02b930..e6af0e5 100644 --- a/src/api/constants.ts +++ b/src/api/constants.ts @@ -16,4 +16,8 @@ export const DISTRIBUTION_TABLE_OBJECT_ID = "0x8c74a0c8b828ef4c37909cee2c8c2e127 export const DRIVE_MINTER_OBJECT_ID = "0x47a194a52f050829863fdfb3114bd93cfbd2ec11a1a995453aff6b8ef9564abf"; // Derived constant for program type string, often used in filters -export const PROGRAM_TYPE_STRING = `${DAEMON_PACKAGE_ID}::monster::Monster`; \ No newline at end of file +export const PROGRAM_TYPE_STRING = `${DAEMON_PACKAGE_ID}::monster::Monster`; + +// WASM Configuration +export const WASM_ENGINE_URL = import.meta.env.VITE_WASM_ENGINE_URL; +export const WASM_BINDINGS_URL = import.meta.env.VITE_WASM_BINDINGS_URL; \ No newline at end of file diff --git a/src/components/DrivesAndPrograms.tsx b/src/components/DrivesAndPrograms.tsx index 6f4fc4d..48a52ee 100644 --- a/src/components/DrivesAndPrograms.tsx +++ b/src/components/DrivesAndPrograms.tsx @@ -12,7 +12,9 @@ import { PROGRAM_REGISTRY_OBJECT_ID, PROGRAM_MINTER_OBJECT_ID, DISTRIBUTION_TABLE_OBJECT_ID, - DRIVE_MINTER_OBJECT_ID + DRIVE_MINTER_OBJECT_ID, + WASM_ENGINE_URL, + WASM_BINDINGS_URL } from '../api/constants'; interface SignAndExecuteMethodHolder { @@ -494,8 +496,8 @@ export default function DrivesAndPrograms() {
diff --git a/src/components/ProgramDatabase.tsx b/src/components/ProgramDatabase.tsx index db1de45..33c0887 100644 --- a/src/components/ProgramDatabase.tsx +++ b/src/components/ProgramDatabase.tsx @@ -10,7 +10,7 @@ import type { import StatsList from "./StatsList"; import { useWallet } from "./Wallet/WalletContext"; import { SuiClient, getFullnodeUrl } from "@mysten/sui/client"; -import { PROGRAM_TYPE_STRING } from "../api/constants"; +import { PROGRAM_TYPE_STRING, WASM_ENGINE_URL, WASM_BINDINGS_URL } from "../api/constants"; // Enum to match Rust-side ProgramPartName for WASM enum ProgramPartName { @@ -1126,8 +1126,8 @@ export default function ProgramDatabase() { diff --git a/src/components/ProgramEventDemo.tsx b/src/components/ProgramEventDemo.tsx index 4643993..95a430b 100644 --- a/src/components/ProgramEventDemo.tsx +++ b/src/components/ProgramEventDemo.tsx @@ -2,6 +2,7 @@ import { createSignal, Show, onMount } from "solid-js"; import { WasmIframeWrapper } from "./WasmIframeWrapper"; import type { WasmCanvasBridgeInterface } from "./hooks/createWasmCanvas"; import type { EventPayload } from "../api/game/events"; +import { WASM_ENGINE_URL, WASM_BINDINGS_URL } from "~/api/constants"; // Enum to match Rust-side ProgramPartName enum ProgramPartName { @@ -180,8 +181,8 @@ export default function ProgramEventDemo() { diff --git a/src/utils/assetPreloader.ts b/src/utils/assetPreloader.ts index 4b4d0e6..df3f7ca 100644 --- a/src/utils/assetPreloader.ts +++ b/src/utils/assetPreloader.ts @@ -1,3 +1,5 @@ +import { WASM_ENGINE_URL, WASM_BINDINGS_URL } from '~/api/constants'; + export interface AssetStatus { message: string; error?: boolean; @@ -6,9 +8,9 @@ export interface AssetStatus { type StatusCallback = (status: AssetStatus) => void; const CACHE_NAME = 'daemon-assets-v1'; -const WASM_URL = 'https://engine.daemon.computer/monster_view_bg.wasm'; +const WASM_URL = WASM_ENGINE_URL; const WASM_ETAG_STORAGE_KEY = 'wasm-monster_view_bg-etag'; -const JS_BINDINGS_URL = '/or-wasm/monster_view.js'; +const JS_BINDINGS_URL = WASM_BINDINGS_URL; const JS_BINDINGS_ETAG_STORAGE_KEY = 'js-monster_view-etag'; interface AssetDefinition { @@ -20,7 +22,7 @@ interface AssetDefinition { // Define assets to preload // Paths should be relative to the public folder or absolute URLs const PUBLIC_ASSETS_TO_PRELOAD: AssetDefinition[] = [ - { url: '/or-wasm/monster_view.js', name: 'WASM Bindings Script', type: 'script' }, + { url: WASM_BINDINGS_URL, name: 'WASM Bindings Script', type: 'script' }, { url: '/preload-assets.js', name: 'Initial Asset Preloader', type: 'script' }, { url: '/model-worker.js', name: 'Model Worker', type: 'script' }, { url: '/wasm_host.html', name: 'WASM Host Page', type: 'html' }, From 2b781703c47ca7f998e361c50e513268924c40b8 Mon Sep 17 00:00:00 2001 From: Francisco Casiano Date: Tue, 8 Jul 2025 13:24:54 -0400 Subject: [PATCH 04/16] Ran lint fix --- src/App.tsx | 5 +- src/components/Desktop/Desktop.tsx | 2 +- src/components/Desktop/DesktopGrid.tsx | 2 +- src/components/Desktop/DesktopIcon.tsx | 2 +- src/components/Desktop/Taskbar.tsx | 10 +- src/components/DrivesAndPrograms.tsx | 13 +- src/components/Icons/ArrowsPointingIn.tsx | 5 +- src/components/Icons/ArrowsPointingOut.tsx | 5 +- src/components/Icons/Minus.tsx | 5 +- src/components/Icons/X.tsx | 5 +- .../ProgramWindow/ProgramWindow.tsx | 11 +- .../ProgramWindow/programContext.tsx | 7 +- src/components/SplashScreen.tsx | 326 ++++++++++-------- src/components/StatsList.tsx | 10 +- src/components/Theme/ThemeContext.tsx | 3 +- .../WGPUNotification/WGPUNotificationApp.tsx | 84 ++--- .../WGPUNotificationWindow.tsx | 5 +- src/components/Wallet/WalletApp.tsx | 5 +- src/components/Wallet/WalletContext.tsx | 5 +- src/components/WasmIframeWrapper.tsx | 11 +- src/components/hooks/createWasmCanvas.ts | 3 +- 21 files changed, 269 insertions(+), 255 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 3d68b55..5281454 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import "./98.css"; +import type { + Component} from "solid-js"; import { - Component, For, onMount, createSignal, @@ -228,7 +229,7 @@ export default function App() { when={!isLoading()} fallback={} > -
+
diff --git a/src/components/Desktop/Desktop.tsx b/src/components/Desktop/Desktop.tsx index 7254f02..8c42af3 100644 --- a/src/components/Desktop/Desktop.tsx +++ b/src/components/Desktop/Desktop.tsx @@ -1,4 +1,4 @@ -import { JSXElement } from 'solid-js'; +import type { JSXElement } from 'solid-js'; import Taskbar from '../Desktop/Taskbar'; import { usePrograms } from '../ProgramWindow/programContext'; diff --git a/src/components/Desktop/DesktopGrid.tsx b/src/components/Desktop/DesktopGrid.tsx index bef866e..bd0feb4 100644 --- a/src/components/Desktop/DesktopGrid.tsx +++ b/src/components/Desktop/DesktopGrid.tsx @@ -1,4 +1,4 @@ -import { JSXElement } from 'solid-js'; +import type { JSXElement } from 'solid-js'; interface DesktopGridProps { children: JSXElement; diff --git a/src/components/Desktop/DesktopIcon.tsx b/src/components/Desktop/DesktopIcon.tsx index 2b04309..7233fe2 100644 --- a/src/components/Desktop/DesktopIcon.tsx +++ b/src/components/Desktop/DesktopIcon.tsx @@ -1,4 +1,4 @@ -import { Component } from "solid-js"; +import type { Component } from "solid-js"; interface DesktopIconProps { appName: string; diff --git a/src/components/Desktop/Taskbar.tsx b/src/components/Desktop/Taskbar.tsx index d4920d9..b0586f2 100644 --- a/src/components/Desktop/Taskbar.tsx +++ b/src/components/Desktop/Taskbar.tsx @@ -1,5 +1,5 @@ import { usePrograms } from '../ProgramWindow/programContext'; -import { createEffect, createSignal, onCleanup, onMount, untrack } from 'solid-js'; +import { createEffect, createSignal, onCleanup, onMount, untrack, For } from 'solid-js'; import { WalletProvider } from '../Wallet/WalletContext'; import WalletApp from '../Wallet/WalletApp'; @@ -93,9 +93,7 @@ export default function Taskbar() { }; // Example "3/11/2025" - const formatDate = (date: Date) => { - return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`; - }; + const formatDate = (date: Date) => `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`; // Update the time every minute onMount(() => { @@ -113,7 +111,7 @@ export default function Taskbar() {
{/* Programs section - left side */}
- {activePrograms.map((program) => ( + {(program) => ( - ))} + )}
{/* System tray - right side */} diff --git a/src/components/DrivesAndPrograms.tsx b/src/components/DrivesAndPrograms.tsx index 48a52ee..54bd1f0 100644 --- a/src/components/DrivesAndPrograms.tsx +++ b/src/components/DrivesAndPrograms.tsx @@ -1,7 +1,8 @@ import { createSignal, createEffect, Show, onMount, onCleanup } from 'solid-js'; import { useWallet } from './Wallet/WalletContext'; import { Transaction } from '@mysten/sui/transactions'; -import { SuiClient, getFullnodeUrl, SuiTransactionBlockResponse, SuiTransactionBlockResponseOptions } from '@mysten/sui/client'; +import type { SuiTransactionBlockResponse, SuiTransactionBlockResponseOptions } from '@mysten/sui/client'; +import { SuiClient, getFullnodeUrl } from '@mysten/sui/client'; import { MIST_PER_SUI } from '@mysten/sui/utils'; import { WasmIframeWrapper } from './WasmIframeWrapper'; import type { WasmCanvasBridgeInterface } from './hooks/createWasmCanvas'; @@ -119,10 +120,10 @@ export default function DrivesAndPrograms() { sendDefaultDriveModel(); }; - const getSuiClient = () => { + const getSuiClient = () => // state.network is guaranteed to be a valid NetworkType ('mainnet' | 'testnet') - return new SuiClient({ url: getFullnodeUrl(state.network) }); - }; + new SuiClient({ url: getFullnodeUrl(state.network) }) + ; const canBuyDrive = () => { // Check if wallet is connected @@ -513,7 +514,7 @@ export default function DrivesAndPrograms() { {/* Buy Button */}
diff --git a/src/components/ProgramWindow/programContext.tsx b/src/components/ProgramWindow/programContext.tsx index b718f0a..7d67311 100644 --- a/src/components/ProgramWindow/programContext.tsx +++ b/src/components/ProgramWindow/programContext.tsx @@ -1,4 +1,5 @@ -import { createContext, JSXElement, useContext, Component } from "solid-js"; +import type { JSXElement, Component } from "solid-js"; +import { createContext, useContext } from "solid-js"; import { createStore, produce } from "solid-js/store"; const programContextModuleId = Math.random().toString(36).substring(7); @@ -42,9 +43,7 @@ export function ProgramProvider(props: { children: JSXElement; }) { // console.log(`ProgramProvider rendering (ID: ${programContextModuleId}), providing context:`, ProgramContext); - const isRunning = (label: string) => { - return programs.some(p => p.label === label); - }; + const isRunning = (label: string) => programs.some(p => p.label === label); const normalizeZIndices = (currentPrograms: RunningProgram[]) => { const nonMinimized = currentPrograms diff --git a/src/components/SplashScreen.tsx b/src/components/SplashScreen.tsx index 41d0c16..7056210 100644 --- a/src/components/SplashScreen.tsx +++ b/src/components/SplashScreen.tsx @@ -1,169 +1,195 @@ import { createSignal, onMount, Show, For, createMemo } from 'solid-js'; import type { Component } from 'solid-js'; -import styles from './SplashScreen.module.css'; -import { preloadAllAssets, type AssetStatus } from '../utils/assetPreloader'; +import styles from '~/components/SplashScreen.module.css'; +import { preloadAllAssets, type AssetStatus } from '~/utils/assetPreloader'; const ASCII_LOGO = [ - "██████╗ █████╗ ███████╗███╗ ███╗ ██████╗ ███╗ ██╗", - "██╔══██╗██╔══██╗██╔════╝████╗ ████║██╔═══██╗████╗ ██║", - "██║ ██║███████║█████╗ ██╔████╔██║██║ ██║██╔██╗ ██║", - "██║ ██║██╔══██║██╔══╝ ██║╚██╔╝██║██║ ██║██║╚██╗██║", - "██████╔╝██║ ██║███████╗██║ ╚═╝ ██║╚██████╔╝██║ ╚████║", - "╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝" + '██████╗ █████╗ ███████╗███╗ ███╗ ██████╗ ███╗ ██╗', + '██╔══██╗██╔══██╗██╔════╝████╗ ████║██╔═══██╗████╗ ██║', + '██║ ██║███████║█████╗ ██╔████╔██║██║ ██║██╔██╗ ██║', + '██║ ██║██╔══██║██╔══╝ ██║╚██╔╝██║██║ ██║██║╚██╗██║', + '██████╔╝██║ ██║███████╗██║ ╚═╝ ██║╚██████╔╝██║ ╚████║', + '╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝', ]; interface SplashScreenProps { - onLoaded: () => void; + onLoaded: () => void; } interface DisplayMessage { - id: number; - text: string; - timestamp: number; - isError?: boolean; + id: number; + text: string; + timestamp: number; + isError?: boolean; } const MAX_VISIBLE_MESSAGES = 7; const SplashScreen: Component = (props) => { - const [isVisible, setIsVisible] = createSignal(true); - const [fadeOut, setFadeOut] = createSignal(false); - const [statusMessages, setStatusMessages] = createSignal([]); - const [revealedLines, setRevealedLines] = createSignal(new Array(ASCII_LOGO.length).fill(false)); - - const visibleItemsData = () => { - const items = statusMessages().slice(-MAX_VISIBLE_MESSAGES); - return { items: items, size: items.length }; - }; - - onMount(() => { - const initialMessages: DisplayMessage[] = [ - { id: Date.now() + 1, text: 'System Booting...', timestamp: Date.now() }, - { id: Date.now() + 2, text: 'Initializing Daemon OS Kernel...', timestamp: Date.now() }, - ]; - setStatusMessages(initialMessages); - - let currentLineIndex = 0; - const lineRevealInterval = setInterval(() => { - if (currentLineIndex < revealedLines().length) { - setRevealedLines(prev => { - const next = [...prev]; - next[currentLineIndex] = true; - return next; - }); - currentLineIndex++; - } else { - clearInterval(lineRevealInterval); - } - }, 300); - - preloadAllAssets((status: AssetStatus) => { - setStatusMessages(prev => [ - ...prev, - { - id: Date.now() + prev.length, - text: status.message, - timestamp: Date.now(), - isError: status.error - } - ]); - }).then(() => { - const allLinesRevealed = revealedLines().every(line => line); - const timeToWait = allLinesRevealed ? 1500 : (revealedLines().length - currentLineIndex) * 300 + 1500; - - setStatusMessages(prev => [ - ...prev, - { id: Date.now() + prev.length, text: 'System Online. Welcome to Daemon OS.', timestamp: Date.now() } - ]); - - setTimeout(() => { - setFadeOut(true); - setTimeout(() => { - props.onLoaded(); - setIsVisible(false); - }, 1000); - }, timeToWait); - }).catch(error => { - console.error("Critical asset preloading failed:", error); - setStatusMessages(prev => [ - ...prev, - { id: Date.now(), text: `CRITICAL ERROR: ${error.message}. Attempting to continue...`, timestamp: Date.now(), isError: true } - ]); - setTimeout(() => { - setFadeOut(true); - setTimeout(() => { - props.onLoaded(); - setIsVisible(false); - }, 1000); - }, 1500); + const [isVisible, setIsVisible] = createSignal(true); + const [fadeOut, setFadeOut] = createSignal(false); + const [statusMessages, setStatusMessages] = createSignal([]); + const [revealedLines, setRevealedLines] = createSignal( + new Array(ASCII_LOGO.length).fill(false), + ); + + const visibleItemsData = () => { + const items = statusMessages().slice(-MAX_VISIBLE_MESSAGES); + return { items: items, size: items.length }; + }; + + onMount(() => { + const initialMessages: DisplayMessage[] = [ + { id: Date.now() + 1, text: 'System Booting...', timestamp: Date.now() }, + { id: Date.now() + 2, text: 'Initializing Daemon OS Kernel...', timestamp: Date.now() }, + ]; + setStatusMessages(initialMessages); + + let currentLineIndex = 0; + const lineRevealInterval = setInterval(() => { + if (currentLineIndex < revealedLines().length) { + setRevealedLines((prev) => { + const next = [...prev]; + next[currentLineIndex] = true; + return next; }); - }); - - const LogoDisplay = () => ( -
- {ASCII_LOGO.map((line, index) => ( -
- {line} -
- ))} + currentLineIndex++; + } else { + clearInterval(lineRevealInterval); + } + }, 300); + + preloadAllAssets((status: AssetStatus) => { + setStatusMessages((prev) => [ + ...prev, + { + id: Date.now() + prev.length, + text: status.message, + timestamp: Date.now(), + isError: status.error, + }, + ]); + }) + .then(() => { + const allLinesRevealed = revealedLines().every((line) => line); + const timeToWait = allLinesRevealed + ? 1500 + : (revealedLines().length - currentLineIndex) * 300 + 1500; + + setStatusMessages((prev) => [ + ...prev, + { + id: Date.now() + prev.length, + text: 'System Online. Welcome to Daemon OS.', + timestamp: Date.now(), + }, + ]); + + setTimeout(() => { + setFadeOut(true); + setTimeout(() => { + props.onLoaded(); + setIsVisible(false); + }, 1000); + }, timeToWait); + }) + .catch((error) => { + console.error('Critical asset preloading failed:', error); + setStatusMessages((prev) => [ + ...prev, + { + id: Date.now(), + text: `CRITICAL ERROR: ${error.message}. Attempting to continue...`, + timestamp: Date.now(), + isError: true, + }, + ]); + setTimeout(() => { + setFadeOut(true); + setTimeout(() => { + props.onLoaded(); + setIsVisible(false); + }, 1000); + }, 1500); + }); + }); + + const LogoDisplay = () => ( +
+ {ASCII_LOGO.map((line, index) => ( +
+ {line} +
+ ))} +
+ ); + + return ( + +
+
+ +

Daemon OS v0.1

+
+ +
+
+ + {(message, indexSignal) => { + const itemData = createMemo(() => { + const displayIndex = indexSignal(); + const totalDisplayed = visibleItemsData().size; + let calculatedAlpha = 1.0; + if (totalDisplayed > 0) { + const baseRatio = (displayIndex + 1) / totalDisplayed; + calculatedAlpha = Math.max(0.05, Math.min(1, Math.pow(baseRatio, 1.5))); + } + const transformOffset = + totalDisplayed > 0 ? totalDisplayed - 1 - displayIndex : 0; + return { + alpha: calculatedAlpha, + position: transformOffset, + }; + }); + + return ( +
+ + > + + {message.text} +
+ ); + }} + +
- ); - - return ( - -
-
- -

Daemon OS v0.1

-
- -
-
- - {(message, indexSignal) => { - const itemData = createMemo(() => { - const displayIndex = indexSignal(); - const totalDisplayed = visibleItemsData().size; - let calculatedAlpha = 1.0; - if (totalDisplayed > 0) { - const baseRatio = (displayIndex + 1) / totalDisplayed; - calculatedAlpha = Math.max(0.05, Math.min(1, Math.pow(baseRatio, 1.5))); - } - const transformOffset = totalDisplayed > 0 ? totalDisplayed - 1 - displayIndex : 0; - return { - alpha: calculatedAlpha, - position: transformOffset, - }; - }); - - return ( -
- - > - - - {message.text} - -
- ); - }} - -
-
-
- - ); +
+ + ); }; -export default SplashScreen; \ No newline at end of file +export default SplashScreen; diff --git a/src/components/StatsList.tsx b/src/components/StatsList.tsx index 277ee06..4bb7b30 100644 --- a/src/components/StatsList.tsx +++ b/src/components/StatsList.tsx @@ -1,18 +1,16 @@ -import { Component } from 'solid-js'; +import type { Component } from 'solid-js'; interface StatRowProps { label: string; value: string | number; } -const StatRow: Component = (props) => { - return ( +const StatRow: Component = (props) => (
  • {props.label} {props.value}
    • ); -}; interface StatsListProps { program: { @@ -24,8 +22,7 @@ interface StatsListProps { }; } -const StatsList: Component = (props) => { - return ( +const StatsList: Component = (props) => (
    Stats
      @@ -48,6 +45,5 @@ const StatsList: Component = (props) => {
    ); -}; export default StatsList; \ No newline at end of file diff --git a/src/components/Theme/ThemeContext.tsx b/src/components/Theme/ThemeContext.tsx index 5877e52..f321ab1 100644 --- a/src/components/Theme/ThemeContext.tsx +++ b/src/components/Theme/ThemeContext.tsx @@ -1,4 +1,5 @@ -import { createContext, createSignal, createEffect, useContext, JSX } from 'solid-js'; +import type { JSX } from 'solid-js'; +import { createContext, createSignal, createEffect, useContext } from 'solid-js'; export type ThemeOption = 'daemon-os'; diff --git a/src/components/WGPUNotification/WGPUNotificationApp.tsx b/src/components/WGPUNotification/WGPUNotificationApp.tsx index 81179e8..ef5c5b2 100644 --- a/src/components/WGPUNotification/WGPUNotificationApp.tsx +++ b/src/components/WGPUNotification/WGPUNotificationApp.tsx @@ -1,4 +1,4 @@ -import { createSignal, onMount } from "solid-js"; +import { createSignal, onMount, Show } from "solid-js"; // WebGPU type definitions declare global { @@ -131,15 +131,7 @@ export default function WGPUNotificationApp() {
    - {isChecking() ? ( -
    -
    -
    -

    Checking WebGPU support...

    -
    -
    - ) : ( -
    +
    - {wgpuSupport().isSupported ? ( - - - ) : ( - }> - - )} +

    - {wgpuSupport().isSupported ? ( -
    -

    - Your browser supports WebGPU! The 3D experience will work - correctly. -

    - {adapterInfo() && ( -
    -

    GPU Information:

    -

    - Vendor: {adapterInfo()!.vendor} -

    -

    - Device: {adapterInfo()!.device} -

    -

    - Architecture:{" "} - {adapterInfo()!.architecture} -

    -
    - )} -
    - ) : ( -
    +

    Your browser does not support WebGPU, which is required for the 3D experience. @@ -225,8 +190,25 @@ export default function WGPUNotificationApp() {

  • Restart your browser
  • Ensure you have a compatible GPU and drivers
    • -
    - )} +
    }>
    +

    + Your browser supports WebGPU! The 3D experience will work + correctly. +

    +
    +

    GPU Information:

    +

    + Vendor: {adapterInfo()!.vendor} +

    +

    + Device: {adapterInfo()!.device} +

    +

    + Architecture:{" "} + {adapterInfo()!.architecture} +

    +
    +
    @@ -250,8 +232,12 @@ export default function WGPUNotificationApp() { block WebGPU access.

    -
    - )} +
    }>
    +
    +
    +

    Checking WebGPU support...

    +
    +
    diff --git a/src/components/WGPUNotification/WGPUNotificationWindow.tsx b/src/components/WGPUNotification/WGPUNotificationWindow.tsx index 24feb8e..2b526eb 100644 --- a/src/components/WGPUNotification/WGPUNotificationWindow.tsx +++ b/src/components/WGPUNotification/WGPUNotificationWindow.tsx @@ -1,4 +1,5 @@ -import { createEffect, createSignal, JSXElement, onCleanup, onMount, Show } from 'solid-js'; +import type { JSXElement} from 'solid-js'; +import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'; import interact from 'interactjs'; import { usePrograms, TASKBAR_HEIGHT_PX } from '../ProgramWindow/programContext'; import X from '../Icons/X'; @@ -199,7 +200,7 @@ export default function WGPUNotificationWindow(props: WGPUNotificationWindowProp aria-label="Close" onClick={(e) => { e.stopPropagation(); handleClose(); }} > - +
    diff --git a/src/components/Wallet/WalletApp.tsx b/src/components/Wallet/WalletApp.tsx index 80c7cd0..d324170 100644 --- a/src/components/Wallet/WalletApp.tsx +++ b/src/components/Wallet/WalletApp.tsx @@ -1,7 +1,8 @@ import { createSignal, Show, For, onMount } from 'solid-js'; -import { useWallet, NetworkType, TransactionHistoryItem } from './WalletContext'; +import type { NetworkType, TransactionHistoryItem } from './WalletContext'; +import { useWallet } from './WalletContext'; import { truncateAddress } from './utils/format'; -import { LaunchProgramEvent } from '../../App'; +import type { LaunchProgramEvent } from '../../App'; import { DAEMON_PACKAGE_ID } from '../../api/constants'; function formatTimestamp(timestampMs: string | undefined): string { diff --git a/src/components/Wallet/WalletContext.tsx b/src/components/Wallet/WalletContext.tsx index 80826d5..29d0838 100644 --- a/src/components/Wallet/WalletContext.tsx +++ b/src/components/Wallet/WalletContext.tsx @@ -1,7 +1,8 @@ +import type { + JSXElement} from "solid-js"; import { createContext, useContext, - JSXElement, createSignal, createEffect, onMount @@ -201,7 +202,7 @@ export function WalletProvider(props: { children: JSXElement; }) { s.balances = []; s.collections = { encryptedDrives: 0, decryptedPrograms: 0 }; })); try { - let walletToConnect = walletName + const walletToConnect = walletName ? state.availableWallets.find(w => w.name === walletName) : state.availableWallets[0]; if (!walletToConnect) throw new Error("No compatible wallet found."); diff --git a/src/components/WasmIframeWrapper.tsx b/src/components/WasmIframeWrapper.tsx index 4c72c71..aa79534 100644 --- a/src/components/WasmIframeWrapper.tsx +++ b/src/components/WasmIframeWrapper.tsx @@ -1,4 +1,5 @@ -import { createSignal, onCleanup, onMount, Component, Show, createMemo } from 'solid-js'; +import type { Component} from 'solid-js'; +import { createSignal, onCleanup, onMount, Show, createMemo } from 'solid-js'; import type { EventPayload } from '../api/game/events'; import type { WasmCanvasBridgeInterface } from './hooks/createWasmCanvas'; @@ -98,8 +99,7 @@ export const WasmIframeWrapper: Component = (props) => { }); // --- Bridge Interface Implementation --- - const createBridgeInterface = (): WasmCanvasBridgeInterface => { - return { + const createBridgeInterface = (): WasmCanvasBridgeInterface => ({ queueEventForWasm: (event: EventPayload) => { sendMessageToIframe({ type: 'QUEUE_WASM_EVENT', payload: event }); }, @@ -118,8 +118,7 @@ export const WasmIframeWrapper: Component = (props) => { }, isReady: isIframeReady, error: error, - }; - }; + }); const showLoading = () => !isIframeReady() && !error(); @@ -148,7 +147,7 @@ export const WasmIframeWrapper: Component = (props) => { style={{ border: 'none', display: 'block', width: '100%', height: '100%' }} sandbox="allow-scripts allow-same-origin" title={`WASM Instance ${props.instanceId}`} - > + />
    ); }; \ No newline at end of file diff --git a/src/components/hooks/createWasmCanvas.ts b/src/components/hooks/createWasmCanvas.ts index 8229b21..e8b9d40 100644 --- a/src/components/hooks/createWasmCanvas.ts +++ b/src/components/hooks/createWasmCanvas.ts @@ -1,5 +1,6 @@ // src/hooks/createWasmCanvas.ts -import { createSignal, onCleanup, createEffect, Accessor, createMemo } from 'solid-js'; +import type { Accessor} from 'solid-js'; +import { createSignal, onCleanup, createEffect, createMemo } from 'solid-js'; import { GameBridge } from '../../api/game/gameBridge'; // Adjust path as needed import type { EventPayload } from '../../api/game/events'; // Adjust path as needed From b94c51984aedd90afcdbf6dc67bf936236747731 Mon Sep 17 00:00:00 2001 From: Francisco Casiano Date: Thu, 10 Jul 2025 12:49:44 -0400 Subject: [PATCH 05/16] Fixed most of the linting errors. ESLint implementation errors remain --- .env.example | 4 +- README.md | 3 +- eslint.config.js | 204 +-- index.html | 71 +- postcss.config.js | 2 +- src/98.css | 1237 +++++++++-------- src/App.tsx | 8 +- src/components/Desktop/Desktop.tsx | 34 +- src/components/Desktop/DesktopIcon.tsx | 5 +- src/components/Desktop/Taskbar.tsx | 66 +- src/components/DrivesAndPrograms.tsx | 1052 +++++++------- src/components/Icons/ArrowsPointingIn.tsx | 27 +- src/components/Icons/ArrowsPointingOut.tsx | 27 +- src/components/Icons/Minus.tsx | 23 +- src/components/Icons/X.tsx | 23 +- src/components/ProgramDatabase.tsx | 605 ++++---- src/components/ProgramEventDemo.tsx | 97 +- .../ProgramWindow/ProgramWindow.tsx | 215 +-- .../ProgramWindow/programContext.tsx | 405 +++--- src/components/SplashScreen.module.css | 96 +- src/components/SplashScreen.tsx | 47 +- src/components/StatsList.tsx | 68 +- src/components/Theme/ThemeContext.tsx | 55 +- src/components/Theme/ThemeSwitcher.tsx | 10 - src/components/Theme/Theme_Instructions.md | 71 +- src/components/Theme/theme.css | 738 +++++----- .../WGPUNotification/WGPUNotificationApp.tsx | 227 +-- .../WGPUNotificationWindow.tsx | 134 +- src/components/Wallet/WalletApp.tsx | 668 +++++---- src/components/Wallet/WalletContext.tsx | 653 +++++---- src/components/Wallet/utils/format.ts | 18 +- src/components/WasmIframeWrapper.tsx | 295 ++-- src/components/hooks/createWasmCanvas.ts | 863 ++++++------ src/fadeEffects.css | 16 +- src/index.css | 9 +- src/index.tsx | 4 +- src/utils/assetPreloader.ts | 360 ++--- vite.config.ts | 2 +- 38 files changed, 4450 insertions(+), 3992 deletions(-) delete mode 100644 src/components/Theme/ThemeSwitcher.tsx diff --git a/.env.example b/.env.example index e90907c..a8a0326 100644 --- a/.env.example +++ b/.env.example @@ -1,7 +1,7 @@ # WASM Engine URL - Points to the compiled WebAssembly binary # Dev: main branch WASM build / Testnet: testnet branch WASM build / Mainnet: mainnent branch WASM build -VITE_WASM_ENGINE_URL=https://your-domain.com/monster_view_bg.wasm +VITE_WASM_ENGINE_URL=https://your-domain.com/file_name.wasm # WASM JS Bindings URL - Points to the JavaScript bindings # Dev: main branch bindings / Testnet: testnet bindings / Mainnet: mainnet branch production bindings -VITE_WASM_BINDINGS_URL=https://your-domain.com/monster_view.js +VITE_WASM_BINDINGS_URL=https://your-domain.com/file_name.js diff --git a/README.md b/README.md index 1ada962..b958a3e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # Daemon Operating System Page This website is built using the following technologies: + 1. SolidJS 2. TailwindCSS 3. Typescript @@ -69,13 +70,11 @@ The `dist` folder contains all the front end files that are necessary to deploy If you encounter problems, here are some common solutions: 1. **Command not executing:** - - Verify you're in the correct directory - Run `bun install` again - Confirm bun is installed with `bun --version` 2. **Changes not reflecting:** - - Ensure the development server is running - Check the terminal for error messages - Try refreshing the browser diff --git a/eslint.config.js b/eslint.config.js index ff7dd86..48adffa 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,151 +1,177 @@ -import js from "@eslint/js"; -import solid from "eslint-plugin-solid/configs/typescript"; -import * as tsParser from "@typescript-eslint/parser"; -import tsPlugin from "@typescript-eslint/eslint-plugin"; -import prettierConfig from "eslint-config-prettier"; +import js from '@eslint/js'; +import solid from 'eslint-plugin-solid/configs/typescript'; +import * as tsParser from '@typescript-eslint/parser'; +import tsPlugin from '@typescript-eslint/eslint-plugin'; +import prettierConfig from 'eslint-config-prettier'; export default [ js.configs.recommended, { - files: ["**/*.{ts,tsx,js,jsx}"], + ignores: [ + 'dist/**', + 'node_modules/**', + '*.config.js', + '*.config.ts', + 'public/**/*.js', + 'public/**/*.d.ts', + '**/*.wasm.d.ts', + ], + }, + { + files: ['**/*.{ts,tsx,js,jsx}'], ...solid, languageOptions: { parser: tsParser, parserOptions: { - project: "./tsconfig.json", - ecmaVersion: "latest", - sourceType: "module", + project: './tsconfig.json', + ecmaVersion: 'latest', + sourceType: 'module', ecmaFeatures: { jsx: true, }, }, + globals: { + window: 'readonly', + document: 'readonly', + console: 'readonly', + navigator: 'readonly', + localStorage: 'readonly', + sessionStorage: 'readonly', + fetch: 'readonly', + setTimeout: 'readonly', + setInterval: 'readonly', + clearTimeout: 'readonly', + clearInterval: 'readonly', + requestAnimationFrame: 'readonly', + cancelAnimationFrame: 'readonly', + crypto: 'readonly', + caches: 'readonly', + GPUAdapter: 'readonly', + GPUDevice: 'readonly', + Interact: 'readonly', + }, }, plugins: { - "@typescript-eslint": tsPlugin, + '@typescript-eslint': tsPlugin, solid: solid.plugins.solid, }, rules: { // TypeScript specific rules - "@typescript-eslint/semi": ["error", "always"], - "@typescript-eslint/no-unused-vars": [ - "warn", + '@typescript-eslint/semi': ['error', 'always'], + '@typescript-eslint/no-unused-vars': [ + 'warn', { - argsIgnorePattern: "^_", - varsIgnorePattern: "^_", + argsIgnorePattern: '^_', + varsIgnorePattern: '^_', }, ], - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/no-explicit-any": "warn", - "@typescript-eslint/consistent-type-imports": [ - "error", + '@typescript-eslint/explicit-function-return-type': 'off', + '@typescript-eslint/no-explicit-any': 'warn', + '@typescript-eslint/consistent-type-imports': [ + 'error', { - prefer: "type-imports", + prefer: 'type-imports', }, ], - "@typescript-eslint/interface-name-prefix": "off", - "@typescript-eslint/prefer-interface": "off", + '@typescript-eslint/interface-name-prefix': 'off', + '@typescript-eslint/prefer-interface': 'off', // Naming conventions matching your style guide - "@typescript-eslint/naming-convention": [ - "error", + '@typescript-eslint/naming-convention': [ + 'error', // Variables: camelCase, descriptive names { - selector: "variable", - format: ["camelCase", "UPPER_CASE"], - leadingUnderscore: "allow", + selector: 'variable', + format: ['camelCase', 'UPPER_CASE'], + leadingUnderscore: 'allow', }, // Booleans: isActive, hasPermission pattern { - selector: "variable", - types: ["boolean"], - format: ["camelCase"], - prefix: ["is", "has", "contains", "should", "will", "did", "can"], + selector: 'variable', + types: ['boolean'], + format: ['camelCase', 'PascalCase'], + prefix: ['is', 'has', 'contains', 'should', 'will', 'did', 'can', 'needs', 'are'], }, // Functions: camelCase with verb names { - selector: "function", - format: ["camelCase", "PascalCase"], // PascalCase for components + selector: 'function', + format: ['camelCase', 'PascalCase'], // PascalCase for components }, // Classes and interfaces: PascalCase { - selector: "class", - format: ["PascalCase"], + selector: 'class', + format: ['PascalCase'], }, { - selector: "interface", - format: ["PascalCase"], + selector: 'interface', + format: ['PascalCase'], }, { - selector: "typeAlias", - format: ["PascalCase"], + selector: 'typeAlias', + format: ['PascalCase'], }, // Type parameters { - selector: "typeParameter", - format: ["PascalCase"], + selector: 'typeParameter', + format: ['PascalCase'], }, // Enums: PascalCase { - selector: "enum", - format: ["PascalCase"], + selector: 'enum', + format: ['PascalCase'], }, // Enum members: UPPER_CASE { - selector: "enumMember", - format: ["UPPER_CASE"], + selector: 'enumMember', + format: ['UPPER_CASE'], }, ], // General JavaScript/TypeScript rules - semi: "off", // Use @typescript-eslint/semi instead - indent: "off", // Let Prettier handle this - quotes: ["error", "single", { avoidEscape: true }], - "comma-dangle": ["error", "always-multiline"], - "no-trailing-spaces": "error", - "no-multiple-empty-lines": ["error", { max: 2, maxEOF: 1 }], - "eol-last": ["error", "always"], - "object-curly-spacing": ["error", "always"], - "array-bracket-spacing": ["error", "never"], - "arrow-parens": ["error", "always"], - "arrow-body-style": ["error", "as-needed"], - "prefer-const": "warn", - "no-var": "error", - "no-console": "warn", - "no-debugger": "error", - eqeqeq: ["error", "always"], + semi: 'off', // Use @typescript-eslint/semi instead + indent: 'off', // Let Prettier handle this + quotes: ['error', 'single', { avoidEscape: true }], + 'comma-dangle': ['error', 'always-multiline'], + 'no-trailing-spaces': 'error', + 'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1 }], + 'eol-last': ['error', 'always'], + 'object-curly-spacing': ['error', 'always'], + 'array-bracket-spacing': ['error', 'never'], + 'arrow-parens': ['error', 'always'], + 'arrow-body-style': ['error', 'as-needed'], + 'prefer-const': 'warn', + 'no-var': 'error', + 'no-console': 'off', + 'no-debugger': 'error', + eqeqeq: ['error', 'always'], - // Import rules - "no-restricted-imports": [ - "error", - { - patterns: ["./", "../"], - }, - ], - "import/order": "off", // You can enable this if you add eslint-plugin-import + // Import rules - allow relative imports for components + 'no-restricted-imports': 'off', + 'import/order': 'off', // You can enable this if you add eslint-plugin-import // SolidJS specific rules - "solid/components-return-once": "error", - "solid/event-handlers": "error", - "solid/imports": "error", - "solid/jsx-no-duplicate-props": "error", - "solid/jsx-no-script-url": "error", - "solid/jsx-no-undef": "error", - "solid/jsx-uses-vars": "error", - "solid/no-destructure": "error", - "solid/no-innerhtml": "warn", - "solid/no-react-deps": "error", - "solid/no-react-specific-props": "error", - "solid/no-unknown-namespaces": "error", - "solid/prefer-for": "warn", // Warns to use instead of map for components - "solid/prefer-show": "warn", // Warns to use for conditionals - "solid/reactivity": "error", - "solid/self-closing-comp": "error", - "solid/style-prop": "warn", + 'solid/components-return-once': 'error', + 'solid/event-handlers': 'error', + 'solid/imports': 'error', + 'solid/jsx-no-duplicate-props': 'error', + 'solid/jsx-no-script-url': 'error', + 'solid/jsx-no-undef': 'error', + 'solid/jsx-uses-vars': 'error', + 'solid/no-destructure': 'error', + 'solid/no-innerhtml': 'warn', + 'solid/no-react-deps': 'error', + 'solid/no-react-specific-props': 'error', + 'solid/no-unknown-namespaces': 'error', + 'solid/prefer-for': 'warn', // Warns to use instead of map for components + 'solid/prefer-show': 'warn', // Warns to use for conditionals + 'solid/reactivity': 'error', + 'solid/self-closing-comp': 'error', + 'solid/style-prop': 'warn', // Disabled rules to avoid Prettier conflicts - "max-len": "off", - "no-mixed-spaces-and-tabs": "off", - "no-tabs": "off", + 'max-len': 'off', + 'no-mixed-spaces-and-tabs': 'off', + 'no-tabs': 'off', }, }, // Prettier config should be last to override formatting rules diff --git a/index.html b/index.html index 92cd67b..acdd785 100644 --- a/index.html +++ b/index.html @@ -1,45 +1,38 @@ - - - - + + + + - + - Daemon - Home - - - - - - - -
    + Daemon - Home + + + + + + + +
    - - + + diff --git a/postcss.config.js b/postcss.config.js index 2e7af2b..2aa7205 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -3,4 +3,4 @@ export default { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/src/98.css b/src/98.css index f610f5a..beb556e 100644 --- a/src/98.css +++ b/src/98.css @@ -1,24 +1,24 @@ /*! 98.css v0.1.20 - https://github.com/jdan/98.css */ @font-face { - font-family: "Pixelated MS Sans Serif"; - font-style: normal; - font-weight: 400; - src: url(ms_sans_serif.woff) format("woff"); - src: url(ms_sans_serif.woff2) format("woff2") + font-family: 'Pixelated MS Sans Serif'; + font-style: normal; + font-weight: 400; + src: url(ms_sans_serif.woff) format('woff'); + src: url(ms_sans_serif.woff2) format('woff2'); } @font-face { - font-family: "Pixelated MS Sans Serif"; - font-style: normal; - font-weight: 700; - src: url(ms_sans_serif_bold.woff) format("woff"); - src: url(ms_sans_serif_bold.woff2) format("woff2") + font-family: 'Pixelated MS Sans Serif'; + font-style: normal; + font-weight: 700; + src: url(ms_sans_serif_bold.woff) format('woff'); + src: url(ms_sans_serif_bold.woff2) format('woff2'); } body { - color: #222; - font-family: Arial; - font-size: 12px + color: #222; + font-family: Arial; + font-size: 12px; } .title-bar, @@ -27,892 +27,991 @@ button, input, label, legend, -li[role=tab], +li[role='tab'], option, select, table, textarea, ul.tree-view { - -webkit-font-smoothing: none; - font-family: "Pixelated MS Sans Serif", Arial; - font-size: 11px + -webkit-font-smoothing: none; + font-family: 'Pixelated MS Sans Serif', Arial; + font-size: 11px; } h1 { - font-size: 5rem + font-size: 5rem; } h2 { - font-size: 2.5rem + font-size: 2.5rem; } h3 { - font-size: 2rem + font-size: 2rem; } h4 { - font-size: 1.5rem + font-size: 1.5rem; } u { - border-bottom: .5px solid #222; - text-decoration: none + border-bottom: 0.5px solid #222; + text-decoration: none; } button, -input[type=reset], -input[type=submit] { - background: silver; - border: none; - border-radius: 0; - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; - box-sizing: border-box; - color: transparent; - min-height: 23px; - min-width: 75px; - padding: 0 12px; - text-shadow: 0 0 #222 +input[type='reset'], +input[type='submit'] { + background: silver; + border: none; + border-radius: 0; + box-shadow: + inset -1px -1px #0a0a0a, + inset 1px 1px #fff, + inset -2px -2px grey, + inset 2px 2px #dfdfdf; + box-sizing: border-box; + color: transparent; + min-height: 23px; + min-width: 75px; + padding: 0 12px; + text-shadow: 0 0 #222; } button.default, -input[type=reset].default, -input[type=submit].default { - box-shadow: inset -2px -2px #0a0a0a, inset 1px 1px #0a0a0a, inset 2px 2px #fff, inset -3px -3px grey, inset 3px 3px #dfdfdf +input[type='reset'].default, +input[type='submit'].default { + box-shadow: + inset -2px -2px #0a0a0a, + inset 1px 1px #0a0a0a, + inset 2px 2px #fff, + inset -3px -3px grey, + inset 3px 3px #dfdfdf; } .vertical-bar { - background: silver; - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; - height: 20px; - width: 4px + background: silver; + box-shadow: + inset -1px -1px #0a0a0a, + inset 1px 1px #fff, + inset -2px -2px grey, + inset 2px 2px #dfdfdf; + height: 20px; + width: 4px; } button:not(:disabled):active, -input[type=reset]:not(:disabled):active, -input[type=submit]:not(:disabled):active { - box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; - text-shadow: 1px 1px #222 +input[type='reset']:not(:disabled):active, +input[type='submit']:not(:disabled):active { + box-shadow: + inset -1px -1px #fff, + inset 1px 1px #0a0a0a, + inset -2px -2px #dfdfdf, + inset 2px 2px grey; + text-shadow: 1px 1px #222; } button.default:not(:disabled):active, -input[type=reset].default:not(:disabled):active, -input[type=submit].default:not(:disabled):active { - box-shadow: inset 2px 2px #0a0a0a, inset -1px -1px #0a0a0a, inset -2px -2px #fff, inset 3px 3px grey, inset -3px -3px #dfdfdf +input[type='reset'].default:not(:disabled):active, +input[type='submit'].default:not(:disabled):active { + box-shadow: + inset 2px 2px #0a0a0a, + inset -1px -1px #0a0a0a, + inset -2px -2px #fff, + inset 3px 3px grey, + inset -3px -3px #dfdfdf; } @media (not(hover)) { - - button:not(:disabled):hover, - input[type=reset]:not(:disabled):hover, - input[type=submit]:not(:disabled):hover { - box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey - } + button:not(:disabled):hover, + input[type='reset']:not(:disabled):hover, + input[type='submit']:not(:disabled):hover { + box-shadow: + inset -1px -1px #fff, + inset 1px 1px #0a0a0a, + inset -2px -2px #dfdfdf, + inset 2px 2px grey; + } } button:focus, -input[type=reset]:focus, -input[type=submit]:focus { - outline: 1px dotted #000; - outline-offset: -4px +input[type='reset']:focus, +input[type='submit']:focus { + outline: 1px dotted #000; + outline-offset: -4px; } button::-moz-focus-inner, -input[type=reset]::-moz-focus-inner, -input[type=submit]::-moz-focus-inner { - border: 0 +input[type='reset']::-moz-focus-inner, +input[type='submit']::-moz-focus-inner { + border: 0; } :disabled, -:disabled+label, +:disabled + label, input[readonly], -input[readonly]+label { - color: grey +input[readonly] + label { + color: grey; } -:disabled+label, +:disabled + label, button:disabled, -input[type=reset]:disabled, -input[type=submit]:disabled { - text-shadow: 1px 1px 0 #fff +input[type='reset']:disabled, +input[type='submit']:disabled { + text-shadow: 1px 1px 0 #fff; } .window { - background: silver; - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; - padding: 3px + background: silver; + box-shadow: + inset -1px -1px #0a0a0a, + inset 1px 1px #dfdfdf, + inset -2px -2px grey, + inset 2px 2px #fff; + padding: 3px; } .title-bar { - align-items: center; - background: linear-gradient(90deg, navy, #1084d0); - display: flex; - justify-content: space-between; - padding: 3px 2px 3px 3px + align-items: center; + background: linear-gradient(90deg, navy, #1084d0); + display: flex; + justify-content: space-between; + padding: 3px 2px 3px 3px; } .title-bar.inactive { - background: linear-gradient(90deg, grey, #b5b5b5) + background: linear-gradient(90deg, grey, #b5b5b5); } .title-bar-text { - color: #fff; - font-weight: 700; - letter-spacing: 0; - margin-right: 24px + color: #fff; + font-weight: 700; + letter-spacing: 0; + margin-right: 24px; } .title-bar-controls { - display: flex + display: flex; } .title-bar-controls button { - display: block; - min-height: 14px; - min-width: 16px; - padding: 0 + display: block; + min-height: 14px; + min-width: 16px; + padding: 0; } .title-bar-controls button:active { - padding: 0 + padding: 0; } .title-bar-controls button:focus { - outline: none + outline: none; } -.title-bar-controls button[aria-label=Minimize], +.title-bar-controls button[aria-label='Minimize'], .title-bar-controls button[aria-label].minimize { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E"); - background-position: bottom 3px left 4px; - background-repeat: no-repeat + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E"); + background-position: bottom 3px left 4px; + background-repeat: no-repeat; } -.title-bar-controls button[aria-label=Maximize], +.title-bar-controls button[aria-label='Maximize'], .title-bar-controls button[aria-label].maximize { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E"); - background-position: top 2px left 3px; - background-repeat: no-repeat + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E"); + background-position: top 2px left 3px; + background-repeat: no-repeat; } -.title-bar-controls button[aria-label=Maximize]:disabled, +.title-bar-controls button[aria-label='Maximize']:disabled, .title-bar-controls button[aria-label].maximize:disabled { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 1H1v9h9V1zM9 3H2v6h7V3z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='gray'/%3E%3C/svg%3E"); - background-position: top 2px left 3px; - background-repeat: no-repeat + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 1H1v9h9V1zM9 3H2v6h7V3z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='gray'/%3E%3C/svg%3E"); + background-position: top 2px left 3px; + background-repeat: no-repeat; } -.title-bar-controls button[aria-label=Restore], +.title-bar-controls button[aria-label='Restore'], .title-bar-controls button[aria-label].restore { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/%3E%3C/svg%3E"); - background-position: top 2px left 3px; - background-repeat: no-repeat + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/%3E%3C/svg%3E"); + background-position: top 2px left 3px; + background-repeat: no-repeat; } -.title-bar-controls button[aria-label=Help], +.title-bar-controls button[aria-label='Help'], .title-bar-controls button[aria-label].help { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 1h2v2H0zM1 0h4v1H1zM4 1h2v2H4zM3 3h2v1H3zM2 4h2v2H2zM2 7h2v2H2z'/%3E%3C/svg%3E"); - background-position: top 2px left 5px; - background-repeat: no-repeat + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 1h2v2H0zM1 0h4v1H1zM4 1h2v2H4zM3 3h2v1H3zM2 4h2v2H2zM2 7h2v2H2z'/%3E%3C/svg%3E"); + background-position: top 2px left 5px; + background-repeat: no-repeat; } -.title-bar-controls button[aria-label=Close], +.title-bar-controls button[aria-label='Close'], .title-bar-controls button[aria-label].close { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E"); - background-position: top 3px left 4px; - background-repeat: no-repeat; - margin-left: 2px + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E"); + background-position: top 3px left 4px; + background-repeat: no-repeat; + margin-left: 2px; } .status-bar { - gap: 1px; - display: flex; - margin: 0 1px + gap: 1px; + display: flex; + margin: 0 1px; } .status-bar-field { - box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey; - flex-grow: 1; - margin: 0; - padding: 2px 3px + box-shadow: + inset -1px -1px #dfdfdf, + inset 1px 1px grey; + flex-grow: 1; + margin: 0; + padding: 2px 3px; } .window-body { - margin: 8px + margin: 8px; } fieldset { - border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") 2; - margin: 0; - padding: 10px; - padding-block-start: 8px + border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' fill='gray' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/%3E%3C/svg%3E") + 2; + margin: 0; + padding: 10px; + padding-block-start: 8px; } legend { - background: silver + background: silver; } .field-row { - align-items: center; - display: flex + align-items: center; + display: flex; } -[class^=field-row]+[class^=field-row] { - margin-top: 6px +[class^='field-row'] + [class^='field-row'] { + margin-top: 6px; } -.field-row>*+* { - margin-left: 6px +.field-row > * + * { + margin-left: 6px; } .field-row-stacked { - display: flex; - flex-direction: column + display: flex; + flex-direction: column; } -.field-row-stacked *+* { - margin-top: 6px +.field-row-stacked * + * { + margin-top: 6px; } label { - align-items: center; - display: inline-flex + align-items: center; + display: inline-flex; } -input[type=checkbox], -input[type=radio] { - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - background: 0; - border: none; - margin: 0; - opacity: 0; - position: fixed +input[type='checkbox'], +input[type='radio'] { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background: 0; + border: none; + margin: 0; + opacity: 0; + position: fixed; } -input[type=checkbox]+label, -input[type=radio]+label { - line-height: 13px +input[type='checkbox'] + label, +input[type='radio'] + label { + line-height: 13px; } -input[type=radio]+label { - margin-left: 18px; - position: relative +input[type='radio'] + label { + margin-left: 18px; + position: relative; } -input[type=radio]+label:before { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='%23fff'/%3E%3C/svg%3E"); - content: ""; - display: inline-block; - height: 12px; - left: -18px; - margin-right: 6px; - position: absolute; - top: 0; - width: 12px +input[type='radio'] + label:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='%23fff'/%3E%3C/svg%3E"); + content: ''; + display: inline-block; + height: 12px; + left: -18px; + margin-right: 6px; + position: absolute; + top: 0; + width: 12px; } -input[type=radio]:active+label:before { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E") +input[type='radio']:active + label:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E"); } -input[type=radio]:checked+label:after { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='%23000'/%3E%3C/svg%3E"); - content: ""; - display: block; - height: 4px; - left: -14px; - position: absolute; - top: 4px; - width: 4px +input[type='radio']:checked + label:after { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='%23000'/%3E%3C/svg%3E"); + content: ''; + display: block; + height: 4px; + left: -14px; + position: absolute; + top: 4px; + width: 4px; } -input[type=checkbox]:focus+label, -input[type=radio]:focus+label { - outline: 1px dotted #000 +input[type='checkbox']:focus + label, +input[type='radio']:focus + label { + outline: 1px dotted #000; } -input[type=radio][disabled]+label:before { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E") +input[type='radio'][disabled] + label:before { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4v1H2v1H1v2H0v4h1v2h1V8H1V4h1V2h2V1h4v1h2V1H8V0z' fill='gray'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4v1H2v2H1v4h1v1h1V8H2V4h1V3h1V2h4v1h2V2H8V1z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3h1v1H9V3zm1 5V4h1v4h-1zm-2 2V9h1V8h1v2H8zm-4 0v1h4v-1H4zm0 0V9H2v1h2z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2h-1v2h1v4h-1v2H8v1H4v-1H2v1h2v1h4v-1h2v-1h1V8h1V4h-1V2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2h4v1h1v1h1v4H9v1H8v1H4V9H3V8H2V4h1V3h1V2z' fill='silver'/%3E%3C/svg%3E"); } -input[type=radio][disabled]:checked+label:after { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='gray'/%3E%3C/svg%3E") +input[type='radio'][disabled]:checked + label:after { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1v1H0v2h1v1h2V3h1V1H3V0z' fill='gray'/%3E%3C/svg%3E"); } -input[type=checkbox]+label { - margin-left: 19px; - position: relative +input[type='checkbox'] + label { + margin-left: 19px; + position: relative; } -input[type=checkbox]+label:before { - background: #fff; - box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; - content: ""; - display: inline-block; - height: 13px; - left: -19px; - margin-right: 6px; - position: absolute; - width: 13px +input[type='checkbox'] + label:before { + background: #fff; + box-shadow: + inset -1px -1px #fff, + inset 1px 1px grey, + inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + content: ''; + display: inline-block; + height: 13px; + left: -19px; + margin-right: 6px; + position: absolute; + width: 13px; } -input[type=checkbox]:active+label:before { - background: silver +input[type='checkbox']:active + label:before { + background: silver; } -input[type=checkbox]:checked+label:after { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='%23000'/%3E%3C/svg%3E"); - content: ""; - display: block; - height: 7px; - left: -16px; - position: absolute; - width: 7px +input[type='checkbox']:checked + label:after { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='%23000'/%3E%3C/svg%3E"); + content: ''; + display: block; + height: 7px; + left: -16px; + position: absolute; + width: 7px; } -input[type=checkbox][disabled]+label:before { - background: silver +input[type='checkbox'][disabled] + label:before { + background: silver; } -input[type=checkbox][disabled]:checked+label:after { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='gray'/%3E%3C/svg%3E") +input[type='checkbox'][disabled]:checked + label:after { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='gray'/%3E%3C/svg%3E"); } -input[type=email], -input[type=number], -input[type=password], -input[type=search], -input[type=tel], -input[type=text] { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: none; - border-radius: 0 +input[type='email'], +input[type='number'], +input[type='password'], +input[type='search'], +input[type='tel'], +input[type='text'] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + border-radius: 0; } -input[type=email], -input[type=number], -input[type=password], -input[type=search], -input[type=tel], -input[type=text], +input[type='email'], +input[type='number'], +input[type='password'], +input[type='search'], +input[type='tel'], +input[type='text'], select { - background-color: #fff; - box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; - box-sizing: border-box; - padding: 3px 4px + background-color: #fff; + box-shadow: + inset -1px -1px #fff, + inset 1px 1px grey, + inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + box-sizing: border-box; + padding: 3px 4px; } select, textarea { - border: none + border: none; } textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: #fff; - border-radius: 0; - box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; - box-sizing: border-box; - padding: 3px 4px -} - -input[type=email], -input[type=password], -input[type=search], -input[type=tel], -input[type=text], + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + border-radius: 0; + box-shadow: + inset -1px -1px #fff, + inset 1px 1px grey, + inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + box-sizing: border-box; + padding: 3px 4px; +} + +input[type='email'], +input[type='password'], +input[type='search'], +input[type='tel'], +input[type='text'], select { - height: 21px + height: 21px; } -input[type=number] { - height: 22px +input[type='number'] { + height: 22px; } -input[type=search]::-ms-clear, -input[type=search]::-ms-reveal { - display: none; - height: 0; - width: 0 +input[type='search']::-ms-clear, +input[type='search']::-ms-reveal { + display: none; + height: 0; + width: 0; } -input[type=search]::-webkit-search-cancel-button, -input[type=search]::-webkit-search-decoration, -input[type=search]::-webkit-search-results-button, -input[type=search]::-webkit-search-results-decoration { - display: none +input[type='search']::-webkit-search-cancel-button, +input[type='search']::-webkit-search-decoration, +input[type='search']::-webkit-search-results-button, +input[type='search']::-webkit-search-results-decoration { + display: none; } -input[type=email], -input[type=number], -input[type=password], -input[type=search], -input[type=tel], -input[type=text] { - line-height: 2 +input[type='email'], +input[type='number'], +input[type='password'], +input[type='search'], +input[type='tel'], +input[type='text'] { + line-height: 2; } -input[type=email]:disabled, -input[type=email]:read-only, -input[type=number]:disabled, -input[type=number]:read-only, -input[type=password]:disabled, -input[type=password]:read-only, -input[type=search]:disabled, -input[type=search]:read-only, -input[type=tel]:disabled, -input[type=tel]:read-only, -input[type=text]:disabled, -input[type=text]:read-only, +input[type='email']:disabled, +input[type='email']:read-only, +input[type='number']:disabled, +input[type='number']:read-only, +input[type='password']:disabled, +input[type='password']:read-only, +input[type='search']:disabled, +input[type='search']:read-only, +input[type='tel']:disabled, +input[type='tel']:read-only, +input[type='text']:disabled, +input[type='text']:read-only, textarea:disabled { - background-color: silver + background-color: silver; } select { - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E"); - background-position: top 2px right 2px; - background-repeat: no-repeat; - border-radius: 0; - padding-right: 32px; - position: relative -} - -input[type=email]:focus, -input[type=number]:focus, -input[type=password]:focus, -input[type=search]:focus, -input[type=tel]:focus, -input[type=text]:focus, + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E"); + background-position: top 2px right 2px; + background-repeat: no-repeat; + border-radius: 0; + padding-right: 32px; + position: relative; +} + +input[type='email']:focus, +input[type='number']:focus, +input[type='password']:focus, +input[type='search']:focus, +input[type='tel']:focus, +input[type='text']:focus, select:focus, textarea:focus { - outline: none -} - -input[type=range] { - -webkit-appearance: none; - background: transparent; - width: 100% -} - -input[type=range]:focus { - outline: none -} - -input[type=range]::-webkit-slider-thumb { - -webkit-appearance: none; - background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E"); - border: none; - box-shadow: none; - height: 21px; - transform: translateY(-8px); - width: 11px -} - -input[type=range].has-box-indicator::-webkit-slider-thumb { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E"); - transform: translateY(-10px) -} - -input[type=range]::-moz-range-thumb { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E"); - border: 0; - border-radius: 0; - height: 21px; - transform: translateY(2px); - width: 11px -} - -input[type=range].has-box-indicator::-moz-range-thumb { - background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E"); - transform: translateY(0) -} - -input[type=range]::-webkit-slider-runnable-track { - background: #000; - border-bottom: 1px solid grey; - border-right: 1px solid grey; - box-shadow: 1px 0 0 #fff, 1px 1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #a9a9a9, -1px -1px 0 #a9a9a9, 0 -1px 0 #a9a9a9, -1px 1px 0 #fff, 1px -1px #a9a9a9; - box-sizing: border-box; - height: 2px; - width: 100% -} - -input[type=range]::-moz-range-track { - background: #000; - border-bottom: 1px solid grey; - border-right: 1px solid grey; - box-shadow: 1px 0 0 #fff, 1px 1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #a9a9a9, -1px -1px 0 #a9a9a9, 0 -1px 0 #a9a9a9, -1px 1px 0 #fff, 1px -1px #a9a9a9; - box-sizing: border-box; - height: 2px; - width: 100% + outline: none; +} + +input[type='range'] { + -webkit-appearance: none; + background: transparent; + width: 100%; +} + +input[type='range']:focus { + outline: none; +} + +input[type='range']::-webkit-slider-thumb { + -webkit-appearance: none; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E"); + border: none; + box-shadow: none; + height: 21px; + transform: translateY(-8px); + width: 11px; +} + +input[type='range'].has-box-indicator::-webkit-slider-thumb { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E"); + transform: translateY(-10px); +} + +input[type='range']::-moz-range-thumb { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v16h2v2h2v2h1v-1H3v-2H1V1h9V0z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 1v15h1v1h1v1h1v1h2v-1h1v-1h1v-1h1V1z' fill='%23C0C7C8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v15H8v2H6v2H5v-1h2v-2h2z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v16H9v2H7v2H5v1h1v-2h2v-2h2z' fill='%23000'/%3E%3C/svg%3E"); + border: 0; + border-radius: 0; + height: 21px; + transform: translateY(2px); + width: 11px; +} + +input[type='range'].has-box-indicator::-moz-range-thumb { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0v20h1V1h9V0z' fill='%23fff'/%3E%3Cpath fill='%23C0C7C8' d='M1 1h8v18H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 1h1v19H1v-1h8z' fill='%2387888F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0h1v21H0v-1h10z' fill='%23000'/%3E%3C/svg%3E"); + transform: translateY(0); +} + +input[type='range']::-webkit-slider-runnable-track { + background: #000; + border-bottom: 1px solid grey; + border-right: 1px solid grey; + box-shadow: + 1px 0 0 #fff, + 1px 1px 0 #fff, + 0 1px 0 #fff, + -1px 0 0 #a9a9a9, + -1px -1px 0 #a9a9a9, + 0 -1px 0 #a9a9a9, + -1px 1px 0 #fff, + 1px -1px #a9a9a9; + box-sizing: border-box; + height: 2px; + width: 100%; +} + +input[type='range']::-moz-range-track { + background: #000; + border-bottom: 1px solid grey; + border-right: 1px solid grey; + box-shadow: + 1px 0 0 #fff, + 1px 1px 0 #fff, + 0 1px 0 #fff, + -1px 0 0 #a9a9a9, + -1px -1px 0 #a9a9a9, + 0 -1px 0 #a9a9a9, + -1px 1px 0 #fff, + 1px -1px #a9a9a9; + box-sizing: border-box; + height: 2px; + width: 100%; } .is-vertical { - display: inline-block; - height: 150px; - transform: translateY(50%); - width: 4px + display: inline-block; + height: 150px; + transform: translateY(50%); + width: 4px; } -.is-vertical>input[type=range] { - height: 4px; - margin: 0 16px 0 10px; - transform: rotate(270deg) translateX(calc(-50% + 8px)); - transform-origin: left; - width: 150px +.is-vertical > input[type='range'] { + height: 4px; + margin: 0 16px 0 10px; + transform: rotate(270deg) translateX(calc(-50% + 8px)); + transform-origin: left; + width: 150px; } -.is-vertical>input[type=range]::-webkit-slider-runnable-track { - border-bottom: 1px solid grey; - border-left: 1px solid grey; - border-right: 0; - box-shadow: -1px 0 0 #fff, -1px 1px 0 #fff, 0 1px 0 #fff, 1px 0 0 #a9a9a9, 1px -1px 0 #a9a9a9, 0 -1px 0 #a9a9a9, 1px 1px 0 #fff, -1px -1px #a9a9a9 +.is-vertical > input[type='range']::-webkit-slider-runnable-track { + border-bottom: 1px solid grey; + border-left: 1px solid grey; + border-right: 0; + box-shadow: + -1px 0 0 #fff, + -1px 1px 0 #fff, + 0 1px 0 #fff, + 1px 0 0 #a9a9a9, + 1px -1px 0 #a9a9a9, + 0 -1px 0 #a9a9a9, + 1px 1px 0 #fff, + -1px -1px #a9a9a9; } -.is-vertical>input[type=range]::-moz-range-track { - border-bottom: 1px solid grey; - border-left: 1px solid grey; - border-right: 0; - box-shadow: -1px 0 0 #fff, -1px 1px 0 #fff, 0 1px 0 #fff, 1px 0 0 #a9a9a9, 1px -1px 0 #a9a9a9, 0 -1px 0 #a9a9a9, 1px 1px 0 #fff, -1px -1px #a9a9a9 +.is-vertical > input[type='range']::-moz-range-track { + border-bottom: 1px solid grey; + border-left: 1px solid grey; + border-right: 0; + box-shadow: + -1px 0 0 #fff, + -1px 1px 0 #fff, + 0 1px 0 #fff, + 1px 0 0 #a9a9a9, + 1px -1px 0 #a9a9a9, + 0 -1px 0 #a9a9a9, + 1px 1px 0 #fff, + -1px -1px #a9a9a9; } -.is-vertical>input[type=range]::-webkit-slider-thumb { - transform: translateY(-8px) scaleX(-1) +.is-vertical > input[type='range']::-webkit-slider-thumb { + transform: translateY(-8px) scaleX(-1); } -.is-vertical>input[type=range].has-box-indicator::-webkit-slider-thumb { - transform: translateY(-10px) scaleX(-1) +.is-vertical > input[type='range'].has-box-indicator::-webkit-slider-thumb { + transform: translateY(-10px) scaleX(-1); } -.is-vertical>input[type=range]::-moz-range-thumb { - transform: translateY(2px) scaleX(-1) +.is-vertical > input[type='range']::-moz-range-thumb { + transform: translateY(2px) scaleX(-1); } -.is-vertical>input[type=range].has-box-indicator::-moz-range-thumb { - transform: translateY(0) scaleX(-1) +.is-vertical > input[type='range'].has-box-indicator::-moz-range-thumb { + transform: translateY(0) scaleX(-1); } select:focus { - background-color: navy; - color: #fff + background-color: navy; + color: #fff; } select:focus option { - background-color: #fff; - color: #000 + background-color: #fff; + color: #000; } select:active { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E") + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E"); } a { - color: #00f + color: #00f; } a:focus { - outline: 1px dotted #00f + outline: 1px dotted #00f; } ul.tree-view { - background: #fff; - box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; - display: block; - margin: 0; - padding: 6px + background: #fff; + box-shadow: + inset -1px -1px #fff, + inset 1px 1px grey, + inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + display: block; + margin: 0; + padding: 6px; } ul.tree-view li { - list-style-type: none + list-style-type: none; } ul.tree-view a { - color: #000; - text-decoration: none + color: #000; + text-decoration: none; } ul.tree-view a:focus { - background-color: navy; - color: #fff + background-color: navy; + color: #fff; } ul.tree-view li, ul.tree-view ul { - margin-top: 3px + margin-top: 3px; } ul.tree-view ul { - border-left: 1px dotted grey; - margin-left: 16px; - padding-left: 16px + border-left: 1px dotted grey; + margin-left: 16px; + padding-left: 16px; } -ul.tree-view ul>li { - position: relative +ul.tree-view ul > li { + position: relative; } -ul.tree-view ul>li:before { - border-bottom: 1px dotted grey; - content: ""; - display: block; - left: -16px; - position: absolute; - top: 6px; - width: 12px +ul.tree-view ul > li:before { + border-bottom: 1px dotted grey; + content: ''; + display: block; + left: -16px; + position: absolute; + top: 6px; + width: 12px; } -ul.tree-view ul>li:last-child:after { - background: #fff; - bottom: 0; - content: ""; - display: block; - left: -20px; - position: absolute; - top: 7px; - width: 8px +ul.tree-view ul > li:last-child:after { + background: #fff; + bottom: 0; + content: ''; + display: block; + left: -20px; + position: absolute; + top: 7px; + width: 8px; } ul.tree-view details { - margin-top: 0 + margin-top: 0; } ul.tree-view details[open] summary { - margin-bottom: 0 + margin-bottom: 0; } -ul.tree-view ul details>summary:before { - margin-left: -22px; - position: relative; - z-index: 1 +ul.tree-view ul details > summary:before { + margin-left: -22px; + position: relative; + z-index: 1; } -ul.tree-view details>summary:before { - background-color: #fff; - border: 1px solid grey; - content: "+"; - display: block; - float: left; - height: 9px; - line-height: 8px; - margin-right: 5px; - padding-left: 1px; - text-align: center; - width: 8px +ul.tree-view details > summary:before { + background-color: #fff; + border: 1px solid grey; + content: '+'; + display: block; + float: left; + height: 9px; + line-height: 8px; + margin-right: 5px; + padding-left: 1px; + text-align: center; + width: 8px; } -ul.tree-view details[open]>summary:before { - content: "-" +ul.tree-view details[open] > summary:before { + content: '-'; } -ul.tree-view details>summary::-webkit-details-marker, -ul.tree-view details>summary::marker { - content: "" +ul.tree-view details > summary::-webkit-details-marker, +ul.tree-view details > summary::marker { + content: ''; } pre { - background: #fff; - box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; - display: block; - margin: 0; - padding: 12px 8px + background: #fff; + box-shadow: + inset -1px -1px #fff, + inset 1px 1px grey, + inset -2px -2px #dfdfdf, + inset 2px 2px #0a0a0a; + display: block; + margin: 0; + padding: 12px 8px; } code, code * { - font-family: monospace + font-family: monospace; } summary:focus { - outline: 1px dotted #000 + outline: 1px dotted #000; } ::-webkit-scrollbar { - width: 16px + width: 16px; } ::-webkit-scrollbar:horizontal { - height: 17px + height: 17px; } ::-webkit-scrollbar-corner { - background: #dfdfdf + background: #dfdfdf; } ::-webkit-scrollbar-track { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E") + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E"); } ::-webkit-scrollbar-thumb { - background-color: #dfdfdf; - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf + background-color: #dfdfdf; + box-shadow: + inset -1px -1px #0a0a0a, + inset 1px 1px #fff, + inset -2px -2px grey, + inset 2px 2px #dfdfdf; } ::-webkit-scrollbar-button:horizontal:end:increment, ::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:vertical:end:increment, ::-webkit-scrollbar-button:vertical:start:decrement { - display: block + display: block; } ::-webkit-scrollbar-button:vertical:start { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E"); - height: 17px + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E"); + height: 17px; } ::-webkit-scrollbar-button:vertical:end { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E"); - height: 17px + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E"); + height: 17px; } ::-webkit-scrollbar-button:horizontal:start { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E"); - width: 16px + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E"); + width: 16px; } ::-webkit-scrollbar-button:horizontal:end { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E"); - width: 16px + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E"); + width: 16px; } -.window[role=tabpanel] { - position: relative; - z-index: 2 +.window[role='tabpanel'] { + position: relative; + z-index: 2; } -menu[role=tablist] { - display: flex; - list-style-type: none; - margin: 0 0 -2px; - padding-left: 3px; - position: relative; - text-indent: 0 +menu[role='tablist'] { + display: flex; + list-style-type: none; + margin: 0 0 -2px; + padding-left: 3px; + position: relative; + text-indent: 0; } -menu[role=tablist]>li { - border-top-left-radius: 3px; - border-top-right-radius: 3px; - box-shadow: inset -1px 0 #0a0a0a, inset 1px 1px #dfdfdf, inset -2px 0 grey, inset 2px 2px #fff; - z-index: 1 +menu[role='tablist'] > li { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + box-shadow: + inset -1px 0 #0a0a0a, + inset 1px 1px #dfdfdf, + inset -2px 0 grey, + inset 2px 2px #fff; + z-index: 1; } -menu[role=tablist]>li[aria-selected=true] { - background-color: silver; - margin-left: -3px; - margin-top: -2px; - padding-bottom: 2px; - position: relative; - z-index: 8 +menu[role='tablist'] > li[aria-selected='true'] { + background-color: silver; + margin-left: -3px; + margin-top: -2px; + padding-bottom: 2px; + position: relative; + z-index: 8; } -menu[role=tablist]>li>a { - color: #222; - display: block; - margin: 6px; - text-decoration: none +menu[role='tablist'] > li > a { + color: #222; + display: block; + margin: 6px; + text-decoration: none; } -menu[role=tablist]>li[aria-selected=true]>a:focus { - outline: none +menu[role='tablist'] > li[aria-selected='true'] > a:focus { + outline: none; } -menu[role=tablist]>li>a:focus { - outline: 1px dotted #222 +menu[role='tablist'] > li > a:focus { + outline: 1px dotted #222; } -menu[role=tablist].multirows>li { - flex-grow: 1; - text-align: center +menu[role='tablist'].multirows > li { + flex-grow: 1; + text-align: center; } .sunken-panel { - border: 2px groove transparent; - border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") 2; - box-sizing: border-box; - overflow: auto + border: 2px groove transparent; + border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M0 0h4v1H0z'/%3E%3Cpath fill='gray' d='M0 0h1v4H0z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h2v1H1z'/%3E%3Cpath fill='%230a0a0a' d='M1 1h1v2H1z'/%3E%3Cpath fill='%23fff' d='M0 4h5v1H0z'/%3E%3Cpath fill='%23fff' d='M4 0h1v5H4z'/%3E%3Cpath fill='%23dfdfdf' d='M3 1h1v3H3z'/%3E%3Cpath fill='%23dfdfdf' d='M1 3h3v1H1z'/%3E%3C/svg%3E") + 2; + box-sizing: border-box; + overflow: auto; } .sunken-panel, table { - background-color: #fff + background-color: #fff; } table { - border-collapse: collapse; - position: relative; - text-align: left; - white-space: nowrap + border-collapse: collapse; + position: relative; + text-align: left; + white-space: nowrap; } -table>thead>tr>* { - background: silver; - box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; - box-sizing: border-box; - font-weight: 400; - height: 17px; - padding: 0 6px; - position: sticky; - top: 0 +table > thead > tr > * { + background: silver; + box-shadow: + inset -1px -1px #0a0a0a, + inset 1px 1px #fff, + inset -2px -2px grey, + inset 2px 2px #dfdfdf; + box-sizing: border-box; + font-weight: 400; + height: 17px; + padding: 0 6px; + position: sticky; + top: 0; } -table.interactive>tbody>tr { - cursor: pointer +table.interactive > tbody > tr { + cursor: pointer; } -table>tbody>tr.highlighted { - background-color: navy; - color: #fff +table > tbody > tr.highlighted { + background-color: navy; + color: #fff; } -table>tbody>tr>* { - height: 14px; - padding: 0 6px +table > tbody > tr > * { + height: 14px; + padding: 0 6px; } .progress-indicator { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: none; - border-radius: 0; - box-shadow: inset -2px -2px #dfdfdf, inset 2px 2px grey; - box-sizing: border-box; - height: 32px; - padding: 4px; - position: relative -} - -.progress-indicator>.progress-indicator-bar { - background-color: navy; - display: block; - height: 100% -} - -.progress-indicator.segmented>.progress-indicator-bar { - background-color: transparent; - background-image: linear-gradient(90deg, navy 16px, transparent 0 2px); - background-repeat: repeat; - background-size: 18px 100%; - width: 100% -} - -.progress-indicator>.progress-corruption-bar { - background-color: #dc2626; - display: block; - height: 100% -} - -.progress-indicator.segmented>.progress-corruption-bar { - background-color: transparent; - background-image: linear-gradient(90deg, #8d0202 16px, transparent 0 2px); - background-repeat: repeat; - background-size: 18px 100%; - width: 100% -} \ No newline at end of file + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + border-radius: 0; + box-shadow: + inset -2px -2px #dfdfdf, + inset 2px 2px grey; + box-sizing: border-box; + height: 32px; + padding: 4px; + position: relative; +} + +.progress-indicator > .progress-indicator-bar { + background-color: navy; + display: block; + height: 100%; +} + +.progress-indicator.segmented > .progress-indicator-bar { + background-color: transparent; + background-image: linear-gradient(90deg, navy 16px, transparent 0 2px); + background-repeat: repeat; + background-size: 18px 100%; + width: 100%; +} + +.progress-indicator > .progress-corruption-bar { + background-color: #dc2626; + display: block; + height: 100%; +} + +.progress-indicator.segmented > .progress-corruption-bar { + background-color: transparent; + background-image: linear-gradient(90deg, #8d0202 16px, transparent 0 2px); + background-repeat: repeat; + background-size: 18px 100%; + width: 100%; +} diff --git a/src/App.tsx b/src/App.tsx index 5281454..61d6b60 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,7 +14,7 @@ import { usePrograms } from "./components/ProgramWindow/programContext"; import ProgramWindow from "./components/ProgramWindow/ProgramWindow"; import ProgramDatabase from "./components/ProgramDatabase"; import DrivesAndPrograms from "./components/DrivesAndPrograms"; -import { WalletProvider, useWallet } from "./components/Wallet/WalletContext"; +import { WalletProvider } from "./components/Wallet/WalletContext"; import { ThemeProvider } from "./components/Theme/ThemeContext"; import SplashScreen from "./components/SplashScreen"; import "./fadeEffects.css"; @@ -239,7 +239,7 @@ export default function App() { <> {(program) => { - const ProgramComponent = program.component as Component; + const programComponent = program.component as Component; // Use special window for WGPU notification if (program.label === "WGPU Support Check") { @@ -250,7 +250,7 @@ export default function App() { onClose={() => handleCloseProgram(program.id)} > - + ); @@ -263,7 +263,7 @@ export default function App() { onClose={() => handleCloseProgram(program.id)} > - + ); diff --git a/src/components/Desktop/Desktop.tsx b/src/components/Desktop/Desktop.tsx index 8c42af3..477aa96 100644 --- a/src/components/Desktop/Desktop.tsx +++ b/src/components/Desktop/Desktop.tsx @@ -3,28 +3,22 @@ import Taskbar from '../Desktop/Taskbar'; import { usePrograms } from '../ProgramWindow/programContext'; interface DesktopProps { - children: JSXElement; + children: JSXElement; } export default function Desktop(props: DesktopProps) { - const { activePrograms } = usePrograms(); + usePrograms(); // Keep for future use - return ( -
    - {/* Desktop icons grid area */} -
    - {props.children} -
    + return ( +
    + {/* Desktop icons grid area */} +
    {props.children}
    - {/* Daemon title watermark */} -
    - DAEMON Watermark -
    - -
    - ); -} \ No newline at end of file + {/* Daemon title watermark */} +
    + DAEMON Watermark +
    + +
    + ); +} diff --git a/src/components/Desktop/DesktopIcon.tsx b/src/components/Desktop/DesktopIcon.tsx index 7233fe2..4a17be9 100644 --- a/src/components/Desktop/DesktopIcon.tsx +++ b/src/components/Desktop/DesktopIcon.tsx @@ -1,4 +1,4 @@ -import type { Component } from "solid-js"; +import type { Component } from 'solid-js'; interface DesktopIconProps { appName: string; @@ -11,7 +11,7 @@ export default function DesktopIcon(props: DesktopIconProps) { return (
    props.onLaunch()} title={props.appName} > ); } - diff --git a/src/components/Desktop/Taskbar.tsx b/src/components/Desktop/Taskbar.tsx index b0586f2..3214825 100644 --- a/src/components/Desktop/Taskbar.tsx +++ b/src/components/Desktop/Taskbar.tsx @@ -1,6 +1,6 @@ import { usePrograms } from '../ProgramWindow/programContext'; import { createEffect, createSignal, onCleanup, onMount, untrack, For } from 'solid-js'; -import { WalletProvider } from '../Wallet/WalletContext'; +// import { WalletProvider } from '../Wallet/WalletContext'; // Unused for now import WalletApp from '../Wallet/WalletApp'; export default function Taskbar() { @@ -11,7 +11,7 @@ export default function Taskbar() { bringToFront, updateMinimizeTarget, registerProgram, - isRunning + isRunning, } = usePrograms(); const [currentDateTime, setCurrentDateTime] = createSignal(new Date()); @@ -20,8 +20,9 @@ export default function Taskbar() { createEffect(() => { const programs = activePrograms; requestAnimationFrame(() => { - untrack(() => { // Don't make effect depend on individual program fields - programs.forEach(program => { + untrack(() => { + // Don't make effect depend on individual program fields + programs.forEach((program) => { const buttonRef = taskbarButtonRefs.get(program.id); if (buttonRef) { const rect = buttonRef.getBoundingClientRect(); @@ -40,18 +41,16 @@ export default function Taskbar() { }); }); - function handleTaskbarProgramClick(programId: string) { - const program = activePrograms.find(p => p.id === programId); + const program = activePrograms.find((p) => p.id === programId); if (!program) return; if (program.isMinimized) { restoreProgram(programId); } else { - // Find the highest zIndex among non-minimized windows const maxZIndex = activePrograms - .filter(p => !p.isMinimized) + .filter((p) => !p.isMinimized) .reduce((max, p) => Math.max(max, p.zIndex), 0); if (program.zIndex === maxZIndex) { @@ -67,7 +66,7 @@ export default function Taskbar() { const handleWalletClick = () => { const walletLabel = 'Wallet'; if (isRunning(walletLabel)) { - const walletProgram = activePrograms.find(p => p.label === walletLabel); + const walletProgram = activePrograms.find((p) => p.label === walletLabel); if (walletProgram) { handleTaskbarProgramClick(walletProgram.id); } @@ -93,7 +92,8 @@ export default function Taskbar() { }; // Example "3/11/2025" - const formatDate = (date: Date) => `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`; + const formatDate = (date: Date) => + `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`; // Update the time every minute onMount(() => { @@ -107,31 +107,27 @@ export default function Taskbar() { }); return ( -
    -
    +
    +
    {/* Programs section - left side */}
    - {(program) => ( - - )} + onClick={() => handleTaskbarProgramClick(program.id)} + > + + {program.label} + + )} +
    {/* System tray - right side */} @@ -142,11 +138,7 @@ export default function Taskbar() { title="Open Wallet" onClick={handleWalletClick} > - Wallet + Wallet {/* Date & Time */} @@ -158,4 +150,4 @@ export default function Taskbar() {
    ); -} \ No newline at end of file +} diff --git a/src/components/DrivesAndPrograms.tsx b/src/components/DrivesAndPrograms.tsx index 54bd1f0..58fd572 100644 --- a/src/components/DrivesAndPrograms.tsx +++ b/src/components/DrivesAndPrograms.tsx @@ -1,538 +1,568 @@ import { createSignal, createEffect, Show, onMount, onCleanup } from 'solid-js'; import { useWallet } from './Wallet/WalletContext'; import { Transaction } from '@mysten/sui/transactions'; -import type { SuiTransactionBlockResponse, SuiTransactionBlockResponseOptions } from '@mysten/sui/client'; +import type { + SuiTransactionBlockResponse, + SuiTransactionBlockResponseOptions, +} from '@mysten/sui/client'; import { SuiClient, getFullnodeUrl } from '@mysten/sui/client'; import { MIST_PER_SUI } from '@mysten/sui/utils'; -import { WasmIframeWrapper } from './WasmIframeWrapper'; +import WasmIframeWrapper from './WasmIframeWrapper'; import type { WasmCanvasBridgeInterface } from './hooks/createWasmCanvas'; import { usePrograms } from './ProgramWindow/programContext'; import WalletApp from './Wallet/WalletApp'; import { - DAEMON_PACKAGE_ID, - PROGRAM_REGISTRY_OBJECT_ID, - PROGRAM_MINTER_OBJECT_ID, - DISTRIBUTION_TABLE_OBJECT_ID, - DRIVE_MINTER_OBJECT_ID, - WASM_ENGINE_URL, - WASM_BINDINGS_URL + DAEMON_PACKAGE_ID, + PROGRAM_REGISTRY_OBJECT_ID, + PROGRAM_MINTER_OBJECT_ID, + DISTRIBUTION_TABLE_OBJECT_ID, + DRIVE_MINTER_OBJECT_ID, + WASM_ENGINE_URL, + WASM_BINDINGS_URL, } from '../api/constants'; interface SignAndExecuteMethodHolder { - signAndExecuteTransactionBlock: (args: { - transactionBlock: Transaction; - chain: string; - account: any; - options?: SuiTransactionBlockResponseOptions; - }) => Promise; + signAndExecuteTransactionBlock: (args: { + transactionBlock: Transaction; + chain: string; + account: any; + options?: SuiTransactionBlockResponseOptions; + }) => Promise; } interface ShopConfig { - priceMist: bigint | null; - priceSui: string | null; - isMinterEnabled: boolean; + priceMist: bigint | null; + priceSui: string | null; + isMinterEnabled: boolean; } interface UserDrive { - id: string; - name: string; - imageURL: string; + id: string; + name: string; + imageURL: string; } export default function DrivesAndPrograms() { - const { state, refreshBalances } = useWallet(); - const { - activePrograms, - restoreProgram, - bringToFront, - registerProgram, - } = usePrograms(); - const [isLoading, setIsLoading] = createSignal(false); - const [isConfigLoading, setIsConfigLoading] = createSignal(true); - const [statusMessage, setStatusMessage] = createSignal(''); - const [statusType, setStatusType] = createSignal<'info' | 'success' | 'error' | 'warning'>('info'); - const [userDrives, setUserDrives] = createSignal([]); - const [shopConfig, setShopConfig] = createSignal({ - priceMist: null, - priceSui: null, - isMinterEnabled: false, + const { state, refreshBalances: _refreshBalances } = useWallet(); + const { activePrograms, restoreProgram, bringToFront, registerProgram } = usePrograms(); + const [isLoading, setIsLoading] = createSignal(false); + const [isConfigLoading, setIsConfigLoading] = createSignal(true); + const [, setStatusMessage] = createSignal(''); + const [, setStatusType] = createSignal<'info' | 'success' | 'error' | 'warning'>('info'); + const [userDrives, setUserDrives] = createSignal([]); + const [shopConfig, setShopConfig] = createSignal({ + priceMist: null, + priceSui: null, + isMinterEnabled: false, + }); + const [configValid, setConfigValid] = createSignal(false); + const [viewerBridge, setViewerBridge] = createSignal(null); + const [webGPUSupported, setWebGPUSupported] = createSignal(true); // Assume true until checked + + // Check WebGPU support on mount + onMount(() => { + if (typeof navigator !== 'undefined' && !('gpu' in navigator)) { + setWebGPUSupported(false); + console.error('WebGPU Check Failed: Not supported in this browser.'); + } else { + console.log('WebGPU Check Passed.'); + } + }); + + const launchWalletApp = () => { + const walletLabel = 'Wallet'; + const existingWalletProgram = activePrograms.find((p) => p.label === walletLabel); + + if (existingWalletProgram) { + if (existingWalletProgram.isMinimized) { + restoreProgram(existingWalletProgram.id); + } else { + bringToFront(existingWalletProgram.id); + } + } else { + registerProgram({ + label: walletLabel, + iconPath: '/icons/wallet.avif', + component: WalletApp, + initialWidth: 720, + initialHeight: 480, + }); + } + }; + + const sendDefaultDriveModel = () => { + const bridge = viewerBridge(); + if (bridge?.isReady()) { + // Use Drive: null which was triggering the model loading + console.log('Sending Drive: null event to trigger model loading'); + bridge.queueEventForWasm({ Drive: null as any }); + } + }; + + const handleWasmReady = (bridge: WasmCanvasBridgeInterface) => { + console.log('DrivesAndPrograms WASM canvas is ready.'); + setViewerBridge(bridge); + + // Add listener for events coming back from WASM + const unsubscribe = bridge.onWasmEvent((event) => { + console.log('Received event from WASM:', event); }); - const [configValid, setConfigValid] = createSignal(false); - const [viewerBridge, setViewerBridge] = createSignal(null); - const [webGPUSupported, setWebGPUSupported] = createSignal(true); // Assume true until checked - - // Check WebGPU support on mount - onMount(() => { - if (typeof navigator !== 'undefined' && !('gpu' in navigator)) { - setWebGPUSupported(false); - console.error("WebGPU Check Failed: Not supported in this browser."); - } else { - console.log("WebGPU Check Passed."); - } + + // Clean up the listener when component is disposed + onCleanup(() => { + console.log('Cleaning up WASM event listener'); + unsubscribe(); }); - const launchWalletApp = () => { - const walletLabel = 'Wallet'; - const existingWalletProgram = activePrograms.find(p => p.label === walletLabel); - - if (existingWalletProgram) { - if (existingWalletProgram.isMinimized) { - restoreProgram(existingWalletProgram.id); - } else { - bringToFront(existingWalletProgram.id); - } - } else { - registerProgram({ - label: walletLabel, - iconPath: '/icons/wallet.avif', - component: WalletApp, - initialWidth: 720, - initialHeight: 480, - }); - } - }; - - const sendDefaultDriveModel = () => { - const bridge = viewerBridge(); - if (bridge?.isReady()) { - // Use Drive: null which was triggering the model loading - console.log("Sending Drive: null event to trigger model loading"); - bridge.queueEventForWasm({ Drive: null as any }); - } - }; - - const handleWasmReady = (bridge: WasmCanvasBridgeInterface) => { - console.log("DrivesAndPrograms WASM canvas is ready."); - setViewerBridge(bridge); - - // Add listener for events coming back from WASM - const unsubscribe = bridge.onWasmEvent((event) => { - console.log("Received event from WASM:", event); - }); - - // Clean up the listener when component is disposed - onCleanup(() => { - console.log("Cleaning up WASM event listener"); - unsubscribe(); - }); - - console.log("Sending drive model now"); - sendDefaultDriveModel(); - }; - - const getSuiClient = () => - // state.network is guaranteed to be a valid NetworkType ('mainnet' | 'testnet') - new SuiClient({ url: getFullnodeUrl(state.network) }) - ; - - const canBuyDrive = () => { - // Check if wallet is connected - if (!state.isConnected || !state.activeAccount) return false; - - // Check if shop config is valid - if (isConfigLoading() || !shopConfig().isMinterEnabled) return false; - - // Check if price is available - if (shopConfig().priceMist === null || shopConfig().priceSui === null) return false; - - // Check if user has enough balance - const suiBalance = state.balances.find(b => b.symbol === 'SUI'); - if (shopConfig().priceMist && suiBalance && suiBalance.balance) { - try { - const balanceAmount = BigInt(suiBalance.balance); - if (balanceAmount < shopConfig().priceMist!) return false; - } catch (e) { - return false; - } - } - - if (isLoading()) return false; - - if (!configValid()) return false; - - return true; - }; - - const canMintProgram = () => { - if (!state.isConnected || !state.activeAccount) return false; - - if (userDrives().length === 0) return false; - - if (isLoading()) return false; - - if (!configValid()) return false; - - return true; - }; - - const checkRequiredIds = (): boolean => { - const areSet = DAEMON_PACKAGE_ID && !DAEMON_PACKAGE_ID.includes("PLACEHOLDER") && - DRIVE_MINTER_OBJECT_ID && !DRIVE_MINTER_OBJECT_ID.includes("PLACEHOLDER") && - PROGRAM_MINTER_OBJECT_ID && !PROGRAM_MINTER_OBJECT_ID.includes("PLACEHOLDER") && - PROGRAM_REGISTRY_OBJECT_ID && !PROGRAM_REGISTRY_OBJECT_ID.includes("PLACEHOLDER") && - DISTRIBUTION_TABLE_OBJECT_ID && !DISTRIBUTION_TABLE_OBJECT_ID.includes("PLACEHOLDER"); - - setConfigValid(areSet); - - if (!areSet) { - setStatusMessage("Configuration error: Required Object IDs not set correctly"); - setStatusType('error'); - console.error("Placeholder IDs detected. Update DrivesAndPrograms.tsx."); - } - return areSet; - }; - - const fetchShopConfig = async () => { - if (!checkRequiredIds()) { setIsConfigLoading(false); return; } - if (!state.isConnected) { setIsConfigLoading(false); return; } - - setIsConfigLoading(true); - const client = getSuiClient(); - - try { - const minterObject = await client.getObject({ - id: DRIVE_MINTER_OBJECT_ID, - options: { showContent: true }, - }); - - if (minterObject.data?.content?.dataType === 'moveObject') { - const fields = minterObject.data.content.fields as any; - const priceMist = BigInt(fields.price || '0'); - const priceSui = (Number(priceMist) / Number(MIST_PER_SUI)).toFixed(2); - const isEnabled = fields.enabled === true; - - setShopConfig({ priceMist, priceSui, isMinterEnabled: isEnabled }); - } else { - throw new Error("Could not parse EncryptedDriveMinter object content"); - } - } catch (error) { - console.error("Error fetching shop configuration:", error); - const errorMessage = error instanceof Error ? error.message : String(error); - setStatusMessage(`Error loading shop: ${errorMessage}`); - setStatusType('error'); - setShopConfig({ priceMist: null, priceSui: null, isMinterEnabled: false }); - } finally { - setIsConfigLoading(false); - } - }; - - const fetchUserDrives = async () => { - if (!state.isConnected || !state.activeAccount) { - setUserDrives([]); - return; - } - - if (!DAEMON_PACKAGE_ID || DAEMON_PACKAGE_ID.includes("PLACEHOLDER")) { - setStatusMessage("Configuration error: Invalid package ID"); - setStatusType('error'); - setUserDrives([]); - return; - } - - setIsLoading(true); - setStatusMessage("Fetching drives..."); - setStatusType('info'); - const client = getSuiClient(); - const ownerAddress = state.activeAccount.address; - const driveType = `${DAEMON_PACKAGE_ID}::encrypted_drive::EncryptedDrive`; - - try { - const ownedObjects = await client.getOwnedObjects({ - owner: ownerAddress, - options: { - showType: true, - showContent: true, - showDisplay: true, - }, - }); - - const drives: UserDrive[] = ownedObjects.data - .map((obj) => { - if (obj.data?.type === driveType && obj.data?.content?.dataType === 'moveObject' && obj.data.content.fields) { - return { - id: obj.data.objectId, - name: `Encrypted Drive`, - imageURL: `/icons/drive-default.gif`, - }; - } else { - return null; - } - }) - .filter((drive): drive is UserDrive => drive !== null); - - setUserDrives(drives); - - if (drives.length === 0) { - setStatusMessage("No drives found in your wallet"); - setStatusType('info'); - } else { - setStatusMessage(`Found ${drives.length} drive${drives.length !== 1 ? 's' : ''}`); - setStatusType('success'); - } - - } catch (error) { - console.error("Error fetching user drives:", error); - const errorMsg = error instanceof Error ? error.message : String(error); - setStatusMessage(`Error fetching drives: ${errorMsg}`); - setStatusType('error'); - setUserDrives([]); - } finally { - setIsLoading(false); - } - }; - - const buyEncryptedDrive = async () => { - if (!state.isConnected || !state.activeAccount || !state.selectedWallet) { - setStatusMessage('Please connect your wallet first'); - setStatusType('warning'); - return; - } - - if (!checkRequiredIds()) { - setStatusMessage('Cannot purchase: Configuration error'); - setStatusType('error'); - return; - } - - const currentShopConfig = shopConfig(); - if (isConfigLoading() || currentShopConfig.priceMist === null) { - setStatusMessage('Cannot purchase: Shop configuration loading or invalid'); - setStatusType('warning'); - return; - } - - if (!currentShopConfig.isMinterEnabled) { - setStatusMessage('Cannot purchase: Shop is currently disabled'); - setStatusType('warning'); - return; - } - - setIsLoading(true); - setStatusMessage(`Purchasing drive for ${currentShopConfig.priceSui} SUI...`); - setStatusType('info'); - const currentPackageId = DAEMON_PACKAGE_ID; - const currentMinterId = DRIVE_MINTER_OBJECT_ID; - const priceInMist = currentShopConfig.priceMist; - - try { - const tx = new Transaction(); - const [paymentCoin] = tx.splitCoins(tx.gas, [priceInMist]); - const targetFunction = `${currentPackageId}::encrypted_drive::mint`; - - tx.moveCall({ - target: targetFunction, - arguments: [tx.object(currentMinterId), paymentCoin], - typeArguments: ['0x2::sui::SUI'], - }); - - const signAndExecute = state.selectedWallet.features['sui:signAndExecuteTransactionBlock'] as SignAndExecuteMethodHolder; - if (!signAndExecute) throw new Error('Wallet does not support signAndExecuteTransactionBlock'); - - const result = await signAndExecute.signAndExecuteTransactionBlock({ - transactionBlock: tx, - chain: state.activeAccount.chains[0], - account: state.activeAccount, - options: { showEffects: true, showEvents: true, showObjectChanges: true, showBalanceChanges: true } - }); - - if (result.effects?.status?.status === 'success') { - setStatusMessage(`Successfully purchased 1 Encrypted Drive!`); - setStatusType('success'); - await fetchUserDrives(); - await refreshBalances(); - } else { - const errorMsg = result.effects?.status?.error || 'Unknown execution error'; - throw new Error(`Transaction failed: ${errorMsg}`); - } - } catch (error) { - console.error('Error buying encrypted drive:', error); - const errorMessage = error instanceof Error ? error.message : String(error); - - if (errorMessage.includes("GasBalanceTooLow")) { - setStatusMessage(`Error: Insufficient SUI balance`); - } else if (errorMessage.includes("IncorrectSigner") || errorMessage.includes("Signature validation failed")) { - setStatusMessage(`Error: Wallet signature issue`); - } else if (errorMessage.includes("EMintingDisabled")) { - setStatusMessage(`Error: Purchasing is disabled`); - } else if (errorMessage.includes("EIncorrectPaymentAmount")) { - setStatusMessage(`Error: Incorrect payment amount`); - await fetchShopConfig(); - } else { - setStatusMessage(`Error: ${errorMessage}`); - } - setStatusType('error'); - } finally { - setIsLoading(false); - } - }; - - const mintProgram = async () => { - const drives = userDrives(); - - if (!state.isConnected || !state.activeAccount || !state.selectedWallet) { - setStatusMessage('Please connect wallet first'); - setStatusType('warning'); - return; - } - - if (drives.length === 0) { - setStatusMessage('You need at least one drive'); - setStatusType('warning'); - return; - } - - if (!checkRequiredIds()) { - setStatusMessage('Configuration error'); - setStatusType('error'); - return; - } - - const driveToMint = drives[0]; - - setIsLoading(true); - setStatusMessage(`Decrypting drive...`); + console.log('Sending drive model now'); + sendDefaultDriveModel(); + }; + + const getSuiClient = () => + // state.network is guaranteed to be a valid NetworkType ('mainnet' | 'testnet') + new SuiClient({ url: getFullnodeUrl(state.network) }); + const canBuyDrive = () => { + // Check if wallet is connected + if (!state.isConnected || !state.activeAccount) return false; + + // Check if shop config is valid + if (isConfigLoading() || !shopConfig().isMinterEnabled) return false; + + // Check if price is available + if (shopConfig().priceMist === null || shopConfig().priceSui === null) return false; + + // Check if user has enough balance + const suiBalance = state.balances.find((b) => b.symbol === 'SUI'); + if (shopConfig().priceMist && suiBalance && suiBalance.balance) { + try { + const balanceAmount = BigInt(suiBalance.balance); + if (balanceAmount < shopConfig().priceMist!) return false; + } catch { + return false; + } + } + + if (isLoading()) return false; + + if (!configValid()) return false; + + return true; + }; + + const canMintProgram = () => { + if (!state.isConnected || !state.activeAccount) return false; + + if (userDrives().length === 0) return false; + + if (isLoading()) return false; + + if (!configValid()) return false; + + return true; + }; + + const checkRequiredIds = (): boolean => { + const areAllIdsSet = + DAEMON_PACKAGE_ID && + !DAEMON_PACKAGE_ID.includes('PLACEHOLDER') && + DRIVE_MINTER_OBJECT_ID && + !DRIVE_MINTER_OBJECT_ID.includes('PLACEHOLDER') && + PROGRAM_MINTER_OBJECT_ID && + !PROGRAM_MINTER_OBJECT_ID.includes('PLACEHOLDER') && + PROGRAM_REGISTRY_OBJECT_ID && + !PROGRAM_REGISTRY_OBJECT_ID.includes('PLACEHOLDER') && + DISTRIBUTION_TABLE_OBJECT_ID && + !DISTRIBUTION_TABLE_OBJECT_ID.includes('PLACEHOLDER'); + + setConfigValid(areAllIdsSet); + + if (!areAllIdsSet) { + setStatusMessage('Configuration error: Required Object IDs not set correctly'); + setStatusType('error'); + console.error('Placeholder IDs detected. Update DrivesAndPrograms.tsx.'); + } + return areAllIdsSet; + }; + + const fetchShopConfig = async () => { + if (!checkRequiredIds()) { + setIsConfigLoading(false); + return; + } + if (!state.isConnected) { + setIsConfigLoading(false); + return; + } + + setIsConfigLoading(true); + const client = getSuiClient(); + + try { + const minterObject = await client.getObject({ + id: DRIVE_MINTER_OBJECT_ID, + options: { showContent: true }, + }); + + if (minterObject.data?.content?.dataType === 'moveObject') { + const fields = minterObject.data.content.fields as any; + const priceMist = BigInt(fields.price || '0'); + const priceSui = (Number(priceMist) / Number(MIST_PER_SUI)).toFixed(2); + const isMinterEnabled = fields.enabled === true; + + setShopConfig({ priceMist, priceSui, isMinterEnabled }); + } else { + throw new Error('Could not parse EncryptedDriveMinter object content'); + } + } catch (error) { + console.error('Error fetching shop configuration:', error); + const errorMessage = error instanceof Error ? error.message : String(error); + setStatusMessage(`Error loading shop: ${errorMessage}`); + setStatusType('error'); + setShopConfig({ priceMist: null, priceSui: null, isMinterEnabled: false }); + } finally { + setIsConfigLoading(false); + } + }; + + const fetchUserDrives = async () => { + if (!state.isConnected || !state.activeAccount) { + setUserDrives([]); + return; + } + + if (!DAEMON_PACKAGE_ID || DAEMON_PACKAGE_ID.includes('PLACEHOLDER')) { + setStatusMessage('Configuration error: Invalid package ID'); + setStatusType('error'); + setUserDrives([]); + return; + } + + setIsLoading(true); + setStatusMessage('Fetching drives...'); + setStatusType('info'); + const client = getSuiClient(); + const ownerAddress = state.activeAccount.address; + const driveType = `${DAEMON_PACKAGE_ID}::encrypted_drive::EncryptedDrive`; + + try { + const ownedObjects = await client.getOwnedObjects({ + owner: ownerAddress, + options: { + showType: true, + showContent: true, + showDisplay: true, + }, + }); + + const drives: UserDrive[] = ownedObjects.data + .map((obj) => { + if ( + obj.data?.type === driveType && + obj.data?.content?.dataType === 'moveObject' && + obj.data.content.fields + ) { + return { + id: obj.data.objectId, + name: `Encrypted Drive`, + imageURL: `/icons/drive-default.gif`, + }; + } else { + return null; + } + }) + .filter((drive): drive is UserDrive => drive !== null); + + setUserDrives(drives); + + if (drives.length === 0) { + setStatusMessage('No drives found in your wallet'); setStatusType('info'); - const currentProgramPkgId = DAEMON_PACKAGE_ID; - const currentProgramMinterId = PROGRAM_MINTER_OBJECT_ID; - const currentRegistryId = PROGRAM_REGISTRY_OBJECT_ID; - const currentDistTableId = DISTRIBUTION_TABLE_OBJECT_ID; - - try { - const tx = new Transaction(); - const targetFunction = `${currentProgramPkgId}::monster::generate`; - const moveCallArgs = [ - tx.object(currentProgramMinterId), - tx.object(driveToMint.id), - tx.object(currentRegistryId), - tx.object(currentDistTableId), - tx.object.random() - ]; - - tx.moveCall({ target: targetFunction, arguments: moveCallArgs }); - - const signAndExecute = state.selectedWallet.features['sui:signAndExecuteTransactionBlock'] as SignAndExecuteMethodHolder; - if (!signAndExecute) throw new Error('Wallet lacks signAndExecute feature'); - - const result = await signAndExecute.signAndExecuteTransactionBlock({ - transactionBlock: tx, - chain: state.activeAccount.chains[0], - account: state.activeAccount, - options: { showEffects: true, showEvents: true, showObjectChanges: true, showBalanceChanges: true } - }); - - if (result.effects?.status?.status === 'success') { - setStatusMessage(`Successfully minted a program! Check your collection.`); - setStatusType('success'); - await fetchUserDrives(); - await refreshBalances(); - } else { - const errorMsg = result.effects?.status?.error || 'Unknown execution error'; - throw new Error(`Minting failed: ${errorMsg}`); - } - } catch (error) { - console.error('Error minting program:', error); - const errorMsg = error instanceof Error ? error.message : String(error); - setStatusMessage(`Error: ${errorMsg}`); - setStatusType('error'); - } finally { - setIsLoading(false); - } - }; - - // Initialize everything when connected - createEffect(() => { - checkRequiredIds(); - if (state.isConnected) { - fetchShopConfig(); - fetchUserDrives(); - } else { - setUserDrives([]); - setShopConfig({ priceMist: null, priceSui: null, isMinterEnabled: false }); - setStatusMessage("Connect wallet to access drives and programs"); - setStatusType('info'); - } - }); + } else { + setStatusMessage(`Found ${drives.length} drive${drives.length !== 1 ? 's' : ''}`); + setStatusType('success'); + } + } catch (error) { + console.error('Error fetching user drives:', error); + const errorMsg = error instanceof Error ? error.message : String(error); + setStatusMessage(`Error fetching drives: ${errorMsg}`); + setStatusType('error'); + setUserDrives([]); + } finally { + setIsLoading(false); + } + }; + + const buyEncryptedDrive = async () => { + if (!state.isConnected || !state.activeAccount || !state.selectedWallet) { + setStatusMessage('Please connect your wallet first'); + setStatusType('warning'); + return; + } + + if (!checkRequiredIds()) { + setStatusMessage('Cannot purchase: Configuration error'); + setStatusType('error'); + return; + } + + const currentShopConfig = shopConfig(); + if (isConfigLoading() || currentShopConfig.priceMist === null) { + setStatusMessage('Cannot purchase: Shop configuration loading or invalid'); + setStatusType('warning'); + return; + } + + if (!currentShopConfig.isMinterEnabled) { + setStatusMessage('Cannot purchase: Shop is currently disabled'); + setStatusType('warning'); + return; + } + + setIsLoading(true); + setStatusMessage(`Purchasing drive for ${currentShopConfig.priceSui} SUI...`); + setStatusType('info'); + const currentPackageId = DAEMON_PACKAGE_ID; + const currentMinterId = DRIVE_MINTER_OBJECT_ID; + const priceInMist = currentShopConfig.priceMist; + + try { + const tx = new Transaction(); + const [paymentCoin] = tx.splitCoins(tx.gas, [priceInMist]); + const targetFunction = `${currentPackageId}::encrypted_drive::mint`; + + tx.moveCall({ + target: targetFunction, + arguments: [tx.object(currentMinterId), paymentCoin], + typeArguments: ['0x2::sui::SUI'], + }); + + const signAndExecute = state.selectedWallet.features[ + 'sui:signAndExecuteTransactionBlock' + ] as SignAndExecuteMethodHolder; + if (!signAndExecute) + throw new Error('Wallet does not support signAndExecuteTransactionBlock'); + + const result = await signAndExecute.signAndExecuteTransactionBlock({ + transactionBlock: tx, + chain: state.activeAccount.chains[0], + account: state.activeAccount, + options: { + showEffects: true, + showEvents: true, + showObjectChanges: true, + showBalanceChanges: true, + }, + }); + + if (result.effects?.status?.status === 'success') { + setStatusMessage(`Successfully purchased 1 Encrypted Drive!`); + setStatusType('success'); + await fetchUserDrives(); + await _refreshBalances(); + } else { + const errorMsg = result.effects?.status?.error || 'Unknown execution error'; + throw new Error(`Transaction failed: ${errorMsg}`); + } + } catch (error) { + console.error('Error buying encrypted drive:', error); + const errorMessage = error instanceof Error ? error.message : String(error); + + if (errorMessage.includes('GasBalanceTooLow')) { + setStatusMessage(`Error: Insufficient SUI balance`); + } else if ( + errorMessage.includes('IncorrectSigner') || + errorMessage.includes('Signature validation failed') + ) { + setStatusMessage(`Error: Wallet signature issue`); + } else if (errorMessage.includes('EMintingDisabled')) { + setStatusMessage(`Error: Purchasing is disabled`); + } else if (errorMessage.includes('EIncorrectPaymentAmount')) { + setStatusMessage(`Error: Incorrect payment amount`); + await fetchShopConfig(); + } else { + setStatusMessage(`Error: ${errorMessage}`); + } + setStatusType('error'); + } finally { + setIsLoading(false); + } + }; + + const mintProgram = async () => { + const drives = userDrives(); + + if (!state.isConnected || !state.activeAccount || !state.selectedWallet) { + setStatusMessage('Please connect wallet first'); + setStatusType('warning'); + return; + } + + if (drives.length === 0) { + setStatusMessage('You need at least one drive'); + setStatusType('warning'); + return; + } + + if (!checkRequiredIds()) { + setStatusMessage('Configuration error'); + setStatusType('error'); + return; + } + + const driveToMint = drives[0]; + + setIsLoading(true); + setStatusMessage(`Decrypting drive...`); + setStatusType('info'); + const currentProgramPkgId = DAEMON_PACKAGE_ID; + const currentProgramMinterId = PROGRAM_MINTER_OBJECT_ID; + const currentRegistryId = PROGRAM_REGISTRY_OBJECT_ID; + const currentDistTableId = DISTRIBUTION_TABLE_OBJECT_ID; + + try { + const tx = new Transaction(); + const targetFunction = `${currentProgramPkgId}::monster::generate`; + const moveCallArgs = [ + tx.object(currentProgramMinterId), + tx.object(driveToMint.id), + tx.object(currentRegistryId), + tx.object(currentDistTableId), + tx.object.random(), + ]; + + tx.moveCall({ target: targetFunction, arguments: moveCallArgs }); + + const signAndExecute = state.selectedWallet.features[ + 'sui:signAndExecuteTransactionBlock' + ] as SignAndExecuteMethodHolder; + if (!signAndExecute) throw new Error('Wallet lacks signAndExecute feature'); + + const result = await signAndExecute.signAndExecuteTransactionBlock({ + transactionBlock: tx, + chain: state.activeAccount.chains[0], + account: state.activeAccount, + options: { + showEffects: true, + showEvents: true, + showObjectChanges: true, + showBalanceChanges: true, + }, + }); + + if (result.effects?.status?.status === 'success') { + setStatusMessage(`Successfully minted a program! Check your collection.`); + setStatusType('success'); + await fetchUserDrives(); + await _refreshBalances(); + } else { + const errorMsg = result.effects?.status?.error || 'Unknown execution error'; + throw new Error(`Minting failed: ${errorMsg}`); + } + } catch (error) { + console.error('Error minting program:', error); + const errorMsg = error instanceof Error ? error.message : String(error); + setStatusMessage(`Error: ${errorMsg}`); + setStatusType('error'); + } finally { + setIsLoading(false); + } + }; + + // Initialize everything when connected + createEffect(() => { + checkRequiredIds(); + if (state.isConnected) { + fetchShopConfig(); + fetchUserDrives(); + } else { + setUserDrives([]); + setShopConfig({ priceMist: null, priceSui: null, isMinterEnabled: false }); + setStatusMessage('Connect wallet to access drives and programs'); + setStatusType('info'); + } + }); + + return ( +
    + {/* Window content */} +
    + {/* Connection State */} + +
    +
    +

    Please connect your wallet to access drives and programs

    +
    - return ( -
    - {/* Window content */} -
    - {/* Connection State */} - -
    -
    -

    Please connect your wallet to access drives and programs

    -
    - - {/* Wallet connection button */} - -
    -     - - {/* Main Content when Connected */} - -
    - {/* 3D Drive Model */} -
    - {/* Show WebGPU error message if not supported */} - -
    -
    -

    WebGPU Not Supported

    -

    Please use a browser that supports WebGPU

    -
    -
    -     - - {/* Render the 3D model if WebGPU is supported */} - -
    - -
    -     -
    - - {/* Drive Count */} -
    -

    - {userDrives().length} drives owned -

    -
    - - {/* Buy Button */} - - - {/* Decrypt Button */} - -
    -     + {/* Wallet connection button */} + +
    + + + {/* Main Content when Connected */} + +
    + {/* 3D Drive Model */} +
    + {/* Show WebGPU error message if not supported */} + +
    +
    +

    WebGPU Not Supported

    +

    Please use a browser that supports WebGPU

    +
    +
    +     + + {/* Render the 3D model if WebGPU is supported */} + +
    + +
    +
    -
    - ); -} \ No newline at end of file + + {/* Drive Count */} +
    +

    {userDrives().length} drives owned

    +
    + + {/* Buy Button */} + + + {/* Decrypt Button */} + +
    + +
    +
    + ); +} diff --git a/src/components/Icons/ArrowsPointingIn.tsx b/src/components/Icons/ArrowsPointingIn.tsx index b1c2084..8820b7d 100644 --- a/src/components/Icons/ArrowsPointingIn.tsx +++ b/src/components/Icons/ArrowsPointingIn.tsx @@ -1,10 +1,25 @@ +import { mergeProps } from 'solid-js'; + interface ArrowsPointingInProps { - className?: string; + class?: string; } export default function ArrowsPointingIn(_props: ArrowsPointingInProps) { - const props = mergeProps({ className: "" }, _props); -return - - ; -} \ No newline at end of file + const props = mergeProps({ class: '' }, _props); + return ( + + + + ); +} diff --git a/src/components/Icons/ArrowsPointingOut.tsx b/src/components/Icons/ArrowsPointingOut.tsx index ebd5674..b42ac06 100644 --- a/src/components/Icons/ArrowsPointingOut.tsx +++ b/src/components/Icons/ArrowsPointingOut.tsx @@ -1,10 +1,25 @@ +import { mergeProps } from 'solid-js'; + interface ArrowsPointingOutProps { - className?: string; + class?: string; } export default function ArrowsPointingOut(_props: ArrowsPointingOutProps) { - const props = mergeProps({ className: "" }, _props); -return - - ; -} \ No newline at end of file + const props = mergeProps({ class: '' }, _props); + return ( + + + + ); +} diff --git a/src/components/Icons/Minus.tsx b/src/components/Icons/Minus.tsx index 65556c9..1431663 100644 --- a/src/components/Icons/Minus.tsx +++ b/src/components/Icons/Minus.tsx @@ -1,10 +1,21 @@ +import { mergeProps } from 'solid-js'; + interface MinusProps { - className?: string; + class?: string; } export default function Minus(_props: MinusProps) { - const props = mergeProps({ className: "" }, _props); -return - - ; -} \ No newline at end of file + const props = mergeProps({ class: '' }, _props); + return ( + + + + ); +} diff --git a/src/components/Icons/X.tsx b/src/components/Icons/X.tsx index 3e5b379..0cc8d5d 100644 --- a/src/components/Icons/X.tsx +++ b/src/components/Icons/X.tsx @@ -1,10 +1,21 @@ +import { mergeProps } from 'solid-js'; + interface XProps { - className?: string; + class?: string; } export default function X(_props: XProps) { - const props = mergeProps({ className: "" }, _props); -return - - ; -} \ No newline at end of file + const props = mergeProps({ class: '' }, _props); + return ( + + + + ); +} diff --git a/src/components/ProgramDatabase.tsx b/src/components/ProgramDatabase.tsx index 33c0887..5d2c4c3 100644 --- a/src/components/ProgramDatabase.tsx +++ b/src/components/ProgramDatabase.tsx @@ -1,45 +1,40 @@ -import { createSignal, createEffect, For, Show, onMount } from "solid-js"; -import { WasmIframeWrapper } from "./WasmIframeWrapper"; -import type { WasmCanvasBridgeInterface } from "./hooks/createWasmCanvas"; -import type { - EventPayload, - ViewModel, - ViewModelPalette, - ViewModelAddon, -} from "../api/game/events"; -import StatsList from "./StatsList"; -import { useWallet } from "./Wallet/WalletContext"; -import { SuiClient, getFullnodeUrl } from "@mysten/sui/client"; -import { PROGRAM_TYPE_STRING, WASM_ENGINE_URL, WASM_BINDINGS_URL } from "../api/constants"; +import { createSignal, createEffect, For, Show, onMount } from 'solid-js'; +import WasmIframeWrapper from './WasmIframeWrapper'; +import type { WasmCanvasBridgeInterface } from './hooks/createWasmCanvas'; +import type { EventPayload, ViewModel, ViewModelPalette, ViewModelAddon } from '../api/game/events'; +import StatsList from './StatsList'; +import { useWallet } from './Wallet/WalletContext'; +import { SuiClient, getFullnodeUrl } from '@mysten/sui/client'; +import { PROGRAM_TYPE_STRING, WASM_ENGINE_URL, WASM_BINDINGS_URL } from '../api/constants'; // Enum to match Rust-side ProgramPartName for WASM enum ProgramPartName { - Empty = "Empty", - EmptyBody = "EmptyBody", - SimpleBody = "SimpleBody", - SimpleLimb = "SimpleLimb", - SimpleEye = "SimpleEye", - VirusLimb = "VirusLimb", + EMPTY = 'Empty', + EMPTY_BODY = 'EmptyBody', + SIMPLE_BODY = 'SimpleBody', + SIMPLE_LIMB = 'SimpleLimb', + SIMPLE_EYE = 'SimpleEye', + VIRUS_LIMB = 'VirusLimb', // Robot - BoxRobotBody = "BoxRobotBody", - RoundRobotBody = "RoundRobotBody", - BoxRobotHead = "BoxRobotHead", - PyramidRobotHead = "PyramidRobotHead", - SphereRobotHead = "SphereRobotHead", - CameraRobotEye = "CameraRobotEye", - FeelerRobotEye = "FeelerRobotEye", - SleekCameraRobotEye = "SleekCameraRobotEye", - HexagonalRobotLegBase = "HexagonalRobotLegBase", - CrownedRobotLegBase = "CrownedRobotLegBase", - StraightRobotLegTibia = "StraightRobotLegTibia", - MiddleRobotLegTibia = "MiddleRobotLegTibia", - SideRobotLegTibia = "SideRobotLegTibia", - HexagonalRobotLegJoint = "HexagonalRobotLegJoint", - CrossRobotLegJoint = "CrossRobotLegJoint", - StarRobotLegJoint = "StarRobotLegJoint", - SideRobotLegEnd = "SideRobotLegEnd", + BOX_ROBOT_BODY = 'BoxRobotBody', + ROUND_ROBOT_BODY = 'RoundRobotBody', + BOX_ROBOT_HEAD = 'BoxRobotHead', + PYRAMID_ROBOT_HEAD = 'PyramidRobotHead', + SPHERE_ROBOT_HEAD = 'SphereRobotHead', + CAMERA_ROBOT_EYE = 'CameraRobotEye', + FEELER_ROBOT_EYE = 'FeelerRobotEye', + SLEEK_CAMERA_ROBOT_EYE = 'SleekCameraRobotEye', + HEXAGONAL_ROBOT_LEG_BASE = 'HexagonalRobotLegBase', + CROWNED_ROBOT_LEG_BASE = 'CrownedRobotLegBase', + STRAIGHT_ROBOT_LEG_TIBIA = 'StraightRobotLegTibia', + MIDDLE_ROBOT_LEG_TIBIA = 'MiddleRobotLegTibia', + SIDE_ROBOT_LEG_TIBIA = 'SideRobotLegTibia', + HEXAGONAL_ROBOT_LEG_JOINT = 'HexagonalRobotLegJoint', + CROSS_ROBOT_LEG_JOINT = 'CrossRobotLegJoint', + STAR_ROBOT_LEG_JOINT = 'StarRobotLegJoint', + SIDE_ROBOT_LEG_END = 'SideRobotLegEnd', // Addon - AntennaRobotAddon = "AntennaRobotAddon", + ANTENNA_ROBOT_ADDON = 'AntennaRobotAddon', } // Helper function to create colors in format WASM expects @@ -63,23 +58,23 @@ const DEFAULT_MINI_PALETTE = { // Default parts for programs const DEFAULT_PARTS = [ { - name: ProgramPartName.SimpleBody, + name: ProgramPartName.SIMPLE_BODY, params: [4, 5, 50, 40, 20, 85], }, { - name: ProgramPartName.SimpleEye, + name: ProgramPartName.SIMPLE_EYE, params: [], }, { - name: ProgramPartName.SimpleLimb, + name: ProgramPartName.SIMPLE_LIMB, params: [2], }, { - name: ProgramPartName.Empty, + name: ProgramPartName.EMPTY, params: [], }, { - name: ProgramPartName.Empty, + name: ProgramPartName.EMPTY, params: [], }, ]; @@ -135,7 +130,7 @@ interface SuiVersion { } interface SuiProgramDataFields { - id: { id: string; }; + id: { id: string }; protocol: Record | string; version: SuiVersion; generated_on: SuiVersion; @@ -154,65 +149,66 @@ function mapPartNameToEnum(name: string): ProgramPartName { // Direct mapping for GLTF part names switch (name) { // Robot Body parts - case "BoxRobotBody": - return ProgramPartName.BoxRobotBody; - case "RoundRobotBody": - return ProgramPartName.RoundRobotBody; + case 'BoxRobotBody': + return ProgramPartName.BOX_ROBOT_BODY; + case 'RoundRobotBody': + return ProgramPartName.ROUND_ROBOT_BODY; // Robot Head parts - case "BoxRobotHead": - return ProgramPartName.BoxRobotHead; - case "PyramidRobotHead": - return ProgramPartName.PyramidRobotHead; - case "SphereRobotHead": - return ProgramPartName.SphereRobotHead; + case 'BoxRobotHead': + return ProgramPartName.BOX_ROBOT_HEAD; + case 'PyramidRobotHead': + return ProgramPartName.PYRAMID_ROBOT_HEAD; + case 'SphereRobotHead': + return ProgramPartName.SPHERE_ROBOT_HEAD; // Robot Eye parts - case "CameraRobotEye": - return ProgramPartName.CameraRobotEye; - case "FeelerRobotEye": - return ProgramPartName.FeelerRobotEye; - case "SleekCameraRobotEye": - return ProgramPartName.SleekCameraRobotEye; + case 'CameraRobotEye': + return ProgramPartName.CAMERA_ROBOT_EYE; + case 'FeelerRobotEye': + return ProgramPartName.FEELER_ROBOT_EYE; + case 'SleekCameraRobotEye': + return ProgramPartName.SLEEK_CAMERA_ROBOT_EYE; // Robot Addon parts - case "AntennaRobotAddon": - return ProgramPartName.AntennaRobotAddon; + case 'AntennaRobotAddon': + return ProgramPartName.ANTENNA_ROBOT_ADDON; // Robot Leg Base parts - case "HexagonalRobotLegBase": - return ProgramPartName.HexagonalRobotLegBase; - case "CrownedRobotLegBase": - return ProgramPartName.CrownedRobotLegBase; + case 'HexagonalRobotLegBase': + return ProgramPartName.HEXAGONAL_ROBOT_LEG_BASE; + case 'CrownedRobotLegBase': + return ProgramPartName.CROWNED_ROBOT_LEG_BASE; // Robot Leg Tibia parts - case "StraightRobotLegTibia": - return ProgramPartName.StraightRobotLegTibia; - case "MiddleRobotLegTibia": - return ProgramPartName.MiddleRobotLegTibia; - case "SideRobotLegTibia": - return ProgramPartName.SideRobotLegTibia; + case 'StraightRobotLegTibia': + return ProgramPartName.STRAIGHT_ROBOT_LEG_TIBIA; + case 'MiddleRobotLegTibia': + return ProgramPartName.MIDDLE_ROBOT_LEG_TIBIA; + case 'SideRobotLegTibia': + return ProgramPartName.SIDE_ROBOT_LEG_TIBIA; // Robot Leg Joint parts - case "HexagonalRobotLegJoint": - return ProgramPartName.HexagonalRobotLegJoint; - case "CrossRobotLegJoint": - return ProgramPartName.CrossRobotLegJoint; - case "StarRobotLegJoint": - return ProgramPartName.StarRobotLegJoint; + case 'HexagonalRobotLegJoint': + return ProgramPartName.HEXAGONAL_ROBOT_LEG_JOINT; + case 'CrossRobotLegJoint': + return ProgramPartName.CROSS_ROBOT_LEG_JOINT; + case 'StarRobotLegJoint': + return ProgramPartName.STAR_ROBOT_LEG_JOINT; // Robot Leg End parts - case "SideRobotLegEnd": - return ProgramPartName.SideRobotLegEnd; + case 'SideRobotLegEnd': + return ProgramPartName.SIDE_ROBOT_LEG_END; // Fallback to legacy mapping for backwards compatibility - default: + default: { const lowerName = name.toLowerCase(); - if (lowerName.includes("body")) return ProgramPartName.SimpleBody; - if (lowerName.includes("eye")) return ProgramPartName.SimpleEye; - if (lowerName.includes("limb")) return ProgramPartName.SimpleLimb; + if (lowerName.includes('body')) return ProgramPartName.SIMPLE_BODY; + if (lowerName.includes('eye')) return ProgramPartName.SIMPLE_EYE; + if (lowerName.includes('limb')) return ProgramPartName.SIMPLE_LIMB; // Default to Empty for unknown parts - return ProgramPartName.Empty; + return ProgramPartName.EMPTY; + } } } @@ -233,38 +229,38 @@ const DEFAULT_PROGRAM_VIEW_MODEL: ViewModel = { }; const DEFAULT_PROGRAM_DATA_PLACEHOLDER: Program = { - id: "default-placeholder", - name: "NO DAE-MON SELECTED", - suiObjectId: "", - source: "N/A", - type: "N/A", + id: 'default-placeholder', + name: 'NO DAE-MON SELECTED', + suiObjectId: '', + source: 'N/A', + type: 'N/A', speed: 0, corruption: 0, maxHealth: 0, health: 0, damage: 0, - mintDate: "N/A", - protocol: "N/A", + mintDate: 'N/A', + protocol: 'N/A', viewModel: DEFAULT_PROGRAM_VIEW_MODEL, }; // --- Date Formatting Helper --- function formatTimestamp(timestampMs: string | undefined | null): string { - if (!timestampMs) return "N/A"; + if (!timestampMs) return 'N/A'; try { const date = new Date(parseInt(timestampMs)); - if (isNaN(date.getTime())) return "Invalid Date"; // Check if date is valid + if (isNaN(date.getTime())) return 'Invalid Date'; // Check if date is valid // Example format: "4/17/2024, 2:30:15 PM" return date.toLocaleString(undefined, { - year: "numeric", - month: "numeric", - day: "numeric", - hour: "numeric", - minute: "numeric", - second: "numeric", + year: 'numeric', + month: 'numeric', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', }); } catch (e) { - return "Invalid Date"; + return 'Invalid Date - ' + e; } } @@ -313,9 +309,7 @@ function hsvToRgb(h: number, s: number, v: number): [number, number, number] { return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; } -function transformSuiPaletteToWasmPalette( - suiPalette: SuiMiniPalette | undefined, -): any | null { +function transformSuiPaletteToWasmPalette(suiPalette: SuiMiniPalette | undefined): any | null { if ( !suiPalette || !suiPalette.primary?.fields || @@ -323,22 +317,31 @@ function transformSuiPaletteToWasmPalette( !suiPalette.highlight?.fields ) { // Core colors are missing or malformed, SUI palette is unusable for WASM basic needs. - console.warn("WASM Palette Prep: SUI palette is missing or core fields (primary, accent, highlight) are invalid. Cannot use SUI palette."); + console.warn( + 'WASM Palette Prep: SUI palette is missing or core fields (primary, accent, highlight) are invalid. Cannot use SUI palette.', + ); return null; } // Validate that the fields contain proper HSV values const validateColor = (color: any, name: string): boolean => { - if (!color || typeof color.hue !== 'number' || typeof color.saturation !== 'number' || typeof color.value !== 'number') { + if ( + !color || + typeof color.hue !== 'number' || + typeof color.saturation !== 'number' || + typeof color.value !== 'number' + ) { console.warn(`WASM Palette Prep: Invalid ${name} color format:`, color); return false; } return true; }; - if (!validateColor(suiPalette.primary.fields, 'primary') || + if ( + !validateColor(suiPalette.primary.fields, 'primary') || !validateColor(suiPalette.accent.fields, 'accent') || - !validateColor(suiPalette.highlight.fields, 'highlight')) { + !validateColor(suiPalette.highlight.fields, 'highlight') + ) { return null; } @@ -349,11 +352,10 @@ function transformSuiPaletteToWasmPalette( accent: suiPalette.accent.fields, // Known to be valid here highlight: suiPalette.highlight.fields, // Known to be valid here neutral: suiPalette.neutral?.fields || DEFAULT_MINI_PALETTE.neutral, - background: - suiPalette.background?.fields || DEFAULT_MINI_PALETTE.background, + background: suiPalette.background?.fields || DEFAULT_MINI_PALETTE.background, }; - console.log("WASM Palette Prep: Successfully transformed SUI palette:", result); + console.log('WASM Palette Prep: Successfully transformed SUI palette:', result); return result; } @@ -378,10 +380,8 @@ function transformSuiPaletteToViewModelPalette( return defaultViewModelPalette; } - const scale = (val: number | undefined) => - typeof val === "number" ? val / 255 : 0.5; - const scaleHue = (val: number | undefined) => - typeof val === "number" ? val / 360 : 0; + const scale = (val: number | undefined) => (typeof val === 'number' ? val / 255 : 0.5); + const scaleHue = (val: number | undefined) => (typeof val === 'number' ? val / 360 : 0); const defaultSuiColorFields: SuiMiniColor = { hue: 0, @@ -392,10 +392,8 @@ function transformSuiPaletteToViewModelPalette( const primaryColorFields = suiPalette.primary.fields; const accentColorFields = suiPalette.accent.fields; const highlightColorFields = suiPalette.highlight.fields; - const neutralColorFields = - suiPalette.neutral?.fields || defaultSuiColorFields; - const backgroundColorFields = - suiPalette.background?.fields || defaultSuiColorFields; + const neutralColorFields = suiPalette.neutral?.fields || defaultSuiColorFields; + const backgroundColorFields = suiPalette.background?.fields || defaultSuiColorFields; return { primary: hsvToRgb( @@ -426,9 +424,7 @@ function transformSuiPaletteToViewModelPalette( }; } -function transformSuiPartsToWasmParts( - suiParts: SuiProgramPart[] | undefined, -): ProgramPartData[] { +function transformSuiPartsToWasmParts(suiParts: SuiProgramPart[] | undefined): ProgramPartData[] { if (!suiParts || !suiParts.length) { // Return some default parts if none provided return DEFAULT_PARTS; @@ -437,13 +433,12 @@ function transformSuiPartsToWasmParts( // Map SUI parts to the format expected by WASM return suiParts.map((part) => { // Try to map part names to ProgramPartName enum values - let partName = ProgramPartName.Empty; - const lowerName = - typeof part.name === "string" ? part.name.toLowerCase() : ""; + let partName = ProgramPartName.EMPTY; + const lowerName = typeof part.name === 'string' ? part.name.toLowerCase() : ''; - if (lowerName.includes("body")) partName = ProgramPartName.SimpleBody; - else if (lowerName.includes("limb")) partName = ProgramPartName.SimpleLimb; - else if (lowerName.includes("eye")) partName = ProgramPartName.SimpleEye; + if (lowerName.includes('body')) partName = ProgramPartName.SIMPLE_BODY; + else if (lowerName.includes('limb')) partName = ProgramPartName.SIMPLE_LIMB; + else if (lowerName.includes('eye')) partName = ProgramPartName.SIMPLE_EYE; return { name: partName, @@ -454,11 +449,11 @@ function transformSuiPartsToWasmParts( function transformSuiPartsToViewModelAddons(suiParts: any): ViewModelAddon[] { if (!suiParts) { - console.warn("SuiParts is undefined, returning empty addons array."); + console.warn('SuiParts is undefined, returning empty addons array.'); return []; } if (!Array.isArray(suiParts)) { - console.warn("SuiParts is not an array, returning empty addons array."); + console.warn('SuiParts is not an array, returning empty addons array.'); return []; } @@ -471,14 +466,14 @@ function transformSuiPartsToViewModelAddons(suiParts: any): ViewModelAddon[] { let partName: string | undefined; let partParams: number[] = []; - if (typeof part === "object" && part !== null) { + if (typeof part === 'object' && part !== null) { // Try different ways to extract part name - if (typeof part.name === "string") { + if (typeof part.name === 'string') { partName = part.name; - } else if (part.fields && typeof part.fields.name === "string") { + } else if (part.fields && typeof part.fields.name === 'string') { partName = part.fields.name; - } else if (typeof part.type === "string" && part.type.includes("::")) { - const typeParts = part.type.split("::"); + } else if (typeof part.type === 'string' && part.type.includes('::')) { + const typeParts = part.type.split('::'); partName = typeParts[typeParts.length - 1]; } @@ -493,24 +488,21 @@ function transformSuiPartsToViewModelAddons(suiParts: any): ViewModelAddon[] { } // --- FIX: Check if partName is a string before using .toLowerCase() --- - if (typeof partName === "string" && partName.length > 0) { + if (typeof partName === 'string' && partName.length > 0) { const lowerCaseName = partName.toLowerCase(); // Assign initial addonKey based on valid name addonKey = partName; // Try specific mapping - if (lowerCaseName.includes("lizard")) addonKey = "Lizard"; - else if (lowerCaseName.includes("head")) addonKey = "RoundHead"; - else if (lowerCaseName.includes("eye")) addonKey = "SimpleEye"; - else if (lowerCaseName.includes("tail")) addonKey = "SimpleTail"; - else if (lowerCaseName.includes("limb")) addonKey = "SimpleLimb"; + if (lowerCaseName.includes('lizard')) addonKey = 'Lizard'; + else if (lowerCaseName.includes('head')) addonKey = 'RoundHead'; + else if (lowerCaseName.includes('eye')) addonKey = 'SimpleEye'; + else if (lowerCaseName.includes('tail')) addonKey = 'SimpleTail'; + else if (lowerCaseName.includes('limb')) addonKey = 'SimpleLimb'; // If specific mapping didn't change addonKey, it remains partName } else { // If name is not a valid string, addonKey remains the default `UnknownPart${index}` - console.warn( - `Part at index ${index} has invalid or missing name:`, - partName, - ); + console.warn(`Part at index ${index} has invalid or missing name:`, partName); } // --------------------------------------------------------------------- @@ -518,48 +510,40 @@ function transformSuiPartsToViewModelAddons(suiParts: any): ViewModelAddon[] { // Parameter mapping (remains speculative) - Check if partParams exists if (partParams && partParams.length > 0) { - if (addonKey === "Lizard" || addonKey === "SimpleLimb") { - if (partParams.length > 0) - addon[addonKey]!.size = ((partParams[0] % 2000) + 500) / 1000; + if (addonKey === 'Lizard' || addonKey === 'SimpleLimb') { + if (partParams.length > 0) addon[addonKey]!.size = ((partParams[0] % 2000) + 500) / 1000; if (partParams.length > 1) addon[addonKey]!.length = partParams[1] % 10; - } else if (addonKey === "SimpleEye") { + } else if (addonKey === 'SimpleEye') { if (partParams.length > 0) addon[addonKey]!.size_ratio = ((partParams[0] % 400) + 100) / 1000; - } else if (addonKey === "SimpleTail") { - if (partParams.length > 0) - addon[addonKey]!.end = ((partParams[0] % 500) + 100) / 1000; - if (partParams.length > 1) - addon[addonKey]!.length = (partParams[1] % 10) + 2; + } else if (addonKey === 'SimpleTail') { + if (partParams.length > 0) addon[addonKey]!.end = ((partParams[0] % 500) + 100) / 1000; + if (partParams.length > 1) addon[addonKey]!.length = (partParams[1] % 10) + 2; } else { // Generic fallback - if (partParams.length > 0) - addon[addonKey]!.size = ((partParams[0] % 2000) + 500) / 1000; + if (partParams.length > 0) addon[addonKey]!.size = ((partParams[0] % 2000) + 500) / 1000; if (partParams.length > 1) addon[addonKey]!.length = partParams[1] % 10; if (partParams.length > 2) addon[addonKey]!.size_ratio = ((partParams[2] % 400) + 100) / 1000; } } else { - console.warn( - `Part "${addonKey}" at index ${index} has missing or empty params array.`, - ); + console.warn(`Part "${addonKey}" at index ${index} has missing or empty params array.`); } return addon; }); } -function getProtocolNameFromSui( - protocolField: Record | string | undefined, -): string { - if (!protocolField) return "UnknownProtocol"; - if (typeof protocolField === "string") { +function getProtocolNameFromSui(protocolField: Record | string | undefined): string { + if (!protocolField) return 'UnknownProtocol'; + if (typeof protocolField === 'string') { return protocolField; } const keys = Object.keys(protocolField); if (keys.length === 1) { return keys[0]; } - return "UnknownProtocol"; + return 'UnknownProtocol'; } // --- Helper function to transform SUI parts for WASM, with validation --- @@ -575,7 +559,7 @@ function transformRawPartsForWasm( } const transformedParts: ProgramPartData[] = []; - let hasBody = false; + let hasBodyPartPresent = false; for (let i = 0; i < rawParts.length; i++) { const part = rawParts[i]; @@ -585,19 +569,19 @@ function transformRawPartsForWasm( let partParams: number[] = []; // Try different ways to extract part name - if (typeof part === "object" && part !== null) { + if (typeof part === 'object' && part !== null) { // Check for direct name property - if (typeof part.name === "string") { + if (typeof part.name === 'string') { partName = part.name; } // Check for nested name structure (common in SUI) - else if (part.fields && typeof part.fields.name === "string") { + else if (part.fields && typeof part.fields.name === 'string') { partName = part.fields.name; } // Check if part itself is a name wrapper - else if (typeof part.type === "string" && part.type.includes("::")) { + else if (typeof part.type === 'string' && part.type.includes('::')) { // Extract type name from SUI type string like "0x123::module::PartName" - const typeParts = part.type.split("::"); + const typeParts = part.type.split('::'); partName = typeParts[typeParts.length - 1]; } @@ -612,26 +596,28 @@ function transformRawPartsForWasm( } // Core structural validation: name must be a string - if (typeof partName !== "string" || partName.length === 0) { + if (typeof partName !== 'string' || partName.length === 0) { console.warn( `WASM Prep (${programId}): SUI Part at index ${i} has invalid name (name: "${partName}", type: ${typeof partName}). Using fallback part.`, ); // Use a fallback part instead of aborting entirely - partName = "SimpleBody"; + partName = 'SimpleBody'; partParams = []; } const partNameEnum = mapPartNameToEnum(partName); // Track if we have a body part (including robot bodies) - if (partNameEnum === ProgramPartName.SimpleBody || - partNameEnum === ProgramPartName.BoxRobotBody || - partNameEnum === ProgramPartName.RoundRobotBody) { - hasBody = true; + if ( + partNameEnum === ProgramPartName.SIMPLE_BODY || + partNameEnum === ProgramPartName.BOX_ROBOT_BODY || + partNameEnum === ProgramPartName.ROUND_ROBOT_BODY + ) { + hasBodyPartPresent = true; } // Fix Empty parts and SimpleEye to have no parameters (matching working ProgramEventDemo format) - if (partNameEnum === ProgramPartName.Empty || partNameEnum === ProgramPartName.SimpleEye) { + if (partNameEnum === ProgramPartName.EMPTY || partNameEnum === ProgramPartName.SIMPLE_EYE) { partParams = []; } @@ -639,71 +625,69 @@ function transformRawPartsForWasm( } // Ensure there's always at least one SimpleBody part - critical for skeleton building - if (!hasBody) { - console.warn(`WASM Prep (${programId}): No body part found in SUI data. Adding SimpleBody as first part.`); + if (!hasBodyPartPresent) { + console.warn( + `WASM Prep (${programId}): No body part found in SUI data. Adding SimpleBody as first part.`, + ); transformedParts.unshift({ - name: ProgramPartName.SimpleBody, - params: [4, 5, 50, 40, 20, 85] // Use working params from ProgramEventDemo + name: ProgramPartName.SIMPLE_BODY, + params: [4, 5, 50, 40, 20, 85], // Use working params from ProgramEventDemo }); } - console.log(`WASM Parts Prep: Successfully transformed ${transformedParts.length} parts:`, transformedParts); + console.log( + `WASM Parts Prep: Successfully transformed ${transformedParts.length} parts:`, + transformedParts, + ); return transformedParts; } export default function ProgramDatabase() { - const { - state: walletState, - refreshBalances, - fetchTransactionHistory, - } = useWallet(); + const { state: walletState } = useWallet(); const [suiClient, setSuiClient] = createSignal(null); const [programs, setPrograms] = createSignal([]); - const [selectedProgram, setSelectedProgram] = createSignal( - null, - ); - const [viewerBridge, setViewerBridge] = - createSignal(null); + const [selectedProgram, setSelectedProgram] = createSignal(null); + const [viewerBridge, setViewerBridge] = createSignal(null); const [webGPUSupported, setWebGPUSupported] = createSignal(true); const [isLoading, setIsLoading] = createSignal(false); const [error, setError] = createSignal(null); const [webGPUError, setWebGPUError] = createSignal(null); onMount(() => { - if (typeof navigator !== "undefined" && !("gpu" in navigator)) { + if (typeof navigator !== 'undefined' && !('gpu' in navigator)) { setWebGPUSupported(false); - console.error("WebGPU Check Failed: Not supported in this browser."); + console.error('WebGPU Check Failed: Not supported in this browser.'); } else { - console.log("WebGPU Check Passed."); + console.log('WebGPU Check Passed.'); } // Listen for WebGPU rendering errors - const handleWebGPUError = (event: any) => { - const message = event.detail || event.message || "Unknown WebGPU error"; + const _handleWebGPUError = (event: any) => { + const message = event.detail || event.message || 'Unknown WebGPU error'; if ( - message.includes("uniform buffers") || - message.includes("pipeline") || - message.includes("WebGPU") + message.includes('uniform buffers') || + message.includes('pipeline') || + message.includes('WebGPU') ) { setWebGPUError( - "WebGPU rendering issue detected. This may be due to complex 3D models exceeding hardware limits. Try refreshing the page or using a simpler model.", + 'WebGPU rendering issue detected. This may be due to complex 3D models exceeding hardware limits. Try refreshing the page or using a simpler model.', ); - console.warn("WebGPU Error detected:", message); + console.warn('WebGPU Error detected:', message); } }; // Monitor console errors for WebGPU issues const originalError = console.error; console.error = (...args) => { - const message = args.join(" "); + const message = args.join(' '); if ( - message.includes("uniform buffers") || - message.includes("Invalid PipelineLayout") || - message.includes("Invalid RenderPipeline") + message.includes('uniform buffers') || + message.includes('Invalid PipelineLayout') || + message.includes('Invalid RenderPipeline') ) { setWebGPUError( - "WebGPU rendering pipeline failed. This may be due to hardware limitations with complex 3D models.", + 'WebGPU rendering pipeline failed. This may be due to hardware limitations with complex 3D models.', ); } originalError.apply(console, args); @@ -726,28 +710,18 @@ export default function ProgramDatabase() { }); const fetchProgramsFromWallet = async () => { - if ( - !walletState.isConnected || - !walletState.activeAccount || - !suiClient() - ) { + if (!walletState.isConnected || !walletState.activeAccount || !suiClient()) { setPrograms([]); setSelectedProgram(null); return; } setIsLoading(true); setError(null); - console.log( - "Fetching programs from wallet for account:", - walletState.activeAccount.address, - ); + console.log('Fetching programs from wallet for account:', walletState.activeAccount.address); // Create a map for faster transaction history lookup const historyMap = new Map( - walletState.transactionHistory?.map((tx) => [ - tx.digest, - tx.timestampMs, - ]) ?? [], + walletState.transactionHistory?.map((tx) => [tx.digest, tx.timestampMs]) ?? [], ); // console.log("History Map Size:", historyMap.size); @@ -773,9 +747,8 @@ export default function ProgramDatabase() { const fetchedProgramData: Program[] = []; for (const obj of ownedProgramObjects.data) { - if (obj.data && obj.data.content?.dataType === "moveObject") { - const fields = obj.data.content - .fields as unknown as SuiProgramDataFields; + if (obj.data && obj.data.content?.dataType === 'moveObject') { + const fields = obj.data.content.fields as unknown as SuiProgramDataFields; // console.log(`Program Object ID: ${obj.data.objectId}`); // console.log("Raw fields.palette:", JSON.stringify(fields.palette, null, 2)); @@ -783,20 +756,15 @@ export default function ProgramDatabase() { const protocolName = getProtocolNameFromSui(fields.protocol); const programName = - obj.data.display?.data?.name || - `Program ${obj.data.objectId.slice(-6)}`; - - const randomSpeed = - (parseInt(obj.data.objectId.slice(-2, -1), 16) % 5) + 1; - const randomCorruption = - (parseInt(obj.data.objectId.slice(-3, -2), 16) % 80) + 10; - const randomMaxHealth = - (parseInt(obj.data.objectId.slice(-4, -3), 16) % 50) + 50; - const randomDamage = - (parseInt(obj.data.objectId.slice(-5, -4), 16) % 25) + 5; + obj.data.display?.data?.name || `Program ${obj.data.objectId.slice(-6)}`; + + const randomSpeed = (parseInt(obj.data.objectId.slice(-2, -1), 16) % 5) + 1; + const randomCorruption = (parseInt(obj.data.objectId.slice(-3, -2), 16) % 80) + 10; + const randomMaxHealth = (parseInt(obj.data.objectId.slice(-4, -3), 16) % 50) + 50; + const randomDamage = (parseInt(obj.data.objectId.slice(-5, -4), 16) % 25) + 5; // --- Mint Date Logic --- - let mintDateStr = "N/A"; + let mintDateStr = 'N/A'; const previousTxDigest = obj.data?.previousTransaction; // Get the digest of the tx that created/mutated the object let timestampFromHistory: string | undefined | null = null; @@ -810,41 +778,29 @@ export default function ProgramDatabase() { // console.log(`Found mint date for ${obj.data.objectId} from history: ${mintDateStr}`); } else { // Fallback to display object data if history doesn't have the tx - const creationTimestampFromDisplay = - obj.data.display?.data?.creation_date; + const creationTimestampFromDisplay = obj.data.display?.data?.creation_date; if (creationTimestampFromDisplay) { if (!isNaN(Number(creationTimestampFromDisplay))) { // Try parsing as timestamp number - mintDateStr = formatTimestamp( - String(creationTimestampFromDisplay), - ); + mintDateStr = formatTimestamp(String(creationTimestampFromDisplay)); } else if ( - typeof creationTimestampFromDisplay === "string" && + typeof creationTimestampFromDisplay === 'string' && creationTimestampFromDisplay.match(/^\d{4}-\d{2}-\d{2}/) ) { // Try parsing as date string try { - mintDateStr = new Date( - creationTimestampFromDisplay, - ).toLocaleDateString(); + mintDateStr = new Date(creationTimestampFromDisplay).toLocaleDateString(); } catch (e) { /* Ignore parsing error, keep N/A */ } - } // Else: keep N/A if display data is unusable - // if (mintDateStr !== "N/A") console.log(`Found mint date for ${obj.data.objectId} from display object: ${mintDateStr}`); + } } - // If display object also fails, mintDateStr remains "N/A" - // if (mintDateStr === "N/A") console.log(`Could not determine mint date for ${obj.data.objectId} from history or display.`); } // --- End Mint Date Logic --- // First, create ViewModel for UI display - const viewModelPalette = transformSuiPaletteToViewModelPalette( - fields.palette, - ); - const viewModelAddons = transformSuiPartsToViewModelAddons( - fields.parts, - ); + const viewModelPalette = transformSuiPaletteToViewModelPalette(fields.palette); + const viewModelAddons = transformSuiPartsToViewModelAddons(fields.parts); const transformedProgram: Program = { id: obj.data.objectId, @@ -875,11 +831,9 @@ export default function ProgramDatabase() { } else { setSelectedProgram(null); } - console.log( - `Successfully transformed ${fetchedProgramData.length} programs.`, - ); + console.log(`Successfully transformed ${fetchedProgramData.length} programs.`); } catch (e) { - console.error("Error fetching or transforming programs:", e); + console.error('Error fetching or transforming programs:', e); setError(e instanceof Error ? e.message : String(e)); setPrograms([]); setSelectedProgram(null); @@ -898,19 +852,19 @@ export default function ProgramDatabase() { }); const handleViewerReady = (bridge: WasmCanvasBridgeInterface) => { - console.log("ProgramDatabase iframe viewer reported ready."); + console.log('ProgramDatabase iframe viewer reported ready.'); setViewerBridge(bridge); // Initialize with default program immediately when ready if (bridge.isReady()) { const programBuilder = { - id: "default_program", + id: 'default_program', palette: DEFAULT_MINI_PALETTE, parts: DEFAULT_PARTS, }; const event: EventPayload = { ViewModel: programBuilder as any }; - console.log("Sending initial ViewModel to WASM:", event); + console.log('Sending initial ViewModel to WASM:', event); bridge.queueEventForWasm(event); } }; @@ -919,8 +873,7 @@ export default function ProgramDatabase() { setSelectedProgram(program); }; - const displayData = () => - selectedProgram() ?? DEFAULT_PROGRAM_DATA_PLACEHOLDER; + const displayData = () => selectedProgram() ?? DEFAULT_PROGRAM_DATA_PLACEHOLDER; // Update effect to handle program selection and update viewer createEffect(() => { @@ -951,9 +904,7 @@ export default function ProgramDatabase() { // 2. Attempt to use SUI palette (with minimal transformation) let suiPaletteProcessed = null; if (currentProgram.rawFields?.palette) { - suiPaletteProcessed = transformSuiPaletteToWasmPalette( - currentProgram.rawFields.palette, - ); + suiPaletteProcessed = transformSuiPaletteToWasmPalette(currentProgram.rawFields.palette); } if (suiPaletteProcessed !== null) { @@ -972,22 +923,21 @@ export default function ProgramDatabase() { parts: partsToUse, }; - console.log(`Sending data to WASM for program ${programId}:`, JSON.stringify(programBuilder, null, 2)); + console.log( + `Sending data to WASM for program ${programId}:`, + JSON.stringify(programBuilder, null, 2), + ); try { bridge.queueEventForWasm({ ViewModel: programBuilder as any }); - console.log( - `Successfully sent ViewModel for program ${programId} to WASM`, - ); + console.log(`Successfully sent ViewModel for program ${programId} to WASM`); // Clear any previous WebGPU errors when successfully sending new data if (webGPUError()) { setTimeout(() => setWebGPUError(null), 1000); } } catch (wasmError) { - console.error("Error sending data to WASM:", wasmError); - setWebGPUError( - "Failed to communicate with 3D renderer. Please refresh the page.", - ); + console.error('Error sending data to WASM:', wasmError); + setWebGPUError('Failed to communicate with 3D renderer. Please refresh the page.'); } } catch (error) { console.error( @@ -995,7 +945,7 @@ export default function ProgramDatabase() { error, ); const fallbackProgramBuilder = { - id: currentProgram?.id || "error_program_in_catch", + id: currentProgram?.id || 'error_program_in_catch', palette: DEFAULT_MINI_PALETTE, parts: DEFAULT_PARTS, }; @@ -1007,7 +957,7 @@ export default function ProgramDatabase() { // Generate a deterministic palette based on program ID (fallback when no data available) function generatePaletteFromId(id: string): any { // Extract some bytes from the ID to generate colors - const hash = id.replace(/[^0-9a-f]/g, ""); + const hash = id.replace(/[^0-9a-f]/g, ''); // Get some deterministic values from the hash const byte1 = parseInt(hash.slice(2, 4), 16); @@ -1017,38 +967,18 @@ export default function ProgramDatabase() { const byte5 = parseInt(hash.slice(10, 12), 16); return { - primary: createMiniColor( - byte1 % 360, - 150 + (byte2 % 105), - 180 + (byte3 % 75), - ), - accent: createMiniColor( - (byte2 + 120) % 360, - 150 + (byte3 % 105), - 150 + (byte4 % 105), - ), - highlight: createMiniColor( - (byte3 + 240) % 360, - 180 + (byte4 % 75), - 200 + (byte5 % 55), - ), - neutral: createMiniColor( - byte4 % 30, - 20 + (byte5 % 80), - 180 + (byte1 % 75), - ), - background: createMiniColor( - (byte5 + 180) % 360, - 100 + (byte1 % 80), - 150 + (byte2 % 75), - ), + primary: createMiniColor(byte1 % 360, 150 + (byte2 % 105), 180 + (byte3 % 75)), + accent: createMiniColor((byte2 + 120) % 360, 150 + (byte3 % 105), 150 + (byte4 % 105)), + highlight: createMiniColor((byte3 + 240) % 360, 180 + (byte4 % 75), 200 + (byte5 % 55)), + neutral: createMiniColor(byte4 % 30, 20 + (byte5 % 80), 180 + (byte1 % 75)), + background: createMiniColor((byte5 + 180) % 360, 100 + (byte1 % 80), 150 + (byte2 % 75)), }; } // Generate deterministic parts based on program ID (fallback when no data available) function generatePartsFromId(id: string): any[] { // Extract some bytes from the ID to make deterministic decisions - const hash = id.replace(/[^0-9a-f]/g, ""); + const hash = id.replace(/[^0-9a-f]/g, ''); // Get some deterministic values from the hash const byte1 = parseInt(hash.slice(0, 2), 16); @@ -1061,7 +991,7 @@ export default function ProgramDatabase() { // Always ensure SimpleBody is first and has proper params return [ { - name: ProgramPartName.SimpleBody, + name: ProgramPartName.SIMPLE_BODY, params: [ Math.max(1, Math.floor((2 + (byte1 % 6)) / 2)), // Halved, ensures at least 1 Math.max(1, Math.floor((3 + (byte2 % 5)) / 2)), // Halved, ensures at least 1 @@ -1072,26 +1002,22 @@ export default function ProgramDatabase() { ], }, { - name: ProgramPartName.SimpleEye, + name: ProgramPartName.SIMPLE_EYE, params: [], // Match working ProgramEventDemo format - no params }, { - name: ProgramPartName.SimpleLimb, + name: ProgramPartName.SIMPLE_LIMB, params: [ 1 + (byte3 % 3), // Random but deterministic param in range 1-3 ], }, { - name: - byte4 % 2 === 0 ? ProgramPartName.SimpleLimb : ProgramPartName.Empty, - params: - byte4 % 2 === 0 ? [1 + (byte5 % 2)] : [], // Empty parts get no params + name: byte4 % 2 === 0 ? ProgramPartName.SIMPLE_LIMB : ProgramPartName.EMPTY, + params: byte4 % 2 === 0 ? [1 + (byte5 % 2)] : [], // Empty parts get no params }, { - name: - byte5 % 3 === 0 ? ProgramPartName.SimpleLimb : ProgramPartName.Empty, - params: - byte5 % 3 === 0 ? [1] : [], // Empty parts get no params + name: byte5 % 3 === 0 ? ProgramPartName.SIMPLE_LIMB : ProgramPartName.EMPTY, + params: byte5 % 3 === 0 ? [1] : [], // Empty parts get no params }, ]; } @@ -1117,8 +1043,7 @@ export default function ProgramDatabase() {

    WebGPU Not Supported

    - Please use a recent version of Chrome, Edge, or enable flags - in Firefox. + Please use a recent version of Chrome, Edge, or enable flags in Firefox.

    @@ -1138,8 +1063,7 @@ export default function ProgramDatabase() { {displayData().name}
    - Decrypted:{" "} -

    {displayData().mintDate}

    + Decrypted:

    {displayData().mintDate}

    @@ -1157,14 +1081,11 @@ export default function ProgramDatabase() {
    WebGPU Issue
    - +
    3D Model
    - Legacy Parts ( - {selectedProgram()?.rawFields?.parts?.length || 0}) + Legacy Parts ({selectedProgram()?.rawFields?.parts?.length || 0})
    @@ -1180,21 +1101,20 @@ export default function ProgramDatabase() { -
    -
    {" "} +
    -
    {' '}
    -
    -
    -
    {" "} +
    -
    {' '}
    -
    } > -
    Slash
    {" "} +
    Slash
    {' '}
    Bite
    -
    Roar
    {" "} +
    Roar
    {' '}
    Hide
    @@ -1213,11 +1133,9 @@ export default function ProgramDatabase() { disabled={isLoading() || !walletState.isConnected} class="text-xs px-2 py-1" > - {isLoading() ? "Refreshing..." : "Refresh List"} + {isLoading() ? 'Refreshing...' : 'Refresh List'} - - Available DAE-MON/S ({programs().length}) - + Available DAE-MON/S ({programs().length}) @@ -1228,20 +1146,12 @@ export default function ProgramDatabase() {
    -
    - Loading DAE-MONs from wallet... -
    +
    Loading DAE-MONs from wallet...
     - +
    - No DAE-MONs found in your wallet for type{" "} - - {PROGRAM_TYPE_STRING} - + No DAE-MONs found in your wallet for type{' '} + {PROGRAM_TYPE_STRING} .
    Mint one in 'Drives & Programs'.
    @@ -1254,10 +1164,7 @@ export default function ProgramDatabase() { {(program) => ( -
    handleProgramSelect(program)} - > +
    handleProgramSelect(program)}>
    diff --git a/src/components/ProgramEventDemo.tsx b/src/components/ProgramEventDemo.tsx index 95a430b..b2e4b6e 100644 --- a/src/components/ProgramEventDemo.tsx +++ b/src/components/ProgramEventDemo.tsx @@ -1,38 +1,36 @@ -import { createSignal, Show, onMount } from "solid-js"; -import { WasmIframeWrapper } from "./WasmIframeWrapper"; -import type { WasmCanvasBridgeInterface } from "./hooks/createWasmCanvas"; -import type { EventPayload } from "../api/game/events"; -import { WASM_ENGINE_URL, WASM_BINDINGS_URL } from "~/api/constants"; +import { createSignal, Show, onMount } from 'solid-js'; +import WasmIframeWrapper from './WasmIframeWrapper'; +import type { WasmCanvasBridgeInterface } from './hooks/createWasmCanvas'; +import type { EventPayload } from '../api/game/events'; +import { WASM_ENGINE_URL, WASM_BINDINGS_URL } from '~/api/constants'; // Enum to match Rust-side ProgramPartName enum ProgramPartName { - Empty = "Empty", - SimpleBody = "SimpleBody", - SimpleLimb = "SimpleLimb", - SimpleEye = "SimpleEye", + EMPTY = 'Empty', + SIMPLE_BODY = 'SimpleBody', + SIMPLE_LIMB = 'SimpleLimb', + SIMPLE_EYE = 'SimpleEye', // Robot parts for GLTF testing - BoxRobotBody = "BoxRobotBody", - SphereRobotHead = "SphereRobotHead", - CameraRobotEye = "CameraRobotEye", - AntennaRobotAddon = "AntennaRobotAddon", - HexagonalRobotLegBase = "HexagonalRobotLegBase", - SideRobotLegTibia = "SideRobotLegTibia", - SideRobotLegEnd = "SideRobotLegEnd", - CrossRobotLegJoint = "CrossRobotLegJoint", + BOX_ROBOT_BODY = 'BoxRobotBody', + SPHERE_ROBOT_HEAD = 'SphereRobotHead', + CAMERA_ROBOT_EYE = 'CameraRobotEye', + ANTENNA_ROBOT_ADDON = 'AntennaRobotAddon', + HEXAGONAL_ROBOT_LEG_BASE = 'HexagonalRobotLegBase', + SIDE_ROBOT_LEG_TIBIA = 'SideRobotLegTibia', + SIDE_ROBOT_LEG_END = 'SideRobotLegEnd', + CROSS_ROBOT_LEG_JOINT = 'CrossRobotLegJoint', } export default function ProgramEventDemo() { - const [bridge, setBridge] = createSignal( - null, - ); + const [bridge, setBridge] = createSignal(null); const [webGPUSupported, setWebGPUSupported] = createSignal(true); // Assume true onMount(() => { - if (typeof navigator !== "undefined" && !("gpu" in navigator)) { + if (typeof navigator !== 'undefined' && !('gpu' in navigator)) { setWebGPUSupported(false); - console.error("WebGPU Check Failed: Not supported in this browser."); + console.error('WebGPU Check Failed: Not supported in this browser.'); } else { - console.log("WebGPU Check Passed."); + console.log('WebGPU Check Passed.'); } }); @@ -54,35 +52,35 @@ export default function ProgramEventDemo() { // const parts = [ // { - // name: ProgramPartName.BoxRobotBody, + // name: ProgramPartName.BOX_ROBOT_BODY, // params: [], // }, // { - // name: ProgramPartName.SphereRobotHead, + // name: ProgramPartName.SPHERE_ROBOT_HEAD, // params: [], // }, // { - // name: ProgramPartName.CameraRobotEye, + // name: ProgramPartName.CAMERA_ROBOT_EYE, // params: [], // }, // { - // name: ProgramPartName.AntennaRobotAddon, + // name: ProgramPartName.ANTENNA_ROBOT_ADDON, // params: [], // }, // { - // name: ProgramPartName.HexagonalRobotLegBase, + // name: ProgramPartName.HEXAGONAL_ROBOT_LEG_BASE, // params: [], // }, // { - // name: ProgramPartName.SideRobotLegTibia, + // name: ProgramPartName.SIDE_ROBOT_LEG_TIBIA, // params: [], // }, // { - // name: ProgramPartName.SideRobotLegEnd, + // name: ProgramPartName.SIDE_ROBOT_LEG_END, // params: [], // }, // { - // name: ProgramPartName.CrossRobotLegJoint, + // name: ProgramPartName.CROSS_ROBOT_LEG_JOINT, // params: [], // }, // ]; @@ -90,75 +88,75 @@ export default function ProgramEventDemo() { // Legacy parts for testing (complete structure that was known to work) const parts = [ { - name: ProgramPartName.SimpleBody, + name: ProgramPartName.SIMPLE_BODY, params: [4, 5, 50, 40, 20, 85], }, { - name: ProgramPartName.SimpleEye, + name: ProgramPartName.SIMPLE_EYE, params: [], }, { - name: ProgramPartName.SimpleLimb, + name: ProgramPartName.SIMPLE_LIMB, params: [2], }, { - name: ProgramPartName.Empty, + name: ProgramPartName.EMPTY, params: [], }, { - name: ProgramPartName.Empty, + name: ProgramPartName.EMPTY, params: [], }, ]; // Callback function for the wrapper to pass the bridge when ready const handleWasmReady = (b: WasmCanvasBridgeInterface) => { - console.log("ProgramEventDemo WASM canvas is ready."); + console.log('ProgramEventDemo WASM canvas is ready.'); setBridge(b); // Initialize with the ProgramBuilder format the Rust code expects if (b.isReady()) { // Create a program builder object matching the Rust-side ProgramBuilder struct const programBuilder = { - id: "new_program", + id: 'new_program', palette: miniPalette, parts: parts, }; // Use type assertion to bypass TypeScript error - this structure is correct for Rust const event: EventPayload = { ViewModel: programBuilder as any }; - console.log("Sending initial ViewModel to WASM:", event); + console.log('Sending initial ViewModel to WASM:', event); b.queueEventForWasm(event); } }; - const handleShowNormals = () => { + const _handleShowNormals = () => { const b = bridge(); if (b?.isReady()) { - const event: EventPayload = { DebugRayMarch: "Normals" }; - console.log("Sending event to demo WASM:", event); + const event: EventPayload = { DebugRayMarch: 'Normals' }; + console.log('Sending event to demo WASM:', event); b.queueEventForWasm(event); } else { console.warn("Demo WASM bridge not ready to send 'Normals' event."); } }; - const handleShowDefault = () => { + const _handleShowDefault = () => { const b = bridge(); if (b?.isReady()) { - const event: EventPayload = { DebugRayMarch: "Disabled" }; - console.log("Sending event to demo WASM:", event); + const event: EventPayload = { DebugRayMarch: 'Disabled' }; + console.log('Sending event to demo WASM:', event); b.queueEventForWasm(event); } else { console.warn("Demo WASM bridge not ready to send 'Disabled' event."); } }; - const handleShowSteps = () => { + const _handleShowSteps = () => { const b = bridge(); if (b?.isReady()) { - const event: EventPayload = { DebugRayMarch: "Steps" }; - console.log("Sending event to demo WASM:", event); + const event: EventPayload = { DebugRayMarch: 'Steps' }; + console.log('Sending event to demo WASM:', event); b.queueEventForWasm(event); } else { console.warn("Demo WASM bridge not ready to send 'Steps' event."); @@ -172,8 +170,7 @@ export default function ProgramEventDemo() {

    WebGPU Not Supported

    - Please use a recent version of Chrome, Edge, or enable flags in - Firefox. + Please use a recent version of Chrome, Edge, or enable flags in Firefox.

    diff --git a/src/components/ProgramWindow/ProgramWindow.tsx b/src/components/ProgramWindow/ProgramWindow.tsx index 6d8bfbf..87d9cad 100644 --- a/src/components/ProgramWindow/ProgramWindow.tsx +++ b/src/components/ProgramWindow/ProgramWindow.tsx @@ -1,4 +1,4 @@ -import type { JSXElement} from 'solid-js'; +import type { JSXElement } from 'solid-js'; import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'; import interact from 'interactjs'; import { usePrograms, TASKBAR_HEIGHT_PX } from './programContext'; @@ -8,10 +8,10 @@ import X from '../Icons/X'; import Minus from '../Icons/Minus'; interface ProgramWindowProps { - label: string; // window title + label: string; // window title programId: string; - children: JSXElement; // the content within the program window - onClose?: () => void; // optional custom close handler + children: JSXElement; // the content within the program window + onClose?: () => void; // optional custom close handler } export default function ProgramWindow(props: ProgramWindowProps) { @@ -24,7 +24,7 @@ export default function ProgramWindow(props: ProgramWindowProps) { updateProgramPosition, } = usePrograms(); - const getProgramState = () => activePrograms.find(p => p.id === props.programId); + const getProgramState = () => activePrograms.find((p) => p.id === props.programId); const programState = () => getProgramState(); // --- State Management --- @@ -53,18 +53,22 @@ export default function ProgramWindow(props: ProgramWindowProps) { setPosition({ x: state.x, y: state.y }); // Update previous state if it's the first load or position has changed externally - if (previousState().width === 0 || previousState().x !== state.x || previousState().y !== state.y) { + if ( + previousState().width === 0 || + previousState().x !== state.x || + previousState().y !== state.y + ) { setPreviousState({ width: state.width, height: state.height, x: state.x, - y: state.y + y: state.y, }); } } if (state && previousState().width === 0) { - setPreviousState(prev => ({ ...prev, width: state.width, height: state.height })); + setPreviousState((prev) => ({ ...prev, width: state.width, height: state.height })); } }); @@ -72,7 +76,7 @@ export default function ProgramWindow(props: ProgramWindowProps) { function setWindowRef(el: HTMLDivElement) { windowRef = el; applyStateToDOM(); - }; + } function applyStateToDOM() { if (!windowRef) return; @@ -95,9 +99,9 @@ export default function ProgramWindow(props: ProgramWindowProps) { } createEffect(() => { - const state = programState(); - const pos = position(); - const maximized = isMaximized(); + const _state = programState(); + const _pos = position(); + const _maximized = isMaximized(); applyStateToDOM(); }); @@ -137,13 +141,11 @@ export default function ProgramWindow(props: ProgramWindowProps) { y: currentPos.y, }); - // Animate towards taskbar button location stored in context windowRef.style.transition = 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out'; windowRef.style.transform = `translate(${state.minimizeTargetX}px, ${state.minimizeTargetY}px) scale(0.1)`; windowRef.style.opacity = '0'; - setTimeout(() => { minimizeProgram(props.programId!); if (windowRef) { @@ -213,7 +215,6 @@ export default function ProgramWindow(props: ProgramWindowProps) { // Force browser reflow to apply visibility change before transition void windowRef.offsetWidth; - windowRef.style.transition = 'transform 0.3s ease-out, opacity 0.3s ease-out'; windowRef.style.transform = `translate(${targetX}px, ${targetY}px) scale(1)`; windowRef.style.opacity = '1'; @@ -266,11 +267,9 @@ export default function ProgramWindow(props: ProgramWindowProps) { if (!windowRef) return; if (interactable) interactable.unset(); - const windowId = `window-${props.programId}`; windowRef.dataset.windowId = windowId; - const restrictionRect = { left: 0, top: 0, @@ -278,76 +277,80 @@ export default function ProgramWindow(props: ProgramWindowProps) { bottom: window.innerHeight - TASKBAR_HEIGHT_PX, }; - interactable = interact(windowRef) - .draggable({ - allowFrom: '.title-bar', // Only allow dragging from title bar - inertia: false, - modifiers: [ - interact.modifiers.restrictRect({ - restriction: restrictionRect, - endOnly: false, - }) - ], - listeners: { - start(event) { - bringToFront(props.programId); - const currentPos = syncPositionFromDOM(); // Sync local signal just before drag - - if (isMaximized()) { - handleMaximize(); - - // --- Adjust position to follow cursor --- - const restoredWidth = previousState().width; - const restoredHeight = previousState().height; - const titleBar = windowRef?.querySelector('.title-bar'); - const titleBarRect = titleBar?.getBoundingClientRect(); - - if (titleBarRect && restoredWidth > 0 && restoredHeight > 0) { - const clickOffsetX = Math.min(event.clientX - titleBarRect.left, restoredWidth - 20); // Avoid grabbing far right - const clickOffsetY = event.clientY - titleBarRect.top; - - let newX = event.clientX - clickOffsetX; - let newY = event.clientY - clickOffsetY; - - // Clamp position to new boundaries - newX = Math.max(restrictionRect.left, Math.min(newX, restrictionRect.right - restoredWidth)); - newY = Math.max(restrictionRect.top, Math.min(newY, restrictionRect.bottom - restoredHeight)); - - setPosition({ x: newX, y: newY }); - if (windowRef) { - windowRef.style.transform = `translate(${newX}px, ${newY}px)`; - } - - setPreviousState(prev => ({ ...prev, x: newX, y: newY })); + interactable = interact(windowRef).draggable({ + allowFrom: '.title-bar', // Only allow dragging from title bar + inertia: false, + modifiers: [ + interact.modifiers.restrictRect({ + restriction: restrictionRect, + endOnly: false, + }), + ], + listeners: { + start(event) { + bringToFront(props.programId); + const _currentPos = syncPositionFromDOM(); // Sync local signal just before drag + + if (isMaximized()) { + handleMaximize(); + + // --- Adjust position to follow cursor --- + const restoredWidth = previousState().width; + const restoredHeight = previousState().height; + const titleBar = windowRef?.querySelector('.title-bar'); + const titleBarRect = titleBar?.getBoundingClientRect(); + + if (titleBarRect && restoredWidth > 0 && restoredHeight > 0) { + const clickOffsetX = Math.min(event.clientX - titleBarRect.left, restoredWidth - 20); // Avoid grabbing far right + const clickOffsetY = event.clientY - titleBarRect.top; + + let newX = event.clientX - clickOffsetX; + let newY = event.clientY - clickOffsetY; + + // Clamp position to new boundaries + newX = Math.max( + restrictionRect.left, + Math.min(newX, restrictionRect.right - restoredWidth), + ); + newY = Math.max( + restrictionRect.top, + Math.min(newY, restrictionRect.bottom - restoredHeight), + ); + + setPosition({ x: newX, y: newY }); + if (windowRef) { + windowRef.style.transform = `translate(${newX}px, ${newY}px)`; } - } - - setIsDragging(true); - if (windowRef) windowRef.style.userSelect = 'none'; - }, - move(event) { - if (!isDragging()) return; - - // Position is updated directly by interact.js modifier + transform style - const currentPos = position(); - const newX = currentPos.x + event.dx; - const newY = currentPos.y + event.dy; - - setPosition({ x: newX, y: newY }); - event.target.style.transform = `translate(${newX}px, ${newY}px)`; - }, - end(event) { - if (!isDragging()) return; - - const finalPos = syncPositionFromDOM(); - updateProgramPosition(props.programId, finalPos.x, finalPos.y); - - setTimeout(() => setIsDragging(false), 0); - if (windowRef) windowRef.style.userSelect = ''; + setPreviousState((prev) => ({ ...prev, x: newX, y: newY })); + } } - } - }); + + setIsDragging(true); + if (windowRef) windowRef.style.userSelect = 'none'; + }, + move(event) { + if (!isDragging()) return; + + // Position is updated directly by interact.js modifier + transform style + const currentPos = position(); + const newX = currentPos.x + event.dx; + const newY = currentPos.y + event.dy; + + setPosition({ x: newX, y: newY }); + event.target.style.transform = `translate(${newX}px, ${newY}px)`; + }, + end(_event) { + if (!isDragging()) return; + + const finalPos = syncPositionFromDOM(); + updateProgramPosition(props.programId, finalPos.x, finalPos.y); + + setTimeout(() => setIsDragging(false), 0); + if (windowRef) windowRef.style.userSelect = ''; + }, + }, + }); } function cleanupInteract() { @@ -389,45 +392,61 @@ export default function ProgramWindow(props: ProgramWindowProps) { bringToFront(props.programId); } }} - onMouseDown={(e) => { if (isDragging()) e.stopPropagation(); }} + onMouseDown={(e) => { + if (isDragging()) e.stopPropagation(); + }} > {/* Window Controls */} -
    e.stopPropagation()}> +
    e.stopPropagation()} + >
    {/* Title Bar - Now without the control buttons */} -
    { if (isDragging()) e.stopPropagation(); }} +
    { + if (isDragging()) e.stopPropagation(); + }} >
    {props.label}
    -
    - {props.children} -
    +
    {props.children}
    ); -} \ No newline at end of file +} diff --git a/src/components/ProgramWindow/programContext.tsx b/src/components/ProgramWindow/programContext.tsx index 7d67311..e73e169 100644 --- a/src/components/ProgramWindow/programContext.tsx +++ b/src/components/ProgramWindow/programContext.tsx @@ -1,201 +1,242 @@ -import type { JSXElement, Component } from "solid-js"; -import { createContext, useContext } from "solid-js"; -import { createStore, produce } from "solid-js/store"; +import type { JSXElement, Component } from 'solid-js'; +import { createContext, useContext } from 'solid-js'; +import { createStore, produce } from 'solid-js/store'; -const programContextModuleId = Math.random().toString(36).substring(7); +const _programContextModuleId = Math.random().toString(36).substring(7); // console.log(`programContext.tsx module evaluating (ID: ${programContextModuleId})`); // Keep for debugging if needed export const TASKBAR_HEIGHT_PX = 46; interface RunningProgram { - component: Component; - id: string; - label: string; - iconPath: string; - isMinimized: boolean; - zIndex: number; - x: number; - y: number; - width: number; - height: number; - minimizeTargetX: number; - minimizeTargetY: number; + component: Component; + id: string; + label: string; + iconPath: string; + isMinimized: boolean; + zIndex: number; + x: number; + y: number; + width: number; + height: number; + minimizeTargetX: number; + minimizeTargetY: number; } interface ProgramRegistry { - registerProgram: (program: Omit & { initialWidth: number, initialHeight: number; }) => string; - unregisterProgram: (id: string) => void; - minimizeProgram: (id: string) => void; - restoreProgram: (id: string) => void; - bringToFront: (id: string) => void; - updateProgramPosition: (id: string, x: number, y: number) => void; - updateMinimizeTarget: (id: string, x: number, y: number) => void; - activePrograms: RunningProgram[]; - isRunning: (label: string) => boolean; + registerProgram: ( + program: Omit< + RunningProgram, + | 'id' + | 'zIndex' + | 'x' + | 'y' + | 'minimizeTargetX' + | 'minimizeTargetY' + | 'isMinimized' + | 'width' + | 'height' + > & { initialWidth: number; initialHeight: number }, + ) => string; + unregisterProgram: (id: string) => void; + minimizeProgram: (id: string) => void; + restoreProgram: (id: string) => void; + bringToFront: (id: string) => void; + updateProgramPosition: (id: string, x: number, y: number) => void; + updateMinimizeTarget: (id: string, x: number, y: number) => void; + activePrograms: RunningProgram[]; + isRunning: (label: string) => boolean; } -export const ProgramContext = createContext(); +export const programContext = createContext(); // console.log(`ProgramContext object created (ID: ${programContextModuleId}):`, ProgramContext); +export function ProgramProvider(props: { children: JSXElement }) { + const [programs, setPrograms] = createStore([]); + // console.log(`ProgramProvider rendering (ID: ${programContextModuleId}), providing context:`, ProgramContext); + + const isRunning = (label: string) => programs.some((p) => p.label === label); + + const normalizeZIndices = (currentPrograms: RunningProgram[]) => { + const nonMinimized = currentPrograms + .filter((p) => !p.isMinimized) + .sort((a, b) => a.zIndex - b.zIndex); + + let currentZ = 1; + nonMinimized.forEach((p) => { + const programInStore = currentPrograms.find((sp) => sp.id === p.id); + if (programInStore) { + programInStore.zIndex = currentZ++; + } + }); + currentPrograms + .filter((p) => p.isMinimized) + .forEach((p) => { + p.zIndex = 0; + }); + return currentZ - 1; + }; + + const registerProgram = ( + programDetails: Omit< + RunningProgram, + | 'id' + | 'zIndex' + | 'x' + | 'y' + | 'minimizeTargetX' + | 'minimizeTargetY' + | 'isMinimized' + | 'width' + | 'height' + > & { initialWidth: number; initialHeight: number }, + ) => { + const id = crypto.randomUUID(); + + const initialX = Math.max(0, (window.innerWidth - programDetails.initialWidth) / 2); + const initialY = Math.max( + 0, + (window.innerHeight - TASKBAR_HEIGHT_PX - programDetails.initialHeight) / 2, + ); -export function ProgramProvider(props: { children: JSXElement; }) { - const [programs, setPrograms] = createStore([]); - // console.log(`ProgramProvider rendering (ID: ${programContextModuleId}), providing context:`, ProgramContext); - - - const isRunning = (label: string) => programs.some(p => p.label === label); - - const normalizeZIndices = (currentPrograms: RunningProgram[]) => { - const nonMinimized = currentPrograms - .filter(p => !p.isMinimized) - .sort((a, b) => a.zIndex - b.zIndex); - - let currentZ = 1; - nonMinimized.forEach(p => { - const programInStore = currentPrograms.find(sp => sp.id === p.id); - if (programInStore) { - programInStore.zIndex = currentZ++; - } - }); - currentPrograms.filter(p => p.isMinimized).forEach(p => { p.zIndex = 0; }); - return currentZ - 1; - }; - - const registerProgram = (programDetails: Omit & { initialWidth: number, initialHeight: number; }) => { - const id = crypto.randomUUID(); - - const initialX = Math.max(0, (window.innerWidth - programDetails.initialWidth) / 2); - const initialY = Math.max(0, (window.innerHeight - TASKBAR_HEIGHT_PX - programDetails.initialHeight) / 2); - - setPrograms(produce(currentPrograms => { - const maxExistingZ = normalizeZIndices(currentPrograms); - - const newProgram: RunningProgram = { - ...programDetails, - id, - width: programDetails.initialWidth, - height: programDetails.initialHeight, - x: initialX, - y: initialY, - zIndex: maxExistingZ + 1, - isMinimized: false, - minimizeTargetX: 0, - minimizeTargetY: window.innerHeight, - }; - currentPrograms.push(newProgram); - const programToElevate = currentPrograms.find(p => p.id === id); - if (programToElevate) { - let highestZ = 0; - currentPrograms.forEach(p => { - if (p.id !== id && !p.isMinimized) { - highestZ = Math.max(highestZ, p.zIndex); - } - }); - programToElevate.zIndex = highestZ + 1; - } - normalizeZIndices(currentPrograms); - })); - - return id; - }; - - const unregisterProgram = (id: string) => { - setPrograms(produce(programs => { - const index = programs.findIndex(p => p.id === id); - if (index !== -1) { - programs.splice(index, 1); - normalizeZIndices(programs); - } - })); - }; - - const minimizeProgram = (id: string) => { - setPrograms(produce(programs => { - const program = programs.find(p => p.id === id); - if (program && !program.isMinimized) { - program.isMinimized = true; - normalizeZIndices(programs); - } - })); - }; - - const restoreProgram = (id: string) => { - setPrograms(produce(programs => { - const program = programs.find(p => p.id === id); - if (program) { - if (program.isMinimized) { - program.isMinimized = false; - } - const maxZ = programs - .filter(p => !p.isMinimized && p.id !== id) // Exclude self for finding max among OTHERS - .reduce((max, p) => Math.max(max, p.zIndex), 0); - program.zIndex = maxZ + 1; - normalizeZIndices(programs); - } - })); - }; - - const bringToFront = (id: string) => { - setPrograms(produce(programs => { - const program = programs.find(p => p.id === id); - if (program && !program.isMinimized) { - const maxZ = programs - .filter(p => !p.isMinimized && p.id !== id) - .reduce((max, p) => Math.max(max, p.zIndex), 0); - - if (program.zIndex <= maxZ) { - program.zIndex = maxZ + 1; - normalizeZIndices(programs); - } + setPrograms( + produce((currentPrograms) => { + const maxExistingZ = normalizeZIndices(currentPrograms); + + const newProgram: RunningProgram = { + ...programDetails, + id, + width: programDetails.initialWidth, + height: programDetails.initialHeight, + x: initialX, + y: initialY, + zIndex: maxExistingZ + 1, + isMinimized: false, + minimizeTargetX: 0, + minimizeTargetY: window.innerHeight, + }; + currentPrograms.push(newProgram); + const programToElevate = currentPrograms.find((p) => p.id === id); + if (programToElevate) { + let highestZ = 0; + currentPrograms.forEach((p) => { + if (p.id !== id && !p.isMinimized) { + highestZ = Math.max(highestZ, p.zIndex); } - })); - }; - - const updateProgramPosition = (id: string, x: number, y: number) => { - setPrograms(produce(programs => { - const program = programs.find(p => p.id === id); - if (program) { - program.x = x; - program.y = y; - } - })); - }; - - const updateMinimizeTarget = (id: string, x: number, y: number) => { - setPrograms(produce(programs => { - const program = programs.find(p => p.id === id); - if (program) { - program.minimizeTargetX = x; - program.minimizeTargetY = y; - } - })); - }; - - const value: ProgramRegistry = { - registerProgram, - unregisterProgram, - minimizeProgram, - restoreProgram, - bringToFront, - updateProgramPosition, - updateMinimizeTarget, - activePrograms: programs, - isRunning - }; - - return ( - - {props.children} - + }); + programToElevate.zIndex = highestZ + 1; + } + normalizeZIndices(currentPrograms); + }), + ); + + return id; + }; + + const unregisterProgram = (id: string) => { + setPrograms( + produce((programs) => { + const index = programs.findIndex((p) => p.id === id); + if (index !== -1) { + programs.splice(index, 1); + normalizeZIndices(programs); + } + }), + ); + }; + + const minimizeProgram = (id: string) => { + setPrograms( + produce((programs) => { + const program = programs.find((p) => p.id === id); + if (program && !program.isMinimized) { + program.isMinimized = true; + normalizeZIndices(programs); + } + }), + ); + }; + + const restoreProgram = (id: string) => { + setPrograms( + produce((programs) => { + const program = programs.find((p) => p.id === id); + if (program) { + if (program.isMinimized) { + program.isMinimized = false; + } + const maxZ = programs + .filter((p) => !p.isMinimized && p.id !== id) // Exclude self for finding max among OTHERS + .reduce((max, p) => Math.max(max, p.zIndex), 0); + program.zIndex = maxZ + 1; + normalizeZIndices(programs); + } + }), + ); + }; + + const bringToFront = (id: string) => { + setPrograms( + produce((programs) => { + const program = programs.find((p) => p.id === id); + if (program && !program.isMinimized) { + const maxZ = programs + .filter((p) => !p.isMinimized && p.id !== id) + .reduce((max, p) => Math.max(max, p.zIndex), 0); + + if (program.zIndex <= maxZ) { + program.zIndex = maxZ + 1; + normalizeZIndices(programs); + } + } + }), + ); + }; + + const updateProgramPosition = (id: string, x: number, y: number) => { + setPrograms( + produce((programs) => { + const program = programs.find((p) => p.id === id); + if (program) { + program.x = x; + program.y = y; + } + }), + ); + }; + + const updateMinimizeTarget = (id: string, x: number, y: number) => { + setPrograms( + produce((programs) => { + const program = programs.find((p) => p.id === id); + if (program) { + program.minimizeTargetX = x; + program.minimizeTargetY = y; + } + }), ); + }; + + const value: ProgramRegistry = { + registerProgram, + unregisterProgram, + minimizeProgram, + restoreProgram, + bringToFront, + updateProgramPosition, + updateMinimizeTarget, + activePrograms: programs, + isRunning, + }; + + return {props.children}; } export const usePrograms = () => { - // console.log(`usePrograms called (ID: ${programContextModuleId}), trying to access context:`, ProgramContext); // Keep for debugging - const context = useContext(ProgramContext); - if (!context) { - // console.error(`usePrograms (ID: ${programContextModuleId}): useContext(ProgramContext) returned null/undefined.`); // Keep for debugging - throw new Error('usePrograms must be used within a ProgramProvider'); - } - return context; -}; \ No newline at end of file + // console.log(`usePrograms called (ID: ${programContextModuleId}), trying to access context:`, ProgramContext); // Keep for debugging + const context = useContext(programContext); + if (!context) { + // console.error(`usePrograms (ID: ${programContextModuleId}): useContext(ProgramContext) returned null/undefined.`); // Keep for debugging + throw new Error('usePrograms must be used within a ProgramProvider'); + } + return context; +}; diff --git a/src/components/SplashScreen.module.css b/src/components/SplashScreen.module.css index b8b7133..10dc46b 100644 --- a/src/components/SplashScreen.module.css +++ b/src/components/SplashScreen.module.css @@ -1,53 +1,57 @@ .crtEffect::after { - content: " "; - display: block; - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); - background-size: 100% 4px, 6px 100%; - z-index: 2; - pointer-events: none; - animation: flicker 0.15s infinite; + content: ' '; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: + linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), + linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); + background-size: + 100% 4px, + 6px 100%; + z-index: 2; + pointer-events: none; + animation: flicker 0.15s infinite; } .fadeOut { - opacity: 0; - transition: opacity 1000ms ease-out; + opacity: 0; + transition: opacity 1000ms ease-out; } @keyframes flicker { - 0% { - opacity: 0.2123; - } - - 5% { - opacity: 0.3145; - } - - 10% { - opacity: 0.4323; - } - - 15% { - opacity: 0.2123; - } - - 20% { - opacity: 0.3145; - } - - 25% { - opacity: 0.4323; - } - - 30% { - opacity: 0.2123; - } - - 100% { - opacity: 0.2123; - } -} \ No newline at end of file + 0% { + opacity: 0.2123; + } + + 5% { + opacity: 0.3145; + } + + 10% { + opacity: 0.4323; + } + + 15% { + opacity: 0.2123; + } + + 20% { + opacity: 0.3145; + } + + 25% { + opacity: 0.4323; + } + + 30% { + opacity: 0.2123; + } + + 100% { + opacity: 0.2123; + } +} diff --git a/src/components/SplashScreen.tsx b/src/components/SplashScreen.tsx index 7056210..55114cd 100644 --- a/src/components/SplashScreen.tsx +++ b/src/components/SplashScreen.tsx @@ -1,5 +1,4 @@ -import { createSignal, onMount, Show, For, createMemo } from 'solid-js'; -import type { Component } from 'solid-js'; +import { createSignal, onMount, Show, For, createMemo, untrack } from 'solid-js'; import styles from '~/components/SplashScreen.module.css'; import { preloadAllAssets, type AssetStatus } from '~/utils/assetPreloader'; @@ -25,7 +24,7 @@ interface DisplayMessage { const MAX_VISIBLE_MESSAGES = 7; -const SplashScreen: Component = (props) => { +export default function SplashScreen(props: SplashScreenProps) { const [isVisible, setIsVisible] = createSignal(true); const [fadeOut, setFadeOut] = createSignal(false); const [statusMessages, setStatusMessages] = createSignal([]); @@ -71,10 +70,10 @@ const SplashScreen: Component = (props) => { ]); }) .then(() => { - const allLinesRevealed = revealedLines().every((line) => line); - const timeToWait = allLinesRevealed + const areAllLinesRevealed = untrack(() => revealedLines().every((line) => line)); + const timeToWait = areAllLinesRevealed ? 1500 - : (revealedLines().length - currentLineIndex) * 300 + 1500; + : untrack(() => (revealedLines().length - currentLineIndex) * 300 + 1500); setStatusMessages((prev) => [ ...prev, @@ -114,18 +113,22 @@ const SplashScreen: Component = (props) => { }); }); - const LogoDisplay = () => ( -
    - {ASCII_LOGO.map((line, index) => ( -
    - {line} -
    - ))} -
    - ); + function LogoDisplay() { + return ( +
    + + {(line, index) => ( +
    + {line} +
    + )} +     +
    + ); + } return ( @@ -166,7 +169,7 @@ const SplashScreen: Component = (props) => { style={{ transform: `translateY(-${itemData().position * 4}px)`, color: message.isError - ? 'rgba(255, 100, 100, ${itemData().alpha})' + ? `rgba(255, 100, 100, ${itemData().alpha})` : `rgba(255, 255, 255, ${itemData().alpha})`, }} > @@ -174,7 +177,7 @@ const SplashScreen: Component = (props) => { class="mr-2" style={{ color: message.isError - ? 'rgba(255, 100, 100, ${itemData().alpha})' + ? `rgba(255, 100, 100, ${itemData().alpha})` : `rgba(13, 253, 247, ${itemData().alpha})`, }} > @@ -190,6 +193,4 @@ const SplashScreen: Component = (props) => {
    ); -}; - -export default SplashScreen; +} diff --git a/src/components/StatsList.tsx b/src/components/StatsList.tsx index 4bb7b30..391daf6 100644 --- a/src/components/StatsList.tsx +++ b/src/components/StatsList.tsx @@ -1,49 +1,39 @@ import type { Component } from 'solid-js'; interface StatRowProps { - label: string; - value: string | number; + label: string; + value: string | number; } -const StatRow: Component = (props) => ( -
  • - {props.label} - {props.value} -
    • - ); +function StatRow(props: StatRowProps) { + return ( +
  • + {props.label} + {props.value} +
    • + ); +} interface StatsListProps { - program: { - speed: number; - corruption: number; - health: number; - maxHealth: number; - damage: number; - }; + program: { + speed: number; + corruption: number; + health: number; + maxHealth: number; + damage: number; + }; } -const StatsList: Component = (props) => ( -
    -
    Stats
    -
      - - - - -
    -
    - ); +const statsList: Component = (props) => ( +
    +
    Stats
    +
      + + + + +
    +
    +); -export default StatsList; \ No newline at end of file +export default statsList; diff --git a/src/components/Theme/ThemeContext.tsx b/src/components/Theme/ThemeContext.tsx index f321ab1..e02054e 100644 --- a/src/components/Theme/ThemeContext.tsx +++ b/src/components/Theme/ThemeContext.tsx @@ -4,45 +4,32 @@ import { createContext, createSignal, createEffect, useContext } from 'solid-js' export type ThemeOption = 'daemon-os'; interface ThemeContextType { - currentTheme: () => ThemeOption; - setTheme: (theme: ThemeOption) => void; - isDarkTheme: () => boolean; + currentTheme: () => ThemeOption; } -const ThemeContext = createContext(); +const themeContext = createContext(); const DEFAULT_THEME: ThemeOption = 'daemon-os'; -export function ThemeProvider(props: { children: JSX.Element; }) { - // Always use the daemon-os theme - const [currentTheme, setCurrentTheme] = createSignal(DEFAULT_THEME); - const isDarkTheme = () => false; // daemon-os is not a dark theme - - const setTheme = (theme: ThemeOption) => { - setCurrentTheme(DEFAULT_THEME); // Always set to daemon-os regardless of input - }; - - createEffect(() => { - document.documentElement.setAttribute('data-theme', currentTheme()); - }); - - const contextValue = { - currentTheme, - setTheme, - isDarkTheme - }; - - return ( - - {props.children} - - ); +export function ThemeProvider(props: { children: JSX.Element }) { + // Always use the daemon-os theme + const [currentTheme] = createSignal(DEFAULT_THEME); + + createEffect(() => { + document.documentElement.setAttribute('data-theme', currentTheme()); + }); + + const contextValue = { + currentTheme, + }; + + return {props.children}; } export function useTheme() { - const context = useContext(ThemeContext); - if (!context) { - throw new Error('useTheme must be used within a ThemeProvider'); - } - return context; -} \ No newline at end of file + const context = useContext(themeContext); + if (!context) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +} diff --git a/src/components/Theme/ThemeSwitcher.tsx b/src/components/Theme/ThemeSwitcher.tsx deleted file mode 100644 index 63b56cc..0000000 --- a/src/components/Theme/ThemeSwitcher.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { createSignal, For, Show } from 'solid-js'; -import { useTheme } from './ThemeContext'; -import type { ThemeOption } from './ThemeContext'; - -export default function ThemeSwitcher() { - const { currentTheme } = useTheme(); - - // This component is not used anymore since there's only one theme now - return null; -} \ No newline at end of file diff --git a/src/components/Theme/Theme_Instructions.md b/src/components/Theme/Theme_Instructions.md index ad57409..c29670f 100644 --- a/src/components/Theme/Theme_Instructions.md +++ b/src/components/Theme/Theme_Instructions.md @@ -4,8 +4,7 @@ 1. Open `ThemeContext.tsx` and add your theme name to the `ThemeOption` type 2. Open `theme.css` and add your theme definition section -3. Add your theme to the theme selector in `ThemeSwitcher.tsx` -4. Test your theme in the application +3. Test your theme in the application ## Detailed Instructions @@ -64,9 +63,11 @@ For a complete theme, you may want to add specific styles for buttons, inputs, s [data-theme='yourThemeName'] input[type='reset'], [data-theme='yourThemeName'] input[type='submit'] { background: #your-button-bg; - box-shadow: inset -1px -1px #your-shadow-dark, inset 1px 1px - #your-shadow-light, inset -2px -2px #your-shadow-mid-dark, inset 2px 2px - #your-shadow-mid-light; + box-shadow: + inset -1px -1px #your-shadow-dark, + inset 1px 1px #your-shadow-light, + inset -2px -2px #your-shadow-mid-dark, + inset 2px 2px #your-shadow-mid-light; color: #your-button-text; } @@ -77,9 +78,11 @@ For a complete theme, you may want to add specific styles for buttons, inputs, s /* Button active state */ [data-theme='yourThemeName'] button:not(:disabled):active { - box-shadow: inset -1px -1px #your-shadow-light, inset 1px 1px - #your-shadow-dark, inset -2px -2px #your-shadow-mid-light, inset 2px 2px - #your-shadow-mid-dark; + box-shadow: + inset -1px -1px #your-shadow-light, + inset 1px 1px #your-shadow-dark, + inset -2px -2px #your-shadow-mid-light, + inset 2px 2px #your-shadow-mid-dark; } /* Disabled button state */ @@ -94,17 +97,21 @@ For a complete theme, you may want to add specific styles for buttons, inputs, s [data-theme='yourThemeName'] textarea { background-color: #your-input-bg; color: #your-input-text; - box-shadow: inset -1px -1px #your-input-shadow-light, inset 1px 1px - #your-input-shadow-dark, inset -2px -2px #your-input-shadow-mid-light, inset - 2px 2px #your-input-shadow-mid-dark; + box-shadow: + inset -1px -1px #your-input-shadow-light, + inset 1px 1px #your-input-shadow-dark, + inset -2px -2px #your-input-shadow-mid-light, + inset 2px 2px #your-input-shadow-mid-dark; } /* Scrollbar thumb */ [data-theme='yourThemeName'] ::-webkit-scrollbar-thumb { background-color: #your-scrollbar-thumb; - box-shadow: inset -1px -1px #your-shadow-dark, inset 1px 1px - #your-shadow-light, inset -2px -2px #your-shadow-mid-dark, inset 2px 2px - #your-shadow-mid-light; + box-shadow: + inset -1px -1px #your-shadow-dark, + inset 1px 1px #your-shadow-light, + inset -2px -2px #your-shadow-mid-dark, + inset 2px 2px #your-shadow-mid-light; } /* Scrollbar track */ @@ -114,21 +121,6 @@ For a complete theme, you may want to add specific styles for buttons, inputs, s } ``` -### Step 4: Add Your Theme to the Theme Switcher - -Edit `ThemeSwitcher.tsx` and add your theme to the themes array: - -```typescript -const themes: { id: ThemeOption; name: string; description: string }[] = [ - // Existing themes... - { - id: 'yourThemeName', - name: 'Your Theme', - description: 'Description of your theme', - }, -]; -``` - ## Theme Color Tips For a cohesive Windows 98-style theme: @@ -174,8 +166,11 @@ Here's a complete template with example values to get you started: [data-theme='sunsetOrange'] input[type='reset'], [data-theme='sunsetOrange'] input[type='submit'] { background: #ffe8cc; - box-shadow: inset -1px -1px #994c00, inset 1px 1px #ffffff, - inset -2px -2px #ff7b00, inset 2px 2px #fff5e6; + box-shadow: + inset -1px -1px #994c00, + inset 1px 1px #ffffff, + inset -2px -2px #ff7b00, + inset 2px 2px #fff5e6; color: #663300; } @@ -184,8 +179,11 @@ Here's a complete template with example values to get you started: } [data-theme='sunsetOrange'] button:not(:disabled):active { - box-shadow: inset -1px -1px #fff5e6, inset 1px 1px #994c00, - inset -2px -2px #ffffff, inset 2px 2px #ff7b00; + box-shadow: + inset -1px -1px #fff5e6, + inset 1px 1px #994c00, + inset -2px -2px #ffffff, + inset 2px 2px #ff7b00; } /* Text inputs */ @@ -194,8 +192,11 @@ Here's a complete template with example values to get you started: [data-theme='sunsetOrange'] textarea { background-color: #fff5e6; color: #663300; - box-shadow: inset -1px -1px #fff5e6, inset 1px 1px #994c00, - inset -2px -2px #ffffff, inset 2px 2px #ff7b00; + box-shadow: + inset -1px -1px #fff5e6, + inset 1px 1px #994c00, + inset -2px -2px #ffffff, + inset 2px 2px #ff7b00; } ``` diff --git a/src/components/Theme/theme.css b/src/components/Theme/theme.css index ce56458..fd54113 100644 --- a/src/components/Theme/theme.css +++ b/src/components/Theme/theme.css @@ -1,568 +1,572 @@ -/* - - This file was created with Claude 3.7 Sonnet (Extended Thinking Mode) - - The 98.CSS file is a humongous endeavor to alter and I did not want to fuck with it +/* + + This file was created with Claude 3.7 Sonnet (Extended Thinking Mode) + + The 98.CSS file is a humongous endeavor to alter and I did not want to fuck with it - Francisco Casiano --- Apr 17, 2025 - + */ /* overlays on 98.css */ :root { - /* Base colors */ - --theme-primary: #000080; - --theme-secondary: #c0c0c0; - --theme-accent: #008080; + /* Base colors */ + --theme-primary: #000080; + --theme-secondary: #c0c0c0; + --theme-accent: #008080; - /* Desktop background - one of the most visible elements */ - --theme-desktop-bg: #008080; + /* Desktop background - one of the most visible elements */ + --theme-desktop-bg: #008080; - /* Window colors - selectively override 98.css */ - --theme-window-bg: #c0c0c0; - --theme-titlebar-bg-start: navy; - --theme-titlebar-bg-end: #1084d0; - --theme-titlebar-text: #ffffff; + /* Window colors - selectively override 98.css */ + --theme-window-bg: #c0c0c0; + --theme-titlebar-bg-start: navy; + --theme-titlebar-bg-end: #1084d0; + --theme-titlebar-text: #ffffff; - /* Text colors */ - --theme-text: #000000; - --theme-text-secondary: #222222; - --theme-text-disabled: grey; + /* Text colors */ + --theme-text: #000000; + --theme-text-secondary: #222222; + --theme-text-disabled: grey; - /* Status indicators */ - --theme-success: #008000; - --theme-error: #ff0000; - --theme-warning: #ffcc00; - --theme-info: #0000ff; + /* Status indicators */ + --theme-success: #008000; + --theme-error: #ff0000; + --theme-warning: #ffcc00; + --theme-info: #0000ff; } /* Apply desktop background */ body, #root { - background-color: var(--theme-desktop-bg) !important; + background-color: var(--theme-desktop-bg) !important; } /* Theme: daemon-os */ [data-theme='daemon-os'] { - /* Base colors extracted from module.css files */ - --theme-primary: #4604ec; - --theme-secondary: #9a5cff; - --theme-accent: #0dfdf7; - --theme-desktop-bg: #9a5cff; - - /* Window colors */ - --theme-window-bg: white; - --theme-titlebar-bg-start: white; - --theme-titlebar-bg-end: white; - --theme-titlebar-text: #4604ec; - - /* Text colors */ - --theme-text: #0c046f; - --theme-text-secondary: #4604ec; - --theme-text-disabled: #666666; - - /* Status indicators */ - --theme-success: #00cc99; - --theme-error: #ff0000; - --theme-warning: #fff7a0; - --theme-info: #0dfdf7; - - /* Scrollbar colors */ - --theme-scrollbar-bg: #c3b9ff; - --theme-scrollbar-thumb: #4604ec; - --theme-scrollbar-button: #e1e1e1; - --theme-scrollbar-arrow: #0c046f; + /* Base colors extracted from module.css files */ + --theme-primary: #4604ec; + --theme-secondary: #9a5cff; + --theme-accent: #0dfdf7; + --theme-desktop-bg: #9a5cff; + + /* Window colors */ + --theme-window-bg: white; + --theme-titlebar-bg-start: white; + --theme-titlebar-bg-end: white; + --theme-titlebar-text: #4604ec; + + /* Text colors */ + --theme-text: #0c046f; + --theme-text-secondary: #4604ec; + --theme-text-disabled: #666666; + + /* Status indicators */ + --theme-success: #00cc99; + --theme-error: #ff0000; + --theme-warning: #fff7a0; + --theme-info: #0dfdf7; + + /* Scrollbar colors */ + --theme-scrollbar-bg: #c3b9ff; + --theme-scrollbar-thumb: #4604ec; + --theme-scrollbar-button: #e1e1e1; + --theme-scrollbar-arrow: #0c046f; } /* Apply theme overrides with high specificity selectors */ /* Title bar color override */ [data-theme] .title-bar { - background: linear-gradient(90deg, var(--theme-titlebar-bg-start), var(--theme-titlebar-bg-end)) !important; + background: linear-gradient( + 90deg, + var(--theme-titlebar-bg-start), + var(--theme-titlebar-bg-end) + ) !important; } [data-theme] .title-bar-text { - color: var(--theme-titlebar-text) !important; + color: var(--theme-titlebar-text) !important; } /* Window overrides */ [data-theme] .window { - background-color: var(--theme-window-bg) !important; - color: var(--theme-text) !important; + background-color: var(--theme-window-bg) !important; + color: var(--theme-text) !important; } [data-theme] .window-body { - color: var(--theme-text) !important; + color: var(--theme-text) !important; } /* Status bar overrides */ [data-theme] .status-bar { - background-color: var(--theme-secondary) !important; + background-color: var(--theme-secondary) !important; } [data-theme] .status-bar-field { - color: var(--theme-text) !important; + color: var(--theme-text) !important; } /* Text overrides */ [data-theme] .window-body p, [data-theme] .window-body div, [data-theme] .window-body span { - color: var(--theme-text); + color: var(--theme-text); } /* Modal dialog-specific overrides */ [data-theme] .modal { - background-color: var(--theme-window-bg) !important; + background-color: var(--theme-window-bg) !important; } /* Focus styles for buttons */ [data-theme] button:focus, -[data-theme] input[type=reset]:focus, -[data-theme] input[type=submit]:focus { - outline: 1px dotted var(--theme-accent); - outline-offset: -4px; +[data-theme] input[type='reset']:focus, +[data-theme] input[type='submit']:focus { + outline: 1px dotted var(--theme-accent); + outline-offset: -4px; } /* Window overrides for daemon-os theme */ -[data-theme="daemon-os"] .window { - background: white; - border-top: 2px solid #e1e1e1; - border-left: 2px solid #0dfdf7; - border-right: 2px solid #11b3f4; - border-bottom: 2px solid #3d00f3; - box-shadow: none; -} - -[data-theme="daemon-os"] .title-bar { - background: white; - background-image: none; - box-shadow: none; - margin: 4px 8px; - border-top: 2px solid #e1e1e1; - border-left: 2px solid #e1e1e1; - border-right: 2px solid #904cff; - border-bottom: 2px solid #904cff; - width: fit-content; +[data-theme='daemon-os'] .window { + background: white; + border-top: 2px solid #e1e1e1; + border-left: 2px solid #0dfdf7; + border-right: 2px solid #11b3f4; + border-bottom: 2px solid #3d00f3; + box-shadow: none; +} + +[data-theme='daemon-os'] .title-bar { + background: white; + background-image: none; + box-shadow: none; + margin: 4px 8px; + border-top: 2px solid #e1e1e1; + border-left: 2px solid #e1e1e1; + border-right: 2px solid #904cff; + border-bottom: 2px solid #904cff; + width: fit-content; } /* Title bar controls (close, minimize, maximize buttons) */ -[data-theme="daemon-os"] .title-bar-controls button { - background-color: #e1e1e1; - box-shadow: none; - border: none; - border-top: 1px solid #e1e1e1; - border-left: 1px solid #e1e1e1; - border-right: 1px solid #904cff; - border-bottom: 1px solid #904cff; - display: flex; - align-items: center; - justify-content: center; +[data-theme='daemon-os'] .title-bar-controls button { + background-color: #e1e1e1; + box-shadow: none; + border: none; + border-top: 1px solid #e1e1e1; + border-left: 1px solid #e1e1e1; + border-right: 1px solid #904cff; + border-bottom: 1px solid #904cff; + display: flex; + align-items: center; + justify-content: center; } /* Specific button colors */ -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Close"] { - background-color: #ff4c4c; +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Close'] { + background-color: #ff4c4c; } -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Minimize"] { - background-color: #d9d9d9; +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Minimize'] { + background-color: #d9d9d9; } -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Maximize"], -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Restore"] { - background-color: #d9d9d9; +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Maximize'], +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Restore'] { + background-color: #d9d9d9; } /* Hover states */ -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Close"]:hover { - background-color: #ff6b6b; +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Close']:hover { + background-color: #ff6b6b; } -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Minimize"]:hover, -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Maximize"]:hover, -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Restore"]:hover { - background-color: #f0f0f0; +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Minimize']:hover, +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Maximize']:hover, +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Restore']:hover { + background-color: #f0f0f0; } /* Active states */ -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Close"]:active { - background-color: #e62e2e; - border-top: 1px solid #904cff; - border-left: 1px solid #904cff; - border-right: 1px solid #e1e1e1; - border-bottom: 1px solid #e1e1e1; +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Close']:active { + background-color: #e62e2e; + border-top: 1px solid #904cff; + border-left: 1px solid #904cff; + border-right: 1px solid #e1e1e1; + border-bottom: 1px solid #e1e1e1; } -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Minimize"]:active, -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Maximize"]:active, -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Restore"]:active { - background-color: #c3b9ff; - border-top: 1px solid #904cff; - border-left: 1px solid #904cff; - border-right: 1px solid #e1e1e1; - border-bottom: 1px solid #e1e1e1; +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Minimize']:active, +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Maximize']:active, +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Restore']:active { + background-color: #c3b9ff; + border-top: 1px solid #904cff; + border-left: 1px solid #904cff; + border-right: 1px solid #e1e1e1; + border-bottom: 1px solid #e1e1e1; } /* Icon colors for contrast */ -[data-theme="daemon-os"] .title-bar-controls button svg { - width: 14px; - height: 14px; - display: flex; - align-items: center; - justify-content: center; +[data-theme='daemon-os'] .title-bar-controls button svg { + width: 14px; + height: 14px; + display: flex; + align-items: center; + justify-content: center; } -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Close"] svg path { - fill: white !important; +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Close'] svg path { + fill: white !important; } -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Minimize"] svg path, -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Maximize"] svg path, -[data-theme="daemon-os"] .title-bar-controls button[aria-label="Restore"] svg path { - fill: #4604ec !important; +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Minimize'] svg path, +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Maximize'] svg path, +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Restore'] svg path { + fill: #4604ec !important; } /* Disabled states */ -[data-theme="daemon-os"] .title-bar-controls button:disabled { - background-color: #b8b8b8; - opacity: 0.7; - cursor: not-allowed; +[data-theme='daemon-os'] .title-bar-controls button:disabled { + background-color: #b8b8b8; + opacity: 0.7; + cursor: not-allowed; } /* Specific button icons */ -[data-theme="daemon-os"] .title-bar-controls button[aria-label=Minimize], -[data-theme="daemon-os"] .title-bar-controls button[aria-label].minimize { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234604ec' d='M0 0h6v2H0z'/%3E%3C/svg%3E"); +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Minimize'], +[data-theme='daemon-os'] .title-bar-controls button[aria-label].minimize { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234604ec' d='M0 0h6v2H0z'/%3E%3C/svg%3E"); } -[data-theme="daemon-os"] .title-bar-controls button[aria-label=Maximize], -[data-theme="daemon-os"] .title-bar-controls button[aria-label].maximize { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%234604ec'/%3E%3C/svg%3E"); +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Maximize'], +[data-theme='daemon-os'] .title-bar-controls button[aria-label].maximize { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%234604ec'/%3E%3C/svg%3E"); } -[data-theme="daemon-os"] .title-bar-controls button[aria-label=Restore], -[data-theme="daemon-os"] .title-bar-controls button[aria-label].restore { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234604ec' d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/%3E%3C/svg%3E"); +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Restore'], +[data-theme='daemon-os'] .title-bar-controls button[aria-label].restore { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%234604ec' d='M2 0h6v2H2zM7 2h1v4H7zM2 2h1v1H2zM6 5h1v1H6zM0 3h6v2H0zM5 5h1v4H5zM0 5h1v4H0zM1 8h4v1H1z'/%3E%3C/svg%3E"); } -[data-theme="daemon-os"] .title-bar-controls button[aria-label=Close], -[data-theme="daemon-os"] .title-bar-controls button[aria-label].close { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%234604ec'/%3E%3C/svg%3E"); +[data-theme='daemon-os'] .title-bar-controls button[aria-label='Close'], +[data-theme='daemon-os'] .title-bar-controls button[aria-label].close { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%234604ec'/%3E%3C/svg%3E"); } -[data-theme="daemon-os"] .window-body { - background-color: #b0a9e4; - color: #0c046f; - border-top: 4px solid #8d46ff; - border-left: 4px solid #8d46ff; - border-right: 4px solid #c3c3c2; - border-bottom: 4px solid #c3c3c2; - margin: 8px; +[data-theme='daemon-os'] .window-body { + background-color: #b0a9e4; + color: #0c046f; + border-top: 4px solid #8d46ff; + border-left: 4px solid #8d46ff; + border-right: 4px solid #c3c3c2; + border-bottom: 4px solid #c3c3c2; + margin: 8px; } /* Button styling for daemon-os */ -[data-theme="daemon-os"] button, -[data-theme="daemon-os"] input[type="reset"], -[data-theme="daemon-os"] input[type="submit"] { - background: white; - border: none; - border-top: 2px solid #e1e1e1; - border-left: 2px solid #e1e1e1; - border-right: 2px solid #904cff; - border-bottom: 2px solid #904cff; - box-shadow: none; - color: #0c046f; - border-radius: 0; +[data-theme='daemon-os'] button, +[data-theme='daemon-os'] input[type='reset'], +[data-theme='daemon-os'] input[type='submit'] { + background: white; + border: none; + border-top: 2px solid #e1e1e1; + border-left: 2px solid #e1e1e1; + border-right: 2px solid #904cff; + border-bottom: 2px solid #904cff; + box-shadow: none; + color: #0c046f; + border-radius: 0; } /* Handle Tailwind button classes (like in ProgramEventDemo) */ -[data-theme="daemon-os"] .bg-blue-500, -[data-theme="daemon-os"] .bg-blue-600 { - background-color: #4604ec !important; - color: white !important; - border: none !important; - border-top: 2px solid #e1e1e1 !important; - border-left: 2px solid #e1e1e1 !important; - border-right: 2px solid #904cff !important; - border-bottom: 2px solid #904cff !important; +[data-theme='daemon-os'] .bg-blue-500, +[data-theme='daemon-os'] .bg-blue-600 { + background-color: #4604ec !important; + color: white !important; + border: none !important; + border-top: 2px solid #e1e1e1 !important; + border-left: 2px solid #e1e1e1 !important; + border-right: 2px solid #904cff !important; + border-bottom: 2px solid #904cff !important; } -[data-theme="daemon-os"] button:not(:disabled):hover, -[data-theme="daemon-os"] input[type="reset"]:not(:disabled):hover, -[data-theme="daemon-os"] input[type="submit"]:not(:disabled):hover { - background-color: #f5f5f5; - color: #0c046f; +[data-theme='daemon-os'] button:not(:disabled):hover, +[data-theme='daemon-os'] input[type='reset']:not(:disabled):hover, +[data-theme='daemon-os'] input[type='submit']:not(:disabled):hover { + background-color: #f5f5f5; + color: #0c046f; } -[data-theme="daemon-os"] button.bg-blue-500:hover, -[data-theme="daemon-os"] button.hover\:bg-blue-600:hover { - background-color: #5f20ff !important; - color: white !important; +[data-theme='daemon-os'] button.bg-blue-500:hover, +[data-theme='daemon-os'] button.hover\:bg-blue-600:hover { + background-color: #5f20ff !important; + color: white !important; } /* Input fields for daemon-os */ -[data-theme="daemon-os"] input[type="email"], -[data-theme="daemon-os"] input[type="number"], -[data-theme="daemon-os"] input[type="password"], -[data-theme="daemon-os"] input[type="search"], -[data-theme="daemon-os"] input[type="tel"], -[data-theme="daemon-os"] input[type="text"], -[data-theme="daemon-os"] select, -[data-theme="daemon-os"] textarea { - background-color: #e1e1e1; - border: none; - border-top: 2px solid #904cff; - border-left: 2px solid #904cff; - border-right: 2px solid #e1e1e1; - border-bottom: 2px solid #e1e1e1; - box-shadow: none; - color: #0c046f; +[data-theme='daemon-os'] input[type='email'], +[data-theme='daemon-os'] input[type='number'], +[data-theme='daemon-os'] input[type='password'], +[data-theme='daemon-os'] input[type='search'], +[data-theme='daemon-os'] input[type='tel'], +[data-theme='daemon-os'] input[type='text'], +[data-theme='daemon-os'] select, +[data-theme='daemon-os'] textarea { + background-color: #e1e1e1; + border: none; + border-top: 2px solid #904cff; + border-left: 2px solid #904cff; + border-right: 2px solid #e1e1e1; + border-bottom: 2px solid #e1e1e1; + box-shadow: none; + color: #0c046f; } /* Status bars for daemon-os */ -[data-theme="daemon-os"] .status-bar { - background-color: #9a5cff; +[data-theme='daemon-os'] .status-bar { + background-color: #9a5cff; } -[data-theme="daemon-os"] .status-bar-field { - background-color: #e1e1e1; - color: #0c046f; +[data-theme='daemon-os'] .status-bar-field { + background-color: #e1e1e1; + color: #0c046f; } /* Scrollbar styling for daemon-os */ -[data-theme="daemon-os"] ::-webkit-scrollbar-track { - background-color: #c3b9ff; - background-image: none; +[data-theme='daemon-os'] ::-webkit-scrollbar-track { + background-color: #c3b9ff; + background-image: none; } -[data-theme="daemon-os"] ::-webkit-scrollbar-thumb { - background-color: #4604ec; - box-shadow: none; +[data-theme='daemon-os'] ::-webkit-scrollbar-thumb { + background-color: #4604ec; + box-shadow: none; } -[data-theme="daemon-os"] ::-webkit-scrollbar-button:vertical:start { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e1e1e1' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%230c046f'/%3E%3C/svg%3E"); +[data-theme='daemon-os'] ::-webkit-scrollbar-button:vertical:start { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e1e1e1' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%230c046f'/%3E%3C/svg%3E"); } -[data-theme="daemon-os"] ::-webkit-scrollbar-button:vertical:end { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e1e1e1' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%230c046f'/%3E%3C/svg%3E"); +[data-theme='daemon-os'] ::-webkit-scrollbar-button:vertical:end { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e1e1e1' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%230c046f'/%3E%3C/svg%3E"); } /* Progress indicators for daemon-os */ -[data-theme="daemon-os"] .progress-indicator { - border: none; - border-top: 2px solid #e1e1e1; - border-left: 2px solid #e1e1e1; - border-right: 2px solid #904cff; - border-bottom: 2px solid #904cff; - box-shadow: none; +[data-theme='daemon-os'] .progress-indicator { + border: none; + border-top: 2px solid #e1e1e1; + border-left: 2px solid #e1e1e1; + border-right: 2px solid #904cff; + border-bottom: 2px solid #904cff; + box-shadow: none; } -[data-theme="daemon-os"] .progress-indicator>.progress-indicator-bar { - background-color: #00cc99; +[data-theme='daemon-os'] .progress-indicator > .progress-indicator-bar { + background-color: #00cc99; } -[data-theme="daemon-os"] .progress-indicator>.progress-corruption-bar { - background-color: #ff0000; +[data-theme='daemon-os'] .progress-indicator > .progress-corruption-bar { + background-color: #ff0000; } /* Tree view for daemon-os */ -[data-theme="daemon-os"] ul.tree-view { - background: #e1e1e1; - box-shadow: none; - border: none; - border-top: 2px solid #e1e1e1; - border-left: 2px solid #e1e1e1; - border-right: 2px solid #904cff; - border-bottom: 2px solid #904cff; +[data-theme='daemon-os'] ul.tree-view { + background: #e1e1e1; + box-shadow: none; + border: none; + border-top: 2px solid #e1e1e1; + border-left: 2px solid #e1e1e1; + border-right: 2px solid #904cff; + border-bottom: 2px solid #904cff; } -[data-theme="daemon-os"] ul.tree-view a { - color: #0c046f; +[data-theme='daemon-os'] ul.tree-view a { + color: #0c046f; } -[data-theme="daemon-os"] ul.tree-view a:focus { - background-color: #4604ec; - color: #fff; +[data-theme='daemon-os'] ul.tree-view a:focus { + background-color: #4604ec; + color: #fff; } /* Modal dialogs for daemon-os */ -[data-theme="daemon-os"] .modal { - background-color: #b0a9e4; - border-top: 2px solid #e1e1e1; - border-left: 2px solid #0dfdf7; - border-right: 2px solid #11b3f4; - border-bottom: 2px solid #3d00f3; +[data-theme='daemon-os'] .modal { + background-color: #b0a9e4; + border-top: 2px solid #e1e1e1; + border-left: 2px solid #0dfdf7; + border-right: 2px solid #11b3f4; + border-bottom: 2px solid #3d00f3; } /* Focus outlines for daemon-os */ -[data-theme="daemon-os"] button:focus, -[data-theme="daemon-os"] input:focus, -[data-theme="daemon-os"] select:focus, -[data-theme="daemon-os"] textarea:focus { - outline: 1px dotted #4604ec; +[data-theme='daemon-os'] button:focus, +[data-theme='daemon-os'] input:focus, +[data-theme='daemon-os'] select:focus, +[data-theme='daemon-os'] textarea:focus { + outline: 1px dotted #4604ec; } /* Taskbar buttons for daemon-os */ -[data-theme="daemon-os"] #taskbar button { - background: white; - border: none; - border-top: 2px solid #e1e1e1; - border-left: 2px solid #e1e1e1; - border-right: 2px solid #904cff; - border-bottom: 2px solid #904cff; +[data-theme='daemon-os'] #taskbar button { + background: white; + border: none; + border-top: 2px solid #e1e1e1; + border-left: 2px solid #e1e1e1; + border-right: 2px solid #904cff; + border-bottom: 2px solid #904cff; } -[data-theme="daemon-os"] #taskbar button:hover { - background-color: #f5f5f5; +[data-theme='daemon-os'] #taskbar button:hover { + background-color: #f5f5f5; } -[data-theme="daemon-os"] #taskbar button.active, -[data-theme="daemon-os"] #taskbar button:active { - background-color: #c3b9ff; - border-top: 2px solid #904cff; - border-left: 2px solid #904cff; - border-right: 2px solid #e1e1e1; - border-bottom: 2px solid #e1e1e1; +[data-theme='daemon-os'] #taskbar button.active, +[data-theme='daemon-os'] #taskbar button:active { + background-color: #c3b9ff; + border-top: 2px solid #904cff; + border-left: 2px solid #904cff; + border-right: 2px solid #e1e1e1; + border-bottom: 2px solid #e1e1e1; } /* Active state for buttons */ -[data-theme="daemon-os"] button:not(:disabled):active, -[data-theme="daemon-os"] input[type="reset"]:not(:disabled):active, -[data-theme="daemon-os"] input[type="submit"]:not(:disabled):active { - background-color: #c3b9ff; - color: #0c046f; - box-shadow: none; - border-top: 2px solid #904cff; - border-left: 2px solid #904cff; - border-right: 2px solid #e1e1e1; - border-bottom: 2px solid #e1e1e1; -} - -[data-theme="daemon-os"] .title-bar-controls button:active { - background-color: #c3b9ff; - border-top: 1px solid #904cff; - border-left: 1px solid #904cff; - border-right: 1px solid #e1e1e1; - border-bottom: 1px solid #e1e1e1; +[data-theme='daemon-os'] button:not(:disabled):active, +[data-theme='daemon-os'] input[type='reset']:not(:disabled):active, +[data-theme='daemon-os'] input[type='submit']:not(:disabled):active { + background-color: #c3b9ff; + color: #0c046f; + box-shadow: none; + border-top: 2px solid #904cff; + border-left: 2px solid #904cff; + border-right: 2px solid #e1e1e1; + border-bottom: 2px solid #e1e1e1; +} + +[data-theme='daemon-os'] .title-bar-controls button:active { + background-color: #c3b9ff; + border-top: 1px solid #904cff; + border-left: 1px solid #904cff; + border-right: 1px solid #e1e1e1; + border-bottom: 1px solid #e1e1e1; } /* Active state for Tailwind buttons */ -[data-theme="daemon-os"] button.bg-blue-500:active, -[data-theme="daemon-os"] button.hover\:bg-blue-600:active { - background-color: #3a00d6 !important; - color: white !important; - border-top: 2px solid #904cff !important; - border-left: 2px solid #904cff !important; - border-right: 2px solid #e1e1e1 !important; - border-bottom: 2px solid #e1e1e1 !important; +[data-theme='daemon-os'] button.bg-blue-500:active, +[data-theme='daemon-os'] button.hover\:bg-blue-600:active { + background-color: #3a00d6 !important; + color: white !important; + border-top: 2px solid #904cff !important; + border-left: 2px solid #904cff !important; + border-right: 2px solid #e1e1e1 !important; + border-bottom: 2px solid #e1e1e1 !important; } /* Make the control buttons more distinctive and properly sized */ -[data-theme="daemon-os"] .window-controls { - display: flex; - align-items: center; - gap: 4px; - position: absolute; - top: 4px; - right: 4px; - z-index: 50; +[data-theme='daemon-os'] .window-controls { + display: flex; + align-items: center; + gap: 4px; + position: absolute; + top: 4px; + right: 4px; + z-index: 50; } /* Target the buttons with both their inline classes and our added styling */ -[data-theme="daemon-os"] .window-controls button.title-bar-controls { - min-width: 22px; - width: 22px; - height: 22px; - padding: 0; - margin: 0 2px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 2px; - transition: background-color 0.1s ease; +[data-theme='daemon-os'] .window-controls button.title-bar-controls { + min-width: 22px; + width: 22px; + height: 22px; + padding: 0; + margin: 0 2px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 2px; + transition: background-color 0.1s ease; } /* Specific button colors */ -[data-theme="daemon-os"] .window-controls button[aria-label="Close"] { - background-color: #ff4c4c; +[data-theme='daemon-os'] .window-controls button[aria-label='Close'] { + background-color: #ff4c4c; } -[data-theme="daemon-os"] .window-controls button[aria-label="Minimize"] { - background-color: #d9d9d9; +[data-theme='daemon-os'] .window-controls button[aria-label='Minimize'] { + background-color: #d9d9d9; } -[data-theme="daemon-os"] .window-controls button[aria-label="Maximize"], -[data-theme="daemon-os"] .window-controls button[aria-label="Restore"] { - background-color: #d9d9d9; +[data-theme='daemon-os'] .window-controls button[aria-label='Maximize'], +[data-theme='daemon-os'] .window-controls button[aria-label='Restore'] { + background-color: #d9d9d9; } /* Hover states */ -[data-theme="daemon-os"] .window-controls button[aria-label="Close"]:hover { - background-color: #ff6b6b; +[data-theme='daemon-os'] .window-controls button[aria-label='Close']:hover { + background-color: #ff6b6b; } -[data-theme="daemon-os"] .window-controls button[aria-label="Minimize"]:hover, -[data-theme="daemon-os"] .window-controls button[aria-label="Maximize"]:hover, -[data-theme="daemon-os"] .window-controls button[aria-label="Restore"]:hover { - background-color: #f0f0f0; +[data-theme='daemon-os'] .window-controls button[aria-label='Minimize']:hover, +[data-theme='daemon-os'] .window-controls button[aria-label='Maximize']:hover, +[data-theme='daemon-os'] .window-controls button[aria-label='Restore']:hover { + background-color: #f0f0f0; } /* Icon colors and sizing */ -[data-theme="daemon-os"] .window-controls button svg { - width: 14px; - height: 14px; +[data-theme='daemon-os'] .window-controls button svg { + width: 14px; + height: 14px; } -[data-theme="daemon-os"] .window-controls button[aria-label="Close"] svg path { - fill: white !important; +[data-theme='daemon-os'] .window-controls button[aria-label='Close'] svg path { + fill: white !important; } -[data-theme="daemon-os"] .window-controls button[aria-label="Minimize"] svg path, -[data-theme="daemon-os"] .window-controls button[aria-label="Maximize"] svg path, -[data-theme="daemon-os"] .window-controls button[aria-label="Restore"] svg path { - fill: #4604ec !important; +[data-theme='daemon-os'] .window-controls button[aria-label='Minimize'] svg path, +[data-theme='daemon-os'] .window-controls button[aria-label='Maximize'] svg path, +[data-theme='daemon-os'] .window-controls button[aria-label='Restore'] svg path { + fill: #4604ec !important; } /* Make the wallet button in taskbar fit its content */ .taskbar-wallet-btn { - min-width: auto !important; - width: auto !important; - box-sizing: content-box !important; - height: 30px !important; - box-shadow: none !important; - border: none !important; - padding: 0 8px !important; - margin: 0 !important; + min-width: auto !important; + width: auto !important; + box-sizing: content-box !important; + height: 30px !important; + box-shadow: none !important; + border: none !important; + padding: 0 8px !important; + margin: 0 !important; } /* Wallet selector disabled buttons */ .window-body button[disabled]:not(.title-bar-controls) { - opacity: 0.6; - cursor: not-allowed; - color: var(--theme-text-disabled); + opacity: 0.6; + cursor: not-allowed; + color: var(--theme-text-disabled); } -[data-theme="daemon-os"] .window-body button[disabled]:not(.title-bar-controls) { - background-color: #e1e1e1; - color: #8a8a8a; - border-top: 2px solid #e1e1e1; - border-left: 2px solid #e1e1e1; - border-right: 2px solid #c1c1c1; - border-bottom: 2px solid #c1c1c1; +[data-theme='daemon-os'] .window-body button[disabled]:not(.title-bar-controls) { + background-color: #e1e1e1; + color: #8a8a8a; + border-top: 2px solid #e1e1e1; + border-left: 2px solid #e1e1e1; + border-right: 2px solid #c1c1c1; + border-bottom: 2px solid #c1c1c1; } /* Specific daemon-os theme styling for the wallet button */ -[data-theme="daemon-os"] .taskbar-wallet-btn { - background: transparent !important; - border: none !important; - height: 30px !important; +[data-theme='daemon-os'] .taskbar-wallet-btn { + background: transparent !important; + border: none !important; + height: 30px !important; } -[data-theme="daemon-os"] .taskbar-wallet-btn:hover { - background-color: rgba(255, 255, 255, 0.2) !important; +[data-theme='daemon-os'] .taskbar-wallet-btn:hover { + background-color: rgba(255, 255, 255, 0.2) !important; } -[data-theme="daemon-os"] .taskbar-wallet-btn:active { - background-color: rgba(255, 255, 255, 0.3) !important; -} \ No newline at end of file +[data-theme='daemon-os'] .taskbar-wallet-btn:active { + background-color: rgba(255, 255, 255, 0.3) !important; +} diff --git a/src/components/WGPUNotification/WGPUNotificationApp.tsx b/src/components/WGPUNotification/WGPUNotificationApp.tsx index ef5c5b2..7051cf7 100644 --- a/src/components/WGPUNotification/WGPUNotificationApp.tsx +++ b/src/components/WGPUNotification/WGPUNotificationApp.tsx @@ -1,4 +1,4 @@ -import { createSignal, onMount, Show } from "solid-js"; +import { createSignal, onMount, Show } from 'solid-js'; // WebGPU type definitions declare global { @@ -7,9 +7,7 @@ declare global { } interface GPU { - requestAdapter( - options?: GPURequestAdapterOptions, - ): Promise; + requestAdapter(options?: GPURequestAdapterOptions): Promise; } interface GPUAdapter { @@ -29,7 +27,7 @@ declare global { } interface GPURequestAdapterOptions { - powerPreference?: "low-power" | "high-performance"; + powerPreference?: 'low-power' | 'high-performance'; forceFallbackAdapter?: boolean; } @@ -90,7 +88,7 @@ export default function WGPUNotificationApp() { device, }); } catch (error) { - console.error("WGPU check failed:", error); + console.error('WGPU check failed:', error); setWgpuSupport({ isSupported: false, adapter: null, @@ -106,10 +104,10 @@ export default function WGPUNotificationApp() { if (!adapter?.info) return null; return { - vendor: adapter.info.vendor || "Unknown", - architecture: adapter.info.architecture || "Unknown", - device: adapter.info.device || "Unknown", - description: adapter.info.description || "Unknown", + vendor: adapter.info.vendor || 'Unknown', + architecture: adapter.info.architecture || 'Unknown', + device: adapter.info.device || 'Unknown', + description: adapter.info.description || 'Unknown', }; } @@ -119,11 +117,7 @@ export default function WGPUNotificationApp() {
    - +
    @@ -131,113 +125,124 @@ export default function WGPUNotificationApp() {
    - -
    -
    - +
    +
    + + + + } > - - }> + + + +

    - - -

    - {wgpuSupport().isSupported - ? "WebGPU Supported!" - : "WebGPU Not Supported"} -

    -

    - - -

    - Your browser does not support WebGPU, which is required for - the 3D experience. -

    -

    - To enable WebGPU support: -

    -
      -
    • Use Chrome 113+ or Edge 113+
      • -
    • - Enable WebGPU in chrome://flags/#enable-unsafe-webgpu -
      • -
    • Restart your browser
      • -
    • Ensure you have a compatible GPU and drivers
      • -
    -
    }>
    -

    - Your browser supports WebGPU! The 3D experience will work - correctly. -

    -
    -

    GPU Information:

    -

    - Vendor: {adapterInfo()!.vendor} + {wgpuSupport().isSupported ? 'WebGPU Supported!' : 'WebGPU Not Supported'} + +

    + + +

    + Your browser does not support WebGPU, which is required for the 3D + experience.

    -

    - Device: {adapterInfo()!.device} +

    + To enable WebGPU support:

    -

    - Architecture:{" "} - {adapterInfo()!.architecture} -

    -
    -
    -
    +
      +
    • Use Chrome 113+ or Edge 113+
      • +
    • Enable WebGPU in chrome://flags/#enable-unsafe-webgpu
      • +
    • Restart your browser
      • +
    • Ensure you have a compatible GPU and drivers
      • +
    +
    + } + > +
    +

    + Your browser supports WebGPU! The 3D experience will work correctly. +

    + +
    +

    GPU Information:

    +

    + Vendor: {adapterInfo()!.vendor} +

    +

    + Device: {adapterInfo()!.device} +

    +

    + Architecture: {adapterInfo()!.architecture} +

    +
    +     +
    + +
    -
    -

    - About This Application -

    -

    - This application uses WebGPU for high-performance 3D graphics - and compute operations. WebGPU provides direct access to modern - GPU capabilities, enabling smooth 3D rendering and advanced - visual effects. -

    -
    +
    +

    About This Application

    +

    + This application uses WebGPU for high-performance 3D graphics and compute + operations. WebGPU provides direct access to modern GPU capabilities, enabling + smooth 3D rendering and advanced visual effects. +

    +
    -
    -

    Need Help?

    -

    - If you're having trouble with WebGPU support, make sure your - graphics drivers are up to date and you're using a supported - browser. Some corporate networks or security software may also - block WebGPU access. -

    +
    +

    Need Help?

    +

    + If you're having trouble with WebGPU support, make sure your graphics drivers are + up to date and you're using a supported browser. Some corporate networks or + security software may also block WebGPU access. +

    +
    -
    }>
    + } + > +

    Checking WebGPU support...

    -
    +
    +
    diff --git a/src/components/WGPUNotification/WGPUNotificationWindow.tsx b/src/components/WGPUNotification/WGPUNotificationWindow.tsx index 2b526eb..b7aff26 100644 --- a/src/components/WGPUNotification/WGPUNotificationWindow.tsx +++ b/src/components/WGPUNotification/WGPUNotificationWindow.tsx @@ -1,25 +1,20 @@ -import type { JSXElement} from 'solid-js'; -import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'; +import type { JSXElement } from 'solid-js'; +import { createEffect, createSignal, onCleanup, onMount, Show as _Show } from 'solid-js'; import interact from 'interactjs'; import { usePrograms, TASKBAR_HEIGHT_PX } from '../ProgramWindow/programContext'; import X from '../Icons/X'; interface WGPUNotificationWindowProps { - label: string; // window title + label: string; // window title programId: string; - children: JSXElement; // the content within the program window - onClose?: () => void; // optional custom close handler + children: JSXElement; // the content within the program window + onClose?: () => void; // optional custom close handler } export default function WGPUNotificationWindow(props: WGPUNotificationWindowProps) { - const { - unregisterProgram, - bringToFront, - activePrograms, - updateProgramPosition, - } = usePrograms(); - - const getProgramState = () => activePrograms.find(p => p.id === props.programId); + const { unregisterProgram, bringToFront, activePrograms, updateProgramPosition } = usePrograms(); + + const getProgramState = () => activePrograms.find((p) => p.id === props.programId); const programState = () => getProgramState(); // --- State Management --- @@ -44,7 +39,7 @@ export default function WGPUNotificationWindow(props: WGPUNotificationWindowProp function setWindowRef(el: HTMLDivElement) { windowRef = el; applyStateToDOM(); - }; + } function applyStateToDOM() { if (!windowRef) return; @@ -61,8 +56,8 @@ export default function WGPUNotificationWindow(props: WGPUNotificationWindowProp } createEffect(() => { - const state = programState(); - const pos = position(); + const _state = programState(); + const _pos = position(); applyStateToDOM(); }); @@ -115,45 +110,44 @@ export default function WGPUNotificationWindow(props: WGPUNotificationWindowProp bottom: window.innerHeight - TASKBAR_HEIGHT_PX, }; - interactable = interact(windowRef) - .draggable({ - allowFrom: '.title-bar', // Only allow dragging from title bar - inertia: false, - modifiers: [ - interact.modifiers.restrictRect({ - restriction: restrictionRect, - endOnly: false, - }) - ], - listeners: { - start(event) { - bringToFront(props.programId); - syncPositionFromDOM(); // Sync local signal just before drag - setIsDragging(true); - if (windowRef) windowRef.style.userSelect = 'none'; - }, - move(event) { - if (!isDragging()) return; - - // Position is updated directly by interact.js modifier + transform style - const currentPos = position(); - const newX = currentPos.x + event.dx; - const newY = currentPos.y + event.dy; - - setPosition({ x: newX, y: newY }); - event.target.style.transform = `translate(${newX}px, ${newY}px)`; - }, - end(event) { - if (!isDragging()) return; - - const finalPos = syncPositionFromDOM(); - updateProgramPosition(props.programId, finalPos.x, finalPos.y); - - setTimeout(() => setIsDragging(false), 0); - if (windowRef) windowRef.style.userSelect = ''; - } - } - }); + interactable = interact(windowRef).draggable({ + allowFrom: '.title-bar', // Only allow dragging from title bar + inertia: false, + modifiers: [ + interact.modifiers.restrictRect({ + restriction: restrictionRect, + endOnly: false, + }), + ], + listeners: { + start(_event) { + bringToFront(props.programId); + syncPositionFromDOM(); // Sync local signal just before drag + setIsDragging(true); + if (windowRef) windowRef.style.userSelect = 'none'; + }, + move(event) { + if (!isDragging()) return; + + // Position is updated directly by interact.js modifier + transform style + const currentPos = position(); + const newX = currentPos.x + event.dx; + const newY = currentPos.y + event.dy; + + setPosition({ x: newX, y: newY }); + event.target.style.transform = `translate(${newX}px, ${newY}px)`; + }, + end(_event) { + if (!isDragging()) return; + + const finalPos = syncPositionFromDOM(); + updateProgramPosition(props.programId, finalPos.x, finalPos.y); + + setTimeout(() => setIsDragging(false), 0); + if (windowRef) windowRef.style.userSelect = ''; + }, + }, + }); } function cleanupInteract() { @@ -175,7 +169,7 @@ export default function WGPUNotificationWindow(props: WGPUNotificationWindowProp }); // --- Render --- - const state = programState(); + const _state = programState(); return (
    { if (isDragging()) e.stopPropagation(); }} + onMouseDown={(e) => { + if (isDragging()) e.stopPropagation(); + }} > {/* Window Controls - Only Close Button */} -
    e.stopPropagation()}> +
    e.stopPropagation()} + >
    {/* Title Bar */} -
    { if (isDragging()) e.stopPropagation(); }} +
    { + if (isDragging()) e.stopPropagation(); + }} >
    {props.label}
    -
    - {props.children} -
    +
    {props.children}
    ); -} \ No newline at end of file +} diff --git a/src/components/Wallet/WalletApp.tsx b/src/components/Wallet/WalletApp.tsx index d324170..087976a 100644 --- a/src/components/Wallet/WalletApp.tsx +++ b/src/components/Wallet/WalletApp.tsx @@ -6,292 +6,438 @@ import type { LaunchProgramEvent } from '../../App'; import { DAEMON_PACKAGE_ID } from '../../api/constants'; function formatTimestamp(timestampMs: string | undefined): string { - if (!timestampMs) return 'N/A'; - try { - const date = new Date(parseInt(timestampMs)); - // Example format: "4/17/2024, 2:30:15 PM" - return date.toLocaleString(undefined, { - year: 'numeric', month: 'numeric', day: 'numeric', - hour: 'numeric', minute: 'numeric', second: 'numeric' - }); - } catch (e) { - return 'Invalid Date'; - } + if (!timestampMs) return 'N/A'; + try { + const date = new Date(parseInt(timestampMs)); + // Example format: "4/17/2024, 2:30:15 PM" + return date.toLocaleString(undefined, { + year: 'numeric', + month: 'numeric', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + }); + } catch (_e) { + return 'Invalid Date - ' + _e; + } } function getExplorerLink(network: NetworkType, digest: string): string { - const baseUrl = 'https://suiscan.xyz'; - const networkPath = network === 'mainnet' ? 'mainnet' : 'testnet'; - return `${baseUrl}/${networkPath}/tx/${digest}`; + const baseUrl = 'https://suiscan.xyz'; + const networkPath = network === 'mainnet' ? 'mainnet' : 'testnet'; + return `${baseUrl}/${networkPath}/tx/${digest}`; } function getTransactionSummary(tx: TransactionHistoryItem): string { - try { - const kind = tx.transaction?.data?.transaction; - if (!kind) return 'Unknown Kind'; + try { + const kind = tx.transaction?.data?.transaction; + if (!kind) return 'Unknown Kind'; - if (kind.kind === 'ProgrammableTransaction') { - // common patterns - const pt = kind; - if (pt.transactions.length === 1 && 'TransferObjects' in pt.transactions[0]) { - const count = pt.transactions[0].TransferObjects[0]?.length || 0; - return `Transfer ${count} Object(s)`; - } - if (pt.transactions.length === 1 && 'SplitCoins' in pt.transactions[0]) { - return `Split Coins`; - } - const moveCalls = pt.transactions.filter(t => 'MoveCall' in t); - if (moveCalls.length > 0 && 'MoveCall' in moveCalls[0]) { - const funcName = moveCalls[0].MoveCall.function; - const packageName = moveCalls[0].MoveCall.package; + if (kind.kind === 'ProgrammableTransaction') { + // common patterns + const pt = kind; + if (pt.transactions.length === 1 && 'TransferObjects' in pt.transactions[0]) { + const count = pt.transactions[0].TransferObjects[0]?.length || 0; + return `Transfer ${count} Object(s)`; + } + if (pt.transactions.length === 1 && 'SplitCoins' in pt.transactions[0]) { + return `Split Coins`; + } + const moveCalls = pt.transactions.filter((t) => 'MoveCall' in t); + if (moveCalls.length > 0 && 'MoveCall' in moveCalls[0]) { + const funcName = moveCalls[0].MoveCall.function; + const packageName = moveCalls[0].MoveCall.package; - // Use DAEMON_PACKAGE_ID for specific checks - if (funcName === 'mint' && packageName === DAEMON_PACKAGE_ID && moveCalls[0].MoveCall.module === 'encrypted_drive') return 'Buy Encrypted Drive'; - if (funcName === 'generate' && packageName === DAEMON_PACKAGE_ID && moveCalls[0].MoveCall.module === 'monster') return 'Mint Program'; + // Use DAEMON_PACKAGE_ID for specific checks + if ( + funcName === 'mint' && + packageName === DAEMON_PACKAGE_ID && + moveCalls[0].MoveCall.module === 'encrypted_drive' + ) + return 'Buy Encrypted Drive'; + if ( + funcName === 'generate' && + packageName === DAEMON_PACKAGE_ID && + moveCalls[0].MoveCall.module === 'monster' + ) + return 'Mint Program'; - const moduleName = moveCalls[0].MoveCall.module; - return `Call: ${moduleName}::${funcName}`; - } - return 'Programmable Tx'; // Generic fallback - } else if (kind.kind === 'ChangeEpoch') { - return 'Epoch Change'; - } else { - return kind.kind; - } - } catch (e) { - console.error("Error parsing transaction summary:", e, tx); - return 'Parsing Error'; + const moduleName = moveCalls[0].MoveCall.module; + return `Call: ${moduleName}::${funcName}`; + } + return 'Programmable Tx'; // Generic fallback + } else if (kind.kind === 'ChangeEpoch') { + return 'Epoch Change'; + } else { + return kind.kind; } + } catch (e) { + console.error('Error parsing transaction summary:', e, tx); + return 'Parsing Error'; + } } export default function WalletApp() { - const { state, connect, disconnect, refreshBalances, switchNetwork, fetchTransactionHistory } = useWallet(); - const [selectedTab, setSelectedTab] = createSignal('overview'); - const [isRefreshing, setIsRefreshing] = createSignal(false); // Used for the combined refresh button - const [showWalletSelector, setShowWalletSelector] = createSignal(false); + const { state, connect, disconnect, refreshBalances, switchNetwork, fetchTransactionHistory } = + useWallet(); + const [selectedTab, setSelectedTab] = createSignal('overview'); + const [isRefreshing, setIsRefreshing] = createSignal(false); // Used for the combined refresh button + const [showWalletSelector, setShowWalletSelector] = createSignal(false); - function launchProgramByLabel(programLabel: string) { - const event = new CustomEvent('launchProgram', { - detail: { programLabel } - }); - window.dispatchEvent(event); - } + function launchProgramByLabel(programLabel: string) { + const event = new CustomEvent('launchProgram', { + detail: { programLabel }, + }); + window.dispatchEvent(event); + } - // Combined refresh for balances, collections, and history - const handleRefreshAll = async () => { - if (!state.isConnected) return; - setIsRefreshing(true); - // Trigger fetches concurrently - await Promise.allSettled([ - refreshBalances(), - fetchTransactionHistory({ force: true }) - ]); - setIsRefreshing(false); - }; + // Combined refresh for balances, collections, and history + const handleRefreshAll = async () => { + if (!state.isConnected) return; + setIsRefreshing(true); + // Trigger fetches concurrently + await Promise.allSettled([refreshBalances(), fetchTransactionHistory({ force: true })]); + setIsRefreshing(false); + }; - const handleConnect = async (walletName?: string) => { - setShowWalletSelector(false); - await connect(walletName); - }; + const handleConnect = async (walletName?: string) => { + setShowWalletSelector(false); + await connect(walletName); + }; - onMount(() => { - const interval = setInterval(() => { - if (state.isConnected) { - refreshBalances(); - } - }, 30000); // Refresh balances every 30s - return () => clearInterval(interval); - }); + onMount(() => { + const interval = setInterval(() => { + if (state.isConnected) { + refreshBalances(); + } + }, 30000); // Refresh balances every 30s + return () => clearInterval(interval); + }); - return ( -
    - {/* Tab navigation */} -
    - - - -
    + return ( +
    + {/* Tab navigation */} +
    + + + +
    - {/* Content area */} -
    - {/* --- Connected State --- */} - - <> - {/* Overview Tab */} - -
    -
    Account Overview
    -
    - {/* Address */} -
    -
    Address:
    -
    {state.activeAccount?.address}
    - -
    - {/* Balances */} -
    -
    Balances:
    - No balances found.
    }> - {balance => (
    {balance.symbol}{(parseInt(balance.balance) / Math.pow(10, balance.decimals)).toFixed(4)}
    )} - -
    - {/* Collections */} -
    -
    Collections:
    -
    - - -
    -
    - {/* Buttons */} -
    - - -
    -
    -
    - + {/* Content area */} +
    + {/* --- Connected State --- */} + + <> + {/* Overview Tab */} + +
    +
    +
    Account Overview
    +
    +
    + {/* Address */} +
    +
    Address:
    +
    + {state.activeAccount?.address} +
    + +
    + {/* Balances */} +
    +
    Balances:
    + No balances found.
    } + > + {(balance) => ( +
    + {balance.symbol} + + {(parseInt(balance.balance) / Math.pow(10, balance.decimals)).toFixed( + 4, + )} + +
    + )} + +
    + {/* Collections */} +
    +
    Collections:
    +
    + + +
    +
    + {/* Buttons */} +
    + + +
    +
    +
    + - {/* Activity Tab */} - -
    -
    Recent Activity
    -
    - {/* Loading State */} - -
    Loading history...
    -     - {/* Error State */} - -
    Error loading history: {state.historyError}
    -     - {/* Empty State */} - -
    No recent transactions found where you were the sender.
    -     - {/* Transaction List */} - 0}> -
      - - {(tx) => ( -
    • -
      - - {truncateAddress(tx.digest, 8)} - - - {tx.effects?.status?.status === 'success' ? 'Success' : 'Failure'} - -
      -
      - {getTransactionSummary(tx)} - {formatTimestamp(tx.timestampMs ? tx.timestampMs : "")} -
      - -
      - Error: {tx.effects?.status?.error || 'Unknown'} -
      -       -
      • - )} -       -
    -     - {/* Refresh Button */} -
    - -
    -
    + {/* Activity Tab */} + +
    +
    +
    Recent Activity
    +
    +
    + {/* Loading State */} + +
    Loading history...
    +     + {/* Error State */} + +
    + Error loading history: {state.historyError} +
    +     + {/* Empty State */} + +
    + No recent transactions found where you were the sender. +
    +     + {/* Transaction List */} + 0 + } + > +
      + + {(tx) => ( +
    • +
      + + {truncateAddress(tx.digest, 8)} + + + {tx.effects?.status?.status === 'success' ? 'Success' : 'Failure'} +
      - - - {/* Settings Tab */} - -
      -
      Wallet Settings
      -
      -
      - - -
      -
      +
      + + {getTransactionSummary(tx)} + + {formatTimestamp(tx.timestampMs ? tx.timestampMs : '')}
      - - - + +
      + Error: {tx.effects?.status?.error || 'Unknown'} +
      +       +
      • + )} +       +
    +     + {/* Refresh Button */} +
    + +
    +
    +
    +     - {/* --- Not Connected State --- */} - -
    -
    -
    Connect Wallet
    -
    -

    Connect your wallet to manage assets and activity.

    -
    {state.error}
     - {/* Wallet Selection Logic */} - 0}> - - - -
    -
    Available Wallets
    -
    - - {wallet => ( - - )} - - -
    -
    -     - -
    No compatible wallets detected. Please install a Sui wallet extension.
    - Get Sui Wallet -     -
    -
    + {/* Settings Tab */} + +
    +
    +
    Wallet Settings
    +
    +
    +
    + + +
    +
    +
    +     + + + + {/* --- Not Connected State --- */} + +
    +
    +
    +
    Connect Wallet
    +
    +
    +

    Connect your wallet to manage assets and activity.

    + +
    {state.error}
    +     + {/* Wallet Selection Logic */} + 0}> + + + +
    +
    +
    Available Wallets
    +
    + + {(wallet) => ( + + )} + + +
    +
    +     + +
    + No compatible wallets detected. Please install a Sui wallet extension. +
    + + Get Sui Wallet +     +
    +
    +     +
    - {/* Status bar */} -
    -
    {state.isConnected && state.activeAccount ? `Connected: ${truncateAddress(state.activeAccount.address, 8)}` : 'Not connected'}
    -
    {state.isConnected && state.balances.length > 0 ? `${(parseInt(state.balances[0].balance) / Math.pow(10, state.balances[0].decimals)).toFixed(4)} ${state.balances[0].symbol}` : ''}
    -
    Network: {state.network.charAt(0).toUpperCase() + state.network.slice(1)}
    -
    + {/* Status bar */} +
    +
    + {state.isConnected && state.activeAccount + ? `Connected: ${truncateAddress(state.activeAccount.address, 8)}` + : 'Not connected'}
    - ); -} \ No newline at end of file +
    + {state.isConnected && state.balances.length > 0 + ? `${(parseInt(state.balances[0].balance) / Math.pow(10, state.balances[0].decimals)).toFixed(4)} ${state.balances[0].symbol}` + : ''} +
    +
    + Network: {state.network.charAt(0).toUpperCase() + state.network.slice(1)} +
    +
    +
    + ); +} diff --git a/src/components/Wallet/WalletContext.tsx b/src/components/Wallet/WalletContext.tsx index 29d0838..3d992e1 100644 --- a/src/components/Wallet/WalletContext.tsx +++ b/src/components/Wallet/WalletContext.tsx @@ -1,35 +1,33 @@ -import type { - JSXElement} from "solid-js"; -import { - createContext, - useContext, - createSignal, - createEffect, - onMount -} from "solid-js"; -import { createStore, produce } from "solid-js/store"; +import type { JSXElement } from 'solid-js'; +import { createContext, useContext, createSignal, createEffect, onMount } from 'solid-js'; +import { createStore, produce } from 'solid-js/store'; import { SuiClient, getFullnodeUrl } from '@mysten/sui/client'; import { getWallets, type Wallet, type WalletAccount } from '@mysten/wallet-standard'; -import type { SuiTransactionBlockResponse, SuiTransactionBlockResponseQuery, PaginationArguments, OrderArguments } from '@mysten/sui/client'; -import { DAEMON_PACKAGE_ID } from "../../api/constants"; +import type { + SuiTransactionBlockResponse, + SuiTransactionBlockResponseQuery, + PaginationArguments, + OrderArguments, +} from '@mysten/sui/client'; +import { DAEMON_PACKAGE_ID } from '../../api/constants'; // Define window property for TypeScript declare global { - interface Window { - walletState: { - isConnected: boolean; - isConnecting: boolean; - }; - } + interface Window { + walletState: { + isConnected: boolean; + isConnecting: boolean; + }; + } } export interface TokenBalance { - symbol: string; - name: string; - balance: string; - decimals: number; - iconUrl?: string; + symbol: string; + name: string; + balance: string; + decimals: number; + iconUrl?: string; } export type NetworkType = 'mainnet' | 'testnet'; @@ -37,295 +35,370 @@ export type NetworkType = 'mainnet' | 'testnet'; export type TransactionHistoryItem = SuiTransactionBlockResponse; export interface WalletState { - isConnected: boolean; - isConnecting: boolean; - availableWallets: Wallet[]; - selectedWallet: Wallet | null; - activeAccount: WalletAccount | null; - balances: TokenBalance[]; - collections: { - encryptedDrives: number; - decryptedPrograms: number; - }; - network: NetworkType; - transactionHistory: TransactionHistoryItem[]; - isHistoryLoading: boolean; - historyError: string | null; - error: string | null; + isConnected: boolean; + isConnecting: boolean; + availableWallets: Wallet[]; + selectedWallet: Wallet | null; + activeAccount: WalletAccount | null; + balances: TokenBalance[]; + collections: { + encryptedDrives: number; + decryptedPrograms: number; + }; + network: NetworkType; + transactionHistory: TransactionHistoryItem[]; + isHistoryLoading: boolean; + historyError: string | null; + error: string | null; } interface WalletContextType { - state: WalletState; - connect: (walletName?: string) => Promise; - disconnect: () => Promise; - refreshBalances: () => Promise; - switchNetwork: (network: NetworkType) => void; - fetchTransactionHistory: (options?: { force?: boolean; }) => Promise; + state: WalletState; + connect: (walletName?: string) => Promise; + disconnect: () => Promise; + refreshBalances: () => Promise; + switchNetwork: (network: NetworkType) => void; + fetchTransactionHistory: (options?: { force?: boolean }) => Promise; } -const WalletContext = createContext(); +const walletContext = createContext(); + +export function WalletProvider(props: { children: JSXElement }) { + // --- State Initialization --- + const loadSavedState = () => { + try { + const savedState = localStorage.getItem('walletState'); + if (savedState) { + return JSON.parse(savedState); + } + } catch (error) { + console.error('Error loading saved wallet state:', error); + } + return {}; + }; + const savedState = loadSavedState(); + const [savedWalletName, setSavedWalletName] = createSignal(savedState.walletName || null); + + // Sanitize the network loaded from localStorage + let initialNetworkSetting: NetworkType = 'testnet'; // True default fallback + const persistedNetworkString = savedState.network as string; + if (persistedNetworkString === 'mainnet' || persistedNetworkString === 'testnet') { + initialNetworkSetting = persistedNetworkString as NetworkType; + } + const defaultNetwork: NetworkType = initialNetworkSetting; + + const [suiClient, setSuiClient] = createSignal( + new SuiClient({ url: getFullnodeUrl(defaultNetwork) }), + ); + + const [state, setState] = createStore({ + isConnected: false, + isConnecting: false, + availableWallets: [], + selectedWallet: null, + activeAccount: null, + balances: [], + collections: { encryptedDrives: 0, decryptedPrograms: 0 }, + network: defaultNetwork, + transactionHistory: [], + isHistoryLoading: false, + historyError: null, + error: null, + }); + + // --- Effects --- + onMount(() => { + const walletAdapter: ReturnType = getWallets(); + const initialWallets = walletAdapter.get(); + setState('availableWallets', initialWallets); + const unsubscribe = walletAdapter.on( + 'change' as any, + (event: { wallets: readonly Wallet[] }) => { + setState('availableWallets', event.wallets); + }, + ); + const walletName = savedWalletName(); + if (walletName && initialWallets.some((w) => w.name === walletName)) { + setTimeout(() => { + connect(walletName); + }, 500); + } + return unsubscribe; + }); -export function WalletProvider(props: { children: JSXElement; }) { - // --- State Initialization --- - const loadSavedState = () => { - try { const savedState = localStorage.getItem('walletState'); if (savedState) { return JSON.parse(savedState); } } - catch (error) { console.error('Error loading saved wallet state:', error); } - return {}; + createEffect(() => { + let accountToSave = null; + if (state.activeAccount) { + accountToSave = { address: state.activeAccount.address }; + } + const stateToSave = { + activeAccount: accountToSave, + walletName: state.selectedWallet?.name, + network: state.network, }; - const savedState = loadSavedState(); - const [savedWalletName, setSavedWalletName] = createSignal(savedState.walletName || null); - - // Sanitize the network loaded from localStorage - let initialNetworkSetting: NetworkType = 'testnet'; // True default fallback - const persistedNetworkString = savedState.network as string; - if (persistedNetworkString === 'mainnet' || persistedNetworkString === 'testnet') { - initialNetworkSetting = persistedNetworkString as NetworkType; + try { + localStorage.setItem('walletState', JSON.stringify(stateToSave)); + } catch (error) { + console.error('Error saving wallet state:', error); } - const defaultNetwork: NetworkType = initialNetworkSetting; + }); - const [suiClient, setSuiClient] = createSignal( - new SuiClient({ url: getFullnodeUrl(defaultNetwork) }) - ); + // Make wallet state available globally + createEffect(() => { + window.walletState = { + isConnected: state.isConnected, + isConnecting: state.isConnecting, + }; + }); - const [state, setState] = createStore({ - isConnected: false, - isConnecting: false, - availableWallets: [], - selectedWallet: null, - activeAccount: null, - balances: [], - collections: { encryptedDrives: 0, decryptedPrograms: 0 }, - network: defaultNetwork, - transactionHistory: [], - isHistoryLoading: false, - historyError: null, - error: null, - }); - - // --- Effects --- - onMount(() => { - const walletAdapter: ReturnType = getWallets(); - const initialWallets = walletAdapter.get(); - setState("availableWallets", initialWallets); - const unsubscribe = walletAdapter.on('change' as any, (event: { wallets: readonly Wallet[]; }) => { - setState("availableWallets", event.wallets); - }); - const walletName = savedWalletName(); - if (walletName && initialWallets.some(w => w.name === walletName)) { setTimeout(() => { connect(walletName); }, 500); } - return unsubscribe; - }); - - createEffect(() => { - let accountToSave = null; - if (state.activeAccount) { accountToSave = { address: state.activeAccount.address }; } - const stateToSave = { - activeAccount: accountToSave, - walletName: state.selectedWallet?.name, - network: state.network - }; - try { localStorage.setItem('walletState', JSON.stringify(stateToSave)); } - catch (error) { console.error('Error saving wallet state:', error); } - }); - - // Make wallet state available globally - createEffect(() => { - window.walletState = { - isConnected: state.isConnected, - isConnecting: state.isConnecting - }; - }); + // --- Core Functions --- - // --- Core Functions --- + const fetchTransactionHistory = async (options?: { force?: boolean }) => { + if ((state.isHistoryLoading && !options?.force) || !state.isConnected || !state.activeAccount) { + if (!state.isConnected || !state.activeAccount) setState('transactionHistory', []); + return; + } + setState( + produce((s) => { + s.isHistoryLoading = true; + s.historyError = null; + }), + ); + const client = suiClient(); + const address = state.activeAccount.address; + const queryLimit = 30; + + type QueryTxBlocksArgs = SuiTransactionBlockResponseQuery & + PaginationArguments & + OrderArguments; + + try { + const queryParams: QueryTxBlocksArgs = { + filter: { FromAddress: address }, + options: { showEffects: true, showInput: true }, + limit: queryLimit, + order: 'descending', + }; + const historyResponse = await client.queryTransactionBlocks(queryParams); + const sortedHistory = historyResponse.data.sort( + (a, b) => parseInt(b.timestampMs || '0') - parseInt(a.timestampMs || '0'), + ); + setState('transactionHistory', sortedHistory); + } catch (error) { + console.error('Error fetching transaction history:', error); + setState( + produce((s) => { + s.historyError = error instanceof Error ? error.message : 'Unknown error'; + s.transactionHistory = []; + }), + ); + } finally { + setState('isHistoryLoading', false); + } + }; - const fetchTransactionHistory = async (options?: { force?: boolean; }) => { - if ((state.isHistoryLoading && !options?.force) || !state.isConnected || !state.activeAccount) { - if (!state.isConnected || !state.activeAccount) setState("transactionHistory", []); - return; - } - setState(produce(s => { s.isHistoryLoading = true; s.historyError = null; })); - const client = suiClient(); + const refreshBalances = async (): Promise => { + if (state.activeAccount && state.isConnected) { + try { const address = state.activeAccount.address; - const queryLimit = 30; - - type QueryTxBlocksArgs = SuiTransactionBlockResponseQuery & - PaginationArguments & - OrderArguments; - - try { - const queryParams: QueryTxBlocksArgs = { - filter: { FromAddress: address }, - options: { showEffects: true, showInput: true }, - limit: queryLimit, - order: 'descending', - }; - const historyResponse = await client.queryTransactionBlocks(queryParams); - const sortedHistory = historyResponse.data.sort((a, b) => parseInt(b.timestampMs || '0') - parseInt(a.timestampMs || '0')); - setState("transactionHistory", sortedHistory); - } catch (error) { - console.error("Error fetching transaction history:", error); - setState(produce(s => { s.historyError = error instanceof Error ? error.message : "Unknown error"; s.transactionHistory = []; })); - } finally { - setState("isHistoryLoading", false); - } - }; - - const refreshBalances = async (): Promise => { - if (state.activeAccount && state.isConnected) { - try { - const address = state.activeAccount.address; - const client = suiClient(); - const ownerBalance = await client.getBalance({ owner: address, coinType: '0x2::sui::SUI' }); - const suiBalance = { symbol: "SUI", name: "Sui", balance: ownerBalance.totalBalance, decimals: 9 }; - const ownedObjects = await client.getOwnedObjects({ owner: address, options: { showType: true } }); - let encryptedDrivesCount = 0; - let decryptedProgramsCount = 0; - const driveSuffix = `${DAEMON_PACKAGE_ID}::encrypted_drive::EncryptedDrive`; - const programSuffix = `${DAEMON_PACKAGE_ID}::monster::Monster`; - for (const obj of ownedObjects.data || []) { - const type = obj.data?.type; - if (type) { - if (type === driveSuffix) encryptedDrivesCount++; - else if (type === programSuffix) decryptedProgramsCount++; - } - } - setState({ - balances: [suiBalance], - collections: { encryptedDrives: encryptedDrivesCount, decryptedPrograms: decryptedProgramsCount } - }); - } catch (error) { console.error("Error refreshing balances/collections:", error); } + const client = suiClient(); + const ownerBalance = await client.getBalance({ owner: address, coinType: '0x2::sui::SUI' }); + const suiBalance = { + symbol: 'SUI', + name: 'Sui', + balance: ownerBalance.totalBalance, + decimals: 9, + }; + const ownedObjects = await client.getOwnedObjects({ + owner: address, + options: { showType: true }, + }); + let encryptedDrivesCount = 0; + let decryptedProgramsCount = 0; + const driveSuffix = `${DAEMON_PACKAGE_ID}::encrypted_drive::EncryptedDrive`; + const programSuffix = `${DAEMON_PACKAGE_ID}::monster::Monster`; + for (const obj of ownedObjects.data || []) { + const type = obj.data?.type; + if (type) { + if (type === driveSuffix) encryptedDrivesCount++; + else if (type === programSuffix) decryptedProgramsCount++; + } } - }; - - const connect = async (walletName?: string): Promise => { - setState(produce(s => { - s.isConnecting = true; s.error = null; s.transactionHistory = []; s.historyError = null; - s.balances = []; s.collections = { encryptedDrives: 0, decryptedPrograms: 0 }; - })); - try { - const walletToConnect = walletName - ? state.availableWallets.find(w => w.name === walletName) - : state.availableWallets[0]; - if (!walletToConnect) throw new Error("No compatible wallet found."); - - const connectFeature = walletToConnect.features['standard:connect'] as { connect: () => Promise; } | undefined; - if (!connectFeature) throw new Error(`${walletToConnect.name} doesn't support connect feature.`); - - await connectFeature.connect(); - - if (walletToConnect.accounts.length > 0) { - const newAccount = walletToConnect.accounts[0]; - setState(produce(s => { - s.selectedWallet = walletToConnect; - s.activeAccount = newAccount; - s.isConnected = true; - })); - - await refreshBalances(); - await fetchTransactionHistory(); - - const eventsFeature = walletToConnect.features['standard:events'] as { on: (event: 'change', listener: (params: { accounts?: readonly WalletAccount[]; }) => void) => () => void; } | undefined; - if (eventsFeature) { - eventsFeature.on('change', ({ accounts }: { accounts?: readonly WalletAccount[]; }) => { - if (accounts?.length) { - console.log("Wallet account changed via event."); - setState("activeAccount", accounts[0]); - refreshBalances(); - fetchTransactionHistory({ force: true }); - } else { console.log("Wallet accounts empty via event."); disconnect(); } - }); - } - return true; - } else { - throw new Error("No accounts available in wallet"); + setState({ + balances: [suiBalance], + collections: { + encryptedDrives: encryptedDrivesCount, + decryptedPrograms: decryptedProgramsCount, + }, + }); + } catch (error) { + console.error('Error refreshing balances/collections:', error); + } + } + }; + + const connect = async (walletName?: string): Promise => { + setState( + produce((s) => { + s.isConnecting = true; + s.error = null; + s.transactionHistory = []; + s.historyError = null; + s.balances = []; + s.collections = { encryptedDrives: 0, decryptedPrograms: 0 }; + }), + ); + try { + const walletToConnect = walletName + ? state.availableWallets.find((w) => w.name === walletName) + : state.availableWallets[0]; + if (!walletToConnect) throw new Error('No compatible wallet found.'); + + const connectFeature = walletToConnect.features['standard:connect'] as + | { connect: () => Promise } + | undefined; + if (!connectFeature) + throw new Error(`${walletToConnect.name} doesn't support connect feature.`); + + await connectFeature.connect(); + + if (walletToConnect.accounts.length > 0) { + const newAccount = walletToConnect.accounts[0]; + setState( + produce((s) => { + s.selectedWallet = walletToConnect; + s.activeAccount = newAccount; + s.isConnected = true; + }), + ); + + await refreshBalances(); + await fetchTransactionHistory(); + + const eventsFeature = walletToConnect.features['standard:events'] as + | { + on: ( + event: 'change', + listener: (params: { accounts?: readonly WalletAccount[] }) => void, + ) => () => void; } - } catch (error) { - console.error("Connection error:", error); - setState(produce(s => { - s.error = error instanceof Error ? error.message : "Unknown error"; - s.isConnected = false; s.selectedWallet = null; s.activeAccount = null; - })); - return false; - } finally { - setState("isConnecting", false); - } - }; - - const disconnect = async (): Promise => { - if (state.selectedWallet && state.isConnected) { - try { - const disconnectFeature = state.selectedWallet.features['standard:disconnect'] as { disconnect: () => Promise; } | undefined; - if (disconnectFeature) { - await disconnectFeature.disconnect(); - } - } catch (error) { - console.error("Error during disconnect:", error); - } finally { - setState(produce(s => { - s.isConnected = false; - s.selectedWallet = null; - s.activeAccount = null; - s.balances = []; - s.collections = { encryptedDrives: 0, decryptedPrograms: 0 }; - s.transactionHistory = []; - s.historyError = null; - s.error = null; - })); - setSavedWalletName(null); + | undefined; + if (eventsFeature) { + eventsFeature.on('change', ({ accounts }: { accounts?: readonly WalletAccount[] }) => { + if (accounts?.length) { + console.log('Wallet account changed via event.'); + setState('activeAccount', accounts[0]); + refreshBalances(); + fetchTransactionHistory({ force: true }); + } else { + console.log('Wallet accounts empty via event.'); + disconnect(); } + }); } - }; - - const switchNetwork = (requestedNetwork: NetworkType): void => { - let targetNetwork = requestedNetwork; - // Ensure that if mainnet is selected it reverts to testnet (mainnet is also disabled for now). - // The check for 'devnet' (as string) is a safeguard for any lingering values from older - // localStorage or direct calls, as 'devnet' is no longer a valid NetworkType. - if (requestedNetwork === 'mainnet' || (requestedNetwork as string) === 'devnet') { - console.warn(`Network ${requestedNetwork} is temporarily disabled. Reverting to testnet.`); - targetNetwork = 'testnet'; + return true; + } else { + throw new Error('No accounts available in wallet'); + } + } catch (error) { + console.error('Connection error:', error); + setState( + produce((s) => { + s.error = error instanceof Error ? error.message : 'Unknown error'; + s.isConnected = false; + s.selectedWallet = null; + s.activeAccount = null; + }), + ); + return false; + } finally { + setState('isConnecting', false); + } + }; + + const disconnect = async (): Promise => { + if (state.selectedWallet && state.isConnected) { + try { + const disconnectFeature = state.selectedWallet.features['standard:disconnect'] as + | { disconnect: () => Promise } + | undefined; + if (disconnectFeature) { + await disconnectFeature.disconnect(); } + } catch (error) { + console.error('Error during disconnect:', error); + } finally { + setState( + produce((s) => { + s.isConnected = false; + s.selectedWallet = null; + s.activeAccount = null; + s.balances = []; + s.collections = { encryptedDrives: 0, decryptedPrograms: 0 }; + s.transactionHistory = []; + s.historyError = null; + s.error = null; + }), + ); + setSavedWalletName(null); + } + } + }; + + const switchNetwork = (requestedNetwork: NetworkType): void => { + let targetNetwork = requestedNetwork; + // Ensure that if mainnet is selected it reverts to testnet (mainnet is also disabled for now). + // The check for 'devnet' (as string) is a safeguard for any lingering values from older + // localStorage or direct calls, as 'devnet' is no longer a valid NetworkType. + if (requestedNetwork === 'mainnet' || (requestedNetwork as string) === 'devnet') { + console.warn(`Network ${requestedNetwork} is temporarily disabled. Reverting to testnet.`); + targetNetwork = 'testnet'; + } - if (state.network === targetNetwork) return; - - console.log(`Switching network to: ${targetNetwork}`); - setState('network', targetNetwork); - setSuiClient(new SuiClient({ url: getFullnodeUrl(targetNetwork) })); - - // If connected, disconnect to force re-evaluation of account and balances on new network - if (state.isConnected) { - disconnect().then(() => { - console.log("Disconnected due to network switch. Please reconnect if previously connected."); - }); - } - // Persist the new network choice immediately - try { - const currentState = JSON.parse(localStorage.getItem('walletState') || '{}'); - localStorage.setItem('walletState', JSON.stringify({ ...currentState, network: targetNetwork })); - } catch (error) { - console.error('Error saving network state:', error); - } - }; + if (state.network === targetNetwork) return; - // --- Context Value --- - const contextValue: WalletContextType = { - state, - connect, - disconnect, - refreshBalances, - switchNetwork, - fetchTransactionHistory - }; + console.log(`Switching network to: ${targetNetwork}`); + setState('network', targetNetwork); + setSuiClient(new SuiClient({ url: getFullnodeUrl(targetNetwork) })); - return ( - - {props.children} - - ); + // If connected, disconnect to force re-evaluation of account and balances on new network + if (state.isConnected) { + disconnect().then(() => { + console.log( + 'Disconnected due to network switch. Please reconnect if previously connected.', + ); + }); + } + // Persist the new network choice immediately + try { + const currentState = JSON.parse(localStorage.getItem('walletState') || '{}'); + localStorage.setItem( + 'walletState', + JSON.stringify({ ...currentState, network: targetNetwork }), + ); + } catch (error) { + console.error('Error saving network state:', error); + } + }; + + // --- Context Value --- + const contextValue: WalletContextType = { + state, + connect, + disconnect, + refreshBalances, + switchNetwork, + fetchTransactionHistory, + }; + + return {props.children}; } // --- Hook --- export function useWallet() { - const context = useContext(WalletContext); - if (!context) { throw new Error("useWallet must be used within a WalletProvider"); } - return context; -} \ No newline at end of file + const context = useContext(walletContext); + if (!context) { + throw new Error('useWallet must be used within a WalletProvider'); + } + return context; +} diff --git a/src/components/Wallet/utils/format.ts b/src/components/Wallet/utils/format.ts index 51638ec..f295d8f 100644 --- a/src/components/Wallet/utils/format.ts +++ b/src/components/Wallet/utils/format.ts @@ -5,10 +5,10 @@ * @returns Truncated address with ellipsis in the middle */ export function truncateAddress(address: string, chars: number = 4): string { - if (!address) return ''; - if (address.length <= chars * 2) return address; + if (!address) return ''; + if (address.length <= chars * 2) return address; - return `${address.slice(0, chars)}...${address.slice(-chars)}`; + return `${address.slice(0, chars)}...${address.slice(-chars)}`; } /** @@ -18,9 +18,9 @@ export function truncateAddress(address: string, chars: number = 4): string { * @returns Formatted number string */ export function formatNumber(value: number | string, decimals: number = 2): string { - const num = typeof value === 'string' ? parseFloat(value) : value; - return num.toLocaleString(undefined, { - minimumFractionDigits: decimals, - maximumFractionDigits: decimals - }); -} \ No newline at end of file + const num = typeof value === 'string' ? parseFloat(value) : value; + return num.toLocaleString(undefined, { + minimumFractionDigits: decimals, + maximumFractionDigits: decimals, + }); +} diff --git a/src/components/WasmIframeWrapper.tsx b/src/components/WasmIframeWrapper.tsx index aa79534..8c06f5f 100644 --- a/src/components/WasmIframeWrapper.tsx +++ b/src/components/WasmIframeWrapper.tsx @@ -1,153 +1,170 @@ -import type { Component} from 'solid-js'; -import { createSignal, onCleanup, onMount, Show, createMemo } from 'solid-js'; +import { createSignal, onCleanup, onMount, Show, createMemo, createEffect } from 'solid-js'; import type { EventPayload } from '../api/game/events'; import type { WasmCanvasBridgeInterface } from './hooks/createWasmCanvas'; interface WasmIframeWrapperProps { - wasmPath: string; - jsPath: string; - class?: string; - style?: Record | string; - instanceId: string; - requiredCanvasId?: string; - onReady?: (bridge: WasmCanvasBridgeInterface) => void; - onError?: (error: string) => void; + wasmPath: string; + jsPath: string; + class?: string; + style?: Record | string; + instanceId: string; + requiredCanvasId?: string; + onReady?: (bridge: WasmCanvasBridgeInterface) => void; + onError?: (error: string) => void; } interface IframeMessage { - type: 'IFRAME_READY' | 'WASM_ERROR' | 'WASM_EVENT'; - payload: any; + type: 'IFRAME_READY' | 'WASM_ERROR' | 'WASM_EVENT'; + payload: { + instanceId?: string; + error?: string; + event?: EventPayload; + }; } -export const WasmIframeWrapper: Component = (props) => { - const [isIframeReady, setIsIframeReady] = createSignal(false); - const [error, setError] = createSignal(null); - let iframeRef: HTMLIFrameElement | undefined; - let wasmEventHandlers: ((event: EventPayload) => void)[] = []; - let messageListener: ((event: MessageEvent) => void) | null = null; +export default function WasmIframeWrapper(props: WasmIframeWrapperProps) { + const [isIframeReady, setIsIframeReady] = createSignal(false); + const [error, setError] = createSignal(null); + let iframeRef: HTMLIFrameElement | undefined; + let wasmEventHandlers: ((event: EventPayload) => void)[] = []; + let messageListener: ((event: MessageEvent) => void) | null = null; + createEffect(() => { console.log(`[Wrapper ${props.instanceId}] Component created/rendering.`); - - // Build the iframe source URL with query parameters - const iframeSrc = createMemo(() => { - const params = new URLSearchParams(); - params.set('jsPath', props.jsPath); - params.set('wasmPath', props.wasmPath); - params.set('instanceId', props.instanceId); - - return `/wasm_host.html?${params.toString()}`; - }); - - // --- Communication Logic --- - const sendMessageToIframe = (message: { type: string, payload?: any; }) => { - if (iframeRef?.contentWindow) { - console.log(`[Wrapper ${props.instanceId}] Sending message to iframe:`, message); - iframeRef.contentWindow.postMessage(message, '*'); - } else { - console.warn(`[Wrapper ${props.instanceId}] Attempted to send message, but iframe contentWindow is not available.`); - } + }); + + // Build the iframe source URL with query parameters + const iframeSrc = createMemo(() => { + const params = new URLSearchParams(); + params.set('jsPath', props.jsPath); + params.set('wasmPath', props.wasmPath); + params.set('instanceId', props.instanceId); + + return `/wasm_host.html?${params.toString()}`; + }); + + // --- Communication Logic --- + const sendMessageToIframe = (message: { type: string; payload?: unknown }) => { + if (iframeRef?.contentWindow) { + console.log(`[Wrapper ${props.instanceId}] Sending message to iframe:`, message); + iframeRef.contentWindow.postMessage(message, '*'); + } else { + console.warn( + `[Wrapper ${props.instanceId}] Attempted to send message, but iframe contentWindow is not available.`, + ); + } + }; + + onMount(() => { + const instanceId = props.instanceId; + const onReady = props.onReady; + const onError = props.onError; + console.log(`[Wrapper ${instanceId}] Mounted. Setting up message listener.`); + + messageListener = (event: MessageEvent) => { + const message = event.data as IframeMessage; + + switch (message?.type) { + case 'IFRAME_READY': + if (message.payload?.instanceId === instanceId) { + console.log(`[Wrapper ${instanceId}] Iframe reported ready.`); + setError(null); + setIsIframeReady(true); + + const bridge = createBridgeInterface(); + onReady?.(bridge); + } + break; + case 'WASM_ERROR': + if (message.payload?.instanceId === instanceId) { + console.error( + `[Wrapper ${instanceId}] Iframe reported WASM error:`, + message.payload.error, + ); + setError(message.payload.error || 'Unknown WASM error'); + setIsIframeReady(false); // No longer ready if error occurs + onError?.(message.payload.error || 'Unknown WASM error'); + } + break; + case 'WASM_EVENT': + if (message.payload?.instanceId === instanceId || !message.payload?.instanceId) { + if (message.payload.event) { + wasmEventHandlers.forEach((handler) => { + try { + handler(message.payload.event!); + } catch (e) { + console.error(`[Wrapper ${instanceId}] Error in WASM event handler:`, e); + } + }); + } + } + break; + } }; - onMount(() => { - console.log(`[Wrapper ${props.instanceId}] Mounted. Setting up message listener.`); - messageListener = (event: MessageEvent) => { - const message = event.data as IframeMessage; - - switch (message?.type) { - case 'IFRAME_READY': - if (message.payload?.instanceId === props.instanceId) { - console.log(`[Wrapper ${props.instanceId}] Iframe reported ready.`); - setError(null); - setIsIframeReady(true); - - const bridge = createBridgeInterface(); - props.onReady?.(bridge); - } - break; - case 'WASM_ERROR': - if (message.payload?.instanceId === props.instanceId) { - console.error(`[Wrapper ${props.instanceId}] Iframe reported WASM error:`, message.payload.error); - setError(message.payload.error || 'Unknown WASM error'); - setIsIframeReady(false); // No longer ready if error occurs - props.onError?.(message.payload.error || 'Unknown WASM error'); - } - break; - case 'WASM_EVENT': - if (message.payload?.instanceId === props.instanceId || !message.payload?.instanceId) { - wasmEventHandlers.forEach(handler => { - try { - handler(message.payload.event); - } catch (e) { - console.error(`[Wrapper ${props.instanceId}] Error in WASM event handler:`, e); - } - }); - } - break; - } - }; - - window.addEventListener('message', messageListener); - }); - - onCleanup(() => { - console.log(`[Wrapper ${props.instanceId}] Cleaning up.`); - if (messageListener) { - window.removeEventListener('message', messageListener); - console.log(`[Wrapper ${props.instanceId}] Removed message listener.`); - } - wasmEventHandlers = []; - }); - - // --- Bridge Interface Implementation --- - const createBridgeInterface = (): WasmCanvasBridgeInterface => ({ - queueEventForWasm: (event: EventPayload) => { - sendMessageToIframe({ type: 'QUEUE_WASM_EVENT', payload: event }); - }, - onWasmEvent: (handler: (event: EventPayload) => void): (() => void) => { - wasmEventHandlers.push(handler); - return () => { - wasmEventHandlers = wasmEventHandlers.filter(h => h !== handler); - }; - }, - clearJsEventQueue: () => { - console.warn(`[Wrapper ${props.instanceId}] clearJsEventQueue called, but queue is managed inside iframe.`); - }, - getCurrentJsQueue: () => { - console.warn(`[Wrapper ${props.instanceId}] getCurrentJsQueue called, but queue is managed inside iframe.`); - return []; - }, - isReady: isIframeReady, - error: error, - }); - - const showLoading = () => !isIframeReady() && !error(); - - return ( -
    - -
    - Initializing WASM Environment... -
    -     - -
    -

    Error:

    -

    {error()}

    -
    -     - -