655 lines
21 KiB
JavaScript
655 lines
21 KiB
JavaScript
const SCENES = {
|
|
Init:{
|
|
load() {
|
|
LOAD(SCENES.Offline);
|
|
RECONNECT();
|
|
return true;
|
|
},
|
|
},
|
|
|
|
Offline:{
|
|
load() {
|
|
UI.nav([
|
|
UI.button("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("Handle", "handle"), UI.textbox("handle", "") ],
|
|
[ UI.label("Secret", "secret"), UI.password("secret") ],
|
|
[ UI.label("Invite Code", "code"), UI.password("code") ],
|
|
]));
|
|
|
|
let button = UI.button("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("Handle", "handle"), UI.textbox("handle", "") ],
|
|
[ UI.label("Secret", "secret"), UI.password("secret") ],
|
|
]));
|
|
|
|
let button = UI.button("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("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", "/");
|
|
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("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 - 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(data.records));
|
|
}
|
|
} break;
|
|
case OpCode.SessionCreate:
|
|
case OpCode.SessionJoin: {
|
|
if(data.status == Status.Ok) {
|
|
LOAD(SCENES.Game, data);
|
|
}
|
|
} 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.SessionCreate:
|
|
case OpCode.SessionJoin: {
|
|
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("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 - 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;
|
|
{
|
|
if(data.status == Status.Ok) {
|
|
LOAD(SCENES.Game, data);
|
|
}
|
|
} break;
|
|
}
|
|
},
|
|
disconnect() {
|
|
LOAD(SCENES.Offline);
|
|
},
|
|
},
|
|
|
|
History:{
|
|
load() {
|
|
CONTEXT.Data = {
|
|
page:0,
|
|
records:[],
|
|
};
|
|
|
|
UI.mainmenu("history");
|
|
UI.mainnav(
|
|
[ ],
|
|
[
|
|
UI.div([UI.text("0 - 0 of 0")]),
|
|
UI.button("◀", null),
|
|
UI.button("▶", null),
|
|
UI.button("Refresh", null),
|
|
],
|
|
{ auth:true }
|
|
);
|
|
|
|
let table = document.createElement("table");
|
|
table.setAttribute("id", "content");
|
|
table.setAttribute("class", "list");
|
|
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_retire = UI.button("Surrender", () => { INTERFACE.retire(); });
|
|
button_retire.setAttribute("id", "button-retire");
|
|
buttons_bottom.push(button_retire);
|
|
}
|
|
buttons_bottom.push(UI.button("Back", () => { LOAD(SCENES.Browse) }));
|
|
|
|
UI.nav([
|
|
UI.button("Rotate", () => { INTERFACE.rotate(); }),
|
|
UI.button("Mirror", () => { INTERFACE.mirror(); }),
|
|
], buttons_bottom);
|
|
|
|
if(data.mode == INTERFACE.Mode.Review) {
|
|
let ind_turn = UI.div([UI.text("0 of 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((event) => { INTERFACE.replay_jump(event.target.value); });
|
|
slider.setAttribute("id", "turn-slider");
|
|
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.SessionJoin:
|
|
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("Reset", () => { INTERFACE.reset(); }));
|
|
buttons_bottom.push(UI.button("Back", () => { LOAD(SCENES.Browse) }));
|
|
|
|
UI.nav([
|
|
UI.button("Rotate", () => { INTERFACE.rotate(); }),
|
|
UI.button("Mirror", () => { INTERFACE.mirror(); }),
|
|
UI.button("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();
|
|
},
|
|
},
|
|
};
|
|
|
|
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 "practice": LOAD(SCENES.GamePractice); break;
|
|
case "guide": LOAD(SCENES.Guide); break;
|
|
case "practice": LOAD(SCENES.About); break;
|
|
|
|
case "join": {
|
|
LOAD(SCENES.Join);
|
|
if(parts[2]) {
|
|
let token = UNPACK.base64(parts[2] + "=");
|
|
MESSAGE_SESSION_JOIN(token, true);
|
|
}
|
|
} break;
|
|
|
|
case "game": {
|
|
if(parts[2]) {
|
|
let token = UNPACK.base64(parts[2] + "=");
|
|
LOAD(SCENES.Game, {
|
|
token:token,
|
|
mode:INTERFACE.Mode.Review,
|
|
});
|
|
MESSAGE_SESSION_JOIN(token, false);
|
|
} else {
|
|
LOAD(SCENES.Browse);
|
|
}
|
|
} break;
|
|
|
|
default: LOAD(SCENES.Browse);
|
|
}
|
|
} else {
|
|
LOAD(SCENES.Browse);
|
|
}
|
|
}
|