mirror of
https://github.com/EmulatorJS/EmulatorJS.git
synced 2024-09-20 02:46:23 +00:00
Add control settings player buttons
This commit is contained in:
parent
cbc40ee96d
commit
a6d52db1f0
2 changed files with 59 additions and 59 deletions
|
@ -238,6 +238,10 @@
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ejs_popup_container *, .ejs_popup_container *::after, .ejs_popup_container *::before {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.ejs_popup_container h4 {
|
.ejs_popup_container h4 {
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
@ -265,6 +269,11 @@
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ejs_control_body {
|
||||||
|
color: #bcbcbc !important;
|
||||||
|
border: unset;
|
||||||
|
}
|
||||||
|
|
||||||
.ejs_control_body input[type='text'] {
|
.ejs_control_body input[type='text'] {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
@ -273,4 +282,28 @@
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000 !important;
|
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;
|
||||||
|
}
|
||||||
|
|
|
@ -513,6 +513,7 @@ class EmulatorJS {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.controlMenu = body.parentElement;
|
this.controlMenu = body.parentElement;
|
||||||
|
body.classList.add("ejs_control_body");
|
||||||
|
|
||||||
const buttons = {
|
const buttons = {
|
||||||
0: 'B',
|
0: 'B',
|
||||||
|
@ -543,69 +544,35 @@ class EmulatorJS {
|
||||||
25: this.localization('QUICK LOAD STATE'),
|
25: this.localization('QUICK LOAD STATE'),
|
||||||
26: this.localization('CHANGE STATE SLOT')
|
26: this.localization('CHANGE STATE SLOT')
|
||||||
}
|
}
|
||||||
body.classList.add("ejs_control_body");
|
let selectedPlayer;
|
||||||
|
let players = [];
|
||||||
|
|
||||||
const addRow = (number, title, player) => {
|
const playerSelect = this.createElement("ul");
|
||||||
const div = this.createElement('div');
|
playerSelect.classList.add("ejs_control_player_bar");
|
||||||
div.setAttribute("data-id", number);
|
for (let i=1; i<5; i++) {
|
||||||
div.setAttribute("data-index", player);
|
const playerContainer = this.createElement("li");
|
||||||
div.setAttribute("data-label", title);
|
playerContainer.classList.add("tabs-title");
|
||||||
div.style = "margin-bottom: 10px;";
|
playerContainer.setAttribute("role", "presentation");
|
||||||
|
const player = this.createElement("a");
|
||||||
const titleElem = this.createElement("div")
|
player.innerText = "Player "+i;
|
||||||
const titleLabel = this.createElement("label");
|
player.setAttribute("role", "tab");
|
||||||
titleLabel.innerText = title+":";
|
player.setAttribute("aria-controls", "controls-"+(i-1));
|
||||||
titleLabel.style = "width:25%;float:left;font-size:12px;";
|
player.setAttribute("aria-selected", "false");
|
||||||
div.appendChild(titleLabel);
|
player.id = "controls-"+(i-1)+"-label";
|
||||||
|
this.addEventListener(player, "click", () => {
|
||||||
const input = this.createElement("div");
|
players[selectedPlayer].classList.remove("ejs_control_selected");
|
||||||
input.style = "width:50%;float:left";
|
selectedPlayer = i-1;
|
||||||
const container = this.createElement("div");
|
players[i-1].classList.add("ejs_control_selected");
|
||||||
|
|
||||||
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";
|
playerContainer.appendChild(player);
|
||||||
|
playerSelect.appendChild(playerContainer);
|
||||||
setButton.appendChild(button);
|
players.push(playerContainer);
|
||||||
|
|
||||||
input.appendChild(container);
|
|
||||||
|
|
||||||
const padding2 = this.createElement("div");
|
|
||||||
padding2.style = "clear:both";
|
|
||||||
|
|
||||||
div.appendChild(input);
|
|
||||||
div.appendChild(setButton);
|
|
||||||
div.appendChild(padding2);
|
|
||||||
body.appendChild(div);
|
|
||||||
}
|
}
|
||||||
|
body.appendChild(playerSelect);
|
||||||
|
|
||||||
|
selectedPlayer = 0;
|
||||||
|
players[0].classList.add("ejs_control_selected");
|
||||||
|
|
||||||
for (const k in buttons) {
|
|
||||||
addRow(k, buttons[k], 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue