From beedf1327c7ae29d61a614bbaca3fa54bc4a6136 Mon Sep 17 00:00:00 2001
From: hcr5 <157815647+hcr5@users.noreply.github.com>
Date: Sat, 17 Aug 2024 20:20:42 +0200
Subject: [PATCH] Update pierre.html

---
 pierre.html | 173 +++++++++++++++++++---------------------------------
 1 file changed, 62 insertions(+), 111 deletions(-)

diff --git a/pierre.html b/pierre.html
index 378a841..283323e 100644
--- a/pierre.html
+++ b/pierre.html
@@ -11,10 +11,9 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            font-family: 'Arial', sans-serif;
+            font-family: Arial, sans-serif;
             background-color: #ffffff;
         }
-
         .container {
             max-width: 600px;
             width: 100%;
@@ -23,27 +22,22 @@
             border: 3px solid #4682b4;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
             text-align: center;
-            position: relative;
             overflow: hidden;
         }
-
         p {
             font-size: 18px;
             color: #333;
             margin: 10px 0;
         }
-
         input[type="number"] {
             font-size: 16px;
             padding: 8px;
             border: 2px solid #4682b4;
             transition: transform 0.2s ease;
         }
-
         input[type="number"]:focus {
             transform: scale(1.05) rotate(2deg);
         }
-
         button {
             font-size: 20px;
             padding: 10px 20px;
@@ -52,49 +46,27 @@
             border: 2px solid #228b22;
             cursor: pointer;
             transition: background-color 0.3s ease, transform 0.2s ease;
-            animation: shake 0.5s infinite;
         }
-
         button:hover {
             background-color: #228b22;
         }
-
         button:active {
             transform: scale(0.95);
         }
-
         h1 {
             font-size: 48px;
             color: #ff4500;
             margin-top: 20px;
             animation: jitter 1s infinite;
         }
-
         hr {
             border: 2px solid #4682b4;
             width: 70%;
             margin: 20px auto;
         }
-
-        @keyframes shake {
-            0%, 100% {
-                transform: rotate(-2deg);
-            }
-            50% {
-                transform: rotate(2deg);
-            }
-        }
-
         @keyframes jitter {
-            0% {
-                transform: translateX(-2px);
-            }
-            50% {
-                transform: translateX(2px);
-            }
-            100% {
-                transform: translateX(-2px);
-            }
+            0%, 100% { transform: translateX(-2px); }
+            50% { transform: translateX(2px); }
         }
     </style>
 </head>
@@ -110,106 +82,55 @@
         </form>
         <hr>
         <button onclick="daargaanwe()">Start!</button>
+        <button onclick="stopTimer()">Stop</button>
         <h1 id="klok"></h1>
-        <audio hidden id="tik" src="tick.mp3"></audio>
+        <p id="count">Training 0/0</p>
         <audio hidden id="win" src="win.mp3"></audio>
         <script>
+            let timer;
+            let stopRequested = false;
+
             const aanmoedigingen = [
-                "jullie kunnen het",
-                "ik geloof in je",
-                "nog even!",
-                "denk aan iets leuks!",
-                "houd vol!",
-                "je bent bijna daar!",
-                "je doet het geweldig!",
-                "blijf doorgaan!",
-                "je bent sterk!",
-                "je hebt dit!",
-                "je hebt het in je!",
-                "je kunt het aan!",
-                "ik ben trots op je!",
-                "blijf positief!",
-                "je bent bijna bij je doel!",
-                "je hebt al veel bereikt!",
-                "je kunt het voor elkaar krijgen!",
-                "zet door!",
-                "je bent een winnaar!",
-                "je bent op de goede weg!",
-                "houd je focus!",
-                "je doet je best!",
-                "je kunt dit aan!",
-                "ik sta achter je!",
-                "je bent fantastisch!",
-                "je verdient dit!",
-                "je kunt meer dan je denkt!",
-                "je hebt de kracht!",
-                "je maakt vooruitgang!",
-                "je bent een doorzetter!",
-                "je hebt dit onder controle!",
-                "je bent onvermoeibaar!",
-                "je bent een inspiratie!",
-                "je doet het prima!",
-                "je hebt een geweldige houding!",
-                "je bent op de goede weg!",
-                "je gaat het halen!",
-                "je bent een topper!",
-                "je hebt alles wat je nodig hebt!",
-                "je bent echt geweldig!",
-                "je blijft indrukwekkend!",
-                "je bent bijna bij het eind!",
-                "je kunt het!",
-                "ik geloof in je talent!",
-                "je bent een toffe gozer!",
-                "smook veep",
-                "poep konsump",
-                "wie geht es?",
-                "konzumtione von puup",
-                "wo is der toilette",
-                "puup",
-                "fart",
-                "fartje",
-                "eepking",
-                "deze website is mede mogelijk gemaakt door aftrotek ink"
+                "jullie kunnen het", "ik geloof in je", "nog even!", "denk aan iets leuks!",
+                "houd vol!", "je bent bijna daar!", "je doet het geweldig!", "blijf doorgaan!",
+                "je bent sterk!", "je hebt dit!", "je hebt het in je!", "je kunt het aan!",
+                "ik ben trots op je!", "blijf positief!", "je bent bijna bij je doel!", "je hebt al veel bereikt!",
+                "je kunt het voor elkaar krijgen!", "zet door!", "je bent een winnaar!", "je bent op de goede weg!",
+                "houd je focus!", "je doet je best!", "je kunt dit aan!", "ik sta achter je!",
+                "je bent fantastisch!", "je verdient dit!", "je kunt meer dan je denkt!", "je hebt de kracht!",
+                "je maakt vooruitgang!", "je bent een doorzetter!", "je hebt dit onder controle!",
+                "je bent onvermoeibaar!", "je bent een inspiratie!", "je doet het prima!", "je hebt een geweldige houding!",
+                "je bent op de goede weg!", "je gaat het halen!", "je bent een topper!", "je hebt alles wat je nodig hebt!",
+                "je bent echt geweldig!", "je blijft indrukwekkend!", "je bent bijna bij het eind!", "je kunt het!",
+                "ik geloof in je talent!", "je bent een toffe gozer!"
             ];
 
             function sleep(ms) {
                 return new Promise(resolve => setTimeout(resolve, ms));
             }
 
-            const geluid = document.getElementById("tik");
-            geluid.volume = 0.5;
-
             const win = document.getElementById("win");
 
             function playBeep() {
                 const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                 const oscillator = audioContext.createOscillator();
-                const gainNode = audioContext.createGain();
-
                 oscillator.type = 'sine';
                 oscillator.frequency.setValueAtTime(1500, audioContext.currentTime);
-                oscillator.connect(gainNode);
-                gainNode.connect(audioContext.destination);
-                gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
-
+                oscillator.connect(audioContext.destination);
                 oscillator.start();
                 setTimeout(() => oscillator.stop(), 100);
             }
 
             async function playAanmoediging() {
                 const randomIndex = Math.floor(Math.random() * aanmoedigingen.length);
-                const aanmoediging = aanmoedigingen[randomIndex];
-                const response = await fetch(`https://synthesis-service.scratch.mit.edu/synth?locale=nl-NL&gender=male&text=${encodeURIComponent(aanmoediging)}`);
+                const response = await fetch(`https://synthesis-service.scratch.mit.edu/synth?locale=nl-NL&gender=male&text=${encodeURIComponent(aanmoedigingen[randomIndex])}`);
                 const audioBlob = await response.blob();
-                const audioUrl = URL.createObjectURL(audioBlob);
-                const audio = new Audio(audioUrl);
+                const audio = new Audio(URL.createObjectURL(audioBlob));
                 audio.play();
             }
 
-            async function check(number) {
-                if (number <= 3) {
-                    playBeep();
-                }
+            function updateCount(trainingNumber, totalRepetitions) {
+                document.getElementById("count").textContent = `Training ${trainingNumber}/${totalRepetitions}`;
             }
 
             async function daargaanwe() {
@@ -218,24 +139,54 @@ <h1 id="klok"></h1>
                 const pauseTime = parseInt(document.getElementById("pause_time").value);
                 const repetitions = parseInt(document.getElementById("wieviel").value);
 
+                let completed = 0;
+
                 for (let j = repetitions; j >= 1; j--) {
+                    if (stopRequested) break;
+                    updateCount(completed + 1, repetitions);
                     for (let i = pauseTime; i >= 1; i--) {
+                        if (stopRequested) break;
                         klok.textContent = i;
-                        check(i);
+                        if (i <= 3) playBeep();
                         await sleep(1000);
                     }
+                    if (stopRequested) break;
                     for (let i = trainTime; i >= 1; i--) {
+                        if (stopRequested) break;
+                        if (i <= 3) playBeep();
                         klok.textContent = i;
-                        check(i);
-                        if (Math.random() < 1 / 4) {
-                            playAanmoediging();
-                        }
+                        if (i % 4 === 0) await playAanmoediging();
                         await sleep(1000);
                     }
+                    completed++;
+                }
+
+                if (!stopRequested) {
+                    updateCount(completed, repetitions);
+                    klok.textContent = "KLAAR! 👺";
+                    win.play();
+                }
+                stopRequested = false; // Reset the stop flag
+            }
+
+            function stopTimer() {
+                stopRequested = true;
+            }
+
+            function init() {
+                function updateInitialCount() {
+                    const trainTime = parseInt(document.getElementById("train_time").value) || 0;
+                    const pauseTime = parseInt(document.getElementById("pause_time").value) || 0;
+                    const repetitions = parseInt(document.getElementById("wieviel").value) || 0;
+                    updateCount(0, repetitions);
                 }
-                klok.textContent = "KLAAR! 👺";
-                win.play();
+
+                document.getElementById("train_time").addEventListener("input", updateInitialCount);
+                document.getElementById("pause_time").addEventListener("input", updateInitialCount);
+                document.getElementById("wieviel").addEventListener("input", updateInitialCount);
             }
+
+            init();
         </script>
     </div>
 </body>