add timing & animation details to stats-world

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;