Kirisame/dzura
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects 1 Releases Wiki Activity

Implement client-side list paging.

Browse Source
This commit is contained in:
yukirij 2024-08-29 16:42:16 -07:00
parent e13e8a07dc
commit 73dc56e5d7
3 changed files with 160 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

252
www/js/scene.js
View File

@ -1,25 +1,28 @@
const SCENES = { const SCENES = {
Init:{ Init: class{
constructor() { }
load() { load() {
LOAD(SCENES.Offline); LOAD(SCENES.Offline);
RECONNECT(); RECONNECT();
return true; return true;
}, }
}, },
Offline:{ Offline:class{
constructor() { }
load() { load() {
UI.nav([ UI.nav([
UI.button(LANG("reconnect"), () => { RECONNECT(); }), UI.button(LANG("reconnect"), () => { RECONNECT(); }),
], []); ], []);
return true; return true;
}, }
reconnect() { reconnect() {
LOAD_URL(); LOAD_URL();
} }
}, },
Register:{ Register:class{
constructor() { }
load() { load() {
if(sessionStorage.getItem("auth") !== null) return false; if(sessionStorage.getItem("auth") !== null) return false;
UI.mainmenu("register"); UI.mainmenu("register");
@ -78,7 +81,7 @@ const SCENES = {
MAIN.setAttribute("class", "form"); MAIN.setAttribute("class", "form");
return true; return true;
}, }
message(code, data) { message(code, data) {
if(code == OpCode.Register && data !== null) { if(code == OpCode.Register && data !== null) {
let submit = document.getElementById("submit"); let submit = document.getElementById("submit");
@ -112,13 +115,14 @@ const SCENES = {
} }
} }
} }
}, }
disconnect() { disconnect() {
LOAD(SCENES.Offline); LOAD(SCENES.Offline);
}, }
}, },
Authenticate:{ Authenticate:class{
constructor() { }
load() { load() {
if(sessionStorage.getItem("auth") !== null) return false; if(sessionStorage.getItem("auth") !== null) return false;
UI.mainmenu("authenticate"); UI.mainmenu("authenticate");
@ -170,7 +174,7 @@ const SCENES = {
MAIN.setAttribute("class", "form"); MAIN.setAttribute("class", "form");
return true; return true;
}, }
message(code, data) { message(code, data) {
if(code == OpCode.Authenticate && data !== null) { if(code == OpCode.Authenticate && data !== null) {
let submit = document.getElementById("submit"); let submit = document.getElementById("submit");
@ -189,27 +193,36 @@ const SCENES = {
} }
} }
} }
}, }
disconnect() { disconnect() {
LOAD(SCENES.Offline); LOAD(SCENES.Offline);
}, }
}, },
Browse:{ Browse:class{
constructor() {
this.page = 1;
this.pages = 1;
}
load() { load() {
CONTEXT.Data = {
page:0,
records:[],
};
UI.mainmenu("browse"); UI.mainmenu("browse");
let indicator_page = UI.div([]);
indicator_page.setAttribute("id", "indicator-page");
UI.mainnav( UI.mainnav(
[ ], [ ],
[ [
UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]), indicator_page,
UI.button("◀", null), UI.button("◀", () => {
UI.button("▶", null), if(SCENE.page < SCENE.pages) { SCENE.page += 1; }
UI.button(LANG("refresh"), null), SCENE.refresh();
}),
UI.button("▶", () => {
if(SCENE.page > 1) { SCENE.page -= 1; }
SCENE.refresh();
}),
UI.button(LANG("refresh"), () => { SCENE.referesh(); }),
], ],
{ auth:true, session:true } { auth:true, session:true }
); );
@ -223,10 +236,10 @@ const SCENES = {
history.pushState(null, "Omen", "/"); history.pushState(null, "Omen", "/");
return true; return true;
}, }
refresh() { refresh() {
MESSAGE_SESSION_LIST(0, 2, false, false); MESSAGE_SESSION_LIST(this.page, 2, false, false);
}, }
message(code, data) { message(code, data) {
switch(code) { switch(code) {
case OpCode.SessionList: { case OpCode.SessionList: {
@ -234,33 +247,43 @@ const SCENES = {
UI.clear(table); UI.clear(table);
if(data !== null) { 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)); table.appendChild(UI.session_table(data.records));
} }
} break; } break;
} }
}, }
disconnect() { disconnect() {
LOAD(SCENES.Offline); LOAD(SCENES.Offline);
}, }
}, },
Continue:{ Continue:class{
constructor() {
this.page = 1;
this.pages = 1;
}
load() { load() {
if(sessionStorage.getItem("auth") === null) return false; if(sessionStorage.getItem("auth") === null) return false;
CONTEXT.Data = {
page:0,
records:[],
};
UI.mainmenu("continue"); UI.mainmenu("continue");
let indicator_page = UI.div([]);
indicator_page.setAttribute("id", "indicator-page");
UI.mainnav( UI.mainnav(
[ ], [ ],
[ [
UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]), indicator_page,
UI.button("◀", null), UI.button("◀", () => {
UI.button("▶", null), if(SCENE.page < SCENE.pages) { SCENE.page += 1; }
UI.button(LANG("refresh"), null), SCENE.refresh();
}),
UI.button("▶", () => {
if(SCENE.page > 1) { SCENE.page -= 1; }
SCENE.refresh();
}),
UI.button(LANG("refresh"), () => { SCENE.referesh(); }),
], ],
{ auth:true, session:true } { auth:true, session:true }
); );
@ -274,10 +297,10 @@ const SCENES = {
history.pushState(null, "Omen - Continue", "/continue/"); history.pushState(null, "Omen - Continue", "/continue/");
return true; return true;
}, }
refresh() { refresh() {
MESSAGE_SESSION_LIST(0, 2, true, false); MESSAGE_SESSION_LIST(this.page, 2, true, false);
}, }
message(code, data) { message(code, data) {
switch(code) { switch(code) {
case OpCode.SessionList: { case OpCode.SessionList: {
@ -285,14 +308,15 @@ const SCENES = {
UI.clear(table); UI.clear(table);
if(data !== null) { 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)); table.appendChild(UI.session_table_resume(data.records));
} }
} break; } break;
} }
}, }
disconnect() { disconnect() {
LOAD(SCENES.Offline); LOAD(SCENES.Offline);
}, }
}, },
/*Join:{ /*Join:{
@ -351,21 +375,30 @@ const SCENES = {
}, },
},*/ },*/
Live:{ Live:class{
constructor() {
this.page = 1;
this.pages = 1;
}
load() { load() {
CONTEXT.Data = {
page:0,
records:[],
};
UI.mainmenu("live"); UI.mainmenu("live");
let indicator_page = UI.div([]);
indicator_page.setAttribute("id", "indicator-page");
UI.mainnav( UI.mainnav(
[ ], [ ],
[ [
UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]), indicator_page,
UI.button("◀", null), UI.button("◀", () => {
UI.button("▶", null), if(SCENE.page < SCENE.pages) { SCENE.page += 1; }
UI.button(LANG("refresh"), null), SCENE.refresh();
}),
UI.button("▶", () => {
if(SCENE.page > 1) { SCENE.page -= 1; }
SCENE.refresh();
}),
UI.button(LANG("refresh"), () => { SCENE.referesh(); }),
], ],
{ auth:true, session:true } { auth:true, session:true }
); );
@ -379,10 +412,10 @@ const SCENES = {
history.pushState(null, "Omen - Live", "/live/"); history.pushState(null, "Omen - Live", "/live/");
return true; return true;
}, }
refresh() { refresh() {
MESSAGE_SESSION_LIST(0, 2, false, true); MESSAGE_SESSION_LIST(this.page, 2, false, true);
}, }
message(code, data) { message(code, data) {
switch(code) { switch(code) {
case OpCode.SessionList: { case OpCode.SessionList: {
@ -390,33 +423,43 @@ const SCENES = {
UI.clear(table); UI.clear(table);
if(data !== null) { 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)); table.appendChild(UI.session_table(data.records));
} }
} break; } break;
} }
}, }
disconnect() { disconnect() {
LOAD(SCENES.Offline); LOAD(SCENES.Offline);
}, }
}, },
History:{ History:class{
constructor() {
this.page = 1;
this.pages = 1;
}
load() { load() {
CONTEXT.Data = {
page:0,
records:[],
};
UI.mainmenu("history"); UI.mainmenu("history");
let indicator_page = UI.div([]);
indicator_page.setAttribute("id", "indicator-page");
UI.mainnav( UI.mainnav(
[ ], [ ],
[ [
UI.div([UI.text(LANG_PAGEOF(0, 0, 0))]), indicator_page,
UI.button("◀", null), UI.button("◀", () => {
UI.button("▶", null), if(SCENE.page < SCENE.pages) { SCENE.page += 1; }
UI.button(LANG("refresh"), null), SCENE.refresh();
}),
UI.button("▶", () => {
if(SCENE.page > 1) { SCENE.page -= 1; }
SCENE.refresh();
}),
UI.button(LANG("refresh"), () => { SCENE.referesh(); }),
], ],
{ auth:true } { auth:true, session:true }
); );
let table = document.createElement("table"); let table = document.createElement("table");
@ -428,10 +471,10 @@ const SCENES = {
history.pushState(null, "Omen - History", "/history/"); history.pushState(null, "Omen - History", "/history/");
return true; return true;
}, }
refresh() { refresh() {
MESSAGE_SESSION_LIST(0, 3, false, false); MESSAGE_SESSION_LIST(this.page, 3, false, false);
}, }
message(code, data) { message(code, data) {
switch(code) { switch(code) {
case OpCode.SessionList: { case OpCode.SessionList: {
@ -439,17 +482,19 @@ const SCENES = {
UI.clear(table); UI.clear(table);
if(data !== null) { 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)); table.appendChild(UI.session_table_history(data.records));
} }
} break; } break;
} }
}, }
disconnect() { disconnect() {
LOAD(SCENES.Offline); LOAD(SCENES.Offline);
}, }
}, },
Guide:{ Guide:class{
constructor() { }
load() { load() {
UI.mainmenu("guide"); UI.mainmenu("guide");
UI.mainnav([ UI.mainnav([
@ -466,7 +511,7 @@ const SCENES = {
history.pushState(null, "Omen - Guide", "/guide/"); history.pushState(null, "Omen - Guide", "/guide/");
return true; return true;
}, }
refresh(page) { refresh(page) {
fetch("/guide/" + page) fetch("/guide/" + page)
.then((response) => { .then((response) => {
@ -477,10 +522,11 @@ const SCENES = {
let body = parser.parseFromString(text, "text/html"); let body = parser.parseFromString(text, "text/html");
document.getElementById("article").innerHTML = body.body.innerHTML; document.getElementById("article").innerHTML = body.body.innerHTML;
}); });
}, }
}, },
About:{ About:class{
constructor() { }
load() { load() {
UI.mainmenu("about"); UI.mainmenu("about");
UI.mainnav([], []); UI.mainnav([], []);
@ -493,7 +539,7 @@ const SCENES = {
history.pushState(null, "Omen - About", "/about/"); history.pushState(null, "Omen - About", "/about/");
return true; return true;
}, }
refresh(page) { refresh(page) {
fetch("/about/" + page) fetch("/about/" + page)
.then((response) => { .then((response) => {
@ -504,10 +550,13 @@ const SCENES = {
let body = parser.parseFromString(text, "text/html"); let body = parser.parseFromString(text, "text/html");
document.getElementById("article").innerHTML = body.body.innerHTML; document.getElementById("article").innerHTML = body.body.innerHTML;
}); });
}, }
}, },
Game:{ Game:class{
constructor() {
this.game = null;
}
load(data) { load(data) {
let buttons_bottom = [ ]; let buttons_bottom = [ ];
if(data.mode != INTERFACE.Mode.Review) { if(data.mode != INTERFACE.Mode.Review) {
@ -555,10 +604,10 @@ const SCENES = {
history.pushState(null, "Omen - Game", "/game/" + PACK.base64(data.token).slice(0, -1)); history.pushState(null, "Omen - Game", "/game/" + PACK.base64(data.token).slice(0, -1));
return true; return true;
}, }
unload() { unload() {
INTERFACE.uninit(); INTERFACE.uninit();
}, }
message(code, data) { message(code, data) {
switch(code) { switch(code) {
case OpCode.SessionCreate: case OpCode.SessionCreate:
@ -568,13 +617,16 @@ const SCENES = {
INTERFACE.message(code, data); INTERFACE.message(code, data);
} break; } break;
} }
}, }
disconnect() { disconnect() {
LOAD(SCENES.Offline); LOAD(SCENES.Offline);
}, }
}, },
GamePractice:{ GamePractice:class{
constructor() {
this.game = null;
}
load(data) { load(data) {
let buttons_bottom = [ ]; let buttons_bottom = [ ];
buttons_bottom.push(UI.button(LANG("reset"), () => { INTERFACE.reset(); })); buttons_bottom.push(UI.button(LANG("reset"), () => { INTERFACE.reset(); }));
@ -594,10 +646,10 @@ const SCENES = {
history.pushState(null, "Omen - Practice", "/practice/"); history.pushState(null, "Omen - Practice", "/practice/");
return true; return true;
}, }
unload() { unload() {
INTERFACE.uninit(); INTERFACE.uninit();
}, }
}, },
/*Await:{ /*Await:{
@ -642,7 +694,10 @@ const SCENES = {
}, },
},*/ },*/
Challenge:{ Challenge:class{
constructor() {
this.page = 0;
}
load() { load() {
if(sessionStorage.getItem("auth") === null) return false; if(sessionStorage.getItem("auth") === null) return false;
@ -674,12 +729,12 @@ const SCENES = {
history.pushState(null, "Omen", "/challenge/"); history.pushState(null, "Omen", "/challenge/");
return true; return true;
}, }
refresh() { refresh() {
MESSAGE_COMPOSE([ MESSAGE_COMPOSE([
PACK.u16(OpCode.UserList), PACK.u16(OpCode.UserList),
]); ]);
}, }
message(code, data) { message(code, data) {
switch(code) { switch(code) {
case OpCode.UserList: { case OpCode.UserList: {
@ -714,13 +769,14 @@ const SCENES = {
} }
} break; } break;
} }
}, }
disconnect() { disconnect() {
LOAD(SCENES.Offline); LOAD(SCENES.Offline);
}, }
}, },
ChallengeList:{ ChallengeList:class{
constructor() { }
load() { load() {
if(sessionStorage.getItem("auth") === null) return false; if(sessionStorage.getItem("auth") === null) return false;
@ -752,12 +808,12 @@ const SCENES = {
history.pushState(null, "Omen", "/challenge/"); history.pushState(null, "Omen", "/challenge/");
return true; return true;
}, }
refresh() { refresh() {
MESSAGE_COMPOSE([ MESSAGE_COMPOSE([
PACK.u16(OpCode.ChallengeList), PACK.u16(OpCode.ChallengeList),
]); ]);
}, }
message(code, data) { message(code, data) {
switch(code) { switch(code) {
case OpCode.ChallengeList: { case OpCode.ChallengeList: {
@ -811,17 +867,17 @@ const SCENES = {
} }
} break; } break;
} }
}, }
disconnect() { disconnect() {
LOAD(SCENES.Offline); LOAD(SCENES.Offline);
}, }
}, },
}; };
function LOAD(scene, data=null) { function LOAD(scene, data=null) {
UNLOAD(); UNLOAD();
UI.rebuild(); UI.rebuild();
SCENE = scene; SCENE = new scene();
if(!SCENE.load(data)) { LOAD(SCENES.Browse); } if(!SCENE.load(data)) { LOAD(SCENES.Browse); }
} }

2
www/js/system.js
View File

@ -367,8 +367,6 @@ function MESSAGE(event) {
console.log("RECV Undefined " + code); console.log("RECV Undefined " + code);
return; return;
} }
console.log(data);
if(SCENE.message !== undefined) { SCENE.message(code, data) }; if(SCENE.message !== undefined) { SCENE.message(code, data) };
} }

6
www/js/ui.js
View File

@ -355,6 +355,12 @@ const UI = {
return tbody; return tbody;
}, },
page_indicator(first, last, total) {
let ind = document.getElementById("indicator-page");
UI.clear(ind);
ind.appendChild(UI.text(LANG_PAGEOF(first, last, total)));
},
clear(dom) { clear(dom) {
while(dom.lastChild !== null) { dom.removeChild(dom.lastChild); } while(dom.lastChild !== null) { dom.removeChild(dom.lastChild); }
}, },