Add achievements to cookie clicker

scrapeSMBC.js

@@ -0,0 +1,41 @@
+import axios from "axios";
+import * as cheerio from 'cheerio';
+import fs from 'fs';
+
+const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+if(!fs.existsSync('cache')){
+    fs.mkdirSync('cache');
+}
+
+const cacheGet = (name) => {
+    if(fs.existsSync('cache/' + name + '.html')){
+        return fs.readFileSync('cache/' + name + '.html');
+    }
+    return false;
+}
+
+const cacheSet = (name, value) => {
+    fs.writeFileSync('cache/' + name + '.html', value);
+}
+
+const COUNT = 10;
+let url = 'https://www.smbc-comics.com/';
+
+for(let i = 0; i < COUNT; i++){
+    let cacheName = url.replace(/[^a-z0-9]/gi, '_');
+    let data = cacheGet(cacheName);
+    if(!data){
+        await sleep(1000);
+        console.log('!!!!! LIVE DATA');
+        let res = await axios.get(url);
+        data = res.data;
+        cacheSet(cacheName, data);
+    }
+    const $ = cheerio.load(data);
+    let src = $('#cc-comicbody img').attr('src');
+    let title = $('title').text().trim();
+    let prev = $('a[rel="prev"]').attr('href');
+    console.log(src, title);
+    url = prev;
+}

src/components/LeafletMap.vue

@@ -3,22 +3,32 @@ import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { onMounted, useId, watch } from 'vue';
 
-let { center, zoom } = defineProps(['center', 'zoom']);
+let { center, zoom, home } = defineProps(['center', 'zoom', 'home']);
 
 let id = 'map-' + useId();
 let map;
 onMounted(() => {
-    console.log(document.getElementById(id));
-
     map = L.map(id).setView(center, zoom);
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
         attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
     }).addTo(map);
+
+    if (home) {
+        L.marker(home).addTo(map)
+            .bindPopup('Home sweet home')
+            .openPopup();
+
+        L.polygon([
+            [home[0] + 0.001, home[1] - 0.001],
+            [home[0] + 0.001, home[1] + 0.001],
+            [home[0] - 0.001, home[1] + 0.001],
+            [home[0] - 0.001, home[1] - 0.001],
+        ]).addTo(map);
+    }
 });
 
-watch(() => center, (newCenter, oldCenter) => {
-    console.log(newCenter, oldCenter);
+watch(() => center, (newCenter) => {
     map.panTo(newCenter);
 });
 watch(() => zoom, newZoom => {

src/pages/CookieClicker.vue

@@ -9,25 +9,47 @@ const buildings = ref([
     { name: 'Factory', price: 10_000, cps: 100, count: 0},
 ]);
 
+const achievements = ref([
+    { name: 'First Cookie', description: 'Click your first cookie', unlocked: false, condition: () => cookies.value >= 1 },
+    { name: 'Century', description: 'Reach 100 cookies', unlocked: false, condition: () => cookies.value >= 100 },
+    { name: 'First Grandma', description: 'Buy your first Grandma', unlocked: false, condition: () => buildings.value[1].count >= 1 },
+    { name: 'Cookie Storm', description: 'Reach 10 CPS', unlocked: false, condition: () => cps.value >= 10 },
+]);
+
+const notification = ref('');
+
+function showNotification(text) {
+    notification.value = text;
+    setTimeout(() => { notification.value = ''; }, 3000);
+}
+
 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;
+       cps += building.cps * building.count;
     });
     return cps;
 });
-setInterval(()=>{
-   cookies.value+=cps.value;
 
-   document.title ='🍪' + +cookies.value.toFixed(1) + ' Cookies!';
-},1000);
+setInterval(() => {
+    cookies.value += cps.value;
+    document.title = '🍪' + +cookies.value.toFixed(1) + ' Cookies!';
 
+    achievements.value.forEach(a => {
+        if (!a.unlocked && a.condition()) {
+            a.unlocked = true;
+            showNotification('🏆 Achievement unlocked: ' + a.name + '!');
+        }
+    });
+}, 1000);
 </script>
+
 <template>
     <div class="columns">
         <div class="column is-4 has-background-primary has-text-centered">
@@ -38,12 +60,20 @@ setInterval(()=>{
             </figure>
         </div>
         <div class="column is-6 has-background-link">
-            asdas
+            <h2 class="is-size-4 has-text-white mb-3">🏆 Achievements</h2>
+            <div v-for="a in achievements" class="mb-2">
+                <span v-if="a.unlocked">✅ {{ a.name }} — {{ a.description }}</span>
+                <span v-else class="has-text-grey">🔒 {{ a.name }}</span>
+            </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">
+            <button v-for="building in buildings" :disabled="cookies<building.price" @click="buyBuilding(building)" class="button is-primary is-large is-fullwidth mb-2">
                 {{ building.name }} 🍪{{ building.price }} #{{ building.count }}
             </button>
         </div>
     </div>
+
+    <div v-if="notification" style="position:fixed; bottom:20px; right:20px; background:#222; color:#fff; padding:12px 20px; border-radius:8px; font-size:1.2rem;">
+        {{ notification }}
+    </div>
 </template>

src/pages/Leaflet.vue

@@ -2,12 +2,16 @@
 import { ref } from 'vue';
 import LeafletMap from '../components/LeafletMap.vue';
 
-let coords = ref([59.42691, 24.74344]);
+let coords = ref([59.461014, 24.881075]);
 let zoom = ref(19);
+
+const HOME_LAT = 59.461014;
+const HOME_LNG = 24.881075;
 </script>
 <template>
-    <button class="button is-primary" @click="coords=[58.378003935892494, 26.727245723399832]">Go to Tartu</button>
+    <button class="button is-primary mr-2" @click="coords=[58.378003935892494, 26.727245723399832]">Go to Tartu</button>
+    <button class="button is-warning" @click="coords=[HOME_LAT, HOME_LNG]">Go to home</button>
     <input type="range" min="1" max="19" step="1" v-model="zoom">
-    <LeafletMap :center="coords" :zoom="zoom"></LeafletMap>
+    <LeafletMap :center="coords" :zoom="zoom" :home="[HOME_LAT, HOME_LNG]"></LeafletMap>
     <LeafletMap :center="[59.4332429007378, 24.75129553356808]" :zoom="10"></LeafletMap>
 </template>