fix: Fixes page flash due to unloaded CSS.

.github/workflows/test.yml

@@ -0,0 +1,28 @@
+name: Tests
+
+on:
+  pull_request:
+    branches: [master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test

.gitignore

@@ -1,2 +1,3 @@
 /node_modules
-/.nyc_output
+/.nyc_output
+/coverage

README.md

@@ -1,5 +1,6 @@
 # pacman-js
 
+![Code Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen.svg)
 [![Code Style](https://img.shields.io/badge/code%20style-airbnb-brightgreen.svg)](https://github.com/airbnb/javascript)
 
 Pacman clone made with Javascript, HTML, and CSS.

app/scripts/core/gameCoordinator.js

@@ -103,14 +103,7 @@ class GameCoordinator {
       this.soundButtonClick.bind(this),
     );
 
-    const head = document.getElementsByTagName('head')[0];
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = 'build/app.css';
-
-    link.onload = this.preloadAssets.bind(this);
-
-    head.appendChild(link);
+    this.preloadAssets();
   }
 
   /**

app/style/scss/mainPage.scss

@@ -21,11 +21,6 @@ body {
   touch-action: manipulation;
 }
 
-.backdrop {
-  position: absolute;
-  visibility: hidden;
-}
-
 .fps-display {
   position: absolute;
   right: 10px;

app/tests/gameCoordinator.test.js

@@ -67,7 +67,9 @@ describe('gameCoordinator', () => {
         appendChild: () => {},
         removeChild: () => {},
         addEventListener: () => {},
+        remove: () => {},
         style: {},
+        scrollWidth: 500,
       }),
       createElement: () => ({
         classList: {
@@ -83,9 +85,47 @@ describe('gameCoordinator', () => {
       getItem: () => {},
       setItem: () => {},
     };
-    global.Image = class {};
+
+    global.Image = class {
+      set src(value) {
+        // Trigger onload callback immediately
+        if (this.onload) {
+          this.onload();
+        }
+      }
+    };
+
     global.Audio = class {
-      addEventListener() {}
+      constructor() {
+        this.eventListeners = {};
+      }
+
+      addEventListener(event, callback) {
+        if (event === 'canplaythrough') {
+          // Trigger the callback immediately
+          if (callback) {
+            callback();
+          }
+        }
+      }
+
+      load() {
+        // Trigger canplaythrough event after load
+        const callback = this.eventListeners.canplaythrough;
+        if (callback) {
+          callback();
+        }
+      }
+
+      set src(value) {
+        // When src is set, trigger canplaythrough
+        const callback = this.eventListeners.canplaythrough;
+        if (callback) {
+          callback();
+        }
+      }
+
+      onerror() {}
     };
 
     clock = sinon.useFakeTimers();

build/app.css

@@ -24,11 +24,6 @@ body {
   touch-action: manipulation;
 }
 
-.backdrop {
-  position: absolute;
-  visibility: hidden;
-}
-
 .fps-display {
   position: absolute;
   right: 10px;