mirror of
https://github.com/EmulatorJS/EmulatorJS.git
synced 2024-09-20 02:46:23 +00:00
Add virtual gamepad buttons
This commit is contained in:
Ethan O'Brien
parent
0dcb1df6b7
commit
3ba33d4c18
2 changed files with 120 additions and 0 deletions
|
|
@ -12,6 +12,7 @@
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
color: #bcbcbc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ejs_parent ::-webkit-scrollbar{
|
.ejs_parent ::-webkit-scrollbar{
|
||||||
|
|
@ -321,3 +322,52 @@
|
||||||
background: rgba(0,0,0,0.8) !important;
|
background: rgba(0,0,0,0.8) !important;
|
||||||
padding: 15px 0;
|
padding: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ejs_virtualGamepad_parent {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50px;
|
||||||
|
}
|
||||||
|
.ejs_virtualGamepad_top {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 250px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.ejs_virtualGamepad_bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
height: 30px;
|
||||||
|
width: 124px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -62px;
|
||||||
|
}
|
||||||
|
.ejs_virtualGamepad_left {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50px;
|
||||||
|
width: 125px;
|
||||||
|
height: 125px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
.ejs_virtualGamepad_right {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50px;
|
||||||
|
width: 130px;
|
||||||
|
height: 130px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
.ejs_virtualGamepad_button {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 50px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: rgba(255,255,255,0.15);
|
||||||
|
user-select: none;
|
||||||
|
transition: all .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -317,6 +317,7 @@ class EmulatorJS {
|
||||||
this.createContextMenu();
|
this.createContextMenu();
|
||||||
this.createBottomMenuBar();
|
this.createBottomMenuBar();
|
||||||
this.createControlSettingMenu();
|
this.createControlSettingMenu();
|
||||||
|
this.setVirtualGamepad();
|
||||||
this.addEventListener(document, "keydown keyup", this.keyChange.bind(this));
|
this.addEventListener(document, "keydown keyup", this.keyChange.bind(this));
|
||||||
//keyboard, etc...
|
//keyboard, etc...
|
||||||
}
|
}
|
||||||
|
|
@ -883,6 +884,75 @@ class EmulatorJS {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
setVirtualGamepad() {
|
||||||
|
this.virtualGamepad = this.createElement("div");
|
||||||
|
this.virtualGamepad.style.display = "none";
|
||||||
|
this.virtualGamepad.classList.add("ejs_virtualGamepad_parent");
|
||||||
|
this.elements.parent.appendChild(this.virtualGamepad);
|
||||||
|
const info = [{"type":"button","text":"B","id":"b","location":"right","right":-10,"top":70,"bold":true,"input_value":0},{"type":"button","text":"A","id":"a","location":"right","right":60,"top":70,"bold":true,"input_value":8},{"type":"dpad","location":"left","left":"50%","right":"50%","joystickInput":false,"inputValues":[4,5,6,7]},{"type":"button","text":"Start","id":"start","location":"center","left":60,"fontSize":15,"block":true,"input_value":3},{"type":"button","text":"Select","id":"select","location":"center","left":-5,"fontSize":15,"block":true,"input_value":2}];
|
||||||
|
//todo next
|
||||||
|
const up = this.createElement("div");
|
||||||
|
up.classList.add("ejs_virtualGamepad_top");
|
||||||
|
const down = this.createElement("div");
|
||||||
|
down.classList.add("ejs_virtualGamepad_bottom");
|
||||||
|
const left = this.createElement("div");
|
||||||
|
left.classList.add("ejs_virtualGamepad_left");
|
||||||
|
const right = this.createElement("div");
|
||||||
|
right.classList.add("ejs_virtualGamepad_right");
|
||||||
|
const elems = {top:up, center:down, left, right};
|
||||||
|
|
||||||
|
this.virtualGamepad.appendChild(up);
|
||||||
|
this.virtualGamepad.appendChild(down);
|
||||||
|
this.virtualGamepad.appendChild(left);
|
||||||
|
this.virtualGamepad.appendChild(right);
|
||||||
|
|
||||||
|
const leftHandedMode = false;
|
||||||
|
const blockCSS = 'height:31px;text-align:center;border:1px solid #ccc;border-radius:5px;line-height:31px;';
|
||||||
|
|
||||||
|
for (let i=0; i<info.length; i++) {
|
||||||
|
if (info[i].type !== 'button') continue;
|
||||||
|
if (leftHandedMode && ['left', 'right'].includes(info[i].location)) {
|
||||||
|
info[i].location = (info[i].location==='left') ? 'right' : 'left';
|
||||||
|
const amnt = JSON.parse(JSON.stringify(info[i]));
|
||||||
|
if (amnt.left) {
|
||||||
|
info[i].right = amnt.left;
|
||||||
|
}
|
||||||
|
if (amnt.right) {
|
||||||
|
info[i].left = amnt.right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let style = '';
|
||||||
|
if (info[i].left) {
|
||||||
|
style += 'left:'+info[i].left+(typeof info[i].left === 'number'?'px':'')+';';
|
||||||
|
}
|
||||||
|
if (info[i].right) {
|
||||||
|
style += 'right:'+info[i].right+(typeof info[i].right === 'number'?'px':'')+';';
|
||||||
|
}
|
||||||
|
if (info[i].top) {
|
||||||
|
style += 'top:'+info[i].top+(typeof info[i].top === 'number'?'px':'')+';';
|
||||||
|
}
|
||||||
|
if (!info[i].bold) {
|
||||||
|
style += 'font-weight:normal;';
|
||||||
|
} else if (info[i].bold) {
|
||||||
|
style += 'font-weight:bold;';
|
||||||
|
}
|
||||||
|
info[i].fontSize = info[i].fontSize || 30;
|
||||||
|
style += 'font-size:'+info[i].fontSize+'px;';
|
||||||
|
if (info[i].block) {
|
||||||
|
style += blockCSS;
|
||||||
|
}
|
||||||
|
if (['top', 'center', 'left', 'right'].includes(info[i].location)) {
|
||||||
|
const button = this.createElement("div");
|
||||||
|
button.style = style;
|
||||||
|
button.innerText = info[i].text;
|
||||||
|
button.classList.add("ejs_virtualGamepad_button");
|
||||||
|
elems[info[i].location].appendChild(button);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//todo - zone and dpad (and input)
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue