diff --git a/config.yaml b/config.yaml
index d6601c8..5b8ee4c 100644
--- a/config.yaml
+++ b/config.yaml
@@ -15,6 +15,7 @@ operators:
operator_logo: logo_rhodes_override
title: Ch'en the Holungday
version: __get_version
+ fallback_name: char_1013_chen2_2
operator_settings.js:
fallbackImage_height: 2048
fallbackImage_width: 2048
@@ -52,6 +53,7 @@ operators:
operator_logo: logo_sui
title: Nian
version: __get_version
+ fallback_name: char_2014_nian_2
operator_settings.js:
fallbackImage_height: 2048
fallbackImage_width: 2048
@@ -88,6 +90,7 @@ operators:
operator_logo: logo_egir
title: Skadi the Corrupting Heart
version: __get_version
+ fallback_name: char_1012_skadi2_2
operator_settings.js:
fallbackImage_height: 2048
fallbackImage_width: 2048
diff --git a/lib/builder.py b/lib/builder.py
index 8b60024..5c65fb6 100644
--- a/lib/builder.py
+++ b/lib/builder.py
@@ -99,7 +99,7 @@ class Builder:
)
fallback_thread = threading.Thread(
target=AlphaComposite,
- args=(source_path + fallback_name, target_path + "../fallback"),
+ args=(source_path + fallback_name, target_path + "../{}".format(fallback_name)),
daemon=True,
)
diff --git a/template/assets/runner.js b/template/assets/runner.js
index c4af041..09f3ec9 100644
--- a/template/assets/runner.js
+++ b/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);
diff --git a/template/assets/style.css b/template/assets/style.css
index b7a09af..d0c7af2 100644
--- a/template/assets/style.css
+++ b/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;
diff --git a/template/index.html b/template/index.html
index c4ec0de..487dc19 100644
--- a/template/index.html
+++ b/template/index.html
@@ -11,11 +11,12 @@
-
-
+
+
-