@yz-social/civildefense.io 4.5.8 → 4.5.16

package/public/service-worker.js

@@ -1,6 +1,6 @@
 const { Request, Response, URL, clients} = self;
 // Little point in trying to automatically pull this through package.json, as we need a byte change in THIS file to trigger a new worker.
-const serviceVersion = '4.5.8';
+const serviceVersion = '4.5.16';
 
 const cacheList = [ // The files we need.
   "/",
@@ -172,13 +172,13 @@ async function cacheSource(version, event) { // Cache source in the given versio
   await Promise.all([
     // These are referenced within material web, but missing. Turns out we don't need them,
     // but let's cache empty responses to keep the console cleaner.
-    "https://esm.run/npm/lit@3.3.1/+esm",
+    "https://esm.run/npm/lit@3.3.3/+esm",
     "https://esm.run/npm/tslib@2.8.1/+esm",
-    "https://esm.run/npm/lit@3.3.1/static-html.js/+esm",
-    "https://esm.run/npm/lit@3.3.1/decorators.js/+esm",
-    "https://esm.run/npm/lit@3.3.1/directives/style-map.js/+esm",
-    "https://esm.run/npm/lit@3.3.1/directives/class-map.js/+esm",
-    "https://esm.run/npm/lit@3.3.1/directives/when.js/+esm",
+    "https://esm.run/npm/lit@3.3.3/static-html.js/+esm",
+    "https://esm.run/npm/lit@3.3.3/decorators.js/+esm",
+    "https://esm.run/npm/lit@3.3.3/directives/style-map.js/+esm",
+    "https://esm.run/npm/lit@3.3.3/directives/class-map.js/+esm",
+    "https://esm.run/npm/lit@3.3.3/directives/when.js/+esm",
     "https://esm.run/npm/lit@3.3.1/directives/live.js/+esm",
   ].map(url => cache.put(new Request(url),
                          new Response("", {headers: { "Content-Type": "text/javascript" }}))));

package/public/stylesheets/style.css

@@ -72,13 +72,31 @@ md-outlined-text-field {
     max-height: 80vh;
     overflow: auto;
 }
+/* Safari. Example dimensions are iPhone 17 pro max simulator */
+/* In landscape, regardless of compact/bottom/top setting: */
+/*   - There is a thick tabbed address bar above map. */
+/*   - Notch partially obscures logo in landscape-right, but that's ok */
+/*   - Height should be dvh (956 x 330), as lvh (440) extends below bottom of screen. */
+/* In portrait, regardless of compact/bottom/top setting: */
+/*   - There is a white space at top and bottom that is a little larger than the stuff controls displayed in it. */
+/*   - If height of map, etc, is dvh (440 x 796), everything works, including keyboard appearance and dismissal. */
+/*     Position .watching-hashtags box bottom:18px to leave space for map attribution. */
+/*   - If height of map is lvh (440 x 836) and #subPopoverControls remains dvh (.watching-hashtags bottom:0), */
+/*     then the map has a nice-ish fade under the bottom controls, without losing so much to whitespace. */
+/*     BUT: */
+/*       - It still has a hard edge to start of white, that is now directly under controls, which is ugly. */
+/*       - The map attribution is under the controls, which isn't fair. */
+/*       - I don't know how to make the keyboard work without covering the input box. */
 #map {
-    width: 100vw;
-    height: 100vh;
+    width: 100dvw;
+    height: 100dvh;
     position: absolute;
     top: 0;
     left: 0;
 }
+#mapCapture {
+    height: 100dvh;
+}
 
 .info-banner {
     position: absolute;
@@ -115,9 +133,6 @@ md-outlined-text-field {
     transition: opacity 2s;
 }
 
-#mapCapture {
-    height: 100vh;
-}
 #mapCapture > img {
     position: absolute;
     opacity: 0;
@@ -155,6 +170,7 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
     height: 100dvh;
     position: fixed;
     filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
+    --mapAttributionHeight: 18px;
 }
 #subPopoverControls > * > * {
     pointer-events: auto;
@@ -170,19 +186,64 @@ button, .leaflet-control-zoom > a, .leaflet-popup-close-button, md-outlined-icon
 .watching-hashtags {
     position: absolute;
     width: calc(100% - 130px);
-    bottom: calc((sign(calc(100vh - 100dvh)) - 1) * -18px); /* 18px for attribution in desktop, none if iphone dynamic viewsize. */
+    /*bottom: calc((sign(calc(100vh - 100dvh)) - 1) * -18px); *//* 18px for attribution in desktop, none if iphone dynamic viewsize. */
+    bottom: var(--mapAttributionHeight);
     right: 5px;
     flex-direction: row-reverse;
     flex-wrap: wrap-reverse;
     align-items: flex-end;
 }
+.combobox {
+    position: relative;
+    --textFieldHeight: 34px;
+    --minWidth: 125px;
+}
+.combobox-listbox {
+    padding: 5px;
+    position: absolute;
+    bottom: calc(var(--textFieldHeight) + 2px);
+    left: 0;
+    max-height: 50dvh; /* leaving room for portrait keyboard. landscape keyboard has no room at all */
+    width: fit-content;
+    min-width: var(--minWidth);
+    overflow-y: auto;
+    z-index: 9999;
+    background: rgba(255, 255, 255, 0.95);
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+}
+.combobox-option {
+    font-size: 0.95rem;
+    color: var(--md-sys-color-primary);
+    cursor: pointer;
+    white-space: nowrap;
+}
+.combobox-option minidenticon-svg {
+    display: inline-block;
+    position: relative;
+    top: 5px;
+    height: 20px;
+    width: 20px;
+}
+.combobox-option mark {
+    background: none;
+    color: var(--md-sys-color-secondary);
+    font-weight: 900;
+}
+.combobox-empty {
+    font-style: italic;
+}
+.combobox-option:hover,
+.combobox-option.active {
+    background:  #B8C2D7;
+}
 .watching-hashtags md-filled-text-field.newtag {
     --md-filled-field-top-space: 0px;
     --md-filled-field-bottom-space: 0px;
     --md-filled-text-field-leading-space: 8px;
     --md-filled-text-field-trailing-space: 0px;
-    width: 125px;
-    height: 34px;
+    height: var(--textFieldHeight);
+    width: var(--minWidth);
 }
 .alert-marker {
     text-shadow: 8px -3px 10px rgb(0 0 0 / 60%);
@@ -262,6 +323,7 @@ md-filter-chip minidenticon-svg {
 md-outlined-icon-button minidenticon-svg, md-outlined-icon-button img {
     height: 40px;
     width: 40px;
+    object-fit: cover;
     border-radius: 12px;
 }
 .alert span minidenticon-svg {
@@ -327,9 +389,9 @@ md-menu {
 md-outlined-button {
     padding: 10px;
 }
-.attribution > div:last-child > span {
-    text-wrap: nowrap;
-}
+/* .attribution > div:last-child > span { */
+/*     text-wrap: nowrap; */
+/* } */
 md-menu-item minidenticon-svg {
     display: inline-block;
     height: 20px;
@@ -363,7 +425,7 @@ md-menu-item minidenticon-svg {
 .attribution-metadata {
     display: flex;
     flex-direction: column;
-    align-items: end;
+    /* align-items: end; */
 }
 .alert {
     font-family: roboto;

package/server/app.js

@@ -18,12 +18,12 @@ const argv = yargs(hideBin(process.argv))
       .option('nPortals', {
 	alias: 'p',
 	type: 'number',
-	default: Math.min(logicalCores, 5),
+	default: Math.max(2, logicalCores - 3),
 	description: "The number of steady nodes that handle initial connections."
       })
       .option('baseURL', {
 	type: 'string',
-	default: 'http://localhost:3000/kdht',
+	default: 'http://localhost:3000',
 	description: "The base URL of the portal server through which to bootstrap."
       })
       .option('externalBaseURL', {
@@ -36,15 +36,10 @@ const argv = yargs(hideBin(process.argv))
 	default: false,
 	description: "Announce our availability on the DHT, so that other nodes can enter through us if their original portal goes down."
       })
-      .option('fixedSpacing', {
+      .option('spacing', {
 	type: 'number',
-	default: 2,
-	description: "Minimum seconds to add between each portal."
-      })
-      .options('variableSpacing', {
-	type: 'number',
-	default: 5,
-	description: "Additional variable seconds (+/- variableSpacing/2) to add to fixedSpacing between each portal."
+	default: 3,
+	description: "Minimum seconds to add between each portal on startup and shutdown."
       })
       .option('info', {
 	alias: 'i',
@@ -60,6 +55,10 @@ const argv = yargs(hideBin(process.argv))
       })
       .parse();
 
+const log = argv.info && ((...rest) => console.log(new Date(), ...rest));
+const debug = argv.verbose && ((...rest) => console.log(new Date(), ...rest));
+function delay(ms = argv.spacing * 1e3) { return new Promise(resolve => setTimeout(resolve, ms)); }
+
 if (cluster.isPrimary) { // Parent process with portal webserver through which clienta can bootstrap
   const port = parseInt((new URL(argv.baseURL)).port || '80');
   process.title = 'yz.social';
@@ -100,31 +99,43 @@ if (cluster.isPrimary) { // Parent process with portal webserver through which c
   }));
 
   app.listen(port);
-  console.log(new Date(), `Listening on ${port} and starting ${argv.nPortals} nodes on ${logicalCores} ${cpus()[0].model} logical cores.`);
+  log(`Listening on ${port} and starting ${argv.nPortals} nodes on ${logicalCores} ${cpus()[0].model} logical cores.`);
   for (let i = 0; i < argv.nPortals; i++) {
     cluster.fork();
-    await new Promise(resolve => setTimeout(resolve, 2e3)); // Number chosen to give an unspikey rise in packets/s.
+    await delay(); // Number chosen to give an unspikey rise in packets/s.
   }
+  log(process.title, 'RUNNING.');
+  process.on('SIGINT', async () => { // Leave the network politely.
+    const seconds = (1 + argv.nPortals) * argv.spacing;
+    log(process.title, 'shutting down', argv.nPortals, 'nodes.');
+    await delay(seconds * 1e3);
+    log(process.title, 'done');
+    process.exit(0);
+  });
 } else {
   process.title = 'axona-starting';
   const { P2PWebNetwork, location } = await import('../index.js');
   const network = await P2PWebNetwork.create({
     region: location,
-    infoLogger: (...rest) => argv.info && console.log(new Date(), ...rest),
-    debugLogger: (...rest) => argv.verbose && console.log(new Date(), ...rest)
+    infoLogger: log,
+    debugLogger: debug
   });
   process.title = 'axona-' + network.nodeIdentity.id;
-  let update = setInterval(() => {
-    const roles = network.peer.health().axonRoles;
-    network.debug(roles.length, 'axons',
-		  roles.reduce((total, role) => total + (role.isRoot ? 1 : 0), 0), 'roots');
-  }, 10e3);
+  let update = argv.verbose && setInterval(() => {
+    network.debug(network.peer.health());
+  }, 30e3);
   process.on('SIGINT', async () => { // Leave the network politely.
-    console.log(process.title, 'Shutdown for Ctrl+C');
-    clearInterval(update)
+    const id = cluster.worker.id;
+    const seconds = id * argv.spacing;
+    clearInterval(update);
+    log(process.title, 'Shutdown for Ctrl+C in', seconds, 'seconds.');
+    const health = network.peer.health();
+    const inRegionTags = network.inRegionConnections();
+    network.info(`Node ${id} has ${inRegionTags.length} connections in region.`);
+    network.info(network.ice(inRegionTags));
+    await delay(seconds * 1e3);
     await network.disconnect();
     process.exit(0);
-});
+  });
   await network.host();
-
 }

package/server/{location.json → location.save.json}

@@ -1,5 +1,5 @@
 {
-  "uswest/80": "37.4852,-122.2364",
+  "uswest/80": "37,-122",
   "useast/89": "40,-75",
   "uscentle/88": "35,-83",
   "easteu/47": "50,17",

package/spec/axonSpec.js

@@ -19,9 +19,7 @@
   Alice kills her publication and Emma joins.
 */
 const { describe, it, expect, beforeAll, afterAll, BigInt } = globalThis;
-import { createAuthorIdentity, regionCenter, geoCellId, geoCellCenter, WIRE_VERSION, KERNEL_VERSION, deriveTopicId, metricTopic } from '@axona/protocol';
-import { connect } from '@axona/protocol/connect.js';
-globalThis.RTCPeerConnection ||= await import('node-datachannel/polyfill').then(ndc => ndc.RTCPeerConnection);
+import { connect, createAuthorIdentity, regionCenter, geoCellId, geoCellCenter, WIRE_VERSION, KERNEL_VERSION, deriveTopicId, metricTopic } from '@axona/protocol';
 
 class Node {  // Stuff we have to do every time.
   static version = KERNEL_VERSION;
@@ -110,6 +108,7 @@ describe("CivilDefense", function () {
   const deliveryAllowanceMS = 60e3;
 
   //const location = regionCenter('uscentlw');
+  //const location = regionCenter('0x52');
   const location = regionCenter('uswest');  // TODO: pick one
   
   let alice, bob, carol, david, emma;
@@ -226,10 +225,12 @@ describe("CivilDefense", function () {
     });
   });
   afterAll(async function () {
-    await alice.disconnect();
-    await bob.disconnect();
-    await carol?.disconnect();
-    await david?.disconnect();
-    await emma?.disconnect();
+    await Promise.all([
+      alice.disconnect(),
+      bob.disconnect(),
+      carol?.disconnect(),
+      david?.disconnect(),
+      emma?.disconnect(),
+    ]);
   });
 });

package/spec/conversationSpec.js

@@ -31,8 +31,8 @@ describe("Conversation", function () {
       let keep = true;
       let tag = "caching";
       class CacheConversation extends Conversation {
-	update() { return keep && this; }
-	initialize() { return keep && this; }
+	update(properties) { return keep && super.update(properties); }
+	initialize(properties) { return keep && super.initialize(properties); }
       }
       it("ends with explicit removal.", async function () {
 	let initial = await Conversation.ensure({tag, agent, payload});

package/public/junk.html

@@ -1,145 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Material Web Autocomplete Combo Box</title>
-    <script type="importmap">
-      {
-        "imports": {
-          "uuid": "https://unpkg.com/uuid@13.0.0/dist/index.js",
-          "@material/web/": "https://esm.run/@material/web/",
-          "s2js": "./s2js/s2js.esm.js",
-	  "bigfloat": "./bigfloat/esm/index.js",
-	  "leaflet": "./leaflet/leaflet-src.esm.js",
-	  "minidenticons": "./minidenticons/minidenticons.min.js",
-	  "@axona/protocol": "./axona-protocol/src/index.js",
-          "@axona/protocol/std": "./axona-protocol/std/index.js",
-	  "@axona/protocol/connect.js": "./axona-protocol/src/connect.js"
-        }
-      }
-    </script>
-    <script type="module">
-      import '@material/web/all.js';
-      import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';
-      document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
-    </script>
-  <!-- Load Material Web Components via CDN -->
-  <!-- <script type="module"> -->
-  <!--   import '@material/web/textfield/filled-text-field.js'; -->
-  <!--   import '@material/web/menu/menu.js'; -->
-  <!--   import '@material/web/menu/menu-item.js'; -->
-  <!-- </script> -->
-  <style>
-    .combo-box-container {
-      position: relative;
-      display: inline-block;
-      width: 300px;
-      margin: 40px;
-    }
-    md-filled-text-field {
-      width: 100%;
-    }
-    md-menu {
-      /* Match the width of the textfield anchor */
-      --md-menu-container-width: 300px; 
-    }
-  </style>
-</head>
-<body>
-
-  <div class="combo-box-container">
-    <!-- The editable text input acting as the anchor -->
-    <md-filled-text-field 
-      id="combo-input" 
-      label="Choose a fruit" 
-      placeholder="Type to search..."
-      autocomplete="off">
-    </md-filled-text-field>
-
-    <!-- The dropdown menu containing autocomplete suggestions -->
-    <md-menu id="combo-menu" anchor="combo-input" stay-open-on-outside-click>
-      <!-- Populated dynamically via JavaScript -->
-    </md-menu>
-  </div>
-
-  <script>
-    const input = document.getElementById('combo-input');
-    const menu = document.getElementById('combo-menu');
-
-    // Dataset for autocomplete
-    const itemsList = [
-      'Apple', 'Banana', 'Blueberry', 'Cherry', 'Grape', 
-      'Lemon', 'Mango', 'Orange', 'Peach', 'Strawberry'
-    ];
-
-    // Build and filter menu items based on input value
-    function updateMenu(filterText = '') {
-      const normalizedFilter = filterText.toLowerCase().trim();
-      
-      // Filter list items
-      const filtered = itemsList.filter(item => 
-        item.toLowerCase().includes(normalizedFilter)
-      );
-
-      // Clear existing menu items
-      menu.innerHTML = '';
-
-      if (filtered.length === 0) {
-        // Show a disabled helper item if no match found
-        const noResult = document.createElement('md-menu-item');
-        noResult.disabled = true;
-        //noResult.headline = 'No matches found';
-	noResult.textContent  = 'No matches found';
-        menu.appendChild(noResult);
-        return;
-      }
-
-      // Append matched options
-      filtered.forEach(item => {
-        const menuItem = document.createElement('md-menu-item');
-        //menuItem.headline = item;
-	menuItem.textContent = item;
-        // Store raw value on the element for extraction during selection
-        menuItem.dataset.value = item; 
-        menu.appendChild(menuItem);
-      });
-    }
-
-    // Filter list and open menu as user types
-    input.addEventListener('input', (e) => {
-      updateMenu(e.target.value);
-      if (!menu.open) {
-        menu.open = true;
-      }
-    });
-
-    // Re-open full menu list when user clicks or focuses inside the input
-    input.addEventListener('focus', () => {
-      updateMenu(input.value);
-      menu.open = true;
-    });
-
-    // Handle selection event from the Material menu
-    menu.addEventListener('close-menu', (e) => {
-      // e.detail.item holds the clicked md-menu-item instance
-      const selectedItem = e.detail.item;
-      if (selectedItem && selectedItem.dataset.value) {
-        input.value = selectedItem.dataset.value;
-        // Optionally trigger a change event for form tracking
-        input.dispatchEvent(new Event('change'));
-      }
-    });
-
-    // Close the dropdown cleanly if the user hits "Escape" or "Enter" inside input
-    input.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape' || e.key === 'Enter') {
-        menu.open = false;
-        if(e.key === 'Enter') input.blur();
-      }
-    });
-
-    // Initial population of the menu
-    updateMenu();
-  </script>
-</body>
-</html>