From c041e74af8c69e8fb0680558e23dd7be542afcf6 Mon Sep 17 00:00:00 2001
From: Karan Jayachandra <karan.jayachandra@nxp.com>
Date: Fri, 25 Jul 2025 15:52:42 +0200
Subject: Working version

---
 app/static/custom.css     |  3 +++
 app/static/custom.js      | 52 +++++++++++++++++++++--------------------------
 app/templates/controls.j2 | 16 +++++++++------
 app/templates/players.j2  | 51 ++++++++++++++++++++++++----------------------
 4 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/app/static/custom.css b/app/static/custom.css
index 9992ee5..8aa5b57 100644
--- a/app/static/custom.css
+++ b/app/static/custom.css
@@ -9,6 +9,9 @@ td {
     margin-top: 20px;
     margin-bottom: 20px;
 }
+footer {
+    text-align: center;
+}
 .parent {
     display: grid;
     grid-column-gap: 20px;
diff --git a/app/static/custom.js b/app/static/custom.js
index 2c47448..3daeb17 100644
--- a/app/static/custom.js
+++ b/app/static/custom.js
@@ -3,7 +3,7 @@ let timerRunningFlag = Number(sessionStorage.getItem("timerRunningFlag")) || 0;
 let deadline = Number(sessionStorage.getItem("deadline")) || new Date().getTime();
 let clock = 0;
 
-window.onload += function setTimer(m, s) {
+function setTimer(m, s) {
     let timer = document.getElementById("timer-display");
     m = m < 10 ? ("0" + m) : m;
     s = s < 10 ? ("0" + s) : s;
@@ -61,37 +61,31 @@ function startTimer(fresh) {
     clock = setInterval(refreshTimer, 1000);
 }
 
-if (timerRunningFlag) startTimer(0); else resetTimer();
+window.onload = function () {
+    if (timerRunningFlag) 
+        startTimer(0); 
+    else resetTimer();
 
-document.getElementById("timer-start").addEventListener('click', ()=> {
-    if (timerRunningFlag != 0) return;
-    startTimer(1);
-});
-
-document.getElementById("timer-stop").addEventListener('click', ()=>{
-    resetTimer();
-});
+    document.getElementById("timer-start").addEventListener('click', ()=> {
+        if (timerRunningFlag != 0) return;
+        startTimer(1);
+    });
 
-document.getElementById("timer-inc").addEventListener('click', ()=> {
-    if (timerRunningFlag == 0) {
-        minsPerRound += 1;
+    document.getElementById("timer-stop").addEventListener('click', ()=>{
         resetTimer();
-    }
-});
+    });
 
-document.getElementById("timer-dec").addEventListener('click', ()=> {
-    if (timerRunningFlag == 0 && minsPerRound != 0) {
-        minsPerRound -= 1;
-        resetTimer();
-    }
-});
+    document.getElementById("timer-inc").addEventListener('click', ()=> {
+        if (timerRunningFlag == 0) {
+            minsPerRound += 1;
+            resetTimer();
+        }
+    });
 
-const fileInput = document.querySelector("#file-js input[type=file]");
-    if (fileInput !== null) {
-        fileInput.onchange = () => {
-        if (fileInput.files.length > 0) {
-            const fileName = document.querySelector("#file-js .file-name");
-            fileName.textContent = fileInput.files[0].name;
+    document.getElementById("timer-dec").addEventListener('click', ()=> {
+        if (timerRunningFlag == 0 && minsPerRound != 0) {
+            minsPerRound -= 1;
+            resetTimer();
         }
-    }
-};
\ No newline at end of file
+    });
+}
\ No newline at end of file
diff --git a/app/templates/controls.j2 b/app/templates/controls.j2
index a8cba89..14e7520 100644
--- a/app/templates/controls.j2
+++ b/app/templates/controls.j2
@@ -37,10 +37,14 @@
             hx-target="#games">RESET!</button>
 </div>
 <h3>Timer</h3>
-<div role="group">
-    <button id="timer-dec"><i class="fas fa-light fa-minus"></i></button>
-    <input id="timer-display" type="text" style="text-align:center; " readonly></input>
-    <button id="timer-inc"><i class="fas fa-light fa-plus"></i></button>
-    <button id="timer-start"><i class="fas fa-light fa-play"></i></button>
-    <button id="timer-stop"><i class="fas fa-light fa-stop"></i></button>
+<div class="grid">
+    <div role="group">
+        <button id="timer-dec"><i class="fas fa-light fa-minus"></i></button>
+        <input id="timer-display" type="text" style="text-align:center; " readonly></input>
+        <button id="timer-inc"><i class="fas fa-light fa-plus"></i></button>
+    </div>
+</div>
+<div class="grid">
+<button id="timer-start"><i class="fas fa-light fa-play"></i></button>
+<button id="timer-stop"><i class="fas fa-light fa-stop"></i></button>
 </div>
\ No newline at end of file
diff --git a/app/templates/players.j2 b/app/templates/players.j2
index f10b0a9..4b9660e 100644
--- a/app/templates/players.j2
+++ b/app/templates/players.j2
@@ -18,30 +18,33 @@
             {% endfor %}
 			</div>
 			<h3>Controls</h3>
-			<section class="section">
-				<div class="column">
-					<button class="button is-dark is-responsive" 
-							hx-post="/reset_players">RESET!</button>
-				</div>
-				<div class="column">
-					<form method="POST" enctype="multipart/form-data" hx-post="/update_players">
-						<div id="file-js" class="file has-name is-fullwidth">
-						<label class="file-label">
-							<input class="file-input" type="file" name="players" />
-							<span class="file-cta">
-							<span class="file-icon">
-								<i class="fas fa-upload"></i>
-							</span>
-							<span class="file-label"> Choose a file… </span>
-							</span>
-							<span class="file-name"> No file uploaded </span>
-						</label>
-						<button class="button is-dark is-responsive">UPDATE!</button>
-						</div>
-					</form>
-				</div>
-				<footer class="container">{{ footer() }}</footer>
-			</section>
+			<div class="grid">
+				<button class="button is-dark is-responsive" 
+						hx-post="/reset_players">RESET!</button>
+			</div>
+			<h3>Player Update</h3>
+			<div class="grid">
+				<form method="POST" enctype="multipart/form-data" hx-post="/update_players">
+					<div id="file-js" class="file has-name is-fullwidth">
+					<label class="file-label">
+						<input class="file-input" type="file" name="players" />
+					</label>
+					<button class="button is-dark is-responsive">UPDATE!</button>
+					</div>
+				</form>
+			</div>
+			<footer class="container">{{ footer() }}</footer>
+			<script>
+				const fileInput = document.querySelector("#file-js input[type=file]");
+					if (fileInput !== null) {
+						fileInput.onchange = () => {
+						if (fileInput.files.length > 0) {
+							const fileName = document.querySelector("#file-js .file-name");
+							fileName.textContent = fileInput.files[0].name;
+						}
+					}
+				};
+			</script>
 		</main>
 	</body>
 </html>
\ No newline at end of file
-- 
cgit v1.3.1