diff --git a/data/emulator.css b/data/emulator.css index 40af7f2..4f37df1 100644 --- a/data/emulator.css +++ b/data/emulator.css @@ -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; diff --git a/data/src/emulator.js b/data/src/emulator.js index f487998..74d179b 100644 --- a/data/src/emulator.js +++ b/data/src/emulator.js @@ -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); } }