Merge pull request #2 from rsninja722/preloader

I made a preloader

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/constants.js

@@ -0,0 +1,5 @@
+var constants = {
+    testOrganizer: {
+        EXAMPLE_DELETE_ME_LATER : 1277336
+    }
+};

docs/assets/js/index.js

@@ -0,0 +1,68 @@
+// Handle starting the pre-load animation
+var page_preloader = new Preloader();
+page_preloader.show(true);
+
+images = [
+    ""
+];
+
+audio = [
+    ""
+];
+
+var globalStates = {
+    titleScreen:0,
+    starting:1,
+    playing:2,
+    paused:3,
+    end:4
+};
+var globalState = globalStates.titleScreen;
+
+function update() {
+    switch(globalState) {
+        // title screen
+        case globalStates.titleScreen:
+
+            break;
+        // starting
+        case globalStates.starting:
+
+            break;
+        // playing
+        case globalStates.playing:
+
+            break;
+        // paused
+        case globalStates.paused:
+
+            break;
+        // end
+        case globalStates.end:
+
+            break;
+    }
+}
+
+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/assets/js/utils.js

@@ -0,0 +1,41 @@
+// clamps a value between min and max
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+
+// linear interpolation towards somewhere
+function lerp(start, end, amt) { return (1 - amt) * start + amt * end; }
+
+// returns a new value with friction applied
+function friction(value, amount) {
+    if (value > 0) { value -= amount; }
+    if (value < 0) { value += amount; }
+    if (Math.abs(value) < amount * 2) { value = 0; }
+    return value;
+}
+
+var tau = Math.PI * 2;
+var pi = Math.PI;
+// returns a new angle that gets closer to the target angle
+function turn(cur, target, speed) {
+    if (target < 0) { target = tau + target; }
+    if ((cur % tau) > target) {
+        if ((cur % tau) - target > pi) {
+            cur += speed;
+        } else {
+            cur -= speed;
+        }
+    } else {
+        if (target - (cur % tau) > pi) {
+            cur -= speed;
+        } else {
+            cur += speed;
+        }
+    }
+    if (Math.abs(cur - target) < speed * 1.1) {
+        cur = target;
+    }
+    if (cur > tau) { cur = cur - tau; }
+    if (cur < 0) { cur = tau + cur; }
+    return cur;
+}

docs/index.html

@@ -16,10 +16,14 @@
                 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/constants.js"></script>
+        <script src="assets/js/utils.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);

programmingGuide.md

@@ -0,0 +1,17 @@
+# guide for how we should program
+
+## states
+
+every separate of the game (title, transition, paused, etc.) should have a separate spot in a main switch statement, and have a separate folder where all code relating to that state should be
+
+## magic numbers
+
+no magic numbers, numbers that potentially might need to be changed should be a constant in constants.js
+
+## comments 
+
+I don't care how you comment, just make sure we can all understand your code
+
+## source control 
+
+Work on your own branch, which should be named what you are working on. Master should always be working