[{"_1":2,"_183":-5,"_184":-5},"loaderData",{"_3":4,"_58":59,"_182":-5},"root",{"_5":6,"_19":-5,"_20":-5,"_21":22,"_39":-5,"_40":-5,"_41":-5,"_42":43,"_54":55,"_56":57},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18},"SUPABASE_URL","https://hello.websim.com","SUPABASE_KEY","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9jamVmZ2NqamlxeWt3YWR2dnJkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTE4MzI5OTMsImV4cCI6MjAyNzQwODk5M30.vsreOYwk8pKsr8NFlzpIzWAiD-vXj6ijv_Bhn1vYtHs","POSTHOG_KEY","phc_VHMOlrdxAbgSZHeF0SdSf07LZLRLAg5pZuTHkJGn050","POSTHOG_API_HOST","https://e.wbsm.ai","POSTHOG_UI_HOST","https://app.posthog.com","GOOGLE_OAUTH_CLIENT_ID","891181648870-i708rj1bgjol84hie20shfr4u4ecf3o7.apps.googleusercontent.com","authUser","user","snapshotData",{"_23":-5,"_24":-5,"_25":-5,"_26":-5,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5,"_33":-5,"_34":-5,"_35":-5,"_36":-5,"_37":-5,"_38":-5},"lastProjectId","sidebarTab","homepageTab","pinSidebar","settingsOpen","maximized","assetsExpanded","focusedAssetFilename","authError","authErrorCode","authErrorDescription","sidebarWidth","videoMuted","videoVolume","navigationContext","hasSeenFeedOnboarding","plan","balances","rewards","origins",{"_44":45,"_46":47,"_48":49,"_50":51,"_52":53},"origin","https://websim.com","apiOrigin","https://api.websim.com","contentOrigin","https://{PROJECT_ID}.c.websim.com","appDomainOrigin","https://{SUBDOMAIN}.on.websim.com","generationOrigin","https://generation.websim.com/rivet","isMobile",false,"theme","auto","slug",{"_60":61,"_62":63,"_119":120,"_140":141,"_177":178,"_179":-5,"_180":181},"version","1","project",{"_64":62,"_65":66,"_67":68,"_69":70,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":97,"_98":99,"_58":108,"_109":97,"_110":55,"_111":-5,"_112":-5,"_113":-5,"_114":115,"_116":-5,"_117":-5,"_118":55},"_type","id","2ddvfxfk4n22718d1zex","created_at","2026-05-04T15:57:30.065Z","created_by",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":78,"_79":80,"_81":55},"7a8471e7-cc55-4825-94a5-7abc1ed9b28b","username","VovaRussian","2025-12-20T15:10:17.026Z","avatar_url","https://lh3.googleusercontent.com/a/ACg8ocLnrCz8lH5HtfFXvn4BhSV-CTlW--259b8UXTEDfppp7ZZSzQ=s96-c","discord_username","bova0896","discord_id","1168072403759419454","is_admin","updated_at","2026-06-09T10:02:25.539Z","title","Salinewin.exe — virtual multiplayer","comments_mode","open","visibility","public","current_version",28,"last_posted_version","parent_id","parent_version","deleted_at","posted",true,"stats",{"_100":101,"_102":66,"_103":104,"_105":106,"_107":106},"~type","project_stats","project_id","views",13,"likes",0,"comments","salinewin-exe-virtual-multiplayer","auto_set_current","enable_chat","description","generated_description","from_template","domains",[],"thumbnail","video","has_active_experiment","project_revision",{"_64":119,"_65":121,"_60":91,"_67":122,"_123":-5,"_93":-5,"_124":125,"_126":66,"_69":127,"_128":129,"_102":66,"_82":130,"_95":-5,"_98":131,"_133":55,"_134":135,"_136":-5,"_137":-5,"_138":139},"019dfd8c-a5ca-7db6-986f-bae128ff5285","2026-05-06T13:49:06.378Z","visited_at","parent_revision_version",27,"parent_revision_project_id",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":78,"_79":80,"_81":55},"meta",{"_60":61},"2026-06-09T10:02:25.644Z",{"_132":106},"multiplayer_count","draft","site_id","OWLA47hieZgAWcpYU","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/019dfd90-4096-75bc-8bba-8c48c43ac204","site",{"_64":140,"_65":135,"_93":142,"_67":143,"_144":145,"_146":147,"_148":149,"_84":85,"_162":163,"_164":165,"_170":-5,"_171":172,"_173":174,"_95":-5,"_175":176},"qPr6yTP018fSuHMzj","2026-05-06T13:51:26.270Z","state","done","model","gpt-5-mini","lore",{"_60":150,"_151":152,"_153":97,"_154":55,"_155":55,"_156":55,"_157":55,"_158":97,"_159":55,"_160":55,"_161":55},1,"attachments",[],"enableMultiplayer_v2","enableMobilePrompt","enableDB","enableLLM2","enableComments","enableVideo","enableApi","enableTweaks","enableDB_v2_1","owner",{"_64":20,"_65":71,"_72":73,"_67":74,"_75":76,"_77":78,"_79":80,"_81":55},"prompt",{"_166":167,"_168":169},"type","plaintext","text","common.ts\n```ts\nexport type StrongPartial = { [P in keyof T]?: T[P] | undefined };\n\n/**\n * get sign of number, including 0 and -0.\n * true if positive, false if negative.\n * Infinity and NaN return false.\n */\nexport function sign0(value: number) {\n\treturn 1 / value > 0;\n}\n\n/**\n * get a number with the least decimal digits that when rounded to\n * float32, will be the same as the value put in.\n * this is only used for displaying samplerates and probably doesn't\n * work outside of that one exact task.\n */\nexport function f32ToRound10(value: number): number {\n\t// this is stupid but it works for numbers less\n\t// than 10 digits on one side of the decimal point\n\tconst p7 = +value.toPrecision(7);\n\tif (Math.fround(p7) === value) {\n\t\treturn p7;\n\t}\n\tconst p8 = +value.toPrecision(8);\n\tif (Math.fround(p8) === value) {\n\t\treturn p8;\n\t}\n\treturn +value.toPrecision(9);\n\n\t// for the range that sampleRate uses:\n\t// 62677722 numbers needs precision 7\n\t// 127630886 numbers needs precision 8\n\t// 2629376 numbers needs precision 9\n}\n\n/**\n * used to check if values from message passing are safe.\n * can't detect proxies.\n */\nexport function isPlainObject(value: unknown): value is object {\n\tif (typeof value === \"object\" && value) {\n\t\tconst proto = Object.getPrototypeOf(value);\n\t\treturn proto && !Object.getPrototypeOf(proto);\n\t}\n\treturn false;\n}\n\nexport type SmallSongMode = \"Signed Bytebeat\" | \"Floatbeat\" | \"Funcbeat\";\nexport type SongMode = \"Bytebeat\" | SmallSongMode;\nexport type Song = {\n\tcode: string;\n\tsampleRate: number;\n\tmode: SongMode;\n};\n```\nelements.ts\n```ts\nexport default {\n\tmain: document.getElementsByTagName(\"main\")[0],\n\terror: document.getElementById(\"error\")!,\n\tcanvas: document.getElementById(\"canvas-main\") as HTMLCanvasElement, // this is the only shared element\n\ttimeCursor: document.getElementById(\"canvas-timecursor\")!,\n\n\ttimeUnit: document.getElementById(\"control-time-unit\")!,\n\ttimeUnitLabel: document.getElementById(\"control-time-unit-label\")!,\n\ttimeValue: document.getElementById(\"control-time-value\") as HTMLInputElement,\n\n\tscaleUp: document.getElementById(\"control-scaleup\") as HTMLButtonElement,\n\tscaleDown: document.getElementById(\"control-scaledown\") as HTMLButtonElement,\n\n\tplaybackMode: document.getElementById(\"control-song-mode\") as HTMLSelectElement,\n\tsampleRate: document.getElementById(\"control-sample-rate\") as HTMLInputElement,\n\tvolume: document.getElementById(\"control-volume\") as HTMLInputElement,\n\n\tcanvasTogglePlay: document.getElementById(\"canvas-toggleplay\")!,\n\n\tcontrols: document.getElementById(\"controls\")!,\n\tcanvasContainer: document.getElementById(\"canvas-container\")!,\n};\n```\ninterface.ts\n```ts\nimport { sign0, f32ToRound10, isPlainObject, type Song, type SongMode, type StrongPartial } from \"./common.ts\";\nimport elements from \"./elements.ts\";\n// this shouldn't need to load when useUrlData is false,\n// but if it was loaded conditionally then it can't inline\nimport { fromUrlData, setUrlData } from \"./url/mod.ts\";\nimport { CodeEditor } from \"./code-editor/mod.ts\";\nimport { Oscillioscope } from \"./oscillioscope.ts\";\n\nconst timeUnits = [\"t\", \"s\"] as const;\ntype TimeUnit = (typeof timeUnits)[number];\n\nconst errTypes = [\"compile\", \"firstrun\", \"runtime\"] as const;\ntype ErrType = (typeof errTypes)[number];\ntype Error = { err: string, type?: ErrType }\n\n// XXX: global variables\nlet timeUnit: TimeUnit;\nlet volume: number;\nlet sample = 0;\n/**\n * when paused, uses 0 and -0 to indicate last playing direction\n * so that the time cursor is offset in the right direction.\n */\nlet playSpeed = 0;\nlet songData: {\n\tsampleRate: number;\n\tmode: SongMode;\n} = {\n\tsampleRate: 8000, // float32\n\tmode: \"Bytebeat\",\n};\nlet nextErr: Error | undefined;\n\nconst searchParams = new URLSearchParams(location.search);\n\nconst audioPromise = initAudioContext();\n\nconst codeEditor = new CodeEditor(refresh);\nconst osc = new Oscillioscope(elements.canvas, elements.timeCursor);\n\nif (globalThis.loadLibrary !== false) {\n\timport(\"./library/load.ts\");\n}\n\nconst { audioCtx, audioGain, audioWorklet } = await audioPromise;\n\nloadSettings();\n\n{\n\tlet urlData: Song | undefined;\n\tif (location.hash && globalThis.useUrlData !== false) {\n\t\turlData = await fromUrlData(location.hash);\n\t}\n\n\tsetSong(urlData, false);\n\tupdateCounterValue();\n}\n\nasync function initAudioContext() {\n\t// null casts to 0 which is fine\n\t// @ts-expect-error\n\tlet audioContextSampleRate = +searchParams.get(\"baseSampleRate\");\n\t// also true for NaN\n\tif (!(audioContextSampleRate > 0)) {\n\t\taudioContextSampleRate = 48000; // TODO this should be set to an lcm > 44100\n\t}\n\n\tconst audioCtx = new AudioContext({\n\t\tlatencyHint: (searchParams.get(\"latencyHint\") as AudioContextLatencyCategory) ?? \"balanced\",\n\t\tsampleRate: audioContextSampleRate,\n\t});\n\n\tconst audioGain = new GainNode(audioCtx);\n\taudioGain.connect(audioCtx.destination);\n\n\tawait audioCtx.audioWorklet.addModule(\"/audio-worklet.js\");\n\tconst audioWorklet = new AudioWorkletNode(audioCtx, \"bytebeatProcessor\", {\n\t\toutputChannelCount: [2],\n\t});\n\taudioWorklet.port.addEventListener(\"message\", e => handleMessage(e));\n\taudioWorklet.port.start();\n\taudioWorklet.connect(audioGain);\n\n\tconsole.info(\n\t\t`started audio with latency ${audioCtx.baseLatency * audioCtx.sampleRate} at ${\n\t\t\taudioCtx.sampleRate\n\t\t}Hz`,\n\t);\n\treturn { audioCtx, audioGain, audioWorklet };\n}\n\nfunction refresh() {\n\tif (audioWorklet) {\n\t\taudioWorklet.port.postMessage({ code: codeEditor.getCode().trim() });\n\t}\n}\n// TODO: bug, this calls refresh twice every time because\n// setting codemirror programmatically also calls refresh\n// the code text input might also have this issue?\nexport function setSong(songData?: StrongPartial, play = true) {\n\tlet code, sampleRate, mode;\n\tif (songData) {\n\t\t({ code, sampleRate, mode } = songData);\n\t\tcodeEditor.setCode(code);\n\t}\n\tsetSampleRate(sampleRate ?? 8000);\n\tsetSongMode(mode ?? \"Bytebeat\");\n\trefresh();\n\tif (play) {\n\t\tresetTime();\n\t\tsetPlaySpeed(1);\n\t}\n}\n/** refresh should be called after this. */\nfunction setSampleRate(sampleRate: number) {\n\tif (audioWorklet) {\n\t\tconst rate = Math.min(Math.max(Math.fround(sampleRate), 2), 2 ** 24 - 1);\n\t\t// implicit cast\n\t\telements.sampleRate.value = f32ToRound10(rate) as unknown as string;\n\t\tsongData.sampleRate = rate;\n\t\t// TODO if funcbeat change time so that sec stays the same\n\t\taudioWorklet.port.postMessage({ songData, updateSampleRatio: true });\n\t\tosc.showTimeCursor(timeCursorShouldBeVisible());\n\t}\n}\n/** refresh should be called after this. */\nfunction setSongMode(mode: SongMode) {\n\tif (audioWorklet) {\n\t\telements.playbackMode.value = mode;\n\t\tsongData.mode = mode;\n\t\taudioWorklet.port.postMessage({ songData });\n\t}\n}\n\nexport function getSong(): Song {\n\treturn { code: codeEditor.getCode(), ...songData };\n}\n\nfunction handleMessage(e: MessageEvent) {\n\tif (isPlainObject(e.data)) {\n\t\tconst data = e.data;\n\t\tif (data.clearCanvas) {\n\t\t\tosc.clear();\n\t\t} else if (data.clearDrawBuffer) {\n\t\t\tosc.clearBuffer();\n\t\t}\n\n\t\tif (typeof data.sample === \"number\") {\n\t\t\tsetByteSample(data.sample, false);\n\t\t}\n\t\tif (Array.isArray(data.drawBuffer)) {\n\t\t\tosc.addToBuffer(data.drawBuffer, sample);\n\t\t}\n\n\t\tif (data.updateUrl && globalThis.useUrlData !== false) {\n\t\t\tsetUrlData(getSong());\n\t\t}\n\n\t\tif (data.errorMessage !== undefined) {\n\t\t\tif (isPlainObject(data.errorMessage)) {\n\t\t\t\tconst { err, type } = data.errorMessage;\n\t\t\t\tif (typeof err === \"string\" && errTypes.includes(type)) {\n\t\t\t\t\tnextErr = { err, type };\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tnextErr = { err: \"\" };\n\t\t\t}\n\t\t}\n\t}\n}\n\nfunction timeCursorShouldBeVisible(): boolean {\n\treturn songData.sampleRate >> osc.settings.scale < 3950;\n}\nfunction changeScale(amount: number) {\n\tif (amount) {\n\t\tosc.settings.scale = Math.max(osc.settings.scale + amount, 0);\n\t\tosc.clear(false);\n\t\telements.scaleDown.toggleAttribute(\"disabled\", osc.settings.scale <= 0);\n\n\t\tosc.showTimeCursor(timeCursorShouldBeVisible());\n\t\tif (!playSpeed) {\n\t\t\tosc.moveTimeCursor(sample, true);\n\t\t}\n\t\tsaveSettings();\n\t}\n}\n\n/** show the error in variable nextErr. */\nfunction updateErrorMessage() {\n\tif (nextErr) {\n\t\telements.error.innerText = nextErr.err;\n\t\telements.error.dataset[\"errType\"] = nextErr.type;\n\n\t\tif (audioWorklet) {\n\t\t\taudioWorklet.port.postMessage({ recievedError: true });\n\t\t}\n\t\tnextErr = undefined;\n\t}\n}\n\nfunction resetTime() {\n\tsetByteSample(0, true, true);\n\tif (!playSpeed) {\n\t\telements.canvasTogglePlay.classList.add(\"canvas-toggleplay-show\");\n\t}\n}\n/// TODO document\nfunction setByteSample(value: number, send = true, clear = false) {\n\tif (audioWorklet && isFinite(value)) {\n\t\tsample = value;\n\t\tupdateCounterValue();\n\t\tif (send) {\n\t\t\taudioWorklet.port.postMessage({ setByteSample: [value, clear] });\n\t\t}\n\t\tosc.moveTimeCursor(sample, sign0(playSpeed));\n\t}\n}\n\nfunction setPlaySpeed(value: number) {\n\tif (audioWorklet && value !== playSpeed) {\n\t\telements.canvasTogglePlay.classList.toggle(\"canvas-toggleplay-pause\", !!value);\n\t\tif (value) {\n\t\t\telements.canvasTogglePlay.classList.remove(\"canvas-toggleplay-show\");\n\t\t\taudioCtx.resume();\n\t\t\tplaySpeed = value;\n\t\t} else {\n\t\t\t//audioCtx.suspend();\n\t\t\tplaySpeed /= Infinity; // preserve sign\n\t\t}\n\t\taudioWorklet.port.postMessage({ playSpeed, updateSampleRatio: true });\n\t}\n}\nfunction togglePlay() {\n\tsetPlaySpeed(+!playSpeed);\n}\n\nfunction animationFrame() {\n\tosc.draw(sample, sign0(playSpeed));\n\tosc.moveTimeCursor(sample, sign0(playSpeed));\n\tupdateErrorMessage();\n\n\trequestAnimationFrame(() => animationFrame());\n}\nanimationFrame();\n\nfunction updateCounterValue() {\n\t// implicit cast\n\telements.timeValue.placeholder = convertToUnit(sample) as unknown as string;\n}\nfunction convertFromUnit(value: number, unit = timeUnit) {\n\tswitch (unit) {\n\t\tcase \"t\":\n\t\t\treturn value;\n\t\tcase \"s\":\n\t\t\treturn value * songData.sampleRate;\n\t}\n}\n// IMPORTANT: this function is ONLY used for text formatting, does not work for many conversions, and is inaccurate.\nfunction convertToUnit(value: number, unit = timeUnit) {\n\tswitch (unit) {\n\t\tcase \"t\":\n\t\t\treturn value;\n\t\tcase \"s\":\n\t\t\treturn (value / songData.sampleRate).toFixed(3);\n\t}\n}\nfunction setTimeUnit(value?: number | TimeUnit, userInput = true) {\n\tif (value !== undefined) {\n\t\tif (typeof value === \"number\") {\n\t\t\ttimeUnit = timeUnits[value];\n\t\t} else {\n\t\t\ttimeUnit = value;\n\t\t}\n\t\telements.timeUnitLabel.innerText = timeUnit;\n\t} else {\n\t\ttimeUnit = elements.timeUnitLabel.innerText;\n\t}\n\n\tif (userInput) {\n\t\tupdateCounterValue();\n\t\tsaveSettings();\n\t}\n}\nfunction changeTimeUnit() {\n\ttimeUnit = timeUnits[(timeUnits.indexOf(timeUnit) + 1) % timeUnits.length];\n\telements.timeUnitLabel.innerText = timeUnit;\n\n\tupdateCounterValue();\n\tsaveSettings();\n}\n\nfunction setSampleRateDivisor(sampleRateDivisor: number) {\n\tif (audioWorklet && sampleRateDivisor > 0) {\n\t\taudioWorklet.port.postMessage({ sampleRateDivisor, updateSampleRatio: true });\n\t}\n}\n\nfunction setVolume(value?: number, save = true) {\n\tif (value !== undefined) {\n\t\tvolume = value;\n\t\t// implicit cast\n\t\telements.volume.value = volume as unknown as string;\n\t}\n\tvolume = elements.volume.valueAsNumber;\n\n\taudioGain.gain.value = volume ** 2;\n\n\tif (save) {\n\t\tsaveSettings();\n\t}\n}\n\ntype Settings = {\n\tdrawSettings: typeof osc.settings;\n\tvolume: number;\n\ttimeUnit: TimeUnit;\n};\nfunction loadDefaultSettings() {\n\tsetVolume(undefined, false);\n\tsetTimeUnit(undefined, false);\n}\nfunction loadSettings(): Settings {\n\tif (globalThis.useLocalStorage !== false && localStorage[\"settings\"]) {\n\t\tlet settings: {\n\t\t\tdrawSettings?: typeof osc.settings;\n\t\t\tvolume?: typeof volume;\n\t\t\ttimeUnit?: typeof timeUnit;\n\t\t};\n\t\ttry {\n\t\t\t// TODO: this should be validated\n\t\t\tsettings = JSON.parse(localStorage[\"settings\"]);\n\t\t} catch (err) {\n\t\t\tconsole.error(\"Couldn't load settings!\", localStorage[\"settings\"]);\n\t\t\tlocalStorage.clear();\n\t\t\tloadDefaultSettings();\n\t\t\treturn;\n\t\t}\n\n\t\tif (settings.drawSettings) {\n\t\t\tosc.settings = settings.drawSettings;\n\t\t} else {\n\t\t\tosc.settings.scale = 5;\n\t\t}\n\n\t\tsetVolume(settings.volume, false);\n\n\t\tif (settings.timeUnit) {\n\t\t\tsetTimeUnit(settings.timeUnit, false);\n\t\t} else {\n\t\t\tsetTimeUnit(undefined, false);\n\t\t}\n\t} else {\n\t\tloadDefaultSettings();\n\t}\n}\nfunction saveSettings() {\n\tif (globalThis.useLocalStorage !== false) {\n\t\tlocalStorage[\"settings\"] = JSON.stringify({\n\t\t\tdrawSettings: osc.settings,\n\t\t\tvolume,\n\t\t\ttimeUnit,\n\t\t});\n\t}\n}\n\n// used in html\nObject.defineProperty(globalThis, \"bytebeat\", {\n\tvalue: {\n\t\tchangeTimeUnit,\n\t\tsetByteSample,\n\t\tconvertFromUnit,\n\t\ttogglePlay,\n\t\tresetTime,\n\t\tsetPlaySpeed,\n\t\tsetVolume,\n\t\tchangeScale,\n\t\tsetSongMode,\n\t\tsetSampleRate,\n\t\tsetSampleRateDivisor,\n\t\trefresh,\n\t},\n});\n\n// TODO: move this to a different file\nautoSizeCanvas(true);\naddEventListener(\"resize\", () => autoSizeCanvas());\nexport function autoSizeCanvas(force = false) {\n\tif (!elements.canvas.dataset[\"forcedWidth\"]) {\n\t\t// 768 is halfway between 512 and 1024, 3 added for outline\n\t\tif (innerWidth >= 768 + 3) {\n\t\t\tlet width = 1024;\n\t\t\twhile (innerWidth - 516 >= width * 2) {\n\t\t\t\t// 516px = 4px (outline) + 512px (library)\n\t\t\t\twidth *= 2;\n\t\t\t}\n\t\t\tsetCanvasWidth(width, force);\n\t\t} else {\n\t\t\tsetCanvasWidth(512, force);\n\t\t}\n\t}\n}\nexport function setCanvasWidth(width: number, force = false) {\n\tif (elements.canvas) {\n\t\tif (width !== elements.canvas.width || force) {\n\t\t\telements.canvas.width = width;\n\t\t\t// TODO: see if it's possible to get rid of this\n\t\t\telements.main.style.maxWidth = `${width + 4}px`;\n\t\t}\n\t}\n}\n```\noscillioscope.ts\n```ts\nexport type DrawSample = { t: number; value: [number, number] };\n\nfunction fmod(a: number, b: number) {\n\treturn ((a % b) + b) % b;\n}\n\nexport class Oscillioscope {\n\tprivate readonly ctx: CanvasRenderingContext2D;\n\tprivate readonly timeCursor: HTMLElement;\n\tsettings = { scale: 5 };\n\tprivate drawBuffer: DrawSample[] = [];\n\tprivate drawImageData: ImageData | null = null;\n\n\tconstructor(canvas: HTMLCanvasElement, timeCursor: HTMLElement) {\n\t\tthis.ctx = canvas.getContext(\"2d\", { alpha: false })!;\n\t\tthis.timeCursor = timeCursor;\n\t}\n\n\tprivate getXpos(t: number): number {\n\t\treturn t / (1 << this.settings.scale);\n\t}\n\tprivate getTimeFromXpos(x: number): number {\n\t\treturn x * (1 << this.settings.scale);\n\t}\n\taddToBuffer(data: DrawSample[], sample: number) {\n\t\tthis.drawBuffer = this.drawBuffer.concat(data);\n\t\t// prevent buffer accumulation when tab inactive\n\t\tconst maxDrawBufferSize = this.getTimeFromXpos(this.ctx.canvas.width) - 1;\n\t\tif (sample - this.drawBuffer[this.drawBuffer.length >> 1].t > maxDrawBufferSize) {\n\t\t\t// reasonable lazy cap\n\t\t\tthis.drawBuffer = this.drawBuffer.slice(this.drawBuffer.length >> 1);\n\t\t} else if (this.drawBuffer.length > maxDrawBufferSize) {\n\t\t\t// emergency cap\n\t\t\tthis.drawBuffer = this.drawBuffer.slice(-maxDrawBufferSize);\n\t\t}\n\t}\n\n\tclear(clear = true) {\n\t\tthis.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);\n\t\tif (clear) {\n\t\t\tthis.clearBuffer();\n\t\t}\n\t}\n\tprivate clearBuffer() {\n\t\tthis.drawBuffer = [];\n\t\tthis.drawImageData = null;\n\t}\n\n\tdraw(endTime: number, playingForward: boolean) {\n\t\tconst { width, height } = this.ctx.canvas;\n\n\t\tconst bufferLen = this.drawBuffer.length;\n\t\tif (!bufferLen) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet startTime = this.drawBuffer[0].t + (this.drawBuffer.carry ? 1 : 0);\n\t\tlet lenTime = endTime - startTime;\n\t\tlet startXPos = fmod(this.getXpos(startTime), width);\n\t\tlet endXPos = startXPos + this.getXpos(lenTime);\n\n\t\t{\n\t\t\tlet drawStartX = Math.floor(startXPos);\n\t\t\tlet drawEndX = Math.floor(endXPos);\n\t\t\tlet drawLenX = Math.abs(drawEndX - drawStartX) + 1;\n\t\t\tlet drawOverflow = false;\n\t\t\t// clip draw area if too large\n\t\t\tif (drawLenX > width) {\n\t\t\t\t// TODO: put this into a better section so the variables don't all have to be set again\n\t\t\t\tstartTime = this.getTimeFromXpos(this.getXpos(endTime) - width);\n\t\t\t\tlet sliceIndex = 0;\n\t\t\t\tfor (let i in this.drawBuffer) {\n\t\t\t\t\t// TODO: replace this with binary search\n\t\t\t\t\tif ((this.drawBuffer[i + 1]?.t ?? endTime) <= startTime - 1) {\n\t\t\t\t\t\tsliceIndex += 1;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.drawBuffer[i].t = startTime - 1;\n\t\t\t\t\t\tthis.drawBuffer[i].carry = true;\n\t\t\t\t\t\tthis.drawBuffer = this.drawBuffer.slice(sliceIndex);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tlenTime = endTime - startTime;\n\t\t\t\tstartXPos = fmod(this.getXpos(startTime), width);\n\t\t\t\tendXPos = startXPos + this.getXpos(lenTime);\n\t\t\t\tdrawStartX = Math.ceil(startXPos); // this is a bit of a hack, since this doesn't relate to the other variables properly\n\t\t\t\t// i can only get away with this because the other vars like startTime and such aren't used\n\t\t\t\t// the proper solution would be to somehow round up startTime by a pixel\n\t\t\t\tdrawEndX = Math.floor(endXPos);\n\t\t\t\tdrawLenX = Math.abs(drawEndX - drawStartX) + 1;\n\t\t\t\tdrawOverflow = true;\n\t\t\t}\n\n\t\t\tconst imagePos = Math.min(drawStartX, drawEndX);\n\t\t\t// create imageData\n\t\t\tlet imageData = this.ctx.createImageData(drawLenX, height);\n\t\t\t// create / add drawimageData\n\t\t\tif (this.settings.scale) {\n\t\t\t\t// full zoom can't have multiple samples on one pixel\n\t\t\t\tif (this.drawImageData) {\n\t\t\t\t\tif (!drawOverflow) {\n\t\t\t\t\t\t// fill in starting area of image data with previously drawn samples\n\t\t\t\t\t\tlet x = playingForward ? 0 : drawLenX - 1;\n\t\t\t\t\t\tfor (let y = 0; y < height; y++) {\n\t\t\t\t\t\t\timageData.data[((drawLenX * y + x) << 2) + 0] =\n\t\t\t\t\t\t\t\tthis.drawImageData.data[(y << 2) + 0];\n\t\t\t\t\t\t\timageData.data[((drawLenX * y + x) << 2) + 1] =\n\t\t\t\t\t\t\t\tthis.drawImageData.data[(y << 2) + 1];\n\t\t\t\t\t\t\timageData.data[((drawLenX * y + x) << 2) + 2] =\n\t\t\t\t\t\t\t\tthis.drawImageData.data[(y << 2) + 2];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.drawImageData = this.ctx.createImageData(1, height);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.drawImageData = null;\n\t\t\t}\n\t\t\t// set alpha\n\t\t\t// TODO flatten\n\t\t\tfor (let x = 0; x < drawLenX; x++) {\n\t\t\t\tfor (let y = 0; y < height; y++) {\n\t\t\t\t\timageData.data[((drawLenX * y + x) << 2) + 3] = 255;\n\t\t\t\t}\n\t\t\t}\n\t\t\t// draw\n\t\t\tconst iterateOverHorizontalLine = (\n\t\t\t\tbufferElem: DrawSample,\n\t\t\t\tnextBufferElemTime: number,\n\t\t\t\tcallback: (xPos: number) => void,\n\t\t\t\tinitCallback?: (xPos: number) => void,\n\t\t\t) => {\n\t\t\t\tconst startX = fmod(\n\t\t\t\t\tMath.floor(this.getXpos(playingForward ? bufferElem.t : nextBufferElemTime + 1)) -\n\t\t\t\t\t\timagePos,\n\t\t\t\t\twidth,\n\t\t\t\t);\n\t\t\t\tconst endX = fmod(\n\t\t\t\t\tMath.ceil(this.getXpos(playingForward ? nextBufferElemTime : bufferElem.t + 1)) -\n\t\t\t\t\t\timagePos,\n\t\t\t\t\twidth,\n\t\t\t\t);\n\t\t\t\tif (initCallback) {\n\t\t\t\t\tinitCallback(startX);\n\t\t\t\t}\n\t\t\t\tfor (let xPos = startX; xPos !== endX; xPos = fmod(xPos + 1, width)) {\n\t\t\t\t\tcallback(xPos);\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tfor (let i = this.drawBuffer[0].t < startTime ? 1 : 0; i < bufferLen; i++) {\n\t\t\t\tlet lastBufferElem = this.drawBuffer[i - 1] ?? null;\n\t\t\t\tlet bufferElem = this.drawBuffer[i];\n\t\t\t\tlet nextBufferElemTime = this.drawBuffer[i + 1]?.t ?? endTime;\n\t\t\t\tif (isNaN(bufferElem.value[0]) || isNaN(bufferElem.value[1])) {\n\t\t\t\t\titerateOverHorizontalLine(bufferElem, nextBufferElemTime, xPos => {\n\t\t\t\t\t\tfor (let h = 0; h < 256; h++) {\n\t\t\t\t\t\t\tconst pos = (drawLenX * h + xPos) << 2;\n\t\t\t\t\t\t\timageData.data[pos] = 96;\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tfor (let c = 0; c < 2; c++) {\n\t\t\t\t\tif (bufferElem.value[c] >= 0 && bufferElem.value[c] < 256) {\n\t\t\t\t\t\t// NaN check is implicit here\n\t\t\t\t\t\titerateOverHorizontalLine(\n\t\t\t\t\t\t\tbufferElem,\n\t\t\t\t\t\t\tnextBufferElemTime,\n\t\t\t\t\t\t\txPos => {\n\t\t\t\t\t\t\t\tconst pos = (drawLenX * (255 - bufferElem.value[c]) + xPos) << 2;\n\t\t\t\t\t\t\t\tif (c) {\n\t\t\t\t\t\t\t\t\timageData.data[pos] = imageData.data[pos + 2] = 255;\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\timageData.data[pos] = 0; // clear out NaN red\n\t\t\t\t\t\t\t\t\timageData.data[pos + 1] = 255;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t// Waveform draw mode connectors\n\t\t\t\t\t\t\tlastBufferElem && !isNaN(lastBufferElem.value[c])\n\t\t\t\t\t\t\t\t? xPos => {\n\t\t\t\t\t\t\t\t\t\tconst dir = lastBufferElem.value[c] < bufferElem.value[c] ? -1 : 1;\n\t\t\t\t\t\t\t\t\t\tfor (\n\t\t\t\t\t\t\t\t\t\t\tlet h = 255 - lastBufferElem.value[c];\n\t\t\t\t\t\t\t\t\t\t\th !== 255 - bufferElem.value[c];\n\t\t\t\t\t\t\t\t\t\t\th += dir\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tconst pos = (drawLenX * h + xPos) << 2;\n\t\t\t\t\t\t\t\t\t\t\tif (imageData.data[pos] === 0) {\n\t\t\t\t\t\t\t\t\t\t\t\t// don't overwrite filled cells\n\t\t\t\t\t\t\t\t\t\t\t\tif (c) {\n\t\t\t\t\t\t\t\t\t\t\t\t\timageData.data[pos] = imageData.data[pos + 2] = 140;\n\t\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\timageData.data[pos] = 0; // clear out NaN red\n\t\t\t\t\t\t\t\t\t\t\t\t\timageData.data[pos + 1] = 140;\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t: () => {},\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\t// put imageData\n\t\t\tthis.ctx.putImageData(imageData, imagePos, 0);\n\t\t\tif (endXPos >= width) {\n\t\t\t\tthis.ctx.putImageData(imageData, imagePos - width, 0);\n\t\t\t} else if (endXPos < 0) {\n\t\t\t\tthis.ctx.putImageData(imageData, imagePos + width, 0);\n\t\t\t}\n\t\t\t// write to drawImageData\n\t\t\tif (this.settings.scale) {\n\t\t\t\t// full zoom can't have multiple samples on one pixel\n\t\t\t\tconst x = playingForward ? drawLenX - 1 : 0;\n\t\t\t\tfor (let y = 0; y < height; y++) {\n\t\t\t\t\tthis.drawImageData.data[y << 2] = imageData.data[(drawLenX * y + x) << 2];\n\t\t\t\t\tthis.drawImageData.data[(y << 2) + 1] =\n\t\t\t\t\t\timageData.data[((drawLenX * y + x) << 2) + 1];\n\t\t\t\t\tthis.drawImageData.data[(y << 2) + 2] =\n\t\t\t\t\t\timageData.data[((drawLenX * y + x) << 2) + 2];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// clear buffer except last sample\n\t\tthis.drawBuffer = [{ t: endTime, value: this.drawBuffer[bufferLen - 1].value, carry: true }];\n\t}\n\n\t// TODO don't make this depend on play direction\n\tmoveTimeCursor(time: number, playingForward: boolean) {\n\t\tif (!this.timeCursor.classList.contains(\"disabled\")) {\n\t\t\tconst width = this.ctx.canvas.width;\n\t\t\tif (playingForward) {\n\t\t\t\tthis.timeCursor.style.removeProperty(\"right\");\n\t\t\t\tthis.timeCursor.style.left = `${\n\t\t\t\t\t(fmod(Math.ceil(this.getXpos(time)), width) / width) * 100\n\t\t\t\t}%`;\n\t\t\t} else {\n\t\t\t\tthis.timeCursor.style.removeProperty(\"left\");\n\t\t\t\tthis.timeCursor.style.right = `${\n\t\t\t\t\t(1 - (fmod(Math.ceil(this.getXpos(time)), width) + 1) / width) * 100\n\t\t\t\t}%`;\n\t\t\t}\n\t\t}\n\t}\n\tshowTimeCursor(show: boolean) {\n\t\tthis.timeCursor.classList.toggle(\"disabled\", !show);\n\t}\n}\n```\n(all files from bytebeat.ficial.net)","url","link_url","/p/2ddvfxfk4n22718d1zex","versioned_link_url","/p/2ddvfxfk4n22718d1zex/28","yapping","**Planning file creation**\n\nOkay, I need to create multiple files: common.ts, elements.ts, interface.ts, and oscillioscope.ts. They’ve provided the content, so it seems I just need to focus on making new files. I'll use file creation blocks for this. My approach will be to write a brief sentence about each change followed by the code block for each file. Finally, I’ll provide a summary of everything. Let’s get started!\n\nI will add four TypeScript modules (common.ts, elements.ts, interface.ts, oscillioscope.ts) with the provided implementations to the project.\n\ncommon.ts\n```common.ts\n```\n\nelements.ts\n```elements.ts\n```\n\ninterface.ts\n```interface.ts\n```\n\noscillioscope.ts\n```oscillioscope.ts\n```\n\nSummary: I added four TypeScript modules—common.ts, elements.ts, interface.ts, and oscillioscope.ts—by creating the exact files you provided, wiring helper types/utilities, DOM element references, the main interface logic handling audio/worklet and UI interactions, and the oscilloscope drawing class.","cursor","eyJpZCI6IjJkZHZmeGZrNG4yMjcxOGQxemV4In0","token","included",[],"routes/browser/layout","actionData","errors"]