diff --git a/docs/_config.yml b/docs/_config.yml
index e69de29..40a0a0c 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -0,0 +1,3 @@
+sass:
+ sass_dir: _sass
+ style: compressed
\ No newline at end of file
diff --git a/docs/_sass/ui/fade-animation.scss b/docs/_sass/ui/fade-animation.scss
new file mode 100644
index 0000000..38bf53e
--- /dev/null
+++ b/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; }
+}
diff --git a/docs/_sass/ui/page-loader.scss b/docs/_sass/ui/page-loader.scss
new file mode 100644
index 0000000..5a5fa5f
--- /dev/null
+++ b/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;
+}
diff --git a/docs/assets/css/main.scss b/docs/assets/css/main.scss
new file mode 100644
index 0000000..2366274
--- /dev/null
+++ b/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;
+}
diff --git a/docs/scripts/game.js b/docs/assets/js/game.js
similarity index 100%
rename from docs/scripts/game.js
rename to docs/assets/js/game.js
diff --git a/docs/assets/js/index.js b/docs/assets/js/index.js
new file mode 100644
index 0000000..9caaf0e
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/docs/assets/js/preloader/preloader.js b/docs/assets/js/preloader/preloader.js
new file mode 100644
index 0000000..c1c9557
--- /dev/null
+++ b/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 += ``;
+ 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");
+ }
+}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index cd14837..1c3e9f9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,10 +16,12 @@
border-radius: 10px;
}
+
-
-
+
+
+