Browse Source

make the lights wait to turn on in stats-world

kb/add-usage-guide
Trent Larson 2 years ago
parent
commit
786f0bd94a
  1. 48
      src/components/World/World.js

48
src/components/World/World.js

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

Loading…
Cancel
Save