Implement practice test mode within the test (#58)

* feat(game): Implement practice test mode

* refactor(practice-mode): Implement correct practice mode

* refactor(algo): Merge self-paced into practice-test

* refactor(training-mode): Display answer

* fix(display-correct-answer): Don't break if clicked during ripple animation

* Misc tasks [feat] (#61)

* feat: Go back to start now on restart & Skip past demos

* chore(tests): Fix failing tests

* feat(start-page): Add TOS and Privacy Policy links

* fix(startup): Create app after cogspeed has loaded

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "cogspeed",
+        "Samn"
+    ]
+}

CHANGELOG.md

@@ -0,0 +1,10 @@
+[2024-practice-test]
+
+Refactors the practice test to be incorporated with the test, removing any need for practice test mode.
+Practice mode:
+    - Presents up to 20 screens to acquit the user with how the CogSpeed test works.
+    - These rounds are un-judged, and do not contribute to the remainder of the test.
+    - Roughly 4 correct answers in a row with an art less than ``right_count_art_less_than`` will continue on to self-paced mode. This is the only path to continue to self-paced mode.
+    - If more than 20 screens pass without the above-mentioned condition, the test will exit unsuccessfully with error code 4.
+
+- Merges self-paced into practice-test

src/App.tsx

@@ -1,96 +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 { PracticeCogSpeed } from "./routes/practice";
+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);
-  const route = await startPage.displayHomePage();
-
-  // TODO: Implement routing so that practice can be situated under /practice
-  if (route === "practice") {
-    await startPage.displayTestDisclaimer();
-    const fatigueLevel = await startPage.displaySamnPerelliChecklist();
-    await startPage.displayReadyDemo(10);
-
-    const practiceTest = new PracticeCogSpeed(config, app, graphicsManager, fatigueLevel);
-    return await practiceTest.start();
-  }
-
-  // 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) {
+  if (config === null) {
+      config = await loadConfig();
+      if (config.error) throw new Error(config.reason);
+  }
+
+  const app = createApp();
+
+    // 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();
+};