From 38b6002ceab1ac3d11cce46e2e88e115096bfa8f Mon Sep 17 00:00:00 2001
From: Rait Rips <Rait.Rips@tptlive.ee>
Date: Tue, 17 Jun 2025 21:31:09 +0300
Subject: [PATCH] Add upgrades for cookie clicker

---
 src/pages/CookieClicker.vue | 88 ++++++++++++++++++++++++++++++++-----
 1 file changed, 77 insertions(+), 11 deletions(-)

diff --git a/src/pages/CookieClicker.vue b/src/pages/CookieClicker.vue
index 0727f08..8631f04 100644
--- a/src/pages/CookieClicker.vue
+++ b/src/pages/CookieClicker.vue
@@ -3,21 +3,44 @@ import { computed, ref } from 'vue';
 
 const cookies = ref(0);
 const buildings = ref([
-    { name: 'Cursor', price: 15, cps: 0.1, count: 0},
-    { name: 'Grandma', price: 100, cps: 1, count: 0},
-    { name: 'Farm', price: 1000, cps: 10, count: 0},
-    { name: 'Factory', price: 10_000, cps: 100, count: 0},
+    { name: 'Cursor', price: 15, cps: 0.1, count: 0, upgrades: [
+            { name: 'Reinforced Cursor', cost: 100, multiplier: 2, purchased: false },
+            { name: 'Carbon Fiber Cursor', cost: 500, multiplier: 3, purchased: false },
+        ]},
+    { name: 'Grandma', price: 100, cps: 1, count: 0, upgrades: [
+            { name: 'Professional Baker', cost: 1000, multiplier: 2, purchased: false },
+            { name: 'Industrial Oven', cost: 5000, multiplier: 3, purchased: false },
+        ]},
+    { name: 'Farm', price: 1000, cps: 10, count: 0, upgrades: [
+            { name: 'Organic Fertilizer', cost: 5000, multiplier: 2, purchased: false },
+            { name: 'Automated Harvesters', cost: 15000, multiplier: 3, purchased: false },
+        ]},
+    { name: 'Factory', price: 10000, cps: 100, count: 0, upgrades: [
+            { name: 'Quantum Assembly', cost: 50000, multiplier: 2, purchased: false },
+            { name: 'Unionized Workplace', cost: 200000, multiplier: 3, purchased: false },
+        ]},
 ]);
 
+const selectedBuilding = ref(null);
+
 function buyBuilding(building){
     cookies.value -= building.price;
     building.price += Math.ceil(building.price / 100 * 15);
     building.count++;
 }
+function buyUpgrade(upgrade) {
+    if (cookies.value < upgrade.cost) return;
+    cookies.value -= upgrade.cost;
+    upgrade.purchased = true;
+}
 let cps = computed(() => {
     let cps = 0;
     buildings.value.forEach(building => {
-       cps+=building.cps*building.count;
+        let multiplier = 1;
+        building.upgrades.forEach(upgrade => {
+            if (upgrade.purchased) multiplier *= upgrade.multiplier;
+        });
+        cps += building.cps * building.count * multiplier;
     });
     return cps;
 });
@@ -37,13 +60,56 @@ setInterval(()=>{
                 <img src="https://sweetlorens.com/cdn/shop/products/Copy-of-Chocolate-Chunk-Full-Cookie-transparent-background.png?v=1687811511" />
             </figure>
         </div>
-        <div class="column is-6 has-background-link">
-            asdas
+        <div class="column is-6 has-background-link p-4">
+            <div v-if="selectedBuilding" class="upgrade-container">
+                <h2 class="is-size-3 has-text-centered mb-4">Upgrades for {{ selectedBuilding.name }}</h2>
+                
+                <div v-for="(upgrade, index) in selectedBuilding.upgrades" 
+                     :key="index"
+                     class="upgrade-box mb-3 p-3">
+                    <div class="is-flex is-justify-content-space-between">
+                        <div>
+                            <h4 class="is-size-5 mb-2">{{ upgrade.name }}</h4>
+                            <p>Multiplier: x{{ upgrade.multiplier }}</p>
+                        </div>
+                        <button 
+                            class="button is-info"
+                            :disabled="cookies < upgrade.cost || upgrade.purchased"
+                            @click="buyUpgrade(upgrade)">
+                            {{ upgrade.purchased ? 'Purchased' : `🍪${upgrade.cost}` }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div v-else class="has-text-centered mt-6">
+                <p class="is-size-4">Select a building to view upgrades</p>
+            </div>
         </div>
         <div class="column is-2 has-background-warning">
-            <button v-for="building in buildings" :disabled="cookies<building.price" @click="buyBuilding(building)" class="button is-primary is-large is-fullwidth">
-                {{ building.name }} 🍪{{ building.price }} #{{ building.count }}
-            </button>
+            <div v-for="(building, index) in buildings" :key="index" class="mb-2">
+                <button 
+                    :disabled="cookies < building.price" 
+                    @click="buyBuilding(building)" 
+                    class="button is-primary is-large is-fullwidth">
+                    {{ building.name }} 🍪{{ building.price }} #{{ building.count }}
+                </button>
+                <button 
+                    @click="selectedBuilding = building"
+                    class="button is-info is-fullwidth mt-1">
+                    View Upgrades
+                </button>
+            </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+<style scoped>
+.upgrade-container {
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+.upgrade-box {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+</style>
\ No newline at end of file