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

Improve history UI.

Browse Source
This commit is contained in:
yukirij 2024-08-23 19:29:07 -07:00
parent 74a1036836
commit 61119368d1
4 changed files with 49 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
www/css/ui.css
View File

@ -113,3 +113,18 @@ main>article a{
main>article>a:hover{
text-decoration: underline;
}
main>div.turn-slider-padding{
display: block;
position: relative;
width: 100%;
padding: 0.25rem 0.5rem 0 0.5rem;
background-color: #101010;
}
#turn-slider{
display: block;
position: relative;
width: 100%;
height: 1rem;
accent-color: #702e2e;
}

31
www/js/interface.js
View File

@ -710,6 +710,9 @@ const INTERFACE = {
let token = null;
let player = 0;
let history = [ ];
let dawn = null;
let dusk = null;
if(data !== null) {
switch(mode) {
case INTERFACE.Mode.Online: {
@ -721,7 +724,9 @@ const INTERFACE = {
history = data.history;
} break;
}
if(data.dawn !== undefined) { dawn = data.dawn; }
if(data.dusk !== undefined) { dusk = data.dusk; }
}
INTERFACE_DATA = {
@ -739,7 +744,7 @@ const INTERFACE = {
hover: null,
select: null,
handles: [null, null],
handles: [dawn, dusk],
board_state: [ ],
play: null,
retire:false,
@ -910,10 +915,10 @@ const INTERFACE = {
}
},
replay_prev() {
replay_jump(turn) {
if(INTERFACE_DATA.mode == INTERFACE.Mode.Replay) {
if(INTERFACE_DATA.replay_turn > 0) {
INTERFACE_DATA.replay_turn--;
if(turn >= 0 && turn <= INTERFACE_DATA.history.length) {
INTERFACE_DATA.replay_turn = turn;
GAME.init();
for(let i = 0; i < INTERFACE_DATA.replay_turn; ++i) {
@ -925,21 +930,15 @@ const INTERFACE = {
INTERFACE_DATA.play = INTERFACE_DATA.history[INTERFACE_DATA.replay_turn - 1];
}
document.getElementById("turn-slider").value = INTERFACE_DATA.replay_turn;
INTERFACE.draw();
}
}
},
replay_next() {
if(INTERFACE_DATA.mode == INTERFACE.Mode.Replay) {
if(INTERFACE_DATA.replay_turn < INTERFACE_DATA.history.length) {
GAME_DATA.process(INTERFACE_DATA.history[INTERFACE_DATA.replay_turn]);
INTERFACE_DATA.play = INTERFACE_DATA.history[INTERFACE_DATA.replay_turn];
INTERFACE_DATA.replay_turn++;
INTERFACE.draw();
}
}
},
replay_first() { INTERFACE.replay_jump(0); },
replay_last() { INTERFACE.replay_jump(INTERFACE_DATA.history.length); },
replay_prev() { INTERFACE.replay_jump(INTERFACE_DATA.replay_turn - 1); },
replay_next() { INTERFACE.replay_jump(INTERFACE_DATA.replay_turn + 1); },
auto() {
if(INTERFACE_DATA.auto_mode === null) {

11
www/js/scene.js
View File

@ -582,12 +582,19 @@ const SCENES = {
UI.mainnav(
[ ],
[
UI.button("◀", () => { INTERFACE.replay_first(); }),
UI.button("◁", () => { INTERFACE.replay_prev(); }),
ind_turn,
UI.button("◀", () => { INTERFACE.replay_prev(); }),
UI.button("▶", () => { INTERFACE.replay_next(); }),
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", data.history.length);
MAIN.appendChild(UI.div([ slider ], "turn-slider-padding"));
let canvas = document.createElement("canvas");
canvas.setAttribute("id", "game");

10
www/js/ui.js
View File

@ -11,6 +11,16 @@ const UI = {
return button;
},
slider(callback) {
let slider = document.createElement("input");
slider.setAttribute("type", "range");
slider.setAttribute("value", "0");
slider.setAttribute("min", "0");
slider.setAttribute("max", "0");
if(callback !== null) { slider.addEventListener("input", callback); }
return slider;
},
textbox(id, placeholder) {
let input = document.createElement("input");
input.setAttribute("type", "text");