feat(fallback): use dynamic filename

template/assets/runner.js

@@ -18,9 +18,7 @@ function supportsWebGL() {
 
 if (!supportsWebGL()) {
     alert('WebGL is unavailable. Fallback image will be used.');
-    var e = document.getElementById("container");
-    e.classList.add("fallback");
-    e.parentElement.classList.add("widget-wrapper");
+    var e = document.getElementById("fallback");
 
     function calculateScale(width, height) {
         let windowWidth = window.innerWidth;
@@ -39,6 +37,8 @@ if (!supportsWebGL()) {
             e.style.width = window.operatorSettings.fallbackImage.width * scale.x + "px";
             e.style.height = window.operatorSettings.fallbackImage.height * scale.x + "px";
         }
+        e.classList.add("show");
+        document.getElementById("container").classList.add("hide");
     }
 
     window.addEventListener('resize', fallback, true);

template/assets/style.css

@@ -13,13 +13,39 @@ body {
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    background-image: url("../operator/operator_bg.png");
     height: 100%;
     width: 100%;
     touch-action: none;
     -ms-touch-action: none;
 }
 
+#dev {
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: white;
+}
+
+#widget-wrapper, #container, #fallback {
+    width: 100%; 
+    height: 100%;
+}
+
+.hide {
+    display: none;
+}
+
+#fallback.show {
+    display: flex;
+    align-items: center;
+    margin: auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+}
+
 .logo {
     position: fixed;
     left: 0;
@@ -32,21 +58,6 @@ body {
     opacity: 0.3;
 }
 
-.widget-wrapper {
-    display: flex;
-    align-items: center;
-}
-
-.fallback {
-    margin: auto;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-image: url("../operator/fallback.png");
-    width: 100%;
-    height: 100%;
-}
-
 .website-settings {
     position: fixed;
     left: 0;