From 805360565b0445057b1b8c3eb4666c62d5afe99c Mon Sep 17 00:00:00 2001 From: Evan Pratten Date: Fri, 17 Apr 2020 17:06:43 -0400 Subject: [PATCH 1/4] Add more documentation to the preloader --- docs/assets/js/constants.js | 14 ++++++++++++++ docs/assets/js/preloader/preloader.js | 23 +++++++++++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/docs/assets/js/constants.js b/docs/assets/js/constants.js index 5ed3701..a885b7e 100644 --- a/docs/assets/js/constants.js +++ b/docs/assets/js/constants.js @@ -1,5 +1,19 @@ 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: { + webpage: { + bg_color: "#242424", + text_color: "#ffffff", + canvas_border: "rgb(63, 63, 63)" + }, + game: { + + } + } } }; \ No newline at end of file diff --git a/docs/assets/js/preloader/preloader.js b/docs/assets/js/preloader/preloader.js index c1c9557..111b219 100644 --- a/docs/assets/js/preloader/preloader.js +++ b/docs/assets/js/preloader/preloader.js @@ -1,3 +1,26 @@ +/** + * 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; /** From d4dbed85e909ac06387a6e6ab1fdf08104407a19 Mon Sep 17 00:00:00 2001 From: Evan Pratten Date: Fri, 17 Apr 2020 17:17:39 -0400 Subject: [PATCH 2/4] more documentation --- docs/assets/js/constants.js | 4 ++++ docs/assets/js/injection/cssinjector.js | 18 ++++++++++++++++++ docs/assets/js/preloader/preloader.js | 10 +++++----- 3 files changed, 27 insertions(+), 5 deletions(-) create mode 100644 docs/assets/js/injection/cssinjector.js diff --git a/docs/assets/js/constants.js b/docs/assets/js/constants.js index a885b7e..a16c253 100644 --- a/docs/assets/js/constants.js +++ b/docs/assets/js/constants.js @@ -6,11 +6,15 @@ var constants = { // 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)" }, + + // Theme variables specific to the game game: { } diff --git a/docs/assets/js/injection/cssinjector.js b/docs/assets/js/injection/cssinjector.js new file mode 100644 index 0000000..5483fa9 --- /dev/null +++ b/docs/assets/js/injection/cssinjector.js @@ -0,0 +1,18 @@ + + +/** + * 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) { + +} + +/* 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); \ No newline at end of file diff --git a/docs/assets/js/preloader/preloader.js b/docs/assets/js/preloader/preloader.js index 111b219..b48ce4a 100644 --- a/docs/assets/js/preloader/preloader.js +++ b/docs/assets/js/preloader/preloader.js @@ -21,7 +21,7 @@ * animations in _sass/ui/page_loader.scss */ -let preloaderCount = 0; +let _preloaderCount = 0; /** * A fullscreen loading animation utility @@ -31,13 +31,13 @@ class Preloader { constructor() { // Add a preloader element to the page - document.body.innerHTML += ``; - preloaderCount += 1; + document.body.innerHTML += ``; + _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}`); } From e9a5521dfc3d34aba8a9b24e9b135fcae3ab2e3d Mon Sep 17 00:00:00 2001 From: Evan Pratten Date: Fri, 17 Apr 2020 17:20:51 -0400 Subject: [PATCH 3/4] Add CSS injection code --- docs/assets/js/injection/cssinjector.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/assets/js/injection/cssinjector.js b/docs/assets/js/injection/cssinjector.js index 5483fa9..22cd1c5 100644 --- a/docs/assets/js/injection/cssinjector.js +++ b/docs/assets/js/injection/cssinjector.js @@ -1,4 +1,6 @@ +// Document root theme +let _rootCSS = document.body.style; /** * Inject all KVPs from a dictionary into the document @@ -9,6 +11,17 @@ */ 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}`; + + _rootCSS += `${varname}:${source_dict[k]};` + + }); + } /* Mappings from constants file to CSS */ From 516ff1b846f0f47a2de8883bcee5552c601884cf Mon Sep 17 00:00:00 2001 From: Evan Pratten Date: Fri, 17 Apr 2020 18:36:29 -0400 Subject: [PATCH 4/4] Add CSS mappings and docs --- docs/_sass/ui/page-loader.scss | 6 +++--- docs/assets/js/constants.js | 3 ++- docs/assets/js/injection/cssinjector.js | 20 ++++++++++++++------ docs/index.html | 15 ++++++++++++--- 4 files changed, 31 insertions(+), 13 deletions(-) diff --git a/docs/_sass/ui/page-loader.scss b/docs/_sass/ui/page-loader.scss index 5a5fa5f..e5a0b52 100644 --- a/docs/_sass/ui/page-loader.scss +++ b/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; diff --git a/docs/assets/js/constants.js b/docs/assets/js/constants.js index a16c253..71638b2 100644 --- a/docs/assets/js/constants.js +++ b/docs/assets/js/constants.js @@ -11,7 +11,8 @@ var constants = { webpage: { bg_color: "#242424", text_color: "#ffffff", - canvas_border: "rgb(63, 63, 63)" + canvas_border: "rgb(63, 63, 63)", + loading_animation_color: "#ff4136" }, // Theme variables specific to the game diff --git a/docs/assets/js/injection/cssinjector.js b/docs/assets/js/injection/cssinjector.js index 22cd1c5..b07245a 100644 --- a/docs/assets/js/injection/cssinjector.js +++ b/docs/assets/js/injection/cssinjector.js @@ -1,6 +1,13 @@ +/** + * 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 theme -let _rootCSS = document.body.style; +// Document root style object +let _rootStyle = document.documentElement.style; /** * Inject all KVPs from a dictionary into the document @@ -17,15 +24,16 @@ function injectMultiCSS(prefix, source_dict) { Object.keys(source_dict).forEach((k) => { let varname = `--${prefix}-${k}`; - - _rootCSS += `${varname}:${source_dict[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); \ No newline at end of file +injectMultiCSS("theme-game", constants.ui.theme.game); diff --git a/docs/index.html b/docs/index.html index ebac9fb..e925d13 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,14 +5,14 @@ title @@ -20,10 +20,19 @@ + + + + + + + + + \ No newline at end of file