88 lines
2.2 KiB
JavaScript
88 lines
2.2 KiB
JavaScript
import {TOOL_INFO_CLASSNAME, WIDE_CLASSNAME} from '../config.js';
|
|
import {Tool} from '../tool.js';
|
|
|
|
export class PlayPause extends Tool {
|
|
playHTML = 'Play';
|
|
pauseHTML = 'Pause';
|
|
currentTimeEl = undefined;
|
|
|
|
get timeText() {
|
|
let time = this.sim.time;
|
|
// Time in seconds
|
|
const s = time % 60;
|
|
time = (time - s) / 60;
|
|
const m = time % 60;
|
|
time = (time - m) / 60;
|
|
const h = time % 24;
|
|
time = (time - h) / 24;
|
|
const d = time;
|
|
time -= m * 60;
|
|
|
|
const ms = (s - Math.floor(s)) * 1000;
|
|
return [
|
|
d || undefined,
|
|
h.toString().padStart(2, '0'),
|
|
m.toString().padStart(2, '0'),
|
|
[
|
|
s.toFixed(0).padStart(2, '0'),
|
|
ms.toFixed(0).padStart(3, '0'),
|
|
].join('.')
|
|
].filter(x => x !== undefined).join(':');
|
|
}
|
|
|
|
frame() {
|
|
if (this.currentTimeEl) {
|
|
this.currentTimeEl.innerHTML = this.timeText;
|
|
}
|
|
}
|
|
|
|
constructor(toolbar) {
|
|
super(toolbar);
|
|
|
|
const currentTime = document.createElement('button');
|
|
const pauseButton = document.createElement('button');
|
|
const playButton = document.createElement('button');
|
|
this.currentTimeEl = currentTime;
|
|
|
|
this.div.appendChild(currentTime);
|
|
this.div.appendChild(pauseButton);
|
|
this.div.appendChild(playButton);
|
|
|
|
currentTime.classList.add(TOOL_INFO_CLASSNAME);
|
|
currentTime.classList.add(WIDE_CLASSNAME);
|
|
|
|
pauseButton.innerHTML = this.pauseHTML;
|
|
playButton.innerHTML = this.playHTML;
|
|
currentTime.innerHTML = this.timeText;
|
|
|
|
pauseButton.style.opacity = this.sim.playing ? '100%' : '50%';
|
|
playButton.style.opacity = this.sim.playing ? '50%' : '100%';
|
|
|
|
pauseButton.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
this.sim.pointer.panning = undefined;
|
|
if (this.playing) {
|
|
this.playing = false;
|
|
pauseButton.style.opacity = '50%';
|
|
playButton.style.opacity = '100%';
|
|
}
|
|
});
|
|
|
|
playButton.addEventListener('click', () => {
|
|
if (!this.playing) {
|
|
this.playing = true;
|
|
pauseButton.style.opacity = '100%';
|
|
playButton.style.opacity = '50%';
|
|
}
|
|
});
|
|
}
|
|
|
|
get playing() {
|
|
return this.sim.playing;
|
|
}
|
|
|
|
set playing(playing) {
|
|
this.sim.playing = playing;
|
|
}
|
|
}
|