158 lines
4.1 KiB
HTML
158 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<header>
|
||
|
|
<title>Rounds Names</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
|
|
background-color: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
#progressbar {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
height: 1px;
|
||
|
|
background-color: darkgrey;
|
||
|
|
width: 0%;
|
||
|
|
transition-duration: 1s;
|
||
|
|
transition-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
border-collapse: collapse;
|
||
|
|
border: 0;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 10vh;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
td {
|
||
|
|
padding-left: 10px;
|
||
|
|
padding-right: 10px;
|
||
|
|
width: 25%;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
transition-duration: 1s;
|
||
|
|
transition-timing-function: linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr {
|
||
|
|
transition-duration: 1s;
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody>* {
|
||
|
|
font-size: larger;
|
||
|
|
transition-duration: 1s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dino {
|
||
|
|
color: greenyellow;
|
||
|
|
}
|
||
|
|
|
||
|
|
.jan {
|
||
|
|
color: orange;
|
||
|
|
}
|
||
|
|
|
||
|
|
.koli {
|
||
|
|
color: violet;
|
||
|
|
}
|
||
|
|
|
||
|
|
.max {
|
||
|
|
color: orangered;
|
||
|
|
}
|
||
|
|
|
||
|
|
.current {
|
||
|
|
font-weight: bolder;
|
||
|
|
font-size: xx-large;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="progressbar"></div>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<td class="dino">Dino</td>
|
||
|
|
<td class="jan">Jan</td>
|
||
|
|
<td class="koli">Koli</td>
|
||
|
|
<td class="max">Max</td>
|
||
|
|
</thead>
|
||
|
|
<tbody id="names">
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<script>
|
||
|
|
const names = [
|
||
|
|
"Aaron",
|
||
|
|
"Jan",
|
||
|
|
"Max",
|
||
|
|
"Niklas",
|
||
|
|
"Marcel",
|
||
|
|
"Gustav",
|
||
|
|
"Thaddeus",
|
||
|
|
"Julian",
|
||
|
|
"Rosalie"
|
||
|
|
].sort();
|
||
|
|
|
||
|
|
const personOrder = [
|
||
|
|
"dino",
|
||
|
|
"jan",
|
||
|
|
"koli",
|
||
|
|
"max"
|
||
|
|
];
|
||
|
|
|
||
|
|
const changeNamesEveryXSeconds = 69;
|
||
|
|
|
||
|
|
function getCurrentTimeSlot() {
|
||
|
|
let timestamp = new Date().getTime() / 1000 / changeNamesEveryXSeconds;
|
||
|
|
return Math.floor(timestamp);
|
||
|
|
}
|
||
|
|
|
||
|
|
function getProgress() {
|
||
|
|
let timestamp = new Date().getTime() / 1000 / changeNamesEveryXSeconds;
|
||
|
|
return timestamp - Math.floor(timestamp);
|
||
|
|
}
|
||
|
|
|
||
|
|
function getNamesForTimeSlot(time) {
|
||
|
|
const index = time % names.length;
|
||
|
|
|
||
|
|
let pickedNames = [];
|
||
|
|
for (let i = 0; i < personOrder.length; i++) {
|
||
|
|
pickedNames.push(names[(i + index + names.length) % names.length]);
|
||
|
|
}
|
||
|
|
|
||
|
|
return pickedNames;
|
||
|
|
}
|
||
|
|
|
||
|
|
function addTimeSlotRow(time) {
|
||
|
|
const namesForTime = getNamesForTimeSlot(time);
|
||
|
|
document.getElementById("names").innerHTML += "<tr id=\"" + time + "\"><td class=\"" + personOrder[0] + "\">" + namesForTime[0] + "</td><td class=\"" + personOrder[1] + "\">" + namesForTime[1] + "</td><td class=\"" + personOrder[2] + "\">" + namesForTime[2] + "</td><td class=\"" + personOrder[3] + "\">" + namesForTime[3] + "</td></tr>";
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeTimeSlotRow(time) {
|
||
|
|
document.getElementById(time).remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateFunction() {
|
||
|
|
document.getElementById("progressbar").style.width = getProgress() * 100 + "%";
|
||
|
|
|
||
|
|
const currentTimeSlot = getCurrentTimeSlot();
|
||
|
|
if (latestUpdateTimeSlot == currentTimeSlot) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
latestUpdateTimeSlot = currentTimeSlot;
|
||
|
|
document.getElementById(latestUpdateTimeSlot).classList += "current";
|
||
|
|
removeTimeSlotRow(latestUpdateTimeSlot - 1);
|
||
|
|
addTimeSlotRow(latestUpdateTimeSlot + 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
let latestUpdateTimeSlot = getCurrentTimeSlot();
|
||
|
|
addTimeSlotRow(latestUpdateTimeSlot);
|
||
|
|
addTimeSlotRow(latestUpdateTimeSlot + 1);
|
||
|
|
setInterval(updateFunction, 1000);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|