cookie stats added

package.json

@@ -7,7 +7,8 @@
     "dev": "webpack --mode development",
     "build": "webpack --mode production",
     "start": "webpack serve --mode development",
-    "deploy": "npm run build && surge ./dist kaspariscool.surge.sh"
+    "deploy": "npm run build && surge ./dist kaspariscool.surge.sh",
+    "express": "nodemon server.js"
   },
   "keywords": [],
   "author": "",
@@ -16,7 +17,7 @@
     "bulma": "^1.0.2",
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.2",
-    "nodemon": "^3.1.7",
+    "nodemon": "^3.1.9",
     "sass": "^1.80.3",
     "sass-loader": "^16.0.2",
     "simple-nunjucks-loader": "^3.2.0",
@@ -31,6 +32,10 @@
   },
   "dependencies": {
     "axios": "^1.7.9",
-    "vue-router": "^4.5.0"
+    "body-parser": "^2.2.0",
+    "express": "^5.1.0",
+    "leaflet": "^1.9.4",
+    "vue-router": "^4.5.0",
+    "ws": "^8.18.1"
   }
 }

server.js

@@ -0,0 +1,20 @@
+import { WebSocketServer } from 'ws';
+
+const wss = new WebSocketServer({ port: 8080 });
+let messages = [];
+wss.on('connection', function connection(ws) {
+  ws.on('error', console.error);
+
+  ws.on('message', function message(data) {
+    data = JSON.parse(data);
+    console.log(data);
+    messages.push(data);
+    wss.clients.forEach(client => {
+        if(client.readyState === client.OPEN) {
+            client.send(JSON.stringify(data));
+        }
+    });
+  });
+
+  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.4850, 24.8380],
+        [59.4850, 24.8390],
+        [59.4701, 24.83250],
+        [59.4701, 24.8276]
+    ], {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.js

@@ -11,6 +11,8 @@ import ChuckNorris from './pages/ChuckNorris.vue';
 import RickAndMorty from './pages/RickAndMorty.vue';
 import CookieClicker from './pages/CookieClicker.vue';
 import Vibration from './pages/Vibration.vue';
+import Chat from './pages/Chat.vue';
+import Leaflet from './pages/Leaflet.vue';
 
 const routes = [
   { path: '/', component: ToDo, name: 'ToDo' },
@@ -19,6 +21,8 @@ const routes = [
   { path: '/rickandmorty', component: RickAndMorty, name: 'Rick And Morty' },
   { path: '/cookieclicker', component: CookieClicker, name: 'Cookie Clicker', meta: { container: false } },
   { path: '/vibration', component: Vibration, name: 'Vibration' },
+  { path: '/chat', component: Chat, name: 'Chat' },
+  { path: '/leaflet', component: Leaflet, name: 'Leaflet' },
 ];
 
 const router = createRouter({

src/pages/Chat.vue

@@ -0,0 +1,53 @@
+<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);
+  }
+});
+
+
+
+async function send() {
+    socket.send(JSON.stringify({type: 'message', 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">
+        </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 }}        
+    </div>
+</template>

src/pages/CookieClicker.vue

@@ -1,49 +1,131 @@
 <script setup>
 import { computed, ref } from 'vue';
+import Modal from '../components/Modal.vue';
 
+let modalActive = ref(false);
 const cookies = ref(0);
+
+let stats = ref({
+    'allTimeCookies': {
+        count: 0,
+        name: 'Cookies baked (all time)'
+    },
+    'clicked': {
+        count: 0,
+        name: 'Coockie clicks'
+    },
+})
+
 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: 10000, cps: 100, count: 0 },
+    { name: 'Dragclick', price: 15000, cps: 170, count: 0 },
 ]);
 
-function buyBuilding(building){
+const upgrades = ref([
+    { name: 'Double click', description: 'The cursor is twice as efficient', price: 100, key: 'Cursor', emoji: '👆', isBought: false },
+    { name: 'Forwards from grandma', description: 'Grandmas is twice as efficient', price: 500, key: 'Grandma', emoji: '👵', isBought: false },
+    { name: 'Texas farmer', description: 'Farms works twice as efficient', price: 1500, key: 'Farm', emoji: '🧺', isBought: false },
+])
+
+let buyUpgrade = (key) => {
+    let building = buildings.value.find(m => m.name === key)
+    building.count *= 2
+    let upgrade = upgrades.value.find(m => m.key === key)
+    upgrade.isBought = true
+    cookies.value -= building.price
+}
+
+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);
+let cookieClick = () => {
+    // console.log(cookies.value++)
+    cookies.value++;
+    stats.value.clicked.count++;
+    stats.value.allTimeCookies.count++;
+}
+
+setInterval(() => {
+    cookies.value += cps.value;
+    stats.value.allTimeCookies.count += 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">
+    <div class="buttons is-centered mb-5">
+        <button class="button is-primary" @click="modalActive = true">Stats</button>
+    </div>
+    <div class="columns is-centered">
+        <div class="column is-4 has-background-primary has-text-centered has-text-white">
             <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 class="image is-square" @click="cookieClick">
+                <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">
+        <div class="column is-4 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 class="column is-3 has-background-warning">
+            <div class="columns is-flex-direction-column" style="height: 100%;">
+                <div class="column is-flex-grow-0">
+                    <div class="dropdown is-hoverable mr-5" v-for="upgrade in upgrades">
+                        <div class="dropdown-trigger">
+                            <button @click="buyUpgrade(upgrade.key)" class="button has-background-primary is-size-3"
+                                aria-haspopup="true" aria-controls="dropdown-menu4" style="height: 60px; width: 60px;"
+                                v-if="!upgrade.isBought"
+                                :disabled="cookies < upgrade.price"
+                                >
+                                {{ upgrade.emoji }}
+                            </button>
+                        </div>
+                        <div class="dropdown-menu" id="dropdown-menu4" role="menu">
+                            <div class="dropdown-content">
+                                <div class="dropdown-item">
+                                    <div class="is-flex is-flex-direction-row mb-1 ">
+                                        <p class="mr-1 has-text-weight-medium">{{ upgrade.name }}</p>
+                                        <p class="has-text-weight-bold">{{ upgrade.price }}🍪</p>
+                                    </div>
+                                    <p>{{ upgrade.description }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="column">
+                    <button v-for="building in buildings" :disabled="cookies < building.price"
+                        @click="buyBuilding(building)" class="button is-primary is-medium is-fullwidth mb-4">
+                        <div class=".container.is-fullhd is-justify-content-space-between">
+                            <p>{{ building.name }} 🍪{{ building.price }}</p>
+                            <p class="has-text-light">{{ building.count }}</p>
+                        </div>
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
+    <Modal :active="modalActive" @close="modalActive = false">
+        <div class="notification is-info">
+            <button class="delete"></button>
+            <p class="mb-3 is-size-3 has-text-centered has-text-weight-medium">Statistics</p>
+            <ul>
+                <li v-for="el in stats">{{ el.name }}: {{ el.count.toFixed(1) }}</li>
+            </ul>
+        </div>
+    </Modal>
 </template>

src/pages/Leaflet.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { ref } from 'vue';
+import LeafletMap from '../components/Map.vue';
+
+let coords = ref([59.42691, 24.74344]);
+let coords_p = ref([59.42691, 24.74344]);
+let zoom = ref(19);
+</script>
+<template>
+    <button class="button is-primary mr-3" @click="coords_p=[59.47021370198976, 24.82779835857575]">Go to Pirita</button>
+    <button class="button is-primary" @click="coords=[58.378003935892494, 26.727245723399832]">Go to Tartu</button>
+    <input type="range" min="1" max="19" step="1" v-model="zoom">
+    <LeafletMap :center="coords" :zoom="zoom"></LeafletMap>
+    <LeafletMap :center="coords_p" :zoom="zoom"></LeafletMap>
+</template>