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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
playerContainer.appendChild(player);
|
||||
playerSelect.appendChild(playerContainer);
|
||||
players.push(playerContainer);
|
||||
}
|
||||
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