Magia de Orellana

OrellanaMatias · Aug 12, 2024 · 52d934a · 52d934a
1 parent 9feb5c2
commit 52d934a
Show file tree

Hide file tree

Showing 3 changed files with 307 additions and 92 deletions.
diff --git a/index.html b/index.html
@@ -4,30 +4,55 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Kitty CLicker</title>
+    <title>Kitty Clicker</title>
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
-    <a href="flappy_cat/index.html" style="text-decoration: none;">
-        <button>Flappy cat</button>
-    </a>
-
-    <div id="flexBox">
+    <div id="gameContainer">
         <h1 id="gameTitle">Kitty Clicker</h1>
         <h2 id="score">0</h2>
         <img id="catImg" src="img/cat.jpg" alt="Kitty" onClick="getPoints()">
+        <div id="navBar">
+            <img id="storeImg" src="img/store.png" alt="Store" onClick="showStore()">
+            <img id="game1Img" src="img/store.png" alt="Juego 1" onClick="goToGame('game1')">
+            <img id="game2Img" src="img/store.png" alt="Juego 2" onClick="goToGame('game2')">
+            <img id="game3Img" src="img/store.png" alt="Juego 3" onClick="goToGame('game3')">
+        </div>
     </div>
-    <div id="navBar">
-        <img id="storeImg" src="img/store.png" alt="Store" onClick="showStore()">
-    </div>
-    <div id="store">
+    <div id="store" class="section">
+        <img id="backArrow" src="img/back.png" alt="Back" onClick="returnGame()">
         <h2>Tienda</h2>
-        <div class="storeFlex">
-            <img id="multiplierImg" src="img/multiplier.png" alt="Multiplier" onClick="getMultiplier()">
-            <h2>Multiplicador de puntos</h2>
-            <span id ="multiplierPrice">20</span>
+        <div class="storeItem">
+            <img src="img/multiplier.png" alt="Multiplier" onClick="getMultiplier()">
+            <div>
+                <h3>Multiplicador</h3>
+                <p>Duplica tus puntos por clic.</p>
+                <span id="multiplierPrice">20</span>
+            </div>
         </div>
     </div>
+
+    <div id="game1" class="section">
+        <img id="backArrow" src="img/back.png" alt="Back" onClick="returnGame()">
+        <h2>Juego 1</h2>
+    </div>
+    <div id="game2" class="section">
+        <img id="backArrow" src="img/back.png" alt="Back" onClick="returnGame()">
+        <h2>Juego 2</h2>
+    </div>
+    <div id="game3" class="section">
+        <img id="backArrow" src="img/back.png" alt="Back" onClick="returnGame()">
+        <h2>Juego 3</h2>
+    </div>
+
+    <!-- modal confirmar -->
+    <div id="confirmationModal" class="confirmationModal">
+        <h3>¿Estás seguro de comprar esta cosa?</h3>
+        <button id="confirmBtn">Sí</button>
+        <button id="cancelBtn" class="cancel">No</button>
+    </div>
+
     <script src="script.js"></script>
 </body>
-</html>
+</html>
diff --git a/script.js b/script.js
@@ -1,6 +1,6 @@
 let points;
 let multiplier;
-let multiplierPrice = document.getElementById("multiplierPrice").innerText;
+let multiplierPrice;
 
 if (!localStorage.getItem("points")) {
     points = 0;
@@ -15,54 +15,115 @@ if (!localStorage.getItem("multiplier")) {
 }
 
 if (!localStorage.getItem("multiplierPrice")) {
-    multiplierPrice = document.getElementById("multiplierPrice").innerText;
+    multiplierPrice = parseInt(document.getElementById("multiplierPrice").innerText);
 } else {
-    multiplierPrice = parseInt(localStorage.getItem("multiplierPrice"))
+    multiplierPrice = parseInt(localStorage.getItem("multiplierPrice"));
 }
 
 let score = document.getElementById("score");
 let store = document.getElementById("store");
-let flexBox = document.getElementById("flexBox");
-let storeImg = document.getElementById("storeImg");
+let stats = document.getElementById("stats");
+let achievements = document.getElementById("achievements");
+let settings = document.getElementById("settings");
 let navBar = document.getElementById("navBar");
+let confirmationModal = document.getElementById("confirmationModal");
+let confirmBtn = document.getElementById("confirmBtn");
+let cancelBtn = document.getElementById("cancelBtn");
+
+score.innerText = points;
 
 function getPoints() {
-    points += (1 * multiplier)
+    points += (1 * multiplier);
     console.log(points);
     score.innerText = points;
     saveData();
 }
 
 function showStore() {
+    hideAllSections();
     store.style.display = "block";
-    flexBox.style.display = "none";
-    navBar.style.backgroundColor = "#58d68d";
-    storeImg.src = "img/back.png";
-    storeImg.setAttribute("onClick", "returnGame()");
+}
+
+function showStats() {
+    hideAllSections();
+    stats.style.display = "block";
+}
+
+function showAchievements() {
+    hideAllSections();
+    achievements.style.display = "block";
+}
+
+function showSettings() {
+    hideAllSections();
+    settings.style.display = "block";
 }
 
 function returnGame() {
-    store.style.display = "none";
-    flexBox.style.display = "flex";
-    navBar.style.backgroundColor = "#030508";
-    storeImg.src = "img/store.png";
-    storeImg.setAttribute("onClick", "showStore()");
+    hideAllSections();
+    navBar.style.display = "flex";
     score.innerText = points;
 }
 
+function hideAllSections() {
+    store.style.display = "none";
+    document.getElementById("game1").style.display = "none";
+    document.getElementById("game2").style.display = "none";
+    document.getElementById("game3").style.display = "none";
+    navBar.style.display = "none";
+}
+
+document.querySelectorAll('.storeItem').forEach(item => {
+    item.addEventListener('click', function() {
+        showConfirmationModal(getMultiplier);
+    });
+});
+
+function showConfirmationModal(callback) {
+    confirmationModal.style.display = 'block';
+
+    confirmBtn.onclick = function() {
+        callback();
+        hideConfirmationModal();
+    };
+
+    cancelBtn.onclick = function() {
+        hideConfirmationModal();
+    };
+}
+
+function hideConfirmationModal() {
+    confirmationModal.style.display = 'none';
+}
+
 function getMultiplier() {
     if (points >= multiplierPrice) {
         multiplier += 1;
         points = points - multiplierPrice;
-        multiplierPrice += (multiplierPrice * 2);
+        multiplierPrice = Math.floor(multiplierPrice * 2);
         document.getElementById("multiplierPrice").innerText = multiplierPrice;
+        saveData();
     } else {
-        console.log("¡No tenes suficientes puntos!");
+        console.log("¡No tienes suficientes puntos!");
     }
 }
 
 function saveData() {
     localStorage.setItem("points", points);
     localStorage.setItem("multiplier", multiplier);
     localStorage.setItem("multiplierPrice", multiplierPrice);
+}
+
+function goToGame(game) {
+    let gameUrls = {
+        'game1': 'flappy_cat/index.html',
+        'game2': 'flappy_cat/index.html',
+        'game3': 'flappy_cat/index.html'
+    };
+
+    if (gameUrls[game]) {
+        window.location.href = gameUrls[game];
+    } else {
+        console.log("No se encontró la URL del juego.");
+    }
 }