Browse Source

add timing & animation details to stats-world

world-fix
Trent Larson 1 year ago
parent
commit
b0fc8818ee
  1. 1
      project.task.yaml
  2. 6
      src/components/World/World.js
  3. 7
      src/components/World/components/objects/landmarks.js
  4. 9
      src/libs/endorserServer.ts
  5. 2
      src/views/AccountViewView.vue
  6. 38
      src/views/StatisticsView.vue

1
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 :

6
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 };

7
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

9
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;

2
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>

38
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;

Loading…
Cancel
Save