@yz-social/civildefense.io 4.5.9 → 4.5.16

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/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>

package/public/material-combobox.html

@@ -1,379 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-<title>Material Web Autocomplete Combo Box</title>
-
-<!-- Material Web components (outlined text field + icon) -->
-<script type="module" src="https://esm.run/@material/web/textfield/outlined-text-field.js"></script>
-<script type="module" src="https://esm.run/@material/web/icon/icon.js"></script>
-
-<!-- Roboto + Material Symbols, since Material Web expects these by default -->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
-
-<style>
-  :root {
-    color-scheme: light;
-    font-family: 'Roboto', system-ui, sans-serif;
-  }
-
-  html, body {
-    height: 100%;
-  }
-
-  body {
-    margin: 0;
-    background: #f6f6f9;
-    /* Leave room at the bottom for the fixed field so page content
-       never sits underneath it. */
-    padding-bottom: 96px;
-    box-sizing: border-box;
-  }
-
-  main.content {
-    max-width: 480px;
-    margin: 0 auto;
-    padding: 24px 20px;
-  }
-
-  h1 {
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: #1c1b1f;
-    margin: 0 0 4px;
-  }
-
-  p.hint {
-    font-size: 0.85rem;
-    color: #49454f;
-    margin: 0 0 20px;
-  }
-
-    /* The field is pinned to the bottom of the *visual* viewport (see JS). */
-    /* position: fixed + bottom: 0 alone anchors to the bottom of the */
-    /* layout viewport, which on mobile stays put even when a keyboard */
-    /* slides up (some browsers just draw the keyboard on top of it, or */
-    /* slide the page instead). To keep the field visible directly above */
-    /* the keyboard, JS below tracks window.visualViewport and applies a */
-    /* translateY offset equal to the keyboard's height. */
-
-  .combobox {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 10;
-    box-sizing: border-box;
-    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
-    background: #f6f6f9;
-    box-shadow: 0 -1px 0 rgba(0,0,0,0.08);
-    max-width: 480px;
-    margin: 0 auto;
-    /* set by JS to compensate for the on-screen keyboard */
-    transform: translateY(0px);
-    will-change: transform;
-  }
-
-  md-outlined-text-field {
-    width: 100%;
-  }
-
-  /*
-    The suggestion list is positioned independently (fixed, computed in
-    JS) rather than nested inside .combobox, so its top edge can be
-    clamped to the available space above the field regardless of how
-    tall the list's content is.
-  */
-  .combobox-listbox {
-    position: fixed;
-    z-index: 20;
-    margin: 0;
-    padding: 8px 0;
-    list-style: none;
-    overflow-y: auto;
-    background: #fff;
-    border-radius: 4px;
-    box-shadow: 0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.3);
-    display: none;
-  }
-
-  .combobox-listbox.open {
-    display: block;
-  }
-
-  .combobox-option {
-    padding: 10px 16px;
-    font-size: 0.95rem;
-    color: #1c1b1f;
-    cursor: pointer;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .combobox-option mark {
-    background: none;
-    color: #6750a4;
-    font-weight: 500;
-  }
-
-  .combobox-option:hover,
-  .combobox-option.active {
-    background: #eaddff;
-  }
-
-  .combobox-empty {
-    padding: 10px 16px;
-    font-size: 0.9rem;
-    color: #79747e;
-  }
-</style>
-</head>
-<body>
-
-<main class="content">
-  <h1>Country picker</h1>
-  <p class="hint">
-    Start typing a country name. Use ↑ / ↓ to navigate, Enter to select, Esc to close.
-    The field stays pinned to the bottom of the screen, and the suggestion list opens
-    upward above it — try this on a phone to see it stay clear of the keyboard.
-  </p>
-</main>
-
-<div class="combobox">
-  <md-outlined-text-field
-    id="country-input"
-    label="Country"
-    role="combobox"
-    aria-expanded="false"
-    aria-controls="country-listbox"
-    aria-autocomplete="list"
-    autocomplete="off"
-  >
-    <md-icon slot="leading-icon">search</md-icon>
-  </md-outlined-text-field>
-</div>
-
-<ul class="combobox-listbox" id="country-listbox" role="listbox"></ul>
-
-<script type="module">
-  // Wait for the custom element to be defined so its internal <input> exists.
-  await customElements.whenDefined('md-outlined-text-field');
-
-  const DATA = [
-    "Argentina","Australia","Austria","Bangladesh","Belgium","Brazil","Canada",
-    "Chile","China","Colombia","Denmark","Egypt","Finland","France","Germany",
-    "Greece","India","Indonesia","Ireland","Italy","Japan","Kenya","Malaysia",
-    "Mexico","Netherlands","New Zealand","Nigeria","Norway","Pakistan","Peru",
-    "Philippines","Poland","Portugal","Russia","Saudi Arabia","Singapore",
-    "South Africa","South Korea","Spain","Sweden","Switzerland","Thailand",
-    "Turkey","Ukraine","United Arab Emirates","United Kingdom","United States",
-    "Vietnam"
-  ];
-
-  const footer = document.querySelector('.combobox');
-  const field = document.getElementById('country-input');
-  const listbox = document.getElementById('country-listbox');
-
-  let matches = [];
-  let activeIndex = -1;
-
-  function getValue() {
-    return field.value ?? '';
-  }
-
-  function escapeRegExp(str) {
-    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  }
-
-  function highlight(text, query) {
-    if (!query) return text;
-    const re = new RegExp(`(${escapeRegExp(query)})`, 'ig');
-    return text.replace(re, '<mark>$1</mark>');
-  }
-
-  // ---------------------------------------------------------------------
-  // Keyboard-aware positioning
-  // ---------------------------------------------------------------------
-  // window.visualViewport reports the *actually visible* area, shrinking
-  // when a mobile keyboard appears. window.innerHeight / layout viewport
-  // rects do not shrink the same way, which is why a plain
-  // `position: fixed; bottom: 0` element can end up hidden behind the
-  // keyboard. We measure the gap between the two and shift the field up
-  // by exactly that amount.
-  function keyboardInset() {
-    const vv = window.visualViewport;
-    if (!vv) return 0;
-    return Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
-  }
-
-  function repositionField() {
-    footer.style.transform = `translateY(-${keyboardInset()}px)`;
-  }
-
-  // Positions the listbox so its bottom edge sits just above the field,
-  // and clamps its top edge (via max-height) to the visible viewport,
-  // so it never runs off-screen above a shrunken (keyboard-open) viewport.
-  function repositionListbox() {
-    const rect = field.getBoundingClientRect();
-    const vv = window.visualViewport;
-    const viewportTop = vv ? vv.offsetTop : 0;
-    const gap = 4;
-    const topMargin = 8;
-
-    listbox.style.left = `${rect.left}px`;
-    listbox.style.width = `${rect.width}px`;
-    listbox.style.bottom = `${window.innerHeight - rect.top + gap}px`;
-
-    const available = rect.top - viewportTop - gap - topMargin;
-    listbox.style.maxHeight = `${Math.max(80, available)}px`;
-  }
-
-  function repositionAll() {
-    repositionField();
-    // Wait a frame so the field's transform has applied before we read
-    // its position for the listbox.
-    requestAnimationFrame(repositionListbox);
-  }
-
-  window.visualViewport?.addEventListener('resize', repositionAll);
-  window.visualViewport?.addEventListener('scroll', repositionAll);
-  window.addEventListener('resize', repositionAll);
-  window.addEventListener('orientationchange', repositionAll);
-  repositionAll();
-
-  // ---------------------------------------------------------------------
-  // Combobox behavior
-  // ---------------------------------------------------------------------
-  function closeListbox() {
-    listbox.classList.remove('open');
-    field.setAttribute('aria-expanded', 'false');
-    field.removeAttribute('aria-activedescendant');
-    activeIndex = -1;
-  }
-
-  function openListbox() {
-    listbox.classList.add('open');
-    field.setAttribute('aria-expanded', 'true');
-    repositionListbox();
-  }
-
-  function setActive(index) {
-    const options = listbox.querySelectorAll('.combobox-option');
-    options.forEach(opt => opt.classList.remove('active'));
-    activeIndex = index;
-    if (index >= 0 && options[index]) {
-      options[index].classList.add('active');
-      options[index].scrollIntoView({ block: 'nearest' });
-      field.setAttribute('aria-activedescendant', options[index].id);
-    } else {
-      field.removeAttribute('aria-activedescendant');
-    }
-  }
-
-  function selectValue(value) {
-    field.value = value;
-    closeListbox();
-    field.focus();
-  }
-
-  function renderMatches(query) {
-    listbox.innerHTML = '';
-
-    if (!query) {
-      closeListbox();
-      return;
-    }
-
-    matches = DATA.filter(item =>
-      item.toLowerCase().includes(query.toLowerCase())
-    );
-
-    if (matches.length === 0) {
-      const li = document.createElement('li');
-      li.className = 'combobox-empty';
-      li.textContent = 'No matches found';
-      listbox.appendChild(li);
-      openListbox();
-      setActive(-1);
-      return;
-    }
-
-    matches.forEach((item, i) => {
-      const li = document.createElement('li');
-      li.className = 'combobox-option';
-      li.id = `country-option-${i}`;
-      li.setAttribute('role', 'option');
-      li.innerHTML = highlight(item, query);
-      li.addEventListener('mousedown', (e) => {
-        // mousedown (not click) so it fires before the field's blur event
-        e.preventDefault();
-        selectValue(item);
-      });
-      listbox.appendChild(li);
-    });
-
-    openListbox();
-    setActive(-1);
-  }
-
-  field.addEventListener('input', () => {
-    renderMatches(getValue());
-  });
-
-  // The keyboard opening/closing changes visualViewport size, which
-  // fires our resize listener above and keeps everything positioned
-  // correctly without any extra work here.
-  field.addEventListener('focus', () => {
-    if (getValue()) renderMatches(getValue());
-  });
-
-  field.addEventListener('keydown', (e) => {
-    const isOpen = listbox.classList.contains('open');
-    const optionCount = listbox.querySelectorAll('.combobox-option').length;
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        if (!isOpen) { renderMatches(getValue()); return; }
-        if (optionCount > 0) setActive((activeIndex + 1) % optionCount);
-        break;
-
-      case 'ArrowUp':
-        e.preventDefault();
-        if (!isOpen) { renderMatches(getValue()); return; }
-        if (optionCount > 0) setActive((activeIndex - 1 + optionCount) % optionCount);
-        break;
-
-      case 'Enter':
-        if (isOpen && activeIndex >= 0 && matches[activeIndex]) {
-          e.preventDefault();
-          selectValue(matches[activeIndex]);
-        }
-        break;
-
-      case 'Escape':
-        if (isOpen) {
-          e.preventDefault();
-          closeListbox();
-        }
-        break;
-
-      case 'Tab':
-        closeListbox();
-        break;
-    }
-  });
-
-  // Close when clicking outside the combobox/listbox.
-  document.addEventListener('click', (e) => {
-    if (!e.target.closest('.combobox') && !e.target.closest('.combobox-listbox')) {
-      closeListbox();
-    }
-  });
-</script>
-
-</body>
-</html>