mirror of
https://github.com/EmulatorJS/EmulatorJS.git
synced 2024-09-20 02:46:23 +00:00
Base netplay menu
This commit is contained in:
Ethan O'Brien
parent
2861d1472e
commit
e3f71cd017
2 changed files with 185 additions and 1 deletions
|
|
@ -1229,3 +1229,49 @@
|
||||||
.ejs_virtualGamepad_open svg {
|
.ejs_virtualGamepad_open svg {
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ejs_netplay_name_input {
|
||||||
|
margin-top: .5rem;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: rgba(0,0,0,.8);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.ejs_netplay_name_input input {
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: .4rem;
|
||||||
|
max-width: 100%;
|
||||||
|
color: #000!important;
|
||||||
|
background-color: #fff!important;
|
||||||
|
margin: 0;
|
||||||
|
height: 2rem;
|
||||||
|
display: block;
|
||||||
|
font-family: Arial;
|
||||||
|
}
|
||||||
|
.ejs_netplay_name_heading {
|
||||||
|
margin-top: 0!important;
|
||||||
|
margin-bottom: 0!important;
|
||||||
|
font-weight: 600!important;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.25!important;
|
||||||
|
color: rgba(var(--ejs-primary-color),1)!important;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ejs_netplay_table {
|
||||||
|
font-family: Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.ejs_netplay_join_button {
|
||||||
|
float: none;
|
||||||
|
padding: .1rem .5rem;
|
||||||
|
background-color: rgba(var(--ejs-primary-color),1);
|
||||||
|
color: #fff!important;
|
||||||
|
border-radius: .25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.ejs_netplay_table_row:hover {
|
||||||
|
background-color: #2d2d2d;
|
||||||
|
}
|
||||||
|
|
|
||||||
140
data/emulator.js
140
data/emulator.js
|
|
@ -882,6 +882,7 @@ class EmulatorJS {
|
||||||
this.createBottomMenuBar();
|
this.createBottomMenuBar();
|
||||||
this.createControlSettingMenu();
|
this.createControlSettingMenu();
|
||||||
this.createCheatsMenu()
|
this.createCheatsMenu()
|
||||||
|
this.createNetplayMenu();
|
||||||
this.setVirtualGamepad();
|
this.setVirtualGamepad();
|
||||||
this.addEventListener(this.elements.parent, "keydown keyup", this.keyChange.bind(this));
|
this.addEventListener(this.elements.parent, "keydown keyup", this.keyChange.bind(this));
|
||||||
this.addEventListener(this.elements.parent, "mousedown touchstart", (e) => {
|
this.addEventListener(this.elements.parent, "mousedown touchstart", (e) => {
|
||||||
|
|
@ -1082,7 +1083,7 @@ class EmulatorJS {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
isPopupOpen() {
|
isPopupOpen() {
|
||||||
return this.cheatMenu.style.display !== "none" || this.controlMenu.style.display !== "none" || this.currentPopup !== null;
|
return this.cheatMenu.style.display !== "none" || this.netplayMenu.style.display !== "none" || this.controlMenu.style.display !== "none" || this.currentPopup !== null;
|
||||||
}
|
}
|
||||||
isChild(first, second) {
|
isChild(first, second) {
|
||||||
if (!first || !second) return false;
|
if (!first || !second) return false;
|
||||||
|
|
@ -1295,6 +1296,9 @@ class EmulatorJS {
|
||||||
FS.writeFile(path, sav);
|
FS.writeFile(path, sav);
|
||||||
this.gameManager.loadSaveFiles();
|
this.gameManager.loadSaveFiles();
|
||||||
});
|
});
|
||||||
|
const netplay = addButton("Netplay", '<svg viewBox="0 0 512 512"><path fill="currentColor" d="M364.215 192h131.43c5.439 20.419 8.354 41.868 8.354 64s-2.915 43.581-8.354 64h-131.43c5.154-43.049 4.939-86.746 0-128zM185.214 352c10.678 53.68 33.173 112.514 70.125 151.992.221.001.44.008.661.008s.44-.008.661-.008c37.012-39.543 59.467-98.414 70.125-151.992H185.214zm174.13-192h125.385C452.802 84.024 384.128 27.305 300.95 12.075c30.238 43.12 48.821 96.332 58.394 147.925zm-27.35 32H180.006c-5.339 41.914-5.345 86.037 0 128h151.989c5.339-41.915 5.345-86.037-.001-128zM152.656 352H27.271c31.926 75.976 100.6 132.695 183.778 147.925-30.246-43.136-48.823-96.35-58.393-147.925zm206.688 0c-9.575 51.605-28.163 104.814-58.394 147.925 83.178-15.23 151.852-71.949 183.778-147.925H359.344zm-32.558-192c-10.678-53.68-33.174-112.514-70.125-151.992-.221 0-.44-.008-.661-.008s-.44.008-.661.008C218.327 47.551 195.872 106.422 185.214 160h141.572zM16.355 192C10.915 212.419 8 233.868 8 256s2.915 43.581 8.355 64h131.43c-4.939-41.254-5.154-84.951 0-128H16.355zm136.301-32c9.575-51.602 28.161-104.81 58.394-147.925C127.872 27.305 59.198 84.024 27.271 160h125.385z"/></svg>', async () => {
|
||||||
|
this.openNetplayMenu();
|
||||||
|
});
|
||||||
|
|
||||||
const spacer = this.createElement("span");
|
const spacer = this.createElement("span");
|
||||||
spacer.classList.add("ejs_menu_bar_spacer");
|
spacer.classList.add("ejs_menu_bar_spacer");
|
||||||
|
|
@ -2796,6 +2800,140 @@ class EmulatorJS {
|
||||||
popup.appendChild(popupMsg);
|
popup.appendChild(popupMsg);
|
||||||
return [popup, popupMsg];
|
return [popup, popupMsg];
|
||||||
}
|
}
|
||||||
|
createNetplayMenu() {
|
||||||
|
const body = this.createPopup("Netplay", {
|
||||||
|
"Create a Room": () => {
|
||||||
|
console.log("aaaaaaaaaaaa");
|
||||||
|
},
|
||||||
|
"Close": () => {
|
||||||
|
this.netplayMenu.style.display = "none";
|
||||||
|
this.netplay.updateList.stop();
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
this.netplayMenu = body.parentElement;
|
||||||
|
const rooms = this.createElement("div");
|
||||||
|
const title = this.createElement("strong");
|
||||||
|
title.innerText = "Rooms";
|
||||||
|
const table = this.createElement("table");
|
||||||
|
table.classList.add("ejs_netplay_table");
|
||||||
|
table.style.width = "100%";
|
||||||
|
table.setAttribute("cellspacing", "0");
|
||||||
|
const thead = this.createElement("thead");
|
||||||
|
const row = this.createElement("tr");
|
||||||
|
const addToHeader = (text) => {
|
||||||
|
const item = this.createElement("td");
|
||||||
|
item.innerText = text;
|
||||||
|
item.style["text-align"] = "center";
|
||||||
|
row.appendChild(item);
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
thead.appendChild(row);
|
||||||
|
addToHeader("Room Name").style["text-align"] = "left";
|
||||||
|
addToHeader("Players").style.width = "80px";
|
||||||
|
addToHeader("").style.width = "80px"; //"join" button
|
||||||
|
table.appendChild(thead);
|
||||||
|
const tbody = this.createElement("tbody");
|
||||||
|
|
||||||
|
table.appendChild(tbody);
|
||||||
|
rooms.appendChild(title);
|
||||||
|
rooms.appendChild(table);
|
||||||
|
body.appendChild(rooms);
|
||||||
|
|
||||||
|
this.openNetplayMenu = () => {
|
||||||
|
this.netplayMenu.style.display = "";
|
||||||
|
if (!this.netplay) {
|
||||||
|
this.netplay = {};
|
||||||
|
this.netplay.table = tbody;
|
||||||
|
this.defineNetplayFunctions();
|
||||||
|
const popups = this.createSubPopup();
|
||||||
|
this.netplayMenu.appendChild(popups[0]);
|
||||||
|
popups[1].classList.add("ejs_cheat_parent"); //Hehe
|
||||||
|
const popup = popups[1];
|
||||||
|
|
||||||
|
const header = this.createElement("div");
|
||||||
|
const title = this.createElement("h2");
|
||||||
|
title.innerText = this.localization("Set Player Name");
|
||||||
|
title.classList.add("ejs_netplay_name_heading");
|
||||||
|
header.appendChild(title);
|
||||||
|
popup.appendChild(header);
|
||||||
|
|
||||||
|
const main = this.createElement("div");
|
||||||
|
main.classList.add("ejs_netplay_name_input");
|
||||||
|
const head = this.createElement("strong");
|
||||||
|
head.innerText = "Player Name";
|
||||||
|
const input = this.createElement("input");
|
||||||
|
input.type = "text";
|
||||||
|
input.setAttribute("maxlength", 20);
|
||||||
|
|
||||||
|
main.appendChild(head);
|
||||||
|
main.appendChild(this.createElement("br"));
|
||||||
|
main.appendChild(input);
|
||||||
|
popup.appendChild(main);
|
||||||
|
|
||||||
|
popup.appendChild(this.createElement("br"));
|
||||||
|
const submit = this.createElement("button");
|
||||||
|
submit.classList.add("ejs_button_button");
|
||||||
|
submit.classList.add("ejs_popup_submit");
|
||||||
|
submit.style["background-color"] = "rgba(var(--ejs-primary-color),1)";
|
||||||
|
submit.innerText = "Submit";
|
||||||
|
popup.appendChild(submit);
|
||||||
|
this.addEventListener(submit, "click", (e) => {
|
||||||
|
if (!input.value.trim()) return;
|
||||||
|
this.netplay.name = input.value.trim();
|
||||||
|
popups[0].remove();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.netplay.updateList.start();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineNetplayFunctions() {
|
||||||
|
this.netplay.getOpenRooms = async () => {
|
||||||
|
//async because it will need to pull from server. This is for testing
|
||||||
|
return [{name:"Room 1", players:1, max:2},{name:"Room 2", players:2, max:2}];
|
||||||
|
}
|
||||||
|
this.netplay.updateTableList = async () => {
|
||||||
|
const addToTable = (name, current, max) => {
|
||||||
|
const row = this.createElement("tr");
|
||||||
|
row.classList.add("ejs_netplay_table_row");
|
||||||
|
const addToHeader = (text) => {
|
||||||
|
const item = this.createElement("td");
|
||||||
|
item.innerText = text;
|
||||||
|
item.style.padding = "10px 0";
|
||||||
|
item.style["text-align"] = "center";
|
||||||
|
row.appendChild(item);
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
addToHeader(name).style["text-align"] = "left";
|
||||||
|
addToHeader(current + "/" + max).style.width = "80px";
|
||||||
|
|
||||||
|
const parent = addToHeader("");
|
||||||
|
parent.style.width = "80px";
|
||||||
|
if (current < max) {
|
||||||
|
const join = this.createElement("button");
|
||||||
|
join.classList.add("ejs_netplay_join_button");
|
||||||
|
join.classList.add("ejs_button_button");
|
||||||
|
join.style["background-color"] = "rgba(var(--ejs-primary-color),1)";
|
||||||
|
join.innerText = "Join";
|
||||||
|
parent.appendChild(join);
|
||||||
|
}
|
||||||
|
this.netplay.table.appendChild(row);
|
||||||
|
}
|
||||||
|
this.netplay.table.innerHTML = "";
|
||||||
|
const open = await this.netplay.getOpenRooms();
|
||||||
|
for (let i=0; i<open.length; i++) {
|
||||||
|
addToTable(open[i].name, open[i].players, open[i].max);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.netplay.updateList = {
|
||||||
|
start: () => {
|
||||||
|
this.netplay.updateList.interval = setInterval(this.netplay.updateTableList.bind(this), 1000);
|
||||||
|
},
|
||||||
|
stop: () => {
|
||||||
|
clearInterval(this.netplay.updateList.interval);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
createCheatsMenu() {
|
createCheatsMenu() {
|
||||||
const body = this.createPopup("Cheats", {
|
const body = this.createPopup("Cheats", {
|
||||||
"Add Cheat": () => {
|
"Add Cheat": () => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue