running state / alpha
This commit is contained in:
Frank Schwenk
332
shotclock.js
Normal file
332
shotclock.js
Normal file
@@ -0,0 +1,332 @@
|
||||
let startTime = 30;
|
||||
let timer = 30;
|
||||
let race = 9;
|
||||
let breakPlayer = 1;
|
||||
let alternateBreak = false;
|
||||
let cookies;
|
||||
var audioCtx;
|
||||
let interval;
|
||||
|
||||
// Helpers
|
||||
const parseCookie = str =>
|
||||
str
|
||||
.split(';')
|
||||
.map(v => v.split('='))
|
||||
.reduce((acc, v) => {
|
||||
acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim());
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
//duration of the tone in milliseconds. Default is 500
|
||||
//frequency of the tone in hertz. default is 440
|
||||
//volume of the tone. Default is 1, off is 0.
|
||||
//type of tone. Possible values are sine, square, sawtooth, triangle, and custom. Default is sine.
|
||||
//callback to use on end of tone
|
||||
function beep(duration, frequency, volume, type, callback) {
|
||||
if (!audioCtx) {
|
||||
audioCtx = new (window.AudioContext || window.webkitAudioContext || window.audioContext);
|
||||
}
|
||||
var oscillator = audioCtx.createOscillator();
|
||||
var gainNode = audioCtx.createGain();
|
||||
|
||||
oscillator.connect(gainNode);
|
||||
gainNode.connect(audioCtx.destination);
|
||||
|
||||
if (volume) {
|
||||
gainNode.gain.value = volume;
|
||||
}
|
||||
if (frequency) {
|
||||
oscillator.frequency.value = frequency;
|
||||
}
|
||||
if (type) {
|
||||
oscillator.type = type;
|
||||
}
|
||||
if (callback) {
|
||||
oscillator.onended = callback;
|
||||
}
|
||||
|
||||
oscillator.start(audioCtx.currentTime);
|
||||
oscillator.stop(audioCtx.currentTime + ((duration || 500) / 1000));
|
||||
};
|
||||
|
||||
function onLongPress(element, callback) {
|
||||
let timer;
|
||||
|
||||
element.addEventListener('touchstart', () => {
|
||||
timer = setTimeout(() => {
|
||||
timer = null;
|
||||
callback();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
function cancel() {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
|
||||
element.addEventListener('touchend', cancel);
|
||||
element.addEventListener('touchmove', cancel);
|
||||
}
|
||||
|
||||
// init
|
||||
document.body.oncontextmenu = function () {
|
||||
return false;
|
||||
}; // i know this is useless. it was just distracting me ;)
|
||||
|
||||
if (document.cookie.length > 0) {
|
||||
cookies = parseCookie(document.cookie);
|
||||
startTime = cookies['time'];
|
||||
updateTimer(cookies['time']);
|
||||
updateRace(cookies['race']);
|
||||
} else {
|
||||
updateTimer(startTime);
|
||||
updateRace(race);
|
||||
}
|
||||
|
||||
// Player
|
||||
function setPlayername() {
|
||||
var name = prompt('Enter name:', this.innerText)
|
||||
this.innerText = name ? name : this.innerText;
|
||||
document.body.requestFullscreen();
|
||||
}
|
||||
|
||||
document.querySelectorAll('.player-name td').forEach(element => element.addEventListener('click', setPlayername));
|
||||
document.querySelectorAll('.player-name td').forEach(function (element) {
|
||||
onLongPress(element, () => document.querySelectorAll('.player-name').forEach(element => element.classList.toggle('active')));
|
||||
});
|
||||
|
||||
function playerScoreIncrease() {
|
||||
if (interval) {
|
||||
toggleTimer();
|
||||
}
|
||||
timer = startTime*2;
|
||||
setTimer(timer);
|
||||
this.innerText = Number.parseInt(this.innerText) + 1;
|
||||
var wonPlayer = this.id == 'player-score-1' ? 1 : 2;
|
||||
if (alternateBreak || wonPlayer != breakPlayer) {
|
||||
toggleDisplayBreakActive();
|
||||
document.querySelectorAll('.player-name').forEach(element => element.classList.toggle('active'));
|
||||
breakPlayer = wonPlayer
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('td.player-score').forEach(element => element.addEventListener('click', playerScoreIncrease));
|
||||
|
||||
function setPlayerScore(element) {
|
||||
var score = prompt('Enter current score:', element.innerText)
|
||||
element.innerText = score ? score : element.innerText;
|
||||
document.body.requestFullscreen();
|
||||
}
|
||||
|
||||
document.querySelectorAll('td.player-score').forEach(function (element) {
|
||||
onLongPress(element, () => setPlayerScore(element));
|
||||
breakPlayer = breakPlayer == 1 ? 2 : 1;
|
||||
});
|
||||
|
||||
function playerExtension() {
|
||||
timer = Number.parseInt(timer) + Number.parseInt(startTime);
|
||||
setTimer(timer);
|
||||
this.classList.add('inactive');
|
||||
}
|
||||
|
||||
document.querySelectorAll('.player-extension').forEach(element => element.addEventListener('click', playerExtension));
|
||||
document.querySelectorAll('.player-extension').forEach(function (element) {
|
||||
onLongPress(element, () => element.classList.toggle('inactive'));
|
||||
});
|
||||
|
||||
function toggleDisplayBreakActive() {
|
||||
document.querySelectorAll('.display-break').forEach(element => element.classList.toggle('active'));
|
||||
}
|
||||
|
||||
document.querySelectorAll('.display-break').forEach(function (element) {
|
||||
onLongPress(element, () => toggleDisplayBreakActive());
|
||||
});
|
||||
|
||||
function setTimerDisplay(element) {
|
||||
console.log(element);
|
||||
if (interval) {
|
||||
toggleTimer();
|
||||
}
|
||||
var newTimer = prompt('Enter current time:', element.innerText)
|
||||
element.innerText = newTimer ? newTimer : element.innerText;
|
||||
timer = newTimer ? newTimer : timer;
|
||||
}
|
||||
var element = document.getElementById('display-time');
|
||||
onLongPress(element, () => setTimerDisplay(element));
|
||||
|
||||
// settings
|
||||
function reset() {
|
||||
document.querySelectorAll('td.player-score').forEach(function (element) {
|
||||
onLongPress(element, () => setPlayerScore(element));
|
||||
breakPlayer = breakPlayer == 1 ? 2 : 1;
|
||||
});
|
||||
if (interval) {
|
||||
toggleTimer();
|
||||
}
|
||||
resetTimer();
|
||||
document.querySelectorAll('.player-score td').forEach(element => element.innerText = 0);
|
||||
document.querySelectorAll('.player-extension').forEach(element => element.classList.remove('inactive'));
|
||||
document.body.requestFullscreen();
|
||||
screen.orientation.lock('landscape');
|
||||
toggleSettings();
|
||||
}
|
||||
|
||||
document.getElementById('settings-reset').addEventListener('click', reset);
|
||||
|
||||
function setFullscreen() {
|
||||
document.body.requestFullscreen();
|
||||
screen.orientation.lock('landscape');
|
||||
}
|
||||
|
||||
document.getElementById('settings-fullscreen').addEventListener('click', setFullscreen);
|
||||
|
||||
function toggleSettings() {
|
||||
document.getElementById('main').classList.toggle('invisible');
|
||||
document.getElementById('settings').classList.toggle('invisible');
|
||||
document.getElementById('settings-time').value = startTime;
|
||||
}
|
||||
|
||||
document.getElementById('controls-settings').addEventListener('click', toggleSettings);
|
||||
document.getElementById('settings-cancel').addEventListener('click', toggleSettings);
|
||||
|
||||
function saveSettings() {
|
||||
var inputtime = document.getElementById('settings-time').value;
|
||||
if (isNaN(inputtime) || inputtime <= 0) {
|
||||
alert("Must input numbers");
|
||||
return false;
|
||||
}
|
||||
startTime = Math.floor(inputtime)
|
||||
document.cookie = "time=" + startTime;
|
||||
updateTimer(startTime);
|
||||
updateRace(document.getElementById('settings-race').value);
|
||||
alternateBreak = document.getElementById('settings-alternate').checked;
|
||||
toggleSettings();
|
||||
}
|
||||
|
||||
document.getElementById('settings-save').addEventListener('click', saveSettings);
|
||||
|
||||
function updateTimer(newTime) {
|
||||
timer = startTime;
|
||||
document.getElementById('display-time').innerText = newTime;
|
||||
}
|
||||
|
||||
function updateRace(newRace) {
|
||||
race = newRace;
|
||||
document.getElementById('display-race').innerText = newRace;
|
||||
document.getElementById('settings-race').value = newRace;
|
||||
document.cookie = "race=" + newRace;
|
||||
}
|
||||
|
||||
function toggleWelcome() {
|
||||
document.getElementById('main').classList.toggle('invisible');
|
||||
document.getElementById('welcome').classList.toggle('invisible');
|
||||
document.body.requestFullscreen();
|
||||
screen.orientation.lock('landscape');
|
||||
}
|
||||
|
||||
document.getElementById('welcome-confirm').addEventListener('click', toggleWelcome);
|
||||
|
||||
function runTimer() {
|
||||
if (timer < 0) {
|
||||
toggleTimer();
|
||||
return;
|
||||
}
|
||||
setTimer(timer);
|
||||
timer--;
|
||||
|
||||
if (timer < 0) {
|
||||
|
||||
beep(1000, 1212);
|
||||
toggleTimer();
|
||||
return;
|
||||
}
|
||||
|
||||
if (timer < 5) {
|
||||
beep(100, 606);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function setTimer(targetTime) {
|
||||
document.getElementById('display-time').innerText = targetTime;
|
||||
var timerPercentage = Math.ceil(100 - (targetTime / startTime) * 300);
|
||||
document.getElementById('display-bar').style.background = "linear-gradient(90deg, rgba(0,0,0,1) -200%, rgba(255,0,0,1) " + timerPercentage + "%, rgba(0,241,32,1) 100%)";
|
||||
}
|
||||
|
||||
function toggleTimer() {
|
||||
if (timer == 0) {
|
||||
return;
|
||||
}
|
||||
if (!interval) {
|
||||
interval = setInterval(runTimer, 1000);
|
||||
runTimer();
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
interval = null;
|
||||
}
|
||||
document.querySelector('#controls-play i').classList.toggle('fa-play');
|
||||
document.querySelector('#controls-play i').classList.toggle('fa-pause');
|
||||
}
|
||||
|
||||
document.getElementById('controls-play').addEventListener('click', toggleTimer);
|
||||
|
||||
function resetTimer() {
|
||||
timer = startTime;
|
||||
setTimer(timer);
|
||||
}
|
||||
|
||||
document.getElementById('display-time').addEventListener('click', resetTimer);
|
||||
|
||||
function switchPlayer() {
|
||||
resetTimer();
|
||||
document.querySelectorAll('.player-name').forEach(element => element.classList.toggle('active'));
|
||||
if (!interval) {
|
||||
toggleTimer();
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('controls-switch').addEventListener('click', switchPlayer);
|
||||
|
||||
/*
|
||||
var element = document.getElementById('controls-switch');
|
||||
onLongPress(element, () => {
|
||||
console.log('Long pressed', element);
|
||||
});
|
||||
|
||||
function Sleep(milliseconds) {
|
||||
return new Promise(resolve => setTimeout(resolve, milliseconds));
|
||||
}
|
||||
|
||||
async function beep2(frequency = 440, type = 'sawtooth', volume, callback) {
|
||||
if (!audioCtx) {
|
||||
audioCtx = new (window.AudioContext || window.webkitAudioContext || window.audioContext);
|
||||
}
|
||||
var oscillator = audioCtx.createOscillator();
|
||||
var gainNode = audioCtx.createGain();
|
||||
|
||||
oscillator.connect(gainNode);
|
||||
gainNode.connect(audioCtx.destination);
|
||||
|
||||
if (volume) {
|
||||
gainNode.gain.value = volume;
|
||||
}
|
||||
if (frequency) {
|
||||
oscillator.frequency.value = frequency;
|
||||
}
|
||||
if (type) {
|
||||
oscillator.type = type;
|
||||
}
|
||||
if (callback) {
|
||||
oscillator.onended = callback;
|
||||
}
|
||||
|
||||
|
||||
oscillator.start(audioCtx.currentTime);
|
||||
while (true) {
|
||||
|
||||
oscillator.frequency.setValueAtTime(Math.floor(Math.random() * 1000), audioCtx.currentTime);
|
||||
await Sleep(Math.floor(Math.random() * 100));
|
||||
}
|
||||
};
|
||||
element = document.getElementById('controls-settings');
|
||||
onLongPress(element, beep2);
|
||||
*/
|
||||
Reference in New Issue
Block a user