From 4fce7f4d3a5b0880393176154038beabc1b13a0a Mon Sep 17 00:00:00 2001
From: sqtatdev <vjatseslac.rovvlin@tptlive.ee>
Date: Thu, 20 Mar 2025 22:50:18 +0200
Subject: [PATCH 1/3] add autosave, add gradma pic after buying it

---
 src/pages/CookieClicker.vue | 106 +++++++++++++++++++++++++++---------
 1 file changed, 80 insertions(+), 26 deletions(-)

diff --git a/src/pages/CookieClicker.vue b/src/pages/CookieClicker.vue
index 0727f08..b8688f6 100644
--- a/src/pages/CookieClicker.vue
+++ b/src/pages/CookieClicker.vue
@@ -1,49 +1,103 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount } 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: 'Factory', price: 100000, cps: 100, count: 0},
+    { name: 'Factory upgrade', price: 1000000, cps: 1000, count: 0}
 ]);
 
-function buyBuilding(building){
-    cookies.value -= building.price;
-    building.price += Math.ceil(building.price / 100 * 15);
-    building.count++;
-}
-let cps = computed(() => {
-    let cps = 0;
-    buildings.value.forEach(building => {
-       cps+=building.cps*building.count;
-    });
-    return cps;
+// Автосохранение
+const saveGameState = () => {
+  const gameState = {
+    cookies: cookies.value,
+    buildings: buildings.value.map(b => ({
+      name: b.name,
+      price: b.price,
+      cps: b.cps,
+      count: b.count
+    }))
+  };
+  
+  try {
+    localStorage.setItem('cookieGameSave', JSON.stringify(gameState));
+    console.log('Game saved:', gameState);
+  } catch (error) {
+    console.error('Save error:', error);
+  }
+};
+
+// Загрузка сохранения
+const loadGameState = () => {
+  try {
+    const savedData = localStorage.getItem('cookieGameSave');
+    if (savedData) {
+      const parsedData = JSON.parse(savedData);
+      cookies.value = parsedData.cookies || 0;
+      buildings.value = buildings.value.map(b => {
+        const savedBuilding = parsedData.buildings.find(sb => sb.name === b.name);
+        return savedBuilding ? {...b, ...savedBuilding} : b;
+      });
+      console.log('Game loaded:', parsedData);
+    }
+  } catch (error) {
+    console.error('Load error:', error);
+  }
+};
+
+// Настройка автосохранения
+let saveInterval;
+
+onMounted(() => {
+  loadGameState();
+  saveInterval = setInterval(saveGameState, 1000);
 });
-setInterval(()=>{
-   cookies.value+=cps.value;
 
-   document.title ='🍪' + +cookies.value.toFixed(1) + ' Cookies!';
-},1000);
+onBeforeUnmount(() => {
+  clearInterval(saveInterval);
+});
 
+function buyBuilding(building) {
+  cookies.value -= building.price;
+  building.price += Math.ceil(building.price / 100 * 15);
+  building.count++;
+}
+
+const cps = computed(() => 
+  buildings.value.reduce((acc, building) => 
+    acc + (building.cps * building.count), 0)
+);
+
+setInterval(() => {
+  cookies.value += cps.value;
+  document.title = `🍪${cookies.value.toFixed(1)} Cookies!`;
+}, 1000);
 </script>
 <template>
     <div class="columns">
-        <div class="column is-4 has-background-primary has-text-centered">
-            <h1 class="is-size-1">{{ +cookies.toFixed(1) }} cookies</h1>
-            <h3 class="is-size-3">{{ +cps.toFixed(1) }} cps</h3>
-            <figure class="image is-square" @click="cookies++">
-                <img src="https://sweetlorens.com/cdn/shop/products/Copy-of-Chocolate-Chunk-Full-Cookie-transparent-background.png?v=1687811511" />
+        <div class="column is-4 has-background-grey has-text-centered" >
+            <h1 class="is-size-1"> {{ +cookies.toFixed(1) }} cookies </h1>
+            <h3 class="is-size-3"> {{ +cps.toFixed(1) }} cps </h3>
+            <figure class="image is-square " @click="cookies++">
+                <img src="https://www.freeiconspng.com/uploads/cookie-png-transparent-images-background-23.png">
             </figure>
         </div>
-        <div class="column is-6 has-background-link">
-            asdas
+
+        <div class="column is-6 has-background-grey-light">
+            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Grandma' ).count >=1">
+                <img src="https://png.pngtree.com/png-clipart/20230914/original/pngtree-cute-grandma-clipart-the-cartoon-old-lady-character-has-a-bouquet-png-image_11242831.png">
+            </figure>
+            
         </div>
-        <div class="column is-2 has-background-warning">
+
+        <div class="column is-2 has-background-white-ter">
             <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 }}
+                {{ building.name }} 🍪 {{ building.price }} #{{ building.count }} 
             </button>
         </div>
     </div>
+    
 </template>
\ No newline at end of file

From bd30aed93425c08d3b41ea995c49caedc664a97f Mon Sep 17 00:00:00 2001
From: sqtatdev <vjatseslac.rovvlin@tptlive.ee>
Date: Sat, 22 Mar 2025 19:28:05 +0200
Subject: [PATCH 2/3] translate comments, add pics for every bulding, add 2 pic
 is bought more than 10

---
 src/pages/CookieClicker.vue | 43 +++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/pages/CookieClicker.vue b/src/pages/CookieClicker.vue
index b8688f6..dc5894e 100644
--- a/src/pages/CookieClicker.vue
+++ b/src/pages/CookieClicker.vue
@@ -5,12 +5,11 @@ 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: 100000, cps: 100, count: 0},
-    { name: 'Factory upgrade', price: 1000000, cps: 1000, count: 0}
+    { name: 'Farm', price: 1_000, cps: 10, count: 0},
+    { name: 'Factory', price: 10_000, cps: 30, count: 0},
 ]);
 
-// Автосохранение
+// AutoSave
 const saveGameState = () => {
   const gameState = {
     cookies: cookies.value,
@@ -30,7 +29,7 @@ const saveGameState = () => {
   }
 };
 
-// Загрузка сохранения
+// Loading the save
 const loadGameState = () => {
   try {
     const savedData = localStorage.getItem('cookieGameSave');
@@ -48,7 +47,6 @@ const loadGameState = () => {
   }
 };
 
-// Настройка автосохранения
 let saveInterval;
 
 onMounted(() => {
@@ -75,22 +73,53 @@ setInterval(() => {
   cookies.value += cps.value;
   document.title = `🍪${cookies.value.toFixed(1)} Cookies!`;
 }, 1000);
+
 </script>
+
 <template>
     <div class="columns">
         <div class="column is-4 has-background-grey has-text-centered" >
             <h1 class="is-size-1"> {{ +cookies.toFixed(1) }} cookies </h1>
             <h3 class="is-size-3"> {{ +cps.toFixed(1) }} cps </h3>
             <figure class="image is-square " @click="cookies++">
-                <img src="https://www.freeiconspng.com/uploads/cookie-png-transparent-images-background-23.png">
+                <img src="https://www.freeiconspng.com/uploads/download-biscuit-cookie-monster-clipart-24.png">
             </figure>
         </div>
 
         <div class="column is-6 has-background-grey-light">
+          <div class="columns">
+
             <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Grandma' ).count >=1">
+              <img src="https://png.pngtree.com/png-clipart/20230914/original/pngtree-cute-grandma-clipart-the-cartoon-old-lady-character-has-a-bouquet-png-image_11242831.png"> 
+            </figure>
+
+            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Grandma' ).count >=10">
                 <img src="https://png.pngtree.com/png-clipart/20230914/original/pngtree-cute-grandma-clipart-the-cartoon-old-lady-character-has-a-bouquet-png-image_11242831.png">
             </figure>
+
+          </div>
+          <div class="columns">
+
+            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Farm' ).count >=1">
+                <img src="https://pics.clipartpng.com/Corn_PNG_Clipart-466.png">
+            </figure>
+
+            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Farm' ).count >=10">
+                <img src="https://pics.clipartpng.com/Corn_PNG_Clipart-466.png">
+            </figure>
+
+          </div>  
+          <div class="columns">
+
+            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Factory' ).count >=1">
+                <img src="https://www.freeiconspng.com/uploads/gear-icon-11.png">
+            </figure>
+
+            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Factory' ).count >=10">
+                <img src="https://www.freeiconspng.com/uploads/gear-icon-11.png">
+            </figure>
             
+          </div>
         </div>
 
         <div class="column is-2 has-background-white-ter">

From a0d9b0bcfdb33e1827e64d574bcb3f5dc8b212ff Mon Sep 17 00:00:00 2001
From: sqtatdev <vjatseslac.rovvlin@tptlive.ee>
Date: Sat, 22 Mar 2025 19:28:59 +0200
Subject: [PATCH 3/3] with help of Ai made better

---
 src/pages/CookieClicker.vue | 96 +++++++++++++++++++------------------
 1 file changed, 49 insertions(+), 47 deletions(-)

diff --git a/src/pages/CookieClicker.vue b/src/pages/CookieClicker.vue
index dc5894e..8da83fe 100644
--- a/src/pages/CookieClicker.vue
+++ b/src/pages/CookieClicker.vue
@@ -23,7 +23,6 @@ const saveGameState = () => {
   
   try {
     localStorage.setItem('cookieGameSave', JSON.stringify(gameState));
-    console.log('Game saved:', gameState);
   } catch (error) {
     console.error('Save error:', error);
   }
@@ -40,7 +39,6 @@ const loadGameState = () => {
         const savedBuilding = parsedData.buildings.find(sb => sb.name === b.name);
         return savedBuilding ? {...b, ...savedBuilding} : b;
       });
-      console.log('Game loaded:', parsedData);
     }
   } catch (error) {
     console.error('Load error:', error);
@@ -59,9 +57,11 @@ onBeforeUnmount(() => {
 });
 
 function buyBuilding(building) {
-  cookies.value -= building.price;
-  building.price += Math.ceil(building.price / 100 * 15);
-  building.count++;
+  if (cookies.value >= building.price) {
+    cookies.value -= building.price;
+    building.price += Math.ceil(building.price * 0.15);
+    building.count++;
+  }
 }
 
 const cps = computed(() => 
@@ -70,63 +70,65 @@ const cps = computed(() =>
 );
 
 setInterval(() => {
-  cookies.value += cps.value;
+  cookies.value += cps.value / 10;
   document.title = `🍪${cookies.value.toFixed(1)} Cookies!`;
-}, 1000);
+}, 100);
 
 </script>
 
 <template>
     <div class="columns">
-        <div class="column is-4 has-background-grey has-text-centered" >
-            <h1 class="is-size-1"> {{ +cookies.toFixed(1) }} cookies </h1>
-            <h3 class="is-size-3"> {{ +cps.toFixed(1) }} cps </h3>
-            <figure class="image is-square " @click="cookies++">
+        <div class="column is-4 has-background-grey has-text-centered">
+            <h1 class="is-size-1"> {{ cookies.toFixed(1) }} cookies </h1>
+            <h3 class="is-size-3"> {{ cps.toFixed(1) }} cps </h3>
+            <figure class="image is-square" @click="cookies++">
                 <img src="https://www.freeiconspng.com/uploads/download-biscuit-cookie-monster-clipart-24.png">
             </figure>
         </div>
 
         <div class="column is-6 has-background-grey-light">
-          <div class="columns">
-
-            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Grandma' ).count >=1">
-              <img src="https://png.pngtree.com/png-clipart/20230914/original/pngtree-cute-grandma-clipart-the-cartoon-old-lady-character-has-a-bouquet-png-image_11242831.png"> 
-            </figure>
-
-            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Grandma' ).count >=10">
-                <img src="https://png.pngtree.com/png-clipart/20230914/original/pngtree-cute-grandma-clipart-the-cartoon-old-lady-character-has-a-bouquet-png-image_11242831.png">
-            </figure>
-
-          </div>
-          <div class="columns">
-
-            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Farm' ).count >=1">
-                <img src="https://pics.clipartpng.com/Corn_PNG_Clipart-466.png">
-            </figure>
-
-            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Farm' ).count >=10">
-                <img src="https://pics.clipartpng.com/Corn_PNG_Clipart-466.png">
-            </figure>
-
-          </div>  
-          <div class="columns">
-
-            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Factory' ).count >=1">
-                <img src="https://www.freeiconspng.com/uploads/gear-icon-11.png">
-            </figure>
-
-            <figure class="image is-square image is-96x96" v-if="buildings.find(b => b.name === 'Factory' ).count >=10">
-                <img src="https://www.freeiconspng.com/uploads/gear-icon-11.png">
-            </figure>
-            
-          </div>
+            <!-- Grandma Images -->
+            <div class="columns is-flex is-flex-wrap-wrap">
+                <figure 
+                    v-for="n in Math.floor(buildings.find(b => b.name === 'Grandma').count / 10) + 1"
+                    v-if="buildings.find(b => b.name === 'Grandma').count >= 1"
+                    class="image is-96x96 m-2"
+                    :key="'grandma-' + n">
+                    <img src="https://png.pngtree.com/png-clipart/20230914/original/pngtree-cute-grandma-clipart-the-cartoon-old-lady-character-has-a-bouquet-png-image_11242831.png">
+                </figure>
+            </div>
+
+            <!-- Farm Images -->
+            <div class="columns is-flex is-flex-wrap-wrap">
+                <figure 
+                    v-for="n in Math.floor(buildings.find(b => b.name === 'Farm').count / 10) + 1"
+                    v-if="buildings.find(b => b.name === 'Farm').count >= 1"
+                    class="image is-96x96 m-2"
+                    :key="'farm-' + n">
+                    <img src="https://pics.clipartpng.com/Corn_PNG_Clipart-466.png">
+                </figure>
+            </div>
+
+            <!-- Factory Images -->
+            <div class="columns is-flex is-flex-wrap-wrap">
+                <figure 
+                    v-for="n in Math.floor(buildings.find(b => b.name === 'Factory').count / 10) + 1"
+                    v-if="buildings.find(b => b.name === 'Factory').count >= 1"
+                    class="image is-96x96 m-2"
+                    :key="'factory-' + n">
+                    <img src="https://www.freeiconspng.com/uploads/gear-icon-11.png">
+                </figure>
+            </div>
         </div>
 
         <div class="column is-2 has-background-white-ter">
-            <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 
+                v-for="building in buildings" 
+                :disabled="cookies < building.price" 
+                @click="buyBuilding(building)" 
+                class="button is-primary is-large is-fullwidth mb-3">
+                {{ building.name }} 🍪 {{ building.price }} #{{ building.count }}
             </button>
         </div>
     </div>
-    
 </template>
\ No newline at end of file