feat: improve cookie clicker example

scrapeOtherComics.js

@@ -0,0 +1,159 @@
+import axios from "axios";
+import * as cheerio from 'cheerio';
+import fs from 'fs';
+import md5 from "md5";
+
+const sleep = function(ms) {
+ return 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', 'utf8');
+ }
+
+ return false;
+}
+
+const cacheSet = (name, value) => {
+ fs.writeFileSync('cache/' + name + '.html', value);
+}
+
+const getHtml = async (url) => {
+ let data = cacheGet(md5(url));
+
+ if (!data) {
+  await sleep(1000);
+  console.log('!!!!! LIVE DATA', url);
+  let res = await axios.get(url, {
+   headers: {
+    'User-Agent': 'Mozilla/5.0'
+   }
+  });
+  data = res.data;
+  cacheSet(md5(url), data);
+ }
+
+ return data;
+}
+
+const absoluteUrl = (baseUrl, url) => {
+ if (!url) {
+  return '';
+ }
+
+ return new URL(url, baseUrl).href;
+}
+
+const cleanText = (value = '') => {
+ return value.replace(/\s+/g, ' ').trim();
+}
+
+const findComicImage = ($, baseUrl) => {
+ const imageSelectors = [
+  'meta[property="og:image"]',
+  'meta[name="twitter:image"]',
+  '#comic img',
+  '#strip',
+  '.entry-content img',
+  '.post-content img',
+  'article img',
+  '.comic img',
+  '.entry img',
+ ];
+
+ for (let selector of imageSelectors) {
+  let element = $(selector).first();
+
+  if (!element.length) {
+   continue;
+  }
+
+  if (element.is('meta')) {
+   let src = element.attr('content');
+   if (src) {
+    return {
+     src: absoluteUrl(baseUrl, src),
+     alt: '',
+    };
+   }
+  }
+
+  let src = element.attr('src');
+  if (src) {
+   return {
+    src: absoluteUrl(baseUrl, src),
+    alt: cleanText(element.attr('alt')),
+   };
+  }
+ }
+
+ let fallback = $('img').filter((index, element) => {
+  let src = $(element).attr('src') || '';
+
+  return src &&
+   !src.includes('logo') &&
+   !src.includes('rss') &&
+   !src.includes('facebook') &&
+   !src.includes('twitter') &&
+   !src.includes('patreon');
+ }).first();
+
+ return {
+  src: absoluteUrl(baseUrl, fallback.attr('src')),
+  alt: cleanText(fallback.attr('alt')),
+ };
+}
+
+const scrapeButtersafe = async () => {
+ console.log('--- BUTTERSAFE ---');
+
+ let url = 'https://buttersafe.com/';
+
+ for (let i = 0; i < 10 && url; i++) {
+  let data = await getHtml(url);
+  let $ = cheerio.load(data);
+  let image = findComicImage($, url);
+  let title = cleanText($('h2 a, h2, article h1, h1').first().text()) || cleanText($('title').text());
+  let prevUrl = $('a[rel="prev"]').attr('href') || $('a.prev').attr('href') || $('a').filter((index, element) => cleanText($(element).text()) === '«').first().attr('href');
+
+  console.log(image.src, title, image.alt);
+
+  url = absoluteUrl(url, prevUrl);
+ }
+}
+
+const scrapeQuestionableContent = async () => {
+ console.log('--- QUESTIONABLE CONTENT ---');
+
+ const archiveUrl = 'https://www.questionablecontent.net/archive.php';
+ const archiveData = await getHtml(archiveUrl);
+ const $ = cheerio.load(archiveData);
+ const comicLinks = [];
+
+ $('a[href*="view.php?comic="]').each((index, element) => {
+  if (comicLinks.length >= 10) {
+   return false;
+  }
+
+  comicLinks.push({
+   url: absoluteUrl(archiveUrl, $(element).attr('href')),
+   title: cleanText($(element).text()),
+  });
+ });
+
+ for (let comic of comicLinks) {
+  let data = await getHtml(comic.url);
+  let $comic = cheerio.load(data);
+  let image = findComicImage($comic, comic.url);
+
+  console.log(image.src, comic.title, image.alt);
+ }
+}
+
+await scrapeButtersafe();
+await scrapeQuestionableContent();

src/components/LeafletMap.vue

@@ -1,29 +1,62 @@
 <script setup>
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+
 import { onMounted, useId, watch } from 'vue';
 
-let { center, zoom } = defineProps(['center', 'zoom']);
+const props = defineProps({
+ center: Array,
+ zoom: Number,
+ marker: {
+  type: Array,
+  default: null,
+ },
+ polygon: {
+  type: Array,
+  default: null,
+ },
+});
 
 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);
-});
+ map = L.map(id).setView(props.center, props.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 (props.marker) {
+  L.marker(props.marker).addTo(map).bindPopup('Kodu');
+ }
+
+ if (props.polygon?.length) {
+  L.polygon(props.polygon).addTo(map).bindPopup('Kodu ala');
+ }
 
-watch(() => center, (newCenter, oldCenter) => {
-    console.log(newCenter, oldCenter);
-    map.panTo(newCenter);
-});
-watch(() => zoom, newZoom => {
-    map.setZoom(newZoom);
 });
+
+watch(() => props.center, newCenter => {
+
+ if (map) {
+  map.panTo(newCenter);
+ }
+
+ });
+watch(() => props.zoom, newZoom => {
+
+ if (map) {
+  map.setZoom(Number(newZoom));
+ }
+
+ });
 </script>
 <template>
      <div :id="id"></div>

src/pages/CookieClicker.vue

@@ -2,48 +2,117 @@
 import { computed, ref } from 'vue';
 
 const cookies = ref(0);
+const clickPower = ref(1);
+const clickUpgradePrice = ref(50);
+
 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 },
+  { 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 },
 ]);
 
-function buyBuilding(building){
-    cookies.value -= building.price;
-    building.price += Math.ceil(building.price / 100 * 15);
-    building.count++;
+function clickCookie() {
+  cookies.value += clickPower.value;
+}
+
+function buyClickUpgrade() {
+  if (cookies.value < clickUpgradePrice.value) return;
+
+  cookies.value -= clickUpgradePrice.value;
+  clickPower.value += 1;
+  clickUpgradePrice.value = Math.ceil(clickUpgradePrice.value * 1.5);
+}
+
+function buyBuilding(building) {
+  if (cookies.value < building.price) return;
+
+  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 cps = computed(() => {
+  let total = 0;
+
+  buildings.value.forEach((building) => {
+    total += building.cps * building.count;
+  });
+
+  return total;
+});
+
+const achievements = computed(() => {
+  const unlocked = [];
+
+  if (cookies.value >= 100) {
+    unlocked.push('Bake 100 cookies');
+  }
+
+  if (buildings.value.some((building) => building.count > 0)) {
+    unlocked.push('Buy first building');
+  }
+
+  if (clickPower.value > 1) {
+    unlocked.push('Upgrade click power');
+  }
+
+  return unlocked;
 });
-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!`;
+}, 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" />
-            </figure>
-        </div>
-        <div class="column is-6 has-background-link">
-            asdas
-        </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>
+  <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>
+      <h4 class="is-size-5">Click power: {{ clickPower }}</h4>
+
+      <figure class="image is-square" @click="clickCookie">
+        <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 p-4">
+      <h2 class="title is-4 has-text-white">Upgrades</h2>
+
+      <button
+        class="button is-info is-fullwidth mb-5"
+        :disabled="cookies < clickUpgradePrice"
+        @click="buyClickUpgrade"
+      >
+        Better Click (+1) - {{ clickUpgradePrice }}
+      </button>
+
+      <h2 class="title is-4 has-text-white">Achievements</h2>
+
+      <div v-if="achievements.length">
+        <p
+          v-for="achievement in achievements"
+          :key="achievement"
+          class="notification is-success mb-2"
+        >
+          {{ achievement }}
+        </p>
+      </div>
+      <p v-else class="has-text-white">No achievements yet</p>
+    </div>
+
+    <div class="column is-2 has-background-warning">
+      <button
+        v-for="building in buildings"
+        :key="building.name"
+        :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>
 </template>