Fix Error Screen (#1005)

* fix error screen

* error messages

* center error text

* new line

* fix some error messages

* "Network Error"

* Remove "Check console"

* change css

* better shadow

* newline

* add text shadow

* use `ejs_error_text` class

* make text more readable

* fix border-radius
This commit is contained in:
Allan Niles 2025-06-24 20:34:45 -06:00 committed by GitHub
parent 75ff025ad3
commit cfe6ada74c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 5 deletions

View File

@ -195,6 +195,8 @@
box-sizing: inherit;
font-size: 12px;
color: #bcbcbc;
text-align: center;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.ejs_loading_text_glow {
@ -204,6 +206,16 @@
box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
}
.ejs_error_text {
bottom: 10%;
color: #F82300;
border-radius: 15px;
padding: 1.5px 8px 1.5px 8px;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.6);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}
.ejs_canvas {
width: 100%;
height: 100%;
@ -360,6 +372,7 @@
z-index: 9999;
left: 50%;
bottom: 0;
color: #fff;
}
.ejs_small_screen .ejs_menu_bar_hidden {
@ -389,6 +402,7 @@
.ejs_small_screen .ejs_menu_button:hover {
background: rgba(var(--ejs-primary-color), 1);
color: #fff;
box-shadow: none;
}
.ejs_small_screen .ejs_menu_button svg {
@ -468,6 +482,7 @@
.ejs_big_screen .ejs_menu_button:hover {
background: rgba(var(--ejs-primary-color), 1);
color: #fff;
box-shadow: none;
}
.ejs_big_screen .ejs_menu_button:hover .ejs_menu_text {
@ -540,6 +555,10 @@
text-align: center;
}
.ejs_menu_button.shadow {
background: rgba(0, 0, 0, 0.7);
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.7);
}
.ejs_menu_bar svg {
display: block;

View File

@ -512,8 +512,7 @@ class EmulatorJS {
startGameError(message) {
console.log(message);
this.textElem.innerText = message;
this.textElem.style.color = "red";
this.textElem.style.bottom = "10%";
this.textElem.classList.add("ejs_error_text");
this.setupSettingsMenu();
this.loadSettings();
@ -624,7 +623,7 @@ class EmulatorJS {
if (!this.supportsWebgl2) {
this.startGameError(this.localization("Outdated graphics driver"));
} else {
this.startGameError(this.localization("Network Error"));
this.startGameError(this.localization("Error downloading core") + " (" + filename + ")");
}
return;
}
@ -688,7 +687,7 @@ class EmulatorJS {
this.textElem.innerText = this.localization("Download Game State") + progress;
}, true, { responseType: "arraybuffer", method: "GET" }).then((res) => {
if (res === -1) {
this.startGameError(this.localization("Network Error"));
this.startGameError(this.localization("Error downloading game state"));
return;
}
this.on("start", () => {
@ -934,7 +933,7 @@ class EmulatorJS {
initModule(wasmData, threadData) {
if (typeof window.EJS_Runtime !== "function") {
console.warn("EJS_Runtime is not defined!");
this.startGameError(this.localization("Failed to start game"));
this.startGameError(this.localization("Error loading EmulatorJS runtime"));
throw new Error("EJS_Runtime is not defined!");
}
window.EJS_Runtime({
@ -2327,6 +2326,9 @@ class EmulatorJS {
exitEmulation.style.display = "none";
this.elements.menu.style.opacity = "";
this.elements.menu.style.background = "transparent";
this.virtualGamepad.style.display = "none";
settingButton[0].classList.add("shadow");
this.menu.open(true);
}
}