diff --git a/index.html b/index.html index dac506ca..22a070af 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@ body { font-family: pixelifysans, monospace; font-size: 2rem; + user-select: none; } #app { @@ -50,117 +51,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; - } - - #minimap-container { - display: flex; - padding: 0.5rem 1rem; - justify-content: center; - } - - #minimap-button-container { - margin-left: auto; - display: flex; - align-items: center; - color: #fff; - gap: 10px; - font-size: 1.25rem; - font-family: pixelifysans; - } - - #minimap-button { - margin: 0; - padding: 5px; - border: 0; - outline: 0; - border-radius: 8px; - font-size: 1.25rem; - font-family: pixelifysans; - } - - #minimap { - display: none; - } - - @media (min-width: 768px) { - #header { - font-size: 1.2em; - } - } - @media (max-width: 900px) { .game-window { left: 0; @@ -181,6 +71,39 @@ +
+
+

+ Do you want to start a new game? (This clears the saved + game data.) +

+
+ + +
+
+
+

+

+

+
+ +
+
+
+ + +
@@ -190,7 +113,16 @@
B
-
+
+ + + + +
+ diff --git a/src/styles/screen.css b/src/styles/screen.css index 5b3f51d8..6eec6f54 100644 --- a/src/styles/screen.css +++ b/src/styles/screen.css @@ -11,6 +11,197 @@ 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; +} + +#minimap-container { + display: flex; + padding: 0.5rem 1rem; + justify-content: center; +} + +#minimap-button-container { + margin-left: auto; + display: flex; + align-items: center; + color: #fff; + gap: 10px; + font-size: 1.25rem; + font-family: pixelifysans; +} + +#minimap-button { + margin: 0; + padding: 5px; + border: 0; + outline: 0; + border-radius: 8px; + font-size: 1.25rem; + font-family: pixelifysans; +} + +#minimap { + display: none; +} + .top, .bottom, .left, @@ -52,6 +243,11 @@ .right { right: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; } .note { @@ -136,15 +332,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; } 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);