add timing & animation details to stats-world

project.task.yaml

@@ -4,6 +4,7 @@
     - add infinite scroll assignee:matthew
   blocks: ref:https://raw.githubusercontent.com/trentlarson/lives-of-gifts/master/project.yaml#kickstarter%20for%20time
 
+- allow type annotations in World.js & landmarks.js (since we get this error: "Types are not supported by current JavaScript version")
 - replace user-affecting console.log & console.error with error messages (eg. catches)
 
 - stats v1 :

src/components/World/World.js

@@ -24,6 +24,8 @@ class World {
 
     this.update = this.update.bind(this);
 
+    this.vue = vue;
+
     // Instances of camera, scene, and renderer
     this.camera = createCamera();
     this.scene = createScene(COLOR2);
@@ -99,6 +101,10 @@ class World {
   stop() {
     this.loop.stop();
   }
+
+  setExposedWorldProperties(key, value) {
+    this.vue.setWorldProperty(key, value);
+  }
 }
 
 export { World };

src/components/World/components/objects/landmarks.js

@@ -12,6 +12,8 @@ const ANIMATION_DURATION_SECS = 10;
 const ENDORSER_ENTITY_PREFIX = "https://endorser.ch/entity/";
 
 export async function loadLandmarks(vue, world, scene, loop) {
+  vue.setWorldProperty("animationDurationSeconds", ANIMATION_DURATION_SECS);
+
   try {
     await db.open();
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);
@@ -31,8 +33,13 @@ export async function loadLandmarks(vue, world, scene, loop) {
     const resp = await axios.get(url, { headers: headers });
     if (resp.status === 200) {
       const landmarks = resp.data.data;
+
       const minDate = landmarks[landmarks.length - 1].issuedAt;
       const maxDate = landmarks[0].issuedAt;
+
+      world.setExposedWorldProperties("startTime", minDate.replace("T", " "));
+      world.setExposedWorldProperties("endTime", maxDate.replace("T", " "));
+
       const minTimeMillis = new Date(minDate).getTime();
       const fullTimeMillis =
         maxDate > minDate ? new Date(maxDate).getTime() - minTimeMillis : 1; // avoid divide by zero

src/libs/endorserServer.ts

@@ -1,6 +1,15 @@
 export const SCHEMA_ORG_CONTEXT = "https://schema.org";
 export const SERVICE_ID = "endorser.ch";
 
+export interface GenericClaim {
+  "@context": string;
+  "@type": string;
+  issuedAt: string;
+  // "any" because arbitrary objects can be subject of agreement
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  claim: Record<any, any>;
+}
+
 export interface AgreeVerifiableCredential {
   "@context": string;
   "@type": string;

src/views/AccountViewView.vue

@@ -294,7 +294,7 @@
           :to="{ name: 'statistics' }"
           class="block text-center py-3 px-1"
         >
-          See Your Statistics
+          See Achievements & Statistics
         </router-link>
       </button>
     </div>

src/views/StatisticsView.vue

@@ -51,9 +51,35 @@
   <section id="Content" class="p-6 pb-24">
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
-      Your Statistics
+      Achievements & Statistics
     </h1>
 
+    <div>
+      Here is a view of the activity you can see.
+      <ul class="list-disc list-inside">
+        <li>Each identity and claim has a unique position.</li>
+        <!-- eslint-disable prettier/prettier --><!-- If we format prettier then there is extra space at the start of the line. -->
+        <li>Each will show at their time of appearance relative to all others.</li>
+        <li>Note that the ones on the left and right edges are randomized
+          because not all their positional data is visible to you.
+        </li>
+        <!-- eslint-enable -->
+      </ul>
+    </div>
+
+    <div class="mt-3">
+      <div v-if="worldProperties.startTime">
+        <label>Time Range:&nbsp;</label>
+        {{ worldProperties.startTime }}
+        -
+        {{ worldProperties.endTime }}
+      </div>
+      <div v-if="worldProperties.animationDurationSeconds">
+        <label>Animation duration:&nbsp;</label>
+        {{ worldProperties.animationDurationSeconds }} seconds
+      </div>
+    </div>
+
     <button class="float-right" @click="captureGraphics()">Screenshot</button>
 
     <!-- Another place to play with the sizing is in Resizer.setSize -->
@@ -77,9 +103,15 @@ import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js";
 import { Component, Vue } from "vue-facing-decorator";
 import { World } from "@/components/World/World.js";
 
+interface WorldProperties {
+  startTime?: string;
+  endTime?: string;
+}
+
 @Component
 export default class StatisticsView extends Vue {
   world: World;
+  worldProperties: WorldProperties = {};
 
   mounted() {
     const container = document.querySelector("#scene-container");
@@ -158,6 +190,10 @@ export default class StatisticsView extends Vue {
     ExportToSVG(rendererSVG, "test.svg");
   }
 
+  public setWorldProperty(propertyName, propertyValue) {
+    this.worldProperties[propertyName] = propertyValue;
+  }
+
   alertTitle = "";
   alertMessage = "";
   isAlertVisible = false;