initial commit

.gitignore

@@ -0,0 +1 @@
+*.bak

README.md

@@ -0,0 +1,4 @@
+Overte WWW
+==========
+
+Overte static assets

index.html

@@ -0,0 +1,15 @@
+<pre>
+              *
+             / \
+            /___\
+           ( o o )            * *
+           )  L  (           /   * *
+   ________()(-)()________  /     * * *
+ E\| _____ )()()() ______ |/B     * * *
+   |/      ()()()(       \|      * * * *
+           | )() |
+           /     \
+          / *  *  \
+         /   *  *  \
+        / *_  *  _  \   wizards see you
+</pre>

scripts/manifoldDomain.js

@@ -0,0 +1,116 @@
+//
+// manifoldDomain.js — Manifold Domain Script
+//
+// Assignment client script — do NOT wrap in an IIFE.
+// Requires EntityViewer to be initialized before entity queries work.
+//
+// Deploy via Domain Settings > Scripts.
+//
+
+var WS_URL      = "wss://wizards.cyou/ws";
+var SCAN_CENTER = { x: 0, y: 0, z: 0 };
+var SCAN_RADIUS = 500;
+
+var ws             = null;
+var reconnectTimer = null;
+var heartbeatTimer = null;
+var isReady        = false;
+
+// ── EntityViewer init ────────────────────────────────────────────
+// AC scripts have no spatial presence — must set up EntityViewer
+// before findEntitiesByType will return anything.
+
+var initInterval = Script.setInterval(function () {
+    if (Entities.serversExist() && Entities.canRez()) {
+        EntityViewer.setPosition(SCAN_CENTER);
+        EntityViewer.setCenterRadius(SCAN_RADIUS);
+        EntityViewer.queryOctree();
+        Script.clearInterval(initInterval);
+
+        Script.setTimeout(function () {
+            isReady = true;
+            print("[Manifold] EntityViewer ready");
+            connect();
+            // Re-query octree periodically so newly spawned entities stay visible
+            heartbeatTimer = Script.setInterval(function () {
+                EntityViewer.queryOctree();
+            }, 10000);
+        }, 2000);
+    }
+}, 500);
+
+// ── entity cleanup ───────────────────────────────────────────────
+
+function deleteClonesFor(username) {
+    if (!isReady) return;
+    EntityViewer.queryOctree();
+    Script.setTimeout(function () {
+        var ids = Entities.findEntitiesByType("Shape", SCAN_CENTER, SCAN_RADIUS);
+        var deleted = 0;
+        ids.forEach(function (id) {
+            try {
+                var ud = JSON.parse(Entities.getEntityProperties(id, ["userData"]).userData || "{}");
+                if (ud.manifoldClone && ud.owner === username) {
+                    Entities.deleteEntity(id);
+                    deleted++;
+                }
+            } catch (e) {}
+        });
+        print("[Manifold] deleted " + deleted + " clone(s) for " + username);
+    }, 1000);
+}
+
+// ── websocket ────────────────────────────────────────────────────
+
+function connect() {
+    print("[Manifold] Connecting to " + WS_URL);
+    ws = new WebSocket(WS_URL);
+
+    ws.onopen = function () {
+        print("[Manifold] Connected");
+        if (reconnectTimer) {
+            Script.clearTimeout(reconnectTimer);
+            reconnectTimer = null;
+        }
+    };
+
+    ws.onmessage = function (event) {
+        try {
+            var msg = JSON.parse(event.data);
+            switch (msg.type) {
+                case "user:connected":
+                    print("[Manifold] >>> " + msg.username + " joined");
+                    break;
+                case "user:disconnected":
+                    print("[Manifold] <<< " + msg.username + " left");
+                    deleteClonesFor(msg.username);
+                    break;
+                case "recall":
+                    print("[Manifold] recall for " + msg.username);
+                    deleteClonesFor(msg.username);
+                    break;
+            }
+        } catch (e) {
+            print("[Manifold] message parse error: " + e);
+        }
+    };
+
+    ws.onerror = function (err) {
+        print("[Manifold] WS error: " + JSON.stringify(err));
+    };
+
+    ws.onclose = function (event) {
+        print("[Manifold] Disconnected (code=" + event.code + "). Reconnecting in 5s...");
+        ws = null;
+        reconnectTimer = Script.setTimeout(connect, 5000);
+    };
+}
+
+// ── lifecycle ────────────────────────────────────────────────────
+
+Script.scriptEnding.connect(function () {
+    print("[Manifold] script ending");
+    if (reconnectTimer) { Script.clearTimeout(reconnectTimer); }
+    if (heartbeatTimer) { Script.clearInterval(heartbeatTimer); }
+    if (ws) { ws.close(); ws = null; }
+});

scripts/shelfShape.js

@@ -0,0 +1,186 @@
+//
+// shelfShape.js — Manifold Shop Entity Script
+//
+// Attach to each shelf shape entity. Set userData to:
+//   {"shapeId": "tetrahedron"}
+//
+// Clones are domain-owned. The domain script (manifoldDomain.js) handles
+// all cleanup via WebSocket presence events and recall messages.
+//
+
+(function () {
+    var API_BASE     = "https://wizards.cyou/api";
+    var SPAWN_OFFSET = { x: 0, y: 0.3, z: 0.5 };
+
+    var SHAPE_TYPE = {
+        tetrahedron:  "Tetrahedron",
+        hexahedron:   "Cube",
+        octahedron:   "Octahedron",
+        dodecahedron: "Dodecahedron",
+        icosahedron:  "Icosahedron",
+    };
+
+    var SHAPE_COLOR = {
+        tetrahedron:  { red: 255, green: 180, blue:  60 },
+        hexahedron:   { red: 180, green: 220, blue: 255 },
+        octahedron:   { red: 140, green: 255, blue: 180 },
+        dodecahedron: { red: 255, green: 120, blue: 180 },
+        icosahedron:  { red: 200, green: 140, blue: 255 },
+    };
+
+    var _entityID = null;
+    var _shapeId  = null;
+    var _token    = null;
+    var _username = null;
+    var _busy     = false;
+
+    // ── helpers ──────────────────────────────────────────────────
+
+    function getShapeId() {
+        try {
+            var props = Entities.getEntityProperties(_entityID, ["userData"]);
+            return JSON.parse(props.userData || "{}").shapeId || null;
+        } catch (e) { return null; }
+    }
+
+    function notify(msg) {
+        Window.displayAnnouncement(msg);
+    }
+
+    // ── session ──────────────────────────────────────────────────
+
+    function ensureSession(cb) {
+        if (_token) { cb(null, _token); return; }
+        _username = MyAvatar.displayName;
+        if (!_username) { cb("Not logged in to Overte"); return; }
+
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", API_BASE + "/session", true);
+        xhr.setRequestHeader("Content-Type", "application/json");
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState !== 4) return;
+            if (xhr.status === 200) {
+                try {
+                    _token = JSON.parse(xhr.responseText).token;
+                    Script.setTimeout(function () { _token = null; }, 5 * 60 * 1000);
+                    cb(null, _token);
+                } catch (e) { cb("Session parse error"); }
+            } else if (xhr.status === 403) {
+                cb("Must be in-world to use the shop");
+            } else {
+                cb("Session error (" + xhr.status + ")");
+            }
+        };
+        xhr.send(JSON.stringify({ username: _username }));
+    }
+
+    // ── inventory ────────────────────────────────────────────────
+
+    function getInventory(cb) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", API_BASE + "/inventory/" + _username, true);
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState !== 4) return;
+            if (xhr.status === 200) {
+                try { cb(null, JSON.parse(xhr.responseText).inventory || {}); }
+                catch (e) { cb("Inventory parse error"); }
+            } else {
+                cb("Inventory fetch failed (" + xhr.status + ")");
+            }
+        };
+        xhr.send();
+    }
+
+    function countLiveClones(username, shapeId) {
+        var results = Entities.findEntitiesByType("Shape", MyAvatar.position, 100);
+        var count = 0;
+        results.forEach(function (id) {
+            try {
+                var ud = JSON.parse(Entities.getEntityProperties(id, ["userData"]).userData || "{}");
+                if (ud.manifoldClone && ud.owner === username && ud.shapeId === shapeId) count++;
+            } catch (e) {}
+        });
+        return count;
+    }
+
+    // ── spawn ────────────────────────────────────────────────────
+
+    function spawnClone() {
+        var shelfProps = Entities.getEntityProperties(_entityID, ["position", "rotation"]);
+        var spawnPos   = Vec3.sum(shelfProps.position,
+                            Vec3.multiplyQbyV(shelfProps.rotation, SPAWN_OFFSET));
+
+        Entities.addEntity({
+            type:          "Shape",
+            shape:         SHAPE_TYPE[_shapeId] || "Sphere",
+            name:          "manifold_" + _shapeId + "_" + _username,
+            position:      spawnPos,
+            dimensions:    { x: 0.25, y: 0.25, z: 0.25 },
+            color:         SHAPE_COLOR[_shapeId] || { red: 200, green: 200, blue: 200 },
+            userData:      JSON.stringify({ manifoldClone: true, owner: _username, shapeId: _shapeId }),
+            dynamic:       true,
+            grabbable:     true,
+            restitution:   0.6,
+            friction:      0.4,
+            density:       800,
+            emissive:      true,
+            lifetime:      3600,   // hard ceiling fallback
+        }, "domain");
+    }
+
+    // ── click handler ────────────────────────────────────────────
+
+    function onClickDown() {
+        if (_busy) return;
+        _busy = true;
+
+        _shapeId = getShapeId();
+        if (!_shapeId) {
+            notify("Shop item not configured (missing shapeId in userData)");
+            _busy = false;
+            return;
+        }
+
+        ensureSession(function (err) {
+            if (err) { notify(err); _busy = false; return; }
+
+            getInventory(function (err, inventory) {
+                if (err) { notify(err); _busy = false; return; }
+
+                var owned = inventory[_shapeId] || 0;
+                if (owned === 0) {
+                    notify("You don't own any " + _shapeId + "s. Buy one in the Manifold tablet.");
+                    _busy = false;
+                    return;
+                }
+
+                var live = countLiveClones(_username, _shapeId);
+                if (live >= owned) {
+                    notify("You have " + live + "/" + owned + " " + _shapeId +
+                           "(s) active. Recall them or buy more.");
+                    _busy = false;
+                    return;
+                }
+
+                spawnClone();
+                notify("Spawned " + _shapeId + " (" + (live + 1) + "/" + owned + " active)");
+                _busy = false;
+            });
+        });
+    }
+
+    // ── lifecycle ────────────────────────────────────────────────
+
+    this.preload = function (entityID) {
+        _entityID = entityID;
+    };
+
+    this.clickDownOnEntity = function () {
+        onClickDown();
+    };
+
+    this.unload = function () {
+        _token = null;
+        _username = null;
+    };
+});

scripts/spawnShapeRotator.js

@@ -0,0 +1,61 @@
+(function() {
+    var ORBIT_RADIUS = 2.5;      // distance from origin
+    var ORBIT_SPEED = 0.2;     // radians per second
+    var SPIN_SPEED = 1.5;      // radians per second
+    var ORBIT_Y = 2;         // height above ground
+    
+    var solids = ["tetrahedron", "cube", "octahedron", "dodecahedron", "icosahedron"];
+    var count = solids.length;
+    var entities = {};
+    var startTime = Date.now();
+
+    function findEntities() {
+        var found = Entities.findEntities({x:0, y:0, z:0}, 200);
+        solids.forEach(function(name) {
+            found.forEach(function(id) {
+                var props = Entities.getEntityProperties(id, ["name"]);
+                if (props.name === name) {
+                    entities[name] = id;
+                }
+            });
+        });
+        
+        // If we didn't find all 5, try again shortly
+        if (Object.keys(entities).length < solids.length) {
+            print("Only found " + Object.keys(entities).length + " solids, retrying...");
+            Script.setTimeout(findEntities, 500);
+        } else {
+            print("Found all solids, starting update loop");
+            Script.update.connect(update);
+        }
+    }
+
+    // Initial delay before first attempt
+    Script.setTimeout(findEntities, 500);
+
+    function update(dt) {
+        var elapsed = (Date.now() - startTime) / 1000;
+        
+        solids.forEach(function(name, i) {
+            var id = entities[name];
+            if (!id) return;
+            
+            // orbit angle offset per solid so they're evenly spaced
+            var orbitAngle = elapsed * ORBIT_SPEED + (i / count) * 2 * Math.PI;
+            
+            var x = Math.cos(orbitAngle) * ORBIT_RADIUS;
+            var z = Math.sin(orbitAngle) * ORBIT_RADIUS;
+            
+            // spin around local Y axis
+            var spinAngle = elapsed * SPIN_SPEED;
+            
+            Entities.editEntity(id, {
+                position: { x: x, y: ORBIT_Y, z: z },
+                rotation: Quat.fromPitchYawRollRadians(spinAngle, spinAngle, -spinAngle * 0.5)
+            });
+        });
+    }
+
+    Script.update.connect(update);
+    findEntities();
+})();

scripts/tablet.js

@@ -0,0 +1,36 @@
+(function() {
+    var APP_NAME = "MANIFOLD"
+    var APP_URL = "https://wizards.cyou/tablet/manifold.html";
+    var APP_ICON = "https://wizards.cyou/tablet/manifold-icon.svg";
+
+    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    var button = tablet.addButton({
+        text: APP_NAME,
+        icon: APP_ICON
+    });
+
+    var webEventHandler = function(data) {
+        try {
+            var msg = JSON.parse(data);
+            if (msg.type === "ready") {
+                var username = AccountServices.username || "";
+                tablet.emitScriptEvent(JSON.stringify({
+                    type: "username",
+                    username: username
+                }));
+            }
+        } catch(e) {
+            print("Manifold web event error: " + e);
+        }
+    };
+
+    button.clicked.connect(function() {
+        tablet.gotoWebScreen(APP_URL);
+        tablet.webEventReceived.connect(webEventHandler);
+    });
+
+    Script.scriptEnding.connect(function() {
+        tablet.removeButton(button);
+        tablet.webEventReceived.disconnect(webEventHandler);
+    });
+})();

tablet/manifold-icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.1 38.1">
+  <path fill-rule="evenodd" stroke="#000" stroke-width="6.35" d="M19.05 10.5833l10.9985 19.05H8.0515z"/>
+  <path fill="none" stroke="#fff" stroke-width="2.1167" d="M19.05 23.2833v-12.7m-10.9985 19.05l10.9985-6.35 10.9985 6.35M19.05 10.5833l10.9985 19.05H8.0515z"/>
+</svg>

tablet/manifold.html

@@ -0,0 +1,786 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>MANIFOLD</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Cinzel:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg:       #0e0e1a;
+            --panel:    #13132a;
+            --border:   #2a2a4a;
+            --gold:     #ffd700;
+            --gold-dim: #a08800;
+            --text:     #c8c8e0;
+            --muted:    #555570;
+            --red:      #ff4444;
+            --mono:     'Share Tech Mono', monospace;
+            --serif:    'Cinzel', serif;
+        }
+
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+
+        body {
+            background: var(--bg);
+            color: var(--text);
+            font-family: var(--mono);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow-x: hidden;
+        }
+
+        /* ── subtle grid bg ── */
+        body::before {
+            content: '';
+            position: fixed;
+            inset: 0;
+            background-image:
+                linear-gradient(var(--border) 1px, transparent 1px),
+                linear-gradient(90deg, var(--border) 1px, transparent 1px);
+            background-size: 40px 40px;
+            opacity: 0.25;
+            pointer-events: none;
+        }
+
+        /* ── header ── */
+        header {
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            background: var(--bg);
+            border-bottom: 1px solid var(--border);
+            padding: 12px 16px 10px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .logo {
+            width: 36px;
+            height: 36px;
+            flex-shrink: 0;
+            opacity: 0.9;
+        }
+
+        .header-text {
+            flex: 1;
+        }
+
+        .app-title {
+            font-family: var(--serif);
+            font-size: 13px;
+            letter-spacing: 4px;
+            color: var(--gold);
+            line-height: 1;
+        }
+
+        .app-sub {
+            font-size: 9px;
+            color: var(--muted);
+            letter-spacing: 2px;
+            margin-top: 3px;
+            text-transform: uppercase;
+        }
+
+        .balance-block {
+            text-align: right;
+        }
+
+        .balance-label {
+            font-size: 8px;
+            color: var(--muted);
+            letter-spacing: 2px;
+            text-transform: uppercase;
+        }
+
+        .balance-value {
+            font-size: 22px;
+            font-weight: bold;
+            color: var(--gold);
+            line-height: 1.1;
+            transition: color 0.3s;
+        }
+
+        .balance-value.flash {
+            color: #fff;
+        }
+
+        .balance-unit {
+            font-size: 9px;
+            color: var(--gold-dim);
+            letter-spacing: 2px;
+        }
+
+        /* ── status bar ── */
+        #status-bar {
+            font-size: 9px;
+            color: var(--muted);
+            text-align: center;
+            padding: 4px 16px;
+            border-bottom: 1px solid var(--border);
+            letter-spacing: 1px;
+            min-height: 20px;
+            transition: color 0.3s;
+        }
+
+        #status-bar.error { color: var(--red); }
+        #status-bar.ok    { color: #44cc88; }
+
+
+        /* -- cleanup bar */
+        .cleanup-bar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 8px 16px;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .cleanup-label {
+            font-size: 9px;
+            color: var(--muted);
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .btn-cleanup {
+            background: transparent;
+            border: 1px solid var(--border);
+            color: var(--muted);
+            font-family: var(--mono);
+            font-size: 9px;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            padding: 4px 10px;
+            cursor: pointer;
+            transition: border-color 0.15s, color 0.15s;
+        }
+
+        .btn-cleanup:hover {
+            border-color: var(--gold-dim);
+            color: var(--gold);
+        }
+
+        .btn-cleanup.ok {
+            border-color: #44cc88;
+            color: #44cc88;
+        }
+
+        /* ── shape grid ── */
+        .shapes-header {
+            font-family: var(--serif);
+            font-size: 9px;
+            letter-spacing: 3px;
+            color: var(--muted);
+            text-transform: uppercase;
+            padding: 14px 16px 8px;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .shape-grid {
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            flex: 1;
+        }
+
+        /* ── shape card ── */
+        .shape-card {
+            background: var(--panel);
+            border: 1px solid var(--border);
+            display: grid;
+            grid-template-columns: 80px 1fr auto;
+            grid-template-rows: auto auto;
+            gap: 0;
+            position: relative;
+            overflow: hidden;
+            transition: border-color 0.2s;
+        }
+
+        .shape-card::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .shape-card:hover::before { opacity: 1; }
+        .shape-card:hover { border-color: var(--gold-dim); }
+
+        /* gif frame */
+        .shape-gif {
+            grid-row: 1 / 3;
+            width: 80px;
+            height: 80px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-right: 1px solid var(--border);
+            background: #0a0a18;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .shape-gif img {
+            width: 72px;
+            height: 72px;
+            image-rendering: pixelated;
+            filter: drop-shadow(0 0 6px rgba(255,215,0,0.3));
+        }
+
+        /* corner marks */
+        .shape-gif::before,
+        .shape-gif::after {
+            content: '';
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-color: var(--gold-dim);
+            border-style: solid;
+        }
+        .shape-gif::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
+        .shape-gif::after  { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }
+
+        /* info row */
+        .shape-info {
+            padding: 10px 10px 4px;
+            display: flex;
+            flex-direction: column;
+            gap: 3px;
+        }
+
+        .shape-name {
+            font-family: var(--serif);
+            font-size: 11px;
+            color: #e8e8ff;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        .shape-meta {
+            font-size: 9px;
+            color: var(--muted);
+            letter-spacing: 1px;
+        }
+
+        .shape-meta span {
+            color: var(--gold-dim);
+        }
+
+        /* owned badge */
+        .shape-owned {
+            padding: 10px 10px 4px;
+            text-align: right;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            gap: 3px;
+        }
+
+        .owned-count {
+            font-size: 18px;
+            color: var(--text);
+            line-height: 1;
+        }
+
+        .owned-count.nonzero {
+            color: var(--gold);
+        }
+
+        .owned-label {
+            font-size: 8px;
+            color: var(--muted);
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+
+        /* buy button row */
+        .shape-actions {
+            grid-column: 2 / 4;
+            padding: 0 10px 8px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .price-tag {
+            font-size: 11px;
+            color: var(--gold);
+            letter-spacing: 1px;
+        }
+
+        .price-tag .unit {
+            font-size: 8px;
+            color: var(--gold-dim);
+            margin-left: 2px;
+        }
+
+        .btn-buy {
+            background: transparent;
+            border: 1px solid var(--gold-dim);
+            color: var(--gold);
+            font-family: var(--mono);
+            font-size: 9px;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            padding: 4px 10px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            transition: background 0.15s, border-color 0.15s, color 0.15s;
+        }
+
+        .btn-buy:hover:not(:disabled) {
+            background: rgba(255,215,0,0.1);
+            border-color: var(--gold);
+        }
+
+        .btn-buy:disabled {
+            opacity: 0.4;
+            cursor: default;
+        }
+
+        .btn-buy.loading {
+            color: transparent;
+        }
+
+        .btn-buy.loading::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            margin: auto;
+            width: 10px;
+            height: 10px;
+            border: 1px solid var(--gold-dim);
+            border-top-color: var(--gold);
+            border-radius: 50%;
+            animation: spin 0.6s linear infinite;
+        }
+
+        .btn-buy.success {
+            border-color: #44cc88;
+            color: #44cc88;
+        }
+
+        .btn-buy.fail {
+            border-color: var(--red);
+            color: var(--red);
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        /* ── logged out state ── */
+        .logged-out {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 40px 32px;
+            text-align: center;
+            gap: 12px;
+        }
+
+        .logged-out p {
+            font-size: 12px;
+            color: var(--muted);
+            line-height: 1.8;
+            letter-spacing: 1px;
+        }
+
+        .divider {
+            width: 40px;
+            height: 1px;
+            background: var(--border);
+        }
+
+        /* ── connecting overlay ── */
+        #connecting {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            font-size: 10px;
+            letter-spacing: 3px;
+            color: var(--muted);
+            text-transform: uppercase;
+        }
+
+        #connecting::before {
+            content: '';
+            width: 8px; height: 8px;
+            border: 1px solid var(--gold-dim);
+            border-top-color: var(--gold);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            flex-shrink: 0;
+        }
+    </style>
+</head>
+<body>
+
+    <header>
+        <img class="logo" src="manifold-icon.svg">
+        <div class="header-text">
+            <div class="app-title">MANIFOLD</div>
+            <div class="app-sub">Platonic Exchange</div>
+        </div>
+        <div class="balance-block">
+            <div class="balance-label">Balance</div>
+            <div class="balance-value" id="balance">—</div>
+            <div class="balance-unit">VERTS</div>
+        </div>
+    </header>
+
+    <div id="status-bar">Initialising...</div>
+
+    <div id="connecting"></div>
+
+    <script>
+    var API_BASE  = "https://wizards.cyou/api";
+    var GIF_BASE  = "gifs/";
+
+    var SHAPES = [
+        { id: "tetrahedron",  faces: 4,  price: 400  },
+        { id: "hexahedron",   faces: 6,  price: 600  },
+        { id: "octahedron",   faces: 8,  price: 800  },
+        { id: "dodecahedron", faces: 12, price: 1200 },
+        { id: "icosahedron",  faces: 20, price: 2000 },
+    ];
+
+    var state = {
+        username:  null,
+        token:     null,
+        balance:   0,
+        inventory: {},
+        tickTimer: null,
+        tokenRefreshTimer: null,
+    };
+
+    // ── DOM helpers ──────────────────────────────────────────────
+
+    function setStatus(msg, cls) {
+        var el = document.getElementById("status-bar");
+        el.textContent = msg;
+        el.className = cls || "";
+    }
+
+    function setBalance(n) {
+        var el = document.getElementById("balance");
+        if (el.textContent !== String(n)) {
+            el.textContent = n;
+            el.classList.add("flash");
+            setTimeout(function() { el.classList.remove("flash"); }, 300);
+        }
+        state.balance = n;
+        // update disabled states
+        SHAPES.forEach(function(s) {
+            var btn = document.getElementById("btn-" + s.id);
+            if (btn && !btn.classList.contains("loading")) {
+                btn.disabled = n < s.price;
+            }
+        });
+    }
+
+    function setOwned(shape, count) {
+        state.inventory[shape] = count;
+        var el = document.getElementById("owned-" + shape);
+        if (el) {
+            el.textContent = count;
+            el.className = "owned-count" + (count > 0 ? " nonzero" : "");
+        }
+    }
+
+    // ── API calls ────────────────────────────────────────────────
+
+    function fetchBalance() {
+        fetch(API_BASE + "/balance/" + state.username)
+            .then(function(r) { return r.json(); })
+            .then(function(d) { setBalance(d.balance); })
+            .catch(function() { setStatus("Balance fetch error", "error"); });
+    }
+
+    function fetchInventory() {
+        fetch(API_BASE + "/inventory/" + state.username)
+            .then(function(r) { return r.json(); })
+            .then(function(d) {
+                SHAPES.forEach(function(s) {
+                    setOwned(s.id, d.inventory[s.id] || 0);
+                });
+            })
+            .catch(function() {});
+    }
+
+    function refreshSession() {
+        fetch(API_BASE + "/session", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ username: state.username }),
+        })
+        .then(function(r) { return r.json(); })
+        .then(function(d) { state.token = d.token; })
+        .catch(function() { setStatus("Session refresh failed", "error"); });
+    }
+
+    function buyShape(shapeId, price) {
+        var btn = document.getElementById("btn-" + shapeId);
+        btn.disabled = true;
+        btn.classList.add("loading");
+
+        fetch(API_BASE + "/purchase", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": "Bearer " + state.token,
+            },
+            body: JSON.stringify({ shape: shapeId }),
+        })
+        .then(function(r) {
+            if (!r.ok) return r.text().then(function(t) { throw new Error(t.trim()); });
+            return r.json();
+        })
+        .then(function(d) {
+            btn.classList.remove("loading");
+            btn.classList.add("success");
+            btn.textContent = "acquired";
+            setBalance(d.balance);
+            setOwned(shapeId, d.owned);
+            setStatus("Acquired " + shapeId + " (" + d.owned + " owned)", "ok");
+            setTimeout(function() {
+                btn.classList.remove("success");
+                btn.textContent = "acquire";
+                btn.disabled = state.balance < price;
+            }, 1800);
+        })
+        .catch(function(err) {
+            btn.classList.remove("loading");
+            btn.classList.add("fail");
+            btn.textContent = err.message.includes("insufficient") ? "no funds" : "error";
+            setStatus(err.message, "error");
+            setTimeout(function() {
+                btn.classList.remove("fail");
+                btn.textContent = "acquire";
+                btn.disabled = state.balance < price;
+            }, 2000);
+        });
+    }
+
+    // ── render ───────────────────────────────────────────────────
+
+    function recallClones(btn) {
+        if (!state.username || !state.token) return;
+        var orig = btn.textContent;
+        btn.disabled = true;
+        btn.textContent = "recalling...";
+
+        fetch(API_BASE + "/recall", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": "Bearer " + state.token,
+            },
+            body: JSON.stringify({ username: state.username }),
+        })
+        .then(function(r) {
+            btn.classList.add("ok");
+            btn.textContent = r.ok ? "recalled" : "error";
+            setStatus(r.ok ? "Recall sent" : "Recall failed", r.ok ? "ok" : "error");
+        })
+        .catch(function() {
+            btn.textContent = "error";
+            setStatus("Recall failed", "error");
+        })
+        .finally(function() {
+            btn.disabled = false;
+            setTimeout(function() {
+                btn.classList.remove("ok");
+                btn.textContent = orig;
+                setStatus("Connected  //  earning 1 VERT/sec");
+            }, 2000);
+        });
+    }
+
+    function renderShapes() {
+        var container = document.getElementById("connecting");
+        container.id = "shape-area";
+        container.className = "";
+        container.style = "";
+
+        var header = document.createElement("div");
+        header.className = "shapes-header";
+        header.textContent = "Shape Inventory";
+        container.appendChild(header);
+
+        // cleanup bar
+        var cleanupBar = document.createElement("div");
+        cleanupBar.className = "cleanup-bar";
+        var cleanupLabel = document.createElement("span");
+        cleanupLabel.className = "cleanup-label";
+        cleanupLabel.textContent = "Recall all your shapes";
+        var cleanupBtn = document.createElement("button");
+        cleanupBtn.className = "btn-cleanup";
+        cleanupBtn.textContent = "recall";
+        cleanupBtn.onclick = function() { recallClones(cleanupBtn); };
+        cleanupBar.appendChild(cleanupLabel);
+        cleanupBar.appendChild(cleanupBtn);
+        container.appendChild(cleanupBar);
+
+        var grid = document.createElement("div");
+        grid.className = "shape-grid";
+
+        SHAPES.forEach(function(s) {
+            var card = document.createElement("div");
+            card.className = "shape-card";
+
+            // gif frame
+            var gifWrap = document.createElement("div");
+            gifWrap.className = "shape-gif";
+            var img = document.createElement("img");
+            img.src = GIF_BASE + s.id + ".gif";
+            img.alt = s.id;
+            gifWrap.appendChild(img);
+
+            // info
+            var info = document.createElement("div");
+            info.className = "shape-info";
+            var name = document.createElement("div");
+            name.className = "shape-name";
+            name.textContent = s.id;
+            var meta = document.createElement("div");
+            meta.className = "shape-meta";
+            meta.innerHTML = '<span>' + s.faces + '</span> faces';
+            info.appendChild(name);
+            info.appendChild(meta);
+
+            // owned count
+            var ownedBlock = document.createElement("div");
+            ownedBlock.className = "shape-owned";
+            var ownedNum = document.createElement("div");
+            ownedNum.className = "owned-count";
+            ownedNum.id = "owned-" + s.id;
+            ownedNum.textContent = state.inventory[s.id] || 0;
+            var ownedLbl = document.createElement("div");
+            ownedLbl.className = "owned-label";
+            ownedLbl.textContent = "owned";
+            ownedBlock.appendChild(ownedNum);
+            ownedBlock.appendChild(ownedLbl);
+
+            // actions row
+            var actions = document.createElement("div");
+            actions.className = "shape-actions";
+            var priceTag = document.createElement("div");
+            priceTag.className = "price-tag";
+            priceTag.innerHTML = s.price + '<span class="unit">VERTS</span>';
+            var btn = document.createElement("button");
+            btn.className = "btn-buy";
+            btn.id = "btn-" + s.id;
+            btn.textContent = "acquire";
+            btn.disabled = state.balance < s.price;
+            (function(shapeId, shapePrice) {
+                btn.onclick = function() { buyShape(shapeId, shapePrice); };
+            })(s.id, s.price);
+            actions.appendChild(priceTag);
+            actions.appendChild(btn);
+
+            card.appendChild(gifWrap);
+            card.appendChild(info);
+            card.appendChild(ownedBlock);
+            card.appendChild(actions);
+            grid.appendChild(card);
+        });
+
+        container.appendChild(grid);
+    }
+
+    function renderLoggedOut() {
+        var container = document.getElementById("connecting");
+        container.id = "logged-out-area";
+        container.className = "logged-out";
+        container.innerHTML =
+            '<div class="divider"></div>' +
+            '<p>Login to your Overte account<br>to access Universal Shape Income<br>and the shape exchange.</p>' +
+            '<div class="divider"></div>';
+    }
+
+    // ── init ─────────────────────────────────────────────────────
+
+    function startSession(username) {
+        state.username = username;
+        setStatus("Verifying connection...");
+
+        fetch(API_BASE + "/session", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ username: username }),
+        })
+        .then(function(r) {
+            if (!r.ok) throw new Error("not connected");
+            return r.json();
+        })
+        .then(function(d) {
+            state.token = d.token;
+            setStatus("Connected  //  earning 1 VERT/sec");
+
+            // fetch initial data, then render
+            return Promise.all([
+                fetch(API_BASE + "/balance/" + username).then(function(r) { return r.json(); }),
+                fetch(API_BASE + "/inventory/" + username).then(function(r) { return r.json(); }),
+            ]);
+        })
+        .then(function(results) {
+            state.balance = results[0].balance;
+            SHAPES.forEach(function(s) {
+                state.inventory[s.id] = results[1].inventory[s.id] || 0;
+            });
+
+            renderShapes();
+
+            // update balance display after render
+            setBalance(state.balance);
+            SHAPES.forEach(function(s) { setOwned(s.id, state.inventory[s.id]); });
+
+            // tick: refresh balance every second
+            state.tickTimer = setInterval(fetchBalance, 1000);
+
+            // token refresh every 5 minutes
+            state.tokenRefreshTimer = setInterval(refreshSession, 5 * 60 * 1000);
+        })
+        .catch(function(err) {
+            setStatus("Connection error: " + err.message, "error");
+            renderLoggedOut();
+        });
+    }
+
+    function init() {
+        if (typeof EventBridge !== "undefined") {
+            EventBridge.scriptEventReceived.connect(function(data) {
+                var msg = JSON.parse(data);
+                if (msg.type === "username") {
+                    if (!msg.username) {
+                        renderLoggedOut();
+                    } else {
+                        startSession(msg.username);
+                    }
+                }
+            });
+            EventBridge.emitWebEvent(JSON.stringify({ type: "ready" }));
+        } else {
+            // dev fallback
+            startSession("testuser");
+        }
+    }
+
+    window.onload = init;
+    </script>
+</body>
+</html>

tablet/manifold.html.bak

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>MANIFOLD</title>
+    <style>
+        body {
+            background: #1a1a2e;
+            color: #ffffff;
+            font-family: sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        .logo {
+            width: 80px;
+            height: 80px;
+            margin-bottom: 20px;
+        }
+
+        .title {
+            font-size: 14px;
+            text-transform: uppercase;
+            letter-spacing: 3px;
+            color: #888;
+            margin-bottom: 8px;
+        }
+
+        .balance {
+            font-size: 48px;
+            font-weight: bold;
+            color: #ffd700;
+        } 
+
+        .unit {
+            font-size: 18px;
+            color: #ffd700;
+            margin-top: 4px;
+            margin-bottom: 32px;
+        }
+
+        .status {
+            font-size: 12px;
+            color: #555;
+        }
+
+        .login-msg {
+            font-size: 16px;
+            color: #888;
+            text-align: center;
+            padding: 0 40px;
+            line-height: 1.6;
+        }
+    </style>
+</head>
+<body>
+    <img class="logo" src="manifold-icon.svg">
+    <div class="title">Universal Shape Income</div>
+    <div class="balance" id="balance">...</div>
+    <div class="unit">VERTS</div>
+    <div class="status" id="status">Fetching balance...</div>
+
+    <script>
+        var API_BASE = "https://wizards.cyou/api";
+
+        function fetchBalance(username) {
+            fetch(API_BASE + "/balance/" + username)
+                .then(function(r) { return r.json(); })
+                .then(function(data) {
+                    document.getElementById("balance").textContent = data.balance;
+                    document.getElementById("status").textContent =
+                        "Earning 1 VERT per second while connected";
+                })
+                .catch(function(e) {
+                    document.getElementById("status").textContent = "Error fetching balance";
+                });
+        }
+
+        function init() {
+            if (typeof EventBridge !== "undefined") {
+                EventBridge.scriptEventReceived.connect(function(data) {
+                    var msg = JSON.parse(data);
+                    if (msg.type === "username") {
+                        if (!msg.username) {
+                            showLoggedOut();
+                        } else {
+                            // fetch immediately then every second
+                            fetchBalance(msg.username);
+                            setInterval(function() {
+                                fetchBalance(msg.username);
+                            }, 1000);
+                        }
+                    }
+                });
+                EventBridge.emitWebEvent(JSON.stringify({ type: "ready" }));
+            } else {
+                fetchBalance("testuser");
+                setInterval(function() { fetchBalance("testuser"); }, 1000);
+            }
+        }
+
+        function showLoggedOut() {
+            document.getElementById("balance").textContent = "—";
+            document.getElementById("status").textContent = "";
+            document.querySelector(".unit").style.display = "none";
+            var msg = document.createElement("div");
+            msg.className = "login-msg";
+            msg.textContent = "Login to your Overte account to receive Universal Shape Income";
+            document.body.appendChild(msg);
+        }
+
+        window.onload = init;
+    </script>
+</body>
+</html>