Merge branch 'practice-test-incorporated' of https://github.com/graym…

…attermetrics/cogspeed into practice-test-incorporated

src/App.tsx

@@ -1,85 +1,6 @@
-import axios from "axios";
-import { Application, Text } from "pixi.js";
-import { CogSpeedGame } from "./routes/game";
-import { StartPage } from "./routes/start";
-import { Config } from "./types/Config";
-import { CogSpeedGraphicsHandler } from "./ui/handler";
+import { startUp } from "./main";
 
-const gameWidth = window.innerWidth;
-const gameHeight = window.innerHeight;
-
-const app = new Application<HTMLCanvasElement>({
-  width: gameWidth,
-  height: gameHeight,
-});
-
-/**
- * Loads the config from the backend
- * NOTE: Increases load time
- */
-async function loadConfig(): Promise<Config> {
-  let url = "https://t6pedjjwcb.execute-api.us-east-2.amazonaws.com/default/getCogspeedConfig";
-  const params = new URLSearchParams(window.location.search);
-
-  const version = params.get("version");
-  const branch = params.get("branch");
-
-  // Either append version or branch
-  if (version) url += `?version=${version}`;
-  else if (branch) url += `?branch=${branch}`;
-
-  const request = await axios.get(url);
-  return await request.data;
-}
-
-
-/**
- * Loads initial page
- */
-async function main() {
-  const config = await loadConfig();
-  if (config.error) throw new Error(config.reason);
-
-  const appDiv = document.querySelector(".App");
-  if (!appDiv) throw new Error("No app div found");
-  appDiv.appendChild(app.view);
-
-  // Show GMM Logo while loading all textures
-  // Temp text instead of logo for now
-  const loadingText = new Text("Loading", {
-    fontFamily: "Trebuchet",
-    fontSize: 24,
-    fill: 0xffffff,
-    align: "center",
-  });
-  loadingText.anchor.set(0.5);
-  loadingText.position.set(gameWidth * 0.5, gameHeight * 0.5);
-  app.stage.addChild(loadingText);
-  app.ticker.add((delta) => {
-    loadingText.text = "Loading" + ".".repeat((Math.floor(app.ticker.lastTime / 1000) % 3) + 1);
-  });
-
-  const graphicsManager = new CogSpeedGraphicsHandler(app);
-
-  // Load screen while displaying loading text
-  await graphicsManager.emulateLoadingTime();
-  graphicsManager.setBackground("carbon");
-  app.stage.removeChild(loadingText);
-
-  // Display the home page
-  const startPage = new StartPage(config, app, graphicsManager);
-  await startPage.displayHomePage();
-
-  // Display start page
-  const sleepData = await startPage.start();
-  if (!sleepData) throw new Error("No sleep data");
-
-  // Game phase - called after start button is clicked
-  const game = new CogSpeedGame(config, app, graphicsManager, sleepData);
-  game.start();
-}
-
-window.onload = main;
+window.onload = () => {startUp()};
 export default function App() {
   return <div className="App"></div>;
-}
+}

src/main.ts

@@ -0,0 +1,92 @@
+import axios from "axios";
+import { Application, Text } from "pixi.js";
+import { CogSpeedGame } from "./routes/game";
+import { StartPage } from "./routes/start";
+import { Config } from "./types/Config";
+import { CogSpeedGraphicsHandler } from "./ui/handler";
+
+
+function createApp(): Application {
+  const gameWidth = window.innerWidth;
+  const gameHeight = window.innerHeight;
+
+  const app = new Application<HTMLCanvasElement>({
+    width: gameWidth,
+    height: gameHeight,
+  });
+
+  const appDiv = document.querySelector(".App");
+  if (!appDiv) throw new Error("No app div found");
+  appDiv.appendChild(app.view);
+
+  return app;
+}
+
+
+/**
+ * Loads the config from the backend
+ * NOTE: Increases load time
+ */
+async function loadConfig(): Promise<Config> {
+  let url = "https://t6pedjjwcb.execute-api.us-east-2.amazonaws.com/default/getCogspeedConfig";
+  const params = new URLSearchParams(window.location.search);
+
+  const version = params.get("version");
+  const branch = params.get("branch");
+
+  // Either append version or branch
+  if (version) url += `?version=${version}`;
+  else if (branch) url += `?branch=${branch}`;
+
+  const request = await axios.get(url);
+  return await request.data;
+}
+
+
+/**
+ * 
+ * @param config 
+ * @param startNow Called from restart. Bypasses sleep data
+ */
+export async function startUp (config: Config | null = null, startNow: boolean = false) {
+  const app = createApp();
+
+  if (config === null) {
+      config = await loadConfig();
+      if (config.error) throw new Error(config.reason);
+  }
+
+    // Show GMM Logo while loading all textures
+    // Temp text instead of logo for now
+    const loadingText = new Text("Loading", {
+      fontFamily: "Trebuchet",
+      fontSize: 24,
+      fill: 0xffffff,
+      align: "center",
+    });
+    loadingText.anchor.set(0.5);
+    loadingText.position.set(app.screen.width * 0.5, app.screen.height * 0.5);
+    app.stage.addChild(loadingText);
+    app.ticker.add((delta) => {
+      loadingText.text = "Loading" + ".".repeat((Math.floor(app.ticker.lastTime / 1000) % 3) + 1);
+    });
+
+    const graphicsManager = new CogSpeedGraphicsHandler(app);
+
+    // Load screen while displaying loading text
+    await graphicsManager.emulateLoadingTime();
+    graphicsManager.setBackground("carbon");
+    app.stage.removeChild(loadingText);
+
+    // Display the home page
+    const startPage = new StartPage(config, app, graphicsManager);
+    if (!startNow) await startPage.displayHomePage();
+
+    // Display start page
+    const sleepData = await startPage.start(startNow);
+    if (!sleepData) throw new Error("No sleep data");
+
+    // Game phase - called after start button is clicked
+    const game = new CogSpeedGame(config, app, graphicsManager, sleepData);
+    game.start();
+};

src/routes/game.ts

@@ -162,7 +162,7 @@ export class CogSpeedGame {
       this.currentRound = 1;
       return this.practiceMode();
     }
-    this.currentRoundTimeout = setTimeout(this.displayCorrectAnswer.bind(this), this.config.timeouts.max_initial_no_response * 0.5);
+    this.currentRoundTimeout = setTimeout(this.displayCorrectAnswer.bind(this), this.config.timeouts.max_initial_no_response);
   }
 
   /**
@@ -595,6 +595,6 @@ export class CogSpeedGame {
     };
 
     const resultsPage = new ProcessResultsPage(this.app, this.ui);
-    await resultsPage.show(data);
+    await resultsPage.show(data, this.config);
   }
 }

src/routes/results.ts

@@ -4,6 +4,8 @@ import { Application, Container, Graphics, Point, Sprite } from "pixi.js";
 import { PDFDocument, rgb, StandardFonts } from "pdf-lib";
 import { table } from "table";
 import { CogSpeedGraphicsHandler } from "../ui/handler";
+import { startUp } from "../main";
+import { Config } from "../types/Config";
 
 export class ProcessResultsPage {
   constructor(private app: Application, private ui: CogSpeedGraphicsHandler) {}
@@ -181,7 +183,7 @@ export class ProcessResultsPage {
     return container;
   }
 
-  public async show(data: { [key: string]: any }) {
+  public async show(data: { [key: string]: any }, config: Config) {
     const loadingContainer = this.loadingScreen();
 
     const [geolocation, normalizedLocation] = await this.getCurrentPosition();
@@ -214,7 +216,7 @@ export class ProcessResultsPage {
     );
     restartTestButtonContainer.on("pointerdown", () => {
       // TODO: Send back to home page
-      window.location.reload();
+      startUp(config, true);
     });
 
     await this.ui.emulateLoadingTime();

src/routes/start.ts

@@ -294,8 +294,9 @@ private async confirmSleepData(sleepData: { [key: string]: any }): Promise<boole
    * and numbers correlate to different parts of the screen. 
    */
   public async displayReadyDemo(numberOfScreens: number) {
-    for (let i = 0; numberOfScreens > i; i ++ ) {
-      if (i >= this.ui.readyDemoTextures.length) break;
+    let continueButton;
+    for (let i = 0; i < numberOfScreens; i ++ ) {
+      if (i >= this.ui.readyDemoTextures.length - 1) break;
 
       const size = 512;
       const smallestScreenSize = Math.min(this.app.screen.width, this.app.screen.height);
@@ -305,12 +306,30 @@ private async confirmSleepData(sleepData: { [key: string]: any }): Promise<boole
       readyDemo.position.set(this.app.screen.width * 0.5, this.app.screen.height * 0.45);
       readyDemo.anchor.set(0.5);
 
-      const container = this.ui.createButton("Start now", this.app.screen.width * 0.5, this.app.screen.height * 0.85, this.app.screen.width * 0.6, this.app.screen.height * 0.2)
-
+      continueButton = this.ui.createButton("Continue", this.app.screen.width * 0.3, this.app.screen.height * 0.85, this.app.screen.width * 0.6, this.app.screen.height * 0.2, 18);
+      const skipToTest = this.ui.createButton("Skip", this.app.screen.width * 0.7, this.app.screen.height * 0.85, this.app.screen.width * 0.6, this.app.screen.height * 0.2, 18)
+
+      this.container.addChild(continueButton);
       this.container.addChild(readyDemo);
-      this.container.addChild(container);
-      await this.waitForKeyPress();
+      this.container.addChild(skipToTest);
+      if (await this.waitForKeyPress(skipToTest, [this.container]) === skipToTest) break;
     }
+
+    // TODO: Simplify
+    // Display final screen
+    const size = 512;
+    const smallestScreenSize = Math.min(this.app.screen.width, this.app.screen.height);
+
+    const readyDemo = new Sprite(this.ui.readyDemoTextures[this.ui.readyDemoTextures.length - 1]);
+    readyDemo.scale = new Point(smallestScreenSize / size, smallestScreenSize / size);
+    readyDemo.position.set(this.app.screen.width * 0.5, this.app.screen.height * 0.45);
+    readyDemo.anchor.set(0.5);
+
+    const skipToTest = this.ui.createButton("Start now", this.app.screen.width * 0.5, this.app.screen.height * 0.85, this.app.screen.width * 0.6, this.app.screen.height * 0.2)
+
+    this.container.addChild(readyDemo);
+    this.container.addChild(skipToTest);
+    await this.waitForKeyPress();
   }
 
   /**
@@ -319,8 +338,13 @@ private async confirmSleepData(sleepData: { [key: string]: any }): Promise<boole
    * TODO: Seperate pages better
    * @returns {Promise<SleepData>} The test data
    */
-  public async start(): Promise<SleepData | false> {
-    if (process.env.NODE_ENV === "development") return {fatigueLevel: 1};
+  public async start(skipToDisplay: boolean): Promise<SleepData | false> {
+    // if (process.env.NODE_ENV === "development") return {fatigueLevel: -1};
+
+    if (skipToDisplay) {
+      await this.displayReadyDemo(Infinity);
+      return {fatigueLevel: 1};
+    }
 
     // Display the test disclaimer
     const ready = await this.displayTestDisclaimer();
@@ -340,7 +364,7 @@ private async confirmSleepData(sleepData: { [key: string]: any }): Promise<boole
 
     if (this.config.display_refresher_screens) {
       // Display the ready demo screen with one screen
-      await this.displayReadyDemo(1);
+      await this.displayReadyDemo(Infinity);
     }
 
     return {

src/ui/handler.ts

@@ -15,6 +15,7 @@ import smallButtonTextureImage from "../assets/small_button.png";
 import readyDemoImageOne from "../assets/ready_demo_one.png";
 import readyDemoImageTwo from "../assets/ready_demo_two.png";
 import readyDemoImageThree from "../assets/ready_demo_three.png";
+import readyDemoImageFinal from "../assets/ready_demo_final.png";
 
 import bgCarbonImage from "../assets/bg_carbon.jpg";
 import bgSteelImage from "../assets/bg_steel.jpg";
@@ -99,7 +100,8 @@ export class CogSpeedGraphicsHandler {
     this.smallButtonTextures = Texture.from(smallButtonTextureImage);
     this.largeButtonTexture = Texture.from(largeButtonTextureImage);
     this.loadingGearTexture = Texture.from(loadingGearImage);
-    this.readyDemoTextures = [Texture.from(readyDemoImageOne), Texture.from(readyDemoImageTwo), Texture.from(readyDemoImageThree)];
+    this.readyDemoTextures = [Texture.from(readyDemoImageOne), Texture.from(readyDemoImageTwo), 
+      Texture.from(readyDemoImageThree), Texture.from(readyDemoImageFinal)];
     this.logoTexture = Texture.from(logoWithGearsImage);
 
     // Load number and dot assets
@@ -432,11 +434,12 @@ export class CogSpeedGraphicsHandler {
     // Block until the start page is removed
     let i = 0;
     while (container.destroyed === false) {
+      console.log(i)
       // Ripple 3 times every 300 ms
-      if (i % 6 == 0 && i < 20) this.rippleAnimation(sprite);
+      if (i % 3 === 0 && i < 9) this.rippleAnimation(sprite);
       // Timed out
       if (performance.now() > startTime + timeout) return null;
-      await new Promise((resolve) => setTimeout(resolve, 50));
+      await new Promise((resolve) => setTimeout(resolve, 100));
       i ++;
     }
     return true;