ethanaobrien/EmulatorJS
1
0
Fork 0
mirror of https://github.com/EmulatorJS/EmulatorJS.git synced 2024-09-20 02:46:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add control settings player buttons

Browse source
This commit is contained in:
Ethan O'Brien 2023-06-23 08:38:35 -05:00
parent cbc40ee96d
commit a6d52db1f0
2 changed files with 59 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/css/main.css
View file

@ -238,6 +238,10 @@
color: #ccc;
}
.ejs_popup_container *, .ejs_popup_container *::after, .ejs_popup_container *::before {
box-sizing: border-box;
}
.ejs_popup_container h4 {
color: #ccc;
font-size: 24px;
@ -265,6 +269,11 @@
overflow: auto;
}
.ejs_control_body {
color: #bcbcbc !important;
border: unset;
}
.ejs_control_body input[type='text'] {
overflow: auto;
background-color: #fff;
@ -273,4 +282,28 @@
font-weight: 700;
color: #000 !important;
}
.ejs_control_player_bar {
margin: 0;
padding: 0;
}
.ejs_control_player_bar ul {
list-style: none;
}
.ejs_control_player_bar li {
color: #bcbcbc !important;
display: inline-block;
}
.ejs_control_player_bar a {
padding: 2px 5px;
color: #bcbcbc !important;
font-size: 14px;
cursor: pointer;
}
.ejs_control_selected {
border-bottom: 1px solid #fff;
background-color: #fff;
}
.ejs_control_selected a {
color: #000 !important;
}

87
src/emulator.js
View file

@ -513,6 +513,7 @@ class EmulatorJS {
}
});
this.controlMenu = body.parentElement;
body.classList.add("ejs_control_body");
const buttons = {
0: 'B',
@ -543,69 +544,35 @@ class EmulatorJS {
25: this.localization('QUICK LOAD STATE'),
26: this.localization('CHANGE STATE SLOT')
}
body.classList.add("ejs_control_body");
let selectedPlayer;
let players = [];
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();
const playerSelect = this.createElement("ul");
playerSelect.classList.add("ejs_control_player_bar");
for (let i=1; i<5; i++) {
const playerContainer = this.createElement("li");
playerContainer.classList.add("tabs-title");
playerContainer.setAttribute("role", "presentation");
const player = this.createElement("a");
player.innerText = "Player "+i;
player.setAttribute("role", "tab");
player.setAttribute("aria-controls", "controls-"+(i-1));
player.setAttribute("aria-selected", "false");
player.id = "controls-"+(i-1)+"-label";
this.addEventListener(player, "click", () => {
players[selectedPlayer].classList.remove("ejs_control_selected");
selectedPlayer = i-1;
players[i-1].classList.add("ejs_control_selected");
})
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);
playerContainer.appendChild(player);
playerSelect.appendChild(playerContainer);
players.push(playerContainer);
}
body.appendChild(playerSelect);
selectedPlayer = 0;
players[0].classList.add("ejs_control_selected");
}