Files
404-Layers/native/native.js
ncode 1a8a12f7f3 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

114 lines
4.0 KiB
JavaScript

/* 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();
});
}
})();