dzura/www/js/scene.js
2024-08-28 00:49:34 -07:00

856 lines
28 KiB
JavaScript

const SCENES = {
Init:{
load() {
LOAD(SCENES.Offline);
RECONNECT();
return true;
},
},
Offline:{
load() {
UI.nav([
UI.button(LANG("reconnect"), () => { RECONNECT(); }),
], []);
return true;
},
reconnect() {
LOAD_URL();
}
},
Register:{
load() {
if(sessionStorage.getItem("auth") !== null) return false;
UI.mainmenu("register");
UI.mainnav([], [], { auth:true });
let container = document.createElement("section");
let form = document.createElement("div");
form.appendChild(UI.table(null, [
[ UI.label(LANG("handle"), "handle"), UI.textbox("handle", "") ],
[ UI.label(LANG("secret"), "secret"), UI.password("secret") ],
[ UI.label(LANG("invitation"), "code"), UI.password("code") ],
]));
let button = UI.button(LANG("register"), (event) => {
let handle = document.getElementById("handle");
let secret = document.getElementById("secret");
let code = document.getElementById("code");
handle.removeAttribute("class");
secret.removeAttribute("class");
code.removeAttribute("class");
event.target.removeAttribute("class");
if(handle.value.length > 0 && secret.value.length > 0 && code.value.length > 0) {
event.target.setAttribute("disabled", "");
let enc = new TextEncoder();
let enc_handle = enc.encode(handle.value);
let enc_secret = enc.encode(secret.value);
let enc_code = enc.encode(code.value);
MESSAGE_COMPOSE([
PACK.u16(OpCode.Register),
PACK.u16(enc_handle.length),
enc_handle,
PACK.u16(enc_secret.length),
enc_secret,
PACK.u16(enc_code.length),
enc_code,
]);
} else {
if(handle.value.length == 0) { handle.setAttribute("class", "error"); }
if(secret.value.length == 0) { secret.setAttribute("class", "error"); }
if(code.value.length == 0) { code.setAttribute("class", "error"); }
}
});
button.setAttribute("id", "submit");
form.appendChild(button);
container.appendChild(form);
MAIN.appendChild(container);
MAIN.setAttribute("class", "form");
return true;
},
message(code, data) {
if(code == OpCode.Register && data !== null) {
let submit = document.getElementById("submit");
switch(data.status) {
case Status.Ok: {
let b64_token = PACK.base64(data.token);
let b64_secret = PACK.base64(data.secret);
console.log(b64_token);
console.log(b64_secret);
sessionStorage.setItem("auth", b64_token);
sessionStorage.setItem("auth_secret", b64_secret);
LOAD_URL();
} break;
default: {
submit.removeAttribute("disabled");
switch(data.status) {
case Status.BadHandle: {
document.getElementById("handle").setAttribute("class", "error");
submit.setAttribute("class", "error");
} break;
case Status.BadSecret: {
document.getElementById("secret").setAttribute("class", "error");
submit.setAttribute("class", "error");
} break;
case Status.BadCode: {
document.getElementById("code").setAttribute("class", "error");
submit.setAttribute("class", "error");
} break;
}
}
}
}
},
disconnect() {
LOAD(SCENES.Offline);
},
},
Authenticate:{
load() {
if(sessionStorage.getItem("auth") !== null) return false;
UI.mainmenu("authenticate");
UI.mainnav([], [], { auth:true });
let container = document.createElement("section");
let form = document.createElement("div");
form.appendChild(UI.table(null, [
[ UI.label(LANG("handle"), "handle"), UI.textbox("handle", "") ],
[ UI.label(LANG("secret"), "secret"), UI.password("secret") ],
]));
let button = UI.button(LANG("login"), (event) => {
let handle = document.getElementById("handle");
let secret = document.getElementById("secret");
handle.removeAttribute("class");
secret.removeAttribute("class");
event.target.removeAttribute("class");
if(handle.value.length > 0 && secret.value.length > 0) {
event.target.setAttribute("disabled", "");
let enc = new TextEncoder();
let enc_handle = enc.encode(handle.value);
let enc_secret = enc.encode(secret.value);
MESSAGE_COMPOSE([
PACK.u16(OpCode.Authenticate),
PACK.u16(enc_handle.length),
enc_handle,
PACK.u16(enc_secret.length),
enc_secret,
]);
} else {
if(handle.value.length == 0) { handle.setAttribute("class", "error"); }
if(secret.value.length == 0) { secret.setAttribute("class", "error"); }
}
});
button.setAttribute("id", "submit");
form.appendChild(button);
container.appendChild(form);
MAIN.appendChild(container);
MAIN.setAttribute("class", "form");
return true;
},
message(code, data) {
if(code == OpCode.Authenticate && data !== null) {
let submit = document.getElementById("submit");
switch(data.status) {
case Status.Ok: {
sessionStorage.setItem("auth", PACK.base64(data.token));
sessionStorage.setItem("auth_secret", PACK.base64(data.secret));
LOAD_URL();
} break;
case Status.Error: {
submit.removeAttribute("disabled");
document.getElementById("handle").setAttribute("class", "error");
document.getElementById("secret").setAttribute("class", "error");
submit.setAttribute("class", "error");
}
}
}
},
disconnect() {
LOAD(SCENES.Offline);
},
},
Browse:{
load() {
CONTEXT.Data = {
page:0,
records:[],
};
UI.mainmenu("browse");
UI.mainnav(
[ ],
[
UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]),
UI.button("◀", null),
UI.button("▶", null),
UI.button(LANG("refresh"), null),
],
{ auth:true, session:true }
);
let table = document.createElement("table");
table.setAttribute("id", "content");
table.setAttribute("class", "list session");
MAIN.appendChild(table);
SCENE.refresh();
history.pushState(null, "Omen", "/");
return true;
},
refresh() {
MESSAGE_SESSION_LIST(0, 2, false, false);
},
message(code, data) {
switch(code) {
case OpCode.SessionList: {
let table = document.getElementById("content");
UI.clear(table);
if(data !== null) {
table.appendChild(UI.session_table(data.records));
}
} break;
}
},
disconnect() {
LOAD(SCENES.Offline);
},
},
Continue:{
load() {
if(sessionStorage.getItem("auth") === null) return false;
CONTEXT.Data = {
page:0,
records:[],
};
UI.mainmenu("continue");
UI.mainnav(
[ ],
[
UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]),
UI.button("◀", null),
UI.button("▶", null),
UI.button(LANG("refresh"), null),
],
{ auth:true, session:true }
);
let table = document.createElement("table");
table.setAttribute("id", "content");
table.setAttribute("class", "list session");
MAIN.appendChild(table);
SCENE.refresh();
history.pushState(null, "Omen - Continue", "/continue/");
return true;
},
refresh() {
MESSAGE_SESSION_LIST(0, 2, true, false);
},
message(code, data) {
switch(code) {
case OpCode.SessionList: {
let table = document.getElementById("content");
UI.clear(table);
if(data !== null) {
table.appendChild(UI.session_table_resume(data.records));
}
} break;
}
},
disconnect() {
LOAD(SCENES.Offline);
},
},
/*Join:{
load() {
if(sessionStorage.getItem("auth") === null) return false;
CONTEXT.Data = {
page:0,
records:[],
};
UI.mainmenu("join");
UI.mainnav(
[ ],
[
UI.div([UI.text("0 - 0 of 0")]),
UI.button("◀", null),
UI.button("▶", null),
UI.button("Refresh", null),
],
{ auth:true, session:true }
);
let table = document.createElement("table");
table.setAttribute("id", "content");
table.setAttribute("class", "list");
MAIN.appendChild(table);
SCENE.refresh();
history.pushState(null, "Omen - Join", "/join/");
return true;
},
refresh() {
MESSAGE_SESSION_LIST(0, 1, false, false);
},
message(code, data) {
switch(code) {
case OpCode.SessionList: {
let table = document.getElementById("content");
UI.clear(table);
if(data !== null) {
table.appendChild(UI.session_table_join(data.records));
}
} break;
case OpCode.SessionView: {
if(data.status == Status.Ok) {
LOAD(SCENES.Game, data);
}
} break;
}
},
disconnect() {
LOAD(SCENES.Offline);
},
},*/
Live:{
load() {
CONTEXT.Data = {
page:0,
records:[],
};
UI.mainmenu("live");
UI.mainnav(
[ ],
[
UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]),
UI.button("◀", null),
UI.button("▶", null),
UI.button(LANG("refresh"), null),
],
{ auth:true, session:true }
);
let table = document.createElement("table");
table.setAttribute("id", "content");
table.setAttribute("class", "list session");
MAIN.appendChild(table);
SCENE.refresh();
history.pushState(null, "Omen - Live", "/live/");
return true;
},
refresh() {
MESSAGE_SESSION_LIST(0, 2, false, true);
},
message(code, data) {
switch(code) {
case OpCode.SessionList: {
let table = document.getElementById("content");
UI.clear(table);
if(data !== null) {
table.appendChild(UI.session_table(data.records));
}
} break;
}
},
disconnect() {
LOAD(SCENES.Offline);
},
},
History:{
load() {
CONTEXT.Data = {
page:0,
records:[],
};
UI.mainmenu("history");
UI.mainnav(
[ ],
[
UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]),
UI.button("◀", null),
UI.button("▶", null),
UI.button(LANG("refresh"), null),
],
{ auth:true }
);
let table = document.createElement("table");
table.setAttribute("id", "content");
table.setAttribute("class", "list session");
MAIN.appendChild(table);
SCENE.refresh();
history.pushState(null, "Omen - History", "/history/");
return true;
},
refresh() {
MESSAGE_SESSION_LIST(0, 3, false, false);
},
message(code, data) {
switch(code) {
case OpCode.SessionList: {
let table = document.getElementById("content");
UI.clear(table);
if(data !== null) {
table.appendChild(UI.session_table_history(data.records));
}
} break;
}
},
disconnect() {
LOAD(SCENES.Offline);
},
},
Guide:{
load() {
UI.mainmenu("guide");
UI.mainnav([
UI.button("Game", () => { SCENE.refresh("game.html"); }),
UI.button("Pieces", () => { SCENE.refresh("pieces.html"); }),
UI.button("Interface", () => { SCENE.refresh("interface.html"); }),
], []);
let body = document.createElement("article");
body.setAttribute("id", "article");
MAIN.appendChild(body);
this.refresh("game.html");
history.pushState(null, "Omen - Guide", "/guide/");
return true;
},
refresh(page) {
fetch("/guide/" + page)
.then((response) => {
return response.text();
})
.then((text) => {
let parser = new DOMParser();
let body = parser.parseFromString(text, "text/html");
document.getElementById("article").innerHTML = body.body.innerHTML;
});
},
},
About:{
load() {
UI.mainmenu("about");
UI.mainnav([], []);
let body = document.createElement("article");
body.setAttribute("id", "article");
MAIN.appendChild(body);
this.refresh("main.html");
history.pushState(null, "Omen - About", "/about/");
return true;
},
refresh(page) {
fetch("/about/" + page)
.then((response) => {
return response.text();
})
.then((text) => {
let parser = new DOMParser();
let body = parser.parseFromString(text, "text/html");
document.getElementById("article").innerHTML = body.body.innerHTML;
});
},
},
Game:{
load(data) {
let buttons_bottom = [ ];
if(data.mode != INTERFACE.Mode.Review) {
let button_resign = UI.button(LANG("resign"), () => { INTERFACE.resign(); });
button_resign.setAttribute("id", "button-resign");
buttons_bottom.push(button_resign);
}
buttons_bottom.push(UI.button(LANG("back"), () => {
if(SCENE_FORWARD !== null) { LOAD(SCENE_FORWARD); }
else { LOAD(SCENES.Browse); }
}));
UI.nav([
UI.button(LANG("rotate"), () => { INTERFACE.rotate(); }),
UI.button(LANG("mirror"), () => { INTERFACE.mirror(); }),
], buttons_bottom);
if(data.mode == INTERFACE.Mode.Review) {
let ind_turn = UI.div([UI.text("0 / 0")]);
ind_turn.setAttribute("id", "indicator-turn");
UI.mainnav(
[ ],
[
UI.button("Auto", () => { INTERFACE.replay_toggle_auto(); }),
UI.button("◀", () => { INTERFACE.replay_first(); }),
UI.button("◁", () => { INTERFACE.replay_prev(); }),
ind_turn,
UI.button("▷", () => { INTERFACE.replay_next(); }),
UI.button("▶", () => { INTERFACE.replay_last(); }),
]
);
let slider = UI.slider("turn-slider", (event) => { INTERFACE.replay_jump(event.target.value); });
slider.setAttribute("min", "0");
slider.setAttribute("max", "0");
MAIN.appendChild(UI.div([ slider ], "turn-slider-padding"));
}
let canvas = document.createElement("canvas");
canvas.setAttribute("id", "game");
MAIN.appendChild(canvas);
INTERFACE.init(data.token, data.mode);
history.pushState(null, "Omen - Game", "/game/" + PACK.base64(data.token).slice(0, -1));
return true;
},
unload() {
INTERFACE.uninit();
},
message(code, data) {
switch(code) {
case OpCode.SessionCreate:
case OpCode.SessionView:
case OpCode.GameState:
case OpCode.GamePlay: {
INTERFACE.message(code, data);
} break;
}
},
disconnect() {
LOAD(SCENES.Offline);
},
},
GamePractice:{
load(data) {
let buttons_bottom = [ ];
buttons_bottom.push(UI.button(LANG("reset"), () => { INTERFACE.reset(); }));
buttons_bottom.push(UI.button(LANG("back"), () => { LOAD(SCENES.Browse) }));
UI.nav([
UI.button(LANG("rotate"), () => { INTERFACE.rotate(); }),
UI.button(LANG("mirror"), () => { INTERFACE.mirror(); }),
UI.button(LANG("auto"), () => { INTERFACE.auto(); }),
], buttons_bottom);
let canvas = document.createElement("canvas");
canvas.setAttribute("id", "game");
MAIN.appendChild(canvas);
INTERFACE.init(null, INTERFACE.Mode.Local);
history.pushState(null, "Omen - Practice", "/practice/");
return true;
},
unload() {
INTERFACE.uninit();
},
},
/*Await:{
load() {
if(sessionStorage.getItem("auth") === null) return false;
UI.mainmenu("await");
UI.mainnav([], [], { session:true });
let container = document.createElement("section");
let form = document.createElement("div");
form.appendChild(UI.text("Await a challenger:"));
form.appendChild(UI.table(null, [
[ UI.label("Accepting", "in-accept"), UI.checkbox("in-accept") ],
]));
let button = UI.button("Update", (event) => {
let accepting = 0;
if(document.getElementById("in-accept").value == "on") {
accepting = 1;
}
let flags = 0;
flags |= accepting;
MESSAGE_COMPOSE([
PACK.u16(OpCode.UserAwait),
PACK.u32(flags),
]);
LOAD_URL();
});
form.appendChild(button);
container.appendChild(form);
MAIN.appendChild(container);
MAIN.setAttribute("class", "form");
return true;
},
disconnect() {
LOAD(SCENES.Offline);
},
},*/
Challenge:{
load() {
if(sessionStorage.getItem("auth") === null) return false;
CONTEXT.Data = {
page:0,
records:[],
};
UI.mainmenu("browse");
UI.mainnav(
[
UI.button(LANG("users"), () => { LOAD(SCENES.Challenge); }),
UI.button(LANG("requests"), () => { LOAD(SCENES.ChallengeList); }),
],
[
UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]),
UI.button("◀", null),
UI.button("▶", null),
UI.button(LANG("refresh"), null),
]
);
let table = document.createElement("table");
table.setAttribute("id", "content");
table.setAttribute("class", "list challenge");
MAIN.appendChild(table);
SCENE.refresh();
history.pushState(null, "Omen", "/challenge/");
return true;
},
refresh() {
MESSAGE_COMPOSE([
PACK.u16(OpCode.UserList),
]);
},
message(code, data) {
switch(code) {
case OpCode.UserList: {
let table = document.getElementById("content");
UI.clear(table);
if(data !== null) {
let rows = [ ];
for(let r = 0; r < data.users.length; ++r) {
let buttons = [ ];
let callback = function() {
MESSAGE_CHALLENGE(this.handle);
};
callback = callback.bind({handle: data.users[r].handle});
buttons.push(UI.button(LANG("challenge"), callback));
rows.push([
UI.text(LANG("unranked")),
UI.text(data.users[r].handle),
buttons,
]);
}
let tbody = UI.table_content(
[ LANG("rank"), LANG("handle"), "" ],
rows,
);
table.appendChild(tbody);
}
} break;
}
},
disconnect() {
LOAD(SCENES.Offline);
},
},
ChallengeList:{
load() {
if(sessionStorage.getItem("auth") === null) return false;
CONTEXT.Data = {
page:0,
records:[],
};
UI.mainmenu("browse");
UI.mainnav(
[
UI.button(LANG("users"), () => { LOAD(SCENES.Challenge); }),
UI.button(LANG("requests"), () => { LOAD(SCENES.ChallengeList); }),
],
[
UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]),
UI.button("◀", null),
UI.button("▶", null),
UI.button(LANG("refresh"), null),
]
);
let table = document.createElement("table");
table.setAttribute("id", "content");
table.setAttribute("class", "list challenge");
MAIN.appendChild(table);
SCENE.refresh();
history.pushState(null, "Omen", "/challenge/");
return true;
},
refresh() {
MESSAGE_COMPOSE([
PACK.u16(OpCode.ChallengeList),
]);
},
message(code, data) {
switch(code) {
case OpCode.ChallengeList: {
let table = document.getElementById("content");
UI.clear(table);
if(data !== null) {
let rows = [ ];
for(let r = 0; r < data.challenges.length; ++r) {
let buttons = [ ];
let callback_accept = function() {
MESSAGE_CHALLENGE_ANSWER(this.handle, true);
};
callback_accept = callback_accept.bind({handle: data.challenges[r].handle});
buttons.push(UI.button(LANG("accept"), callback_accept));
let callback_decline = function() {
MESSAGE_CHALLENGE_ANSWER(this.handle, false);
};
callback_decline = callback_decline.bind({handle: data.challenges[r].handle});
buttons.push(UI.button(LANG("decline"), callback_decline));
rows.push([
UI.text(LANG("unranked")),
UI.text(data.users[r].handle),
buttons,
]);
}
let tbody = UI.table_content(
[ LANG("rank"), LANG("handle"), "" ],
rows,
);
table.appendChild(tbody);
}
} break;
case OpCode.ChallengeAnswer: {
if(data.status == Status.Ok) {
LOAD(SCENES.Game, {
token:data.token,
mode:INTERFACE.Mode.Player,
});
MESSAGE_SESSION_VIEW(data.token, true);
} else {
SCENE.refresh();
}
} break;
}
},
disconnect() {
LOAD(SCENES.Offline);
},
},
};
function LOAD(scene, data=null) {
UNLOAD();
UI.rebuild();
SCENE = scene;
if(!SCENE.load(data)) { LOAD(SCENES.Browse); }
}
function UNLOAD() {
if(SCENE !== null && SCENE.unload !== undefined) { SCENE.unload(); }
}
function LOAD_URL() {
let parts = window.location.pathname.split("/");
if(parts.length > 1) {
switch(parts[1]) {
case "continue": LOAD(SCENES.Continue); break;
case "live": LOAD(SCENES.Live); break;
case "history": LOAD(SCENES.History); break;
case "practice": LOAD(SCENES.GamePractice); break;
case "guide": LOAD(SCENES.Guide); break;
case "about": LOAD(SCENES.About); break;
case "challenge": LOAD(SCENES.Challenge); break;
case "game": {
if(parts[2]) {
let token = UNPACK.base64(parts[2] + "=");
LOAD(SCENES.Game, {
token:token,
mode:INTERFACE.Mode.Review,
});
MESSAGE_SESSION_VIEW(token, false);
} else {
LOAD(SCENES.Browse);
}
} break;
default: LOAD(SCENES.Browse);
}
} else {
LOAD(SCENES.Browse);
}
}