cookie clicker

package.json

@@ -2,42 +2,44 @@
   "name": "learnnode",
   "version": "1.0.0",
   "description": "",
+  "main": "index.js",
   "type": "module",
   "scripts": {
     "dev": "webpack --mode development",
     "build": "webpack --mode production",
     "start": "webpack serve --mode development",
-    "deploy": "npm run build && surge ./dist kaspariscool.surge.sh",
-    "express": "nodemon server.js"
+    "deploy": "npm run build && surge ./dist monkeyt23b"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "bulma": "^1.0.2",
     "css-loader": "^7.1.2",
-    "html-webpack-plugin": "^5.6.2",
-    "nodemon": "^3.1.9",
-    "sass": "^1.80.3",
-    "sass-loader": "^16.0.2",
+    "html-loader": "^5.1.0",
+    "sass": "^1.80.6",
+    "sass-loader": "^16.0.3",
     "simple-nunjucks-loader": "^3.2.0",
     "style-loader": "^4.0.0",
     "surge": "^0.24.6",
     "vue": "^3.5.13",
     "vue-loader": "^17.4.2",
     "vue-template-compiler": "^2.7.16",
-    "webpack": "^5.95.0",
+    "webpack": "^5.99.6",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0"
   },
   "dependencies": {
-    "axios": "^1.7.9",
+    "axios": "^1.9.0",
     "body-parser": "^2.2.0",
     "cheerio": "^1.0.0",
     "express": "^5.1.0",
+    "fs": "^0.0.1-security",
+    "html-webpack-plugin": "^5.6.3",
     "leaflet": "^1.9.4",
     "md5": "^2.3.0",
+    "puppeteer": "^24.9.0",
     "vue-router": "^4.5.0",
     "ws": "^8.18.1"
   }
-}
+}

scrape.js

@@ -0,0 +1,69 @@
+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);
+}
+
+let url = 'https://www.smbc-comics.com/';
+
+(async () => {
+    for(let i = 0; i < 10; i++){
+        console.log(`Fetching page ${i+1}: ${url}`);
+
+        let data = cacheGet(md5(url));
+        if(!data){
+            await sleep(2000);
+            console.log('FETCHING LIVE DATA');
+            try {
+                const headers = {
+                    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
+                };
+                let res = await axios.get(url, { headers });
+                data = res.data;
+                cacheSet(md5(url), data);
+            } catch (error) {
+                console.error(`Error fetching ${url}:`, error.message);
+                continue;
+            }
+        } else {
+            console.log('USING CACHED DATA');
+        }
+
+        const $ = cheerio.load(data);
+        const comicImg = $('#cc-comic');
+        const imgSrc = comicImg.attr('src');
+        const imgAlt = comicImg.attr('title') || 'No alt text';
+        const comicTitle = $('title').text();
+
+        console.log(`Comic: "${comicTitle}"`);
+        console.log(`Image: ${imgSrc}`);
+        console.log(`Alt Text: ${imgAlt}`);
+
+        const prevLink = $('a.cc-prev').attr('href');
+        if (prevLink) {
+            url = prevLink;
+            console.log(`Next URL: ${url}\n`);
+        } else {
+            console.log('No previous comic link found. Stopping.');
+            break;
+        }
+    }
+})();

server.js

@@ -17,4 +17,4 @@ wss.on('connection', function connection(ws) {
   });
 
   ws.send(JSON.stringify({type: 'messages', messages}));
-});
+});

src/components/Map.vue

@@ -0,0 +1,44 @@
+<script setup>
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { onMounted, useId, watch } from 'vue';
+
+let { center, zoom } = defineProps(['center', 'zoom']);
+
+let id = 'map-' + useId();
+let map;
+let rectangle;
+
+onMounted(() => {
+    map = L.map(id).setView(center, zoom);
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(map);
+    rectangle = L.polygon([
+        [59.436574, 24.754919],
+        [59.436574, 24.75500],
+        [59.4701, 24.83300],
+        [59.4701, 24.82800]
+    ], {color: 'red', weight: 2}).addTo(map);
+    L.circleMarker([59.4780, 24.8355], {radius: 15}).addTo(map)
+});
+
+watch(() => center, (newCenter) => {
+    map.panTo(newCenter);
+});
+
+watch(() => zoom, (newZoom) => {
+    map.setZoom(newZoom);
+});
+</script>
+
+<template>
+    <div :id="id"></div>
+</template>
+
+<style scoped>
+div {
+    height: 40vh;
+}
+</style>

src/index.html

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
 </head>
 <body>
-    <div id="app"></div>
+  <div id = "app"></div>
 </body>
 </html>

src/pages/Chat.vue

@@ -1,53 +1,46 @@
 <script setup>
-import axios from 'axios';
-import { ref } from 'vue';
-
-let message = ref('');
-let messages = ref([]);
-
-
-// let res = await axios.get('http://localhost:3000/messages');
-// messages.value.push(...res.data);
-
-// Create WebSocket connection.
-const socket = new WebSocket("ws://localhost:8080");
-
-// Connection opened
-socket.addEventListener("open", (event) => {
-  //socket.send("Hello Server!");
-});
-
-// Listen for messages
-socket.addEventListener("message", (event) => {
-
-  let data = JSON.parse(event.data);
-  console.log(data);
-  if(data.type === 'messages') {
-    messages.value.push(...data.messages);
-  }
-  if(data.type === 'message') {
-    messages.value.push(data);
-  }
-});
-
+import axios from 'axios'
+import { ref } from 'vue'
+
+let message = ref('')
+let messages = ref([])
+let lastMessageDate = null
+
+let res = await axios.get('http://localhost:3000/messages')
+messages.value.push(...res.data)
+if (res.data.length > 0) {
+    let lastMessage = res.data[res.data.length - 1];
+    lastMessageDate = lastMessage.date
+}
 
+let longPoll = async () => {
+    let res = await axios.get('http://localhost:3000/messages/longpoll')
+    messages.value.push(...res.data)
+    if (res.data.length > 0) {
+        let lastMessage = res.data[res.data.length - 1];
+        lastMessageDate = lastMessage.date
+    }
+}
 
-async function send() {
-    socket.send(JSON.stringify({type: 'message', message: message.value}));
+let send = async () => {
+    let res = await axios.post('http://localhost:3000/messages', {
+        message: message.value
+    })
     message.value = '';
+
 }
 </script>
 
 <template>
     <div class="field has-addons">
         <div class="control is-expanded">
-            <input class="input" type="text" v-model="message" @keypress.enter="send">
+            <input type="text" class="input" v-model="message" @keypress.enter="send">
         </div>
         <div class="control">
             <button class="button is-primary" @click="send">Send</button>
         </div>
     </div>
     <div class="notification is-primary" v-for="msg in messages">
-        {{ msg.message }}        
+        {{ msg.message }}
     </div>
 </template>