123 lines
3.8 KiB
JavaScript
123 lines
3.8 KiB
JavaScript
const height = 100;
|
|
|
|
class Panel {
|
|
constructor() {
|
|
this.element = document.createElement("div");
|
|
this.element.classList.add("panel")
|
|
this.element.style.height = height + "px";
|
|
|
|
this._createLeftPanel();
|
|
this._createRightPanel();
|
|
this._createCentralPanel();
|
|
|
|
this._shuffle = null;
|
|
|
|
this._time = null;
|
|
|
|
this._updateInterval = setInterval(this._update.bind(this), 53);
|
|
}
|
|
destructor() {
|
|
this.element.remove();
|
|
}
|
|
append(element) {
|
|
element.style.position = "relative";
|
|
element.style.paddingTop = height + "px";
|
|
element.appendChild(this.element);
|
|
}
|
|
installShuffle(func) {
|
|
this._shuffle = func;
|
|
}
|
|
startTimer() {
|
|
this._time = Date.now();
|
|
}
|
|
_createLeftPanel() {
|
|
this._leftPanel = document.createElement("div");
|
|
this._leftPanel.style.position = "absolute";
|
|
this._leftPanel.style.top = "0";
|
|
this._leftPanel.style.left = "0";
|
|
|
|
this._shuffleButton = document.createElement("div");
|
|
this._shuffleButton.classList.add("button");
|
|
this._shuffleButton.style.backgroundImage = "url(icons/refresh.svg)";
|
|
this._shuffleButton.style.height = height + "px";
|
|
this._shuffleButton.style.width = height + "px";
|
|
this._shuffleButton.style.position = "absolute";
|
|
this._shuffleButton.style.top = "0";
|
|
this._shuffleButton.style.left = "0";
|
|
this._shuffleButton.title = "Shuffle";
|
|
this._shuffleButton.addEventListener("click", this._onShuffle.bind(this));
|
|
|
|
this._leftPanel.appendChild(this._shuffleButton);
|
|
|
|
this.element.style.paddingLeft = height + "px";
|
|
this.element.appendChild(this._leftPanel);
|
|
}
|
|
_createRightPanel() {
|
|
this._rightPanel = document.createElement("div");
|
|
this._rightPanel.style.position = "absolute";
|
|
this._rightPanel.style.top = "0";
|
|
this._rightPanel.style.right = "0";
|
|
this.element.appendChild(this._rightPanel);
|
|
}
|
|
_createCentralPanel() {
|
|
this._centralPanel = document.createElement("div");
|
|
this._centralPanel.classList.add("fs", "cp");
|
|
this._centralPanel.style.display = "flex";
|
|
this._centralPanel.style.alignItems = "center";
|
|
this._centralPanel.style.justifyContent = "center";
|
|
|
|
this._ms = document.createElement("span");
|
|
this._mds = document.createElement("span");
|
|
this._ss = document.createElement("span");
|
|
this._sdmin = document.createElement("span");
|
|
this._mins = document.createElement("span");
|
|
|
|
this._ms.innerText = "000";
|
|
this._mds.innerText = ":";
|
|
this._ss.innerText = "00";
|
|
this._sdmin.innerText = ":";
|
|
this._mins.innerText = "00";
|
|
|
|
this._centralPanel.appendChild(this._mins);
|
|
this._centralPanel.appendChild(this._sdmin);
|
|
this._centralPanel.appendChild(this._ss);
|
|
this._centralPanel.appendChild(this._mds);
|
|
this._centralPanel.appendChild(this._ms);
|
|
|
|
this.element.appendChild(this._centralPanel);
|
|
}
|
|
_update() {
|
|
if (this._time !== null) {
|
|
let time = Date.now() - this._time;
|
|
let minutes = Math.floor(time / (1000 * 60));
|
|
time = time % (1000 * 60);
|
|
let seconds = Math.floor(time / 1000);
|
|
time = time % 1000;
|
|
|
|
this._mins.innerText = pad(minutes, 2);
|
|
this._ss.innerText = pad(seconds, 2);
|
|
this._ms.innerText = pad(time, 3);
|
|
}
|
|
}
|
|
_onShuffle() {
|
|
if (this._shuffle !== null) {
|
|
this._shuffle();
|
|
}
|
|
}
|
|
}
|
|
|
|
function pad (num, amount) {
|
|
let p = pads[amount];
|
|
let sNum = num.toString();
|
|
let pref = p[sNum.length];
|
|
return pref + sNum;
|
|
}
|
|
|
|
const pads = [
|
|
[""],
|
|
["0", ""],
|
|
["00", "0", ""],
|
|
["000", "00", "0", ""]
|
|
]
|
|
|
|
export default Panel; |