pomium 1.0.0

package/assets/mobile/shockwave_mobile.json

@@ -0,0 +1,151 @@
+{"frames": {
+
+"shockwave_00000":
+{
+	"frame": {"x":0,"y":0,"w":3,"h":3},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":0,"y":0,"w":3,"h":3},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00001":
+{
+	"frame": {"x":6,"y":0,"w":69,"h":15},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":85,"y":59,"w":69,"h":15},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00002":
+{
+	"frame": {"x":75,"y":0,"w":163,"h":49},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":38,"y":39,"w":163,"h":49},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00003":
+{
+	"frame": {"x":0,"y":109,"w":181,"h":61},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":25,"y":35,"w":181,"h":61},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00004":
+{
+	"frame": {"x":238,"y":0,"w":175,"h":50},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":38,"y":40,"w":175,"h":50},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00005":
+{
+	"frame": {"x":0,"y":50,"w":191,"h":56},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":31,"y":37,"w":191,"h":56},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00006":
+{
+	"frame": {"x":191,"y":50,"w":198,"h":59},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":28,"y":36,"w":198,"h":59},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00007":
+{
+	"frame": {"x":181,"y":109,"w":204,"h":62},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":26,"y":34,"w":204,"h":62},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00008":
+{
+	"frame": {"x":0,"y":171,"w":209,"h":64},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":24,"y":33,"w":209,"h":64},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00009":
+{
+	"frame": {"x":209,"y":171,"w":215,"h":65},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":22,"y":32,"w":215,"h":65},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00010":
+{
+	"frame": {"x":0,"y":236,"w":220,"h":67},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":19,"y":31,"w":220,"h":67},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00011":
+{
+	"frame": {"x":220,"y":236,"w":220,"h":68},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":16,"y":31,"w":220,"h":68},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00012":
+{
+	"frame": {"x":0,"y":373,"w":221,"h":71},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":19,"y":29,"w":221,"h":71},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00013":
+{
+	"frame": {"x":0,"y":304,"w":226,"h":69},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":17,"y":31,"w":226,"h":69},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00014":
+{
+	"frame": {"x":221,"y":373,"w":232,"h":72},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":14,"y":28,"w":232,"h":72},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00015":
+{
+	"frame": {"x":226,"y":304,"w":161,"h":69},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":88,"y":30,"w":161,"h":69},
+	"sourceSize": {"w":256,"h":128}
+},
+"shockwave_00016":
+{
+	"frame": {"x":3,"y":0,"w":3,"h":3},
+	"rotated": false,
+	"trimmed": true,
+	"spriteSourceSize": {"x":0,"y":0,"w":3,"h":3},
+	"sourceSize": {"w":256,"h":128}
+}},
+"animations": {
+	"shockwave": ["shockwave_00000","shockwave_00001","shockwave_00002","shockwave_00003","shockwave_00004","shockwave_00005","shockwave_00006","shockwave_00007","shockwave_00008","shockwave_00009","shockwave_00010","shockwave_00011","shockwave_00012","shockwave_00013","shockwave_00014","shockwave_00015","shockwave_00016"]
+},
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.1",
+	"image": "shockwave_mobile.webp",
+	"format": "RGBA8888",
+	"size": {"w":453,"h":445},
+	"scale": "0.5",
+	"smartupdate": "$TexturePacker:SmartUpdate:38ba804774b36de93151b5e6b16553ed:de098fb154ddaaf6411fc2cbaf8eb78d:3fe8173d39f5b7146a0303f627b097c0$"
+}
+}

package/bin/pomium.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+'use strict';
+
+// npm's own bin shim always runs this under plain Node, never under Electron,
+// so `electron` resolves to the path of its packaged binary rather than the
+// Electron API. Spawning it against the package root (one level up from this
+// file) works from any install location, since main.js and everything it
+// loads resolve their own paths from __dirname rather than the caller's cwd.
+
+const { spawn } = require('node:child_process');
+const path = require('node:path');
+
+const electronPath = require('electron');
+const appRoot = path.join(__dirname, '..');
+
+const child = spawn(electronPath, [appRoot], { stdio: 'inherit' });
+
+child.on('close', (code) => {
+  process.exitCode = code === null ? 1 : code;
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "pomium",
+  "version": "1.0.0",
+  "description": "A Chromium-based desktop browser where every click bombs the screen with a Pomeranian.",
+  "main": "src/main.js",
+  "author": "Diogo Nicolau",
+  "bin": {
+    "pomium": "bin/pomium.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "assets"
+  ],
+  "engines": {
+    "node": ">=21"
+  },
+  "scripts": {
+    "start": "electron .",
+    "test": "node --test \"test/**/*.test.js\"",
+    "dist": "electron-builder --publish never",
+    "dist:mac": "electron-builder --mac --publish never",
+    "dist:win": "electron-builder --win --publish never"
+  },
+  "optionalDependencies": {
+    "electron": "^44.2.0"
+  },
+  "devDependencies": {
+    "electron-builder": "^26.15.3"
+  },
+  "license": "MIT"
+}

package/src/main.js

@@ -0,0 +1,114 @@
+const { app, BrowserWindow, ipcMain } = require('electron');
+const path = require('path');
+
+let mainWindow = null;
+
+// The window physically jolts on every spawn, so its resting position has to
+// be remembered and restored. It is re-read whenever the shake has settled,
+// otherwise moving the window by hand between shakes would teleport it back
+// to wherever it sat during the last one.
+//
+// Only x/y are tracked: pinning width/height would revert a resize the user
+// starts mid-shake, and a held drag re-arms the shake every other update, so
+// the window would be unresizable for as long as the pointer is down.
+let restingBounds = null;
+
+// Where to put the window back once it leaves maximise or fullscreen.
+// Entering either snapshots the window's *current* frame as the one to
+// restore to later, and if a shake had it displaced at that instant the
+// snapshot is the displaced spot — every such transition would drift the
+// window by another jolt. Handing the true resting position back on the way
+// out corrects that regardless of what the OS captured.
+let preTransitionBounds = null;
+
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 1280,
+    height: 800,
+    title: 'Pomium',
+    backgroundColor: '#1e1f24',
+    webPreferences: {
+      // Trusted host chrome (our own UI, not remote content) gets Node so
+      // renderer.js can manage <webview> tabs directly.
+      nodeIntegration: true,
+      contextIsolation: false,
+      webviewTag: true,
+    },
+  });
+
+  win.loadFile(path.join(__dirname, 'renderer', 'index.html'));
+  mainWindow = win;
+
+  // These fire on every route into maximise/fullscreen — the window buttons,
+  // F11, double-clicking the draggable tab strip — which polling isMaximized()
+  // from the shake handler cannot cover, since by then the OS has already
+  // snapshotted the displaced frame.
+  const enterTransition = () => {
+    if (!restingBounds) return;
+    preTransitionBounds = restingBounds;
+    restingBounds = null;
+  };
+  const leaveTransition = () => {
+    if (!preTransitionBounds) return;
+    const bounds = preTransitionBounds;
+    preTransitionBounds = null;
+    if (win.isDestroyed()) return;
+    win.setBounds({ x: bounds.x, y: bounds.y });
+  };
+  win.on('maximize', enterTransition);
+  win.on('enter-full-screen', enterTransition);
+  win.on('unmaximize', leaveTransition);
+  win.on('leave-full-screen', leaveTransition);
+
+  win.on('closed', () => {
+    if (mainWindow === win) {
+      mainWindow = null;
+      restingBounds = null;
+      preTransitionBounds = null;
+    }
+  });
+}
+
+// Assumes a single window: the handler always targets mainWindow rather than
+// the sender. That holds today because `activate` only ever creates one
+// window when none exist. If a "new window" feature is added, this would
+// need to resolve the sender via BrowserWindow.fromWebContents instead.
+ipcMain.on('pom-shake', (_event, payload = {}) => {
+  const { x = 0, y = 0, settled = false } = payload;
+  const win = mainWindow;
+  if (!win || win.isDestroyed()) return;
+  // Moot while maximised or fullscreen. The transition handlers in
+  // createWindow already took the resting position off restingBounds, so
+  // there is no stale base left here to teleport the window with later.
+  if (win.isFullScreen() || win.isMaximized()) return;
+
+  if (settled) {
+    if (restingBounds) {
+      win.setBounds({ x: restingBounds.x, y: restingBounds.y });
+      restingBounds = null;
+    }
+    return;
+  }
+
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return;
+
+  if (!restingBounds) {
+    const { x: restX, y: restY } = win.getBounds();
+    restingBounds = { x: restX, y: restY };
+  }
+  win.setBounds({
+    x: Math.round(restingBounds.x + x),
+    y: Math.round(restingBounds.y + y),
+  });
+});
+
+app.whenReady().then(() => {
+  createWindow();
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});

package/src/pom/atlas-loader.js

@@ -0,0 +1,21 @@
+import { parseAtlas } from './atlas.js';
+
+// The renderer runs with nodeIntegration, so atlases are read straight off
+// disk. The extension had to fetch them to dodge page CSP; that constraint
+// does not exist inside our own chrome.
+export function createAtlasLoader({ tier, assetsDir }) {
+  return async function load(key) {
+    const { readFile } = require('node:fs/promises');
+    const path = require('node:path');
+
+    const base = path.join(assetsDir, tier, `${key}_${tier}`);
+    const json = JSON.parse(await readFile(`${base}.json`, 'utf8'));
+    const parsed = parseAtlas(json);
+
+    const bytes = await readFile(path.join(assetsDir, tier, parsed.image));
+    const blob = new Blob([bytes], { type: 'image/webp' });
+    const image = await createImageBitmap(blob);
+
+    return { image, frames: parsed.frames };
+  };
+}

package/src/pom/atlas.js

@@ -0,0 +1,83 @@
+import { ATLAS_CACHE_LIMIT } from './config.js';
+
+// TexturePacker sheets here are never rotated, so a frame is a plain sub-rect
+// plus the trim offset inside a constant source box.
+export function parseAtlas(json) {
+  const animationNames = Object.keys(json.animations);
+  const order = json.animations[animationNames[0]];
+  const frames = order.map((key) => {
+    const entry = json.frames[key];
+    return {
+      sx: entry.frame.x,
+      sy: entry.frame.y,
+      sw: entry.frame.w,
+      sh: entry.frame.h,
+      ox: entry.spriteSourceSize.x,
+      oy: entry.spriteSourceSize.y,
+      sourceW: entry.sourceSize.w,
+      sourceH: entry.sourceSize.h,
+    };
+  });
+  return { image: json.meta.image, frames };
+}
+
+export function createAtlasCache({ limit = ATLAS_CACHE_LIMIT, load }) {
+  const entries = new Map();   // key -> atlas, insertion order is LRU order
+  const pending = new Map();   // key -> promise
+  let cleared = false;
+
+  function release(atlas) {
+    if (atlas && atlas.image && typeof atlas.image.close === 'function') {
+      atlas.image.close();
+    }
+  }
+
+  return {
+    async get(key) {
+      if (entries.has(key)) {
+        const atlas = entries.get(key);
+        entries.delete(key);
+        entries.set(key, atlas);
+        return atlas;
+      }
+      if (pending.has(key)) return pending.get(key);
+
+      const promise = load(key)
+        .then((atlas) => {
+          pending.delete(key);
+          // clear() (teardown mid-load) may have already run while this
+          // load was outstanding. Storing into a cleared cache would
+          // resurrect a bitmap nobody will ever release; close it instead
+          // of caching it.
+          if (cleared) {
+            release(atlas);
+            return atlas;
+          }
+          entries.set(key, atlas);
+          while (entries.size > limit) {
+            const oldest = entries.keys().next().value;
+            release(entries.get(oldest));
+            entries.delete(oldest);
+          }
+          return atlas;
+        })
+        .catch((error) => {
+          pending.delete(key);
+          throw error;
+        });
+      pending.set(key, promise);
+      return promise;
+    },
+
+    peek(key) {
+      return entries.get(key);
+    },
+
+    clear() {
+      cleared = true;
+      for (const atlas of entries.values()) release(atlas);
+      entries.clear();
+      pending.clear();
+    },
+  };
+}

package/src/pom/config.js

@@ -0,0 +1,41 @@
+// Motion constants lifted verbatim from screen.toys/poms/app.js.
+export const MOVE_ANGLE_DEG = 50;
+export const SPREAD_STRENGTH = -40;
+export const BASE_SPEED = 4;
+export const MAX_SPEED_FACTOR = 3.0;
+export const SPAWN_RANDOMNESS = 1.0;
+export const SHOCKWAVE_SPEED_MULT = 0.3;
+
+export const SHAKE_DURATION = 8;
+export const SHAKE_MAX_X = 2;
+export const SHAKE_MAX_Y = 10;
+export const SHAKE_MAX_ROT_DEG = 0.5;
+
+export const SPAWN_LINE_START = { x: 0.05, y: 0.2 };
+export const SPAWN_LINE_END = { x: 0.7, y: 0.0 };
+
+export const MIN_SCALE = 0.5;
+export const MAX_SCALE = 2.0;
+export const CULL_MARGIN = 800;
+
+export const POM_ANCHOR = { x: 0.5, y: 0.7 };
+export const SHOCKWAVE_ANCHOR = { x: 0.45, y: 0.25 };
+
+export const CHARACTER_COUNT = 10;
+export const MOBILE_BREAKPOINT = 800;
+
+// Introduced here; see the plan's Global Constraints for why.
+export const UPDATES_PER_SECOND = 30;
+export const DRAG_SPAWN_UPDATES = 2;
+// A held drag naturally ceils at 56 live sprites (48 poms + 8 shockwaves);
+// MAX_ACTIVE is a safety ceiling above that, not an active fill-rate
+// control. See the plan's Global Constraints.
+export const MAX_ACTIVE = 60;
+export const IDLE_TEARDOWN_MS = 30000;
+export const ROSTER_SIZE = 3;
+// Must stay ROSTER_SIZE + 1: one atlas slot per live roster character plus
+// the shared shockwave atlas. main.js keeps exactly that many warm at all
+// times; raising ROSTER_SIZE without raising this would let the LRU cache
+// evict a still-on-screen sprite's atlas mid-flight. Derived rather than a
+// separate literal so the two can't drift — see test/config.test.js.
+export const ATLAS_CACHE_LIMIT = ROSTER_SIZE + 1;

package/src/pom/coords.js

@@ -0,0 +1,10 @@
+// A <webview> is a separate frame, so a click inside a page reports
+// coordinates relative to that pane. The overlay canvas spans the whole
+// window, so those have to be shifted by where the pane sits.
+//
+// Only the horizontal offset is needed: poms spawn along a line whose
+// position is parameterised by x alone (see engine.spawnPair), so a y
+// translation would have nothing to feed.
+export function windowX(pageX, paneRect) {
+  return pageX + (paneRect ? paneRect.left : 0);
+}

package/src/pom/engine.js

@@ -0,0 +1,103 @@
+import {
+  BASE_SPEED, SHOCKWAVE_SPEED_MULT, DRAG_SPAWN_UPDATES,
+  SHAKE_DURATION, SHAKE_MAX_X, SHAKE_MAX_Y, SHAKE_MAX_ROT_DEG,
+  MAX_ACTIVE, CHARACTER_COUNT, ROSTER_SIZE,
+} from './config.js';
+import { jitterT, spawnPoint, velocity } from './geometry.js';
+import { createSprite, integrate, advanceFrame, SpriteList } from './sprites.js';
+
+function characterKey(index) {
+  return `char_${String(index).padStart(2, '0')}`;
+}
+
+// Only ROSTER_SIZE characters are ever spawned on a page, so the atlas cache
+// never thrashes. See the plan's Global Constraints.
+export function createRoster(random = Math.random, size = ROSTER_SIZE, total = CHARACTER_COUNT) {
+  const pool = Array.from({ length: total }, (_, i) => characterKey(i + 1));
+  for (let i = pool.length - 1; i > 0; i--) {
+    const j = Math.floor(random() * (i + 1));
+    [pool[i], pool[j]] = [pool[j], pool[i]];
+  }
+  return pool.slice(0, size);
+}
+
+export function defaultPickCharacter(roster, random = Math.random) {
+  const index = Math.min(roster.length - 1, Math.floor(random() * roster.length));
+  return roster[index];
+}
+
+export function createEngine({
+  width, height,
+  random = Math.random,
+  roster = createRoster(random),
+  pickCharacter = (rng) => defaultPickCharacter(roster, rng),
+  frameCountFor,
+}) {
+  const list = new SpriteList(MAX_ACTIVE);
+  const camera = { x: 0, y: 0, rotation: 0 };
+
+  let shakeTimer = 0;
+  let held = false;
+  let pointerX = 0;
+  let updatesSinceSpawn = 0;
+
+  function spawnPair(t) {
+    const finalT = jitterT(t, random);
+    const { x, y } = spawnPoint(finalT, width, height);
+    const characterKey = pickCharacter(random);
+
+    for (const isShockwave of [true, false]) {
+      const key = isShockwave ? 'shockwave' : characterKey;
+      const speed = isShockwave ? BASE_SPEED * SHOCKWAVE_SPEED_MULT : BASE_SPEED;
+      const { vx, vy } = velocity(finalT, speed);
+      list.add(createSprite({
+        key, isShockwave, x, y, vx, vy,
+        frameCount: frameCountFor(key),
+      }));
+    }
+
+    shakeTimer = SHAKE_DURATION;
+    updatesSinceSpawn = 0;
+  }
+
+  function applyShake() {
+    if (shakeTimer <= 0) {
+      camera.x = 0; camera.y = 0; camera.rotation = 0;
+      return;
+    }
+    const intensity = shakeTimer / SHAKE_DURATION;
+    camera.x = (random() * 2 - 1) * SHAKE_MAX_X * intensity;
+    camera.y = (random() * 2 - 1) * SHAKE_MAX_Y * intensity;
+    camera.rotation =
+      (random() * 2 - 1) * ((SHAKE_MAX_ROT_DEG * Math.PI) / 180) * intensity;
+    shakeTimer -= 1;
+  }
+
+  function update() {
+    updatesSinceSpawn += 1;
+    if (held && updatesSinceSpawn >= DRAG_SPAWN_UPDATES) {
+      spawnPair(pointerX / width);
+    }
+
+    applyShake();
+
+    for (const sprite of list.items) {
+      integrate(sprite, height);
+      advanceFrame(sprite);
+    }
+    list.prune(width, height);
+    list.items.sort((a, b) => a.zIndex - b.zIndex);
+  }
+
+  return {
+    spawnPair,
+    update,
+    resize(nextWidth, nextHeight) { width = nextWidth; height = nextHeight; },
+    pointerDown(x) { held = true; pointerX = x; spawnPair(x / width); },
+    pointerMove(x) { pointerX = x; },
+    pointerUp() { held = false; },
+    get sprites() { return list.items; },
+    get camera() { return camera; },
+    get isIdle() { return list.items.length === 0; },
+  };
+}

package/src/pom/geometry.js

@@ -0,0 +1,43 @@
+import {
+  MOVE_ANGLE_DEG, SPREAD_STRENGTH, SPAWN_RANDOMNESS,
+  SPAWN_LINE_START, SPAWN_LINE_END,
+  MIN_SCALE, MAX_SCALE, MAX_SPEED_FACTOR,
+} from './config.js';
+
+export function jitterT(t, random = Math.random) {
+  const offset = (random() - 0.5) * (1 / 9) * SPAWN_RANDOMNESS;
+  return Math.max(0, Math.min(1, t + offset));
+}
+
+export function spawnPoint(t, width, height) {
+  const startX = width * SPAWN_LINE_START.x;
+  const startY = height * SPAWN_LINE_START.y;
+  const endX = width * SPAWN_LINE_END.x;
+  const endY = height * SPAWN_LINE_END.y;
+  return {
+    x: startX + t * (endX - startX),
+    y: startY + t * (endY - startY),
+  };
+}
+
+export function headingRadians(t) {
+  const degrees = MOVE_ANGLE_DEG + (t - 0.5) * SPREAD_STRENGTH;
+  return (degrees * Math.PI) / 180;
+}
+
+export function velocity(t, speed) {
+  const radians = headingRadians(t);
+  return { vx: Math.cos(radians) * speed, vy: Math.sin(radians) * speed };
+}
+
+export function depthFactor(y, height) {
+  return Math.max(0, y / height);
+}
+
+export function scaleForDepth(d) {
+  return MIN_SCALE + (MAX_SCALE - MIN_SCALE) * d;
+}
+
+export function speedMultForDepth(d) {
+  return 1 + (MAX_SPEED_FACTOR - 1) * d;
+}