(() => { 'use strict'; const modules = Object.create(null); modules["webui/platform.mjs"] = (() => { // The web platform: runs the CPU (out/cpu.wasm) with the guest environment // (out/guestenv.bin) and emulates the platform calls of guestenv/platform.h. Works // in Node and in a browser worker; game files come from a `source` function. // // Everything Win32 happens in the guest. This file only provides files, // presentation, input and time, and knows nothing about the game. // // The calls are inputs or outputs. The guest only sees what inputs return: // files, input, time and options, which depend on the replay (or the live // input and clock, which it records) and nothing else, so runs reproduce. // Outputs (log, present, wait, cursor, pointer, audio) return nothing: they can be // asynchronous, and may hold the guest back (to wait in real time), which it // cannot notice. const GUESTENV_BASE = 0x0e000000, HOST_BASE = 0x0f000000, STACK_TOP = 0x6ff00000, TEB_BASE = 0x7ff00000; const GUEST_BASE = 0x100000, MEM_SIZE = 0x80000000; const PENDING_MS = 2; const hex = n => (n >>> 0).toString(16).padStart(8, '0'); // Give input and OffscreenCanvas commits a turn as well as the emulator. // A continuously replenished MessageChannel queue can starve both in Chrome. // Dispatch the continuation through a timer; the port hop resets timer nesting // so repeated yields do not accumulate the nested-timer minimum delay. function taskYielder() { const {port1, port2} = new MessageChannel(); let resume, timer; port1.onmessage = () => { timer = setTimeout(resume, 0); }; return { yield: () => new Promise(resolve => { resume = resolve; port2.postMessage(0); }), close() { clearTimeout(timer); port1.close(); port2.close(); }, }; } // The game exited (code; guestenv stops with 0xdead after logging why), or the // replay reached its end (code undefined). class Exit extends Error { constructor(code) { super(code === undefined ? 'Replay ended' : `Game exited with code ${code}`); this.code = code; } } // Instantiates the CPU. Generated modules are instantiated through jit_load // and share its memory and function table. With asyncJit, they compile in // the background, which keeps compilation from stalling frames: the region // runs interpreted until the next return to the event loop after it is ready // (jit_install; jit.pending counts the compilations under way). A failed // compilation fails the next jit_load. async function instantiateCPU(wasm, jit) { let cpu, failure = null; const add = module => { const f = new WebAssembly.Instance(module, { e: {m: cpu.memory, c: cpu.jit_h_call, u: cpu.jit_h_uop, k: cpu.jit_h_cond, g: cpu.jit_h_flags, x: cpu.jit_h_fpu, y: cpu.jit_h_mmx}, }).exports.f; const table = cpu.__indirect_function_table, index = table.grow(1); table.set(index, f); return index; }; const env = { math: (op, a, b) => [() => 2 ** a - 1, () => Math.log2(a), () => Math.atan2(a, b), () => a * 2 ** b, () => Math.sin(a), () => Math.cos(a)][op](), jit_load(ptr, size, entry) { const bytes = new Uint8Array(cpu.memory.buffer, ptr >>> 0, size); if (!jit.async) return add(new WebAssembly.Module(bytes)); if (failure) throw failure; jit.pending++; WebAssembly.compile(bytes.slice()).then(module => cpu.jit_install(entry >>> 0, add(module)), error => { failure ??= error; }) .finally(() => jit.pending--); return 0; }, }; // Accept either raw bytes or the module compiled during player preparation. const result = await WebAssembly.instantiate(wasm, {env}); cpu = (result.instance ?? result).exports; return cpu; } class Machine { // manifest: game files by lowercase path ({path, size}); source(path): // bytes of a game file; input: a source of input (input.mjs); output: what // to do with the outputs, all optional: present(surface, nowUs), // wait(untilUs) (both may return a promise to hold the guest back), cursor(kind, // argb, w, h, hotX, hotY), pointer(x, y), audio(command); patches: the patches to apply ("" // for guestenv's default). constructor({manifest, source, input, output = {}, log = console.log, patches = '', beforeCall, storage}) { this.patches = patches; this.beforeCall = beforeCall; this.manifest = manifest; this.source = source; this.input = input; this.output = output; this.log = log; this.storage = storage; this.dirtyFiles = new Set(); this.files = new Map(storage?.files); // path -> bytes, or null once deleted this.dirs = new Set(['', 'temp', 'log', ...(storage?.dirs ?? [])]); this.handles = new Map(); this.nextHandle = 1; this.frames = 0; this.presented = false; // since the last return to the event loop this.recent = []; // the last log lines, for error reports this.lists = new Map(); this.manifestDirs = new Set(); for (const key of Object.keys(manifest)) for (let i = key.indexOf('/'); i >= 0; i = key.indexOf('/', i + 1)) this.manifestDirs.add(key.slice(0, i)); } // asyncJit: compile regions in the background (see instantiateCPU). async init(cpuWasm, guestenvBin, {jit = true, asyncJit = true} = {}) { this.jit = {async: asyncJit, pending: 0}; this.cpu = await instantiateCPU(cpuWasm, this.jit); this.mem = new Uint8Array(this.cpu.memory.buffer, 0, MEM_SIZE); this.dv = new DataView(this.cpu.memory.buffer, 0, MEM_SIZE); this.mem.set(guestenvBin, GUESTENV_BASE); // The virtual clock counts the game's instructions, not guestenv's. this.cpu.reset(GUESTENV_BASE, STACK_TOP, TEB_BASE, GUESTENV_BASE, GUESTENV_BASE + guestenvBin.length); this.cpu.cpu_jit(jit ? 64 : 0); return this; } u32(p) { return this.dv.getUint32(p >>> 0, true); } w32(p, v) { this.dv.setUint32(p >>> 0, v >>> 0, true); } str(p, n = 4096) { let e = p; while (e < p + n && this.mem[e]) e++; return new TextDecoder('windows-1252').decode(this.mem.subarray(p, e)); } putstr(p, s, n) { const len = Math.min(s.length, n - 1); for (let i = 0; i < len; i++) this.mem[p + i] = s.charCodeAt(i) & 255; this.mem[p + len] = 0; } instructions() { return this.cpu.cpu_stat(0); } // Runs until the game exits or the replay ends (throws Exit). yieldMs: // return to the event loop after every presented frame and at least this // often (in a browser, to show frames and to receive messages). A worker's // canvas shows what was drawn when it returns to the event loop, so a frame // presented before another without a return in between is never seen. // While regions compile in the background, return every PENDING_MS, so // that hot code does not stay interpreted for long. async run({yieldMs = 0} = {}) { const cpu = this.cpu; const tasks = yieldMs ? taskYielder() : null; let last = performance.now(); try { for (;;) { const s = cpu.run(); if (s === 1) { const boundary = this.beforeCall?.(this); if (boundary) await boundary; const r = this.call(); if (r) await r; } else if (s < 0) { const eip = cpu.reg_get(8) >>> 0; throw Error(`CPU stopped at ${hex(eip)}: ${eip < GUEST_BASE ? 'invalid address' : 'unsupported instruction ' + Array.from(this.mem.subarray(eip, eip + 8), b => b.toString(16).padStart(2, '0')).join(' ')}`); } if (yieldMs && (this.presented || performance.now() - last >= (this.jit.pending ? Math.min(yieldMs, PENDING_MS) : yieldMs))) { this.presented = false; await tasks.yield(); last = performance.now(); } } } finally { tasks?.close(); } } // A platform call: cdecl arguments above the return address, result in EAX. // Returns a promise when the call has to wait (file loads, pacing). call() { const cpu = this.cpu, eip = cpu.reg_get(8) >>> 0, n = (eip - HOST_BASE) / 16; const fn = this.calls[n]; if (!fn) throw Error('unknown platform call at ' + hex(eip)); const sp = cpu.reg_get(4) >>> 0, ret = this.u32(sp); const a = Array.from({length: fn.length}, (_, i) => this.u32(sp + 4 + i * 4)); const done = v => { cpu.reg_set(0, (v ?? 0) >>> 0); cpu.reg_set(4, sp + 4); cpu.reg_set(8, ret); }; const v = fn.apply(this, a); if (v instanceof Promise) return v.then(done); done(v); } // Game file contents, or null. The writable overlay takes precedence. async gameFile(key) { if (this.files.has(key)) return this.files.get(key); const entry = this.manifest[key]; if (!entry) return null; const bytes = new Uint8Array(await this.source(entry.path)); this.files.set(key, bytes); return bytes; } isFile(key) { return this.files.has(key) ? !!this.files.get(key) : !!this.manifest[key]; } isDir(key) { return this.dirs.has(key) || this.manifestDirs.has(key); } file(id) { const key = this.handles.get(id); if (key === undefined) throw Error('bad platform file ' + id); return {key, data: this.files.get(key)}; } } // The calls in platform.h order. Arguments are 32-bit words. Machine.prototype.calls = [ function log(p, n) { const text = this.str(p, n); this.recent = [...this.recent.slice(-19), text]; this.log(text); }, function exit(code) { throw new Exit(code); }, function open(p, create) { const key = this.str(p); const opened = () => { const id = this.nextHandle++; this.handles.set(id, key); return id; }; if (create) { this.files.set(key, new Uint8Array(0)); this.dirtyFiles.add(key); this.lists.delete(key.slice(0, Math.max(0, key.lastIndexOf("/")))); return opened(); } return this.gameFile(key).then(data => data ? opened() : -1); }, function read(id, dst, off, n) { const {data} = this.file(id), len = Math.max(0, Math.min(n, data.length - off)); this.mem.set(data.subarray(off, off + len), dst); return len; }, function write(id, src, off, n) { const {key, data} = this.file(id); const out = new Uint8Array(Math.max(data.length, off + n)); out.set(data); out.set(this.mem.subarray(src, src + n), off); this.files.set(key, out); this.dirtyFiles.add(key); this.lists.delete(key.slice(0, Math.max(0, key.lastIndexOf("/")))); return n; }, function size(id) { return this.file(id).data.length; }, function close(id) { const key = this.handles.get(id); this.handles.delete(id); if (this.dirtyFiles.has(key) && ![...this.handles.values()].includes(key)) { this.dirtyFiles.delete(key); return this.storage?.write(key, this.files.get(key)); } }, function stat(p) { const key = this.str(p); return this.isFile(key) ? 1 : this.isDir(key) ? 2 : 0; }, function mkdir(p) { const key = this.str(p); if (this.isDir(key)) return 0; this.dirs.add(key); if (this.storage) return this.storage.mkdir(key).then(() => 1); return 1; }, function remove(p) { const key = this.str(p), exists = this.isFile(key); if (exists) { this.files.set(key, null); this.dirtyFiles.delete(key); this.lists.delete(key.slice(0, Math.max(0, key.lastIndexOf("/")))); if (this.storage) return this.storage.write(key, null).then(() => 1); } return +exists; }, // Merge the installation and writable overlay, keeping manifest order. function list(p, index, name, cap, size) { const dir = this.str(p); let entries = this.lists.get(dir); if (!entries) { const prefix = dir ? dir + "/" : ""; const files = new Map(Object.entries(this.manifest).map(([key, value]) => [key, value.size])); for (const [key, data] of this.files) { if (data === null) files.delete(key); else files.set(key, data.length); } entries = [...files] .filter(([key]) => key.startsWith(prefix) && !key.slice(prefix.length).includes("/")) .map(([key, size]) => [key.slice(prefix.length), size]); this.lists.set(dir, entries); } const entry = entries[index]; if (!entry) return 0; this.putstr(name, entry[0], cap); this.w32(size, entry[1]); return 1; }, function present(bits, w, h, pitch, bpp, lo, hi) { this.frames++; this.presented = true; return this.output.present?.({bits, w, h, pitch, bpp}, lo + hi * 2 ** 32); }, function input(lo, hi, out, max) { const events = this.input.poll(lo + hi * 2 ** 32, max); events.forEach((e, n) => e.forEach((v, i) => this.w32(out + n * 16 + i * 4, v))); return events.length; }, // The clock's next line (guestenv/platform.h), from the input: the CPU's // RDTSC counts 100 per game instruction. function time(tscLo, tscHi, minLo, minHi, out) { const tsc = BigInt(tscHi) << 32n | BigInt(tscLo), line = this.input.time(tsc, minLo + minHi * 2 ** 32); this.dv.setBigUint64(out, BigInt(line.us), true); this.dv.setBigUint64(out + 8, tsc + BigInt(line.span), true); this.w32(out + 16, line.scale); }, // The next line starts at the wait's end at the earliest; the output may make it take real time. function wait(nowLo, nowHi, untilLo, untilHi) { return this.output.wait?.(untilLo + untilHi * 2 ** 32); }, function options(out, cap) { const s = this.patches.slice(0, cap); this.putstr(out, s, cap + 1); return s.length; }, function cursor(kind, argb, w, h, hotX, hotY) { this.output.cursor?.(kind, argb, w, h, hotX, hotY); }, // SetCursorPos: live input continues from there. function pointer(x, y) { this.input.pointer?.(x | 0, y | 0); this.output.pointer?.(x | 0, y | 0); }, // A command to the sound's voices (struct plat_audio): the file's bytes are // valid during the output's call only. Volume and pan are fractions. function audio(p) { const u = o => this.u32(p + o), op = u(8), data = u(28); this.output.audio?.({at: u(0) + u(4) * 2 ** 32, op, voice: u(12), format: u(16), frame: u(24), data: op === 1 ? this.mem.subarray(data, data + u(20)) : null, volume: u(32) / 0x10000, rate: u(36), paused: u(40) !== 0, pan: (u(44) | 0) / 0x10000}); }, // Native networking only; preserve the browser's unavailable Winsock result. function network() { return -10091; }, ]; return {Exit,Machine}; })(); modules["webui/input.mjs"] = (() => { // Input sources of the web platform: what P_INPUT and P_TIME return to the // guest. The guest sees nothing else from outside that could differ between // runs, so a run is its input. LiveInput records the events it hands the // guest, with the time of the poll that took them, and the lines of the clock // it draws along real time; ReplayInput hands them to the same polls and time // calls again (guestenv makes both at points that depend on the game's // instructions only). // // Decoded traces contain events [us, kind, a, b, c], exact input poll // ordinals, and clock lines [call, us, scale, span]. LiveInput streams these // records to TraceWriter; the footer identifies the final execution boundary. const {Exit} = modules["webui/platform.mjs"]; const EV_MOVE = 1, EV_DOWN = 2, EV_UP = 3, EV_KEYDOWN = 4, EV_KEYUP = 5, EV_WHEEL = 6, EV_RESIZE = 7; // Initial live-clock rate estimate: 300 game instructions per microsecond // (RDTSC counts 100 per instruction). LiveClock adapts it to measured speed. const INITIAL_TICKS_PER_US = 30000, MAX_SPAN = 2 ** 31; const scaleOf = usPerTick => Math.min(Math.max(Math.round(usPerTick * 2 ** 32), 1), 2 ** 32 - 1); // A line of the clock from tsc on (platform.h): us + ((t - tsc) * scale >> 32) // until tsc + span. class Line { constructor(tsc, us, scale, span) { Object.assign(this, {tsc, us, scale, span}); } at(t) { return this.us + Number((t - this.tsc) * BigInt(this.scale) >> 32n); } // The same line on from t, not below min. next(t, min) { return new Line(t, Math.max(this.at(t), min), this.scale, this.span); } } class ReplayInput { constructor(replay) { this.replay = replay; this.next = 0; this.polls = 0; this.lines = new Map(replay.clock.map(r => [r[0], r])); this.calls = 0; this.line = null; } // The events due at `now`; the replay ends (Exit) at its end. poll(now, max) { const {events, eventPolls, trace: {footer}} = this.replay, out = []; if (footer.boundary === 'input' && this.polls === footer.polls) throw new Exit(); this.polls++; while (this.next < events.length && eventPolls[this.next] === this.polls - 1 && out.length < max) out.push(events[this.next++].slice(1)); return out; } // The recorded line, or the one before, continued. time(tsc, min) { const r = this.lines.get(this.calls++); if (!r && !this.line) throw Error('Trace has no initial clock line'); return this.line = r ? new Line(tsc, r[1], r[2], r[3]) : this.line.next(tsc, min); } } // Real time for live play: every line reaches real time at its end, about // 2 ms later, at the rate the host runs the game. A line is recorded only when // the one before, continued, is more than 1/4 ms off real time. A clock far // behind real time (a background tab, a debugger) moves on by 100 ms at most: // the game does not catch up on the rest. const EPSILON_US = 250, MAX_JUMP_US = 100000, LINE_US = 2000; class LiveClock { constructor(trace) { this.trace = trace; this.base = performance.now(); // wall time at 0 this.rate = INITIAL_TICKS_PER_US; // ticks per wall microsecond, measured this.calls = 0; this.line = null; this.last = null; } wall() { return Math.floor((performance.now() - this.base) * 1000); } time(tsc, min) { const call = this.calls++; let wall = this.wall(); if (this.last && !this.last.waited && !min) { /* not across a wait: it slept */ const dt = wall - this.last.wall, dtsc = Number(tsc - this.last.tsc); if (dt > 0 && dtsc > 0) this.rate = 0.7 * this.rate + 0.3 * dtsc / dt; } this.last = {wall, tsc, waited: min > 0}; let next = this.line?.next(tsc, min); if (next && wall - next.us > MAX_JUMP_US) { this.base += (wall - next.us - MAX_JUMP_US) / 1000; wall = next.us + MAX_JUMP_US; } const target = Math.max(wall, min); if (!next || Math.abs(target - next.us) > EPSILON_US) { const span = Math.max(1, Math.min(Math.round(this.rate * LINE_US), MAX_SPAN)); const us = Math.max(next?.us ?? 0, target), end = target + span / this.rate; const scale = Math.min(Math.max(scaleOf((end - us) / span), scaleOf(0.25 / this.rate)), scaleOf(4 / this.rate)); next = new Line(tsc, us, scale, span); this.trace.clockAt([call, us, scale, span]); } return this.line = next; } } // Input from the page, as it arrives, and real time. The pointer is the // guest's: positions and movements come as fractions of the display, and // SetCursorPos moves the pointer here (pointer), which the page cannot do. // Consecutive moves are one, and moves still waiting when the game moves the // pointer are dropped, as with Windows. class LiveInput { constructor(patches = '', trace) { this.patches = patches; this.trace = trace; this.clock = new LiveClock(trace); this.polls = 0; this.queue = []; this.wheelRemainder = 0; this.w = 800, this.h = 600; this.x = 400, this.y = 300; this.now = 0; } // The display's size, from what the guest presents. display(w, h) { this.x *= w / this.w, this.y *= h / this.h; this.w = w, this.h = h; } // The pointer at a place (fractions), or moved by a distance (fractions of the display). move(fx, fy) { this.place(fx * this.w, fy * this.h); } moveBy(dx, dy) { this.place(this.x + dx * this.w, this.y + dy * this.h); } place(x, y) { this.x = Math.min(Math.max(x, 0), this.w - 1), this.y = Math.min(Math.max(y, 0), this.h - 1); const e = [EV_MOVE, Math.round(this.x), Math.round(this.y), 0], last = this.queue.at(-1); if (last?.[0] === EV_MOVE) this.queue[this.queue.length - 1] = e; else this.queue.push(e); } // button: 0 left, 2 right. button(down, button) { this.queue.push([down ? EV_DOWN : EV_UP, Math.round(this.x), Math.round(this.y), button]); } // Browsers report pixels, lines, or pages, with positive deltas downward. // Use 100 pixels / 3 lines / 1 page per notch, accumulating smooth trackpad // input so tiny events don't each become a full Windows wheel notch. wheel(deltaY, deltaMode = 0) { if (!Number.isFinite(deltaY)) return; this.wheelRemainder -= deltaY / (deltaMode === 1 ? 3 : deltaMode === 2 ? 1 : 100); const notches = Math.trunc(this.wheelRemainder); this.wheelRemainder -= notches; for (let i = 0; i < Math.abs(notches); i++) this.queue.push([EV_WHEEL, Math.round(this.x), Math.round(this.y), notches > 0 ? 120 : -120]); } key(down, vk, char) { this.queue.push([down ? EV_KEYDOWN : EV_KEYUP, vk, down ? char : 0, 0]); } resize(w, h) { if (!this.patches.split(/[ ,]+/).includes('resize') || !Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) return; w = Math.min(4096, Math.max(800, Math.round(w))); h = Math.min(4096, Math.max(600, Math.round(h))); const last = this.queue.at(-1), event = [EV_RESIZE, w, h, 0]; if (last?.[0] === EV_RESIZE) this.queue[this.queue.length - 1] = event; else this.queue.push(event); } // SetCursorPos. pointer(x, y) { this.x = x, this.y = y; this.queue = this.queue.filter(e => e[0] !== EV_MOVE); } poll(now, max) { this.now = now; this.polls++; const out = this.queue.splice(0, max); for (const e of out) this.trace.eventAt(now, e, this.polls - 1); return out; } time(tsc, min) { return this.clock.time(tsc, min); } // How long until real time reaches the clock's `us` (for waits). aheadMs(us) { return (us - this.clock.wall()) / 1000; } } return {LiveInput}; })(); modules["webui/presenter.mjs"] = (() => { // RGB565 stays packed until WebGL uploads it. No RGBA conversion or frame // buffer transfer to the main thread is needed. // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D function rgb565Source(memory, surface, scratch) { const {w, h, bits, pitch, bpp} = surface; if (bpp !== 16 || !Number.isSafeInteger(w) || !Number.isSafeInteger(h) || !Number.isSafeInteger(bits) || !Number.isSafeInteger(pitch) || w <= 0 || h <= 0 || bits < 0 || pitch < w * 2 || bits + (h - 1) * pitch + w * 2 > memory.byteLength) throw Error('Invalid RGB565 presentation surface'); const offset = memory.byteOffset + bits; if (pitch === w * 2 && !(offset & 1)) return new Uint16Array(memory.buffer, offset, w * h); // Unusual padded/unaligned surfaces use a reusable packed staging buffer. if (!scratch || scratch.length !== w * h) scratch = new Uint16Array(w * h); if (!((offset | pitch) & 1)) { for (let y = 0; y < h; y++) scratch.set(new Uint16Array(memory.buffer, offset + y * pitch, w), y * w); } else { const data = new DataView(memory.buffer); for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) scratch[y * w + x] = data.getUint16(offset + y * pitch + x * 2, true); } return scratch; } class Presenter { constructor(canvas, onError) { const gl = this.gl = canvas.getContext('webgl', { alpha : false, antialias : false, depth : false, stencil : false, premultipliedAlpha : false, preserveDrawingBuffer : false }); if (!gl) throw Error('WebGL is unavailable in the game worker'); canvas.addEventListener('webglcontextlost', () => { this.lost = true; onError(Error('WebGL context lost; load the game again')); }); const shader = (type, source) => { const s = gl.createShader(type); gl.shaderSource(s, source); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw Error('Presentation shader: ' + gl.getShaderInfoLog(s)); return s; }; const vertex = shader(gl.VERTEX_SHADER, ` attribute vec2 position; varying vec2 uv; void main() { gl_Position = vec4(position, 0.0, 1.0); uv = vec2(position.x * 0.5 + 0.5, 0.5 - position.y * 0.5); }`); const fragment = shader(gl.FRAGMENT_SHADER, ` precision highp float; varying vec2 uv; uniform sampler2D pixels; void main() { gl_FragColor = vec4(texture2D(pixels, uv).rgb, 1.0); }`); const program = gl.createProgram(); gl.attachShader(program, vertex); gl.attachShader(program, fragment); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw Error('Presentation program: ' + gl.getProgramInfoLog(program)); gl.deleteShader(vertex); gl.deleteShader(fragment); gl.useProgram(program); gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1 ]), gl.STATIC_DRAW); const position = gl.getAttribLocation(program, 'position'); gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, gl.createTexture()); gl.uniform1i(gl.getUniformLocation(program, 'pixels'), 0); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); gl.disable(gl.DITHER); this.width = this.height = 0; } present(memory, surface) { if (this.lost) throw Error('WebGL context lost'); const gl = this.gl, {w, h} = surface; const pixels = rgb565Source(memory, surface, this.scratch); if (pixels.buffer !== memory.buffer) this.scratch = pixels; const resized = this.width !== w || this.height !== h; if (resized) { gl.canvas.width = this.width = w; gl.canvas.height = this.height = h; gl.viewport(0, 0, w, h); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, w, h, 0, gl.RGB, gl.UNSIGNED_SHORT_5_6_5, null); } gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, w, h, gl.RGB, gl.UNSIGNED_SHORT_5_6_5, pixels); gl.drawArrays(gl.TRIANGLES, 0, 6); if (resized) { const error = gl.getError(); if (error !== gl.NO_ERROR) throw Error('RGB565 presentation failed: WebGL error ' + error); } // Flush submits commands; it does not wait for the GPU. Never gl.finish() // here: presentationMs measures host submission, not GPU/display latency. gl.flush(); } } return {Presenter,rgb565Source}; })(); modules["webui/audio.mjs"] = (() => { // Plays P_AUDIO commands the worker forwards with WebAudio. // MP3 files play in media elements so that the browser decodes them. const LATENCY = 0.08, STALL = 0.1; const AUDIO_PLAY = 1, AUDIO_SET = 2, AUDIO_STOP = 3, AUDIO_WAV = 1; // FNV-1a function audioKey(bytes) { let h = 0x811c9dc5 ^ bytes.length; const add = (from, to, step = 1) => { for (let i = from; i < to; i += step) h = Math.imul(h ^ bytes[i], 0x01000193); }; if (bytes.length <= 1 << 18) add(0, bytes.length); else add(0, 1 << 16), add(bytes.length - (1 << 16), bytes.length), add(1 << 16, bytes.length, 4093); return `${bytes.length}:${(h >>> 0).toString(16)}`; } const STEPS = [7, 8, 9, 10, 11, 12, 13, 14, 16, 17, 19, 21, 23, 25, 28, 31, 34, 37, 41, 45, 50, 55, 60, 66, 73, 80, 88, 97, 107, 118, 130, 143, 157, 173, 190, 209, 230, 253, 279, 307, 337, 371, 408, 449, 494, 544, 598, 658, 724, 796, 876, 963, 1060, 1166, 1282, 1411, 1552, 1707, 1878, 2066, 2272, 2499, 2749, 3024, 3327, 3660, 4026, 4428, 4871, 5358, 5894, 6484, 7132, 7845, 8630, 9493, 10442, 11487, 12635, 13899, 15289, 16818, 18500, 20350, 22385, 24623, 27086, 29794, 32767]; const ADJUST = [-1, -1, -1, -1, 2, 4, 6, 8]; // WAV file as an AudioBuffer, or null. function decodeWav(ctx, d) { const v = new DataView(d.buffer, d.byteOffset, d.byteLength), tag4 = p => String.fromCharCode(...d.subarray(p, p + 4)); if (d.length < 12 || tag4(0) !== 'RIFF' || tag4(8) !== 'WAVE') return null; let fmt = null, fact = 0, start = 0, bytes = 0; for (let p = 12; p + 8 <= d.length;) { const len = v.getUint32(p + 4, true), body = p + 8; if (tag4(p) === 'fmt ' && len >= 16 && body + 16 <= d.length) fmt = {tag: v.getUint16(body, true), channels: v.getUint16(body + 2, true), rate: v.getUint32(body + 4, true), align: v.getUint16(body + 12, true), bits: v.getUint16(body + 14, true)}; else if (tag4(p) === 'fact' && len >= 4 && body + 4 <= d.length) fact = v.getUint32(body, true); else if (tag4(p) === 'data') { start = body, bytes = Math.min(len, d.length - body); break; } if (len > d.length - body) break; p = body + len + (len & 1); } const {tag, channels, rate, align, bits} = fmt ?? {}; if (!start || (channels !== 1 && channels !== 2) || !align || rate < 3000 || rate > 768000) return null; let frames, perBlock = 0; if (tag === 1 && (bits === 8 || bits === 16)) frames = Math.floor(bytes / align); else if (tag === 0x11 && align > 4 * channels) { perBlock = (align - 4 * channels) * 2 / channels + 1; frames = Math.ceil(bytes / align) * perBlock; if (fact && fact < frames) frames = fact; } else return null; if (!frames) return null; const buffer = ctx.createBuffer(channels, frames, rate), out = [0, 1].slice(0, channels).map(c => buffer.getChannelData(c)); if (tag === 1) { for (let f = 0; f < frames; f++) for (let c = 0; c < channels; c++) { const i = start + (f * channels + c) * (bits / 8); out[c][f] = bits === 8 ? (d[i] - 128) / 128 : v.getInt16(i, true) / 32768; } return buffer; } // IMA ADPCM blocks: per channel a header (sample, step index), then 4 bytes // (8 samples) of each channel in turn. for (let b = 0, f = 0; f < frames && b < bytes; b += align, f += perBlock) { const len = Math.min(align, bytes - b), block = start + b, pred = [], index = []; if (len < 4 * channels) break; for (let c = 0; c < channels; c++) { pred[c] = v.getInt16(block + 4 * c, true), index[c] = Math.min(d[block + 4 * c + 2], 88); out[c][f] = pred[c] / 32768; } for (let p = 4 * channels, g = 0; p + 4 * channels <= len; g++) for (let c = 0; c < channels; c++, p += 4) for (let k = 0; k < 8; k++) { const nibble = d[block + p + (k >> 1)] >> (k & 1) * 4 & 15, step = STEPS[index[c]]; let diff = step >> 3; if (nibble & 4) diff += step; if (nibble & 2) diff += step >> 1; if (nibble & 1) diff += step >> 2; pred[c] = Math.min(Math.max(pred[c] + (nibble & 8 ? -diff : diff), -32768), 32767); index[c] = Math.min(Math.max(index[c] + ADJUST[nibble & 7], 0), 88); const at = f + 1 + g * 8 + k; if (at < frames) out[c][at] = pred[c] / 32768; } } return buffer; } class Sound { constructor() { this.ctx = new AudioContext({latencyHint: 'interactive'}); this.files = new Map(); // key -> AudioBuffer (WAV) or blob URL (MP3), for the page's life this.voices = new Map(); this.offset = null; // audio time minus guest time, in seconds } resume() { return this.ctx.resume(); } reset() { for (const v of this.voices.values()) this.stop(v, 0); this.offset = null; } // A voice: its source goes to a stereo input (mono sounds to both sides), // and each side through its own gain. voice(n) { let v = this.voices.get(n); if (!v) { const ctx = this.ctx, splitter = new ChannelSplitterNode(ctx, {numberOfOutputs: 2}); const input = new GainNode(ctx, {channelCount: 2, channelCountMode: 'explicit', channelInterpretation: 'speakers'}); const left = new GainNode(ctx), right = new GainNode(ctx), merger = new ChannelMergerNode(ctx, {numberOfInputs: 2}); input.connect(splitter); splitter.connect(left, 0).connect(merger, 0, 0); splitter.connect(right, 1).connect(merger, 0, 1); merger.connect(ctx.destination); this.voices.set(n, v = {input, left, right, source: null, element: null}); } return v; } // Runs fn at audio time `when` (for what cannot be scheduled). later(when, fn) { const ms = (when - this.ctx.currentTime) * 1000; if (ms > 1) setTimeout(fn, ms); else fn(); } // The source frame a playing WAV voice reaches at `when`. frameAt(v, when) { return v.frame + Math.max(0, when - v.started) * v.rate; } stop(v, when) { if (v.source) { v.source.onended = null; v.source.stop(when); v.source = null; } if (v.element) { const {element, node} = v; this.later(when, () => { element.pause(); node.disconnect(); element.removeAttribute('src'); element.load(); /* let the decoder go */ }); v.element = null; } } // A WAV voice from its frame at `when`. startBuffer(v, when) { const source = new AudioBufferSourceNode(this.ctx, {buffer: v.buffer, playbackRate: v.rate / v.buffer.sampleRate}); source.connect(v.input); source.start(when, v.frame / v.buffer.sampleRate); source.onended = () => { if (v.source === source) v.source = null; }; v.source = source, v.started = when; } command(c, bytes) { const ctx = this.ctx, now = ctx.currentTime; let when = c.at / 1e6 + this.offset; if (this.offset === null || when < now - STALL || when > now + LATENCY + STALL) { this.offset = now + LATENCY - c.at / 1e6; when = now + LATENCY; } when = Math.max(when, now); if (bytes && !this.files.has(c.key)) this.files.set(c.key, c.format === AUDIO_WAV ? decodeWav(ctx, bytes) : URL.createObjectURL(new Blob([bytes], {type: 'audio/mpeg'}))); const v = this.voice(c.voice); if (c.op === AUDIO_STOP || c.op === AUDIO_PLAY) this.stop(v, when); if (c.op === AUDIO_STOP) return; // Each side at full gain up to the centre. v.left.gain.setValueAtTime(c.volume * Math.min(1, 1 - c.pan), when); v.right.gain.setValueAtTime(c.volume * Math.min(1, 1 + c.pan), when); if (c.op === AUDIO_PLAY) { const file = this.files.get(c.key); if (!file) return; v.paused = false, v.frame = c.frame, v.rate = c.rate; if (c.format === AUDIO_WAV) { v.buffer = file; this.startBuffer(v, when); } else { const element = new Audio(file), node = ctx.createMediaElementSource(element); node.connect(v.input); v.element = element, v.node = node, v.buffer = null; element.addEventListener('loadedmetadata', () => { element.currentTime = c.frame / c.rate; }, {once: true}); /* A media element takes its time to start: it starts where it should be by then. */ element.addEventListener('playing', () => { const late = ctx.currentTime - when; if (late > STALL) element.currentTime += late; }, {once: true}); this.later(when, () => { if (v.element === element) element.play().catch(() => {}); }); } return; } // AUDIO_SET: rate and pause. if (v.buffer && (v.source || v.paused)) { if (v.source) v.frame = this.frameAt(v, when), v.started = when; if (c.paused && v.source) this.stop(v, when); v.rate = c.rate || v.rate; if (v.source) v.source.playbackRate.setValueAtTime(v.rate / v.buffer.sampleRate, when); else if (!c.paused && v.paused) this.startBuffer(v, when); } else if (v.element) { const element = v.element; this.later(when, () => { c.paused ? element.pause() : element.play().catch(() => {}); }); } v.paused = c.paused; } } return {audioKey}; })(); modules["webui/webplayer/installer.mjs"] = (() => { // Read-only lazy filesystem backed by the user's local GOG installer. async function sha256(bytes) { return Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', bytes)), b => b.toString(16).padStart(2, '0')).join(''); } async function openInstaller(file, index, progress = () => {}) { if (index.version !== 1) throw Error('Unsupported installer index'); if (file.size !== index.installer.size) throw Error(`This is not the supported installer. Select the GOG 2.50.1516 v2 (30536) .exe file. Expected ${index.installer.size.toLocaleString()} bytes; selected ${file.size.toLocaleString()} bytes.`); // Small identity probes avoid reading all 632 MiB before starting. // Reconstructed game files are also checked via SHA-256. const total = Object.values(index.files).reduce((sum, entry) => sum + entry.size, 0); const loaded = new Map(); let completed = 0; // Assets are lazy: count bytes across files without resetting at each file/hash. const report = (path, position) => { const previous = loaded.get(path) ?? 0; if (position > previous) { completed += position - previous; loaded.set(path, position); } progress(path, completed, total); }; report(index.installer.name, 0); for (const [offset, size, hash] of index.installer.samples) { const fileHash = await sha256(await file.slice(offset, offset + size).arrayBuffer()); if (fileHash !== hash) throw Error("The installer did not pass its identity check. Select GOG version 2.50.1516 v2 (30536), or download it again if the file is incomplete or damaged."); } const manifest = Object.fromEntries(Object.entries(index.files).map(([key, entry]) => [key, {path: entry.path, size: entry.size}])); async function source(path) { const entry = index.files[path.toLowerCase()]; if (!entry) throw Error(`File is not in the installer index: ${path}`); const result = new Uint8Array(entry.size); let position = 0; report(entry.path, 0); for (const [offset, packedSize, size] of entry.chunks) { const stream = file.slice(offset, offset + packedSize).stream().pipeThrough(new DecompressionStream('deflate')); const reader = stream.getReader(); let written = 0; try { for (;;) { const {value, done} = await reader.read(); if (done) break; if (written + value.length > size || position + value.length > result.length) throw Error(`Invalid decompressed size: ${path}`); result.set(value, position); position += value.length; written += value.length; report(entry.path, position); } } finally { await reader.cancel(); reader.releaseLock(); } if (written !== size) throw Error(`Truncated installer chunk: ${path}`); } if (position !== result.length || await sha256(result) !== entry.sha256) throw Error(`Installer file checksum failed: ${path}`); return result; } return {manifest, source}; } return {openInstaller}; })(); modules["webui/webplayer/config.mjs"] = (() => { // Browser defaults. Persisted changes made by the game override these. const config = { 'config/gamesettings.cfg': `[GAMESETTINGS] { AILevel = 0 BorderScroll = 0 ChatMessageFilter = 1 ExtendedTooltip = 1 Filtering = 0 Fullscreen = 1 LandscapeHardware = 0 MP3UserFolder = 0 MsgHistory = 100 MsgLevelMask = -83886081 MusicEnabled = 1 MusicVolume = 100 ObjectHardware = 0 PlayerName = "Player" PopupAllMsgs = 0 Screenmode = 3 ScrollStepValue = 10 SoundFXEnabled = 1 SoundFXVolume = 100 TextureQuality = 1 Tutorial = 0 VoiceChatEnabled = 0 VoiceChatMicro = 100 VoiceChatVolume = 100 WebHelpMode = 0 WindowHeight = 600 WindowWidth = 800 } `, 'config/video.cfg': `[ADVGAMESETTINGS] { ForceBlit = 0 PureSoftwareMode = 0 ShowVideos = 0 } `, }; return {config}; })(); modules["webui/webplayer/storage.mjs"] = (() => { // Only changes are persisted; installer assets remain lazy and read-only. // File replacement is atomic and completes before the guest's close returns. async function openDatabase() { let db; try { db = await new Promise((resolve, reject) => { const request = indexedDB.open("settlers4-webplayer", 1); request.onupgradeneeded = () => { request.result.createObjectStore("files"); request.result.createObjectStore("dirs"); }; request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error); }); } catch (error) { throw Error(`Cannot open saved-game storage: ${error.message}`); } db.onversionchange = () => db.close(); return db; } const transaction = (db, stores, mode, action) => new Promise((resolve, reject) => { let tx, result; try { tx = db.transaction(stores, mode); result = action(tx); } catch (error) { reject(error); return; } tx.oncomplete = () => resolve(result); tx.onabort = () => reject(tx.error ?? Error("Storage transaction aborted")); }); async function openStorage() { const db = await openDatabase(); try { const requests = await transaction(db, ["files", "dirs"], "readonly", tx => [ tx.objectStore("files").getAllKeys(), tx.objectStore("files").getAll(), tx.objectStore("dirs").getAllKeys(), ]); const [keys, values, dirs] = requests.map(request => request.result); const put = async (store, key, value) => { try { await transaction(db, [store], "readwrite", tx => tx.objectStore(store).put(value, key)); } catch (error) { throw Error(`Could not persist "${key}". Check available browser storage. ${error.message}`); } }; return { files: new Map(keys.map((key, i) => [key, values[i]])), dirs, write: (key, bytes) => put("files", key, bytes), mkdir: key => put("dirs", key, true), close: () => db.close(), }; } catch (error) { db.close(); throw Error(`Cannot read saved-game storage: ${error.message}`); } } async function storedFileUsage() { const db = await openDatabase(); try { const usage = {entries: 0, bytes: 0}; const dirs = await transaction(db, ["files", "dirs"], "readonly", tx => { const cursor = tx.objectStore("files").openCursor(); cursor.onsuccess = () => { const entry = cursor.result; if (!entry) return; usage.entries++; usage.bytes += entry.value?.byteLength ?? 0; entry.continue(); }; return tx.objectStore("dirs").count(); }); usage.entries += dirs.result; return usage; } finally { db.close(); } } async function clearStoredFiles() { const db = await openDatabase(); try { await transaction(db, ["files", "dirs"], "readwrite", tx => { tx.objectStore("files").clear(); tx.objectStore("dirs").clear(); }); } finally { db.close(); } } return {openStorage}; })(); modules["webui/webplayer/worker.mjs"] = (() => { const {Exit, Machine} = modules["webui/platform.mjs"]; const {LiveInput} = modules["webui/input.mjs"]; const {Presenter, rgb565Source} = modules["webui/presenter.mjs"]; const {audioKey} = modules["webui/audio.mjs"]; const {openInstaller} = modules["webui/webplayer/installer.mjs"]; const {config} = modules["webui/webplayer/config.mjs"]; const {openStorage} = modules["webui/webplayer/storage.mjs"]; const patches = "compat sound resize fixup_workshop"; const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); let machine, input, engine, presenter, preparation, started = false; function reportError(error) { console.error(error, machine?.recent); postMessage({type: "error", text: error.message, details: error.cause?.message ?? ""}); } async function prepare({cpu, canvas}) { // Compile without instantiating the engine or allocating game memory. try { engine = await WebAssembly.compile(cpu); } catch (cause) { throw Object.assign(new Error("Cannot compile WebAssembly engine: SIMD or bulk-memory support missing. This browser or device are likely too old."), {cause}); } if (!globalThis.crypto?.subtle) throw Error("Crypto API not supported by this browser!"); if (!globalThis.DecompressionStream) throw Error("Decompression Streams not supported by this browser!"); new DecompressionStream("deflate"); presenter = new Presenter(canvas, reportError); } onmessage = ({data}) => { if (data.type === "input") { if (input && ["move", "moveBy", "button", "wheel", "key", "resize"].includes(data.method)) { input[data.method](...data.args); } } else if (data.type === "prepare" && !preparation) { preparation = prepare(data); preparation.then(() => postMessage({type: "prepared"}), reportError); } else if (data.type === "start" && !started) { started = true; play(data).catch(reportError); } }; async function play({file, index, guest}) { if (!preparation) throw Error("The game worker has not been prepared."); await preparation; let visible = false; const progress = (text, completed, total) => { if (visible) return; postMessage({type: "progress", text, completed, total}); }; const installer = await openInstaller(file, index, progress); const overrides = new Map(Object.entries(config).map(([path, text]) => [path, new TextEncoder().encode(text)])); const manifest = {...installer.manifest}; for (const [path, bytes] of overrides) manifest[path] = {path, size: bytes.length}; const source = path => overrides.get(path.toLowerCase()) ?? installer.source(path); // LiveInput shares the existing clock and input queue, without recording. input = new LiveInput(patches, {clockAt() {}, eventAt() {}}); const audioSent = new Set(), cursors = new Set(); let width = 0, height = 0, cursorQueue = Promise.resolve(); const output = { present(surface) { presenter.present(machine.mem, surface); // The game presents black frames before its first visible screen. // Keep the loading UI until content exists, without a GPU readback. if (!visible && rgb565Source(machine.mem, surface, presenter.scratch).some(pixel => pixel !== 0)) { visible = true; postMessage({type: "visible"}); } if (surface.w !== width || surface.h !== height) { width = surface.w; height = surface.h; input.display(width, height); postMessage({type: 'display', w: width, h: height}); } }, wait: us => input.aheadMs(us) > 1 ? sleep(input.aheadMs(us)) : undefined, pointer: (x, y) => postMessage({type: 'pointer', x, y}), cursor(kind, argb, w, h, hotX, hotY) { let rgba; if (kind === 2 && !cursors.has(argb)) { cursors.add(argb); rgba = new Uint8ClampedArray(w * h * 4); for (let i = 0; i < w * h; i++) { const v = machine.dv.getUint32(argb + i * 4, true); rgba.set([v >> 16 & 255, v >> 8 & 255, v & 255, v >>> 24], i * 4); } } cursorQueue = cursorQueue.then(async () => { let image = null; if (rgba) { const cursorCanvas = new OffscreenCanvas(w, h); cursorCanvas.getContext('2d').putImageData(new ImageData(rgba, w, h), 0, 0); image = new FileReaderSync().readAsDataURL(await cursorCanvas.convertToBlob()); } postMessage({type: 'cursor', kind, id: argb, image, hotX, hotY}); }).catch(error => postMessage({type: 'error', text: error.message})); }, audio(command) { let bytes = null; if (command.data) { command.key = audioKey(command.data); if (!audioSent.has(command.key)) { audioSent.add(command.key); bytes = command.data.slice(); } } postMessage({type: 'audio', command: {...command, data: null}, bytes}, bytes ? [bytes.buffer] : []); }, }; const storage = await openStorage(); machine = new Machine({manifest, source, input, output, patches, storage, log: text => console.debug(text)}); machine.dirs.add("save"); try { try { await machine.init(engine, guest); } catch (error) { if (error instanceof RangeError || /memory|allocat/i.test(error.message)) { throw Object.assign(new Error("The browser could not allocate the game's memory (about 2.1 GiB). Close other tabs/apps and retry, or use a device with more memory."), {cause: error}); } throw error; } postMessage({type: "ready"}); await machine.run({yieldMs: 15}); } catch (error) { if (!(error instanceof Exit) || error.code !== 0) throw error; } finally { storage.close(); } postMessage({type: "exit"}); } return {}; })(); })();

The Settlers IV web player