frogoe 0.1.0

package/dist/contract/contract.js

@@ -0,0 +1,236 @@
+/**
+ * frogoe contract — the whole platform. ~180 lines. Zero taste.
+ *
+ * A game is one closure. The platform hands it four nouns:
+ *   stage  — where: size, safe-area insets, capped play column, ctx
+ *   input  — action: unified pointer (touch+mouse), cancel/blur safe
+ *   loop   — life: fill loop.update(dt) and loop.render(ctx)
+ *   finish — end: report the run's score to the host
+ *
+ * Everything visible (HUD, menus, art) lives in the game + recipe blocks.
+ * The platform publishes window.__frogoe so a host (feed/shell) can
+ * pause/resume/mute the game without the game's cooperation.
+ */
+
+const BOOT_ERRORS = {
+  canvas: 'frogoe: missing <canvas id="c"> — the contract boots on that exact element',
+  update:
+    "frogoe: game has no loop.update — fill it inside the closure you pass to defineGame: loop.update = (dt) => {...}  (60 Hz steps, dt in seconds)",
+  render:
+    "frogoe: game has no loop.render — fill it inside the closure you pass to defineGame: loop.render = (ctx) => {...}",
+};
+
+const cssLength = (value) => {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+};
+
+const defineGame = (game) => {
+  const boot = () => {
+    const canvas = document.querySelector("#c");
+    if (!(canvas instanceof HTMLCanvasElement)) {
+      throw new TypeError(BOOT_ERRORS.canvas);
+    }
+    const runtime = createRuntime(game, canvas);
+    runtime.start();
+  };
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot);
+  } else {
+    boot();
+  }
+};
+
+const createRuntime = (game, canvas) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error(BOOT_ERRORS.canvas);
+  }
+
+  // stage — measured truth: viewport, notch insets, capped play column
+  const probe = document.createElement("div");
+  probe.style.cssText =
+    "position:fixed;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);" +
+    "left:env(safe-area-inset-left);right:env(safe-area-inset-right);" +
+    "visibility:hidden;pointer-events:none;";
+  document.body.append(probe);
+  const safe = { bottom: 0, left: 0, right: 0, top: 0 };
+  const readInsets = () => {
+    const cs = getComputedStyle(probe);
+    safe.top = cssLength(cs.top);
+    safe.bottom = cssLength(cs.bottom);
+    safe.left = cssLength(cs.left);
+    safe.right = cssLength(cs.right);
+  };
+  const play = { center: 0, left: 0, right: 0, width: 0 };
+  const stage = {
+    ctx,
+    height: 0,
+    play,
+    refresh: () => {
+      readInsets();
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      stage.width = window.innerWidth;
+      stage.height = window.innerHeight;
+      canvas.width = Math.round(stage.width * dpr);
+      canvas.height = Math.round(stage.height * dpr);
+      canvas.style.width = `${stage.width}px`;
+      canvas.style.height = `${stage.height}px`;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      const width = Math.min(stage.width, 460);
+      play.center = stage.width / 2;
+      play.left = (stage.width - width) / 2;
+      play.right = (stage.width + width) / 2;
+      play.width = width;
+    },
+    safe,
+    width: 0,
+  };
+
+  // input — unified pointer. dx/dy are anchor-relative (since touch-down):
+  // steer with `x = grabX + p.dx` or track your own lastX. Never `x += p.dx`.
+  const pointer = { down: false, dx: 0, dy: 0, x: 0, y: 0 };
+  const handlers = { down: [], drag: [], up: [] };
+  let anchorX = 0;
+  let anchorY = 0;
+  const input = {
+    on(event, handler) {
+      if (handlers[event]) {
+        handlers[event].push(handler);
+      }
+    },
+    pointer,
+  };
+  const fire = (event) => {
+    for (const handler of handlers[event] ?? []) {
+      handler(pointer);
+    }
+  };
+  const setPointer = (event) => {
+    pointer.x = event.clientX;
+    pointer.y = event.clientY;
+    pointer.dx = pointer.x - anchorX;
+    pointer.dy = pointer.y - anchorY;
+  };
+  const onDown = (event) => {
+    event.preventDefault();
+    pointer.down = true;
+    anchorX = event.clientX;
+    anchorY = event.clientY;
+    setPointer(event);
+    fire("down");
+  };
+  const onMove = (event) => {
+    if (!pointer.down) {
+      return;
+    }
+    event.preventDefault();
+    setPointer(event);
+    fire("drag");
+  };
+  const onUp = () => {
+    pointer.down = false;
+    fire("up");
+  };
+  window.addEventListener("pointerdown", onDown, { passive: false });
+  window.addEventListener("pointermove", onMove, { passive: false });
+  window.addEventListener("pointerup", onUp, { passive: false });
+  window.addEventListener("pointercancel", onUp, { passive: false });
+
+  // loop — fixed 60 Hz steps, clamped; render every rAF; pauses on hide/blur
+  const loop = {};
+  let paused = false;
+  let accumulator = 0;
+  let last = performance.now();
+  const STEP = 1000 / 60;
+  const frame = (now) => {
+    if (!paused) {
+      accumulator += Math.min(now - last, STEP * 4);
+      last = now;
+      while (accumulator >= STEP) {
+        loop.update?.(STEP / 1000);
+        accumulator -= STEP;
+      }
+      loop.render?.(ctx);
+    } else {
+      last = now;
+    }
+    requestAnimationFrame(frame);
+  };
+
+  // finish — tell any host the run ended. Reporting only: the game-over
+  // SCREEN is a recipe block (hud-game-over-card), never drawn here. Hosts
+  // listen through the standard DOM event — each host brings its own adapter
+  // (RN WebView, iframe parent, feed shell); the contract stays host-blind.
+  let finished = false;
+  const finish = (score) => {
+    if (finished) {
+      return;
+    }
+    finished = true;
+    api.state = "over";
+    document.dispatchEvent(
+      new CustomEvent("frogoe:finish", {
+        detail: { score: Number(score) || 0 },
+      }),
+    );
+  };
+
+  // __frogoe — the host's handle. Published by the platform, guaranteed
+  // by construction; game code never touches it. Mute is a broadcast event
+  // ("frogoe:mute") so the game's audio layer can follow without polling.
+  const api = {
+    mute(state) {
+      api.muted = state === true;
+      document.dispatchEvent(new CustomEvent("frogoe:mute", { detail: { muted: api.muted } }));
+    },
+    muted: false,
+    pause() {
+      paused = true;
+      api.state = "paused";
+    },
+    resume() {
+      paused = false;
+      last = performance.now();
+      api.state = "playing";
+    },
+    state: "loading",
+    version: "0.1.0",
+  };
+  window.__frogoe = api;
+  let autoPaused = false;
+  const autoPause = () => {
+    if (document.hidden && !paused) {
+      autoPaused = true;
+      api.pause();
+    } else if (!document.hidden && autoPaused) {
+      autoPaused = false;
+      api.resume();
+    }
+  };
+  document.addEventListener("visibilitychange", autoPause);
+  window.addEventListener("blur", () => {
+    onUp();
+    autoPause();
+  });
+
+  return {
+    start: () => {
+      stage.refresh();
+      window.addEventListener("resize", stage.refresh);
+      game({ finish, input, loop, stage });
+      if (!loop.update) {
+        throw new TypeError(BOOT_ERRORS.update);
+      }
+      if (!loop.render) {
+        throw new TypeError(BOOT_ERRORS.render);
+      }
+      api.state = "playing";
+      paused = false;
+      last = performance.now();
+      requestAnimationFrame(frame);
+    },
+  };
+};
+
+export { defineGame };

package/dist/registry/blocks/coin-counter/coin-counter.html

@@ -0,0 +1,101 @@
+<!doctype html>
+<!-- frogoe block source: coin-counter — this file IS viewable in a browser (default
+     state on a neutral backdrop). Copy ONLY between the markers into your
+     game's blocks/ layer; the interactive playground is demo.html. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>frogoe block — coin-counter</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        background: radial-gradient(120% 120% at 50% 0%, #182031 0%, #0d1220 60%, #080b13 100%);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- ===================== COPY FROM HERE ===================== -->
+    <!--
+  frogoe block: coin-counter
+  Icon + animated count-up number — the classic corner pickup counter.
+
+  Bind from game.js (vanilla, no helper):
+    const el = document.querySelector("[data-block-coins]");
+    el.textContent = String(coins);            // count up in your loop or instantly
+    el.parentElement.setAttribute("data-gain", "");  // restart the gain pop
+
+  Theme: --block-accent, --block-fg, --block-outline, --block-font.
+-->
+    <style>
+      .block-coin-counter {
+        --block-accent: #ffd166;
+        --block-fg: #fffdf7;
+        --block-font: "Fredoka", "Baloo 2", system-ui, sans-serif;
+        --block-outline: #26180a;
+
+        display: flex;
+        align-items: center;
+        gap: 0.45em;
+        color: var(--block-fg);
+        font-family: var(--block-font);
+        font-weight: 700;
+        pointer-events: none;
+        -webkit-user-select: none;
+        user-select: none;
+      }
+      .block-coin-counter__coin {
+        width: 1.35em;
+        height: 1.35em;
+        flex: none;
+        border-radius: 50%;
+        background: var(--block-accent);
+        /* machined coin: inner ring + top-left light, no icon font */
+        box-shadow:
+          inset 0 0 0 0.14em color-mix(in srgb, var(--block-accent) 55%, #fff),
+          inset -0.08em -0.12em 0 0 color-mix(in srgb, var(--block-accent) 60%, #000),
+          0 2px 0 var(--block-outline);
+      }
+      .block-coin-counter__value {
+        font-size: clamp(1.1rem, 4.5vmin, 1.5rem);
+        font-variant-numeric: tabular-nums;
+        text-shadow: 0 2px 0 var(--block-outline);
+        min-width: 3ch;
+      }
+      .block-coin-counter[data-gain] .block-coin-counter__value {
+        animation: block-coin-gain 260ms cubic-bezier(0.34, 1.8, 0.5, 1);
+      }
+      .block-coin-counter[data-gain] .block-coin-counter__coin {
+        animation: block-coin-spin 420ms cubic-bezier(0.34, 1.56, 0.5, 1);
+      }
+      @keyframes block-coin-gain {
+        from {
+          transform: scale(1.3);
+        }
+      }
+      @keyframes block-coin-spin {
+        40% {
+          transform: rotateY(180deg) scale(1.12);
+        }
+        100% {
+          transform: rotateY(360deg);
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .block-coin-counter[data-gain] .block-coin-counter__value,
+        .block-coin-counter[data-gain] .block-coin-counter__coin {
+          animation: none;
+        }
+      }
+    </style>
+
+    <div class="block-coin-counter">
+      <span class="block-coin-counter__coin"></span>
+      <span class="block-coin-counter__value" data-block-coins>0</span>
+    </div>
+    <!-- ===================== COPY TO HERE ======================= -->
+  </body>
+</html>

package/dist/registry/blocks/coin-counter/registry-item.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "../../schema/registry-item.schema.json",
+  "name": "coin-counter",
+  "type": "frogoe:block",
+  "title": "Coin Counter",
+  "description": "Machined coin icon + tabular count with a gain pop and coin spin; themeable via --block-*",
+  "tags": [
+    "hud",
+    "coins",
+    "currency",
+    "pickup"
+  ],
+  "files": [
+    {
+      "path": "coin-counter.html",
+      "target": "blocks/coin-counter.html",
+      "type": "frogoe:markup"
+    }
+  ],
+  "bindings": [
+    "data-block-coins"
+  ],
+  "placement": "overlay",
+  "preview": {
+    "demo": "demo.html"
+  }
+}

package/dist/registry/blocks/combo-counter/combo-counter.html

@@ -0,0 +1,106 @@
+<!doctype html>
+<!-- frogoe block source: combo-counter — this file IS viewable in a browser (default
+     state on a neutral backdrop). Copy ONLY between the markers into your
+     game's blocks/ layer; the interactive playground is demo.html. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>frogoe block — combo-counter</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        background: radial-gradient(120% 120% at 50% 0%, #182031 0%, #0d1220 60%, #080b13 100%);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- ===================== COPY FROM HERE ===================== -->
+    <!--
+  frogoe block: combo-counter
+  Streak/combo readout with escalation tiers — the number grows legs as the
+  streak climbs. Tiers are semantic (streak heat), licensed escalation.
+
+  Bind from game.js (vanilla, no helper):
+    const el = document.querySelector("[data-block-combo]");
+    el.textContent = String(streak);
+    el.parentElement.dataset.tier = streak >= 12 ? "3" : streak >= 6 ? "2" : streak >= 3 ? "1" : "0";
+    el.parentElement.toggleAttribute("data-hot", streak >= 3);
+
+  Theme: --block-accent (tier colors derive from it), --block-fg, --block-outline.
+-->
+    <style>
+      .block-combo {
+        --block-accent: #ffd166;
+        --block-fg: #fffdf7;
+        --block-font: "Fredoka", "Baloo 2", system-ui, sans-serif;
+        --block-outline: #26180a;
+
+        display: grid;
+        justify-items: center;
+        line-height: 1;
+        color: var(--block-fg);
+        font-family: var(--block-font);
+        pointer-events: none;
+        -webkit-user-select: none;
+        user-select: none;
+      }
+      .block-combo__label {
+        font-size: 0.72rem;
+        font-weight: 700;
+        letter-spacing: 0.4em;
+        text-transform: uppercase;
+        text-indent: 0.4em; /* optical center against tracking */
+        opacity: 0.75;
+      }
+      .block-combo__value {
+        font-size: clamp(2rem, 9vmin, 3.2rem);
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        text-shadow: 0 3px 0 var(--block-outline);
+      }
+      .block-combo__value[data-pop] {
+        animation: block-combo-pop 240ms cubic-bezier(0.34, 1.8, 0.5, 1);
+      }
+      @keyframes block-combo-pop {
+        from {
+          transform: scale(1.32) rotate(-2deg);
+        }
+      }
+      /* escalation tiers — derived from the single accent, saturation climbs */
+      .block-combo[data-tier="1"] {
+        --block-fg: color-mix(in srgb, var(--block-accent) 45%, #fffdf7);
+      }
+      .block-combo[data-tier="2"] {
+        --block-fg: var(--block-accent);
+      }
+      .block-combo[data-tier="3"] {
+        --block-fg: color-mix(in srgb, var(--block-accent) 70%, #ff5d5d);
+        animation: block-combo-hot 600ms ease-in-out infinite alternate;
+      }
+      @keyframes block-combo-hot {
+        from {
+          scale: 1;
+        }
+        to {
+          scale: 1.06;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .block-combo__value[data-pop],
+        .block-combo[data-tier="3"] {
+          animation: none;
+        }
+      }
+    </style>
+
+    <div class="block-combo" data-tier="0">
+      <span class="block-combo__label">Combo</span>
+      <span class="block-combo__value" data-block-combo>0</span>
+    </div>
+    <!-- ===================== COPY TO HERE ======================= -->
+  </body>
+</html>

package/dist/registry/blocks/combo-counter/registry-item.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "../../schema/registry-item.schema.json",
+  "name": "combo-counter",
+  "type": "frogoe:block",
+  "title": "Combo Counter",
+  "description": "Streak readout with three escalation tiers derived from one accent; pop on gain, hot pulse at max tier; themeable via --block-*",
+  "tags": [
+    "hud",
+    "combo",
+    "streak",
+    "score"
+  ],
+  "files": [
+    {
+      "path": "combo-counter.html",
+      "target": "blocks/combo-counter.html",
+      "type": "frogoe:markup"
+    }
+  ],
+  "bindings": [
+    "data-block-combo"
+  ],
+  "placement": "overlay",
+  "preview": {
+    "demo": "demo.html"
+  }
+}

package/dist/registry/blocks/fuel-gauge/fuel-gauge.html

@@ -0,0 +1,130 @@
+<!doctype html>
+<!-- frogoe block source: fuel-gauge — this file IS viewable in a browser (default
+     state on a neutral backdrop). Copy ONLY between the markers into your
+     game's blocks/ layer; the interactive playground is demo.html. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>frogoe block — fuel-gauge</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        background: radial-gradient(120% 120% at 50% 0%, #182031 0%, #0d1220 60%, #080b13 100%);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- ===================== COPY FROM HERE ===================== -->
+    <!--
+  frogoe block: fuel-gauge
+  Horizontal resource bar (fuel / health / boost) with icon and label.
+  Fills drain smoothly; under 25% it pulses danger — that state is a
+  data attribute the game toggles, never guessed from color alone.
+
+  Bind from game.js (vanilla, no helper):
+    const bar = document.querySelector("[data-block-fuel]");
+    bar.style.setProperty("--block-fill", `${percent}%`);   // 0–100
+    bar.toggleAttribute("data-low", percent < 25);
+
+  Theme: --block-fill-color, --block-track, --block-accent, --block-danger.
+-->
+    <style>
+      .block-fuel-gauge {
+        --block-accent: #ffd166;
+        --block-danger: #ff5d5d;
+        --block-fill-color: var(--block-accent);
+        --block-font: "Fredoka", "Baloo 2", system-ui, sans-serif;
+        --block-outline: #26180a;
+        --block-track: rgba(10, 14, 26, 0.55);
+        --block-width: clamp(9rem, 34vmin, 13rem);
+
+        display: flex;
+        align-items: center;
+        gap: 0.55em;
+        color: #fffdf7;
+        font-family: var(--block-font);
+        pointer-events: none;
+        -webkit-user-select: none;
+        user-select: none;
+      }
+      .block-fuel-gauge__icon {
+        width: 1.5em;
+        height: 1.5em;
+        flex: none;
+        /* fuel-can silhouette, drawn as data — crisp at any size */
+        background: var(--block-accent);
+        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.77 7.23l-.01-.01-3.72-3.72L15 4.56l2.11 2.11c-.94.36-1.61 1.26-1.61 2.33 0 1.38 1.12 2.5 2.5 2.5.36 0 .69-.08 1-.21v7.21c0 .55-.45 1-1 1s-1-.45-1-1V14c0-1.1-.9-2-2-2h-1V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v16h10v-7.5h1.5v2.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V9c0-.69-.28-1.32-.73-1.77zM12 10H6V5h6v5zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/></svg>")
+          center / contain no-repeat;
+        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.77 7.23l-.01-.01-3.72-3.72L15 4.56l2.11 2.11c-.94.36-1.61 1.26-1.61 2.33 0 1.38 1.12 2.5 2.5 2.5.36 0 .69-.08 1-.21v7.21c0 .55-.45 1-1 1s-1-.45-1-1V14c0-1.1-.9-2-2-2h-1V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v16h10v-7.5h1.5v2.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V9c0-.69-.28-1.32-.73-1.77zM12 10H6V5h6v5zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z'/></svg>")
+          center / contain no-repeat;
+        filter: drop-shadow(0 2px 0 var(--block-outline));
+      }
+      .block-fuel-gauge__track {
+        position: relative;
+        width: var(--block-width);
+        height: 1.15em;
+        background: var(--block-track);
+        border: 2px solid rgba(255, 255, 255, 0.16);
+        border-radius: 999px;
+        overflow: hidden;
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
+      }
+      .block-fuel-gauge__fill {
+        --block-fill: 100%;
+        position: absolute;
+        inset: 0 auto 0 0;
+        width: var(--block-fill);
+        background: linear-gradient(
+          180deg,
+          color-mix(in srgb, var(--block-fill-color) 78%, white) 0%,
+          var(--block-fill-color) 55%,
+          color-mix(in srgb, var(--block-fill-color) 72%, black) 100%
+        );
+        border-radius: inherit;
+        transition: width 240ms ease-out;
+      }
+      .block-fuel-gauge__label {
+        font-size: 0.95rem;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        text-shadow: 0 2px 0 var(--block-outline);
+        min-width: 3ch;
+      }
+      .block-fuel-gauge[data-low] {
+        --block-fill-color: var(--block-danger);
+      }
+      .block-fuel-gauge[data-low] .block-fuel-gauge__fill {
+        animation: block-fuel-low 640ms ease-in-out infinite alternate;
+      }
+      @keyframes block-fuel-low {
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0.55;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .block-fuel-gauge__fill {
+          transition: none;
+        }
+        .block-fuel-gauge[data-low] .block-fuel-gauge__fill {
+          animation: none;
+        }
+      }
+    </style>
+
+    <div class="block-fuel-gauge" data-block-fuel>
+      <span class="block-fuel-gauge__icon"></span>
+      <span class="block-fuel-gauge__track">
+        <span class="block-fuel-gauge__fill"></span>
+      </span>
+      <span class="block-fuel-gauge__label" data-block-fuel-label>100</span>
+    </div>
+    <!-- ===================== COPY TO HERE ======================= -->
+  </body>
+</html>

package/dist/registry/blocks/fuel-gauge/registry-item.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "../../schema/registry-item.schema.json",
+  "name": "fuel-gauge",
+  "type": "frogoe:block",
+  "title": "Fuel Gauge",
+  "description": "Resource bar with fuel-can icon and numeric label; drains smoothly, pulses danger under 25% via data-low; themeable via --block-*",
+  "tags": [
+    "hud",
+    "fuel",
+    "bar",
+    "resource",
+    "timer"
+  ],
+  "files": [
+    {
+      "path": "fuel-gauge.html",
+      "target": "blocks/fuel-gauge.html",
+      "type": "frogoe:markup"
+    }
+  ],
+  "bindings": [
+    "data-block-fuel",
+    "data-block-fuel-label"
+  ],
+  "placement": "overlay",
+  "preview": {
+    "demo": "demo.html"
+  }
+}