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

6
www/js/ui.js
View File

@ -355,6 +355,12 @@ const UI = {
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) {
while(dom.lastChild !== null) { dom.removeChild(dom.lastChild); }
},