Phase 1: wrap the reference web app in Capacitor for Android

Wraps reference/sp404-layers as a sideloadable APK without editing the reference, which stays the frozen spec for the Phase 2 React port. - sync-www.sh builds www/ from reference/ + native/, asserting each patch anchor so a reference change fails loudly rather than shipping broken - drops the service worker (would serve a stale app after an APK update) - haptics via a navigator.vibrate override, so buzz() needs no change - localStorage mirrored into Preferences; sync load()/save() untouched - hardware back: sheet -> Explore tab -> exit - edge-to-edge handled in MainActivity: Android 16 + targetSdk 36 removes the opt-out, and a WebView never fills env(safe-area-inset-*), so insets are pushed into CSS custom properties instead Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-16 00:26:35 +03:00
commit 1a8a12f7f3
75 changed files with 3542 additions and 0 deletions
--- a/native/native.css
+++ b/native/native.css
@@ -0,0 +1,36 @@
+/* Native-only overrides.
+   reference/ is never edited; sync-www.sh injects this as the last stylesheet
+   in <head>, so on equal specificity these rules win. */
+
+:root{
+  /* Filled in from Android WindowInsets by MainActivity via __applyInsets().
+     The env() defaults keep the page correct in a plain desktop browser, where
+     env() works and the native bridge is absent. */
+  --ins-t: env(safe-area-inset-top, 0px);
+  --ins-b: env(safe-area-inset-bottom, 0px);
+  --ins-l: env(safe-area-inset-left, 0px);
+  --ins-r: env(safe-area-inset-right, 0px);
+
+  /* The reference derives --sab from env(safe-area-inset-bottom), which is
+     always 0px inside an Android WebView. Re-point it at the real inset.
+     .bnav and .sheet both key off --sab, so they need no further changes. */
+  --sab: var(--ins-b);
+}
+
+@media (max-width:820px){
+  /* The reference sets `padding: 8px 8px calc(var(--nav) + var(--sab) + 8px)`.
+     Bottom already accounts for --sab; add the top and side insets so the unit
+     panel clears the status bar and any display cutout. */
+  .app{
+    padding-top: calc(8px + var(--ins-t));
+    padding-left: calc(8px + var(--ins-l));
+    padding-right: calc(8px + var(--ins-r));
+  }
+
+  /* Bottom nav is position:fixed and spans the full width, so it needs the
+     side insets itself. Its height/padding-bottom already follow --sab. */
+  .bnav{
+    padding-left: var(--ins-l);
+    padding-right: var(--ins-r);
+  }
+}
--- a/native/native.js
+++ b/native/native.js
@@ -0,0 +1,113 @@
+/* Native glue for the Capacitor wrapper.
+ *
+ * Loaded as a classic script AFTER the app script, so it shares the global
+ * lexical scope and can reach the reference's top-level bindings directly
+ * (store, st, render, closeSheet, save). Nothing in reference/ is modified.
+ *
+ * Plugins are reached through window.Capacitor.Plugins rather than ESM imports,
+ * because there is no bundler in Phase 1. The native side registers them during
+ * `cap sync`, so the bridge proxies are present without any JS import.
+ *
+ * Everything degrades silently when the bridge is absent (desktop browser).
+ */
+(function () {
+  "use strict";
+
+  var cap = window.Capacitor;
+  var P = (cap && cap.Plugins) || {};
+
+  /* Called from MainActivity's window-inset listener. Defined unconditionally
+     so the native side never has to feature-detect it. Values arrive in dp. */
+  window.__applyInsets = function (top, right, bottom, left) {
+    var s = document.documentElement.style;
+    s.setProperty("--ins-t", top + "px");
+    s.setProperty("--ins-r", right + "px");
+    s.setProperty("--ins-b", bottom + "px");
+    s.setProperty("--ins-l", left + "px");
+  };
+
+  if (!(cap && cap.isNativePlatform && cap.isNativePlatform())) return;
+
+  /* ---------- haptics ----------
+     The reference's buzz() is a `const`, so it cannot be reassigned. It calls
+     navigator.vibrate, which can be — so this needs no reference change at all.
+     Call sites: buzz() on every key press, buzz([12,40,12]) on a correct
+     answer, buzz(40) on a wrong one. */
+  var H = P.Haptics;
+  if (H) {
+    Object.defineProperty(navigator, "vibrate", {
+      configurable: true,
+      writable: true,
+      value: function (pattern) {
+        try {
+          if (Array.isArray(pattern)) H.notification({ type: "SUCCESS" });
+          else if (pattern > 15) H.notification({ type: "ERROR" });
+          else H.impact({ style: "LIGHT" });
+        } catch (e) {}
+        return true; // buzz() only checks truthiness of navigator.vibrate
+      }
+    });
+  }
+
+  /* ---------- storage ----------
+     localStorage stays the synchronous source of truth so load()/save() keep
+     their signatures. Every write is mirrored into SharedPreferences, which
+     survives a "clear app data" wipe of the WebView. */
+  var Pref = P.Preferences;
+  var SK = "sp404mk2-layers-v1"; // must match SK in reference/index.html
+
+  if (Pref) {
+    var origSave = window.save;
+    window.save = function () {
+      origSave.apply(this, arguments);
+      try {
+        Pref.set({ key: SK, value: localStorage.getItem(SK) || "{}" });
+      } catch (e) {}
+    };
+
+    /* The app already ran load() before this script executed, so rehydration is
+       a repair pass: only when localStorage is empty and Preferences is not. */
+    Pref.get({ key: SK })
+      .then(function (r) {
+        var backup = r && r.value;
+        if (!backup) return;
+        if (localStorage.getItem(SK)) return; // localStorage wins when present
+
+        var o = JSON.parse(backup);
+        if (!o || typeof o !== "object") return;
+
+        localStorage.setItem(SK, backup);
+        store = o; // global lexical binding from the reference
+        store.boxes = store.boxes || {};
+        st.ctx = store.ctx || st.ctx;
+        st.deck = store.deck || st.deck;
+        st.dir = store.dir || st.dir;
+        st.input = store.input || st.input;
+        render();
+      })
+      .catch(function () {});
+  }
+
+  /* ---------- hardware back ----------
+     Registering a listener suppresses Capacitor's default history navigation,
+     so this owns the whole back stack: sheet -> Explore tab -> exit.
+     closeSheet() does its own history.back(), which keeps the pushState entry
+     the sheet added from leaking. */
+  var App = P.App;
+  if (App) {
+    App.addListener("backButton", function () {
+      var sheet = document.getElementById("sheet");
+      if (sheet && sheet.classList.contains("open")) {
+        closeSheet();
+        return;
+      }
+      if (st.tab !== "explore") {
+        st.tab = "explore";
+        render();
+        window.scrollTo(0, 0);
+        return;
+      }
+      App.exitApp();
+    });
+  }
+})();