Add cookie banner

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "flowbite": "^1.6.2",
+        "matter-js": "^0.18.0",
         "vue": "^3.2.45",
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.1.6"
@@ -1837,6 +1838,11 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/matter-js": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/matter-js/-/matter-js-0.18.0.tgz",
+      "integrity": "sha512-/ZVem4WygUnbmo/iE4oHZpZS97btfBtYy5Iwn1396vUZU7YhgVEN8J4UWwfZwY1ZqoTYlPgjvSw9WXauuXL0mg=="
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -4160,6 +4166,11 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "matter-js": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/matter-js/-/matter-js-0.18.0.tgz",
+      "integrity": "sha512-/ZVem4WygUnbmo/iE4oHZpZS97btfBtYy5Iwn1396vUZU7YhgVEN8J4UWwfZwY1ZqoTYlPgjvSw9WXauuXL0mg=="
+    },
     "memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "flowbite": "^1.6.2",
+    "matter-js": "^0.18.0",
     "vue": "^3.2.45",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6"

src/App.vue

@@ -5,6 +5,8 @@
         <div class="container mx-auto pb-8 px-3 md:px-8 min-h-screen min-w-screen flex flex-col">
             <RouterView />
         </div>
+
+        <Cookie />
     </div>
 </template>
 
@@ -12,6 +14,7 @@
     import { onMounted } from "vue";
     import { RouterView } from "vue-router";
     import { applyTheme } from "./utilities/theme_handler";
+    import Cookie from "@/components/cookie/Cookie.vue";
     
     onMounted(() => {
         applyTheme();

src/components/cookie/Cookie.vue

@@ -0,0 +1,161 @@
+<template>
+    <div v-if="show_banner" class="w-full h-full">
+
+        <div ref="container_cookie" class="absolute top-0 left-0 h-full w-full pointer-events-none z-40">
+            <canvas ref="canvas_cookie" :width="canvas_width" :height="canvas_height"></canvas>
+        </div>
+        
+        <div ref="banner" class="fixed bottom-0 left-0 z-50">
+            <div class="border bg-slate-200/90 border-slate-700 dark:bg-slate-800/90 dark:border-slate-400 rounded w-fit lg:w-1/2 p-5 m-5">
+                <p class="text-sm">{{ t("cookie policy title") }}</p>
+                <div class="text-xs">
+                    <span>{{ t("cookie policy") }} <button :onclick="throwCookie" class="underline">{{ t("cookie policy link") }}</button></span>
+                </div>
+                <div class="flex justify-end mt-2 text-sm">
+                    <button :onclick="refuseCookieBanner" class="mx-1 hover:text-slate-500 dark:hover:text-slate-300">{{ t("reject") }}</button>
+                    <button :onclick="acceptCookieBanner" class="rounded p-2 mx-1 bg-slate-300 hover:bg-slate-400 dark:bg-slate-700 dark:hover:bg-slate-600">{{ t("accept") }}</button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref, onMounted } from 'vue';
+    // @ts-ignore
+    import { Engine, Render, Bodies, Composite, Body, Runner } from "matter-js";
+    import cookie_image from "@/assets/images/cookie.png";
+    import { randomInt, random } from "@/utilities/random";
+    import { shouldShowCookie, acceptCookie, refuseCookie } from "@/utilities/cookie_handler";
+    import { useI18n } from "vue-i18n";
+
+    const { t } = useI18n({ messages: {
+        "en": {
+            "cookie policy title": "Cookie policy",
+            "cookie policy": "This website uses cookies but not for analysis purposes and they are not sent to third parties. " +  
+                             "Actually, the only cookies here are those that I ate for breakfast, " +
+                             "but since no one ever reads these banners, no one will know what I ate this morning. " +
+                             "Maybe your reading too much, but reading is healthy, so I won't stop you. " +
+                             "Thank you for keeping me company, I wish you a great day and if you would like some cookies too do not hesitate to click on the following link:",
+            "cookie policy link": "Click here to read the policy",
+            "accept": "Accept", 
+            "reject": "Reject"
+        },
+        "it": {
+            "cookie policy title": "Informativa cookie",
+            "cookie policy": "Questo sito utilizza cookie ma non per fini di profilazione e non sono inviati a terze parti. " +  
+                             "In realtà gli unici cookie presenti sono quelli che ho mangiato a colazione, " +
+                             "ma dato che nessuno fa caso a questi banner, nessuno saprà cos'ho mangiato questa mattina. " +
+                             "Forse stai leggendo un po' troppo, ma leggere fa bene, quindi non ti fermerò. " +
+                             "Ti ringrazio per avermi fatto compagnia, ti auguro una buona giornata e se gradisci dei biscotti non esitare a cliccare l'informativa al seguente link:",
+            "cookie policy link": "Clicca qui per l'informativa cookie",
+            "accept": "Accetta", 
+            "reject": "Rifiuta"
+        }
+    } });
+
+    const container_cookie = ref();
+    const canvas_cookie = ref();
+
+    const show_banner = ref(shouldShowCookie());
+    const canvas_width = ref(getWidth());
+    const canvas_height = ref(getHeight());
+
+    let engine:any = null;
+
+
+    onMounted(() => {
+        if (shouldShowCookie()) { 
+            initCanvas();
+
+            new ResizeObserver(() => {
+                resizeCanvas();
+            }).observe(document.body);
+        }
+    });
+
+    
+    function acceptCookieBanner() {
+        acceptCookie();
+        show_banner.value = false;
+    }
+
+    function refuseCookieBanner() {
+        refuseCookie();
+        show_banner.value = false;
+    }
+
+
+    function getWidth() { return document.body.clientWidth; }
+    function getHeight() { return document.body.scrollHeight; }
+
+    function resizeCanvas() {
+        canvas_width.value = getWidth();
+        canvas_height.value = getHeight();
+    }
+
+    /* Inits cookie throwing area */
+    function initCanvas() {
+        if (!engine) {
+            engine = Engine.create();
+            let renderer = Render.create({
+                element: container_cookie.value,
+                canvas: canvas_cookie.value,
+                engine: engine,
+                options: {
+                    width: getWidth(),
+                    height: getHeight(),
+                    wireframes: false,
+                    background: "#00000000"
+                }
+            });
+            Render.run(renderer);
+            Runner.run(Runner.create(), engine);
+        }
+
+        resizeCanvas();
+    }
+
+    function throwCookie() {
+        if (!engine) { return; }
+
+        // Creates a cookie at the bottom of visible screen
+        let cookie = Bodies.circle(randomInt(0, getWidth()), (document.documentElement.scrollTop + window.screen.height), 30, {
+            render: {
+                sprite: {
+                    texture: cookie_image,
+                    xScale: 0.08, yScale: 0.08
+                }
+            }
+        });
+
+        // Adds cookie to world
+        Composite.add(engine.world, [cookie]);
+
+        // Launches cookie
+        const force = 0.02 * cookie.mass;
+        Body.applyForce(cookie, cookie.position, 
+        {
+            x: force * (cookie.position.x > getWidth()/2 ? -1 : 1),
+            y: -force * random(3, 6)
+        });
+
+        clearCookie(cookie);
+    }
+    
+    /* Clears a cookie when out of the screen */
+    function clearCookie(cookie:any) {
+        const tollerance_offset = 1000;
+
+        if (cookie.position.y > document.body.scrollHeight + tollerance_offset) { // If out of the screen
+            Composite.remove(engine.world, cookie);
+        }
+        else {
+            setTimeout(() => {
+                clearCookie(cookie);
+            }, 5000);
+        }
+    }
+
+</script>

src/utilities/cookie_handler.ts

@@ -0,0 +1,11 @@
+export function shouldShowCookie():boolean {
+    return localStorage.getItem("cookie") == undefined;
+}
+
+export function acceptCookie():void {
+    localStorage.setItem("cookie", "accept");
+}
+
+export function refuseCookie():void {
+    localStorage.setItem("cookie", "refuse");
+}

src/utilities/random.ts

@@ -0,0 +1,11 @@
+export function randomOfArray<T>(array:T[]):T {
+    return array[Math.floor(Math.random() * array.length)];
+}
+
+export function random(min:number, max:number):number {
+    return Math.random() * (max - min) + min;
+}
+
+export function randomInt(min:number, max:number):number {
+    return Math.floor(random(min, max));
+}