nova64 0.2.6 → 0.2.7

package/dist/runtime/store.js

@@ -0,0 +1,151 @@
+// runtime/store.js
+// Zustand-powered reactive game state for Nova64 carts
+import { logger } from './logger.js';
+// Usage from any cart:
+//   const store = createGameStore({ hp: 100, score: 0 });
+//   store.setState({ score: store.getState().score + 10 });
+//   store.subscribe(state => logger.debug('score changed:', state.score));
+//
+// The built-in novaStore is a global singleton all carts can read/write:
+//   novaStore.setState({ level: 2 });
+//   const { score, lives } = novaStore.getState();
+
+let _createStore;
+
+// Try to use real Zustand vanilla, fall back to a compatible hand-rolled version
+// so the file works even before `npm install` resolves.
+async function _loadZustand() {
+  try {
+    const mod = await import('zustand/vanilla');
+    _createStore = mod.createStore;
+    logger.info('✅ Nova64 Store: using Zustand/vanilla');
+  } catch {
+    // Hand-rolled Zustand-compatible store (same API surface)
+    _createStore = function createStorePolyfill(initializer) {
+      let state;
+      const listeners = new Set();
+
+      const setState = (partial, replace = false) => {
+        const next = typeof partial === 'function' ? partial(state) : partial;
+        const nextState = replace ? next : Object.assign({}, state, next);
+        if (nextState !== state) {
+          const prev = state;
+          state = nextState;
+          listeners.forEach(l => l(state, prev));
+        }
+      };
+
+      const getState = () => state;
+
+      const subscribe = listener => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+      };
+
+      const destroy = () => listeners.clear();
+
+      const api = { setState, getState, subscribe, destroy };
+      state =
+        typeof initializer === 'function' ? initializer(setState, getState, api) : initializer;
+      return api;
+    };
+    logger.info(
+      'ℹ️ Nova64 Store: using built-in store polyfill (run pnpm install to enable Zustand)'
+    );
+  }
+}
+
+// Pre-initialize synchronously with polyfill so stores work immediately,
+// then swap to real Zustand if available — existing stores keep their state.
+_createStore = function createStorePolyfill(initializer) {
+  let state;
+  const listeners = new Set();
+
+  const setState = (partial, replace = false) => {
+    const next = typeof partial === 'function' ? partial(state) : partial;
+    const nextState = replace ? next : Object.assign({}, state, next);
+    if (nextState !== state) {
+      const prev = state;
+      state = nextState;
+      listeners.forEach(l => l(state, prev));
+    }
+  };
+
+  const getState = () => state;
+  const subscribe = listener => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const destroy = () => listeners.clear();
+
+  const api = { setState, getState, subscribe, destroy };
+  state =
+    typeof initializer === 'function' ? initializer(setState, getState, api) : initializer || {};
+  return api;
+};
+
+// Attempt to upgrade to real Zustand asynchronously
+_loadZustand();
+
+/**
+ * createGameStore(initialState) → store
+ * Creates a new reactive store for a cart.
+ * Identical to Zustand vanilla's createStore.
+ *
+ * @param {object|function} initialState  Plain object or Zustand initializer fn
+ * @returns {{ getState, setState, subscribe, destroy }}
+ */
+export function createGameStore(initialState) {
+  return _createStore(initialState);
+}
+
+/**
+ * novaStore — built-in singleton store, auto-ticked by the main loop.
+ * All carts can read/write without any setup.
+ *
+ * getState() returns:
+ *   { gameState, score, lives, level, time, paused, playerX, playerY }
+ */
+export const novaStore = _createStore({
+  gameState: 'start', // 'start' | 'playing' | 'paused' | 'gameover' | 'win'
+  score: 0,
+  lives: 3,
+  level: 1,
+  time: 0,
+  paused: false,
+  playerX: 0,
+  playerY: 0,
+});
+
+export function storeApi() {
+  return {
+    exposeTo(target) {
+      target.createGameStore = createGameStore;
+      target.novaStore = novaStore;
+    },
+
+    // Called by main loop each frame to increment global time
+    tick(dt) {
+      const s = novaStore.getState();
+      if (!s.paused) {
+        novaStore.setState({ time: s.time + dt });
+      }
+    },
+
+    reset() {
+      novaStore.setState(
+        {
+          gameState: 'start',
+          score: 0,
+          lives: 3,
+          level: 1,
+          time: 0,
+          paused: false,
+          playerX: 0,
+          playerY: 0,
+        },
+        /*replace=*/ true
+      );
+    },
+  };
+}

package/dist/runtime/textinput.js

@@ -0,0 +1,68 @@
+// runtime/textinput.js
+class TextInput {
+  constructor() {
+    this.active = false;
+    this.value = '';
+    this.maxLen = 128;
+    this.placeholder = '';
+    this._build();
+  }
+  _build() {
+    const el = document.createElement('input');
+    el.type = 'text';
+    el.autocomplete = 'off';
+    el.spellcheck = false;
+    el.style.position = 'fixed';
+    el.style.left = '50%';
+    el.style.top = '10px';
+    el.style.transform = 'translateX(-50%)';
+    el.style.zIndex = '9998';
+    el.style.fontSize = '14px';
+    el.style.padding = '6px 10px';
+    el.style.borderRadius = '8px';
+    el.style.border = '1px solid #2a324a';
+    el.style.background = '#202538';
+    el.style.color = '#dcdfe4';
+    el.style.display = 'none';
+    document.body.appendChild(el);
+    el.addEventListener('input', () => {
+      if (el.value.length > this.maxLen) el.value = el.value.slice(0, this.maxLen);
+      this.value = el.value;
+    });
+    this.el = el;
+  }
+  start(opts = {}) {
+    this.active = true;
+    this.value = opts.value || '';
+    this.maxLen = opts.maxLen || 128;
+    this.placeholder = opts.placeholder || '';
+    this.el.placeholder = this.placeholder;
+    this.el.value = this.value;
+    this.el.style.display = 'block';
+    this.el.focus();
+    this.el.selectionStart = this.el.selectionEnd = this.el.value.length;
+  }
+  stop() {
+    this.active = false;
+    this.el.style.display = 'none';
+    this.el.blur();
+    return this.value;
+  }
+  get() {
+    return this.value;
+  }
+}
+
+const input = new TextInput();
+
+export function textInputApi() {
+  return {
+    exposeTo(target) {
+      Object.assign(target, {
+        startTextInput: opts => input.start(opts || {}),
+        stopTextInput: () => input.stop(),
+        getTextInput: () => input.get(),
+      });
+    },
+  };
+}

package/dist/runtime/ui/buttons.js

@@ -0,0 +1,124 @@
+// runtime/ui/buttons.js
+// Button creation, update, and rendering
+
+/**
+ * @param {{ g: object, colors: object, buttons: Array, mouse: { x:number, y:number, down:boolean, pressed:boolean },
+ *           state: object, drawText: Function, setTextAlign: Function, setTextBaseline: Function }} ctx
+ */
+export function uiButtonsModule({
+  g,
+  colors,
+  buttons,
+  mouse,
+  state,
+  drawText,
+  setTextAlign,
+  setTextBaseline,
+}) {
+  function createButton(x, y, width, height, text, callback, options = {}) {
+    const button = {
+      id: `button_${Date.now()}_${Math.random()}`,
+      x,
+      y,
+      width,
+      height,
+      text,
+      callback,
+      enabled: options.enabled !== undefined ? options.enabled : true,
+      visible: options.visible !== undefined ? options.visible : true,
+      normalColor: options.normalColor || colors.primary,
+      hoverColor: options.hoverColor || g.rgba8(50, 150, 255, 255),
+      pressedColor: options.pressedColor || g.rgba8(0, 80, 200, 255),
+      disabledColor: options.disabledColor || g.rgba8(100, 100, 100, 255),
+      textColor: options.textColor || colors.white,
+      borderColor: options.borderColor || colors.white,
+      borderWidth: options.borderWidth !== undefined ? options.borderWidth : 2,
+      hovered: false,
+      pressed: false,
+      rounded: options.rounded || false,
+      icon: options.icon || null,
+    };
+    buttons.push(button);
+    return button;
+  }
+
+  function updateButton(button) {
+    if (!button.enabled || !button.visible) {
+      button.hovered = false;
+      button.pressed = false;
+      return false;
+    }
+    const over =
+      mouse.x >= button.x &&
+      mouse.x <= button.x + button.width &&
+      mouse.y >= button.y &&
+      mouse.y <= button.y + button.height;
+    button.hovered = over;
+    button.pressed = over && mouse.down;
+    if (over && mouse.pressed) {
+      if (button.callback) button.callback();
+      return true;
+    }
+    return false;
+  }
+
+  function drawButton(button) {
+    if (!button.visible) return;
+    const { x, y, width, height } = button;
+    let bgColor = button.normalColor;
+    if (!button.enabled) bgColor = button.disabledColor;
+    else if (button.pressed) bgColor = button.pressedColor;
+    else if (button.hovered) bgColor = button.hoverColor;
+
+    g.rect(x, y, width, height, bgColor, true);
+
+    if (button.borderWidth > 0) {
+      const bCol = button.hovered ? button.hoverColor : button.borderColor;
+      for (let i = 0; i < button.borderWidth; i++) {
+        g.rect(x + i, y + i, width - i * 2, height - i * 2, bCol, false);
+      }
+    }
+
+    if (button.pressed)
+      g.rect(x + 2, y + 2, width - 4, height - 4, g.rgba8(255, 255, 255, 50), true);
+
+    const oldAlign = state.textAlign;
+    const oldBaseline = state.textBaseline;
+    setTextAlign('center');
+    setTextBaseline('middle');
+    const textY = button.pressed ? y + height / 2 + 1 : y + height / 2;
+    drawText(button.text, x + width / 2, textY, button.textColor, 1);
+    setTextAlign(oldAlign);
+    setTextBaseline(oldBaseline);
+  }
+
+  function updateAllButtons() {
+    let anyClicked = false;
+    buttons.forEach(b => {
+      if (updateButton(b)) anyClicked = true;
+    });
+    mouse.pressed = false; // consume click after all buttons have seen it
+    return anyClicked;
+  }
+
+  function drawAllButtons() {
+    buttons.forEach(b => drawButton(b));
+  }
+  function removeButton(b) {
+    const i = buttons.indexOf(b);
+    if (i >= 0) buttons.splice(i, 1);
+  }
+  function clearButtons() {
+    buttons.length = 0;
+  }
+
+  return {
+    createButton,
+    updateButton,
+    drawButton,
+    updateAllButtons,
+    drawAllButtons,
+    removeButton,
+    clearButtons,
+  };
+}

package/dist/runtime/ui/panels.js

@@ -0,0 +1,105 @@
+// runtime/ui/panels.js
+// Panel (dialog box) creation and rendering
+
+import { unpackRGBA64 } from '../api.js';
+
+/**
+ * @param {{ g: object, colors: object, panels: Array, state: object,
+ *           drawText: Function, setTextAlign: Function }} ctx
+ */
+export function uiPanelsModule({ g, colors, panels, state, drawText, setTextAlign }) {
+  function createPanel(x, y, width, height, options = {}) {
+    const panel = {
+      id: `panel_${Date.now()}_${Math.random()}`,
+      x,
+      y,
+      width,
+      height,
+      bgColor: options.bgColor || g.rgba8(0, 0, 0, 200),
+      borderColor: options.borderColor || colors.primary,
+      borderWidth: options.borderWidth !== undefined ? options.borderWidth : 2,
+      cornerRadius: options.cornerRadius || 0,
+      shadow: options.shadow || false,
+      shadowOffset: options.shadowOffset || 4,
+      title: options.title || null,
+      titleColor: options.titleColor || colors.white,
+      titleBgColor: options.titleBgColor || colors.primary,
+      padding: options.padding || 10,
+      visible: options.visible !== undefined ? options.visible : true,
+      gradient: options.gradient || false,
+      gradientColor: options.gradientColor || g.rgba8(0, 0, 50, 200),
+    };
+    panels.push(panel);
+    return panel;
+  }
+
+  function drawPanel(panel) {
+    if (!panel.visible) return;
+    const { x, y, width, height } = panel;
+
+    if (panel.shadow) {
+      const so = panel.shadowOffset;
+      g.rect(x + so, y + so, width, height, g.rgba8(0, 0, 0, 100), true);
+    }
+
+    if (panel.gradient) {
+      const steps = 20;
+      const bgU = unpackRGBA64(panel.bgColor);
+      const grU = unpackRGBA64(panel.gradientColor);
+      const bgR = Math.floor(bgU.r / 257),
+        bgG = Math.floor(bgU.g / 257),
+        bgB = Math.floor(bgU.b / 257),
+        bgA = Math.floor(bgU.a / 257);
+      const grR = Math.floor(grU.r / 257),
+        grG = Math.floor(grU.g / 257),
+        grB = Math.floor(grU.b / 257);
+      for (let i = 0; i < steps; i++) {
+        const ratio = i / steps;
+        const h = Math.floor(height / steps);
+        const r = Math.floor(bgR + (grR - bgR) * ratio);
+        const gv = Math.floor(bgG + (grG - bgG) * ratio);
+        const b = Math.floor(bgB + (grB - bgB) * ratio);
+        g.rect(x, y + i * h, width, h, g.rgba8(r, gv, b, bgA), true);
+      }
+    } else {
+      g.rect(x, y, width, height, panel.bgColor, true);
+    }
+
+    if (panel.cornerRadius > 0) {
+      const cr = panel.cornerRadius;
+      g.rect(x, y, cr, cr, panel.bgColor, true);
+      g.rect(x + width - cr, y, cr, cr, panel.bgColor, true);
+      g.rect(x, y + height - cr, cr, cr, panel.bgColor, true);
+      g.rect(x + width - cr, y + height - cr, cr, cr, panel.bgColor, true);
+    }
+
+    if (panel.borderWidth > 0) {
+      for (let i = 0; i < panel.borderWidth; i++) {
+        g.rect(x + i, y + i, width - i * 2, height - i * 2, panel.borderColor, false);
+      }
+    }
+
+    if (panel.title) {
+      const titleHeight = 20;
+      g.rect(x, y - titleHeight, width, titleHeight, panel.titleBgColor, true);
+      g.rect(x, y - titleHeight, width, titleHeight, panel.borderColor, false);
+      const oldAlign = state.textAlign;
+      setTextAlign('center');
+      drawText(panel.title, x + width / 2, y - titleHeight + 4, panel.titleColor, 1);
+      setTextAlign(oldAlign);
+    }
+  }
+
+  function drawAllPanels() {
+    panels.forEach(p => drawPanel(p));
+  }
+  function removePanel(p) {
+    const i = panels.indexOf(p);
+    if (i >= 0) panels.splice(i, 1);
+  }
+  function clearPanels() {
+    panels.length = 0;
+  }
+
+  return { createPanel, drawPanel, drawAllPanels, removePanel, clearPanels };
+}

package/dist/runtime/ui/text.js

@@ -0,0 +1,86 @@
+// runtime/ui/text.js
+// Font management and text rendering
+
+/**
+ * @param {{ g: object, fonts: object, state: { currentFont: string, textAlign: string, textBaseline: string }, colors: object }} ctx
+ */
+export function uiTextModule({ g, fonts, state, colors }) {
+  function setFont(fontName) {
+    if (fonts[fontName]) state.currentFont = fontName;
+  }
+
+  function getFont() {
+    return fonts[state.currentFont];
+  }
+
+  function setTextAlign(align) {
+    state.textAlign = align;
+  }
+
+  function setTextBaseline(baseline) {
+    state.textBaseline = baseline;
+  }
+
+  function measureText(text, scale = 1) {
+    const font = getFont();
+    const charWidth = 6 * scale * font.size;
+    const charHeight = 8 * scale * font.size;
+    return { width: text.length * charWidth, height: charHeight };
+  }
+
+  function drawText(text, x, y, color = colors.white, scale = 1) {
+    const font = getFont();
+    const finalScale = scale * font.size;
+    const metrics = measureText(text, scale);
+
+    let drawX = x;
+    if (state.textAlign === 'center') drawX = x - metrics.width / 2;
+    else if (state.textAlign === 'right') drawX = x - metrics.width;
+
+    let drawY = y;
+    if (state.textBaseline === 'middle') drawY = y - metrics.height / 2;
+    else if (state.textBaseline === 'bottom') drawY = y - metrics.height;
+
+    g.print(text, Math.floor(drawX), Math.floor(drawY), color, finalScale);
+  }
+
+  function drawTextShadow(
+    text,
+    x,
+    y,
+    color = colors.white,
+    shadowColor = colors.black,
+    offset = 2,
+    scale = 1
+  ) {
+    drawText(text, x + offset, y + offset, shadowColor, scale);
+    drawText(text, x, y, color, scale);
+  }
+
+  function drawTextOutline(
+    text,
+    x,
+    y,
+    color = colors.white,
+    outlineColor = colors.black,
+    scale = 1
+  ) {
+    for (let ox = -1; ox <= 1; ox++) {
+      for (let oy = -1; oy <= 1; oy++) {
+        if (ox !== 0 || oy !== 0) drawText(text, x + ox, y + oy, outlineColor, scale);
+      }
+    }
+    drawText(text, x, y, color, scale);
+  }
+
+  return {
+    setFont,
+    getFont,
+    setTextAlign,
+    setTextBaseline,
+    measureText,
+    drawText,
+    drawTextShadow,
+    drawTextOutline,
+  };
+}

package/dist/runtime/ui/widgets.js

@@ -0,0 +1,141 @@
+// runtime/ui/widgets.js
+// Progress bars, shapes, layout helpers, and mouse input
+
+import { unpackRGBA64 } from '../api.js';
+
+/**
+ * @param {{ g: object, colors: object, mouse: { x:number, y:number, down:boolean, pressed:boolean },
+ *           state: object, drawText: Function, drawTextOutline: Function,
+ *           setTextAlign: Function, setTextBaseline: Function }} ctx
+ */
+export function uiWidgetsModule({
+  g,
+  colors,
+  mouse,
+  state,
+  drawTextOutline,
+  setTextAlign,
+  setTextBaseline,
+}) {
+  // ── Progress bar ──────────────────────────────────────────────────────────
+  function drawProgressBar(x, y, width, height, value, maxValue, options = {}) {
+    const bgColor = options.bgColor || g.rgba8(50, 50, 50, 255);
+    const fillColor = options.fillColor || colors.success;
+    const borderColor = options.borderColor || colors.white;
+    const showText = options.showText !== undefined ? options.showText : true;
+    const textColor = options.textColor || colors.white;
+
+    g.rect(x, y, width, height, bgColor, true);
+    const fillWidth = Math.floor((value / maxValue) * width);
+    if (fillWidth > 0) g.rect(x, y, fillWidth, height, fillColor, true);
+    g.rect(x, y, width, height, borderColor, false);
+
+    if (showText) {
+      const text = `${Math.floor(value)}/${Math.floor(maxValue)}`;
+      const oldAlign = state.textAlign;
+      const oldBaseline = state.textBaseline;
+      setTextAlign('center');
+      setTextBaseline('middle');
+      drawTextOutline(text, x + width / 2, y + height / 2, textColor, colors.black, 1);
+      setTextAlign(oldAlign);
+      setTextBaseline(oldBaseline);
+    }
+  }
+
+  // ── Shapes ────────────────────────────────────────────────────────────────
+  function drawRoundedRect(x, y, width, height, radius, color, filled = true) {
+    if (radius === 0) {
+      g.rect(x, y, width, height, color, filled);
+      return;
+    }
+    g.rect(x + radius, y, width - radius * 2, height, color, filled);
+    g.rect(x, y + radius, radius, height - radius * 2, color, filled);
+    g.rect(x + width - radius, y + radius, radius, height - radius * 2, color, filled);
+    g.circle(x + radius, y + radius, radius, color, filled);
+    g.circle(x + width - radius, y + radius, radius, color, filled);
+    g.circle(x + radius, y + height - radius, radius, color, filled);
+    g.circle(x + width - radius, y + height - radius, radius, color, filled);
+  }
+
+  function drawGradientRect(x, y, width, height, color1, color2, vertical = true) {
+    const steps = vertical ? height : width;
+    const c1 = unpackRGBA64(color1);
+    const c2 = unpackRGBA64(color2);
+    const r1 = Math.floor(c1.r / 257),
+      g1 = Math.floor(c1.g / 257),
+      b1 = Math.floor(c1.b / 257),
+      a1 = Math.floor(c1.a / 257);
+    const r2 = Math.floor(c2.r / 257),
+      g2 = Math.floor(c2.g / 257),
+      b2 = Math.floor(c2.b / 257),
+      a2 = Math.floor(c2.a / 257);
+    for (let i = 0; i < steps; i++) {
+      const ratio = i / steps;
+      const r = Math.floor(r1 + (r2 - r1) * ratio);
+      const gv = Math.floor(g1 + (g2 - g1) * ratio);
+      const b = Math.floor(b1 + (b2 - b1) * ratio);
+      const a = Math.floor(a1 + (a2 - a1) * ratio);
+      const c = g.rgba8(r, gv, b, a);
+      if (vertical) g.rect(x, y + i, width, 1, c, true);
+      else g.rect(x + i, y, 1, height, c, true);
+    }
+  }
+
+  // ── Layout helpers ────────────────────────────────────────────────────────
+  function centerX(width, screenWidth = 640) {
+    return Math.floor((screenWidth - width) / 2);
+  }
+  function centerY(height, screenHeight = 360) {
+    return Math.floor((screenHeight - height) / 2);
+  }
+
+  function grid(cols, rows, cellWidth, cellHeight, paddingX = 0, paddingY = 0) {
+    const cells = [];
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        cells.push({
+          x: col * (cellWidth + paddingX),
+          y: row * (cellHeight + paddingY),
+          width: cellWidth,
+          height: cellHeight,
+          col,
+          row,
+        });
+      }
+    }
+    return cells;
+  }
+
+  // ── Mouse input ───────────────────────────────────────────────────────────
+  function setMousePosition(x, y) {
+    mouse.x = x;
+    mouse.y = y;
+  }
+  function setMouseButton(down) {
+    mouse.pressed = down && !mouse.down;
+    mouse.down = down;
+  }
+  function getMousePosition() {
+    return { x: mouse.x, y: mouse.y };
+  }
+  function isMouseDown() {
+    return mouse.down;
+  }
+  function isMousePressed() {
+    return mouse.pressed;
+  }
+
+  return {
+    drawProgressBar,
+    drawRoundedRect,
+    drawGradientRect,
+    centerX,
+    centerY,
+    grid,
+    setMousePosition,
+    setMouseButton,
+    getMousePosition,
+    isMouseDown,
+    isMousePressed,
+  };
+}