Improve history UI.

www/css/ui.css

@@ -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;
+}

www/js/interface.js

@@ -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: {
@@ -722,6 +725,8 @@ const INTERFACE = {
                 } 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) {
+            if(turn >= 0 && turn <= INTERFACE_DATA.history.length) {
-                INTERFACE_DATA.replay_turn--;
+                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_first() { INTERFACE.replay_jump(0); },
-    replay_next() {
+    replay_last()  { INTERFACE.replay_jump(INTERFACE_DATA.history.length); },
-        if(INTERFACE_DATA.mode == INTERFACE.Mode.Replay) {
+    replay_prev()  { INTERFACE.replay_jump(INTERFACE_DATA.replay_turn - 1); },
-            if(INTERFACE_DATA.replay_turn < INTERFACE_DATA.history.length) {
+    replay_next()  { INTERFACE.replay_jump(INTERFACE_DATA.replay_turn + 1); },
-                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();
-            }
-        }
-    },
 
     auto() {
         if(INTERFACE_DATA.auto_mode === null) {

www/js/scene.js

@@ -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");

www/js/ui.js

@@ -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");