nova64 0.2.1

package/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/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/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,
+  };
+}

package/runtime/ui.js

@@ -0,0 +1,111 @@
+// 🎨 Nova64 UI System - First Class 2D Interface
+// Thin orchestrator — delegates to runtime/ui/*.js sub-modules
+
+import { uiTextModule } from './ui/text.js';
+import { uiPanelsModule } from './ui/panels.js';
+import { uiButtonsModule } from './ui/buttons.js';
+import { uiWidgetsModule } from './ui/widgets.js';
+
+export function uiApi(gpu, g) {
+  // Shared state objects passed by reference into sub-modules
+  const state = { currentFont: 'normal', textAlign: 'left', textBaseline: 'top' };
+  const mouse = { x: 0, y: 0, down: false, pressed: false };
+  const panels = [];
+  const buttons = [];
+
+  const fonts = {
+    tiny: { size: 1, spacing: 1 },
+    small: { size: 1, spacing: 2 },
+    normal: { size: 2, spacing: 1 },
+    large: { size: 3, spacing: 1 },
+    huge: { size: 4, spacing: 2 },
+  };
+
+  const rgba8 = g.rgba8;
+  const colors = {
+    primary: rgba8(0, 120, 255, 255),
+    secondary: rgba8(100, 100, 255, 255),
+    success: rgba8(0, 255, 100, 255),
+    warning: rgba8(255, 200, 0, 255),
+    danger: rgba8(255, 50, 50, 255),
+    dark: rgba8(20, 20, 30, 255),
+    light: rgba8(240, 240, 250, 255),
+    white: rgba8(255, 255, 255, 255),
+    black: rgba8(0, 0, 0, 255),
+    transparent: rgba8(0, 0, 0, 0),
+  };
+
+  const ctx = { g, fonts, state, mouse, colors, panels, buttons };
+
+  // Init modules — each appends its exports to ctx for later modules to use
+  const textMod = uiTextModule(ctx);
+  Object.assign(ctx, textMod);
+
+  const panelMod = uiPanelsModule(ctx);
+  Object.assign(ctx, panelMod);
+
+  const buttonMod = uiButtonsModule(ctx);
+  Object.assign(ctx, buttonMod);
+
+  const widgetMod = uiWidgetsModule(ctx);
+  Object.assign(ctx, widgetMod);
+
+  return {
+    // Expose these directly for main.js to wire input before exposeTo is called
+    setMousePosition: ctx.setMousePosition,
+    setMouseButton: ctx.setMouseButton,
+
+    exposeTo(target) {
+      Object.assign(target, {
+        // Font / text system
+        setFont: ctx.setFont,
+        getFont: ctx.getFont,
+        setTextAlign: ctx.setTextAlign,
+        setTextBaseline: ctx.setTextBaseline,
+        measureText: ctx.measureText,
+        drawText: ctx.drawText,
+        drawTextShadow: ctx.drawTextShadow,
+        drawTextOutline: ctx.drawTextOutline,
+
+        // Panel system
+        createPanel: ctx.createPanel,
+        drawPanel: ctx.drawPanel,
+        drawAllPanels: ctx.drawAllPanels,
+        removePanel: ctx.removePanel,
+        clearPanels: ctx.clearPanels,
+
+        // Button system
+        createButton: ctx.createButton,
+        updateButton: ctx.updateButton,
+        drawButton: ctx.drawButton,
+        updateAllButtons: ctx.updateAllButtons,
+        drawAllButtons: ctx.drawAllButtons,
+        removeButton: ctx.removeButton,
+        clearButtons: ctx.clearButtons,
+
+        // Progress bars
+        drawProgressBar: ctx.drawProgressBar,
+
+        // Advanced shapes
+        drawRoundedRect: ctx.drawRoundedRect,
+        drawGradientRect: ctx.drawGradientRect,
+
+        // Layout helpers
+        centerX: ctx.centerX,
+        centerY: ctx.centerY,
+        grid: ctx.grid,
+
+        // Mouse input
+        setMousePosition: ctx.setMousePosition,
+        setMouseButton: ctx.setMouseButton,
+        getMousePosition: ctx.getMousePosition,
+        isMouseDown: ctx.isMouseDown,
+        isMousePressed: ctx.isMousePressed,
+
+        // Color palette and font defs
+        uiColors: colors,
+        uiFonts: fonts,
+      });
+    },
+  };
+}