Merge pull request #3 from rsninja722/sass-constants

Add a runtime CSS injector to allow sharing of variables between CSS and JS

docs/_sass/ui/page-loader.scss

@@ -9,8 +9,8 @@
   height: 99.9vh;
   width: 99.9vw;
   overflow: hidden;
-  background-color: #242424;
-  color: white;
+  background-color: var(--theme-webpage-bg_color);
+  color: var(--theme-webpage-text_color);
 }
 
 .disappear {
@@ -32,7 +32,7 @@
   top: calc(50% - 40px);
   display: inline-block;
   vertical-align: text-bottom;
-  border: 8px solid #ff4136;
+  border: 8px solid var(--theme-webpage-loading_animation_color);;
   border-right-color: transparent;
   border-radius: 50%;
   animation: spinner-border .75s linear infinite;

docs/assets/js/constants.js

@@ -1,5 +1,24 @@
 var constants = {
     testOrganizer: {
         EXAMPLE_DELETE_ME_LATER : 1277336
+    },
+    ui: {
+        // These are the variables that control injection/cssinjector.js
+        // To add a new theme var, you must also add it to the injector
+        theme: {
+
+            // Theme variables specific to the webpage container
+            webpage: {
+                bg_color: "#242424",
+                text_color: "#ffffff",
+                canvas_border: "rgb(63, 63, 63)",
+                loading_animation_color: "#ff4136"
+            },
+
+            // Theme variables specific to the game
+            game: {
+                
+            }
+        }
     }
 };

docs/assets/js/injection/cssinjector.js

@@ -0,0 +1,39 @@
+/**
+ * This file contains code that injects variables from constants.js 
+ * into the document root as CSS variables or use inside style scripts.
+ * 
+ * To add a new dictionary of variables to the document, just add a 
+ * new line to the "mappings" section
+ */
+
+// Document root style object
+let _rootStyle = document.documentElement.style;
+
+/**
+ * Inject all KVPs from a dictionary into the document 
+ * as CSS variables with a defined prefix
+ * 
+ * @param {string} prefix 
+ * @param {*} source_dict 
+ */
+function injectMultiCSS(prefix, source_dict) {
+
+    console.log(`[CSSInjector] Injecting css for: ${prefix}`);
+
+    // Iter through every variable, and add it to the site CSS
+    Object.keys(source_dict).forEach((k) => {
+
+        let varname = `--${prefix}-${k}`;
+
+        _rootStyle.setProperty(varname, source_dict[k]);
+
+    });
+
+}
+
+
+/* Mappings from constants file to CSS */
+// If you are adding theme variables to constants.js, 
+// make sure to also define them here
+injectMultiCSS("theme-webpage", constants.ui.theme.webpage);
+injectMultiCSS("theme-game", constants.ui.theme.game);

docs/assets/js/preloader/preloader.js

@@ -1,4 +1,27 @@
-let preloaderCount = 0;
+/**
+ * This file contains the code that powers the full-screen loading animation.
+ * Multiple animations can be created in the same webpage, and toggled individually.
+ * 
+ * --- Usage ---
+ * let myPreloader = new Preloader();
+ * 
+ * // Show the loader
+ * myPreloader.show(true);
+ * 
+ * // load some stuff
+ * // ...
+ * 
+ * // Fade out the animation
+ * myPreloader.hide(false);
+ * 
+ * --- How it works ---
+ * On creation, the Preloader injects some HTML into the webpage with a unique ID 
+ * for the instance. Hiding and showing works by modifying the active classes for 
+ * the loader. The "appear" and "disappear" classes will render their respective 
+ * animations in _sass/ui/page_loader.scss
+ */
+
+let _preloaderCount = 0;
 
 /**
  * A fullscreen loading animation utility
@@ -8,13 +31,13 @@ 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;
+        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}`);
+        this.element = document.getElementById(`preloader${_preloaderCount - 1}`);
 
-        console.log(`[Preloader] Created preloader ${preloaderCount - 1}`);
+        console.log(`[Preloader] Created preloader ${_preloaderCount - 1}`);
 
     }
 

docs/index.html

@@ -5,14 +5,14 @@
         <title>title</title>
         <style>
             html {
-                background-color: #242424;
-                color: white;
+                background-color: var(--theme-webpage-bg_color);
+                color: var(--theme-webpage-text_color);
             }
             canvas {
                 position:absolute;
                 top:0;bottom:0;right:0;left:0;
                 margin:auto;
-                border: 5px solid rgb(63, 63, 63); 
+                border: 5px solid var(--theme-webpage-canvas_border);
                 border-radius: 10px;
             }
         </style>
@@ -20,10 +20,19 @@
     </head>
     <body>
         <canvas width="1000" height="800" id="game"></canvas>
+
+        <!-- Graphics Library -->
         <script src="assets/js/game.js"></script>
+
+        <!-- Constants & Globals -->
         <script src="assets/js/constants.js"></script>
         <script src="assets/js/utils.js"></script>
+
+        <!-- Webpage -->
+        <script src="assets/js/injection/cssinjector.js"></script>
         <script src="assets/js/preloader/preloader.js"></script>
+
+        <!-- Game -->
         <script src="assets/js/index.js"></script>
     </body>
 </html>