Merge branch 'develop' into 'main'

Develop

See merge request KaranJayachandra/match_up!19

3 files changed, 130 insertions, 110 deletions

diff --git a/app/static/custom.css b/app/static/custom.css
index fafc51a..a5ca36f 100644
--- a/app/static/custom.css
+++ b/app/static/custom.css
@@ -1,19 +1,34 @@
-button, input, .select, .select select {
+button, input, select {
     width: 100%;
-}
-table {
-    font-size: 17.5px;
+    height: 100%;
 }
 td {
     width: 20%;
 }
-img {
-    position: absolute; 
-    top: 50%; 
-    left: 50%; 
-    transform: translate(-50%,-50%);
+.grid {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+footer {
+    text-align: center;
+}
+.parent, .timer {
+    display: grid;
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    grid-auto-columns: 1fr;
+    grid-auto-rows: 1fr;
+}
+@media (min-width: 900px) {
+    table {
+        font-size: xx-large;
+    }
+    .parent {
+        grid-template-columns: repeat(4, 1fr);
+    }
+    .timer {
+        grid-template-columns: 4fr repeat(2, 1fr);
+    }
 }
-.center {
-    margin: auto;
-    width: 50%;
-}
\ No newline at end of file
diff --git a/app/static/file.js b/app/static/file.js
new file mode 100644
index 0000000..403ddf6
--- /dev/null
+++ b/app/static/file.js
@@ -0,0 +1,11 @@
+window.onload = function() {
+    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;
+            }
+        }
+    };
+}
\ No newline at end of file
diff --git a/app/static/custom.js b/app/static/timer.js
index 1d36493..e8e7854 100644
--- a/app/static/custom.js
+++ b/app/static/timer.js
@@ -1,97 +1,91 @@
-let minsPerRound = Number(sessionStorage.getItem("minsPerRound")) || 12;

-let timerRunningFlag = Number(sessionStorage.getItem("timerRunningFlag")) || 0;

-let deadline = Number(sessionStorage.getItem("deadline")) || new Date().getTime();

-let clock = 0;

-

-function setTimer(m, s) {

-    let timer = document.getElementById("timer-display");

-    m = m < 10 ? ("0" + m) : m;

-    s = s < 10 ? ("0" + s) : s;

-    timer.value = `${m}:${s}`;

-}

-

-function setSessionData() {

-    sessionStorage.setItem("deadline", deadline);

-    sessionStorage.setItem("minsPerRound", minsPerRound);

-    sessionStorage.setItem("timerRunningFlag", timerRunningFlag);

-}

-

-function resetTimer() {

-    clearInterval(clock);

-    setTimer(minsPerRound, 0);

-    timerRunningFlag = 0;

-    setSessionData();

-}

-

-function updateTimer(milliseconds) {

-    const m = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));

-    const s = Math.floor((milliseconds % (1000 * 60)) / 1000);

-    setTimer(m, s);

-}

-

-function refreshTimer() {

-    const now = new Date().getTime();

-    const millisecondsToDeadline = deadline - now;

-    if (millisecondsToDeadline > 0) {

-        updateTimer(millisecondsToDeadline);

-        return;

-    }

-    resetTimer();

-    const notification = new Notyf({

-        duration: 30 * 1000, 

-        position: {x: 'center', y: 'top'},

-        types: [{

-            type: 'success',

-            background: 'indianred',

-            duration: 1000 * 1000,

-            dismissible: true

-        }]

-    });

-    notification.success("Round completed");

-}

-

-function startTimer(fresh) {

-    if (fresh) {

-        now = new Date().getTime();

-        const millisecondsToDeadline = minsPerRound * 60 * 1000;

-        deadline = now + millisecondsToDeadline;

-    }

-    timerRunningFlag = 1;

-    setSessionData();

-    clock = setInterval(refreshTimer, 1000);

-}

-

-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-inc").addEventListener('click', ()=> {

-    if (timerRunningFlag == 0) {

-        minsPerRound += 1;

-        resetTimer();

-    }

-});

-

-document.getElementById("timer-dec").addEventListener('click', ()=> {

-    if (timerRunningFlag == 0 && minsPerRound != 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;

-        }

-    }

-};
\ No newline at end of file
+let minsPerRound = Number(sessionStorage.getItem("minsPerRound")) || 12;
+let timerRunningFlag = Number(sessionStorage.getItem("timerRunningFlag")) || 0;
+let deadline = Number(sessionStorage.getItem("deadline")) || new Date().getTime();
+let clock = 0;
+
+function setTimer(m, s) {
+    let timer = document.getElementById("timer-display");
+    m = m < 10 ? ("0" + m) : m;
+    s = s < 10 ? ("0" + s) : s;
+    timer.value = `${m}:${s}`;
+}
+
+function setSessionData() {
+    sessionStorage.setItem("deadline", deadline);
+    sessionStorage.setItem("minsPerRound", minsPerRound);
+    sessionStorage.setItem("timerRunningFlag", timerRunningFlag);
+}
+
+function resetTimer() {
+    clearInterval(clock);
+    setTimer(minsPerRound, 0);
+    timerRunningFlag = 0;
+    setSessionData();
+}
+
+function updateTimer(milliseconds) {
+    const m = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
+    const s = Math.floor((milliseconds % (1000 * 60)) / 1000);
+    setTimer(m, s);
+}
+
+function refreshTimer() {
+    const now = new Date().getTime();
+    const millisecondsToDeadline = deadline - now;
+    if (millisecondsToDeadline > 0) {
+        updateTimer(millisecondsToDeadline);
+        return;
+    }
+    resetTimer();
+    const notification = new Notyf({
+        duration: 30 * 1000, 
+        position: {x: 'center', y: 'top'},
+        types: [{
+            type: 'success',
+            background: 'indianred',
+            duration: 1000 * 1000,
+            dismissible: true
+        }]
+    });
+    notification.success("Round completed");
+}
+
+function startTimer(fresh) {
+    if (fresh) {
+        now = new Date().getTime();
+        const millisecondsToDeadline = minsPerRound * 60 * 1000;
+        deadline = now + millisecondsToDeadline;
+    }
+    timerRunningFlag = 1;
+    setSessionData();
+    clock = setInterval(refreshTimer, 1000);
+}
+
+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-inc").addEventListener('click', ()=> {
+        if (timerRunningFlag == 0) {
+            minsPerRound += 1;
+            resetTimer();
+        }
+    });
+
+    document.getElementById("timer-dec").addEventListener('click', ()=> {
+        if (timerRunningFlag == 0 && minsPerRound != 0) {
+            minsPerRound -= 1;
+            resetTimer();
+        }
+    });
+}
\ No newline at end of file