feat Site: turn welcome page into splash screen

src/components/elements/MissingConfigurationElement.js

@@ -0,0 +1,27 @@
+function MissingConfigurationElement() {
+  return `
+    <div class="row mb-4 pb-3">
+      <div class="col-6">
+        <div class="bg-dark-subtle rounded-4 py-2 px-3">
+          <p class="m-0 text-center">
+            <code class="text-dark">
+              Configuration.example.yml
+            </code>
+          </p>
+        </div>
+      </div>
+      <div class="col-1" style="margin-top: 5px;">
+        <i class="bi bi-arrow-right h4 text-danger-emphasis"></i>
+      </div>
+      <div class="col-5">
+        <div class="bg-dark-subtle rounded-4 py-2 px-3">
+          <p class="m-0 text-center">
+            <code class="text-danger-emphasis">
+              Configuration.yml
+            </code>
+          </p>
+        </div>
+      </div>
+    </div>
+  `
+}

src/configuration/FetchConfiguration.js

@@ -1,9 +1,7 @@
+let ConfigurationURL = "./configuration/Configuration.yml"
+
 async function FetchConfiguration() {
   var xhr = new XMLHttpRequest()
-  let ConfigurationURL = "./configuration/Configuration.yml"
-  if(window.location.hostname == "gravity.prpl.wtf") {
-    ConfigurationURL = "./configuration/Configuration.example.yml"
-  }
   xhr.open("GET", ConfigurationURL, true)
   xhr.onreadystatechange = async function () {
     if (xhr.readyState == 4 && xhr.status == 200) {
@@ -13,9 +11,18 @@ async function FetchConfiguration() {
       return;
     }
     if (xhr.readyState == 4 && xhr.status == 404) {
-      window.Configuration = false
-      await RenderConfiguration()
-      return console.error("Configuration.yml could not be found!")
+      if(ConfigurationURL != "./configuration/Configuration.example.yml") {
+        ProgressBar(99.99, 5)
+        App.innerHTML = `${MissingConfigurationElement()}`
+        setTimeout(() => {
+          ProgressBar(100)
+          ConfigurationURL = "./configuration/Configuration.example.yml"
+          FetchConfiguration()
+        }, 5000);
+      } else {
+        await RenderConfiguration()
+        return console.error("Configuration.yml could not be found!")
+      }
     }
   }
   xhr.send()

src/imports/ImportElements.js

@@ -4,6 +4,7 @@ async function ImportElements() {
 		{ Identifier: "FooterElement", Path: "FooterElement.js" },
 		{ Identifier: "LinkElement", Path: "LinkElement.js" },
 		{ Identifier: "ConnectionElement", Path: "ConnectionElement.js" },
+		{ Identifier: "MissingConfigurationElement", Path: "MissingConfigurationElement.js" },
 	]
 
   for (let i = Elements.length - 1; i >= 0; i--) {

src/router/ProgressBar.js

@@ -1,6 +1,6 @@
 var IsAnimating = false
 
-function ProgressBar(length) {
+function ProgressBar(length, duration) {
   if(IsAnimating) return;
 
   ProgressBarElement.style.opacity = 1
@@ -19,6 +19,7 @@ function ProgressBar(length) {
     return;
   }
 
-  ProgressBarElement.style.width = length+"%"
+  ProgressBarElement.style = `width: ${length}%; --TransitionWidthDuration: ${duration || 0.4}s;`
+
   IsAnimating = false
 }

src/router/Route.js

@@ -1,6 +1,4 @@
 function Route(view) {
-  if(!window.Configuration) {view = "#welcome"}
-  if(window.Configuration && view == "#welcome") {view = "#"}
   window.location.hash = view
   Unload("Section")
   ProgressBar(25)
@@ -30,14 +28,6 @@ function Route(view) {
     })
   }
 
-  // #welcome
-  if(view == "#welcome") {
-    return Import("./src/components/sections/WelcomeSection.js", "Section", function() {
-      App.innerHTML = `${WelcomeSection()}`
-      ProgressBar(100)
-    })
-  }
-
   ProgressBar(100)
   return App.innerHTML = `An unknown error occured, check your browser console for more information.`
 }