Add spinny thing for a loader

docs/_config.yml

@@ -0,0 +1,3 @@
+sass:
+    sass_dir: _sass
+    style: compressed

docs/_sass/ui/fade-animation.scss

@@ -0,0 +1,45 @@
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@keyframes fadeout {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadeout {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeout {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadeout {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}

docs/_sass/ui/page-loader.scss

@@ -0,0 +1,39 @@
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.preloader {
+  position: absolute;
+  height: 99.9vh;
+  width: 99.9vw;
+  overflow: hidden;
+  background-color: #242424;
+  color: white;
+}
+
+.disappear {
+  animation-name: fadeout;
+  animation-duration: 1s;
+}
+
+.appear {
+  animation-name: fadein;
+  animation-duration: 1s;
+}
+
+.preloader .spinner-border {
+  width: 80px;
+  height: 80px;
+  margin: auto;
+  position: absolute;
+  left: calc(50% - 40px);
+  top: calc(50% - 40px);
+  display: inline-block;
+  vertical-align: text-bottom;
+  border: 8px solid #ff4136;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spinner-border .75s linear infinite;
+}

docs/assets/css/main.scss

@@ -0,0 +1,24 @@
+---
+---
+
+@import "ui/fade-animation.scss";
+@import "ui/page-loader.scss";
+
+html {
+  box-sizing: border-box;
+}
+
+body{
+    padding: 0;
+    margin:0;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.hidden {
+  display: none !important;
+}

docs/assets/js/index.js

@@ -0,0 +1,39 @@
+
+// Handle starting the pre-load animation
+var page_preloader = new Preloader();
+page_preloader.show(true);
+
+images = [
+    ""
+];
+
+audio = [
+    ""
+];
+
+function update() {
+
+}
+
+function input() {
+
+}
+
+function draw() {
+
+}
+
+function absoluteDraw() {
+
+}
+
+function onAssetsLoaded() {
+
+
+}
+
+setup(60);
+
+// Hide the preloader
+// This should actually run after all assets have been downloaded
+page_preloader.hide(false);

docs/assets/js/preloader/preloader.js

@@ -0,0 +1,65 @@
+let preloaderCount = 0;
+
+/**
+ * A fullscreen loading animation utility
+ */
+class Preloader {
+
+    constructor() {
+
+        // Add a preloader element to the page
+        document.body.innerHTML += `<div id="preloader${preloaderCount}" class="preloader hidden"><div class="spinner-border text-danger" role="status"></div></div>`;
+        preloaderCount += 1;
+
+        // Get the element context for controlling
+        this.element = document.getElementById(`preloader${preloaderCount - 1}`);
+
+        console.log(`[Preloader] Created preloader ${preloaderCount - 1}`);
+
+    }
+
+    /**
+     * Show the preloader
+     * 
+     * @param {Boolean} now Show without a fade-in
+     */
+    show(now) {
+
+        // Wipe the modifier classes
+        this.element.classList.remove("hidden");
+        this.element.classList.remove("appear");
+        this.element.classList.remove("disappear");
+
+        // If we don't need the loader right now, give it a fadein property
+        if (!now) {
+            this.element.classList.add("appear");
+        }
+
+        console.log("[Preloader] Showing preloader");
+    }
+
+    /**
+     * Hide the preloader
+     * 
+     * @param {Boolean} now Hide without a fade-out
+     */
+    hide(now) {
+
+        // Wipe the modifier classes
+        this.element.classList.remove("appear");
+
+        // Make the animation fade out
+        this.element.classList.add("disappear");
+
+        // If we are hiding now, just hide, otherwise time the hide
+        if (now) {
+            this.element.classList.add("hidden");
+        } else {
+            setTimeout(() => {
+                this.element.classList.add("hidden");
+            }, 1000);
+        }
+
+        console.log("[Preloader] Hiding preloader");
+    }
+}

docs/index.html

@@ -16,10 +16,12 @@
                 border-radius: 10px;
             }
         </style>
+        <link rel="stylesheet" href="assets/css/main.css">
     </head>
     <body>
         <canvas width="1000" height="800" id="game"></canvas>
-        <script src="scripts/game.js"></script>
+        <script src="assets/js/game.js"></script>
-        <script src="scripts/index.js"></script>
+        <script src="assets/js/preloader/preloader.js"></script>
+        <script src="assets/js/index.js"></script>
     </body>
 </html>

docs/scripts/index.js

@@ -1,29 +0,0 @@
-images = [
-    ""
-];
-
-audio = [
-    ""
-];
-
-function update() {
-
-}
-
-function input() {
-
-}
-
-function draw() {
-
-}
-
-function absoluteDraw() {
-
-}
-
-function onAssetsLoaded() {
-
-}
-
-setup(60);