From c9c2f4a9e73c633dc30a4227393d07d21277baee Mon Sep 17 00:00:00 2001 From: ajuvercr Date: Sat, 21 Sep 2019 10:43:03 +0200 Subject: [PATCH] add turn slider --- frontend/www/index.html | 4 +++ frontend/www/index.ts | 17 +++++++++--- frontend/www/static/res/style.css | 45 +++++++++++++++++++++++++++++++ 3 files changed, 63 insertions(+), 3 deletions(-) diff --git a/frontend/www/index.html b/frontend/www/index.html index 2ea1b5c..a8a0cf3 100644 --- a/frontend/www/index.html +++ b/frontend/www/index.html @@ -10,6 +10,10 @@ +
+ +
+ diff --git a/frontend/www/index.ts b/frontend/www/index.ts index a37c692..dfb8478 100644 --- a/frontend/www/index.ts +++ b/frontend/www/index.ts @@ -18,6 +18,8 @@ function i32v(ptr: number, size: number): Int32Array { const COUNTER = new FPSCounter(); const LOADER = document.getElementById("loader"); +const SLIDER = document.getElementById("turnSlider"); + function set_loading(loading: boolean) { if (loading) { if (!LOADER.classList.contains("loading")) { @@ -123,6 +125,9 @@ class GameInstance { ) ); } + + // Set slider correctly + SLIDER.max = this.game.turn_count() - 1 + ''; } _update_state() { @@ -197,13 +202,13 @@ class GameInstance { this.playing = false; } else { this._update_state(); + this.playing = true; } + + SLIDER.value = this.frame + ''; } handleKey(event: KeyboardEvent) { - console.log(event.keyCode); - console.log(event.key); - // Space if (event.keyCode == 32) { if (this.playing) { @@ -237,6 +242,12 @@ export async function set_instance(game: Game) { game_instance = new GameInstance(game, meshes.slice(1), meshes[0]); } +SLIDER.oninput = function() { + if (game_instance) { + game_instance.updateTurn(parseInt(SLIDER.value)); + } +} + function step(time: number) { if (game_instance) { diff --git a/frontend/www/static/res/style.css b/frontend/www/static/res/style.css index 5fb138b..41888a8 100644 --- a/frontend/www/static/res/style.css +++ b/frontend/www/static/res/style.css @@ -59,3 +59,48 @@ body { transform: translate(-50%, -150%); } } + + +/** + * ---------------------------------------- + * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp + * ---------------------------------------- + */ + .slidecontainer { + width: 100%; /* Width of the outside container */ +} + +/* The slider itself */ +.slider { + -webkit-appearance: none; /* Override default CSS styles */ + appearance: none; + width: 100%; /* Full-width */ + height: 25px; /* Specified height */ + background: #d3d3d3; /* Grey background */ + outline: none; /* Remove outline */ + opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ + -webkit-transition: .2s; /* 0.2 seconds transition on hover */ + transition: opacity .2s; +} + +/* Mouse-over effects */ +.slider:hover { + opacity: 1; /* Fully shown on mouse-over */ +} + +/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ +.slider::-webkit-slider-thumb { + -webkit-appearance: none; /* Override default look */ + appearance: none; + width: 25px; /* Set a specific slider handle width */ + height: 25px; /* Slider handle height */ + background: #4CAF50; /* Green background */ + cursor: pointer; /* Cursor on hover */ +} + +.slider::-moz-range-thumb { + width: 25px; /* Set a specific slider handle width */ + height: 25px; /* Slider handle height */ + background: #4CAF50; /* Green background */ + cursor: pointer; /* Cursor on hover */ +}