make the lights wait to turn on in stats-world

src/components/World/World.js

@@ -4,6 +4,7 @@ import axios from "axios";
 import { SpotLight } from "three";
 import * as TWEEN from "@tweenjs/tween.js";
 
+import { AppString } from "@/constants/app";
 import { createCamera } from "./components/camera.js";
 import { createLights } from "./components/lights.js";
 import { createScene } from "./components/scene.js";
@@ -12,8 +13,8 @@ import { Loop } from "./systems/Loop.js";
 import { Resizer } from "./systems/Resizer.js";
 import { createControls } from "./systems/controls.js";
 import { createRenderer } from "./systems/renderer.js";
-import { AppString } from "@/constants/app";
 
+const ANIMATION_DURATION_SECS = 10;
 const BASE32 = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
 const COLOR1 = "#42b883";
 const COLOR2 = "#0055aa";
@@ -22,7 +23,7 @@ const PLATFORM_EDGE_FOR_UNKNOWNS = 10;
 const PLATFORM_SIZE = 100;
 
 function createLight() {
-  const light = new SpotLight(0xffffff, 100, 0, Math.PI / 8, 0.5, 0);
+  const light = new SpotLight(0xffffff, 0, 0, Math.PI / 8, 0.5, 0);
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   light.tick = () => {};
   return light;
@@ -92,42 +93,53 @@ class World {
   async loadClaims() {
     const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
     try {
-      const url = endorserApiServer + "/api/v2/report/claims";
+      const url =
+        endorserApiServer + "/api/v2/report/claims?claimType=GiveAction";
       const headers = { "Content-Type": "application/json" };
       const resp = await axios.get(url, { headers: headers });
       if (resp.status === 200) {
-        resp.data.data.map((claim) => {
+        const minDate = resp.data.data[resp.data.data.length - 1].issuedAt;
+        const maxDate = resp.data.data[0].issuedAt;
+        const minTimeMillis = new Date(minDate).getTime();
+        const fullTimeMillis = new Date(maxDate).getTime() - minTimeMillis;
+        // ratio of animation time to real time
+        const fakeRealRatio = (ANIMATION_DURATION_SECS * 1000) / fullTimeMillis;
+
+        // calculate when lights shine on appearing claim area
+        for (const claim of resp.data.data) {
+          // claim is a GiveServerRecord (see endorserServer.ts)
+
+          // compute location for this claim
           const randomness = claim.id.substring(10);
           const x =
             (100 * BASE32.indexOf(randomness.substring(0, 1))) / 32 - 50;
           const z =
             (100 * BASE32.indexOf(randomness.substring(8, 9))) / 32 - 50;
-          console.log(
-            "randomness",
-            randomness,
-            randomness.substring(0, 1),
-            BASE32.indexOf(randomness.substring(0, 1)),
-            x,
-            randomness.substring(8, 9),
-            BASE32.indexOf(randomness.substring(8, 9)),
-            z
-          );
-
           const light = createLight();
           light.position.set(x, 20, z);
           light.target.position.set(x, 0, z);
           this.loop.updatables.push(light);
           this.scene.add(light);
           this.scene.add(light.target);
-          new TWEEN.Tween(light.position)
+
-            .to({ y: 5 }, 1000)
+          // now figure out the timing and shine a light
-            .start()
+          const timeDelayMillis =
-            .onComplete(() => {
+            fakeRealRatio *
-              this.scene.remove(light);
+            (new Date(claim.issuedAt).getTime() - minTimeMillis);
-              light.dispose();
+          new TWEEN.Tween(light)
-            });
+            .delay(timeDelayMillis)
+            .to({ intensity: 100 }, 10)
+            .chain(
+              new TWEEN.Tween(light.position)
+                .to({ y: 5 }, 1000)
+                .onComplete(() => {
+                  this.scene.remove(light);
+                  light.dispose();
+                })
+            )
+            .start();
           this.lights = [...this.lights, light];
-        });
+        }
         console.log("done adding cube");
       } else {
         console.log(