add turn slider

This commit is contained in:
ajuvercr 2019-09-21 10:43:03 +02:00
parent a744a17695
commit c9c2f4a9e7
3 changed files with 63 additions and 3 deletions

View file

@ -10,6 +10,10 @@
<canvas id="c" width=1700 height=900></canvas> <canvas id="c" width=1700 height=900></canvas>
</div> </div>
<div class="slidecontainer">
<input type="range" min="0" max="1" value="1" class="slider" id="turnSlider">
</div>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript> <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
<script src="./bootstrap.js"></script> <script src="./bootstrap.js"></script>
</body> </body>

View file

@ -18,6 +18,8 @@ function i32v(ptr: number, size: number): Int32Array {
const COUNTER = new FPSCounter(); const COUNTER = new FPSCounter();
const LOADER = document.getElementById("loader"); const LOADER = document.getElementById("loader");
const SLIDER = <HTMLInputElement>document.getElementById("turnSlider");
function set_loading(loading: boolean) { function set_loading(loading: boolean) {
if (loading) { if (loading) {
if (!LOADER.classList.contains("loading")) { if (!LOADER.classList.contains("loading")) {
@ -123,6 +125,9 @@ class GameInstance {
) )
); );
} }
// Set slider correctly
SLIDER.max = this.game.turn_count() - 1 + '';
} }
_update_state() { _update_state() {
@ -197,13 +202,13 @@ class GameInstance {
this.playing = false; this.playing = false;
} else { } else {
this._update_state(); this._update_state();
this.playing = true;
} }
SLIDER.value = this.frame + '';
} }
handleKey(event: KeyboardEvent) { handleKey(event: KeyboardEvent) {
console.log(event.keyCode);
console.log(event.key);
// Space // Space
if (event.keyCode == 32) { if (event.keyCode == 32) {
if (this.playing) { if (this.playing) {
@ -237,6 +242,12 @@ export async function set_instance(game: Game) {
game_instance = new GameInstance(game, meshes.slice(1), meshes[0]); 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) { function step(time: number) {
if (game_instance) { if (game_instance) {

View file

@ -59,3 +59,48 @@ body {
transform: translate(-50%, -150%); 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 */
}