Extend TypeScript client and add Leaflet asset demo.

This adds typed asset APIs to the geo client, covers the 3D/image upload-share flow in integration tests, and introduces a simple Leaflet web demo that places objects on map features and manages sharing visibility via backend links. Made-with: Cursor
2026-03-02 21:21:52 +00:00
parent f6f46f6db1
commit 1292f204a4
14 changed files with 1009 additions and 47 deletions
@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Momswap Leaflet 3D Assets Demo</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""
+    />
+    <style>
+      :root {
+        color-scheme: dark;
+      }
+      body {
+        margin: 0;
+        font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+        background: #0b1220;
+        color: #dbe5f6;
+      }
+      .layout {
+        display: grid;
+        grid-template-columns: 360px 1fr;
+        gap: 12px;
+        height: 100vh;
+        padding: 12px;
+        box-sizing: border-box;
+      }
+      .panel {
+        background: #10192c;
+        border: 1px solid #24344f;
+        border-radius: 12px;
+        padding: 12px;
+        overflow: auto;
+      }
+      h1 {
+        font-size: 18px;
+        margin: 0 0 10px;
+      }
+      h2 {
+        font-size: 14px;
+        margin: 14px 0 8px;
+      }
+      label {
+        display: block;
+        font-size: 12px;
+        margin-bottom: 4px;
+        color: #9eb0ce;
+      }
+      input,
+      button,
+      select {
+        width: 100%;
+        box-sizing: border-box;
+        margin-bottom: 8px;
+        border-radius: 8px;
+        border: 1px solid #33496a;
+        background: #0d1525;
+        color: #e4ecfa;
+        padding: 8px 10px;
+      }
+      button {
+        cursor: pointer;
+      }
+      .row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+      }
+      .muted {
+        font-size: 12px;
+        color: #9eb0ce;
+      }
+      .status {
+        font-size: 12px;
+        color: #8ee3a1;
+        min-height: 18px;
+      }
+      #map {
+        border-radius: 12px;
+        border: 1px solid #24344f;
+      }
+      .asset-card {
+        border: 1px solid #314869;
+        border-radius: 8px;
+        padding: 8px;
+        margin-bottom: 8px;
+      }
+      .asset-actions {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+        margin-top: 8px;
+      }
+      @media (max-width: 980px) {
+        .layout {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="layout">
+      <div class="panel">
+        <h1>Leaflet 3D Asset Sharing Demo</h1>
+        <div class="muted">Click map to place an object, upload asset, then share via backend link.</div>
+
+        <h2>Connection</h2>
+        <label for="apiBase">API Base URL</label>
+        <input id="apiBase" value="http://localhost:8122" />
+        <button id="applyApi">Apply API URL</button>
+
+        <h2>Auth</h2>
+        <button id="ensureKeys">Ensure Keys</button>
+        <button id="register">Register</button>
+        <button id="login">Login</button>
+        <div class="muted" id="publicKeyPreview"></div>
+
+        <h2>Collection</h2>
+        <label for="collectionName">Name</label>
+        <input id="collectionName" placeholder="3D objects" value="3D objects demo" />
+        <button id="createCollection">Create Collection</button>
+        <div class="muted">Current: <span id="collectionInfo">none</span></div>
+
+        <h2>Place + Upload Asset</h2>
+        <div class="muted">1) Click map to choose location. 2) Select file. 3) Upload and link.</div>
+        <label for="assetFile">3D/Image file</label>
+        <input id="assetFile" type="file" accept=".gltf,.glb,.jpg,.jpeg,.png,.webp" />
+        <label for="assetName">Asset name</label>
+        <input id="assetName" placeholder="Palm Tree" />
+        <label for="assetDesc">Description</label>
+        <input id="assetDesc" placeholder="Low-poly palm tree" />
+        <button id="uploadAsset">Create Feature + Upload + Link</button>
+
+        <h2>Stored Assets</h2>
+        <div id="assetsList"></div>
+
+        <div class="status" id="status"></div>
+      </div>
+      <div id="map"></div>
+    </div>
+
+    <script
+      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+      crossorigin=""
+    ></script>
+    <script type="module" src="./leaflet-demo.js"></script>
+  </body>
+</html>