Added Cookie CLicker Features

LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package.json

@@ -2,41 +2,39 @@
   "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"
+    "dev": "webpack --mode=development",
+    "build": "webpack --mode=production",
+    "start": "webpack server --mode=development",
+    "deploy": "npm run build && surge ./dist neighborly-curve.surge.sh",
+    "server": "nodemon bin/server.js -w bin/server.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "bulma": "^1.0.2",
     "css-loader": "^7.1.2",
-    "html-webpack-plugin": "^5.6.2",
+    "html-webpack-plugin": "^5.6.3",
     "nodemon": "^3.1.9",
-    "sass": "^1.80.3",
-    "sass-loader": "^16.0.2",
-    "simple-nunjucks-loader": "^3.2.0",
+    "sass": "^1.80.6",
+    "sass-loader": "^16.0.3",
     "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.96.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0"
   },
   "dependencies": {
     "axios": "^1.7.9",
-    "body-parser": "^2.2.0",
     "cheerio": "^1.0.0",
     "express": "^5.1.0",
     "leaflet": "^1.9.4",
-    "md5": "^2.3.0",
     "vue-router": "^4.5.0",
     "ws": "^8.18.1"
   }

readme.md

@@ -1,3 +1,3 @@
-# learnnode
+# ta23alearnnode
 
-NODE_OPTIONS=--disable-warning=ExperimentalWarning --disable-warning=DeprecationWarning
+`NODE_OPTIONS=--disable-warning=ExperimentalWarning --disable-warning=DeprecationWarning`

src/App.vue

@@ -1,12 +1,13 @@
 <script setup>
 import { ref } from 'vue';
-import RouterTabs from './components/RouterTabs.vue';
+import Tabs from './components/Tabs.vue';
 
 
 </script>
+
 <template>
-    <RouterTabs></RouterTabs>
-    <div class="container" v-if="$route.meta.container === undefined">
+    <Tabs></Tabs>
+    <div class="container" v-if="$route.meta.container !== false">
         <section class="section">
             <Suspense>
                 <RouterView></RouterView>
@@ -16,4 +17,7 @@ import RouterTabs from './components/RouterTabs.vue';
     <Suspense v-else>
         <RouterView></RouterView>
     </Suspense>
-</template>
+</template>
+
+<style>
+</style>

src/components/CharacterCard.vue

@@ -1,7 +1,6 @@
 <script setup>
-    defineProps(['character']);
+defineProps(['character']);
 </script>
-
 <template>
     <div class="card">
         <header class="card-header">
@@ -16,14 +15,14 @@
             <div class="content">
                 <table>
                     <tbody>
-                        <tr>
-                            <th>Gender</th>
-                            <td>{{ character.gender }}</td>
-                        </tr>
                         <tr>
                             <th>Status</th>
                             <td>{{ character.status }}</td>
                         </tr>
+                        <tr>
+                            <th>Gender</th>
+                            <td>{{ character.gender }}</td>
+                        </tr>
                         <tr>
                             <th>Species</th>
                             <td>{{ character.species }}</td>
@@ -46,10 +45,8 @@
         </div>
     </div>
 </template>
-
-
 <style scoped>
- .card {
+.card {
     min-height: 100%;
- }
+}
 </style>

src/components/ItemList.vue

@@ -3,7 +3,7 @@ defineProps(['items', 'title']);
 </script>
 
 <template>
-    <h1>{{ title }}</h1>
+    <h3>{{ title }}</h3>
     <ul>
         <li v-for="item in items" :key="item.id">
             {{ item.name }}

src/components/LeafletMap.vue

@@ -1,36 +1,37 @@
 <script setup>
+//import * as L from 'leaflet';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+import 'leaflet/dist/images/marker-icon-2x.png';
+import 'leaflet/dist/images/marker-icon.png';
+import 'leaflet/dist/images/marker-shadow.png';
 import { onMounted, useId, watch } from 'vue';
 
-let { center, zoom } = defineProps(['center', 'zoom']);
-
-let id = 'map-' + useId();
+const {center, zoom} = defineProps(['center', 'zoom']);
+const 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);
+    var marker = L.marker([59.4269, 24.7434]).addTo(map);
 });
-
-watch(() => center, (newCenter, oldCenter) => {
-    console.log(newCenter, oldCenter);
-    map.panTo(newCenter);
+watch(() => center, (center, oldCenter) => {
+    console.log(center, oldCenter);
+    map.panTo(center);
 });
-watch(() => zoom, newZoom => {
-    map.setZoom(newZoom);
+
+watch(() => zoom, (zoom) => {
+    map.setZoom(zoom);
 });
 </script>
 <template>
      <div :id="id"></div>
 </template>
-
 <style scoped>
 div { 
-    height: 40vh;
+    height: 90vh;
 }
 </style>

src/components/Modal.vue

@@ -1,5 +1,13 @@
 <script setup>
-    defineProps(['active', 'url']);
+    defineProps(['active']);
+
+    const emit = defineEmits(['close']);
+
+    document.body.addEventListener('keydown', event => {
+        if(event.key === 'Escape'){
+            emit('close');
+        }
+    });
 </script>
 
 <template>
@@ -8,6 +16,6 @@
         <div class="modal-content">
             <slot></slot>
         </div>
-        <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
+        <button class="modal-close is-large" @click="$emit('close')" aria-label="close"></button>
     </div>
 </template>

src/components/Pagination.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { computed } from 'vue';
+
+let {info, current } = defineProps(['info', 'current']);
+
+let pageNumbers = computed(()=>{
+    let pages = [];
+    for(let i = 1; i<=3 && i<=info.pages; i++){
+        pages[i] = i;
+    }
+    if(current > 2){
+        pages.push('...');
+    }
+    if(current > 2 && current < info.pages-1) {
+        for(let i = current-1; i<=current+1; i++){
+            pages[i] = i;
+        }
+    }
+    if(current < info.pages-2){
+        pages.push('...');
+    }
+    for(let i = info.pages-2; i<=info.pages; i++){
+        pages[i] = i;
+    }
+    return pages.filter(p => p);
+});
+
+console.log(pageNumbers.value);
+</script>
+<template>
+    <nav class="pagination is-centered" role="navigation" aria-label="pagination">
+        <button @click="$emit('prev')" :disabled="!info.prev" class="pagination-previous">Previous</button>
+        <button @click="$emit('next')" :disabled="!info.next" class="pagination-next">Next page</button>
+        <ul class="pagination-list">
+            <li v-for="page in pageNumbers">
+                <span class="pagination-ellipsis" v-if="page === '...'">&hellip;</span>
+
+                <a class="pagination-link is-current"
+                    :aria-label="`Page ${page}`"
+                    aria-current="page"
+                    v-else-if="page === current">{{ page }}</a>
+
+                <a @click="$emit('page', page)"
+                    class="pagination-link"
+                    :aria-label="`Goto page ${page}`"
+                    v-else>{{ page }}</a>
+            </li>
+        </ul>
+    </nav>
+</template>

src/components/SimplePagination.vue

@@ -1,10 +1,9 @@
 <script setup>
-defineProps(['pagination']);
+    defineProps(['info']);
 </script>
-
 <template>
     <div class="buttons">
-        <button class="button is-primary" @click="$emit('prev')" :disabled="!pagination.prev">Previous</button>
-        <button class="button is-primary" @click="$emit('next')" :disabled="!pagination.next">Next</button>
+        <button class="button is-primary" @click="$emit('prev')" :disabled="!info.prev">Prev</button>
+        <button class="button is-primary" @click="$emit('next')" :disabled="!info.next">Next</button>
     </div>
 </template>

src/components/Tabs.vue

@@ -1,21 +1,18 @@
 <script setup>
-import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
-defineProps(['items']);
-let emit = defineEmits(['change']);
-let active = ref(0);
+const router = useRouter();
+const route = useRoute();
+
+console.log(router.getRoutes(), route);
 
-function setActive(key){
-    active.value = key;
-    emit('change', key);
-}
 
 </script>
 <template>
     <div class="tabs is-centered">
         <ul>
-            <li :class="{'is-active': active === key}" v-for="(item,key) in items" @click="setActive(key)">
-                <a>{{ item }}</a>
+            <li v-for="(item,key) in $router.getRoutes()" :class="{'is-active': item.path === $route.path}" >
+                <RouterLink :to="item.path">{{ item.name }}</RouterLink>
             </li>
         </ul>
     </div>

src/index.js

@@ -1,29 +1,30 @@
 import './style.scss';
-
 import { createApp } from 'vue';
 import { createWebHashHistory, createWebHistory, createMemoryHistory, createRouter } from 'vue-router';
 
+
 import App from './App.vue';
 
-import ToDo from './pages/ToDo.vue';
 import Modals from './pages/Modals.vue';
-import ChuckNorris from './pages/ChuckNorris.vue';
+import ToDo from './pages/ToDo.vue';
+import Chuck from './pages/Chuck.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 WebApis from './pages/WebApis.vue';
 import Leaflet from './pages/Leaflet.vue';
+import Chat from './pages/Chat.vue';
+
 
 const routes = [
   { path: '/', component: ToDo, name: 'ToDo' },
   { path: '/modals', component: Modals, name: 'Modals' },
-  { path: '/chuck', component: ChuckNorris, name: 'Chuck Norris' },
+  { path: '/chuck', component: Chuck, name: 'Chuck Norris' },
   { 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: '/webapis', component: WebApis, name: 'WebApis' },
+  { path: '/leaflet', component: Leaflet, name: 'Leaflet', meta: { container: false } },
   { path: '/chat', component: Chat, name: 'Chat' },
-  { path: '/leaflet', component: Leaflet, name: 'Leaflet' },
-];
+]
 
 const router = createRouter({
   history: createWebHistory(),