1413 lines
48 KiB
JavaScript
1413 lines
48 KiB
JavaScript
class SceneManager {
|
|
constructor() {
|
|
this.scene = null;
|
|
this.preload = false;
|
|
}
|
|
|
|
load(scene, data=null) {
|
|
this.unload();
|
|
UI.rebuild();
|
|
|
|
if(scene !== null) {
|
|
// Prepare new scene
|
|
this.scene = new scene();
|
|
|
|
// Preload scene if defined
|
|
if(this.scene.preload !== undefined) {
|
|
if(this.scene.preload(data, null)) {
|
|
this.preload = true;
|
|
} else {
|
|
this.scene.load(SCENES.Browse);
|
|
}
|
|
}
|
|
|
|
// Otherwise, load scene
|
|
else {
|
|
this.preload = false;
|
|
this.scene.load(data);
|
|
UI.update_status();
|
|
}
|
|
}
|
|
}
|
|
|
|
unload() {
|
|
if(!this.preload && this.scene !== null && this.scene.unload !== undefined) {
|
|
this.scene.unload();
|
|
}
|
|
}
|
|
|
|
load_url() {
|
|
let parts = window.location.pathname.split("/");
|
|
|
|
if(parts.length > 1) {
|
|
switch(parts[1]) {
|
|
case "continue": this.load(SCENES.Continue); return;
|
|
case "live": this.load(SCENES.Live); return;
|
|
case "history": this.load(SCENES.History); return;
|
|
case "practice": this.load(SCENES.GamePractice); return;
|
|
case "guide": this.load(SCENES.Guide); return;
|
|
case "about": this.load(SCENES.About); return;
|
|
case "extras": this.load(SCENES.Extras); return;
|
|
|
|
case "users": this.load(SCENES.Users); return;
|
|
case "requests": this.load(SCENES.Requests); return;
|
|
|
|
case "game": {
|
|
if(parts[2]) {
|
|
let token = UNPACK.base64(parts[2] + "=");
|
|
this.load(SCENES.Game, {
|
|
token:token,
|
|
mode:INTERFACE.Mode.Review,
|
|
});
|
|
return;
|
|
}
|
|
} break;
|
|
|
|
case "u": {
|
|
if(parts[2]) {
|
|
this.load(SCENES.Profile, {
|
|
handle:parts[2],
|
|
});
|
|
return;
|
|
}
|
|
} break;
|
|
}
|
|
}
|
|
this.load(SCENES.Browse);
|
|
}
|
|
|
|
disconnect() {
|
|
if(this.scene !== null && this.scene.disconnect !== undefined) {
|
|
this.scene.disconnect();
|
|
}
|
|
}
|
|
|
|
message(msg) {
|
|
if(this.scene !== null) {
|
|
// Handle preloading scene
|
|
if(this.preload) {
|
|
|
|
// Send message to preloader
|
|
let result = this.scene.load(msg);
|
|
|
|
// Finalize scene if load successful
|
|
if(result === true) {
|
|
this.preload = false;
|
|
UI.update_status();
|
|
}
|
|
|
|
// Load default scene if preload failed
|
|
else if(result === false) {
|
|
this.load(SCENES.Browse);
|
|
}
|
|
}
|
|
|
|
// Handle loaded scene
|
|
else {
|
|
this.scene.message(msg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
let SCENE = new SceneManager();
|
|
const SCENES = {
|
|
Init: class{
|
|
constructor() { }
|
|
load() {
|
|
SCENE.load(SCENES.Offline);
|
|
RECONNECT();
|
|
return true;
|
|
}
|
|
},
|
|
|
|
Offline:class{
|
|
constructor() { }
|
|
load() {
|
|
UI.nav([
|
|
UI.button(LANG("reconnect"), () => { RECONNECT(); }),
|
|
UI.button(LANG("practice"), () => { SCENE.load(SCENES.GamePractice); }),
|
|
], []);
|
|
return true;
|
|
}
|
|
message(msg) {
|
|
switch(msg.code) {
|
|
case OpCode.Hello: {
|
|
console.log("CLIENT VERSION: '" + CONFIG_VERSION + "'");
|
|
console.log("SERVER VERSION: '" + msg.data.version + "'");
|
|
|
|
if(CONFIG_VERSION == msg.data.version) {
|
|
RESUME();
|
|
} else {
|
|
location.reload();
|
|
}
|
|
} break;
|
|
}
|
|
}
|
|
},
|
|
|
|
Register:class{
|
|
constructor() { }
|
|
load() {
|
|
if(sessionStorage.getItem("auth") !== null) return false;
|
|
UI.mainmenu("register");
|
|
UI.mainnav([], [], { auth:true });
|
|
|
|
let container = document.createElement("section");
|
|
let form = document.createElement("form");
|
|
|
|
let tb_handle = UI.textbox("handle", "user");
|
|
tb_handle.setAttribute("maxlength", 24);
|
|
tb_handle.addEventListener("input", (event) => {
|
|
let value = event.target.value;
|
|
if(value.length == 0 || VALID.username(value)) {
|
|
event.target.removeAttribute("class");
|
|
} else {
|
|
event.target.setAttribute("class", "error");
|
|
}
|
|
})
|
|
|
|
form.appendChild(UI.table(null, [
|
|
[ UI.label(LANG("handle"), "handle"), tb_handle ],
|
|
[ UI.label(LANG("secret"), "secret"), UI.password("secret") ],
|
|
[ UI.label(LANG("invitation"), "code"), UI.textbox("code", "####-####-####") ],
|
|
]));
|
|
|
|
let button = UI.submit(LANG("register"));
|
|
button.setAttribute("id", "submit");
|
|
form.appendChild(button);
|
|
|
|
form.addEventListener("submit", (event) => {
|
|
event.preventDefault();
|
|
|
|
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");
|
|
|
|
let invitation = code.value;
|
|
invitation = invitation.replace(/\-/g, '');
|
|
|
|
if(VALID.username(handle.value) && secret.value.length > 0 && invitation.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(invitation);
|
|
|
|
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.value.length > 24) { handle.setAttribute("class", "error"); }
|
|
if(secret.value.length == 0) { secret.setAttribute("class", "error"); }
|
|
if(code.value.length == 0) { code.setAttribute("class", "error"); }
|
|
}
|
|
});
|
|
|
|
container.appendChild(form);
|
|
MAIN.appendChild(container);
|
|
MAIN.setAttribute("class", "form");
|
|
|
|
document.getElementById("handle").focus();
|
|
|
|
return true;
|
|
}
|
|
message(msg) {
|
|
if(msg.code == OpCode.Register && msg.data !== null) {
|
|
let submit = document.getElementById("submit");
|
|
switch(msg.data.status) {
|
|
case Status.Ok: {
|
|
let b64_token = PACK.base64(msg.data.token);
|
|
let b64_secret = PACK.base64(msg.data.secret);
|
|
|
|
sessionStorage.setItem("auth", b64_token);
|
|
sessionStorage.setItem("auth_secret", b64_secret);
|
|
SCENE.load_url();
|
|
} break;
|
|
default: {
|
|
submit.removeAttribute("disabled");
|
|
switch(msg.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() {
|
|
SCENE.load(SCENES.Offline);
|
|
}
|
|
},
|
|
|
|
Authenticate:class{
|
|
constructor() { }
|
|
load() {
|
|
if(sessionStorage.getItem("auth") !== null) return false;
|
|
UI.mainmenu("authenticate");
|
|
UI.mainnav([], [], { auth:true });
|
|
|
|
let container = document.createElement("section");
|
|
let form = document.createElement("form");
|
|
|
|
let tb_handle = UI.textbox("handle", "user");
|
|
tb_handle.setAttribute("maxlength", 24);
|
|
|
|
form.appendChild(UI.table(null, [
|
|
[ UI.label(LANG("handle"), "handle"), tb_handle ],
|
|
[ UI.label(LANG("secret"), "secret"), UI.password("secret") ],
|
|
]));
|
|
|
|
let button = UI.submit(LANG("login"));
|
|
button.setAttribute("id", "submit");
|
|
form.appendChild(button);
|
|
|
|
form.addEventListener("submit", (event) => {
|
|
event.preventDefault();
|
|
|
|
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 && handle.value.length <= 24 && 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.value.length > 24) { handle.setAttribute("class", "error"); }
|
|
if(secret.value.length == 0) { secret.setAttribute("class", "error"); }
|
|
}
|
|
});
|
|
|
|
container.appendChild(form);
|
|
MAIN.appendChild(container);
|
|
MAIN.setAttribute("class", "form");
|
|
|
|
document.getElementById("handle").focus();
|
|
|
|
return true;
|
|
}
|
|
message(msg) {
|
|
if(msg.code == OpCode.Authenticate && msg.data !== null) {
|
|
let submit = document.getElementById("submit");
|
|
switch(msg.data.status) {
|
|
case Status.Ok: {
|
|
sessionStorage.setItem("auth", PACK.base64(msg.data.token));
|
|
sessionStorage.setItem("auth_secret", PACK.base64(msg.data.secret));
|
|
CONTEXT.Auth = {
|
|
handle: msg.data.handle,
|
|
};
|
|
SCENE.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() {
|
|
SCENE.load(SCENES.Offline);
|
|
}
|
|
},
|
|
|
|
Browse:class{
|
|
constructor() {
|
|
this.data = null;
|
|
this.page = 1;
|
|
this.pages = 1;
|
|
}
|
|
preload() {
|
|
this.refresh();
|
|
return true;
|
|
}
|
|
load(msg) {
|
|
if(msg.code != OpCode.SessionList) {
|
|
return null;
|
|
} else {
|
|
this.data = msg.data.records;
|
|
}
|
|
|
|
if(SOCKET !== null) {
|
|
UI.mainmenu("browse");
|
|
|
|
let indicator_page = UI.div([]);
|
|
indicator_page.setAttribute("id", "indicator-page");
|
|
|
|
UI.mainnav(
|
|
[ ],
|
|
[
|
|
indicator_page,
|
|
UI.button("◀", () => {
|
|
if(this.page < this.pages) { this.page += 1; }
|
|
this.refresh();
|
|
}),
|
|
UI.button("▶", () => {
|
|
if(this.page > 1) { this.page -= 1; }
|
|
this.refresh();
|
|
}),
|
|
UI.button(LANG("refresh"), () => { this.referesh(); }),
|
|
],
|
|
{ auth:true, session:true }
|
|
);
|
|
|
|
let table = document.createElement("table");
|
|
table.setAttribute("id", "content");
|
|
table.setAttribute("class", "list session");
|
|
table.appendChild(UI.session_table(this.data));
|
|
UI.maincontent(table);
|
|
|
|
UI.page_indicator((this.data.length > 0)? 1 : 0, this.data.length, this.data.length);
|
|
|
|
history.pushState(null, "Dzura", "/");
|
|
} else {
|
|
SCENE.load(SCENES.Offline);
|
|
}
|
|
return true;
|
|
}
|
|
refresh() {
|
|
MESSAGE_SESSION_LIST(this.page, [
|
|
filter(FilterCode.IsComplete, false),
|
|
]);
|
|
}
|
|
/*message(code, data) {
|
|
switch(code) {
|
|
case OpCode.SessionList: {
|
|
let table = document.getElementById("content");
|
|
UI.clear(table);
|
|
|
|
if(data !== null) {
|
|
UI.page_indicator((data.records.length > 0)? 1 : 0, data.records.length, data.records.length);
|
|
table.appendChild(UI.session_table(data.records));
|
|
}
|
|
} break;
|
|
}
|
|
}*/
|
|
disconnect() {
|
|
SCENE.load(SCENES.Offline);
|
|
}
|
|
},
|
|
|
|
Continue:class{
|
|
constructor() {
|
|
this.data = null;
|
|
this.page = 1;
|
|
this.pages = 1;
|
|
}
|
|
preload() {
|
|
this.refresh();
|
|
return true;
|
|
}
|
|
load(msg) {
|
|
if(msg.code != OpCode.SessionList) {
|
|
return null;
|
|
} else {
|
|
this.data = msg.data.records;
|
|
}
|
|
|
|
if(sessionStorage.getItem("auth") === null) return false;
|
|
|
|
UI.mainmenu("continue");
|
|
|
|
let indicator_page = UI.div([]);
|
|
indicator_page.setAttribute("id", "indicator-page");
|
|
|
|
UI.mainnav(
|
|
[ ],
|
|
[
|
|
indicator_page,
|
|
UI.button("◀", () => {
|
|
if(this.page < this.pages) { this.page += 1; }
|
|
this.refresh();
|
|
}),
|
|
UI.button("▶", () => {
|
|
if(this.page > 1) { this.page -= 1; }
|
|
this.refresh();
|
|
}),
|
|
UI.button(LANG("refresh"), () => { this.referesh(); }),
|
|
],
|
|
{ auth:true, session:true }
|
|
);
|
|
|
|
let table = document.createElement("table");
|
|
table.setAttribute("id", "content");
|
|
table.setAttribute("class", "list session");
|
|
table.appendChild(UI.session_table_resume(this.data));
|
|
UI.maincontent(table);
|
|
|
|
UI.page_indicator((this.data.length > 0)? 1 : 0, this.data.length, this.data.length);
|
|
|
|
history.pushState(null, "Dzura - Continue", "/continue/");
|
|
return true;
|
|
}
|
|
refresh() {
|
|
MESSAGE_SESSION_LIST(this.page, [
|
|
filter(FilterCode.IsComplete, false),
|
|
filter(FilterCode.IsPlayer, true),
|
|
]);
|
|
}
|
|
/*message(code, data) {
|
|
switch(code) {
|
|
case OpCode.SessionList: {
|
|
let table = document.getElementById("content");
|
|
UI.clear(table);
|
|
|
|
if(data !== null) {
|
|
UI.page_indicator((data.records.length > 0)? 1 : 0, data.records.length, data.records.length);
|
|
table.appendChild(UI.session_table_resume(data.records));
|
|
}
|
|
} break;
|
|
}
|
|
}*/
|
|
disconnect() {
|
|
SCENE.load(SCENES.Offline);
|
|
}
|
|
},
|
|
|
|
Live:class{
|
|
constructor() {
|
|
this.data = null;
|
|
this.page = 1;
|
|
this.pages = 1;
|
|
}
|
|
preload() {
|
|
this.refresh();
|
|
return true;
|
|
}
|
|
load(msg) {
|
|
if(msg.code != OpCode.SessionList) {
|
|
return null;
|
|
} else {
|
|
this.data = msg.data.records;
|
|
}
|
|
|
|
UI.mainmenu("live");
|
|
|
|
let indicator_page = UI.div([]);
|
|
indicator_page.setAttribute("id", "indicator-page");
|
|
|
|
UI.mainnav(
|
|
[ ],
|
|
[
|
|
indicator_page,
|
|
UI.button("◀", () => {
|
|
if(this.page < this.pages) { this.page += 1; }
|
|
this.refresh();
|
|
}),
|
|
UI.button("▶", () => {
|
|
if(this.page > 1) { this.page -= 1; }
|
|
this.refresh();
|
|
}),
|
|
UI.button(LANG("refresh"), () => { this.referesh(); }),
|
|
],
|
|
{ auth:true, session:true }
|
|
);
|
|
|
|
let table = document.createElement("table");
|
|
table.setAttribute("id", "content");
|
|
table.setAttribute("class", "list session");
|
|
table.appendChild(UI.session_table(this.data));
|
|
UI.maincontent(table);
|
|
|
|
UI.page_indicator((this.data.length > 0)? 1 : 0, this.data.length, this.data.length);
|
|
|
|
history.pushState(null, "Dzura - Live", "/live/");
|
|
return true;
|
|
}
|
|
refresh() {
|
|
MESSAGE_SESSION_LIST(this.page, [
|
|
filter(FilterCode.IsComplete, false),
|
|
filter(FilterCode.IsLive, true),
|
|
]);
|
|
}
|
|
/*message(code, data) {
|
|
switch(code) {
|
|
case OpCode.SessionList: {
|
|
let table = document.getElementById("content");
|
|
UI.clear(table);
|
|
|
|
if(data !== null) {
|
|
UI.page_indicator((data.records.length > 0)? 1 : 0, data.records.length, data.records.length);
|
|
table.appendChild(UI.session_table(data.records));
|
|
}
|
|
} break;
|
|
}
|
|
}*/
|
|
disconnect() {
|
|
SCENE.load(SCENES.Offline);
|
|
}
|
|
},
|
|
|
|
History:class{
|
|
constructor() {
|
|
this.data = null;
|
|
this.page = 1;
|
|
this.pages = 1;
|
|
}
|
|
preload() {
|
|
this.refresh();
|
|
return true;
|
|
}
|
|
load(msg) {
|
|
if(msg.code != OpCode.SessionList) {
|
|
return null;
|
|
} else {
|
|
this.data = msg.data.records;
|
|
}
|
|
|
|
UI.mainmenu("history");
|
|
|
|
let indicator_page = UI.div([]);
|
|
indicator_page.setAttribute("id", "indicator-page");
|
|
|
|
UI.mainnav(
|
|
[ ],
|
|
[
|
|
indicator_page,
|
|
UI.button("◀", () => {
|
|
if(this.page < this.pages) { this.page += 1; }
|
|
this.refresh();
|
|
}),
|
|
UI.button("▶", () => {
|
|
if(this.page > 1) { this.page -= 1; }
|
|
this.refresh();
|
|
}),
|
|
UI.button(LANG("refresh"), () => { this.referesh(); }),
|
|
],
|
|
{ auth:true, session:true }
|
|
);
|
|
|
|
let table = document.createElement("table");
|
|
table.setAttribute("id", "content");
|
|
table.setAttribute("class", "list session");
|
|
table.appendChild(UI.session_table_history(this.data));
|
|
UI.maincontent(table);
|
|
|
|
UI.page_indicator((this.data.length > 0)? 1 : 0, this.data.length, this.data.length);
|
|
|
|
history.pushState(null, "Dzura - History", "/history/");
|
|
return true;
|
|
}
|
|
refresh() {
|
|
MESSAGE_SESSION_LIST(this.page, [
|
|
filter(FilterCode.IsComplete, true),
|
|
]);
|
|
}
|
|
message(code, data) {
|
|
switch(code) {
|
|
case OpCode.SessionList: {
|
|
let table = document.getElementById("content");
|
|
UI.clear(table);
|
|
|
|
if(data !== null) {
|
|
UI.page_indicator((data.records.length > 0)? 1 : 0, data.records.length, data.records.length);
|
|
table.appendChild(UI.session_table_history(data.records));
|
|
}
|
|
} break;
|
|
}
|
|
}
|
|
disconnect() {
|
|
SCENE.load(SCENES.Offline);
|
|
}
|
|
},
|
|
|
|
Guide:class{
|
|
constructor() {
|
|
this.game = null;
|
|
}
|
|
load(data) {
|
|
let config = GAME_CONFIGS.Guide_Militia;
|
|
if(data == null) {
|
|
UI.mainmenu_guide("guide_pieces", true);
|
|
UI.mainnav([
|
|
UI.button_piece(0, () => { INTERFACE.load(GAME_CONFIGS.Guide_Militia); }),
|
|
UI.button_piece(1, () => { INTERFACE.load(GAME_CONFIGS.Guide_Lance); }),
|
|
UI.button_piece(2, () => { INTERFACE.load(GAME_CONFIGS.Guide_Knight); }),
|
|
UI.button_piece(3, () => { INTERFACE.load(GAME_CONFIGS.Guide_Tower); }),
|
|
UI.button_piece(4, () => { INTERFACE.load(GAME_CONFIGS.Guide_Castle); }),
|
|
UI.button_piece(5, () => { INTERFACE.load(GAME_CONFIGS.Guide_Dragon); }),
|
|
UI.button_piece(6, () => { INTERFACE.load(GAME_CONFIGS.Guide_Behemoth); }),
|
|
UI.button_piece(7, () => { INTERFACE.load(GAME_CONFIGS.Guide_Heart); }),
|
|
], []);
|
|
} else {
|
|
UI.mainmenu_guide("guide_" + data, true);
|
|
|
|
switch(data) {
|
|
case "check": {
|
|
UI.mainnav([
|
|
UI.button("1", () => { INTERFACE.load(GAME_CONFIGS.Guide_Check); }),
|
|
UI.button("2", () => { INTERFACE.load(GAME_CONFIGS.Guide_Check2); }),
|
|
UI.button("3", () => { INTERFACE.load(GAME_CONFIGS.Guide_Check3); }),
|
|
], []);
|
|
} break;
|
|
case "checkmate": {
|
|
UI.mainnav([
|
|
UI.button("Ex", () => { INTERFACE.load(GAME_CONFIGS.Guide_Checkmate); }),
|
|
UI.button("1", () => { INTERFACE.load(GAME_CONFIGS.Guide_Trial1); }),
|
|
], []);
|
|
} break;
|
|
default: {
|
|
UI.mainnav([], []);
|
|
}
|
|
}
|
|
|
|
switch(data) {
|
|
case "drop": config = GAME_CONFIGS.Guide_Drop; break;
|
|
case "promote": config = GAME_CONFIGS.Guide_Promote; break;
|
|
case "check": config = GAME_CONFIGS.Guide_Check; break;
|
|
case "checkmate": config = GAME_CONFIGS.Guide_Checkmate; break;
|
|
}
|
|
}
|
|
|
|
let canvas = document.createElement("canvas");
|
|
canvas.setAttribute("id", "game");
|
|
MAIN.appendChild(canvas);
|
|
|
|
INTERFACE.init(null, config, INTERFACE.Mode.Local, {});
|
|
|
|
history.pushState(null, "Dzura - Guide", "/guide/");
|
|
return true;
|
|
}
|
|
unload() {
|
|
INTERFACE.uninit();
|
|
}
|
|
},
|
|
|
|
About:class{
|
|
constructor() { }
|
|
load() {
|
|
UI.mainmenu("about");
|
|
UI.mainnav([], []);
|
|
|
|
let body = document.createElement("article");
|
|
body.setAttribute("id", "article");
|
|
body.setAttribute("class", "text");
|
|
UI.maincontent(body);
|
|
|
|
this.refresh("main.html");
|
|
|
|
history.pushState(null, "Dzura - 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;
|
|
});
|
|
}
|
|
},
|
|
|
|
Extras:class{
|
|
constructor() { }
|
|
load() {
|
|
UI.mainmenu("extras");
|
|
|
|
history.pushState(null, "Dzura - About", "/extras/");
|
|
return true;
|
|
}
|
|
},
|
|
|
|
Profile:class{
|
|
constructor() {
|
|
this.handle = "";
|
|
this.is_online = false;
|
|
this.stats = {
|
|
games_played: 0,
|
|
};
|
|
this.history = [ ];
|
|
}
|
|
preload(data) {
|
|
this.handle = data.handle;
|
|
|
|
MESSAGE_COMPOSE([
|
|
PACK.u16(OpCode.UserProfile),
|
|
PACK.string(this.handle, PACK.u8),
|
|
]);
|
|
return true;
|
|
}
|
|
load(msg) {
|
|
if(msg.code == OpCode.UserProfile) {
|
|
if(msg.data.status != Status.Ok) {
|
|
return false;
|
|
}
|
|
} else {
|
|
return null;
|
|
}
|
|
this.handle = msg.data.handle;
|
|
this.is_online = msg.data.is_online;
|
|
this.history = msg.data.history;
|
|
|
|
UI.mainmenu_account(this.handle, "profile");
|
|
|
|
// Left Buttons
|
|
let buttons_left = [ ];
|
|
|
|
// Right Buttons
|
|
let buttons_right = [ ];
|
|
|
|
UI.mainnav(buttons_left, buttons_right);
|
|
|
|
// Main Content
|
|
MAIN.setAttribute("class", "profile");
|
|
|
|
let header = document.createElement("header");
|
|
let title = document.createElement("h1");
|
|
if(this.is_online) {
|
|
title.innerText = this.handle + " ●";
|
|
title.setAttribute("class", "online");
|
|
} else {
|
|
title.innerText = this.handle + " ○";
|
|
}
|
|
header.appendChild(title);
|
|
MAIN.appendChild(header);
|
|
|
|
let rank = UI.text("Unranked");
|
|
let games_played = 0;
|
|
|
|
for(let i = 0; i < this.history.length; ++i) {
|
|
if(this.history[i].is_complete != 0) { games_played += 1; }
|
|
}
|
|
|
|
let table_stats = UI.table(
|
|
[ "Rank", "Games", "" ],
|
|
[[ rank, UI.text(games_played.toString()), UI.text("") ]],
|
|
);
|
|
table_stats.setAttribute("class", "info");
|
|
|
|
MAIN.appendChild(table_stats);
|
|
|
|
let container_history = document.createElement("section");
|
|
container_history.setAttribute("class", "history");
|
|
|
|
let table_history = document.createElement("table");
|
|
table_history.setAttribute("class", "list session");
|
|
table_history.appendChild(UI.session_table_history(this.history));
|
|
|
|
container_history.appendChild(table_history);
|
|
MAIN.appendChild(container_history);
|
|
|
|
history.pushState(null, "Dzura - About", "/u/" + this.handle);
|
|
return true;
|
|
}
|
|
},
|
|
|
|
Account:class{
|
|
constructor() { }
|
|
load(data) {
|
|
if(sessionStorage.getItem("auth") === null) return false;
|
|
|
|
UI.mainmenu_account(data, "account");
|
|
|
|
// Left Buttons
|
|
let buttons_left = [ ];
|
|
|
|
// Right Buttons
|
|
let buttons_right = [ ];
|
|
buttons_right.push(UI.button(LANG("logout"), () => {
|
|
BADGE_UPDATE(false);
|
|
MESSAGE_COMPOSE([
|
|
PACK.u16(OpCode.Deauthenticate),
|
|
]);
|
|
sessionStorage.clear();
|
|
CONTEXT.Auth = null;
|
|
SCENE.load(SCENES.Browse);
|
|
}));
|
|
UI.mainnav(buttons_left, buttons_right);
|
|
|
|
// Main Content
|
|
let container = document.createElement("section");
|
|
let form = document.createElement("form");
|
|
|
|
form.appendChild(UI.table(null, [
|
|
[ UI.label(LANG("secret"), "secret"), UI.password("secret") ],
|
|
]));
|
|
|
|
let button = UI.submit(LANG("auth"));
|
|
button.setAttribute("id", "submit");
|
|
form.appendChild(button);
|
|
|
|
form.addEventListener("submit", (event) => {
|
|
event.preventDefault();
|
|
|
|
/*let secret = document.getElementById("secret");
|
|
|
|
secret.removeAttribute("class");
|
|
event.target.removeAttribute("class");
|
|
|
|
if(handle.value.length > 0 && handle.value.length <= 24 && secret.value.length > 0) {
|
|
event.target.setAttribute("disabled", "");
|
|
|
|
let enc = new TextEncoder();
|
|
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.value.length > 24) { handle.setAttribute("class", "error"); }
|
|
if(secret.value.length == 0) { secret.setAttribute("class", "error"); }
|
|
}*/
|
|
});
|
|
|
|
container.appendChild(form);
|
|
MAIN.appendChild(container);
|
|
MAIN.setAttribute("class", "form");
|
|
|
|
document.getElementById("secret").focus();
|
|
|
|
history.pushState(null, "Dzura - Account", "/u/" + CONTEXT.Auth.handle);
|
|
return true;
|
|
}
|
|
},
|
|
|
|
Invitations:class{
|
|
constructor() {
|
|
this.data = null;
|
|
}
|
|
preload(data) {
|
|
if(sessionStorage.getItem("auth") === null) return false;
|
|
MESSAGE_COMPOSE([
|
|
PACK.u16(OpCode.InviteList),
|
|
]);
|
|
return true;
|
|
}
|
|
load(msg) {
|
|
if(msg.code == OpCode.InviteList) {
|
|
this.data = msg.data.records;
|
|
} else {
|
|
return null;
|
|
}
|
|
|
|
UI.mainmenu_account(null, "invitations");
|
|
|
|
// Left Buttons
|
|
let buttons_left = [
|
|
UI.button("Acquire", () => {
|
|
MESSAGE_COMPOSE([
|
|
PACK.u16(OpCode.InviteAcquire),
|
|
])
|
|
}),
|
|
];
|
|
|
|
// Right Buttons
|
|
let buttons_right = [ ];
|
|
|
|
UI.mainnav(buttons_left, buttons_right);
|
|
|
|
// Main Content
|
|
let table = document.createElement("table");
|
|
table.setAttribute("id", "content");
|
|
table.setAttribute("class", "list invite");
|
|
table.appendChild(UI.invite_table(this.data));
|
|
UI.maincontent(table);
|
|
|
|
history.pushState(null, "Dzura - About", "/u/" + CONTEXT.Auth.handle);
|
|
return true;
|
|
}
|
|
message(msg) {
|
|
switch(msg.code) {
|
|
case OpCode.InviteAcquire: {
|
|
MESSAGE_COMPOSE([
|
|
PACK.u16(OpCode.InviteList),
|
|
]);
|
|
} break;
|
|
|
|
case OpCode.InviteList: {
|
|
this.data = msg.data.records;
|
|
|
|
let table = document.getElementById("content");
|
|
UI.clear(table);
|
|
|
|
table.appendChild(UI.invite_table(this.data));
|
|
} break;
|
|
}
|
|
}
|
|
},
|
|
|
|
Game:class{
|
|
constructor() {
|
|
this.mode = null;
|
|
this.token = null;
|
|
this.turn = null;
|
|
this.rotate = 0;
|
|
|
|
this.game = null;
|
|
}
|
|
preload(data) {
|
|
this.mode = data.mode;
|
|
this.token = data.token;
|
|
if(data.rotate !== undefined) { this.rotate = data.rotate; }
|
|
if(data.turn !== undefined) { this.turn = data.turn; }
|
|
MESSAGE_SESSION_VIEW(this.token, this.mode == INTERFACE.Mode.Player);
|
|
return true;
|
|
}
|
|
load(msg) {
|
|
if(msg.code == OpCode.SessionView) {
|
|
if(msg.data.status != Status.Ok) {
|
|
return false;
|
|
}
|
|
} else {
|
|
return null;
|
|
}
|
|
|
|
// Bottom Buttons
|
|
let buttons_bottom = [ ];
|
|
if(this.mode == INTERFACE.Mode.Player) {
|
|
let button_undo = UI.button(LANG("undo"), () => { INTERFACE.undo(); });
|
|
button_undo.setAttribute("id", "button-undo");
|
|
buttons_bottom.push(button_undo);
|
|
|
|
let button_resign = UI.button(LANG("resign"), () => { INTERFACE.resign(); });
|
|
button_resign.setAttribute("id", "button-resign");
|
|
buttons_bottom.push(button_resign);
|
|
} else {
|
|
let button_react = UI.button("Clap", () => { INTERFACE.react(); });
|
|
buttons_bottom.push(button_react);
|
|
}
|
|
buttons_bottom.push(UI.button(LANG("back"), () => {
|
|
SCENE.load(SCENES.Browse);
|
|
}));
|
|
|
|
// Standard Top Buttons
|
|
let buttons_top = [
|
|
UI.button(LANG("rotate"), () => { INTERFACE.rotate(); }),
|
|
UI.button(LANG("mirror"), () => { INTERFACE.mirror(); }),
|
|
];
|
|
|
|
// Resume / Review Buttons
|
|
if(msg.data.player != 0) {
|
|
if(this.mode == INTERFACE.Mode.Review) {
|
|
if(!msg.data.is_complete) {
|
|
let callback_resume = function() {
|
|
SCENE.load(SCENES.Game, {
|
|
token:this.token,
|
|
mode:INTERFACE.Mode.Player,
|
|
rotate:2 + ((INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate),
|
|
});
|
|
}
|
|
callback_resume = callback_resume.bind({
|
|
token: this.token,
|
|
});
|
|
buttons_top.push(UI.button(LANG("resume"), callback_resume));
|
|
}
|
|
} else {
|
|
let callback_review = function() {
|
|
SCENE.load(SCENES.Game, {
|
|
token:this.token,
|
|
mode:INTERFACE.Mode.Review,
|
|
rotate:2 + ((INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate),
|
|
});
|
|
}
|
|
callback_review = callback_review.bind({
|
|
token: this.token,
|
|
});
|
|
|
|
buttons_top.push(UI.button(LANG("review"), callback_review));
|
|
}
|
|
}
|
|
|
|
// Practice Button
|
|
if(this.mode == INTERFACE.Mode.Review) {
|
|
let play_callback = function() {
|
|
let turn = INTERFACE_DATA.Replay.turn;
|
|
if(INTERFACE_DATA.Game.history.length > 0) {
|
|
if(INTERFACE_DATA.Game.history[turn - 1].source == 0xF) {
|
|
turn -= 1;
|
|
}
|
|
}
|
|
|
|
SCENE.load(SCENES.GamePractice, {
|
|
token:this.token,
|
|
history:INTERFACE_DATA.Game.history,
|
|
turn:turn,
|
|
rotate:(INTERFACE_DATA.player & 1) ^ INTERFACE_DATA.rotate,
|
|
});
|
|
}
|
|
play_callback = play_callback.bind({
|
|
token: this.token,
|
|
});
|
|
buttons_top.push(UI.button(LANG("practice"), play_callback));
|
|
}
|
|
|
|
UI.nav(buttons_top, buttons_bottom);
|
|
|
|
// Turn Indicators, Scroll Bar
|
|
if(this.mode == INTERFACE.Mode.Review) {
|
|
let ind_turn = UI.div([UI.text("0 / 0")]);
|
|
ind_turn.setAttribute("id", "indicator-turn");
|
|
|
|
let button_auto = UI.button(LANG("auto"), () => { INTERFACE.replay_toggle_auto(); });
|
|
button_auto.setAttribute("id", "button-auto");
|
|
|
|
UI.mainnav(
|
|
[ ],
|
|
[
|
|
button_auto,
|
|
UI.button("◀", () => { INTERFACE.replay_off(); INTERFACE.replay_first(); }),
|
|
UI.button("◁", () => { INTERFACE.replay_off(); INTERFACE.replay_prev(); }),
|
|
ind_turn,
|
|
UI.button("▷", () => { INTERFACE.replay_off(); INTERFACE.replay_next(true); }),
|
|
UI.button("▶", () => { INTERFACE.replay_off(); INTERFACE.replay_last(); }),
|
|
]
|
|
);
|
|
|
|
let slider = UI.slider("turn-slider", (event) => { INTERFACE.replay_off(); INTERFACE.replay_jump(event.target.value, true); });
|
|
slider.setAttribute("min", "0");
|
|
slider.setAttribute("max", "0");
|
|
MAIN.appendChild(UI.div([ slider ], "turn-slider-padding"));
|
|
}
|
|
|
|
// Canvas
|
|
let canvas = document.createElement("canvas");
|
|
canvas.setAttribute("id", "game");
|
|
MAIN.appendChild(canvas);
|
|
|
|
// Interface
|
|
INTERFACE.init(this.token, GAME_CONFIGS.Standard, this.mode, {
|
|
rotate:this.rotate,
|
|
});
|
|
if(this.turn !== null) {
|
|
INTERFACE_DATA.Replay.turn = this.turn;
|
|
}
|
|
|
|
history.pushState(null, "Dzura - Game", "/game/" + PACK.base64(this.token).slice(0, -1));
|
|
return true;
|
|
}
|
|
unload() {
|
|
INTERFACE.uninit();
|
|
}
|
|
message(msg) {
|
|
INTERFACE.message(msg);
|
|
}
|
|
disconnect() {
|
|
SCENE.load(SCENES.Offline);
|
|
}
|
|
},
|
|
|
|
GamePractice:class{
|
|
constructor() {
|
|
this.game = null;
|
|
}
|
|
load(data) {
|
|
let buttons_top = [
|
|
UI.button(LANG("rotate"), () => { INTERFACE.rotate(); }),
|
|
UI.button(LANG("mirror"), () => { INTERFACE.mirror(); }),
|
|
UI.button(LANG("cpu"), () => { INTERFACE.auto(); }),
|
|
];
|
|
|
|
if(data !== null) {
|
|
let callback_review = function() {
|
|
SCENE.load(SCENES.Game, {
|
|
token:this.token,
|
|
mode:INTERFACE.Mode.Review,
|
|
turn:INTERFACE_DATA.Game.history_begin.length,
|
|
rotate:2 + INTERFACE_DATA.rotate,
|
|
});
|
|
}
|
|
callback_review = callback_review.bind({
|
|
token: data.token,
|
|
});
|
|
|
|
buttons_top.push(UI.button(LANG("review"), callback_review));
|
|
}
|
|
|
|
let buttons_bottom = [ ];
|
|
buttons_bottom.push(UI.button(LANG("undo"), () => { INTERFACE.undo(); }));
|
|
buttons_bottom.push(UI.button(LANG("reset"), () => { INTERFACE.reset(); }));
|
|
buttons_bottom.push(UI.button(LANG("back"), () => { SCENE.load(SCENES.Browse); }));
|
|
|
|
UI.nav(buttons_top, buttons_bottom);
|
|
|
|
let canvas = document.createElement("canvas");
|
|
canvas.setAttribute("id", "game");
|
|
MAIN.appendChild(canvas);
|
|
|
|
let params = {};
|
|
if(data !== null) {
|
|
params = {
|
|
rotate:data.rotate !== undefined? data.rotate : 0,
|
|
};
|
|
}
|
|
|
|
INTERFACE.init(data, GAME_CONFIGS.Standard, INTERFACE.Mode.Local, params);
|
|
if(data !== null) {
|
|
for(let i = 0; i < data.turn; ++i) {
|
|
INTERFACE_DATA.Game.history_begin.push(data.history[i]);
|
|
}
|
|
INTERFACE.reset();
|
|
}
|
|
|
|
history.pushState(null, "Dzura - Practice", "/practice/");
|
|
return true;
|
|
}
|
|
unload() {
|
|
INTERFACE.uninit();
|
|
}
|
|
},
|
|
|
|
Users:class{
|
|
constructor() {
|
|
this.page = 0;
|
|
}
|
|
preload() {
|
|
this.refresh();
|
|
return true;
|
|
}
|
|
load(msg) {
|
|
if(msg.code != OpCode.UserList) {
|
|
return null;
|
|
}
|
|
|
|
if(sessionStorage.getItem("auth") === null) return false;
|
|
|
|
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 challenge");
|
|
|
|
// Insert table rows
|
|
let rows = [ ];
|
|
|
|
for(let r = 0; r < msg.data.users.length; ++r) {
|
|
let buttons = [ ];
|
|
|
|
let callback = function(event) {
|
|
MESSAGE_CHALLENGE(this.handle);
|
|
|
|
event.target.innerText = "Sent";
|
|
event.target.setAttribute("class", "highlight");
|
|
event.target.setAttribute("disabled", "");
|
|
};
|
|
callback = callback.bind({handle: msg.data.users[r].handle});
|
|
buttons.push(UI.button(LANG("challenge"), callback));
|
|
|
|
let callback_profile_dawn = function() { SCENE.load(SCENES.Profile, { handle: this.handle }); }
|
|
callback_profile_dawn = callback_profile_dawn.bind({ handle: msg.data.users[r].handle });
|
|
let handle = UI.link(msg.data.users[r].handle, callback_profile_dawn);
|
|
|
|
if(!msg.data.users[r].is_online) {
|
|
handle = UI.span([handle], "text-system");
|
|
}
|
|
|
|
rows.push([
|
|
handle,
|
|
UI.text(LANG("unranked")),
|
|
buttons,
|
|
]);
|
|
}
|
|
|
|
let tbody = UI.table_content(
|
|
[ LANG("handle"), LANG("rank"), "" ],
|
|
rows,
|
|
);
|
|
|
|
table.appendChild(tbody);
|
|
|
|
UI.maincontent(table);
|
|
|
|
history.pushState(null, "Dzura", "/users/");
|
|
return true;
|
|
}
|
|
refresh() {
|
|
MESSAGE_COMPOSE([
|
|
PACK.u16(OpCode.UserList),
|
|
]);
|
|
}
|
|
disconnect() {
|
|
SCENE.load(SCENES.Offline);
|
|
}
|
|
},
|
|
|
|
Requests:class{
|
|
constructor() { }
|
|
preload() {
|
|
this.refresh();
|
|
return true;
|
|
}
|
|
load(msg) {
|
|
if(msg.code != OpCode.ChallengeList) {
|
|
return null;
|
|
}
|
|
|
|
if(sessionStorage.getItem("auth") === null) return false;
|
|
|
|
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 challenge");
|
|
|
|
let rows = [ ];
|
|
|
|
for(let r = 0; r < msg.data.challenges.length; ++r) {
|
|
let buttons = [ ];
|
|
|
|
let callback_accept = function() {
|
|
MESSAGE_CHALLENGE_ANSWER(this.handle, true);
|
|
};
|
|
callback_accept = callback_accept.bind({handle: msg.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: msg.data.challenges[r].handle});
|
|
buttons.push(UI.button(LANG("decline"), callback_decline));
|
|
|
|
rows.push([
|
|
UI.text(msg.data.challenges[r].handle),
|
|
UI.text(LANG("unranked")),
|
|
buttons,
|
|
]);
|
|
}
|
|
|
|
let tbody = UI.table_content(
|
|
[ LANG("handle"), LANG("rank"), "" ],
|
|
rows,
|
|
);
|
|
|
|
table.appendChild(tbody);
|
|
|
|
UI.maincontent(table);
|
|
|
|
history.pushState(null, "Dzura", "/requests/");
|
|
return true;
|
|
}
|
|
refresh() {
|
|
MESSAGE_COMPOSE([
|
|
PACK.u16(OpCode.ChallengeList),
|
|
]);
|
|
}
|
|
message(msg) {
|
|
switch(msg.code) {
|
|
case OpCode.ChallengeList: {
|
|
let table = document.getElementById("content");
|
|
UI.clear(table);
|
|
|
|
let rows = [ ];
|
|
|
|
for(let r = 0; r < msg.data.challenges.length; ++r) {
|
|
let buttons = [ ];
|
|
|
|
let callback_accept = function() {
|
|
MESSAGE_CHALLENGE_ANSWER(this.handle, true);
|
|
};
|
|
callback_accept = callback_accept.bind({handle: msg.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: msg.data.challenges[r].handle});
|
|
buttons.push(UI.button(LANG("decline"), callback_decline));
|
|
|
|
rows.push([
|
|
UI.text(msg.data.challenges[r].handle),
|
|
UI.text(LANG("unranked")),
|
|
buttons,
|
|
]);
|
|
}
|
|
|
|
let tbody = UI.table_content(
|
|
[ LANG("handle"), LANG("rank"), "" ],
|
|
rows,
|
|
);
|
|
|
|
table.appendChild(tbody);
|
|
} break;
|
|
|
|
case OpCode.ChallengeAnswer: {
|
|
if(msg.data.status == Status.Ok) {
|
|
SCENE.load(SCENES.Game, {
|
|
token:msg.data.token,
|
|
mode:INTERFACE.Mode.Player,
|
|
});
|
|
} else {
|
|
this.refresh();
|
|
}
|
|
} break;
|
|
}
|
|
}
|
|
disconnect() {
|
|
SCENE.load(SCENES.Offline);
|
|
}
|
|
},
|
|
};
|