nova64 0.2.6 → 0.2.7

package/dist/runtime/editor.js

@@ -0,0 +1,233 @@
+// runtime/editor.js
+// Simple in-browser sprite editor for the loaded sprite sheet.
+
+export class SpriteEditor {
+  constructor(spriteApi) {
+    this.spriteApi = spriteApi;
+    this.opened = false;
+    this.scale = 16; // canvas zoom
+    this.brush = { r: 255, g: 255, b: 255, a: 255 };
+    this._buildUI();
+  }
+
+  _buildUI() {
+    const wrap = document.createElement('div');
+    wrap.style.position = 'fixed';
+    wrap.style.inset = '0';
+    wrap.style.display = 'none';
+    wrap.style.background = 'rgba(0,0,0,0.8)';
+    wrap.style.zIndex = '9999';
+    wrap.style.placeItems = 'center';
+    wrap.style.gridTemplateRows = 'auto auto';
+    wrap.style.padding = '16px';
+
+    const panel = document.createElement('div');
+    panel.style.background = '#151822';
+    panel.style.border = '1px solid #1f2433';
+    panel.style.borderRadius = '12px';
+    panel.style.padding = '12px';
+    panel.style.display = 'grid';
+    panel.style.gap = '8px';
+    panel.style.color = '#dcdfe4';
+
+    const row = (children = []) => {
+      const r = document.createElement('div');
+      r.style.display = 'flex';
+      r.style.gap = '8px';
+      r.style.alignItems = 'center';
+      children.forEach(c => r.appendChild(c));
+      return r;
+    };
+
+    const title = document.createElement('div');
+    title.textContent = 'Sprite Editor';
+    title.style.fontWeight = '700';
+    const info = document.createElement('div');
+    info.textContent = 'Paint directly on the sprite sheet. Save applies to the running cart.';
+    info.style.fontSize = '12px';
+    info.style.opacity = '0.7';
+
+    const canvas = document.createElement('canvas');
+    canvas.style.background = '#000';
+    canvas.style.borderRadius = '8px';
+    canvas.style.imageRendering = 'pixelated';
+    this.canvas = canvas;
+
+    const color = document.createElement('input');
+    color.type = 'color';
+    color.value = '#ffffff';
+    color.addEventListener('input', () => {
+      const hex = color.value.replace('#', '');
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      this.brush.r = r;
+      this.brush.g = g;
+      this.brush.b = b;
+    });
+    const alpha = document.createElement('input');
+    alpha.type = 'range';
+    alpha.min = '0';
+    alpha.max = '255';
+    alpha.value = '255';
+    alpha.addEventListener('input', () => {
+      this.brush.a = parseInt(alpha.value, 10);
+    });
+
+    const scaleSel = document.createElement('select');
+    [8, 12, 16, 20, 24, 32].forEach(s => {
+      const opt = document.createElement('option');
+      opt.value = String(s);
+      opt.textContent = s + 'x';
+      if (s === this.scale) opt.selected = true;
+      scaleSel.appendChild(opt);
+    });
+    scaleSel.addEventListener('change', () => {
+      this.scale = parseInt(scaleSel.value, 10);
+      this._resizeCanvas();
+      this._redraw();
+    });
+
+    const saveBtn = document.createElement('button');
+    saveBtn.textContent = 'Save to runtime';
+    saveBtn.addEventListener('click', async () => {
+      await this.applyToRuntime();
+    });
+
+    const closeBtn = document.createElement('button');
+    closeBtn.textContent = 'Close';
+    closeBtn.addEventListener('click', () => this.close());
+
+    panel.appendChild(title);
+    panel.appendChild(info);
+    panel.appendChild(
+      row([
+        document.createTextNode('Zoom'),
+        scaleSel,
+        document.createTextNode('Color'),
+        color,
+        document.createTextNode('Alpha'),
+        alpha,
+        saveBtn,
+        closeBtn,
+      ])
+    );
+    panel.appendChild(canvas);
+
+    wrap.appendChild(panel);
+    document.body.appendChild(wrap);
+
+    this.wrap = wrap;
+
+    // interactions
+    let painting = false;
+    const onPaint = e => {
+      if (!painting) return;
+      const rect = canvas.getBoundingClientRect();
+      const x = Math.floor((e.clientX - rect.left) / this.scale);
+      const y = Math.floor((e.clientY - rect.top) / this.scale);
+      this._plot(x, y, this.brush);
+    };
+    canvas.addEventListener('mousedown', e => {
+      painting = true;
+      onPaint(e);
+    });
+    window.addEventListener('mousemove', onPaint);
+    window.addEventListener('mouseup', () => {
+      painting = false;
+    });
+  }
+
+  async open() {
+    const img = this.spriteApi.getSpriteSheetImage?.();
+    if (!img) {
+      alert('Sprite sheet not loaded in this cart.');
+      return;
+    }
+    await this._loadImage(img);
+    this.opened = true;
+    this.wrap.style.display = 'grid';
+  }
+  close() {
+    this.opened = false;
+    this.wrap.style.display = 'none';
+  }
+
+  async _loadImage(img) {
+    // draw image into editor canvas
+    this.img = img;
+    this.sheetW = img.naturalWidth;
+    this.sheetH = img.naturalHeight;
+    this._resizeCanvas();
+    const ctx = this.canvas.getContext('2d');
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(img, 0, 0);
+    this._redraw(); // draw grid
+  }
+
+  _resizeCanvas() {
+    this.canvas.width = this.sheetW * this.scale;
+    this.canvas.height = this.sheetH * this.scale;
+    this.canvas.style.width = this.canvas.width + 'px';
+    this.canvas.style.height = this.canvas.height + 'px';
+  }
+
+  _plot(x, y, { r, g, b, a }) {
+    if (x < 0 || y < 0 || x >= this.sheetW || y >= this.sheetH) return;
+    const ctx = this.canvas.getContext('2d');
+    const imgd = ctx.getImageData(x, y, 1, 1);
+    imgd.data[0] = r;
+    imgd.data[1] = g;
+    imgd.data[2] = b;
+    imgd.data[3] = a;
+    ctx.putImageData(imgd, x, y);
+    // upscale pixel block
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(this.canvas, x, y, 1, 1, x * this.scale, y * this.scale, this.scale, this.scale);
+    // grid overlay redraw for that cell
+  }
+
+  _redraw() {
+    const ctx = this.canvas.getContext('2d');
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(this.img, 0, 0);
+    // draw grid overlay
+    ctx.save();
+    ctx.scale(this.scale, this.scale);
+    ctx.globalAlpha = 0.2;
+    ctx.strokeStyle = '#3a3f55';
+    ctx.lineWidth = 1 / this.scale;
+    for (let x = 0; x <= this.sheetW; x += 8) {
+      ctx.beginPath();
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, this.sheetH);
+      ctx.stroke();
+    }
+    for (let y = 0; y <= this.sheetH; y += 8) {
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(this.sheetW, y);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  async applyToRuntime() {
+    const dataURL = this.canvas.toDataURL('image/png');
+    await this.spriteApi.applySpriteSheetDataURL(dataURL);
+    alert('Sprite sheet applied to runtime.');
+  }
+}
+
+export function editorApi(spriteApi) {
+  const editor = new SpriteEditor(spriteApi);
+  return {
+    exposeTo(target) {
+      Object.assign(target, {
+        openSpriteEditor: () => editor.open(),
+        closeSpriteEditor: () => editor.close(),
+      });
+    },
+    open: () => editor.open(),
+  };
+}

package/dist/runtime/font.js

@@ -0,0 +1,233 @@
+// runtime/font.js
+// 5x7 bitmap font packed as strings for readability. Monospace, ASCII 32..126.
+const FONT_W = 5,
+  FONT_H = 7,
+  FONT_SPACING = 1;
+const GLYPHS = new Map();
+
+// Source: simple 5x7 font, custom packed
+const glyphRows = {
+  A: ['  #  ', ' # # ', '#   #', '#####', '#   #', '#   #', '#   #'],
+  B: ['#### ', '#   #', '#### ', '#   #', '#   #', '#   #', '#### '],
+  C: [' ### ', '#   #', '#    ', '#    ', '#    ', '#   #', ' ### '],
+  D: ['#### ', '#   #', '#   #', '#   #', '#   #', '#   #', '#### '],
+  E: ['#####', '#    ', '###  ', '#    ', '#    ', '#    ', '#####'],
+  F: ['#####', '#    ', '###  ', '#    ', '#    ', '#    ', '#    '],
+  G: [' ### ', '#   #', '#    ', '# ###', '#   #', '#   #', ' ### '],
+  H: ['#   #', '#   #', '#   #', '#####', '#   #', '#   #', '#   #'],
+  I: ['#####', '  #  ', '  #  ', '  #  ', '  #  ', '  #  ', '#####'],
+  J: ['#####', '    #', '    #', '    #', '#   #', '#   #', ' ### '],
+  K: ['#   #', '#  # ', '###  ', '#  # ', '#  # ', '#   #', '#   #'],
+  L: ['#    ', '#    ', '#    ', '#    ', '#    ', '#    ', '#####'],
+  M: ['#   #', '## ##', '# # #', '#   #', '#   #', '#   #', '#   #'],
+  N: ['#   #', '##  #', '# # #', '#  ##', '#   #', '#   #', '#   #'],
+  O: [' ### ', '#   #', '#   #', '#   #', '#   #', '#   #', ' ### '],
+  P: ['#### ', '#   #', '#   #', '#### ', '#    ', '#    ', '#    '],
+  Q: [' ### ', '#   #', '#   #', '#   #', '# # #', '#  # ', ' ## #'],
+  R: ['#### ', '#   #', '#   #', '#### ', '#  # ', '#  # ', '#   #'],
+  S: [' ### ', '#   #', '#    ', ' ### ', '    #', '#   #', ' ### '],
+  T: ['#####', '  #  ', '  #  ', '  #  ', '  #  ', '  #  ', '  #  '],
+  U: ['#   #', '#   #', '#   #', '#   #', '#   #', '#   #', ' ### '],
+  V: ['#   #', '#   #', '#   #', '#   #', '#   #', ' # # ', '  #  '],
+  W: ['#   #', '#   #', '#   #', '# # #', '# # #', '## ##', '#   #'],
+  X: ['#   #', ' # # ', '  #  ', '  #  ', '  #  ', ' # # ', '#   #'],
+  Y: ['#   #', ' # # ', '  #  ', '  #  ', '  #  ', '  #  ', '  #  '],
+  Z: ['#####', '    #', '   # ', '  #  ', ' #   ', '#    ', '#####'],
+  0: [' ### ', '#   #', '#  ##', '# # #', '##  #', '#   #', ' ### '],
+  1: ['  #  ', ' ##  ', '  #  ', '  #  ', '  #  ', '  #  ', '#####'],
+  2: [' ### ', '#   #', '    #', '   # ', '  #  ', ' #   ', '#####'],
+  3: [' ### ', '#   #', '    #', ' ### ', '    #', '#   #', ' ### '],
+  4: ['   # ', '  ## ', ' # # ', '#  # ', '#####', '   # ', '   # '],
+  5: ['#####', '#    ', '#### ', '    #', '    #', '#   #', ' ### '],
+  6: [' ### ', '#    ', '#    ', '#### ', '#   #', '#   #', ' ### '],
+  7: ['#####', '    #', '   # ', '  #  ', '  #  ', '  #  ', '  #  '],
+  8: [' ### ', '#   #', '#   #', ' ### ', '#   #', '#   #', ' ### '],
+  9: [' ### ', '#   #', '#   #', ' ####', '    #', '    #', ' ### '],
+  ' ': ['     ', '     ', '     ', '     ', '     ', '     ', '     '],
+  '!': ['  #  ', '  #  ', '  #  ', '  #  ', '  #  ', '     ', '  #  '],
+  '?': [' ### ', '#   #', '    #', '   # ', '  #  ', '     ', '  #  '],
+  '.': ['     ', '     ', '     ', '     ', '     ', ' ##  ', ' ##  '],
+  ',': ['     ', '     ', '     ', '     ', '     ', ' ##  ', '  #  '],
+  ':': ['     ', ' ##  ', ' ##  ', '     ', ' ##  ', ' ##  ', '     '],
+  '-': ['     ', '     ', '     ', ' ### ', '     ', '     ', '     '],
+  _: ['     ', '     ', '     ', '     ', '     ', '     ', '#####'],
+  '/': ['    #', '   # ', '  #  ', '  #  ', ' #   ', '#    ', '     '],
+  // Lowercase letters
+  a: ['     ', '     ', ' ### ', '    #', ' ####', '#   #', ' ####'],
+  b: ['#    ', '#    ', '#### ', '#   #', '#   #', '#   #', '#### '],
+  c: ['     ', '     ', ' ### ', '#    ', '#    ', '#   #', ' ### '],
+  d: ['    #', '    #', ' ####', '#   #', '#   #', '#   #', ' ####'],
+  e: ['     ', '     ', ' ### ', '#   #', '#####', '#    ', ' ### '],
+  f: ['  ## ', ' #  #', ' #   ', '#### ', ' #   ', ' #   ', ' #   '],
+  g: ['     ', '     ', ' ####', '#   #', '#   #', ' ####', '    #', ' ### '],
+  h: ['#    ', '#    ', '#### ', '#   #', '#   #', '#   #', '#   #'],
+  i: ['  #  ', '     ', '  #  ', '  #  ', '  #  ', '  #  ', '  #  '],
+  j: ['   # ', '     ', '   # ', '   # ', '   # ', '   # ', '#  # ', ' ##  '],
+  k: ['#    ', '#    ', '#  # ', '# #  ', '###  ', '#  # ', '#   #'],
+  l: ['  #  ', '  #  ', '  #  ', '  #  ', '  #  ', '  #  ', '  #  '],
+  m: ['     ', '     ', '## # ', '# # #', '# # #', '# # #', '# # #'],
+  n: ['     ', '     ', '#### ', '#   #', '#   #', '#   #', '#   #'],
+  o: ['     ', '     ', ' ### ', '#   #', '#   #', '#   #', ' ### '],
+  p: ['     ', '     ', '#### ', '#   #', '#   #', '#### ', '#    ', '#    '],
+  q: ['     ', '     ', ' ####', '#   #', '#   #', ' ####', '    #', '    #'],
+  r: ['     ', '     ', '# ## ', '##   ', '#    ', '#    ', '#    '],
+  s: ['     ', '     ', ' ### ', '#    ', ' ### ', '    #', '#### '],
+  t: [' #   ', ' #   ', '#### ', ' #   ', ' #   ', ' #  #', '  ## '],
+  u: ['     ', '     ', '#   #', '#   #', '#   #', '#   #', ' ####'],
+  v: ['     ', '     ', '#   #', '#   #', '#   #', ' # # ', '  #  '],
+  w: ['     ', '     ', '#   #', '# # #', '# # #', '# # #', ' # # '],
+  x: ['     ', '     ', '#   #', ' # # ', '  #  ', ' # # ', '#   #'],
+  y: ['     ', '     ', '#   #', '#   #', '#   #', ' ####', '    #', ' ### '],
+  z: ['     ', '     ', '#####', '   # ', '  #  ', ' #   ', '#####'],
+  // Additional punctuation and symbols
+  '(': ['  #  ', ' #   ', '#    ', '#    ', '#    ', ' #   ', '  #  '],
+  ')': ['  #  ', '   # ', '    #', '    #', '    #', '   # ', '  #  '],
+  '[': ['###  ', '#    ', '#    ', '#    ', '#    ', '#    ', '###  '],
+  ']': ['  ###', '    #', '    #', '    #', '    #', '    #', '  ###'],
+  '{': ['  ## ', ' #   ', ' #   ', '##   ', ' #   ', ' #   ', '  ## '],
+  '}': ['##   ', '   # ', '   # ', '   ##', '   # ', '   # ', '##   '],
+  '<': ['   # ', '  #  ', ' #   ', '#    ', ' #   ', '  #  ', '   # '],
+  '>': ['#    ', ' #   ', '  #  ', '   # ', '  #  ', ' #   ', '#    '],
+  '=': ['     ', '     ', '#####', '     ', '#####', '     ', '     '],
+  '+': ['     ', '  #  ', '  #  ', '#####', '  #  ', '  #  ', '     '],
+  '*': ['     ', '# # #', ' ### ', '  #  ', ' ### ', '# # #', '     '],
+  '&': [' ##  ', '#  # ', ' ##  ', ' ### ', '#  # ', '#  # ', ' ## #'],
+  '%': ['#   #', '   # ', '  #  ', ' #   ', '#    ', '#   #', '     '],
+  $: ['  #  ', ' ####', '# #  ', ' ### ', '  # #', '#### ', '  #  '],
+  '#': [' # # ', ' # # ', '#####', ' # # ', '#####', ' ## #', ' # # '],
+  '@': [' ### ', '#   #', '# # #', '# ###', '#    ', '#   #', ' ### '],
+  '^': ['  #  ', ' # # ', '#   #', '     ', '     ', '     ', '     '],
+  '~': ['     ', ' ##  ', '#  # ', '  ## ', '     ', '     ', '     '],
+  '`': [' #   ', '  #  ', '     ', '     ', '     ', '     ', '     '],
+  "'": ['  #  ', '  #  ', '     ', '     ', '     ', '     ', '     '],
+  '"': [' # # ', ' # # ', '     ', '     ', '     ', '     ', '     '],
+  '|': ['  #  ', '  #  ', '  #  ', '  #  ', '  #  ', '  #  ', '  #  '],
+  '\\': ['#    ', ' #   ', '  #  ', '  #  ', '   # ', '    #', '     '],
+  ';': ['     ', ' ##  ', ' ##  ', '     ', ' ##  ', ' ##  ', '  #  '],
+};
+
+// Add arrow characters (using Unicode arrow code points mapped to ASCII art)
+// These handle both Unicode arrows and ASCII alternatives
+const arrowMappings = [
+  ['←', ['   # ', '  ## ', ' ### ', '#### ', ' ### ', '  ## ', '   # ']], // Left arrow
+  ['→', ['#    ', '##   ', '###  ', '#### ', '###  ', '##   ', '#    ']], // Right arrow
+  ['↑', ['  #  ', ' ### ', '# # #', '  #  ', '  #  ', '  #  ', '  #  ']], // Up arrow
+  ['↓', ['  #  ', '  #  ', '  #  ', '  #  ', '# # #', ' ### ', '  #  ']], // Down arrow
+  ['↔', ['#   #', '##  #', ' ####', '#### ', ' ####', '## ##', '#   #']], // Left-right arrow
+  ['↕', ['  #  ', ' ### ', '# # #', '  #  ', '# # #', ' ### ', '  #  ']], // Up-down arrow
+];
+
+for (const [ch, rows] of arrowMappings) {
+  GLYPHS.set(ch, rows);
+  glyphRows[ch] = rows;
+}
+
+for (const [ch, rows] of Object.entries(glyphRows)) GLYPHS.set(ch, rows);
+
+// Emoji replacement map - replaces common emojis with ASCII equivalents or removes them
+const EMOJI_REPLACEMENTS = {
+  '🎮': '', // game controller
+  '🚀': '', // rocket
+  '🏁': '', // checkered flag
+  '🏛️': '', // classical building
+  '🏰': '', // castle
+  '🔮': '*', // crystal ball
+  '🌃': '', // night cityscape
+  '⚡': '*', // lightning bolt (also used as special char)
+  '✨': '*', // sparkles
+  '✅': '+', // check mark
+  '🔘': 'o', // radio button
+  '🎯': 'o', // target
+  '🛡️': '', // shield
+  '🖱️': '', // computer mouse
+  '🖥️': '', // desktop computer
+  '⚙️': '*', // gear
+  '🔤': '', // ABC input symbols
+};
+
+// Helper function to clean text of unsupported characters
+function cleanText(text) {
+  let result = '';
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    const code = ch.charCodeAt(0);
+
+    // Check for emoji replacement
+    if (Object.prototype.hasOwnProperty.call(EMOJI_REPLACEMENTS, ch)) {
+      result += EMOJI_REPLACEMENTS[ch];
+      continue;
+    }
+
+    // Skip multi-byte characters (emojis) that we don't have in our font
+    // Most emojis are in the range 0x1F000 and above
+    if (code > 0x7f && !GLYPHS.has(ch)) {
+      // Skip this character (or could add a space)
+      continue;
+    }
+
+    result += ch;
+  }
+  return result;
+}
+
+export const BitmapFont = {
+  w: FONT_W,
+  h: FONT_H,
+  spacing: FONT_SPACING,
+  draw(fb, text, x, y, colorBigInt, scale = 1) {
+    // Clean the text first to remove unsupported characters
+    text = cleanText(text);
+
+    const { r, g, b, a } = unpackRGBA64(colorBigInt);
+    const s = Math.max(1, Math.round(scale));
+    let cx = x | 0,
+      cy = y | 0;
+    for (let i = 0; i < text.length; i++) {
+      const ch = text[i];
+      if (ch === '\n') {
+        cy += (FONT_H + FONT_SPACING) * s;
+        cx = x | 0;
+        continue;
+      }
+      const rows = GLYPHS.get(ch) || GLYPHS.get('?');
+      for (let yy = 0; yy < FONT_H; yy++) {
+        const row = rows[yy]; // top-down: row 0 = top of glyph = smallest y on screen
+        for (let xx = 0; xx < FONT_W; xx++) {
+          if (row[xx] !== ' ') {
+            if (s === 1) {
+              fb.pset(cx + xx, cy + yy, r, g, b, a);
+            } else {
+              // Each bitmap pixel becomes an s×s block
+              for (let sy = 0; sy < s; sy++)
+                for (let sx = 0; sx < s; sx++)
+                  fb.pset(cx + xx * s + sx, cy + yy * s + sy, r, g, b, a);
+            }
+          }
+        }
+      }
+      cx += (FONT_W + FONT_SPACING) * s;
+    }
+  },
+};
+
+// Local copy of unpack to avoid circular dep; duplicated from api.js
+function unpackRGBA64(c) {
+  // Handle both BigInt and regular number inputs
+  if (typeof c === 'bigint') {
+    return {
+      r: Number((c >> 48n) & 0xffffn),
+      g: Number((c >> 32n) & 0xffffn),
+      b: Number((c >> 16n) & 0xffffn),
+      a: Number(c & 0xffffn),
+    };
+  } else {
+    // Handle regular number input - convert to BigInt first
+    const bigC = BigInt(c);
+    return {
+      r: Number((bigC >> 48n) & 0xffffn),
+      g: Number((bigC >> 32n) & 0xffffn),
+      b: Number((bigC >> 16n) & 0xffffn),
+      a: Number(bigC & 0xffffn),
+    };
+  }
+}

package/dist/runtime/framebuffer.js

@@ -0,0 +1,28 @@
+// runtime/framebuffer.js
+export class Framebuffer64 {
+  constructor(w, h) {
+    this.width = w;
+    this.height = h;
+    this.pixels = new Uint16Array(w * h * 4); // RGBA16 per pixel
+  }
+
+  fill(r = 0, g = 0, b = 0, a = 65535) {
+    const p = this.pixels;
+    for (let i = 0; i < p.length; i += 4) {
+      p[i] = r;
+      p[i + 1] = g;
+      p[i + 2] = b;
+      p[i + 3] = a;
+    }
+  }
+
+  pset(x, y, r, g, b, a = 65535) {
+    if (x < 0 || y < 0 || x >= this.width || y >= this.height) return;
+    const i = (y * this.width + x) * 4;
+    const p = this.pixels;
+    p[i] = r;
+    p[i + 1] = g;
+    p[i + 2] = b;
+    p[i + 3] = a;
+  }
+}

package/dist/runtime/fullscreen-button.js

@@ -0,0 +1,185 @@
+// Fullscreen button for Nova64
+// Creates a UI button in the lower-right corner to toggle fullscreen mode
+
+export class FullscreenButton {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.button = null;
+    this.isFullscreen = false;
+    this.createButton();
+    this.attachListeners();
+  }
+
+  createButton() {
+    // Create button element
+    this.button = document.createElement('button');
+    this.button.id = 'nova64-fullscreen-btn';
+    this.button.innerHTML = this.getExpandIcon();
+    this.button.title = 'Toggle Fullscreen (ESC to exit)';
+
+    // Style the button
+    Object.assign(this.button.style, {
+      position: 'fixed',
+      bottom: '20px',
+      right: '20px',
+      width: '48px',
+      height: '48px',
+      borderRadius: '8px',
+      border: '2px solid #00ffff',
+      background: 'rgba(21, 24, 34, 0.9)',
+      color: '#00ffff',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '24px',
+      fontWeight: 'bold',
+      zIndex: '9999',
+      boxShadow: '0 0 20px rgba(0, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.5)',
+      transition: 'all 0.3s ease',
+      backdropFilter: 'blur(10px)',
+    });
+
+    // Hover effect
+    this.button.addEventListener('mouseenter', () => {
+      this.button.style.background = 'rgba(0, 255, 255, 0.2)';
+      this.button.style.boxShadow =
+        '0 0 30px rgba(0, 255, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.6)';
+      this.button.style.transform = 'scale(1.1)';
+    });
+
+    this.button.addEventListener('mouseleave', () => {
+      this.button.style.background = 'rgba(21, 24, 34, 0.9)';
+      this.button.style.boxShadow =
+        '0 0 20px rgba(0, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.5)';
+      this.button.style.transform = 'scale(1)';
+    });
+
+    // Add to document
+    document.body.appendChild(this.button);
+  }
+
+  getExpandIcon() {
+    return `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+      </svg>
+    `;
+  }
+
+  getCompressIcon() {
+    return `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
+      </svg>
+    `;
+  }
+
+  attachListeners() {
+    // Click to toggle fullscreen
+    this.button.addEventListener('click', () => {
+      this.toggleFullscreen();
+    });
+
+    // ESC key to exit fullscreen
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape' && this.isFullscreen) {
+        this.exitFullscreen();
+      }
+    });
+
+    // Listen for fullscreen changes (handles F11, ESC, etc.)
+    document.addEventListener('fullscreenchange', () => {
+      this.handleFullscreenChange();
+    });
+    document.addEventListener('webkitfullscreenchange', () => {
+      this.handleFullscreenChange();
+    });
+    document.addEventListener('mozfullscreenchange', () => {
+      this.handleFullscreenChange();
+    });
+    document.addEventListener('MSFullscreenChange', () => {
+      this.handleFullscreenChange();
+    });
+  }
+
+  toggleFullscreen() {
+    if (this.isFullscreen) {
+      this.exitFullscreen();
+    } else {
+      this.enterFullscreen();
+    }
+  }
+
+  enterFullscreen() {
+    const elem = this.canvas;
+
+    if (elem.requestFullscreen) {
+      elem.requestFullscreen();
+    } else if (elem.webkitRequestFullscreen) {
+      // Safari
+      elem.webkitRequestFullscreen();
+    } else if (elem.mozRequestFullScreen) {
+      // Firefox
+      elem.mozRequestFullScreen();
+    } else if (elem.msRequestFullscreen) {
+      // IE11
+      elem.msRequestFullscreen();
+    }
+
+    this.isFullscreen = true;
+    this.updateButton();
+  }
+
+  exitFullscreen() {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) {
+      // Safari
+      document.webkitExitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+      // Firefox
+      document.mozCancelFullScreen();
+    } else if (document.msExitFullscreen) {
+      // IE11
+      document.msExitFullscreen();
+    }
+
+    this.isFullscreen = false;
+    this.updateButton();
+  }
+
+  handleFullscreenChange() {
+    // Check if we're actually in fullscreen
+    const isInFullscreen = !!(
+      document.fullscreenElement ||
+      document.webkitFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.msFullscreenElement
+    );
+
+    this.isFullscreen = isInFullscreen;
+    this.updateButton();
+  }
+
+  updateButton() {
+    if (this.isFullscreen) {
+      this.button.innerHTML = this.getCompressIcon();
+      this.button.title = 'Exit Fullscreen (ESC)';
+    } else {
+      this.button.innerHTML = this.getExpandIcon();
+      this.button.title = 'Toggle Fullscreen (ESC to exit)';
+    }
+  }
+
+  destroy() {
+    if (this.button && this.button.parentNode) {
+      this.button.parentNode.removeChild(this.button);
+    }
+  }
+}
+
+// Export factory function
+export function createFullscreenButton(canvas) {
+  return new FullscreenButton(canvas);
+}