feat(results): Create test results summary page

Graymattermetrics · Jul 15, 2024 · 59b91e1 · 59b91e1
1 parent 6902625
commit 59b91e1
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 31 deletions.
diff --git a/src/routes/game.ts b/src/routes/game.ts
@@ -527,7 +527,7 @@ export class CogSpeedGame {
    */
   public async start(time: number | null = null) {
     this.ui?.setupGame(this);
-
+    
     this.startTime = time === null ? performance.now() : time;
     this.maxTestTimeout = setTimeout(this.stop.bind(this), this.config.timeouts.max_test_duration);
     this.nextRound();
@@ -548,9 +548,7 @@ export class CogSpeedGame {
     const status = info.status;
     const message = info.message;
 
-    for (var i = this.app.stage.children.length - 1; i >= 0; i--) {
-      this.app.stage.removeChild(this.app.stage.children[i]);
-    }
+    this.ui.removeAllStageChildren();
 
     const round = (num: number, sf: number = 3) => {
       return Math.round((num * 10 ** sf) / 10 ** sf);

diff --git a/src/routes/results.ts b/src/routes/results.ts
@@ -214,39 +214,66 @@ export class ProcessResultsPage {
     return container;
   }
 
-  public async show(data: { [key: string]: any }, config: Config) {
-    const loadingContainer = this.loadingScreen();
-
-    const [geolocation, normalizedLocation] = await this.getCurrentPosition();
-    data.location = {
-      geolocation,
-      normalizedLocation,
-    };
-
-    const textObject = new Text(`Test summary
+  public async showSummaryPage(data: { [key: string]: any }, config: Config) {
+    const textSummary = new Text(`Test summary
       Test version: ${config.version}
       Account ID: ...
-      Test ID: ${data._id}
+      Date/time: ${data._date}
+      Location: ${data.location.normalizedLocation}
       Status: ${data.status}
       Message: ${data.statusCode}
-      Date/time: ${data._date}
-      Location: ${normalizedLocation}
-      Test duration: ${data.testDuration}
-      No rounds: ${data.numberOfRounds}
-      No blocks: ${data.blocking.blockCount}
-      Block range: ${data.blocking.blockRange}
-      Final block diff: ${data.blocking.finalBlockDiff}
-      `, {
+      Blocking duration: ${data.blockingRoundDuration}`, {
       fontFamily: "Trebuchet",
       fontSize: 18,
       fill: 0xffffff,
       align: "center",
+      wordWrap: true,
+      wordWrapWidth: this.app.screen.width * 0.8
     });
-    textObject.position.set(this.app.screen.width * 0.5,
-      this.app.screen.height * 0.2);
+    textSummary.position.set(this.app.screen.width * 0.5,
+      this.app.screen.height * 0.15);
 
-    textObject.anchor.set(0.5);
-
+    textSummary.anchor.set(0.5);
+    this.app.stage.addChild(textSummary);
+
+    const backButtonContainer = this.ui.createButton(
+      "Go back",
+      this.app.screen.width * 0.5,
+      this.app.screen.height * 0.85,
+      this.app.screen.width * 0.6,
+      this.app.screen.height * 0.2
+    );
+    backButtonContainer.on("pointerdown", () => {
+      this.ui.removeAllStageChildren();
+      this.show(data, config, {shouldLoad: false});
+    });
+    this.app.stage.addChild(backButtonContainer);
+  }
+
+  public async show(data: { [key: string]: any }, config: Config, args: { shouldLoad: boolean} = {shouldLoad: true}) {
+    let loadingContainer;
+    if (args.shouldLoad) {
+      loadingContainer = this.loadingScreen();
+    }
+
+
+    const [geolocation, normalizedLocation] = await this.getCurrentPosition();
+    data.location = {
+      geolocation,
+      normalizedLocation,
+    };
+
+    const summaryPageButtonContainer = this.ui.createButton(
+      "View test summary",
+      this.app.screen.width * 0.5,
+      this.app.screen.height * 0.3,
+      this.app.screen.width * 0.6,
+      this.app.screen.height * 0.2
+    );
+    summaryPageButtonContainer.on("pointerdown", () => {
+      this.ui.removeAllStageChildren();
+      this.showSummaryPage(data, config);
+    });
 
     const responseData = JSON.parse(JSON.stringify(data));
     delete responseData["answerLogs"];
@@ -289,13 +316,14 @@ export class ProcessResultsPage {
       startUp(config, false);
     });
 
-    await this.ui.emulateLoadingTime();
-
-    loadingContainer.destroy();
+    if (args.shouldLoad && loadingContainer) {
+      await this.ui.emulateLoadingTime();
+      loadingContainer.destroy();
+    }
 
+    this.app.stage.addChild(summaryPageButtonContainer);
     this.app.stage.addChild(viewTestLogsButtonContainer);
     this.app.stage.addChild(restartTestButtonContainer);
     this.app.stage.addChild(homeButton);
-    this.app.stage.addChild(textObject);
   }
 }
diff --git a/src/ui/handler.ts b/src/ui/handler.ts
@@ -368,6 +368,12 @@ export class CogSpeedGraphicsHandler {
     this.app.stage.addChild(background);
   }
 
+  public removeAllStageChildren() {
+    for (var i = this.app.stage.children.length - 1; i >= 0; i--) {
+      this.app.stage.removeChild(this.app.stage.children[i]);
+    }
+  }
+
   public createDisplayGear(posX: number, posY: number, gearLocation: string): Container {
     const [container] = this.createGear(posX, posY, gearLocation);
     return container;