Add CSS loader

benfrankel · Dec 18, 2023 · 9810f06 · 9810f06
1 parent 1f3ea8f
commit 9810f06
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 52 deletions.
diff --git a/LICENSE-APACHE → LICENSE-Apache-2.0 b/LICENSE-APACHE → LICENSE-Apache-2.0
diff --git a/README.md b/README.md
@@ -2,7 +2,9 @@
 
 This is our submission to Bevy Jam #4. The game can be played [on web here](https://pyrious.itch.io/bevy-jam-simulator).
 
-Type, click, and put on your programming socks as a Bevy Jam #4 participant in this gamedev simulating incremental game! Spawn entities to unlock better upgrades, and spend lines of code to install them.
+Type, click, and put on your programming socks as a **Bevy Jam #4** participant in this gamedev simulating incremental game! Spawn entities to unlock better upgrades, and spend lines of code to install them.
+
+Technical debt will make changes to the codebase more expensive, so make sure to follow good programming practices.
 
 You can listen to [the soundtrack here](https://youtu.be/0JXQqLwuy6E).
 
@@ -11,20 +13,27 @@ You can listen to [the soundtrack here](https://youtu.be/0JXQqLwuy6E).
 - Type to code.
 - Click to spawn entities and buy upgrades.
 
-## License
+## Licenses
 
-The code is written by [Pyrious](https://github.com/benfrankel) and [necrashter](https://github.com/necrashter/), and it is dual-licensed under Apache License Version 2.0 and MIT License.
+### Code
+- The CSS loader / spinner is MIT ([https://github.com/vineethtrv/css-loader]).
+- The CSS background pattern is MIT ([https://github.com/Afif13/CSS-Pattern]).
+- The remainder of the code is written by [Pyrious](https://github.com/benfrankel) and [necrashter](https://github.com/necrashter/), and is dual-licensed under MIT and Apache 2.0.
 
+### Audio
 The following assets are made by [necrashter](https://github.com/necrashter/):
 - The music (`ingame.ogg`) is licensed under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/).
 - `backspace0.ogg`, `keyboard*.ogg`, and `guitar*.ogg` were recorded from scratch and are licensed under CC0.
 - `upgrade0.ogg` is edited from [this CC0 sound](https://freesound.org/people/deleted_user_958643/sounds/254980/). `upgrade0.ogg` itself is also CC0.
 - `upgrade1.ogg` is [this CC0 sound](https://freesound.org/people/the_semen_incident/sounds/39013/).
 
+### Fonts
 The following assets are made by [Pyrious](https://github.com/benfrankel/):
 - The fonts (`PyriousPixel-R.ttf`, `PyriousPixel-B.ttf`, and `PyriousBlocky.ttf`) are licensed under [CC0](https://creativecommons.org/public-domain/cc0/).
 
-Other assets:
-- Sprites (1-bit): https://v3x3d.itch.io/bit-bonanza
-- Sprites (RPG): https://merchant-shade.itch.io/16x16-mixed-rpg-icons
-- Sprites (Ninja): https://pixel-boy.itch.io/ninja-adventure-asset-pack
+### Images
+- The splash screen image belongs to Bevy and is not covered by any of the licenses in this repository.
+- The 1-bit sprite pack is CC0: https://v3x3d.itch.io/bit-bonanza
+- The RPG sprite pack is CC0: https://merchant-shade.itch.io/16x16-mixed-rpg-icons
+- The Ninja sprite pack is CC0: https://pixel-boy.itch.io/ninja-adventure-asset-pack
+- The cover art (`cover.png`) was made by Pyrious and is CC0.
diff --git a/web/index.html b/web/index.html
@@ -8,6 +8,15 @@
 </head>
 
 <body>
+    <div class="game-container">
+        <canvas id="bevy">
+            Javascript and canvas support is required
+        </canvas>
+        <div id="loading">
+            <span class="loader"></span>
+        </div>
+    </div>
+
     <script type="module">
         import './restart-audio-context.js'
         import init from './run.js'
@@ -16,18 +25,19 @@
                 throw error;
             }
         });
-    </script>
 
-    <div class="game-container">
-        <canvas id="bevy">
-            Javascript and canvas support is required
-        </canvas>
-    </div>
+        // Hide loading screen when the game starts
+        const bevy = document.getElementById('bevy');
+        const loading = document.getElementById('loading');
+        const observer = new MutationObserver(() => {
+            if (bevy.height > 1) {
+                loading.style.display = 'none';
+            }
+        });
+        observer.observe(bevy, { attributes: true });
 
-    <script>
+        // Play background music
         function playMusic() {
-          // Check if the browser supports the Web Audio API
-          if (window.AudioContext || window.webkitAudioContext) {
             // Create an AudioContext
             const audioContext = new (window.AudioContext || window.webkitAudioContext)();
 
@@ -38,47 +48,48 @@
             request.responseType = 'arraybuffer';
 
             request.onload = function () {
-              // Decode the audio data
-              audioContext.decodeAudioData(request.response, function (buffer) {
-                // Create a buffer source node
-                const source = audioContext.createBufferSource();
-                source.buffer = buffer;
-
-                // Loop the audio
-                source.loop = true;
-
-                // Create a gain node to control the volume
-                const gainNode = audioContext.createGain();
-                
-                // Set the volume to 80% (0.8)
-                gainNode.gain.value = 0.8;
-
-                // Connect the source to the gain node and the gain node to the audio context's destination
-                source.connect(gainNode);
-                gainNode.connect(audioContext.destination);
-
-                // Start playing the audio
-                source.start(0);
-              }, function (error) {
-                console.error('Error decoding audio file', error);
-              });
+                // Decode the audio data
+                audioContext.decodeAudioData(request.response, function (buffer) {
+                    // Create a buffer source node
+                    const source = audioContext.createBufferSource();
+                    source.buffer = buffer;
+
+                    // Loop the audio
+                    source.loop = true;
+
+                    // Create a gain node to control the volume
+                    const gainNode = audioContext.createGain();
+
+                    // Set the volume to 80% (0.8)
+                    gainNode.gain.value = 0.8;
+
+                    // Connect the source to the gain node and the gain node to the audio context's destination
+                    source.connect(gainNode);
+                    gainNode.connect(audioContext.destination);
+
+                    // Start playing the audio
+                    source.start(0);
+                }, function (error) {
+                    console.error('Error decoding audio file', error);
+                });
             };
 
             request.send();
-          } else {
-            console.error('Web Audio API is not supported in this browser');
-          }
 
-          // Remove the click event listener after the first click
-          document.removeEventListener('click', playMusic);
+            // Remove the click event listener after the first click
+            document.removeEventListener('click', playMusic);
         }
 
-        // Add an event listener for the DOMContentLoaded event
-        document.addEventListener('DOMContentLoaded', function () {
-          // Add a click event listener to the document to trigger playMusic on the first click
-          document.addEventListener('click', playMusic);
-        });
+        // Add an event listener for the DOMContentLoaded event (if the browser supports the Web Audio API)
+        if (window.AudioContext || window.webkitAudioContext) {
+            document.addEventListener('DOMContentLoaded', function () {
+                // Add a click event listener to the document to trigger playMusic on the first click
+                document.addEventListener('click', playMusic);
+            });
+        } else {
+            console.error('Web Audio API is not supported in this browser');
+        }
     </script>
 </body>
 
-</html>
+</html>
diff --git a/web/style.css b/web/style.css
@@ -4,13 +4,53 @@
     border: 0;
 }
 
-html, body, .game-container {
+html,
+body {
     width: 100%;
     height: 100%;
 }
 
 .game-container {
+    width: 100%;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
+
+    /* Background pattern from https://css-pattern.com/ */
+    --s: 200px;
+    --c1: #1d1d1d;
+    --c2: #4e4f51;
+    --c3: #3c3c3c;
+    background:
+        repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c3) 0 180deg) calc(.5*var(--s)) calc(.5*var(--s)*0.577),
+        repeating-conic-gradient(from 29.5deg, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c3) 0 180deg);
+    background-size: var(--s) calc(var(--s)*0.577);
+}
+
+#bevy {
+    height: 0;
+}
+
+/* Loader from https://cssloaders.github.io/ */
+.loader {
+    width: 128px;
+    height: 128px;
+    border: 16px solid #FFF;
+    border-bottom-color: #FF3D00;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }