@yz-social/civildefense.io 4.5.8 → 4.5.16

package/index.js

@@ -1,4 +1,5 @@
 export { P2PWebNetwork } from "./public/javascripts/p2pWebNetwork.js";
-export { agentTopic, alertTopic, canonicalTag } from "./public/javascripts/versions.js";
+export { topicRegion, agentTopic, alertTopic, canonicalTag } from "./public/javascripts/versions.js";
 export { getContainingCells } from "./public/javascripts/s2.js";
 export { location } from "./server/getLocation.js";
+export { deriveTopicIdBig } from "@axona/protocol";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yz-social/civildefense.io",
   "description": "Browser app to safely share live sightings on a map.",
-  "version": "4.5.8",
+  "version": "4.5.16",
   "keywords": [
     "map",
     "browser",
@@ -10,14 +10,16 @@
   "scripts": {
     "start": "npm stop; node ./server/app.js",
     "stop": "pkill yz.social",
-    "postinstall": "touch server/location.json; chmod a+w server/location.json"
+    "postinstall": "touch server/location.json; chmod a+w server/location.json",
+    "prepack": "mv server/location.json server/location.save.json",
+    "postpack": "mv server/location.save.json server/location.json"
   },
   "type": "module",
   "exports": {
     ".": "./index.js"
   },
   "dependencies": {
-    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.29.0",
+    "@axona/protocol": "github:axona-net/axona-protocol#semver:^4.59.2",
     "cors": "^2.8.6",
     "express": "^4.22.1",
     "leaflet": "^1.9.4",

package/public/about/en.html

@@ -128,7 +128,7 @@
   <!-- <hr class="rule"> -->
 
   <h1>The Bigger Picture</h1>
-  <p>The Civil Defense software was created by a group of experienced system developers, running on the <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">Axona network</a>. Both are free and open source.</p>
+  <p>The Civil Defense runs on the <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">Axona network</a>. Both are free and open source.</p>
   <p>Axona is a modern descendant of the old <a href="https://en.wikipedia.org/wiki/Peer-to-peer" target="yz.other" rel="noopener">peer-to-peer networks</a> such as <a href="https://en.wikipedia.org/wiki/Napster">Napster</a>. It has a unique self-healing routing mechanism that uses neuron learning techniques to find the best way to distribute alerts. It is analogous to <a href="https://en.wikipedia.org/wiki/Tor_(network)" target="yz.other" rel="noopener">TOR</a> (The Onion Router), but designed from the ground up to run in mobile and desktop browsers.</p>
   <p>We are also developing a comprehensive quantum-ready cryptography system that will add private-groups for Civil Defense and any software on the network. We believe there are many applications where developers, users, and the public all benefit from open software and secure, decentralized networks — without app stores, servers, or data centers. Beyond Civil Defense, we are also developing large-scale <a href="https://en.wikipedia.org/wiki/Distributed_computing" target="yz.other" rel="noopener">multiuser collaboration</a> and <a href="https://poverty-action.org/inclusive-instant-payment-systems-evidence-based-approach-design-impact" target="yz.other" rel="noopener">Inclusive Instant Payment Systems</a>.</p>
 

package/public/about/es.html

@@ -113,7 +113,7 @@
   </ul>
 
   <h1>El Panorama General</h1>
-  <p>El software de Defensa Civil fue creado por un grupo de desarrolladores de sistemas experimentados, que se ejecuta en el <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">red Axona</a>. Ambos son gratuitos y de código abierto.</p>
+  <p>La Defensa Civil opera en la <a href="https://github.com/axona-net/axona-protocol" target="yz.other" rel="noopener">red Axona</a>. Ambos son gratuitos y de código abierto.</p>
   <p>Axona es un descendiente moderno de las antiguas <a href="https://en.wikipedia.org/wiki/Peer-to-peer" target="yz.other" rel="noopener">redes entre pares</a> como <a href="https://en.wikipedia.org/wiki/Napster">Napster</a>. Tiene un mecanismo único de enrutamiento autocurativo que utiliza técnicas de aprendizaje neuronal para encontrar la mejor manera de distribuir alertas. Es análogo a <a href="https://en.wikipedia.org/wiki/Tor_(network)" target="yz.other" rel="noopener">TOR</a> (The Onion Router), pero diseñado desde cero para funcionar en navegadores móviles y de escritorio.</p>
   <p>También estamos desarrollando un sistema integral de criptografía preparado para la era cuántica que añadirá grupos privados para Defensa Civil y cualquier software en la red. Creemos que hay muchas aplicaciones en las que los desarrolladores, los usuarios y el público en general se benefician del software abierto y las redes seguras y descentralizadas, sin tiendas de aplicaciones, servidores ni centros de datos. Más allá de Defensa Civil, también estamos desarrollando <a href="https://en.wikipedia.org/wiki/Distributed_computing" target="yz.other" rel="noopener">colaboración multiusuario a gran escala</a> y <a href="https://poverty-action.org/inclusive-instant-payment-systems-evidence-based-approach-design-impact" target="yz.other" rel="noopener">Sistemas de Pago Instantáneo Inclusivos</a>.</p>
 

package/public/index.html

@@ -25,12 +25,11 @@
           "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"
+          "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"
         }
       }
     </script>
@@ -45,123 +44,123 @@
   </head>
   <body>
     <section data-nosnippet>
-    <div id="mapCapture">
-      <div id="map"></div>
-      <img src="images/civil-defense-240.png" alt="civildefense" class="about-image">
-    </div>
-
-    <div id="subPopoverControls"> <!-- Our control, that appear within the map and the marker popups in stack order -->
+      <div id="mapCapture">
+	<div id="map"></div>
+	<img src="images/civil-defense-240.png" alt="civildefense" class="about-image">
+      </div>
 
-      <button id="aboutButton" class="about-button">
-        <img src="images/civil-defense-240.png" alt="civildefense" class="about-image"></img>
-      </button>
+      <div id="subPopoverControls"> <!-- Our control, that appear within the map and the marker popups in stack order -->
 
-      <div class="button-container">
-	<button id="qrButton">
-          <img src="images/qr-scan.svg" alt="qr code" class="button-image">
-	</button>
-	<button id="share">
-          <img src="images/share.svg" alt="share" class="button-image">
+	<button id="aboutButton" class="about-button">
+          <img src="images/civil-defense-240.png" alt="civildefense" class="about-image"></img>
 	</button>
-	<button id="recenterButton">
-          <img src="images/recenter.svg" alt="recenter on position" class="button-image">
-	</button>
-      </div>
 
-      <md-chip-set class="watching-hashtags"></md-chip-set>
-    </div>
+	<div class="button-container">
+	  <button id="qrButton">
+            <img src="images/qr-scan.svg" alt="qr code" class="button-image">
+	  </button>
+	  <button id="share">
+            <img src="images/share.svg" alt="share" class="button-image">
+	  </button>
+	  <button id="recenterButton">
+            <img src="images/recenter.svg" alt="recenter on position" class="button-image">
+	  </button>
+	</div>
 
-    <div id="info" class="info-banner loading"></div>
+	<md-chip-set class="watching-hashtags"></md-chip-set>
+      </div>
 
-    <div id="qrContainer" class="hidden">
-      <div class="display-content"></div>
-    </div>
+      <div id="info" class="info-banner loading"></div>
 
-    <div id="aboutContainer" class="hidden">
-      <div class="display-content">
-        <h1>Civil Defense</h1>
-        <ul>
-          <li id="aboutReport"></li>
-          <li id="aboutShared"></li>
-          <li id="aboutFade"></li>
-        </ul>
-        <p> <a id="learnMore" href="about/index.html" target="yz.sidebar">Learn More</a> </p>
-        <p>
-          <span id="aboutAnyone1"></span>
-          <a id="aboutAnyone2" href="https://github.com/YZ-social/Yz.social" target="yz.sidebar"></a>
-          <span id="aboutAnyone3"></span>
-        </p>
-	<hr>
-	<div>
-	  <label>
-	    <md-checkbox id="showNotifications" touch-target="wrapper"></md-checkbox>
-	    <span id="showNotificationsLabel"></span>
-	  </label>
-	</div>
-	<div class="handle-avatar">
-	  <md-outlined-text-field id="myHandle" placeholder="anonymous"></md-outlined-text-field>
-	  <md-outlined-icon-button id="myAvatar"></md-outlined-icon-button>
-	</div>
-	<hr>
-        <div class="source-updates">
-	  <md-elevated-button id="checkForUpdates"></md-elevated-button>
-          <md-elevated-button id="downloadUpdates" class="hidden"></md-elevated-button>
-          <span id="updateStatus"></span>
-        </div>
-	<p><small>
-	    <label for="scriptChooser"> <span id="version">Version</span></label>
-	    <span id="appVersion"></span>,
-	    kernel: <span id="kernelVersion"></span>.
-	  </small>
-	  <small><a id="wipe" href="#"></a></small></p>
-	<input id="scriptChooser" type="file" accept="text/javascript"></input>
+      <div id="qrContainer" class="hidden">
+	<div class="display-content"></div>
       </div>
-    </div>
 
-    <div id="correspondentContainer" class="hidden">
-      <div class="display-content">
-	<div class="private-label">
-	  <div class="describe">
-	    <span id="describePrivate1"></span>
-	    <span class="handle"></span>
-	    <md-icon class="avatar"></md-icon>
-	    <span id="describePrivate2"></span>
+      <div id="aboutContainer" class="hidden">
+	<div class="display-content">
+          <h1>Civil Defense</h1>
+          <ul>
+            <li id="aboutReport"></li>
+            <li id="aboutShared"></li>
+            <li id="aboutFade"></li>
+          </ul>
+          <p> <a id="learnMore" href="about/index.html" target="yz.sidebar">Learn More</a> </p>
+          <p>
+            <span id="aboutAnyone1"></span>
+            <a id="aboutAnyone2" href="https://github.com/YZ-social/Yz.social" target="yz.sidebar"></a>
+            <span id="aboutAnyone3"></span>
+          </p>
+	  <hr>
+	  <div>
+	    <label>
+	      <md-checkbox id="showNotifications" touch-target="wrapper"></md-checkbox>
+	      <span id="showNotificationsLabel"></span>
+	    </label>
 	  </div>
-	  <md-outlined-text-field></md-outlined-text-field>
-	  <md-outlined-icon-button></md-outlined-icon-button>
-	</div>
-	<div id="pickLabels"></div>
-	<div class="public-label">
-	  <div id="describePublic" class="describe"></div>
-	  <md-outlined-button></md-outlined-button>
-	  <md-outlined-icon-button></md-outlined-icon-button>
-	</div>
-	<div class="system-label">
-	  <div id="describeSystem" class="describe"></div>
-	  <md-outlined-button></md-outlined-button>
-	  <md-outlined-icon-button></md-outlined-icon-button>
+	  <div class="handle-avatar">
+	    <md-outlined-text-field id="myHandle" placeholder="anonymous"></md-outlined-text-field>
+	    <md-outlined-icon-button id="myAvatar"></md-outlined-icon-button>
+	  </div>
+	  <hr>
+          <div class="source-updates">
+	    <md-elevated-button id="checkForUpdates"></md-elevated-button>
+            <md-elevated-button id="downloadUpdates" class="hidden"></md-elevated-button>
+            <span id="updateStatus"></span>
+          </div>
+	  <p><small>
+	      <label for="scriptChooser"> <span id="version">Version</span></label>
+	      <span id="appVersion"></span>,
+	      kernel: <span id="kernelVersion"></span>.
+	    </small>
+	    <small><a id="wipe" href="#"></a></small></p>
+	  <input id="scriptChooser" type="file" accept="text/javascript"></input>
 	</div>
-	<input type="file" accept="image/*"></input>
-	<div>
-	  <md-text-button id="correspondentCancel">Cancel</md-text-button>
-	  <md-text-button id="correspondentOK">OK</md-text-button>
+      </div>
+
+      <div id="correspondentContainer" class="hidden">
+	<div class="display-content">
+	  <div class="private-label">
+	    <div class="describe">
+	      <span id="describePrivate1"></span>
+	      <span class="handle"></span>
+	      <md-icon class="avatar"></md-icon>
+	      <span id="describePrivate2"></span>
+	    </div>
+	    <md-outlined-text-field></md-outlined-text-field>
+	    <md-outlined-icon-button></md-outlined-icon-button>
+	  </div>
+	  <div id="pickLabels"></div>
+	  <div class="public-label">
+	    <div id="describePublic" class="describe"></div>
+	    <md-outlined-button></md-outlined-button>
+	    <md-outlined-icon-button></md-outlined-icon-button>
+	  </div>
+	  <div class="system-label">
+	    <div id="describeSystem" class="describe"></div>
+	    <md-outlined-button></md-outlined-button>
+	    <md-outlined-icon-button></md-outlined-icon-button>
+	  </div>
+	  <input type="file" accept="image/*"></input>
+	  <div>
+	    <md-text-button id="correspondentCancel">Cancel</md-text-button>
+	    <md-text-button id="correspondentOK">OK</md-text-button>
+	  </div>
 	</div>
       </div>
-    </div>
 
-    <div id="updateContainer" class="hidden">
-      <div class="display-content">
-        <h1 id="newVersionHeader">New version available</h1>
-	<p id="updateNowQuestion"></p>
-	<p id="updateReload"></p>
-	<p id="updateDefer"></p>
-	<md-elevated-button id="downloadUpdates2"></md-elevated-button>
-	<md-elevated-button id="downloadDefer"></md-elevated-button>
+      <div id="updateContainer" class="hidden">
+	<div class="display-content">
+          <h1 id="newVersionHeader">New version available</h1>
+	  <p id="updateNowQuestion"></p>
+	  <p id="updateReload"></p>
+	  <p id="updateDefer"></p>
+	  <md-elevated-button id="downloadUpdates2"></md-elevated-button>
+	  <md-elevated-button id="downloadDefer"></md-elevated-button>
+	</div>
       </div>
-    </div>
 
-    <md-menu positioning="popover" id="popoverMenu"></md-menu>
-    <script type="module" src="javascripts/main.js"></script>
+      <md-menu positioning="popover" id="popoverMenu"></md-menu>
     </section>
+    <script type="module" src="javascripts/main.js"></script>
   </body>
 </html>

package/public/javascripts/agent.js

@@ -1,7 +1,6 @@
 const { localStorage } = globalThis;
 import { v4 as uuidv4 } from 'uuid';
 import { minidenticonSvg } from 'minidenticons';
-import { createAuthorIdentity }  from '@axona/protocol';
 import { agentTopic, agentPersistKey } from './versions.js';
 import { Int } from './translations.js';
 import { consume, openDisplay } from './display.js';
@@ -65,7 +64,7 @@ export class Agent {
       const owner = this.tag;
       ['handle', 'avatar'].forEach(type => {
 	const eventName = this.networkPersistKey(type);
-	contact.subscribe({eventName, region, owner, /*since: 'latest',*/ handler: data => this.setPublicData({...data, type})});
+	contact.subscribe({eventName, region, owner, since: 'latest', handler: data => this.setPublicData({...data, type})});
       });
     });
   }
@@ -129,23 +128,25 @@ export class Agent {
     const eventName = this.networkPersistKey(type);
     const region = this.currentRegion;
     const owner = this.tag;
-    // TODO: set owner as well.
     const contact = await networkPromise;
-    if (value) {
-      let payload = value;
-      // Our downsampling is such that we do not need to chunkify.
-      // if (type === 'avatar') {
-      // 	const blob = await P2PWebNetwork.dataURL2blob(value);
-      // 	payload = (await contact.chunkifyBlob({blob, region})).topic;
-      // }
-      return contact.publish({eventName, region, owner, payload});
-    }
-    // For now, until since:'latest' works, supply a null payload and no subject.
-    await contact.publish({eventName, region, owner, payload: null});
-    // const subject = this.publicMsgId[type];
-    // if (!subject) return null; // We have not published a value, so nothing to kill.
-    // await contact.publish({eventName, region, owner, subject, payload: null});
-    // return null;
+
+    // First kill previous, if any.
+    // Publish doesn't know whether subscribers will be since all or latest, so it must retain all unkilled.
+    // Thus if we only kill the last one when there is no value,
+    // a subscribe since:latest will produce the PREVIOUS value -- the last unkilled one.
+
+    const killTag = this.publicMsgId[type];
+    console.log('persist', {type, killTag, value: value && value.slice(0, 15)});
+    if (killTag) await contact.publish({eventName, region, owner, killTag, payload: null});
+
+    if (!value) return null;
+    let payload = value;
+    // Our downsampling is such that we do not need to chunkify.
+    // if (type === 'avatar') {
+    // 	const blob = await P2PWebNetwork.dataURL2blob(value);
+    // 	payload = (await contact.chunkifyBlob({blob, region})).topic;
+    // }
+    return contact.publish({eventName, region, owner, payload});
   }
 
   // We represent handles and avatars by inserting stuff into given elements.
@@ -156,8 +157,9 @@ export class Agent {
     element.textContent = value || '(none)';
     element.value = value || ''; // Hack: handle input[type="text"] as well. Must be property assignment, not attribute.
   }
+  static spinner = 'images/loading.gif';
   static avatar(element, value) { // Update avatar element with value.
-    element.innerHTML = value === null ? '(none)' : (value.startsWith('data') ? this.makeImage(value) : Agent.makeIdenticon(value));
+    element.innerHTML = value === null ? '(none)' : (value === this.spinner || value.startsWith('data') ? this.makeImage(value) : Agent.makeIdenticon(value));
   }
   static downsampleResolution = 128; // max height or width
   static makeImage(url) {
@@ -237,11 +239,8 @@ export class Agent {
 	this.updateValue(null, 'private', 'avatar');
       };
       fileChooser.onchange = async event => {
-	consume(event);
-	if (!fileChooser.files.length) return;
-	const blob = await P2PWebNetwork.downsampledBlob({blob: fileChooser.files[0], maxDimension: Agent.downsampleResolution});
-	this.updateValue(await P2PWebNetwork.blob2dataURL(blob), 'private', 'avatar');
-	console.log('clearing avatar selection');
+	await this.fileEvent(fileChooser, event, 'private');
+	console.log('cleared avatar selection');
       };
       fileChooser.click();
     });
@@ -263,6 +262,16 @@ export class Agent {
       content.parentElement.classList.toggle('hidden', true);
     };
   }
+  async fileEvent(fileChooser, event, scope) { // Update value from fileChooser change event, return dataURL;
+    consume(event);
+    if (!fileChooser.files.length) return '';
+    const file = fileChooser.files[0];
+    const maxDimension = Agent.downsampleResolution;
+    const blob = await P2PWebNetwork.downsampledBlob({blob: file, maxDimension});
+    const dataURL = await P2PWebNetwork.blob2dataURL(blob);
+    await this.updateValue(dataURL, scope, 'avatar');
+    return dataURL;
+  }
   static current = null;
   static tag = null;
   static identity = null;
@@ -275,7 +284,7 @@ export class Agent {
   static async initialize() { // Initialize what the agent needs from the about screen
     let tag = localStorage.getItem('usertag');
     const persistAs = tag || uuidv4(); // Give it SOMETHING to persistAs.
-    const myIdentity = await createAuthorIdentity({persistAs});
+    const myIdentity = await P2PWebNetwork.createAuthorIdentity({persistAs});
     if (tag !== persistAs) { // Fix up persistence by moving it to where it need to go.
       // WARNING: This relies on undocumented behavior of createAuthorIdentity().
       const realTag = myIdentity.authorId;
@@ -304,17 +313,15 @@ export class Agent {
       fileChooser.oncancel = event => {
 	consume(event);
 	console.log('cancel my avatar');
+	myAgent.updateValue(this.spinner, 'public', 'avatar', false);
 	myAgent.updateValue(null, 'public', 'avatar');
 	myAgent.persistPrivate(null, 'avatar'); // So that we'll have it next session.
 	console.log('clearing avatar selection');
       };
       fileChooser.onchange = async event => {
-	consume(event);
-	if (!fileChooser.files.length) return;
-	const blob = await P2PWebNetwork.downsampledBlob({blob: fileChooser.files[0], maxDimension: Agent.downsampleResolution});
-	const url = await P2PWebNetwork.blob2dataURL(blob);
+	myAgent.updateValue(this.spinner, 'public', 'avatar', false);
+	const url = await myAgent.fileEvent(fileChooser, event, 'public');
 	console.log('set my avatar', url.slice(0, 50));
-	myAgent.updateValue(url, 'public', 'avatar');
 	myAgent.persistPrivate(url, 'avatar'); // So that we'll have it next session.
       };
       fileChooser.click();