First version of names

2024-02-24 01:14:18 +01:00 · 2024-02-24 01:14:18 +01:00 · a72193e91c
commit a72193e91c
parent bf8ce0f5b7
1 changed files with 158 additions and 0 deletions
--- a/g/names.html
+++ b/g/names.html
@ -0,0 +1,158 @@
+<!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>