From b74ff19f346ebda1f797e8e87f973ef4677afbad Mon Sep 17 00:00:00 2001
From: Sri Harsha D V <dvsriharsha2198@gmail.com>
Date: Sun, 13 Oct 2024 18:56:35 +0530
Subject: [PATCH 1/3] feat: text in the webpage are unselectable

---
 index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.html b/index.html
index ecc811a4..8c63db47 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,7 @@
             body {
                 font-family: pixelifysans, monospace;
                 font-size: 2rem;
+                user-select: none;
             }
 
             #app {

From a1045cdc7a3b44a1b8732bb0ce31e0ec0f6bf1a8 Mon Sep 17 00:00:00 2001
From: Sri Harsha D V <dvsriharsha2198@gmail.com>
Date: Mon, 14 Oct 2024 01:09:09 +0530
Subject: [PATCH 2/3] feat: add settings menu

---
 index.html            | 129 ++++++++++------------------
 src/main.js           | 111 +++++++++++++++++++++++-
 src/styles/screen.css | 191 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 345 insertions(+), 86 deletions(-)

diff --git a/index.html b/index.html
index 8c63db47..a78318e3 100644
--- a/index.html
+++ b/index.html
@@ -38,9 +38,7 @@
                 top: var(--header-height);
                 left: 140px;
                 width: calc(100% - 280px);
-                height: calc(
-                    100% - calc(var(--header-height) + var(--footer-height))
-                );
+                height: calc(100% - calc(var(--header-height) + var(--footer-height)));
             }
 
             .full-screen {
@@ -51,87 +49,6 @@
                 z-index: 1000;
             }
 
-            #header {
-                color: white;
-                text-align: center;
-                font-size: 2em;
-            }
-
-            .d-desktop-hide {
-                display: none;
-            }
-
-            .d-mobile-hide {
-                display: none;
-            }
-
-            .btn-container {
-                align-self: flex-end;
-                margin-top: 1rem;
-                display: flex;
-                gap: 0.6rem;
-                opacity: 0;
-                animation: fadeIn 1s forwards 0.6s;
-            }
-
-            @keyframes fadeIn {
-                0% {
-                    opacity: 0;
-                }
-
-                100% {
-                    opacity: 1;
-                }
-            }
-
-            @keyframes slideIn {
-                0% {
-                    opacity: 0;
-                    transform: translateY(20px);
-                }
-
-                100% {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
-
-            #energy-container {
-                padding: 0.5rem 1rem;
-                display: flex;
-                align-items: center;
-                border-radius: 15px;
-                opacity: 0;
-                animation: fadeIn 1s forwards 0.7s;
-            }
-
-            #energy-title {
-                margin: 0;
-                margin-right: 5px;
-                color: #fff;
-                text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
-                font-size: 1.25rem;
-                line-height: 1.6;
-            }
-
-            #energy-bar-total {
-                width: 100px;
-                height: 0.8rem;
-                background-color: red;
-            }
-
-            #energy-bar-remain {
-                width: 100%;
-                height: 100%;
-                background-color: lightgreen;
-            }
-
-            @media (min-width: 768px) {
-                #header {
-                    font-size: 1.2em;
-                }
-            }
-
             @media (max-width: 900px) {
                 .game-window {
                     left: 0;
@@ -152,6 +69,39 @@
                 <canvas id="game"></canvas>
             </div>
 
+            <div class="alert-window">
+                <div class="alert new-game-alert">
+                    <p class="alert-text">
+                        Do you want to start a new game? (This clears the saved
+                        game data.)
+                    </p>
+                    <div class="alert-options">
+                        <button id="new-game-no-button" class="option-btn">
+                            No
+                        </button>
+                        <button id="new-game-yes-button" class="option-btn">
+                            Yes
+                        </button>
+                    </div>
+                </div>
+                <div class="alert stats-alert">
+                    <p id="coins-collected" class="alert-text"></p>
+                    <p id="coins-spent" class="alert-text"></p>
+                    <p id="time-spent" class="alert-text"></p>
+                    <div class="alert-options">
+                        <button id="stats-close-button" class="option-btn">
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div id="menu-button">
+                <div class="menu-bar"></div>
+                <div class="menu-bar"></div>
+                <div class="menu-bar"></div>
+            </div>
+
             <div id="header" class="top">ZTM Quest</div>
             <div id="left-panel" class="left">
                 <div class="control-btns d-mobile-hide">
@@ -161,7 +111,16 @@
                     <div class="control-btn b">B</div>
                 </div>
             </div>
-            <div id="right-panel" class="right"></div>
+            <div id="right-panel" class="right">
+                <button id="close-btn">X</button>
+                <button id="new-game-button" class="setting-btn">
+                    New Game
+                </button>
+                <button id="stats-button" class="setting-btn">Stats</button>
+                <button id="debug-button" class="setting-btn">
+                    Debug Mode
+                </button>
+            </div>
             <div id="footer" class="bottom">
                 <div class="footer-head-info">
                     <div class="control-btns d-desktop-hide">
diff --git a/src/main.js b/src/main.js
index 9eebaf28..46cb1873 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import { k } from './kplayCtx';
-import { getGameState, setGameState } from './utils/gameState';
+import { getGameState, setGameState, clearSavedGame } from './utils/gameState';
 import { updateEnergyUI } from './utils/energyUpdate';
 
 import './styles/global.css';
@@ -56,3 +56,112 @@ setInterval(() => {
         k.debug.log('I need some energy.');
     }
 }, 10000);
+
+// ** Settings functionality **
+
+// Mobile menu related
+
+const showSettings = () => {
+    const rightPanel = document.getElementById('right-panel');
+    rightPanel.classList.add('show-settings');
+};
+
+const hideSettings = () => {
+    const rightPanel = document.getElementById('right-panel');
+    rightPanel.classList.remove('show-settings');
+    k.canvas.focus(); // This ensures every time settings is closed then the canvas get back the focus.
+};
+
+const menuButton = document.getElementById('menu-button');
+const closeBtn = document.getElementById('close-btn');
+menuButton.addEventListener('click', showSettings);
+closeBtn.addEventListener('click', hideSettings);
+
+// Alert window
+
+const showAlertWindow = () => {
+    const alertWindow = document.querySelector('.alert-window');
+    alertWindow.classList.add('display-flex');
+};
+
+const hideAlertWindow = () => {
+    const alertWindow = document.querySelector('.alert-window');
+    alertWindow.classList.remove('display-flex');
+    hideSettings(); // This is for the mobile view.
+};
+
+// New game related
+const clickNewGame = () => {
+    showAlertWindow();
+    const newGameAlert = document.querySelector('.new-game-alert');
+    newGameAlert.classList.add('display-block');
+};
+
+const clickNewGameNo = () => {
+    const newGameAlert = document.querySelector('.new-game-alert');
+    newGameAlert.classList.remove('display-block');
+    hideAlertWindow();
+};
+
+const clickNewGameYes = () => {
+    clearSavedGame();
+    clickNewGameNo();
+    k.go('start');
+};
+
+const newGameButton = document.getElementById('new-game-button');
+newGameButton.addEventListener('click', clickNewGame);
+const newGameNoButton = document.getElementById('new-game-no-button');
+newGameNoButton.addEventListener('click', clickNewGameNo);
+const newGameYesButton = document.getElementById('new-game-yes-button');
+newGameYesButton.addEventListener('click', clickNewGameYes);
+
+// Stats related
+
+const showStats = () => {
+    const player = k.get('player')[0];
+    const coinsCollected = player.collectedCoins;
+    const coinsSpent = 0;
+
+    // Calculation for time spent in game
+    const timeSpent = k.time();
+    const timeSpentSeconds = Math.floor(timeSpent % 60);
+    const timeSpentMinutes = Math.floor((timeSpent / 60) % 60);
+    const timeSpentHours = Math.floor(timeSpent / 3600);
+    const timeSpentString = `${timeSpentHours}h ${timeSpentMinutes}m ${timeSpentSeconds}s`;
+
+    // Adding updated info in html
+    const coinsCollectedElement = document.getElementById('coins-collected');
+    coinsCollectedElement.innerHTML = `Coins collected : ${coinsCollected}`;
+    const coinsSpentElement = document.getElementById('coins-spent');
+    coinsSpentElement.innerHTML = `Coins spent : ${coinsSpent}`;
+    const timeSpentElement = document.getElementById('time-spent');
+    timeSpentElement.innerHTML = `Time spent : ${timeSpentString}`;
+
+    showAlertWindow();
+    const statsAlert = document.querySelector('.stats-alert');
+    statsAlert.classList.add('display-block');
+};
+
+const hideStats = () => {
+    const statsAlert = document.querySelector('.stats-alert');
+    statsAlert.classList.remove('display-block');
+    hideAlertWindow();
+};
+
+const statsButton = document.getElementById('stats-button');
+statsButton.addEventListener('click', showStats);
+const statsCloseButton = document.getElementById('stats-close-button');
+statsCloseButton.addEventListener('click', hideStats);
+
+// Debug related
+
+const toggleDebugMode = () => {
+    k.debug.inspect = !k.debug.inspect;
+    hideSettings(); // This is for the mobile view.
+};
+
+const debugButton = document.getElementById('debug-button');
+debugButton.addEventListener('click', toggleDebugMode);
+
+// ** Settings functionality end **
diff --git a/src/styles/screen.css b/src/styles/screen.css
index 5b3f51d8..26788919 100644
--- a/src/styles/screen.css
+++ b/src/styles/screen.css
@@ -11,6 +11,167 @@
     top: 0px;
     left: 0px;
 }
+
+#header {
+    color: white;
+    text-align: center;
+    font-size: 2em;
+}
+
+#menu-button {
+    position: fixed;
+    top: 15px;
+    right: 15px;
+    padding: 3px 5px;
+    width: 30px;
+    height: 30px;
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2.5px;
+    background-color: transparent;
+    border: 2px solid white;
+    border-radius: 10px;
+    z-index: 100;
+}
+
+.menu-bar {
+    height: 1.5px;
+    background-color: white;
+}
+
+.alert-window {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 2000;
+}
+
+.alert {
+    padding: 10px;
+    display: none;
+    background-color: white;
+    border-radius: 10px;
+}
+
+.new-game-alert {
+    width: 50%;
+}
+
+.stats-alert {
+    width: 400px;
+}
+
+.alert-text {
+    margin: 0;
+}
+
+.alert-options {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 5px;
+}
+
+#close-btn {
+    display: none;
+    background-color: red;
+    color: white;
+    text-align: center;
+    border-radius: 50%;
+}
+
+.setting-btn {
+    border: 2px solid white;
+    border-radius: 10px;
+    color: white;
+    background-color: transparent;
+    font-family: pixelifysans, monospace;
+    font-size: 1.2rem;
+    cursor: pointer;
+}
+
+.display-flex {
+    display: flex;
+}
+
+.display-block {
+    display: block;
+}
+
+.d-desktop-hide {
+    display: none;
+}
+
+.d-mobile-hide {
+    display: none;
+}
+
+.btn-container {
+    align-self: flex-end;
+    margin-top: 1rem;
+    display: flex;
+    gap: 0.6rem;
+    opacity: 0;
+    animation: fadeIn 1s forwards 0.6s;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes slideIn {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#energy-container {
+    padding: 0.5rem 1rem;
+    display: flex;
+    align-items: center;
+    border-radius: 15px;
+    opacity: 0;
+    animation: fadeIn 1s forwards 0.7s;
+}
+
+#energy-title {
+    margin: 0;
+    margin-right: 5px;
+    color: #fff;
+    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
+    font-size: 1.25rem;
+    line-height: 1.6;
+}
+
+#energy-bar-total {
+    width: 100px;
+    height: 0.8rem;
+    background-color: red;
+}
+
+#energy-bar-remain {
+    width: 100%;
+    height: 100%;
+    background-color: lightgreen;
+}
+
 .top,
 .bottom,
 .left,
@@ -52,6 +213,11 @@
 
 .right {
     right: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
 }
 
 .note {
@@ -136,15 +302,40 @@
     padding: 5px;
 }
 
+@media (min-width: 768px) {
+    #header {
+        font-size: 1.2em;
+    }
+}
+
 @media (max-width: 768px), (max-width: 900px) and (orientation: landscape) {
     :root {
         --footer-height: auto;
     }
+
+    #menu-button {
+        display: flex;
+    }
+
+    #close-btn {
+        display: block;
+    }
+
     .left,
     .right,
     #footer .control-btns {
         display: none;
     }
+
+    .show-settings {
+        top: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        z-index: 1000;
+    }
+
     .control-text-container {
         margin: 0;
     }

From b2663a2d93f66d6324947d1f1eaaea5faa419774 Mon Sep 17 00:00:00 2001
From: Sri Harsha D V <dvsriharsha2198@gmail.com>
Date: Mon, 14 Oct 2024 12:03:28 +0530
Subject: [PATCH 3/3] feat: change settings functionality to separate file

---
 index.html            |   1 +
 src/main.js           | 111 +-----------------------------------------
 src/utils/settings.js | 107 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 109 insertions(+), 110 deletions(-)
 create mode 100644 src/utils/settings.js

diff --git a/index.html b/index.html
index 3bff5dcb..22a070af 100644
--- a/index.html
+++ b/index.html
@@ -183,5 +183,6 @@
             </div>
         </div>
         <script type="module" src="src/main.js"></script>
+        <script type="module" src="src/utils/settings.js"></script>
     </body>
 </html>
diff --git a/src/main.js b/src/main.js
index 46cb1873..9eebaf28 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import { k } from './kplayCtx';
-import { getGameState, setGameState, clearSavedGame } from './utils/gameState';
+import { getGameState, setGameState } from './utils/gameState';
 import { updateEnergyUI } from './utils/energyUpdate';
 
 import './styles/global.css';
@@ -56,112 +56,3 @@ setInterval(() => {
         k.debug.log('I need some energy.');
     }
 }, 10000);
-
-// ** Settings functionality **
-
-// Mobile menu related
-
-const showSettings = () => {
-    const rightPanel = document.getElementById('right-panel');
-    rightPanel.classList.add('show-settings');
-};
-
-const hideSettings = () => {
-    const rightPanel = document.getElementById('right-panel');
-    rightPanel.classList.remove('show-settings');
-    k.canvas.focus(); // This ensures every time settings is closed then the canvas get back the focus.
-};
-
-const menuButton = document.getElementById('menu-button');
-const closeBtn = document.getElementById('close-btn');
-menuButton.addEventListener('click', showSettings);
-closeBtn.addEventListener('click', hideSettings);
-
-// Alert window
-
-const showAlertWindow = () => {
-    const alertWindow = document.querySelector('.alert-window');
-    alertWindow.classList.add('display-flex');
-};
-
-const hideAlertWindow = () => {
-    const alertWindow = document.querySelector('.alert-window');
-    alertWindow.classList.remove('display-flex');
-    hideSettings(); // This is for the mobile view.
-};
-
-// New game related
-const clickNewGame = () => {
-    showAlertWindow();
-    const newGameAlert = document.querySelector('.new-game-alert');
-    newGameAlert.classList.add('display-block');
-};
-
-const clickNewGameNo = () => {
-    const newGameAlert = document.querySelector('.new-game-alert');
-    newGameAlert.classList.remove('display-block');
-    hideAlertWindow();
-};
-
-const clickNewGameYes = () => {
-    clearSavedGame();
-    clickNewGameNo();
-    k.go('start');
-};
-
-const newGameButton = document.getElementById('new-game-button');
-newGameButton.addEventListener('click', clickNewGame);
-const newGameNoButton = document.getElementById('new-game-no-button');
-newGameNoButton.addEventListener('click', clickNewGameNo);
-const newGameYesButton = document.getElementById('new-game-yes-button');
-newGameYesButton.addEventListener('click', clickNewGameYes);
-
-// Stats related
-
-const showStats = () => {
-    const player = k.get('player')[0];
-    const coinsCollected = player.collectedCoins;
-    const coinsSpent = 0;
-
-    // Calculation for time spent in game
-    const timeSpent = k.time();
-    const timeSpentSeconds = Math.floor(timeSpent % 60);
-    const timeSpentMinutes = Math.floor((timeSpent / 60) % 60);
-    const timeSpentHours = Math.floor(timeSpent / 3600);
-    const timeSpentString = `${timeSpentHours}h ${timeSpentMinutes}m ${timeSpentSeconds}s`;
-
-    // Adding updated info in html
-    const coinsCollectedElement = document.getElementById('coins-collected');
-    coinsCollectedElement.innerHTML = `Coins collected : ${coinsCollected}`;
-    const coinsSpentElement = document.getElementById('coins-spent');
-    coinsSpentElement.innerHTML = `Coins spent : ${coinsSpent}`;
-    const timeSpentElement = document.getElementById('time-spent');
-    timeSpentElement.innerHTML = `Time spent : ${timeSpentString}`;
-
-    showAlertWindow();
-    const statsAlert = document.querySelector('.stats-alert');
-    statsAlert.classList.add('display-block');
-};
-
-const hideStats = () => {
-    const statsAlert = document.querySelector('.stats-alert');
-    statsAlert.classList.remove('display-block');
-    hideAlertWindow();
-};
-
-const statsButton = document.getElementById('stats-button');
-statsButton.addEventListener('click', showStats);
-const statsCloseButton = document.getElementById('stats-close-button');
-statsCloseButton.addEventListener('click', hideStats);
-
-// Debug related
-
-const toggleDebugMode = () => {
-    k.debug.inspect = !k.debug.inspect;
-    hideSettings(); // This is for the mobile view.
-};
-
-const debugButton = document.getElementById('debug-button');
-debugButton.addEventListener('click', toggleDebugMode);
-
-// ** Settings functionality end **
diff --git a/src/utils/settings.js b/src/utils/settings.js
new file mode 100644
index 00000000..f5702604
--- /dev/null
+++ b/src/utils/settings.js
@@ -0,0 +1,107 @@
+import { k } from '../kplayCtx';
+import { clearSavedGame } from './gameState';
+
+// Mobile menu related
+
+const showSettings = () => {
+    const rightPanel = document.getElementById('right-panel');
+    rightPanel.classList.add('show-settings');
+};
+
+const hideSettings = () => {
+    const rightPanel = document.getElementById('right-panel');
+    rightPanel.classList.remove('show-settings');
+    k.canvas.focus(); // This ensures every time settings is closed then the canvas get back the focus.
+};
+
+const menuButton = document.getElementById('menu-button');
+const closeBtn = document.getElementById('close-btn');
+menuButton.addEventListener('click', showSettings);
+closeBtn.addEventListener('click', hideSettings);
+
+// Alert window
+
+const showAlertWindow = () => {
+    const alertWindow = document.querySelector('.alert-window');
+    alertWindow.classList.add('display-flex');
+};
+
+const hideAlertWindow = () => {
+    const alertWindow = document.querySelector('.alert-window');
+    alertWindow.classList.remove('display-flex');
+    hideSettings(); // This is for the mobile view.
+};
+
+// New game related
+const clickNewGame = () => {
+    showAlertWindow();
+    const newGameAlert = document.querySelector('.new-game-alert');
+    newGameAlert.classList.add('display-block');
+};
+
+const clickNewGameNo = () => {
+    const newGameAlert = document.querySelector('.new-game-alert');
+    newGameAlert.classList.remove('display-block');
+    hideAlertWindow();
+};
+
+const clickNewGameYes = () => {
+    clearSavedGame();
+    clickNewGameNo();
+    k.go('start');
+};
+
+const newGameButton = document.getElementById('new-game-button');
+newGameButton.addEventListener('click', clickNewGame);
+const newGameNoButton = document.getElementById('new-game-no-button');
+newGameNoButton.addEventListener('click', clickNewGameNo);
+const newGameYesButton = document.getElementById('new-game-yes-button');
+newGameYesButton.addEventListener('click', clickNewGameYes);
+
+// Stats related
+
+const showStats = () => {
+    const player = k.get('player')[0];
+    const coinsCollected = player.collectedCoins;
+    const coinsSpent = 0;
+
+    // Calculation for time spent in game
+    const timeSpent = k.time();
+    const timeSpentSeconds = Math.floor(timeSpent % 60);
+    const timeSpentMinutes = Math.floor((timeSpent / 60) % 60);
+    const timeSpentHours = Math.floor(timeSpent / 3600);
+    const timeSpentString = `${timeSpentHours}h ${timeSpentMinutes}m ${timeSpentSeconds}s`;
+
+    // Adding updated info in html
+    const coinsCollectedElement = document.getElementById('coins-collected');
+    coinsCollectedElement.innerHTML = `Coins collected : ${coinsCollected}`;
+    const coinsSpentElement = document.getElementById('coins-spent');
+    coinsSpentElement.innerHTML = `Coins spent : ${coinsSpent}`;
+    const timeSpentElement = document.getElementById('time-spent');
+    timeSpentElement.innerHTML = `Time spent : ${timeSpentString}`;
+
+    showAlertWindow();
+    const statsAlert = document.querySelector('.stats-alert');
+    statsAlert.classList.add('display-block');
+};
+
+const hideStats = () => {
+    const statsAlert = document.querySelector('.stats-alert');
+    statsAlert.classList.remove('display-block');
+    hideAlertWindow();
+};
+
+const statsButton = document.getElementById('stats-button');
+statsButton.addEventListener('click', showStats);
+const statsCloseButton = document.getElementById('stats-close-button');
+statsCloseButton.addEventListener('click', hideStats);
+
+// Debug related
+
+const toggleDebugMode = () => {
+    k.debug.inspect = !k.debug.inspect;
+    hideSettings(); // This is for the mobile view.
+};
+
+const debugButton = document.getElementById('debug-button');
+debugButton.addEventListener('click', toggleDebugMode);