running state / alpha
This commit is contained in:
Frank Schwenk
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.idea
|
||||
BIN
12ball.png
Normal file
BIN
12ball.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
151
index.html
Normal file
151
index.html
Normal file
@@ -0,0 +1,151 @@
|
||||
<html>
|
||||
<head>
|
||||
<link href="http://fonts.cdnfonts.com/css/seven-segment" rel="stylesheet">
|
||||
<link href="http://fonts.cdnfonts.com/css/profession" rel="stylesheet">
|
||||
|
||||
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
|
||||
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
|
||||
referrerpolicy="no-referrer" rel="stylesheet"/>
|
||||
|
||||
<link href="shotclock.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="main invisible" id="main">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="3">Shotclock</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="player">
|
||||
<table class="player">
|
||||
<tr class="player-name active">
|
||||
<td id="player1-name">Player 1</td>
|
||||
</tr>
|
||||
<tr class="player-score">
|
||||
<td class="player-score" id="player-score-1">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="player-extension">Extension</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td class="display">
|
||||
<table class="display">
|
||||
<tr class="display-race">
|
||||
<td class="display-break active" id="display-break1"> </td>
|
||||
<td>Race to <span id="display-race">9</span></td>
|
||||
<td class="display-break" id="display-break2"> </td>
|
||||
</tr>
|
||||
<tr class="display-time">
|
||||
<td colspan="3" id="display-time">30</td>
|
||||
</tr>
|
||||
<tr class="display-bar">
|
||||
<td colspan="3" id="display-bar"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td class="player">
|
||||
<table class="player">
|
||||
<tr class="player-name">
|
||||
<td id="player2-name">Player 2</td>
|
||||
</tr>
|
||||
<tr class="player-score">
|
||||
<td class="player-score" id="player-score-2">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="player-extension">Extension</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tfoot>
|
||||
<tr class="controls">
|
||||
<td id="controls-play"><i class="fa-solid fa-play"></i></td>
|
||||
<td id="controls-switch"><i class="fa-solid fa-arrows-rotate"></i></td>
|
||||
<td id="controls-settings"><i class="fa-solid fa-gear"></i></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
</table>
|
||||
|
||||
<table class="modal invisible" id="settings">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Settings</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr class="settings-inputs">
|
||||
<td><label for="settings-time">Time</label></td>
|
||||
<td><input id="settings-time" type="number"></td>
|
||||
</tr>
|
||||
<tr class="settings-inputs">
|
||||
<td><label for="settings-race">Race to</label></td>
|
||||
<td><input id="settings-race" type="number"></td>
|
||||
</tr>
|
||||
<tr class="settings-inputs">
|
||||
<td><label for="settings-alternate">Alternate break</label></td>
|
||||
<td><input id="settings-alternate" type="checkbox"></td>
|
||||
</tr>
|
||||
<tr class="settings-inputs">
|
||||
<td><label for="settings-reset">Reset</label></td>
|
||||
<td><button id="settings-reset"><i class="fa-solid fa-clock-rotate-left"></i></button></td>
|
||||
</tr>
|
||||
<tr class="settings-fullscreen">
|
||||
<td><label for="settings-fullscreen">Recover Fullscreen</label></td>
|
||||
<td><button id="settings-fullscreen"><i class="fa-solid fa-up-right-and-down-left-from-center"></i></button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tfoot>
|
||||
<tr class="controls">
|
||||
<td id="settings-cancel"><i class="fa-solid fa-xmark"></i></td>
|
||||
<td id="settings-save"><i class="fa-solid fa-save"></i></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
<table class="modal" id="welcome">
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Welcome</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr class="welcome-text">
|
||||
<td>
|
||||
<h4>Todo:</h4>
|
||||
<ul>
|
||||
<li>Play pool.</li>
|
||||
<li>Have fun.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="welcome-confirm"><img src="12ball.png"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tfoot>
|
||||
<tr class="controls">
|
||||
<td> </td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
</table>
|
||||
<script src="shotclock.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
101
shotclock.css
Normal file
101
shotclock.css
Normal file
@@ -0,0 +1,101 @@
|
||||
body {
|
||||
background-color: black;
|
||||
color: #f12f12;
|
||||
margin: 0;
|
||||
font-family: 'Profession', sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
button {
|
||||
width: 10vw;
|
||||
height: 10vh;
|
||||
background-color: black;
|
||||
color: #f12f12;
|
||||
border: 1px solid #f12f12;
|
||||
border-radius: 25px;
|
||||
font-size: 5vh;
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
width: 30vw;
|
||||
height: 10vh;
|
||||
background-color: black;
|
||||
color: #f12f12;
|
||||
border: 1px solid #f12f12;
|
||||
border-radius: 25px;
|
||||
font-size: 10vh;
|
||||
text-align: center;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
td {
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
font-size: 5vh;
|
||||
}
|
||||
ul li {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
tr.player-score {
|
||||
height: 50%;
|
||||
}
|
||||
td.player-score {
|
||||
font-size: 30vh;
|
||||
font-family: 'Seven segment', sans-serif;
|
||||
}
|
||||
td.player-extension {
|
||||
background-color: #00f120;
|
||||
border-radius: 25px;
|
||||
}
|
||||
td.player-extension.inactive {
|
||||
background-color: #f12f12;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
td.display {
|
||||
width: 60%;
|
||||
}
|
||||
tr.display-time {
|
||||
height: 80%;
|
||||
}
|
||||
#display-time {
|
||||
font-size: 50vh;
|
||||
font-family: 'Seven segment', sans-serif;
|
||||
}
|
||||
#display-bar {
|
||||
border-radius: 25px;
|
||||
background: linear-gradient(90deg, rgba(0,0,0,1) -200%, rgba(255,0,0,1) -200%, rgba(0,241,32,1) 100%);
|
||||
}
|
||||
|
||||
.controls {
|
||||
height: 20%;
|
||||
}
|
||||
.controls td {
|
||||
padding: 2vh;
|
||||
font-size: 20vh;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: none !important;
|
||||
}
|
||||
.settings-inputs td {
|
||||
width: 50%;
|
||||
}
|
||||
#welcome-confirm img {
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
.player-name td {
|
||||
border: 1vh solid transparent;
|
||||
}
|
||||
.player-name.active td{
|
||||
border: 1vh solid #f12f12;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.display-break.active{
|
||||
background-image: url("12ball.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
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