From cbc40ee96dc094b2d61367f6f60c1e2baca52fce Mon Sep 17 00:00:00 2001 From: Ethan O'Brien <77750390+ethanaobrien@users.noreply.github.com> Date: Thu, 22 Jun 2023 14:08:34 -0500 Subject: [PATCH] make the base control menu --- src/css/main.css | 38 ++++++++++++++ src/emulator.js | 126 ++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 156 insertions(+), 8 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index d1c74bd..dbbc49e 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -14,6 +14,33 @@ height: 100%; } +.ejs_parent ::-webkit-scrollbar{ + width: 8px; + height: 16px; + background-color: transparent; +} +.ejs_parent ::-webkit-scrollbar-thumb{ + border-radius: 0; + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + background-color: #f5f5f5; +} +.ejs_parent ::-webkit-scrollbar-track{ + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + border-radius: 10px; + background-color: transparent; +} +.ejs_parent { + scrollbar-face-color:#F5F5F5; + scrollbar-highlight-color:transparent; + scrollbar-3dlight-color:transparent; + scrollbar-darkshadow-color:transparent; + scrollbar-Shadow-color:transparent; + scrollbar-arrow-color:#fff; + scrollbar-track-color:transparent; + scrollbar-width:thin; + scrollbar-color:transparent #f5f5f5; +} + .ejs_game {/* todo. User selectable background loading image */ width: 100%; height: 100%; @@ -235,4 +262,15 @@ .ejs_popup_body { height: calc(100% - 130px); + overflow: auto; } + +.ejs_control_body input[type='text'] { + overflow: auto; + background-color: #fff; + border: 1px solid #000; + font-size: 12px; + font-weight: 700; + color: #000 !important; +} + diff --git a/src/emulator.js b/src/emulator.js index 7d191da..926e468 100644 --- a/src/emulator.js +++ b/src/emulator.js @@ -302,6 +302,7 @@ class EmulatorJS { bindListeners() { this.createContextMenu(); this.createBottomMenuBar(); + this.createControlSettingMenu(); //keyboard, etc... } createContextMenu() { @@ -384,18 +385,18 @@ class EmulatorJS { } } //creates a full box popup. - createPopup(popupTitle, buttons) { - this.closePopup(); - this.currentPopup = this.createElement('div'); - this.currentPopup.classList.add("ejs_popup_container"); - this.elements.parent.appendChild(this.currentPopup); + createPopup(popupTitle, buttons, hidden) { + if (!hidden) this.closePopup(); + const popup = this.createElement('div'); + popup.classList.add("ejs_popup_container"); + this.elements.parent.appendChild(popup); const title = this.createElement("h4"); title.innerText = popupTitle; const main = this.createElement("div"); main.classList.add("ejs_popup_body"); - this.currentPopup.appendChild(title); - this.currentPopup.appendChild(main); + popup.appendChild(title); + popup.appendChild(main); for (let k in buttons) { const button = this.createElement("a"); @@ -407,7 +408,11 @@ class EmulatorJS { } button.classList.add("ejs_button"); button.innerText = k; - this.currentPopup.appendChild(button); + popup.appendChild(button); + } + if (!hidden) { + popup.style.display = "none"; + this.currentPopup = popup; } return main; @@ -496,6 +501,111 @@ class EmulatorJS { const state = new Uint8Array(await file.arrayBuffer()); this.gameManager.loadState(state); }); + addButton("Control Settings", '', () => { + this.controlMenu.style.display = ""; + }); + + } + createControlSettingMenu() { + const body = this.createPopup("Control Settings", { + "Close": () => { + this.controlMenu.style.display = "none"; + } + }); + this.controlMenu = body.parentElement; + + const buttons = { + 0: 'B', + 1: 'Y', + 2: 'SELECT', + 3: 'START', + 4: 'UP', + 5: 'DOWN', + 6: 'LEFT', + 7: 'RIGHT', + 8: 'A', + 9: 'X', + 10: 'L', + 11: 'R', + 12: 'L2', + 13: 'R2', + 14: 'L3', + 15: 'R3', + 19: 'L STICK UP', + 18: 'L STICK DOWN', + 17: 'L STICK LEFT', + 16: 'L STICK RIGHT', + 23: 'R STICK UP', + 22: 'R STICK DOWN', + 21: 'R STICK LEFT', + 20: 'R STICK RIGHT', + 24: this.localization('QUICK SAVE STATE'), + 25: this.localization('QUICK LOAD STATE'), + 26: this.localization('CHANGE STATE SLOT') + } + body.classList.add("ejs_control_body"); + + const addRow = (number, title, player) => { + const div = this.createElement('div'); + div.setAttribute("data-id", number); + div.setAttribute("data-index", player); + div.setAttribute("data-label", title); + div.style = "margin-bottom: 10px;"; + + const titleElem = this.createElement("div") + const titleLabel = this.createElement("label"); + titleLabel.innerText = title+":"; + titleLabel.style = "width:25%;float:left;font-size:12px;"; + div.appendChild(titleLabel); + + const input = this.createElement("div"); + input.style = "width:50%;float:left"; + const container = this.createElement("div"); + + for (let i=2; i>0; i--) { + const inputClick = this.createElement("div"); + inputClick.style = "width:45%;float:left;padding: 0 5px;" + const inputBox = this.createElement("input"); + inputBox.style = "text-align:center;height:25px;width: 100%;"; + inputBox.type = "text"; + inputBox.setAttribute("data-id", number); + inputBox.setAttribute("data-index", player); + inputBox.setAttribute("data-type", i); //1=keyboard, 2=controller + inputBox.setAttribute("data-value", ""); //currently selected option + inputBox.setAttribute("placeholder", ""); + inputBox.setAttribute("readonly", ""); + + inputClick.appendChild(inputBox); + container.appendChild(inputClick); + } + const padding = this.createElement("div"); + padding.style = "clear:both"; + container.appendChild(padding); + + const setButton = this.createElement("div"); + setButton.style = "width:25%;float:left"; + const button = this.createElement("button"); + this.addEventListener(button, "click", (e) => { + e.preventDefault(); + }) + button.innerText = "Set"; + + setButton.appendChild(button); + + input.appendChild(container); + + const padding2 = this.createElement("div"); + padding2.style = "clear:both"; + + div.appendChild(input); + div.appendChild(setButton); + div.appendChild(padding2); + body.appendChild(div); + } + + for (const k in buttons) { + addRow(k, buttons[k], 0); + } }