XVoxel-ASync/menu.js

493 lines
13 KiB
JavaScript
Raw Permalink Normal View History

let menusContainer = document.getElementById("menus");
var menus = {};
var shownMenus = [];
var makeMenu = function () {
module.exports.menuData = {
"main": {
"elements": [
{
"type": "button",
"label": global.locales.getRawString(global.currentLanguage, "menu.main.play.label"),
"action": "open-menu",
"action-args": ["play", 1]
},
{
"type": "button",
"label": global.locales.getRawString(global.currentLanguage, "menu.main.settings.label"),
"action": "open-menu",
"action-args": ["settings", 1]
},
{
"type": "button",
"label": global.locales.getRawString(global.currentLanguage, "menu.main.quit.label"),
"action": "exit"
}
]
},
"play": {
"elements": [
{
"type": "button",
"label": global.locales.getRawString(global.currentLanguage, "menu.play.singleplayer.label"),
"action": "open-menu",
"action-args": ["gamesel", 2]
}
]
},
"ingame": {
"elements": [
{
"type": "button",
"label": "Resume",
"action": "run",
"runnable": function () {
global.inputs[0].grab();
hideMenus(0);
}
},
{
"type": "button",
"label": "Quit",
"action": "run",
"runnable": global.quitGame
}
]
},
"gamesel": {
"elements": [
{
"type": "text",
"id": "worldnameinput",
"placeholder": "New World",
"value": "New World",
"action": "run",
"runnable": function (event) {
var newGameButton = global.document.getElementById("newgamebutton");
if (event.target.value.length < 1) {
newGameButton.disabled = true;
} else {
newGameButton.disabled = false;
}
}
},
{
"type": "button",
"id": "newgamebutton",
"label": global.locales.getRawString(global.currentLanguage, "play.singleplayer.newgamebutton.label"),
"action": "run",
"runnable": function () {
var worldNameInputBox = global.document.getElementById("worldnameinput");
var worldName = worldNameInputBox.value;
if (worldName.length < 1) worldName = worldNameInputBox.placeholder;
global.createWorld(worldName).then(function (world) {
global.startGame(0, worldName);
hideMenus(0);
});
}
},
{
"type": "button",
"id": "loadgamebutton",
"label": global.locales.getRawString(global.currentLanguage, "play.singleplayer.loadgamebutton.label"),
"action": "run",
"runnable": function () {
var fileSelector = document.createElement("input");
fileSelector.type = "file";
fileSelector.accept = "application/zip";
fileSelector.click();
fileSelector.onchange = function (event) {
if (!this.files || !this.files[0]) return;
this.files[0].arrayBuffer().then(function (buffer) {
var fileU8 = new Uint8Array(buffer);
global.openSave(fileU8).then(function (worldList) {
for (var worldName in worldList) {
if (worldList.hasOwnProperty(worldName)) {
var world = worldList[worldName];
global.worlds[worldName] = world;
var menuEntry = {
"type": "button",
"label": global.locales.getFormattedString(
global.currentLanguage,
"play.singleplayer.openworld.label",
{
"WORLD_NAME": worldName
}),
"action": "run",
"runnable": (function (event) {
hideMenus(0);
global.startGame(0, this);
}).bind(worldName)
};
module.exports.menuData["gamesel"].elements.push(menuEntry);
}
}
hideMenus(2);
menus["gamesel"] = constructMenu("gamesel", module.exports.menuData["gamesel"]);
showMenu("gamesel", 2);
}).catch(function (error) {
console.error(error);
});
}).catch(function (error) {
console.error(error);
});
delete fileSelector;
};
}
}
]
},
"settings": {
"elements": [
{
"type": "button",
"label": global.locales.getRawString(global.currentLanguage, "menu.settings.user.label"),
"action": "open-menu",
"action-args": ["user-settings", 2]
},
{
"type": "button",
"label": global.locales.getRawString(global.currentLanguage, "menu.settings.video.label"),
"action": "open-menu",
"action-args": ["video-settings", 2]
},
{
"type": "button",
"label": global.locales.getRawString(global.currentLanguage, "menu.settings.audio.label"),
"action": "open-menu",
"action-args": ["audio-settings", 2]
},
{
"type": "button",
"label": global.locales.getRawString(global.currentLanguage, "menu.settings.input.label"),
"action": "open-menu",
"action-args": ["input-settings", 2]
}
]
},
"user-settings": {
"elements": [
// {
// "type": "text",
// "name": "username",
// "label": "Username",
// "placeholder": "Username"
// },
{
"type": "button",
"label": global.locales.getRawString(global.currentLanguage, "settings.user.login.label"),
"action": "open-menu",
"action-args": ["matrix-login", 3]
}
]
},
"matrix-login": {
"expand": true,
"elements": [
{
"type": "text",
"name": "homeserver-url",
"id": "homeserverinput",
"label": global.locales.getRawString(global.currentLanguage, "settings.login.homeserver-url.label"),
"placeholder": "https://matrix.org/",
"action": "run",
"runnable": function (event) {
var isValidURL = (/http.?:\/\/.+/g).test(event.target.value);
var isValidMXID = (/@.+:.+/g).test(global.document.getElementById("mxidinput").value);
var isValidPass = global.document.getElementById("mxpassinput").value.length > 0;
var loginButton = global.document.getElementById("mxloginbutton");
if (isValidURL && isValidMXID && isValidPass) {
loginButton.disabled = false;
} else {
loginButton.disabled = true;
}
}
},
{
"type": "text",
"name": "mxid",
"id": "mxidinput",
"label": global.locales.getRawString(global.currentLanguage, "settings.login.mxid.label"),
"placeholder": global.locales.getRawString(global.currentLanguage, "settings.login.mxid.placeholder"),
"action": "run",
"runnable": function (event) {
var isValidURL = (/http.?:\/\/.+/g).test(global.document.getElementById("homeserverinput").value);
var isValidMXID = (/@.+:.+/g).test(event.target.value);
var isValidPass = global.document.getElementById("mxpassinput").value.length > 0;
var loginButton = global.document.getElementById("mxloginbutton");
if (isValidURL && isValidMXID && isValidPass) {
loginButton.disabled = false;
} else {
loginButton.disabled = true;
}
}
},
{
"type": "password",
"name": "password",
"id": "mxpassinput",
"label": global.locales.getRawString(global.currentLanguage, "settings.login.password.label"),
"placeholder": global.locales.getRawString(global.currentLanguage, "settings.login.password.placeholder"),
"action": "run",
"runnable": function (event) {
var isValidURL = (/http.?:\/\/.+/g).test(global.document.getElementById("homeserverinput").value);
var isValidMXID = (/@.+:.+/g).test(global.document.getElementById("mxidinput").value);
var isValidPass = event.target.value.length > 0;
var loginButton = global.document.getElementById("mxloginbutton");
if (isValidURL && isValidMXID && isValidPass) {
loginButton.disabled = false;
} else {
loginButton.disabled = true;
}
}
},
{
"type": "button",
"id": "mxloginbutton",
"label": global.locales.getRawString(global.currentLanguage, "settings.user.login.label"),
"disabled": true,
"action": "run",
"runnable": async function (event) {
event.target.disabled = true;
var username = global.document.getElementById("mxidinput").value
.substring(1)
.split(":")[0];
if (!("matrixClient" in global.core.modules["network"])) {
var matrixClient = await global.core.modules["network"].initMatrixClient(
global.document.getElementById("homeserverinput").value,
global.document.getElementById("mxidinput").value
);
}
global.core.modules["network"].loginToMatrix(
username,
global.document.getElementById("mxpassinput").value
).then(function () {
localStorage.setItem("matrix_baseurl", global.document.getElementById("homeserverinput").value);
localStorage.setItem("matrix_mxid", global.document.getElementById("mxidinput").value);
localStorage.setItem("matrix_is_connected", true);
hideMenus(3);
event.target.disabled = false;
}).catch(function (error) {
event.target.disabled = false;
});
}
}
]
},
"video-settings": {
"expand": true,
"elements": [
{
"type": "slider",
"name": "fieldofview",
"label": "Field of view",
"value": 70,
"minimum": 30,
"maximum": 150,
"step": 1,
"change": function (event) {
}
}
]
},
"audio-settings": {
"expand": true,
"elements": [
{
"type": "slider",
"name": "mastervolume",
"label": "Master volume",
"value": 100,
"minimum": 0,
"maximum": 100,
"step": 1,
"change": function (event) {
}
}
]
}
};
for (var name in module.exports.menuData) {
if (module.exports.menuData.hasOwnProperty(name)) {
var menu = module.exports.menuData[name];
menus[name] = constructMenu(name, menu);
}
}
};
var constructMenu = function (name, data) {
var menuElement = document.createElement("div");
menuElement.classList.add("menu");
for (var e = 0; e < data.elements.length; e++) {
var element = data.elements[e];
let dom;
switch (element.type) {
case "button":
dom = document.createElement("button");
dom.innerText = element.label;
if ("disabled" in element) dom.disabled = element.disabled;
switch (element.action) {
case "open-menu":
dom.onclick = (function (event) {
showMenu(...this["action-args"]);
}).bind(element);
break;
case "run":
dom.onclick = element.runnable;
break;
case "exit":
dom.classList.add("closebutton");
dom.onclick = closeGame;
break;
default:
}
break;
case "text":
dom = document.createElement("input");
dom.type = "text";
if (element.placeholder) dom.placeholder = element.placeholder;
if ("action" in element) {
switch (element.action) {
case "run":
dom.oninput = element.runnable;
break;
default:
}
}
break;
case "password":
dom = document.createElement("input");
dom.type = "password";
if ("disabled" in element) dom.disabled = element.disabled;
if (element.placeholder) dom.placeholder = element.placeholder;
if ("action" in element) {
switch (element.action) {
case "run":
dom.oninput = element.runnable;
break;
default:
}
}
break;
case "slider":
dom = document.createElement("input");
dom.type = "range";
dom.name = element.name;
if ("disabled" in element) dom.disabled = element.disabled;
if (element.value) dom.value = element.value;
if (element.minimum) dom.min = element.minimum;
if (element.maximum) dom.max = element.maximum;
if (element.step) dom.step = element.step;
break;
case "void":
dom = document.createElement("div");
dom.classList.add("void");
break;
default:
}
if (element.id) dom.id = element.id;
if ((element.type != "button") && element.label) {
domLabel = document.createElement("label");
domLabel.htmlFor = element.name;
domLabel.innerText = element.label;
menuElement.appendChild(domLabel);
dom.name = element.name;
dom.label = domLabel;
}
menuElement.appendChild(dom);
}
return menuElement;
};
var showMenu = function (name, offset) {
if (shownMenus.length > 0 && (!shownMenus[offset - 1])) return;
if (shownMenus[offset] == menus[name]) {
return hideMenus(offset);
} else {
hideMenus(offset);
var displayOffset = 0;
for (var m = 0; m < shownMenus.length; m++) {
displayOffset += shownMenus[m].clientWidth;
}
menus[name].style.left = displayOffset + "px";
if (module.exports.menuData[name].expand) {
menus[name].style.width = "calc(" + menusContainer.clientWidth + "px - " + (menusContainer.clientWidth - displayOffset) + "px)";
} else {
menus[name].style.width = "" + 16 + "rem";
}
menusContainer.appendChild(menus[name]);
shownMenus.push(menus[name]);
}
};
var hideMenus = function (offset) {
for (var m = shownMenus.length; m >= offset; --m) {
if (shownMenus[m]) menusContainer.removeChild(shownMenus[m]);
}
shownMenus.splice(offset, shownMenus.length - offset);
};
module.exports = {
"menus": menus,
"makeMenu": makeMenu,
"constructMenu": constructMenu,
"showMenu": showMenu,
"hideMenus": hideMenus
};