From 3ffc14069ada968e3179416981e392cd34a02e2c Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 15 Oct 2024 07:47:14 +0200
Subject: [PATCH 001/221] feat(homeview): Add HeaderFooterView & populate with
 default values

---
 layouts/HeaderFooterView.vue | 30 ++++++++++++++++++++++++++++++
 pages/index.vue              | 23 ++++++++++++++++++++++-
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 layouts/HeaderFooterView.vue

diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
new file mode 100644
index 0000000..8515e53
--- /dev/null
+++ b/layouts/HeaderFooterView.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex flex-col h-screen max-h-screen max-w-full">
+
+    <div class="basis-24 content-center border rounded-3xl">
+      <div class="flex justify-around">
+        <slot name="header"/>
+      </div>
+    </div>
+
+    <div class="flex-1">
+      <slot name="content"/>
+    </div>
+
+    <div class="basis-24 content-center border rounded-3xl">
+      <div class="flex justify-around">
+        <slot name="footer"/>
+      </div>
+    </div>
+
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index eb9c65c..cce341f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,15 +1,36 @@
 <script setup lang="ts">
 
+import DashboardView from "~/layouts/HeaderFooterView.vue";
+
 useSeoMeta({
   title: "BeatBuzzer",
   description: "A fun music quiz game"
 })
 
-const session = useSupabaseSession()
+//const session = useSupabaseSession()
 </script>
 
 <template>
   <div class="h-screen bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+    <DashboardView>
+      <template #header>
+        <div class="flex basis-1/2">
+          <div class="mr-3">
+            1A
+            <input type="range" name="test" id="">
+          </div>
 
+          <div>
+            2B
+            <input type="range" name="test" id="">
+          </div>
+        </div>
+      </template>
+      <template #footer>
+        <div class="text-4xl">A</div>
+        <div class="text-4xl">B</div>
+        <div class="text-4xl">C</div>
+      </template>
+    </DashboardView>
   </div>
 </template>
\ No newline at end of file

From 3ce081e2bdb745e5acaaf02e10cb1adfd9f3f53d Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 15 Oct 2024 07:51:05 +0200
Subject: [PATCH 002/221] enhance(homeview): made header & footer borders
 seamless on the top/bottom side respectively

---
 layouts/HeaderFooterView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 8515e53..2d71269 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -5,7 +5,7 @@
 <template>
   <div class="flex flex-col h-screen max-h-screen max-w-full">
 
-    <div class="basis-24 content-center border rounded-3xl">
+    <div class="basis-24 content-center border rounded-b-3xl">
       <div class="flex justify-around">
         <slot name="header"/>
       </div>
@@ -15,7 +15,7 @@
       <slot name="content"/>
     </div>
 
-    <div class="basis-24 content-center border rounded-3xl">
+    <div class="basis-24 content-center border rounded-t-3xl">
       <div class="flex justify-around">
         <slot name="footer"/>
       </div>

From 3204853a1d23167a44dfe2d900535ecbb9ad8f80 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 17 Oct 2024 08:34:05 +0200
Subject: [PATCH 003/221] fix(homeview): removed unresponsive input sliders

---
 pages/index.vue | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index cce341f..f433ca2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,16 +14,15 @@ useSeoMeta({
   <div class="h-screen bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
     <DashboardView>
       <template #header>
-        <div class="flex basis-1/2">
-          <div class="mr-3">
-            1A
-            <input type="range" name="test" id="">
-          </div>
+        <div>
+          1A
+        </div>
 
-          <div>
-            2B
-            <input type="range" name="test" id="">
-          </div>
+        <div>
+          2B
+        </div>
+        <div>
+          3C
         </div>
       </template>
       <template #footer>

From 67fcde925ec5a030c9fe0b68a743828bc3ff992e Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 18 Oct 2024 11:05:40 +0200
Subject: [PATCH 004/221] feat(ui): Introduce Mobile Layout default for every
 page

---
 layouts/SplitView.vue | 21 ++++++++++-----------
 layouts/default.vue   |  6 ++++--
 pages/index.vue       |  2 +-
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/layouts/SplitView.vue b/layouts/SplitView.vue
index 64b4ea1..57bf311 100644
--- a/layouts/SplitView.vue
+++ b/layouts/SplitView.vue
@@ -1,24 +1,23 @@
 <template>
-  <div class="flex flex-col h-screen max-h-screen max-w-full">
+  <div class="flex basis-1/3 flex-col h-screen max-h-screen max-w-screen-sm">
 
     <div class="h-1/6">
       <!-- possible Title and nav -->
       <slot name="header"/>
     </div>
 
-    <div class="flex-1 flex flex-col">
-      <div class="flex-1">
-        <!-- CONTENT WITH NO ACTION! -->
-        <slot name="content"/>
-      </div>
+    <div class="flex-1">
+      <!-- CONTENT WITH NO ACTION! -->
+      <slot name="content"/>
+    </div>
 
-      <div class="flex-1 content-end">
-        <div class="flex flex-row justify-center">
-          <!-- Action buttons like 80% width, stackable until 50% of height -->
-          <slot name="bottom"/>
-        </div>
+    <div class="basis-1/2 content-end">
+      <div class="flex flex-row justify-center">
+        <!-- Action buttons like 80% width, stackable until 50% of height -->
+        <slot name="bottom"/>
       </div>
 
+
     </div>
   </div>
 </template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 303eb6c..38417b6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,7 @@
 <template>
-  <div>
-    <slot/>
+  <div class="flex justify-center">
+    <div class="max-w-screen-sm w-screen">
+      <slot/>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index f433ca2..96ea08f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <div class="h-screen bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
     <DashboardView>
       <template #header>
         <div>

From 19628671484261420c039676e5168ea482d4476d Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 23 Oct 2024 09:19:20 +0200
Subject: [PATCH 005/221] fix(Responsive): introduce proper responsive login
 page

---
 layouts/HeaderFooterView.vue |  2 +-
 layouts/SplitView.vue        |  2 +-
 layouts/default.vue          |  2 +-
 pages/index.vue              |  3 ++-
 pages/login.vue              | 12 ++++++++++--
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 2d71269..92839f2 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div class="flex flex-col h-screen max-h-screen max-w-full">
+  <div class="flex flex-col h-screen max-h-screen">
 
     <div class="basis-24 content-center border rounded-b-3xl">
       <div class="flex justify-around">
diff --git a/layouts/SplitView.vue b/layouts/SplitView.vue
index 57bf311..898a180 100644
--- a/layouts/SplitView.vue
+++ b/layouts/SplitView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex basis-1/3 flex-col h-screen max-h-screen max-w-screen-sm">
+  <div class="flex basis-1/3 flex-col h-screen max-h-screen">
 
     <div class="h-1/6">
       <!-- possible Title and nav -->
diff --git a/layouts/default.vue b/layouts/default.vue
index 38417b6..77f5b5b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex justify-center">
-    <div class="max-w-screen-sm w-screen">
+    <div class="w-screen">
       <slot/>
     </div>
   </div>
diff --git a/pages/index.vue b/pages/index.vue
index 96ea08f..ffe0e06 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,7 +4,8 @@ import DashboardView from "~/layouts/HeaderFooterView.vue";
 
 useSeoMeta({
   title: "BeatBuzzer",
-  description: "A fun music quiz game"
+  description: "A fun music quiz game",
+  viewport: "width=device-width, initial-scale=1.0",
 })
 
 //const session = useSupabaseSession()
diff --git a/pages/login.vue b/pages/login.vue
index 600657b..567f95f 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import SplitView from "~/layouts/SplitView.vue";
+
+useSeoMeta({
+  title: "BeatBuzzer",
+  description: "A fun music quiz game",
+  viewport: "width=device-width, initial-scale=1.0",
+})
 </script>
 
 <template>
@@ -9,11 +15,13 @@ import SplitView from "~/layouts/SplitView.vue";
     <SplitView>
       <template #header/>
       <template #content>
-        <NuxtImg src="icons/logo-alpha.png" alt="BeatBuzzer"/>
+        <div class="flex justify-center overflow-hidden">
+          <NuxtImg src="icons/logo-alpha.png" alt="BeatBuzzer" sizes="100vw md:70vw lg:60vw xl:50vw 2xl:25vw"/>
+        </div>
       </template>
 
       <template #bottom>
-        <div class="w-3/4">
+        <div class="w-3/4 xl:w-1/2 2xl:w-1/4">
           <div class="mb-4">
             <LoginProviderButton provider="spotify" name="Spotify" class="w-full animate-bounce"/> <!-- class="mb-2" for consecutive providers -->
           </div>

From 9396b44fd111e2e3cf3c6d014116ef6bf086a089 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 31 Oct 2024 10:20:33 +0100
Subject: [PATCH 006/221] chore(docs): add typedoc

---
 package-lock.json               | 642 +++++++++++++++++++++++++++++++-
 package.json                    |  11 +-
 server/utils/data-validation.ts |  12 +-
 typedoc.json                    |  20 +
 4 files changed, 675 insertions(+), 10 deletions(-)
 create mode 100644 typedoc.json

diff --git a/package-lock.json b/package-lock.json
index b80a5ec..decf1e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,11 +13,14 @@
         "@nuxtjs/tailwindcss": "^6.12.1",
         "nuxt": "^3.13.0",
         "vue": "latest",
-        "vue-router": "latest"
+        "vue-router": "latest",
+        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@nuxt/eslint": "^0.5.7",
-        "eslint": "^9.11.1"
+        "@types/node": "^22.8.5",
+        "eslint": "^9.11.1",
+        "typedoc": "^0.26.10"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -3434,6 +3437,62 @@
         "win32"
       ]
     },
+    "node_modules/@shikijs/core": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.2.tgz",
+      "integrity": "sha512-bvIQcd8BEeR1yFvOYv6HDiyta2FFVePbzeowf5pPS1avczrPK+cjmaxxh0nx5QzbON7+Sv0sQfQVciO7bN72sg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/engine-javascript": "1.22.2",
+        "@shikijs/engine-oniguruma": "1.22.2",
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.3"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.2.tgz",
+      "integrity": "sha512-iOvql09ql6m+3d1vtvP8fLCVCK7BQD1pJFmHIECsujB0V32BJ0Ab6hxk1ewVSMFA58FI0pR2Had9BKZdyQrxTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "oniguruma-to-js": "0.4.3"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.2.tgz",
+      "integrity": "sha512-GIZPAGzQOy56mGvWMoZRPggn0dTlBf1gutV5TdceLCZlFNqWmuc7u+CzD0Gd9vQUTgLbrt0KLzz6FNprqYAxlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.2.tgz",
+      "integrity": "sha512-NCWDa6LGZqTuzjsGfXOBWfjS/fDIbDdmVDug+7ykVe1IKT4c1gakrvlfFYp5NhAXH/lyqLM8wsAPo5wNy73Feg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz",
+      "integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@sindresorhus/merge-streams": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
@@ -3561,6 +3620,16 @@
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "license": "MIT"
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/http-proxy": {
       "version": "1.17.15",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.15.tgz",
@@ -3577,13 +3646,23 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/node": {
-      "version": "22.6.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.6.1.tgz",
-      "integrity": "sha512-V48tCfcKb/e6cVUigLAaJDAILdMP0fUW6BidkPK4GpGjXcfbnoHasCZDwz3N3yVt5we2RHm4XTQCpv0KJz9zqw==",
+      "version": "22.8.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.5.tgz",
+      "integrity": "sha512-5iYk6AMPtsMbkZqCO1UGF9W5L38twq11S2pYWkybGHH2ogPUvXWNlQqJBzuEZWKj/WRH+QTeiv6ySWqJtvIEgA==",
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.2"
+        "undici-types": "~6.19.8"
       }
     },
     "node_modules/@types/normalize-package-data": {
@@ -3604,6 +3683,13 @@
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
       "license": "MIT"
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.12",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz",
@@ -3831,6 +3917,13 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/@unhead/dom": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.11.6.tgz",
@@ -5127,6 +5220,17 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -5150,6 +5254,28 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -5419,6 +5545,17 @@
       "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
       "license": "MIT"
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -6027,6 +6164,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destr": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.3.tgz",
@@ -6058,6 +6205,20 @@
       "integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==",
       "license": "MIT"
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -7581,6 +7742,44 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
+      "integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -7606,6 +7805,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/http-assert": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/http-assert/-/http-assert-1.5.0.tgz",
@@ -8590,6 +8800,16 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/listhen": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.7.2.tgz",
@@ -8708,6 +8928,13 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/magic-string": {
       "version": "0.30.11",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
@@ -8764,12 +8991,59 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
       "license": "CC0-1.0"
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -8803,6 +9077,100 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+      "integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -10018,6 +10386,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/oniguruma-to-js": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz",
+      "integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regex": "^4.3.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/only": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/only/-/only-0.0.2.tgz",
@@ -11203,6 +11584,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/protocols": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz",
@@ -11230,6 +11622,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -11513,6 +11915,13 @@
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
+    "node_modules/regex": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz",
+      "integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/regexp-ast-analysis": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/regexp-ast-analysis/-/regexp-ast-analysis-0.7.1.tgz",
@@ -12188,6 +12597,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/shiki": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.2.tgz",
+      "integrity": "sha512-3IZau0NdGKXhH2bBlUk4w1IHNxPh6A5B2sUpyY+8utLu2j/h1QpFkAaUA1bAMxOWWGtTWcAh531vnS4NJKS/lA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/core": "1.22.2",
+        "@shikijs/engine-javascript": "1.22.2",
+        "@shikijs/engine-oniguruma": "1.22.2",
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -12355,6 +12779,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -12491,6 +12926,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -13118,6 +13568,17 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "license": "MIT"
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -13204,6 +13665,45 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typedoc": {
+      "version": "0.26.10",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.26.10.tgz",
+      "integrity": "sha512-xLmVKJ8S21t+JeuQLNueebEuTVphx6IrP06CdV7+0WVflUSW3SPmR+h1fnWVdAR/FQePEgsSWCUHXqKKjzuUAw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lunr": "^2.3.9",
+        "markdown-it": "^14.1.0",
+        "minimatch": "^9.0.5",
+        "shiki": "^1.16.2",
+        "yaml": "^2.5.1"
+      },
+      "bin": {
+        "typedoc": "bin/typedoc"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x"
+      }
+    },
+    "node_modules/typedoc/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.6.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
@@ -13219,6 +13719,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ufo": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
@@ -13340,6 +13847,79 @@
         "unplugin": "^1.14.1"
       }
     },
+    "node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -13615,6 +14195,36 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz",
@@ -14887,6 +15497,26 @@
       "engines": {
         "node": ">= 14"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index dcf7fd2..ffd3bf5 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,9 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "docs": "typedoc",
+    "docs:serve": "typedoc && npx serve docs"
   },
   "dependencies": {
     "@hebilicious/authjs-nuxt": "^0.3.5",
@@ -16,10 +18,13 @@
     "@nuxtjs/tailwindcss": "^6.12.1",
     "nuxt": "^3.13.0",
     "vue": "latest",
-    "vue-router": "latest"
+    "vue-router": "latest",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@nuxt/eslint": "^0.5.7",
-    "eslint": "^9.11.1"
+    "@types/node": "^22.8.5",
+    "eslint": "^9.11.1",
+    "typedoc": "^0.26.10"
   }
 }
diff --git a/server/utils/data-validation.ts b/server/utils/data-validation.ts
index d4c5cda..d8d2876 100644
--- a/server/utils/data-validation.ts
+++ b/server/utils/data-validation.ts
@@ -1,3 +1,13 @@
+/**
+ * Spotify ID regex
+ */
+export const spotifyIDRegex = /^[a-zA-Z0-9]+$/; // base62
+
+/**
+ * Check if a string is a valid Spotify ID
+ * @param spotifyID - The string to check
+ * @returns Whether the string is a valid Spotify ID
+ */
 export function isValidSpotifyID(spotifyID: string): boolean {
-  return spotifyID.match(/^[a-zA-Z0-9]+$/) !== null; // base62
+  return spotifyID.match(spotifyIDRegex) !== null; // base62
 }
\ No newline at end of file
diff --git a/typedoc.json b/typedoc.json
new file mode 100644
index 0000000..df650a3
--- /dev/null
+++ b/typedoc.json
@@ -0,0 +1,20 @@
+{
+  "entryPoints": ["./"],
+  "entryPointStrategy": "expand",
+  "exclude": [
+    "node_modules/**/*",
+    "dist/**/*",
+    ".nuxt/**/*",
+    ".output/**/*"
+  ],
+  "excludePrivate": true,
+  "excludeProtected": true,
+  "excludeExternals": true,
+  "includeVersion": true,
+  "out": "docs",
+  "plugin": [],
+  "readme": "README.md",
+  "theme": "default",
+  "tsconfig": "./tsconfig.json",
+  "hideGenerator": true
+}
\ No newline at end of file

From 4f14f2f71edfd761d14093b51110e0515f126b51 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 31 Oct 2024 11:46:08 +0100
Subject: [PATCH 007/221] feat(api): Implement playlist endpoint

---
 .env.example                         |  3 ++
 server/api/v1/playlist/[uid].get.ts  | 21 +++++++++--
 server/api/v1/playlist/index.get.ts  | 27 ++++++++++++++
 server/api/v1/playlist/index.post.ts | 55 ++++++++++++++++++++++++++++
 server/api/v1/playlist/playlist.http | 36 ++++++++++++++++++
 server/utils/postgres-errors.ts      |  4 ++
 server/utils/spotify.ts              | 46 +++++++++++++++++++++++
 7 files changed, 189 insertions(+), 3 deletions(-)
 create mode 100644 server/api/v1/playlist/index.get.ts
 create mode 100644 server/api/v1/playlist/index.post.ts
 create mode 100644 server/api/v1/playlist/playlist.http
 create mode 100644 server/utils/postgres-errors.ts
 create mode 100644 server/utils/spotify.ts

diff --git a/.env.example b/.env.example
index a303c20..943a364 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,5 @@
 SUPABASE_URL="https://yourhost.supabase.co"
 SUPABASE_KEY="your-secret-key"
+SUPABASE_SERVICE_KEY="your-service-key"
+NUXT_SPOTIFY_CLIENT_ID="your-client-id"
+NUXT_SPOTIFY_CLIENT_SECRET="your-client-secret"
\ No newline at end of file
diff --git a/server/api/v1/playlist/[uid].get.ts b/server/api/v1/playlist/[uid].get.ts
index 3a13d4c..b9be938 100644
--- a/server/api/v1/playlist/[uid].get.ts
+++ b/server/api/v1/playlist/[uid].get.ts
@@ -1,10 +1,18 @@
-import {serverSupabaseUser} from "#supabase/server";
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 
+
+/**
+ * Endpoint to get a playlist by id
+ * @returns {Object} - Playlist object
+ * @throws {400} - Invalid playlistId
+ * @throws {401} - Unauthenticated
+ * @throws {500} - Internal Server Error
+ */
 export default defineEventHandler(async (event) => {
     const playlistId = getRouterParam(event, 'uid')
 
     // check regex playlistId
-    if (!isValidSpotifyID(playlistId)) {
+    if (!playlistId || !isValidSpotifyID(playlistId!)) {
         setResponseStatus(event, 400);
         return {error: 'invalid playlistId'};
     }
@@ -16,6 +24,13 @@ export default defineEventHandler(async (event) => {
         return {error: 'unauthenticated'};
     }
 
+    const client = serverSupabaseServiceRole(event);
+    const {data, error} = await client.from('playlists').select('*').eq('id', playlistId).single();
+
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
 
-    return user;
+    return data;
 })
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.get.ts b/server/api/v1/playlist/index.get.ts
new file mode 100644
index 0000000..1a23cb1
--- /dev/null
+++ b/server/api/v1/playlist/index.get.ts
@@ -0,0 +1,27 @@
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+
+/**
+ * Endpoint to get all playlists
+ * @throws {401} - Unauthenticated
+ * @throws {500} - Internal Server Error
+ * @returns {Array} - Array of playlists
+ */
+export default defineEventHandler(async (event) => {
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    const client = serverSupabaseServiceRole(event);
+    const {data, error} = await client.from('playlists').select();
+
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    return data;
+})
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
new file mode 100644
index 0000000..8a756a2
--- /dev/null
+++ b/server/api/v1/playlist/index.post.ts
@@ -0,0 +1,55 @@
+import {z} from 'zod'
+import {spotifyIDRegex} from "~/server/utils/data-validation";
+import {serverSupabaseServiceRole} from "#supabase/server";
+import {UNIQUE_VIOLATION} from "~/server/utils/postgres-errors";
+import {getPlaylistCover, getSpotifyToken} from "~/server/utils/spotify";
+
+const schema = z.object({
+    id: z.string().regex(spotifyIDRegex),
+    name: z.string(),
+    spotifyId: z.string().regex(spotifyIDRegex),
+    categories: z.array(z.string()),
+    enabled: z.boolean().optional()
+})
+
+
+/**
+ * Unauthenticated endpoint to create a playlist - management only
+ * @throws {400} - Invalid body
+ * @throws {400} - Playlist with this ID already exists
+ * @throws {500} - Internal Server Error
+ * @returns {Object} - Created playlist
+ */
+export default defineEventHandler(async (event) => {
+    const result = await readValidatedBody(event, body => schema.safeParse(body))
+
+    if (!result.success) {
+        setResponseStatus(event, 400);
+        return {error: result.error.issues};
+    }
+
+    const token = await getSpotifyToken();
+    const coverUrl = await getPlaylistCover(token, result.data.spotifyId);
+
+    const playlistInsert = {
+        id: result.data.id,
+        name: result.data.name,
+        spotifyId: result.data.spotifyId,
+        cover: coverUrl
+    }
+
+    const client = serverSupabaseServiceRole(event)
+    const {data, error} = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
+
+    if (error) {
+        setResponseStatus(event, 400);
+        if (error.code === UNIQUE_VIOLATION)
+            return {error: 'Playlist with this ID already exists'};
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+
+    setResponseStatus(event, 201);
+    return data;
+})
\ No newline at end of file
diff --git a/server/api/v1/playlist/playlist.http b/server/api/v1/playlist/playlist.http
new file mode 100644
index 0000000..e958f8c
--- /dev/null
+++ b/server/api/v1/playlist/playlist.http
@@ -0,0 +1,36 @@
+@baseUrl = http://localhost:3000/api/v1
+@authCookie =
+
+### Get all Playlists
+GET {{baseUrl}}/playlist
+Cookie: {{authCookie}}
+
+
+### Get specific Playlist
+@playlistId = 37i9dQZF1EIYE32WUF6sxN
+
+GET {{baseUrl}}/playlist/{{playlistId}}
+Cookie: {{authCookie}}
+
+
+### Add a Spotify Playlist to our system
+POST {{baseUrl}}/playlist
+
+{
+"id": "37i9dQZF1EIYE32WUF6sxN",
+"name": "Hardstyle Popular",
+"spotifyId": "37i9dQZF1EIYE32WUF6sxN",
+"categories": ["hardstyle", "remix"]
+}
+
+### Add a Disabled Spotify Playlist to our system
+POST {{baseUrl}}/playlist
+
+{
+"id": "4DC0uhUb7itYVuVVF3goSN",
+"name": "Memes",
+"spotifyId": "4DC0uhUb7itYVuVVF3goSN",
+"categories": ["meme"],
+"enabled": false
+}
+
diff --git a/server/utils/postgres-errors.ts b/server/utils/postgres-errors.ts
new file mode 100644
index 0000000..bbc1982
--- /dev/null
+++ b/server/utils/postgres-errors.ts
@@ -0,0 +1,4 @@
+export const UNIQUE_VIOLATION = '23505';
+export const FOREIGN_KEY_VIOLATION = '23503';
+export const NOT_NULL_VIOLATION = '23502';
+
diff --git a/server/utils/spotify.ts b/server/utils/spotify.ts
new file mode 100644
index 0000000..3639c9f
--- /dev/null
+++ b/server/utils/spotify.ts
@@ -0,0 +1,46 @@
+let spotifyToken: string | null = null
+let tokenExpiry: number = 0
+
+export async function getSpotifyToken() {
+    // Return cached token if valid
+    if (spotifyToken && tokenExpiry > Date.now()) {
+        return spotifyToken
+    }
+
+    const auth = Buffer
+        .from(`${process.env.SPOTIFY_CLIENT_ID}:${process.env.SPOTIFY_CLIENT_SECRET}`)
+        .toString('base64')
+
+    try {
+        const res = await fetch('https://accounts.spotify.com/api/token', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Basic ${auth}`,
+                'Content-Type': 'application/x-www-form-urlencoded'
+            },
+            body: 'grant_type=client_credentials'
+        })
+
+        const data = await res.json()
+        spotifyToken = data.access_token
+        tokenExpiry = Date.now() + (data.expires_in - 60) * 1000
+
+        return spotifyToken
+    } catch (error) {
+        console.error('Spotify token error:', error)
+        throw createError({
+            statusCode: 500,
+            message: 'Failed to get Spotify access token'
+        })
+    }
+}
+
+export async function getPlaylistCover(token: string | null, playlistId: string): Promise<string | undefined> {
+    if (!token) return undefined;
+
+    const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}?fields=images`, {
+        headers: {'Authorization': `Bearer ${token}`}
+    })
+    const data = await res.json()
+    return data.images[0].url;
+}
\ No newline at end of file

From d8dd8454d037d1cec93e9e126a0e7ddcbd2051bc Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 7 Nov 2024 13:15:38 +0100
Subject: [PATCH 008/221] chore(readme): Update Readme and .env example to
 match current state of app

---
 .env.example |  4 ++--
 README.md    | 37 +++----------------------------------
 2 files changed, 5 insertions(+), 36 deletions(-)

diff --git a/.env.example b/.env.example
index 943a364..f50895e 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,5 @@
 SUPABASE_URL="https://yourhost.supabase.co"
 SUPABASE_KEY="your-secret-key"
 SUPABASE_SERVICE_KEY="your-service-key"
-NUXT_SPOTIFY_CLIENT_ID="your-client-id"
-NUXT_SPOTIFY_CLIENT_SECRET="your-client-secret"
\ No newline at end of file
+SPOTIFY_CLIENT_ID="your-client-id"
+SPOTIFY_CLIENT_SECRET="your-client-secret"
\ No newline at end of file
diff --git a/README.md b/README.md
index eacb11b..6907cea 100644
--- a/README.md
+++ b/README.md
@@ -7,17 +7,7 @@ Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introdu
 Make sure to install the dependencies:
 
 ```bash
-# npm
 npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
 ```
 
 ## Development Server
@@ -25,36 +15,15 @@ bun install
 Start the development server on `http://localhost:3000`:
 
 ```bash
-# npm
 npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
 ```
 
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-```
-
-Locally preview production build:
-
+## TSDocs
 ```bash
-# npm
-npm run preview
+npm run docs:serve
 ```
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
 
 ## Required Environment Variables
-Check `.env.demo` for the required environment variables.
\ No newline at end of file
+Check `.env.example` for the required environment variables.
\ No newline at end of file

From 3f10687f8d2da44bbdd8ea48cf4a8dbe61fd5509 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 15 Nov 2024 11:33:25 +0100
Subject: [PATCH 009/221] disable ssr

---
 nuxt.config.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7ff5887..e3d0745 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -17,5 +17,6 @@ export default defineNuxtConfig({
     },
     devServer: {
         host: '0.0.0.0'
-    }
+    },
+    ssr: false
 })
\ No newline at end of file

From ff4e5c8576d48cc54ed65c4a394e710549a64e29 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 15 Nov 2024 11:41:09 +0100
Subject: [PATCH 010/221] fix(api): Playlists were disabled on creation

---
 nuxt.config.ts                       |  5 +++++
 server/api/v1/playlist/index.post.ts |  2 +-
 server/api/v1/playlist/playlist.http | 16 ++++++++--------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index e3d0745..debde16 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -13,6 +13,11 @@ export default defineNuxtConfig({
         },
         cookieOptions: {
             secure: false, //TODO: set to true when deploying
+        },
+        clientOptions: {
+            db: {
+                schema: 'beatbuzzer',
+            }
         }
     },
     devServer: {
diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index 8a756a2..7fa2412 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -9,7 +9,7 @@ const schema = z.object({
     name: z.string(),
     spotifyId: z.string().regex(spotifyIDRegex),
     categories: z.array(z.string()),
-    enabled: z.boolean().optional()
+    enabled: z.boolean().optional().default(true)
 })
 
 
diff --git a/server/api/v1/playlist/playlist.http b/server/api/v1/playlist/playlist.http
index e958f8c..629a587 100644
--- a/server/api/v1/playlist/playlist.http
+++ b/server/api/v1/playlist/playlist.http
@@ -17,20 +17,20 @@ Cookie: {{authCookie}}
 POST {{baseUrl}}/playlist
 
 {
-"id": "37i9dQZF1EIYE32WUF6sxN",
-"name": "Hardstyle Popular",
-"spotifyId": "37i9dQZF1EIYE32WUF6sxN",
-"categories": ["hardstyle", "remix"]
+"id": "37i9dQZF1DX2CtuHQcongT",
+"name": "This is SEGA SOUND TEAM",
+"spotifyId": "37i9dQZF1DX2CtuHQcongT",
+"categories": ["sega"]
 }
 
 ### Add a Disabled Spotify Playlist to our system
 POST {{baseUrl}}/playlist
 
 {
-"id": "4DC0uhUb7itYVuVVF3goSN",
-"name": "Memes",
-"spotifyId": "4DC0uhUb7itYVuVVF3goSN",
-"categories": ["meme"],
+"id": "37i9dQZF1DX2CtuHQcongT",
+"name": "This is SEGA SOUND TEAM",
+"spotifyId": "37i9dQZF1DX2CtuHQcongT",
+"categories": ["sega"]
 "enabled": false
 }
 

From 373980b5c9fb696820c496a8892b9a36a368f6d4 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 29 Nov 2024 10:31:01 +0100
Subject: [PATCH 011/221] feat(layout): HeaderFooterView now centering like
 mobile

---
 layouts/HeaderFooterView.vue | 33 +++++++++++++++++++--------------
 pages/index.vue              |  8 +++-----
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 92839f2..0cecbb1 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -3,25 +3,30 @@
 </script>
 
 <template>
-  <div class="flex flex-col h-screen max-h-screen">
-
-    <div class="basis-24 content-center border rounded-b-3xl">
-      <div class="flex justify-around">
-        <slot name="header"/>
+  <div class="flex flex-col h-screen max-h-screen items-center">
+    <!-- Wrapper div für die Breiten-Kontrolle -->
+    <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
+
+      <!-- Header -->
+      <div class="basis-24 border rounded-b-3xl">
+        <div class="flex justify-around items-center h-full">
+          <slot name="header"/>
+        </div>
       </div>
-    </div>
-
-    <div class="flex-1">
-      <slot name="content"/>
-    </div>
 
-    <div class="basis-24 content-center border rounded-t-3xl">
-      <div class="flex justify-around">
-        <slot name="footer"/>
+      <!-- Content -->
+      <div class="flex-1">
+        <slot name="content"/>
       </div>
-    </div>
 
+      <!-- Footer -->
+      <div class="basis-24 border rounded-t-3xl">
+        <div class="flex justify-around items-center h-full">
+          <slot name="footer"/>
+        </div>
+      </div>
 
+    </div>
   </div>
 </template>
 
diff --git a/pages/index.vue b/pages/index.vue
index ffe0e06..8686f48 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import DashboardView from "~/layouts/HeaderFooterView.vue";
+import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
 
 useSeoMeta({
   title: "BeatBuzzer",
@@ -8,17 +8,15 @@ useSeoMeta({
   viewport: "width=device-width, initial-scale=1.0",
 })
 
-//const session = useSupabaseSession()
 </script>
 
 <template>
   <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
-    <DashboardView>
+    <HeaderFooterView>
       <template #header>
         <div>
           1A
         </div>
-
         <div>
           2B
         </div>
@@ -31,6 +29,6 @@ useSeoMeta({
         <div class="text-4xl">B</div>
         <div class="text-4xl">C</div>
       </template>
-    </DashboardView>
+    </HeaderFooterView>
   </div>
 </template>
\ No newline at end of file

From 7c5d31086276ea416928e1753158d13900038bf4 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 30 Nov 2024 00:23:50 +0100
Subject: [PATCH 012/221] added categories to get requests

---
 server/api/v1/playlist/[uid].get.ts | 10 +++++++---
 server/api/v1/playlist/index.get.ts | 14 +++++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/server/api/v1/playlist/[uid].get.ts b/server/api/v1/playlist/[uid].get.ts
index b9be938..ace864b 100644
--- a/server/api/v1/playlist/[uid].get.ts
+++ b/server/api/v1/playlist/[uid].get.ts
@@ -25,12 +25,16 @@ export default defineEventHandler(async (event) => {
     }
 
     const client = serverSupabaseServiceRole(event);
-    const {data, error} = await client.from('playlists').select('*').eq('id', playlistId).single();
+    const {data, error} = await client.from('playlists').select('*, categories (name)').eq('id', playlistId).single();
 
     if (error) {
         setResponseStatus(event, 500);
         return {error: error.message};
+    } else {
+        const transformedData = {
+            ...data,
+            categories: data.categories.map(category => category.name)
+          };
+        return transformedData;
     }
-
-    return data;
 })
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.get.ts b/server/api/v1/playlist/index.get.ts
index 1a23cb1..c1e3d9b 100644
--- a/server/api/v1/playlist/index.get.ts
+++ b/server/api/v1/playlist/index.get.ts
@@ -16,12 +16,20 @@ export default defineEventHandler(async (event) => {
     }
 
     const client = serverSupabaseServiceRole(event);
-    const {data, error} = await client.from('playlists').select();
+    const {data, error} = await client.from('playlists')
+    .select(`
+        *,
+        categories (name)
+    `);
 
     if (error) {
         setResponseStatus(event, 500);
         return {error: error.message};
+    } else {
+        const transformedData = data.map(playlist => ({
+            ...playlist,
+            categories: playlist.categories.map(category => category.name),
+        }));
+        return transformedData;
     }
-
-    return data;
 })
\ No newline at end of file

From 3d511f30c5e151d889922d6302b107f8320ba8f5 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 30 Nov 2024 12:37:31 +0100
Subject: [PATCH 013/221] added categories to post request (getPlaylistCover
 doesn't work)

---
 server/api/v1/playlist/index.post.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index 7fa2412..d53e039 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -21,6 +21,7 @@ const schema = z.object({
  * @returns {Object} - Created playlist
  */
 export default defineEventHandler(async (event) => {
+    // fix coverUrl and delete test.vue
     const result = await readValidatedBody(event, body => schema.safeParse(body))
 
     if (!result.success) {
@@ -36,11 +37,18 @@ export default defineEventHandler(async (event) => {
         name: result.data.name,
         spotifyId: result.data.spotifyId,
         cover: coverUrl
+        //cover: "https://i.scdn.co/image/ab67706f000000024d183558628c25f8cb314eea"
     }
 
-    const client = serverSupabaseServiceRole(event)
+    const categoriesInsert = result.data.categories.map((category) => ({
+        playlistId: result.data.id,
+        name: category,
+    }));
+
+    const client = serverSupabaseServiceRole(event);
     const {data, error} = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
 
+
     if (error) {
         setResponseStatus(event, 400);
         if (error.code === UNIQUE_VIOLATION)
@@ -49,6 +57,15 @@ export default defineEventHandler(async (event) => {
         return {error: error.message};
     }
 
+    const { data: categoriesData, error: categoriesError } = await client
+    .from('categories')
+    .insert(categoriesInsert as never);
+
+    if (categoriesError) {
+    setResponseStatus(event, 500);
+    return { error: `Error inserting categories: ${categoriesError.message}` };
+    }
+
 
     setResponseStatus(event, 201);
     return data;

From 05ef067c168c30127503078ed59dd9a5b85f2668 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sat, 30 Nov 2024 12:42:18 +0100
Subject: [PATCH 014/221] feat(friends): Start implementing database layer

---
 DB/friendships.sql                         | 122 +++++++++++++++++++++
 DB/users.sql                               |  15 +++
 server/api/v1/user/friends/index.delete.ts |   1 +
 server/api/v1/user/friends/index.get.ts    |   1 +
 server/api/v1/user/friends/index.post.ts   |   1 +
 server/api/v1/user/friends/index.put.ts    |   1 +
 6 files changed, 141 insertions(+)
 create mode 100644 DB/friendships.sql
 create mode 100644 DB/users.sql
 create mode 100644 server/api/v1/user/friends/index.delete.ts
 create mode 100644 server/api/v1/user/friends/index.get.ts
 create mode 100644 server/api/v1/user/friends/index.post.ts
 create mode 100644 server/api/v1/user/friends/index.put.ts

diff --git a/DB/friendships.sql b/DB/friendships.sql
new file mode 100644
index 0000000..711151d
--- /dev/null
+++ b/DB/friendships.sql
@@ -0,0 +1,122 @@
+CREATE TYPE friendship_status AS ENUM ('pending', 'accepted', 'declined', 'blocked');
+
+CREATE TABLE friendships
+(
+    friendship_id  BIGSERIAL PRIMARY KEY,
+    user1_id       UUID                     NOT NULL,
+    user2_id       UUID                     NOT NULL,
+    status         friendship_status        NOT NULL,
+    action_user_id UUID                     NOT NULL, -- The user who performed the last action
+    created_at     TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
+    updated_at     TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
+
+    -- Ensure user1_id is always less than user2_id to prevent duplicate friendships
+    CONSTRAINT ensure_user_order CHECK (user1_id < user2_id),
+    CONSTRAINT unique_friendship UNIQUE (user1_id, user2_id),
+
+    -- Foreign keys
+    CONSTRAINT fk_user1 FOREIGN KEY (user1_id) REFERENCES users (id),
+    CONSTRAINT fk_user2 FOREIGN KEY (user2_id) REFERENCES users (id),
+    CONSTRAINT fk_action_user FOREIGN KEY (action_user_id) REFERENCES users (id)
+);
+
+CREATE INDEX idx_friendship_user1 ON friendships (user1_id, status);
+CREATE INDEX idx_friendship_user2 ON friendships (user2_id, status);
+
+-- Functions
+
+-- automatically update updated_at timestamp
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+    RETURNS TRIGGER AS
+$$
+BEGIN
+    NEW.updated_at = now();
+    RETURN NEW;
+END;
+$$;
+
+CREATE TRIGGER update_friendships_timestamp
+    BEFORE UPDATE
+    ON friendships
+    FOR EACH ROW
+EXECUTE FUNCTION update_updated_at_column();
+
+-- Send a friend request
+CREATE OR REPLACE FUNCTION send_friend_request(sender_id UUID, receiver_id UUID) RETURNS void AS
+$$
+DECLARE
+    smaller_id UUID;
+    larger_id  UUID;
+BEGIN
+    -- Determine order of IDs using UUID comparison
+    IF sender_id < receiver_id THEN
+        smaller_id := sender_id;
+        larger_id := receiver_id;
+    ELSE
+        smaller_id := receiver_id;
+        larger_id := sender_id;
+    END IF;
+
+    -- Insert friendship record
+    INSERT INTO friendships (user1_id, user2_id, status, action_user_id)
+    VALUES (smaller_id, larger_id, 'pending', sender_id)
+    ON CONFLICT (user1_id, user2_id) DO UPDATE
+        SET status         = CASE
+                                 WHEN friendships.status = 'declined' THEN 'pending'::friendship_status
+                                 ELSE friendships.status
+            END,
+            action_user_id = sender_id;
+END;
+$$ LANGUAGE plpgsql;
+
+-- retrieve incoming friend requests
+CREATE OR REPLACE FUNCTION get_incoming_friend_requests(user_id UUID)
+    RETURNS TABLE
+            (
+                friendship_id BIGINT,
+                sender_id     UUID,
+                receiver_id   UUID,
+                status        friendship_status,
+                created_at    TIMESTAMP WITH TIME ZONE,
+                updated_at    TIMESTAMP WITH TIME ZONE
+            )
+AS
+$$
+BEGIN
+    RETURN QUERY
+        SELECT f.friendship_id,
+               CASE
+                   WHEN f.user1_id = user_id THEN f.user2_id
+                   ELSE f.user1_id
+                   END AS sender_id,
+               user_id AS receiver_id,
+               f.status,
+               f.created_at,
+               f.updated_at
+        FROM friendships f
+        WHERE (f.user1_id = user_id OR f.user2_id = user_id)
+          AND f.status = 'pending'
+          AND f.action_user_id != user_id;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION accept_friend_request_by_id(friendship_id_param BIGINT)
+    RETURNS void AS
+$$
+BEGIN
+    UPDATE friendships
+    SET status = 'accepted'
+    WHERE friendship_id = friendship_id_param
+      AND status = 'pending';
+
+    IF NOT FOUND THEN
+        RAISE EXCEPTION 'No pending friend request found with this ID';
+    END IF;
+END;
+$$ LANGUAGE plpgsql;
+
+
+-- examples
+SELECT *
+FROM get_incoming_friend_requests('d2e6a9a3-a0be-45ce-ae39-676c6a88c53a');
+SELECT accept_friend_request_by_id(4::bigint);
\ No newline at end of file
diff --git a/DB/users.sql b/DB/users.sql
new file mode 100644
index 0000000..ef78b16
--- /dev/null
+++ b/DB/users.sql
@@ -0,0 +1,15 @@
+CREATE TABLE users
+(
+    id                 uuid    not null references auth.users on delete cascade,
+    avatar_url         text,
+    username           text    not null,
+    spotify_id         text    not null,
+    spotify_visibility boolean not null default false,
+    primary key (id)
+);
+
+ALTER TABLE users
+    ADD CONSTRAINT unique_username UNIQUE (username),
+    ADD CONSTRAINT valid_username check (username <> '' AND length(trim(username)) >= 4 AND username ~ '^[a-zA-Z0-9_]+$');
+
+CREATE INDEX idx_username ON users(username);
\ No newline at end of file
diff --git a/server/api/v1/user/friends/index.delete.ts b/server/api/v1/user/friends/index.delete.ts
new file mode 100644
index 0000000..950c339
--- /dev/null
+++ b/server/api/v1/user/friends/index.delete.ts
@@ -0,0 +1 @@
+// remove friend
\ No newline at end of file
diff --git a/server/api/v1/user/friends/index.get.ts b/server/api/v1/user/friends/index.get.ts
new file mode 100644
index 0000000..2efc70f
--- /dev/null
+++ b/server/api/v1/user/friends/index.get.ts
@@ -0,0 +1 @@
+// Not relative to userid because you should always only be able to see your own friends
\ No newline at end of file
diff --git a/server/api/v1/user/friends/index.post.ts b/server/api/v1/user/friends/index.post.ts
new file mode 100644
index 0000000..2ab0ba0
--- /dev/null
+++ b/server/api/v1/user/friends/index.post.ts
@@ -0,0 +1 @@
+// send friend invite
\ No newline at end of file
diff --git a/server/api/v1/user/friends/index.put.ts b/server/api/v1/user/friends/index.put.ts
new file mode 100644
index 0000000..d5fe53c
--- /dev/null
+++ b/server/api/v1/user/friends/index.put.ts
@@ -0,0 +1 @@
+// accept or decline friend request
\ No newline at end of file

From a8a731d0daae502c127af6a2e0b753b3377d1be1 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sat, 30 Nov 2024 12:53:38 +0100
Subject: [PATCH 015/221] fix(playlist): Fix playlist cover not loading

---
 server/api/v1/playlist/index.post.ts | 2 --
 server/utils/spotify.ts              | 5 +++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index d53e039..d22a410 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -21,7 +21,6 @@ const schema = z.object({
  * @returns {Object} - Created playlist
  */
 export default defineEventHandler(async (event) => {
-    // fix coverUrl and delete test.vue
     const result = await readValidatedBody(event, body => schema.safeParse(body))
 
     if (!result.success) {
@@ -37,7 +36,6 @@ export default defineEventHandler(async (event) => {
         name: result.data.name,
         spotifyId: result.data.spotifyId,
         cover: coverUrl
-        //cover: "https://i.scdn.co/image/ab67706f000000024d183558628c25f8cb314eea"
     }
 
     const categoriesInsert = result.data.categories.map((category) => ({
diff --git a/server/utils/spotify.ts b/server/utils/spotify.ts
index 3639c9f..1f07a71 100644
--- a/server/utils/spotify.ts
+++ b/server/utils/spotify.ts
@@ -38,9 +38,10 @@ export async function getSpotifyToken() {
 export async function getPlaylistCover(token: string | null, playlistId: string): Promise<string | undefined> {
     if (!token) return undefined;
 
-    const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}?fields=images`, {
+    const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/images`, {
         headers: {'Authorization': `Bearer ${token}`}
     })
     const data = await res.json()
-    return data.images[0].url;
+    // console.log(data)
+    return data[0].url;
 }
\ No newline at end of file

From d6f80fa424b910881bed29840409f32283f1da4d Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sat, 30 Nov 2024 13:05:24 +0100
Subject: [PATCH 016/221] feat(playlist): Add DDL for playlist database schema

---
 DB/playlists.sql | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 DB/playlists.sql

diff --git a/DB/playlists.sql b/DB/playlists.sql
new file mode 100644
index 0000000..9c39e60
--- /dev/null
+++ b/DB/playlists.sql
@@ -0,0 +1,17 @@
+create table playlists
+(
+    id          text                  not null primary key,
+    "spotifyId" text                  not null,
+    name        text                  not null,
+    cover       text,
+    enabled     boolean default false not null
+);
+
+CREATE UNIQUE INDEX enabled_playlist_unique_name ON playlists (name) WHERE enabled = true;
+
+create table categories
+(
+    name         text not null,
+    "playlistId" text not null references playlists,
+    primary key (name, "playlistId")
+);

From c6a32f28d17c061d4b623d8e4a5f48b261cc9c31 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sat, 30 Nov 2024 13:28:22 +0100
Subject: [PATCH 017/221] feat(friends): Add decline db function

---
 DB/friendships.sql | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/DB/friendships.sql b/DB/friendships.sql
index 711151d..7e52344 100644
--- a/DB/friendships.sql
+++ b/DB/friendships.sql
@@ -1,4 +1,4 @@
-CREATE TYPE friendship_status AS ENUM ('pending', 'accepted', 'declined', 'blocked');
+CREATE TYPE friendship_status AS ENUM ('pending', 'accepted', 'declined');
 
 CREATE TABLE friendships
 (
@@ -33,7 +33,7 @@ BEGIN
     NEW.updated_at = now();
     RETURN NEW;
 END;
-$$;
+$$ LANGUAGE plpgsql;
 
 CREATE TRIGGER update_friendships_timestamp
     BEFORE UPDATE
@@ -116,7 +116,24 @@ END;
 $$ LANGUAGE plpgsql;
 
 
+CREATE OR REPLACE FUNCTION decline_friend_request_by_id(friendship_id_param BIGINT)
+    RETURNS void AS
+$$
+BEGIN
+    UPDATE friendships
+    SET status = 'declined'
+    WHERE friendship_id = friendship_id_param
+      AND status = 'pending';
+
+    IF NOT FOUND THEN
+        RAISE EXCEPTION 'No pending friend request found with this ID';
+    END IF;
+END;
+$$ LANGUAGE plpgsql;
+
+
 -- examples
-SELECT *
-FROM get_incoming_friend_requests('d2e6a9a3-a0be-45ce-ae39-676c6a88c53a');
-SELECT accept_friend_request_by_id(4::bigint);
\ No newline at end of file
+SELECT send_friend_request('sender', 'receiver');
+SELECT * FROM get_incoming_friend_requests('d2e6a9a3-a0be-45ce-ae39-676c6a88c53a');
+SELECT accept_friend_request_by_id(4);
+SELECT decline_friend_request_by_id(4);

From 90aaf2d3f9f65fa94447e516c1141974ac5898b2 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 30 Nov 2024 16:15:27 +0100
Subject: [PATCH 018/221] added correct return statement

---
 server/api/v1/playlist/index.post.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index d22a410..7131877 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -44,15 +44,15 @@ export default defineEventHandler(async (event) => {
     }));
 
     const client = serverSupabaseServiceRole(event);
-    const {data, error} = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
+    const {data: playlistData, error: playlistError} = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
 
 
-    if (error) {
+    if (playlistError) {
         setResponseStatus(event, 400);
-        if (error.code === UNIQUE_VIOLATION)
+        if (playlistError.code === UNIQUE_VIOLATION)
             return {error: 'Playlist with this ID already exists'};
         setResponseStatus(event, 500);
-        return {error: error.message};
+        return {error: playlistError.message};
     }
 
     const { data: categoriesData, error: categoriesError } = await client
@@ -66,5 +66,5 @@ export default defineEventHandler(async (event) => {
 
 
     setResponseStatus(event, 201);
-    return data;
+    return { playlist: playlistData, categories: categoriesData };
 })
\ No newline at end of file

From f52f50c6094b24a624eaa776924abe5723fd6088 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 17 Oct 2024 08:46:53 +0200
Subject: [PATCH 019/221] feat(api): Add sample code for  features with high
 usage likelihood

---
 server/api/v1/README.md | 80 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 server/api/v1/README.md

diff --git a/server/api/v1/README.md b/server/api/v1/README.md
new file mode 100644
index 0000000..36bd42f
--- /dev/null
+++ b/server/api/v1/README.md
@@ -0,0 +1,80 @@
+# Examples how to create api handlers
+
+## Example 1: Simple handler
+
+Route based: `server/api/v1/hello.ts` will hear on `/api/v1/hello`
+
+```ts
+import {serverSupabaseClient} from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+    const client = await serverSupabaseClient(event)
+    const {data} = await client.from('calculations').select('*')
+
+    return {data: data}
+})
+```
+
+## Example 2: Handler with Route parameters
+File: `server/api/hello/[name].ts`.  
+Square brackets indicate wildcard that will get passed to handler.
+
+
+```ts
+export default defineEventHandler((event) => {
+    const name = getRouterParam(event, 'name')
+
+    return `Hello, ${name}!`
+})
+```
+
+## Example 3: Handler with Query parameters
+Example: `/api/query?foo=bar&baz=qux`
+
+```ts
+export default defineEventHandler((event) => {
+    const query = getQuery(event)
+
+    return { a: query.foo, b: query.baz }   
+})
+```
+
+## Example 4: Handler with POST body
+
+File: `server/api/v1/hello.POST.ts`
+```ts
+import { z } from 'zod'
+
+const userSchema = z.object({
+    name: z.string().default('Guest'),
+    email: z.string().email(),
+})
+
+export default defineEventHandler(async (event) => {
+    const result = await readValidatedBody(event, body => userSchema.safeParse(body)) // or `.parse` to directly throw an error
+
+    if (!result.success)
+        throw result.error.issues
+
+    // User object is validated and typed!
+    return result.data
+})
+```
+
+## Example 5: Custom Error handling
+
+```ts
+export default defineEventHandler(async (event) => {
+    throw createError({
+        statusCode: 400,
+        statusMessage: 'ID should be an integer',
+    })
+})
+```
+
+## Example 6: Custom Status Codes
+```ts
+export default defineEventHandler(async (event) => {
+    setResponseStatus(event, 202)
+})
+```
\ No newline at end of file

From d073ffb5278a738186cc7da712b0fbe10427b3ef Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 18 Oct 2024 10:14:16 +0200
Subject: [PATCH 020/221] feat(api): Add Playlist & User Endpoint

---
 server/api/v1/health.ts             |  8 ++++++++
 server/api/v1/playlist/[uid].get.ts | 21 +++++++++++++++++++++
 server/api/v1/user/[uid].get.ts     |  5 +++++
 server/utils/data-validation.ts     |  3 +++
 4 files changed, 37 insertions(+)
 create mode 100644 server/api/v1/health.ts
 create mode 100644 server/api/v1/playlist/[uid].get.ts
 create mode 100644 server/api/v1/user/[uid].get.ts
 create mode 100644 server/utils/data-validation.ts

diff --git a/server/api/v1/health.ts b/server/api/v1/health.ts
new file mode 100644
index 0000000..ab9acdf
--- /dev/null
+++ b/server/api/v1/health.ts
@@ -0,0 +1,8 @@
+export default defineEventHandler(async () => {
+    return {
+        status: 'ok',
+        timestamp: new Date().toISOString(),
+        uptime: process.uptime(),
+        memoryUsage: process.memoryUsage().heapUsed*1e-6, // in MB
+    };
+})
\ No newline at end of file
diff --git a/server/api/v1/playlist/[uid].get.ts b/server/api/v1/playlist/[uid].get.ts
new file mode 100644
index 0000000..3a13d4c
--- /dev/null
+++ b/server/api/v1/playlist/[uid].get.ts
@@ -0,0 +1,21 @@
+import {serverSupabaseUser} from "#supabase/server";
+
+export default defineEventHandler(async (event) => {
+    const playlistId = getRouterParam(event, 'uid')
+
+    // check regex playlistId
+    if (!isValidSpotifyID(playlistId)) {
+        setResponseStatus(event, 400);
+        return {error: 'invalid playlistId'};
+    }
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+
+    return user;
+})
\ No newline at end of file
diff --git a/server/api/v1/user/[uid].get.ts b/server/api/v1/user/[uid].get.ts
new file mode 100644
index 0000000..f42c743
--- /dev/null
+++ b/server/api/v1/user/[uid].get.ts
@@ -0,0 +1,5 @@
+export default defineEventHandler((event) => {
+    const userId = getRouterParam(event, 'uid')
+
+    return;
+})
\ No newline at end of file
diff --git a/server/utils/data-validation.ts b/server/utils/data-validation.ts
new file mode 100644
index 0000000..d4c5cda
--- /dev/null
+++ b/server/utils/data-validation.ts
@@ -0,0 +1,3 @@
+export function isValidSpotifyID(spotifyID: string): boolean {
+  return spotifyID.match(/^[a-zA-Z0-9]+$/) !== null; // base62
+}
\ No newline at end of file

From d29d61e57a48429e4bc623b0adf204f3e52459f6 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 31 Oct 2024 10:20:33 +0100
Subject: [PATCH 021/221] chore(docs): add typedoc

---
 package-lock.json               | 642 +++++++++++++++++++++++++++++++-
 package.json                    |  11 +-
 server/utils/data-validation.ts |  12 +-
 typedoc.json                    |  20 +
 4 files changed, 675 insertions(+), 10 deletions(-)
 create mode 100644 typedoc.json

diff --git a/package-lock.json b/package-lock.json
index b80a5ec..decf1e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,11 +13,14 @@
         "@nuxtjs/tailwindcss": "^6.12.1",
         "nuxt": "^3.13.0",
         "vue": "latest",
-        "vue-router": "latest"
+        "vue-router": "latest",
+        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@nuxt/eslint": "^0.5.7",
-        "eslint": "^9.11.1"
+        "@types/node": "^22.8.5",
+        "eslint": "^9.11.1",
+        "typedoc": "^0.26.10"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -3434,6 +3437,62 @@
         "win32"
       ]
     },
+    "node_modules/@shikijs/core": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.2.tgz",
+      "integrity": "sha512-bvIQcd8BEeR1yFvOYv6HDiyta2FFVePbzeowf5pPS1avczrPK+cjmaxxh0nx5QzbON7+Sv0sQfQVciO7bN72sg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/engine-javascript": "1.22.2",
+        "@shikijs/engine-oniguruma": "1.22.2",
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.3"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.2.tgz",
+      "integrity": "sha512-iOvql09ql6m+3d1vtvP8fLCVCK7BQD1pJFmHIECsujB0V32BJ0Ab6hxk1ewVSMFA58FI0pR2Had9BKZdyQrxTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "oniguruma-to-js": "0.4.3"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.2.tgz",
+      "integrity": "sha512-GIZPAGzQOy56mGvWMoZRPggn0dTlBf1gutV5TdceLCZlFNqWmuc7u+CzD0Gd9vQUTgLbrt0KLzz6FNprqYAxlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.2.tgz",
+      "integrity": "sha512-NCWDa6LGZqTuzjsGfXOBWfjS/fDIbDdmVDug+7ykVe1IKT4c1gakrvlfFYp5NhAXH/lyqLM8wsAPo5wNy73Feg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz",
+      "integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@sindresorhus/merge-streams": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
@@ -3561,6 +3620,16 @@
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "license": "MIT"
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/http-proxy": {
       "version": "1.17.15",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.15.tgz",
@@ -3577,13 +3646,23 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/node": {
-      "version": "22.6.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.6.1.tgz",
-      "integrity": "sha512-V48tCfcKb/e6cVUigLAaJDAILdMP0fUW6BidkPK4GpGjXcfbnoHasCZDwz3N3yVt5we2RHm4XTQCpv0KJz9zqw==",
+      "version": "22.8.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.5.tgz",
+      "integrity": "sha512-5iYk6AMPtsMbkZqCO1UGF9W5L38twq11S2pYWkybGHH2ogPUvXWNlQqJBzuEZWKj/WRH+QTeiv6ySWqJtvIEgA==",
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.2"
+        "undici-types": "~6.19.8"
       }
     },
     "node_modules/@types/normalize-package-data": {
@@ -3604,6 +3683,13 @@
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
       "license": "MIT"
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.12",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz",
@@ -3831,6 +3917,13 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/@unhead/dom": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.11.6.tgz",
@@ -5127,6 +5220,17 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -5150,6 +5254,28 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -5419,6 +5545,17 @@
       "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
       "license": "MIT"
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -6027,6 +6164,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destr": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.3.tgz",
@@ -6058,6 +6205,20 @@
       "integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==",
       "license": "MIT"
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -7581,6 +7742,44 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
+      "integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -7606,6 +7805,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/http-assert": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/http-assert/-/http-assert-1.5.0.tgz",
@@ -8590,6 +8800,16 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/listhen": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.7.2.tgz",
@@ -8708,6 +8928,13 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/magic-string": {
       "version": "0.30.11",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
@@ -8764,12 +8991,59 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
       "license": "CC0-1.0"
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -8803,6 +9077,100 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+      "integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -10018,6 +10386,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/oniguruma-to-js": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz",
+      "integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regex": "^4.3.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/only": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/only/-/only-0.0.2.tgz",
@@ -11203,6 +11584,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/protocols": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz",
@@ -11230,6 +11622,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -11513,6 +11915,13 @@
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
+    "node_modules/regex": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz",
+      "integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/regexp-ast-analysis": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/regexp-ast-analysis/-/regexp-ast-analysis-0.7.1.tgz",
@@ -12188,6 +12597,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/shiki": {
+      "version": "1.22.2",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.2.tgz",
+      "integrity": "sha512-3IZau0NdGKXhH2bBlUk4w1IHNxPh6A5B2sUpyY+8utLu2j/h1QpFkAaUA1bAMxOWWGtTWcAh531vnS4NJKS/lA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/core": "1.22.2",
+        "@shikijs/engine-javascript": "1.22.2",
+        "@shikijs/engine-oniguruma": "1.22.2",
+        "@shikijs/types": "1.22.2",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -12355,6 +12779,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -12491,6 +12926,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -13118,6 +13568,17 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "license": "MIT"
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -13204,6 +13665,45 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typedoc": {
+      "version": "0.26.10",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.26.10.tgz",
+      "integrity": "sha512-xLmVKJ8S21t+JeuQLNueebEuTVphx6IrP06CdV7+0WVflUSW3SPmR+h1fnWVdAR/FQePEgsSWCUHXqKKjzuUAw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lunr": "^2.3.9",
+        "markdown-it": "^14.1.0",
+        "minimatch": "^9.0.5",
+        "shiki": "^1.16.2",
+        "yaml": "^2.5.1"
+      },
+      "bin": {
+        "typedoc": "bin/typedoc"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x"
+      }
+    },
+    "node_modules/typedoc/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.6.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
@@ -13219,6 +13719,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ufo": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
@@ -13340,6 +13847,79 @@
         "unplugin": "^1.14.1"
       }
     },
+    "node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -13615,6 +14195,36 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.7",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz",
@@ -14887,6 +15497,26 @@
       "engines": {
         "node": ">= 14"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index dcf7fd2..ffd3bf5 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,9 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "docs": "typedoc",
+    "docs:serve": "typedoc && npx serve docs"
   },
   "dependencies": {
     "@hebilicious/authjs-nuxt": "^0.3.5",
@@ -16,10 +18,13 @@
     "@nuxtjs/tailwindcss": "^6.12.1",
     "nuxt": "^3.13.0",
     "vue": "latest",
-    "vue-router": "latest"
+    "vue-router": "latest",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@nuxt/eslint": "^0.5.7",
-    "eslint": "^9.11.1"
+    "@types/node": "^22.8.5",
+    "eslint": "^9.11.1",
+    "typedoc": "^0.26.10"
   }
 }
diff --git a/server/utils/data-validation.ts b/server/utils/data-validation.ts
index d4c5cda..d8d2876 100644
--- a/server/utils/data-validation.ts
+++ b/server/utils/data-validation.ts
@@ -1,3 +1,13 @@
+/**
+ * Spotify ID regex
+ */
+export const spotifyIDRegex = /^[a-zA-Z0-9]+$/; // base62
+
+/**
+ * Check if a string is a valid Spotify ID
+ * @param spotifyID - The string to check
+ * @returns Whether the string is a valid Spotify ID
+ */
 export function isValidSpotifyID(spotifyID: string): boolean {
-  return spotifyID.match(/^[a-zA-Z0-9]+$/) !== null; // base62
+  return spotifyID.match(spotifyIDRegex) !== null; // base62
 }
\ No newline at end of file
diff --git a/typedoc.json b/typedoc.json
new file mode 100644
index 0000000..df650a3
--- /dev/null
+++ b/typedoc.json
@@ -0,0 +1,20 @@
+{
+  "entryPoints": ["./"],
+  "entryPointStrategy": "expand",
+  "exclude": [
+    "node_modules/**/*",
+    "dist/**/*",
+    ".nuxt/**/*",
+    ".output/**/*"
+  ],
+  "excludePrivate": true,
+  "excludeProtected": true,
+  "excludeExternals": true,
+  "includeVersion": true,
+  "out": "docs",
+  "plugin": [],
+  "readme": "README.md",
+  "theme": "default",
+  "tsconfig": "./tsconfig.json",
+  "hideGenerator": true
+}
\ No newline at end of file

From b41df3315a78280eb2bfe289fa935814cdbd8a43 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 31 Oct 2024 11:46:08 +0100
Subject: [PATCH 022/221] feat(api): Implement playlist endpoint

---
 .env.example                         |  3 ++
 server/api/v1/playlist/[uid].get.ts  | 21 +++++++++--
 server/api/v1/playlist/index.get.ts  | 27 ++++++++++++++
 server/api/v1/playlist/index.post.ts | 55 ++++++++++++++++++++++++++++
 server/api/v1/playlist/playlist.http | 36 ++++++++++++++++++
 server/utils/postgres-errors.ts      |  4 ++
 server/utils/spotify.ts              | 46 +++++++++++++++++++++++
 7 files changed, 189 insertions(+), 3 deletions(-)
 create mode 100644 server/api/v1/playlist/index.get.ts
 create mode 100644 server/api/v1/playlist/index.post.ts
 create mode 100644 server/api/v1/playlist/playlist.http
 create mode 100644 server/utils/postgres-errors.ts
 create mode 100644 server/utils/spotify.ts

diff --git a/.env.example b/.env.example
index a303c20..943a364 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,5 @@
 SUPABASE_URL="https://yourhost.supabase.co"
 SUPABASE_KEY="your-secret-key"
+SUPABASE_SERVICE_KEY="your-service-key"
+NUXT_SPOTIFY_CLIENT_ID="your-client-id"
+NUXT_SPOTIFY_CLIENT_SECRET="your-client-secret"
\ No newline at end of file
diff --git a/server/api/v1/playlist/[uid].get.ts b/server/api/v1/playlist/[uid].get.ts
index 3a13d4c..b9be938 100644
--- a/server/api/v1/playlist/[uid].get.ts
+++ b/server/api/v1/playlist/[uid].get.ts
@@ -1,10 +1,18 @@
-import {serverSupabaseUser} from "#supabase/server";
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 
+
+/**
+ * Endpoint to get a playlist by id
+ * @returns {Object} - Playlist object
+ * @throws {400} - Invalid playlistId
+ * @throws {401} - Unauthenticated
+ * @throws {500} - Internal Server Error
+ */
 export default defineEventHandler(async (event) => {
     const playlistId = getRouterParam(event, 'uid')
 
     // check regex playlistId
-    if (!isValidSpotifyID(playlistId)) {
+    if (!playlistId || !isValidSpotifyID(playlistId!)) {
         setResponseStatus(event, 400);
         return {error: 'invalid playlistId'};
     }
@@ -16,6 +24,13 @@ export default defineEventHandler(async (event) => {
         return {error: 'unauthenticated'};
     }
 
+    const client = serverSupabaseServiceRole(event);
+    const {data, error} = await client.from('playlists').select('*').eq('id', playlistId).single();
+
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
 
-    return user;
+    return data;
 })
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.get.ts b/server/api/v1/playlist/index.get.ts
new file mode 100644
index 0000000..1a23cb1
--- /dev/null
+++ b/server/api/v1/playlist/index.get.ts
@@ -0,0 +1,27 @@
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+
+/**
+ * Endpoint to get all playlists
+ * @throws {401} - Unauthenticated
+ * @throws {500} - Internal Server Error
+ * @returns {Array} - Array of playlists
+ */
+export default defineEventHandler(async (event) => {
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    const client = serverSupabaseServiceRole(event);
+    const {data, error} = await client.from('playlists').select();
+
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    return data;
+})
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
new file mode 100644
index 0000000..8a756a2
--- /dev/null
+++ b/server/api/v1/playlist/index.post.ts
@@ -0,0 +1,55 @@
+import {z} from 'zod'
+import {spotifyIDRegex} from "~/server/utils/data-validation";
+import {serverSupabaseServiceRole} from "#supabase/server";
+import {UNIQUE_VIOLATION} from "~/server/utils/postgres-errors";
+import {getPlaylistCover, getSpotifyToken} from "~/server/utils/spotify";
+
+const schema = z.object({
+    id: z.string().regex(spotifyIDRegex),
+    name: z.string(),
+    spotifyId: z.string().regex(spotifyIDRegex),
+    categories: z.array(z.string()),
+    enabled: z.boolean().optional()
+})
+
+
+/**
+ * Unauthenticated endpoint to create a playlist - management only
+ * @throws {400} - Invalid body
+ * @throws {400} - Playlist with this ID already exists
+ * @throws {500} - Internal Server Error
+ * @returns {Object} - Created playlist
+ */
+export default defineEventHandler(async (event) => {
+    const result = await readValidatedBody(event, body => schema.safeParse(body))
+
+    if (!result.success) {
+        setResponseStatus(event, 400);
+        return {error: result.error.issues};
+    }
+
+    const token = await getSpotifyToken();
+    const coverUrl = await getPlaylistCover(token, result.data.spotifyId);
+
+    const playlistInsert = {
+        id: result.data.id,
+        name: result.data.name,
+        spotifyId: result.data.spotifyId,
+        cover: coverUrl
+    }
+
+    const client = serverSupabaseServiceRole(event)
+    const {data, error} = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
+
+    if (error) {
+        setResponseStatus(event, 400);
+        if (error.code === UNIQUE_VIOLATION)
+            return {error: 'Playlist with this ID already exists'};
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+
+    setResponseStatus(event, 201);
+    return data;
+})
\ No newline at end of file
diff --git a/server/api/v1/playlist/playlist.http b/server/api/v1/playlist/playlist.http
new file mode 100644
index 0000000..e958f8c
--- /dev/null
+++ b/server/api/v1/playlist/playlist.http
@@ -0,0 +1,36 @@
+@baseUrl = http://localhost:3000/api/v1
+@authCookie =
+
+### Get all Playlists
+GET {{baseUrl}}/playlist
+Cookie: {{authCookie}}
+
+
+### Get specific Playlist
+@playlistId = 37i9dQZF1EIYE32WUF6sxN
+
+GET {{baseUrl}}/playlist/{{playlistId}}
+Cookie: {{authCookie}}
+
+
+### Add a Spotify Playlist to our system
+POST {{baseUrl}}/playlist
+
+{
+"id": "37i9dQZF1EIYE32WUF6sxN",
+"name": "Hardstyle Popular",
+"spotifyId": "37i9dQZF1EIYE32WUF6sxN",
+"categories": ["hardstyle", "remix"]
+}
+
+### Add a Disabled Spotify Playlist to our system
+POST {{baseUrl}}/playlist
+
+{
+"id": "4DC0uhUb7itYVuVVF3goSN",
+"name": "Memes",
+"spotifyId": "4DC0uhUb7itYVuVVF3goSN",
+"categories": ["meme"],
+"enabled": false
+}
+
diff --git a/server/utils/postgres-errors.ts b/server/utils/postgres-errors.ts
new file mode 100644
index 0000000..bbc1982
--- /dev/null
+++ b/server/utils/postgres-errors.ts
@@ -0,0 +1,4 @@
+export const UNIQUE_VIOLATION = '23505';
+export const FOREIGN_KEY_VIOLATION = '23503';
+export const NOT_NULL_VIOLATION = '23502';
+
diff --git a/server/utils/spotify.ts b/server/utils/spotify.ts
new file mode 100644
index 0000000..3639c9f
--- /dev/null
+++ b/server/utils/spotify.ts
@@ -0,0 +1,46 @@
+let spotifyToken: string | null = null
+let tokenExpiry: number = 0
+
+export async function getSpotifyToken() {
+    // Return cached token if valid
+    if (spotifyToken && tokenExpiry > Date.now()) {
+        return spotifyToken
+    }
+
+    const auth = Buffer
+        .from(`${process.env.SPOTIFY_CLIENT_ID}:${process.env.SPOTIFY_CLIENT_SECRET}`)
+        .toString('base64')
+
+    try {
+        const res = await fetch('https://accounts.spotify.com/api/token', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Basic ${auth}`,
+                'Content-Type': 'application/x-www-form-urlencoded'
+            },
+            body: 'grant_type=client_credentials'
+        })
+
+        const data = await res.json()
+        spotifyToken = data.access_token
+        tokenExpiry = Date.now() + (data.expires_in - 60) * 1000
+
+        return spotifyToken
+    } catch (error) {
+        console.error('Spotify token error:', error)
+        throw createError({
+            statusCode: 500,
+            message: 'Failed to get Spotify access token'
+        })
+    }
+}
+
+export async function getPlaylistCover(token: string | null, playlistId: string): Promise<string | undefined> {
+    if (!token) return undefined;
+
+    const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}?fields=images`, {
+        headers: {'Authorization': `Bearer ${token}`}
+    })
+    const data = await res.json()
+    return data.images[0].url;
+}
\ No newline at end of file

From 028839f90c03d640d6f34f42f5d1d1222f42f8d8 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 7 Nov 2024 13:15:38 +0100
Subject: [PATCH 023/221] chore(readme): Update Readme and .env example to
 match current state of app

---
 .env.example |  4 ++--
 README.md    | 37 +++----------------------------------
 2 files changed, 5 insertions(+), 36 deletions(-)

diff --git a/.env.example b/.env.example
index 943a364..f50895e 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,5 @@
 SUPABASE_URL="https://yourhost.supabase.co"
 SUPABASE_KEY="your-secret-key"
 SUPABASE_SERVICE_KEY="your-service-key"
-NUXT_SPOTIFY_CLIENT_ID="your-client-id"
-NUXT_SPOTIFY_CLIENT_SECRET="your-client-secret"
\ No newline at end of file
+SPOTIFY_CLIENT_ID="your-client-id"
+SPOTIFY_CLIENT_SECRET="your-client-secret"
\ No newline at end of file
diff --git a/README.md b/README.md
index eacb11b..6907cea 100644
--- a/README.md
+++ b/README.md
@@ -7,17 +7,7 @@ Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introdu
 Make sure to install the dependencies:
 
 ```bash
-# npm
 npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
 ```
 
 ## Development Server
@@ -25,36 +15,15 @@ bun install
 Start the development server on `http://localhost:3000`:
 
 ```bash
-# npm
 npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
 ```
 
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-```
-
-Locally preview production build:
-
+## TSDocs
 ```bash
-# npm
-npm run preview
+npm run docs:serve
 ```
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
 
 ## Required Environment Variables
-Check `.env.demo` for the required environment variables.
\ No newline at end of file
+Check `.env.example` for the required environment variables.
\ No newline at end of file

From 7c84399a7a0eaa32506a6d569c8f422e34ecf84a Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 15 Nov 2024 11:41:09 +0100
Subject: [PATCH 024/221] fix(api): Playlists were disabled on creation

---
 nuxt.config.ts                       |  5 +++++
 server/api/v1/playlist/index.post.ts |  2 +-
 server/api/v1/playlist/playlist.http | 16 ++++++++--------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index e3d0745..debde16 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -13,6 +13,11 @@ export default defineNuxtConfig({
         },
         cookieOptions: {
             secure: false, //TODO: set to true when deploying
+        },
+        clientOptions: {
+            db: {
+                schema: 'beatbuzzer',
+            }
         }
     },
     devServer: {
diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index 8a756a2..7fa2412 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -9,7 +9,7 @@ const schema = z.object({
     name: z.string(),
     spotifyId: z.string().regex(spotifyIDRegex),
     categories: z.array(z.string()),
-    enabled: z.boolean().optional()
+    enabled: z.boolean().optional().default(true)
 })
 
 
diff --git a/server/api/v1/playlist/playlist.http b/server/api/v1/playlist/playlist.http
index e958f8c..629a587 100644
--- a/server/api/v1/playlist/playlist.http
+++ b/server/api/v1/playlist/playlist.http
@@ -17,20 +17,20 @@ Cookie: {{authCookie}}
 POST {{baseUrl}}/playlist
 
 {
-"id": "37i9dQZF1EIYE32WUF6sxN",
-"name": "Hardstyle Popular",
-"spotifyId": "37i9dQZF1EIYE32WUF6sxN",
-"categories": ["hardstyle", "remix"]
+"id": "37i9dQZF1DX2CtuHQcongT",
+"name": "This is SEGA SOUND TEAM",
+"spotifyId": "37i9dQZF1DX2CtuHQcongT",
+"categories": ["sega"]
 }
 
 ### Add a Disabled Spotify Playlist to our system
 POST {{baseUrl}}/playlist
 
 {
-"id": "4DC0uhUb7itYVuVVF3goSN",
-"name": "Memes",
-"spotifyId": "4DC0uhUb7itYVuVVF3goSN",
-"categories": ["meme"],
+"id": "37i9dQZF1DX2CtuHQcongT",
+"name": "This is SEGA SOUND TEAM",
+"spotifyId": "37i9dQZF1DX2CtuHQcongT",
+"categories": ["sega"]
 "enabled": false
 }
 

From 20d867463675bbfe91fc0864ff53613474418259 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 30 Nov 2024 00:23:50 +0100
Subject: [PATCH 025/221] added categories to get requests

---
 server/api/v1/playlist/[uid].get.ts | 10 +++++++---
 server/api/v1/playlist/index.get.ts | 14 +++++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/server/api/v1/playlist/[uid].get.ts b/server/api/v1/playlist/[uid].get.ts
index b9be938..ace864b 100644
--- a/server/api/v1/playlist/[uid].get.ts
+++ b/server/api/v1/playlist/[uid].get.ts
@@ -25,12 +25,16 @@ export default defineEventHandler(async (event) => {
     }
 
     const client = serverSupabaseServiceRole(event);
-    const {data, error} = await client.from('playlists').select('*').eq('id', playlistId).single();
+    const {data, error} = await client.from('playlists').select('*, categories (name)').eq('id', playlistId).single();
 
     if (error) {
         setResponseStatus(event, 500);
         return {error: error.message};
+    } else {
+        const transformedData = {
+            ...data,
+            categories: data.categories.map(category => category.name)
+          };
+        return transformedData;
     }
-
-    return data;
 })
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.get.ts b/server/api/v1/playlist/index.get.ts
index 1a23cb1..c1e3d9b 100644
--- a/server/api/v1/playlist/index.get.ts
+++ b/server/api/v1/playlist/index.get.ts
@@ -16,12 +16,20 @@ export default defineEventHandler(async (event) => {
     }
 
     const client = serverSupabaseServiceRole(event);
-    const {data, error} = await client.from('playlists').select();
+    const {data, error} = await client.from('playlists')
+    .select(`
+        *,
+        categories (name)
+    `);
 
     if (error) {
         setResponseStatus(event, 500);
         return {error: error.message};
+    } else {
+        const transformedData = data.map(playlist => ({
+            ...playlist,
+            categories: playlist.categories.map(category => category.name),
+        }));
+        return transformedData;
     }
-
-    return data;
 })
\ No newline at end of file

From b415e8e7e8b86f586607a2fd58679f35ca158b16 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 30 Nov 2024 12:37:31 +0100
Subject: [PATCH 026/221] added categories to post request (getPlaylistCover
 doesn't work)

---
 server/api/v1/playlist/index.post.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index 7fa2412..d53e039 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -21,6 +21,7 @@ const schema = z.object({
  * @returns {Object} - Created playlist
  */
 export default defineEventHandler(async (event) => {
+    // fix coverUrl and delete test.vue
     const result = await readValidatedBody(event, body => schema.safeParse(body))
 
     if (!result.success) {
@@ -36,11 +37,18 @@ export default defineEventHandler(async (event) => {
         name: result.data.name,
         spotifyId: result.data.spotifyId,
         cover: coverUrl
+        //cover: "https://i.scdn.co/image/ab67706f000000024d183558628c25f8cb314eea"
     }
 
-    const client = serverSupabaseServiceRole(event)
+    const categoriesInsert = result.data.categories.map((category) => ({
+        playlistId: result.data.id,
+        name: category,
+    }));
+
+    const client = serverSupabaseServiceRole(event);
     const {data, error} = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
 
+
     if (error) {
         setResponseStatus(event, 400);
         if (error.code === UNIQUE_VIOLATION)
@@ -49,6 +57,15 @@ export default defineEventHandler(async (event) => {
         return {error: error.message};
     }
 
+    const { data: categoriesData, error: categoriesError } = await client
+    .from('categories')
+    .insert(categoriesInsert as never);
+
+    if (categoriesError) {
+    setResponseStatus(event, 500);
+    return { error: `Error inserting categories: ${categoriesError.message}` };
+    }
+
 
     setResponseStatus(event, 201);
     return data;

From e35dd44903959a17029c8a583160c056739d4322 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sat, 30 Nov 2024 12:53:38 +0100
Subject: [PATCH 027/221] fix(playlist): Fix playlist cover not loading

---
 server/api/v1/playlist/index.post.ts | 2 --
 server/utils/spotify.ts              | 5 +++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index d53e039..d22a410 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -21,7 +21,6 @@ const schema = z.object({
  * @returns {Object} - Created playlist
  */
 export default defineEventHandler(async (event) => {
-    // fix coverUrl and delete test.vue
     const result = await readValidatedBody(event, body => schema.safeParse(body))
 
     if (!result.success) {
@@ -37,7 +36,6 @@ export default defineEventHandler(async (event) => {
         name: result.data.name,
         spotifyId: result.data.spotifyId,
         cover: coverUrl
-        //cover: "https://i.scdn.co/image/ab67706f000000024d183558628c25f8cb314eea"
     }
 
     const categoriesInsert = result.data.categories.map((category) => ({
diff --git a/server/utils/spotify.ts b/server/utils/spotify.ts
index 3639c9f..1f07a71 100644
--- a/server/utils/spotify.ts
+++ b/server/utils/spotify.ts
@@ -38,9 +38,10 @@ export async function getSpotifyToken() {
 export async function getPlaylistCover(token: string | null, playlistId: string): Promise<string | undefined> {
     if (!token) return undefined;
 
-    const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}?fields=images`, {
+    const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/images`, {
         headers: {'Authorization': `Bearer ${token}`}
     })
     const data = await res.json()
-    return data.images[0].url;
+    // console.log(data)
+    return data[0].url;
 }
\ No newline at end of file

From 04328b09f9650e262753765b4f146eafd323eaaf Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sat, 30 Nov 2024 13:05:24 +0100
Subject: [PATCH 028/221] feat(playlist): Add DDL for playlist database schema

---
 DB/playlists.sql | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 DB/playlists.sql

diff --git a/DB/playlists.sql b/DB/playlists.sql
new file mode 100644
index 0000000..9c39e60
--- /dev/null
+++ b/DB/playlists.sql
@@ -0,0 +1,17 @@
+create table playlists
+(
+    id          text                  not null primary key,
+    "spotifyId" text                  not null,
+    name        text                  not null,
+    cover       text,
+    enabled     boolean default false not null
+);
+
+CREATE UNIQUE INDEX enabled_playlist_unique_name ON playlists (name) WHERE enabled = true;
+
+create table categories
+(
+    name         text not null,
+    "playlistId" text not null references playlists,
+    primary key (name, "playlistId")
+);

From 6a2bb136333044f0efbc8406ceca840d2b4189fc Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 30 Nov 2024 16:15:27 +0100
Subject: [PATCH 029/221] added correct return statement

---
 server/api/v1/playlist/index.post.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index d22a410..7131877 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -44,15 +44,15 @@ export default defineEventHandler(async (event) => {
     }));
 
     const client = serverSupabaseServiceRole(event);
-    const {data, error} = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
+    const {data: playlistData, error: playlistError} = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
 
 
-    if (error) {
+    if (playlistError) {
         setResponseStatus(event, 400);
-        if (error.code === UNIQUE_VIOLATION)
+        if (playlistError.code === UNIQUE_VIOLATION)
             return {error: 'Playlist with this ID already exists'};
         setResponseStatus(event, 500);
-        return {error: error.message};
+        return {error: playlistError.message};
     }
 
     const { data: categoriesData, error: categoriesError } = await client
@@ -66,5 +66,5 @@ export default defineEventHandler(async (event) => {
 
 
     setResponseStatus(event, 201);
-    return data;
+    return { playlist: playlistData, categories: categoriesData };
 })
\ No newline at end of file

From 240f4f63aca80108af2f94754f83857097f88e36 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 2 Dec 2024 20:18:33 +0100
Subject: [PATCH 030/221] feat(friends): add on delete cascade for user
 deletion and finished sql friendship functions

---
 DB/friendships.sql | 72 +++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 65 insertions(+), 7 deletions(-)

diff --git a/DB/friendships.sql b/DB/friendships.sql
index 7e52344..03eabcf 100644
--- a/DB/friendships.sql
+++ b/DB/friendships.sql
@@ -15,8 +15,8 @@ CREATE TABLE friendships
     CONSTRAINT unique_friendship UNIQUE (user1_id, user2_id),
 
     -- Foreign keys
-    CONSTRAINT fk_user1 FOREIGN KEY (user1_id) REFERENCES users (id),
-    CONSTRAINT fk_user2 FOREIGN KEY (user2_id) REFERENCES users (id),
+    CONSTRAINT fk_user1 FOREIGN KEY (user1_id) REFERENCES users (id) ON DELETE CASCADE,
+    CONSTRAINT fk_user2 FOREIGN KEY (user2_id) REFERENCES users (id) ON DELETE CASCADE,
     CONSTRAINT fk_action_user FOREIGN KEY (action_user_id) REFERENCES users (id)
 );
 
@@ -48,7 +48,7 @@ DECLARE
     smaller_id UUID;
     larger_id  UUID;
 BEGIN
-    -- Determine order of IDs using UUID comparison
+    -- Determine order of IDs
     IF sender_id < receiver_id THEN
         smaller_id := sender_id;
         larger_id := receiver_id;
@@ -100,6 +100,7 @@ BEGIN
 END;
 $$ LANGUAGE plpgsql;
 
+-- accept friendship request
 CREATE OR REPLACE FUNCTION accept_friend_request_by_id(friendship_id_param BIGINT)
     RETURNS void AS
 $$
@@ -116,6 +117,7 @@ END;
 $$ LANGUAGE plpgsql;
 
 
+-- decline friendship request
 CREATE OR REPLACE FUNCTION decline_friend_request_by_id(friendship_id_param BIGINT)
     RETURNS void AS
 $$
@@ -132,8 +134,64 @@ END;
 $$ LANGUAGE plpgsql;
 
 
+-- retrieve accepted friendships
+CREATE OR REPLACE FUNCTION get_friends(user_id UUID)
+    RETURNS TABLE
+            (
+                friendship_id BIGINT,
+                friend_id     UUID,
+                created_at    TIMESTAMP WITH TIME ZONE,
+                updated_at    TIMESTAMP WITH TIME ZONE
+            )
+AS
+$$
+BEGIN
+    RETURN QUERY
+        SELECT f.friendship_id,
+               CASE
+                   WHEN f.user1_id = user_id THEN f.user2_id
+                   ELSE f.user1_id
+                   END AS friend_id,
+               f.created_at,
+               f.updated_at
+        FROM friendships f
+        WHERE (f.user1_id = user_id OR f.user2_id = user_id)
+          AND f.status = 'accepted';
+END;
+$$ LANGUAGE plpgsql;
+
+-- delete friendship
+CREATE OR REPLACE FUNCTION remove_friend(user_id UUID, friend_id UUID) RETURNS void AS
+$$
+DECLARE
+    smaller_id UUID;
+    larger_id  UUID;
+BEGIN
+    -- Determine order of IDs
+    IF friend_id < user_id THEN
+        smaller_id := friend_id;
+        larger_id := user_id;
+    ELSE
+        smaller_id := user_id;
+        larger_id := friend_id;
+    END IF;
+
+    DELETE
+    FROM friendships
+    WHERE user1_id = smaller_id
+      AND user2_id = larger_id
+      AND status = 'accepted';
+
+    IF NOT FOUND THEN
+        RAISE EXCEPTION 'No active friendship found between these users';
+    END IF;
+END;
+$$ LANGUAGE plpgsql;
+
 -- examples
-SELECT send_friend_request('sender', 'receiver');
-SELECT * FROM get_incoming_friend_requests('d2e6a9a3-a0be-45ce-ae39-676c6a88c53a');
-SELECT accept_friend_request_by_id(4);
-SELECT decline_friend_request_by_id(4);
+-- SELECT send_friend_request('sender', 'receiver');
+-- SELECT * FROM get_incoming_friend_requests('user_id');
+-- SELECT accept_friend_request_by_id(4);
+-- SELECT decline_friend_request_by_id(4);
+-- SELECT * FROM get_friends('user_id');
+-- SELECT remove_friend('friend_user');

From 06ef470dc7f54d5b2f87b911353966679646edf1 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 2 Dec 2024 20:21:48 +0100
Subject: [PATCH 031/221] feat(friends): implement GET `/user/friends` endpoint

---
 server/api/v1/user/friends/index.get.ts      | 32 +++++++++++++++++++-
 tsconfig.json                                |  7 ++++-
 types/api/responses/user.friends.response.ts | 14 +++++++++
 3 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 types/api/responses/user.friends.response.ts

diff --git a/server/api/v1/user/friends/index.get.ts b/server/api/v1/user/friends/index.get.ts
index 2efc70f..69e8b52 100644
--- a/server/api/v1/user/friends/index.get.ts
+++ b/server/api/v1/user/friends/index.get.ts
@@ -1 +1,31 @@
-// Not relative to userid because you should always only be able to see your own friends
\ No newline at end of file
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import type {FriendError, GetFriendParam, GetFriendsResponse} from "~/types/api/responses/user.friends.response";
+
+// Not relative to userid because you should always only be able to see your own friends
+// User id can be grabbed from the access token
+
+export default defineEventHandler(async (event) => {
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Get friends
+    const client = serverSupabaseServiceRole(event);
+    const param: GetFriendParam = {user_id: user.id};
+
+    const {data, error}: {
+        data: GetFriendsResponse | null,
+        error: FriendError | null
+    } = await client.rpc('get_friends', param as never);
+
+    // Handle errors
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    return data;
+});
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index a746f2a..f72ecb1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,9 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
 }
diff --git a/types/api/responses/user.friends.response.ts b/types/api/responses/user.friends.response.ts
new file mode 100644
index 0000000..fdb083f
--- /dev/null
+++ b/types/api/responses/user.friends.response.ts
@@ -0,0 +1,14 @@
+export interface GetFriendsResponse {
+    friendship_id: bigint,
+    friend_id: string,
+    created_at: string
+    updated_at: string
+}
+
+export interface FriendError {
+    message: string
+}
+
+export interface GetFriendParam {
+    user_id: string
+}
\ No newline at end of file

From 3a824d23f158dda77c810818c614a73ed9502483 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 2 Dec 2024 20:43:11 +0100
Subject: [PATCH 032/221] feat(friends): GET `/user/friends` endpoint also
 shows outgoing friend requests

---
 DB/friendships.sql                           | 10 ++++++----
 types/api/responses/user.friends.response.ts |  1 +
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/DB/friendships.sql b/DB/friendships.sql
index 03eabcf..9149339 100644
--- a/DB/friendships.sql
+++ b/DB/friendships.sql
@@ -134,14 +134,15 @@ END;
 $$ LANGUAGE plpgsql;
 
 
--- retrieve accepted friendships
+-- retrieve accepted friendships aswell as pending friendships where the user is the action_user
 CREATE OR REPLACE FUNCTION get_friends(user_id UUID)
     RETURNS TABLE
             (
                 friendship_id BIGINT,
                 friend_id     UUID,
                 created_at    TIMESTAMP WITH TIME ZONE,
-                updated_at    TIMESTAMP WITH TIME ZONE
+                updated_at    TIMESTAMP WITH TIME ZONE,
+                status        friendship_status
             )
 AS
 $$
@@ -153,10 +154,11 @@ BEGIN
                    ELSE f.user1_id
                    END AS friend_id,
                f.created_at,
-               f.updated_at
+               f.updated_at,
+               f.status
         FROM friendships f
         WHERE (f.user1_id = user_id OR f.user2_id = user_id)
-          AND f.status = 'accepted';
+          AND (f.status = 'accepted' OR (f.status = 'pending' AND f.action_user_id = user_id));
 END;
 $$ LANGUAGE plpgsql;
 
diff --git a/types/api/responses/user.friends.response.ts b/types/api/responses/user.friends.response.ts
index fdb083f..d409702 100644
--- a/types/api/responses/user.friends.response.ts
+++ b/types/api/responses/user.friends.response.ts
@@ -3,6 +3,7 @@ export interface GetFriendsResponse {
     friend_id: string,
     created_at: string
     updated_at: string
+    status: "pending" | "accepted"
 }
 
 export interface FriendError {

From bd81104a65f770df23171f1da4862b48f24bed7c Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 2 Dec 2024 20:47:00 +0100
Subject: [PATCH 033/221] feat(friends): implement POST `/user/friends`
 endpoint for sending friend requests, and moved types file

---
 server/api/v1/user/friends/index.get.ts       |  2 +-
 server/api/v1/user/friends/index.post.ts      | 38 ++++++++++++++++++-
 ...er.friends.response.ts => user.friends.ts} |  5 +++
 3 files changed, 43 insertions(+), 2 deletions(-)
 rename types/api/{responses/user.friends.response.ts => user.friends.ts} (75%)

diff --git a/server/api/v1/user/friends/index.get.ts b/server/api/v1/user/friends/index.get.ts
index 69e8b52..9356818 100644
--- a/server/api/v1/user/friends/index.get.ts
+++ b/server/api/v1/user/friends/index.get.ts
@@ -1,5 +1,5 @@
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
-import type {FriendError, GetFriendParam, GetFriendsResponse} from "~/types/api/responses/user.friends.response";
+import type {FriendError, GetFriendParam, GetFriendsResponse} from "~/types/api/user.friends";
 
 // Not relative to userid because you should always only be able to see your own friends
 // User id can be grabbed from the access token
diff --git a/server/api/v1/user/friends/index.post.ts b/server/api/v1/user/friends/index.post.ts
index 2ab0ba0..fe7bed2 100644
--- a/server/api/v1/user/friends/index.post.ts
+++ b/server/api/v1/user/friends/index.post.ts
@@ -1 +1,37 @@
-// send friend invite
\ No newline at end of file
+// send friend invite
+import {z} from 'zod'
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import type {SendFriendRequestParam} from "~/types/api/user.friends";
+
+const userSchema = z.object({
+    receiver_id: z.string().uuid()
+})
+
+export default defineEventHandler(async (event) => {
+    // validate post-request body
+    const result = await readValidatedBody(event, body => userSchema.safeParse(body))
+    if (!result.success) {
+        setResponseStatus(event, 400);
+        return {error: result.error.issues};
+    }
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Send request
+    const client = serverSupabaseServiceRole(event);
+    const param: SendFriendRequestParam = {sender_id: user.id, receiver_id: result.data.receiver_id};
+    const {error} = await client.rpc('send_friend_request', param as never);
+
+    // Handle errors
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    return {};
+});
\ No newline at end of file
diff --git a/types/api/responses/user.friends.response.ts b/types/api/user.friends.ts
similarity index 75%
rename from types/api/responses/user.friends.response.ts
rename to types/api/user.friends.ts
index d409702..9bfb869 100644
--- a/types/api/responses/user.friends.response.ts
+++ b/types/api/user.friends.ts
@@ -12,4 +12,9 @@ export interface FriendError {
 
 export interface GetFriendParam {
     user_id: string
+}
+
+export interface SendFriendRequestParam {
+    sender_id: string,
+    receiver_id: string
 }
\ No newline at end of file

From 882f065dac98a52ea2a9596c93fc80788d2ace59 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 2 Dec 2024 21:41:55 +0100
Subject: [PATCH 034/221] feat(friends): remove unnecessary/redundant DB get
 functions

---
 DB/friendships.sql | 113 ++++++++++++++++++---------------------------
 1 file changed, 45 insertions(+), 68 deletions(-)

diff --git a/DB/friendships.sql b/DB/friendships.sql
index 9149339..87fa8c4 100644
--- a/DB/friendships.sql
+++ b/DB/friendships.sql
@@ -1,6 +1,13 @@
-CREATE TYPE friendship_status AS ENUM ('pending', 'accepted', 'declined');
-
-CREATE TABLE friendships
+DO
+$$
+    BEGIN
+        IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'friendship_status') THEN
+            CREATE TYPE friendship_status AS ENUM ('pending', 'accepted', 'declined');
+        END IF;
+    END
+$$;
+
+CREATE TABLE IF NOT EXISTS friendships
 (
     friendship_id  BIGSERIAL PRIMARY KEY,
     user1_id       UUID                     NOT NULL,
@@ -20,8 +27,8 @@ CREATE TABLE friendships
     CONSTRAINT fk_action_user FOREIGN KEY (action_user_id) REFERENCES users (id)
 );
 
-CREATE INDEX idx_friendship_user1 ON friendships (user1_id, status);
-CREATE INDEX idx_friendship_user2 ON friendships (user2_id, status);
+CREATE INDEX IF NOT EXISTS idx_friendship_user1 ON friendships (user1_id, status);
+CREATE INDEX IF NOT EXISTS idx_friendship_user2 ON friendships (user2_id, status);
 
 -- Functions
 
@@ -35,7 +42,7 @@ BEGIN
 END;
 $$ LANGUAGE plpgsql;
 
-CREATE TRIGGER update_friendships_timestamp
+CREATE OR REPLACE TRIGGER update_friendships_timestamp
     BEFORE UPDATE
     ON friendships
     FOR EACH ROW
@@ -69,37 +76,6 @@ BEGIN
 END;
 $$ LANGUAGE plpgsql;
 
--- retrieve incoming friend requests
-CREATE OR REPLACE FUNCTION get_incoming_friend_requests(user_id UUID)
-    RETURNS TABLE
-            (
-                friendship_id BIGINT,
-                sender_id     UUID,
-                receiver_id   UUID,
-                status        friendship_status,
-                created_at    TIMESTAMP WITH TIME ZONE,
-                updated_at    TIMESTAMP WITH TIME ZONE
-            )
-AS
-$$
-BEGIN
-    RETURN QUERY
-        SELECT f.friendship_id,
-               CASE
-                   WHEN f.user1_id = user_id THEN f.user2_id
-                   ELSE f.user1_id
-                   END AS sender_id,
-               user_id AS receiver_id,
-               f.status,
-               f.created_at,
-               f.updated_at
-        FROM friendships f
-        WHERE (f.user1_id = user_id OR f.user2_id = user_id)
-          AND f.status = 'pending'
-          AND f.action_user_id != user_id;
-END;
-$$ LANGUAGE plpgsql;
-
 -- accept friendship request
 CREATE OR REPLACE FUNCTION accept_friend_request_by_id(friendship_id_param BIGINT)
     RETURNS void AS
@@ -133,35 +109,6 @@ BEGIN
 END;
 $$ LANGUAGE plpgsql;
 
-
--- retrieve accepted friendships aswell as pending friendships where the user is the action_user
-CREATE OR REPLACE FUNCTION get_friends(user_id UUID)
-    RETURNS TABLE
-            (
-                friendship_id BIGINT,
-                friend_id     UUID,
-                created_at    TIMESTAMP WITH TIME ZONE,
-                updated_at    TIMESTAMP WITH TIME ZONE,
-                status        friendship_status
-            )
-AS
-$$
-BEGIN
-    RETURN QUERY
-        SELECT f.friendship_id,
-               CASE
-                   WHEN f.user1_id = user_id THEN f.user2_id
-                   ELSE f.user1_id
-                   END AS friend_id,
-               f.created_at,
-               f.updated_at,
-               f.status
-        FROM friendships f
-        WHERE (f.user1_id = user_id OR f.user2_id = user_id)
-          AND (f.status = 'accepted' OR (f.status = 'pending' AND f.action_user_id = user_id));
-END;
-$$ LANGUAGE plpgsql;
-
 -- delete friendship
 CREATE OR REPLACE FUNCTION remove_friend(user_id UUID, friend_id UUID) RETURNS void AS
 $$
@@ -190,10 +137,40 @@ BEGIN
 END;
 $$ LANGUAGE plpgsql;
 
+
+-- retrieve all friends, incoming and outgoing friend requests
+CREATE OR REPLACE FUNCTION get_friends(user_id UUID)
+    RETURNS TABLE
+            (
+                friendship_id  BIGINT,
+                friend_id      UUID,
+                status         friendship_status,
+                action_user_id UUID,
+                created_at     TIMESTAMP WITH TIME ZONE,
+                updated_at     TIMESTAMP WITH TIME ZONE
+            )
+AS
+$$
+BEGIN
+    RETURN QUERY
+        SELECT f.friendship_id,
+               CASE
+                   WHEN f.user1_id = user_id THEN f.user2_id
+                   ELSE f.user1_id
+                   END AS friend_id,
+               f.status,
+               f.action_user_id,
+               f.created_at,
+               f.updated_at
+        FROM friendships f
+        WHERE (f.user1_id = user_id OR f.user2_id = user_id)
+          AND (f.status != 'declined');
+END;
+$$ LANGUAGE plpgsql;
+
 -- examples
 -- SELECT send_friend_request('sender', 'receiver');
--- SELECT * FROM get_incoming_friend_requests('user_id');
 -- SELECT accept_friend_request_by_id(4);
 -- SELECT decline_friend_request_by_id(4);
--- SELECT * FROM get_friends('user_id');
 -- SELECT remove_friend('friend_user');
+-- SELECT * FROM get_friends('user_id');

From c2ebc0ccfc2dcacf4e49aadb0b54eddc4cc1e4ab Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 4 Dec 2024 09:46:24 +0100
Subject: [PATCH 035/221] added Start Buttons to home

---
 layouts/HeaderFooterView.vue |  4 ++--
 pages/home.vue               | 44 ++++++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 pages/home.vue

diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 0cecbb1..11cadc7 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -15,8 +15,8 @@
       </div>
 
       <!-- Content -->
-      <div class="flex-1">
-        <slot name="content"/>
+      <div class="flex-1 border rounded-3xl">
+          <slot name="content"/>
       </div>
 
       <!-- Footer -->
diff --git a/pages/home.vue b/pages/home.vue
new file mode 100644
index 0000000..24e22a1
--- /dev/null
+++ b/pages/home.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+
+import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
+
+useSeoMeta({
+  title: "BeatBuzzer",
+  description: "A fun music quiz game",
+  viewport: "width=device-width, initial-scale=1.0",
+})
+
+</script>
+
+<template>
+  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+    <HeaderFooterView>
+      <template #header>
+        <div>
+          1A
+        </div>
+        <div>
+          2B
+        </div>
+        <div>
+          3C
+        </div>
+      </template>
+      <template #content>
+        <div class="flex justify-center items-end h-full space-x-1">
+            <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
+                Start Game
+            </button>
+            <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
+                Start Round
+            </button>
+        </div>
+      </template>
+      <template #footer>
+        <div class="text-4xl">A</div>
+        <div class="text-4xl">B</div>
+        <div class="text-4xl">C</div>
+      </template>
+    </HeaderFooterView>
+  </div>
+</template>
\ No newline at end of file

From 26bf8352d95faf50c1c03a898cd10c3f9b609dab Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <lukas.lanzner@hpe.com>
Date: Wed, 4 Dec 2024 13:20:09 +0100
Subject: [PATCH 036/221] feat(friends): Add endpoint to accept and decline
 friend requests.

---
 server/api/v1/user/friends/index.get.ts  |  2 +-
 server/api/v1/user/friends/index.post.ts |  2 +-
 server/api/v1/user/friends/index.put.ts  | 54 +++++++++++++++++++++++-
 types/api/user.friends.ts                | 34 +++++++++++----
 4 files changed, 80 insertions(+), 12 deletions(-)

diff --git a/server/api/v1/user/friends/index.get.ts b/server/api/v1/user/friends/index.get.ts
index 9356818..9942fd0 100644
--- a/server/api/v1/user/friends/index.get.ts
+++ b/server/api/v1/user/friends/index.get.ts
@@ -17,7 +17,7 @@ export default defineEventHandler(async (event) => {
     const param: GetFriendParam = {user_id: user.id};
 
     const {data, error}: {
-        data: GetFriendsResponse | null,
+        data: GetFriendsResponse[] | null,
         error: FriendError | null
     } = await client.rpc('get_friends', param as never);
 
diff --git a/server/api/v1/user/friends/index.post.ts b/server/api/v1/user/friends/index.post.ts
index fe7bed2..5c373bc 100644
--- a/server/api/v1/user/friends/index.post.ts
+++ b/server/api/v1/user/friends/index.post.ts
@@ -5,7 +5,7 @@ import type {SendFriendRequestParam} from "~/types/api/user.friends";
 
 const userSchema = z.object({
     receiver_id: z.string().uuid()
-})
+}).readonly()
 
 export default defineEventHandler(async (event) => {
     // validate post-request body
diff --git a/server/api/v1/user/friends/index.put.ts b/server/api/v1/user/friends/index.put.ts
index d5fe53c..f07f455 100644
--- a/server/api/v1/user/friends/index.put.ts
+++ b/server/api/v1/user/friends/index.put.ts
@@ -1 +1,53 @@
-// accept or decline friend request
\ No newline at end of file
+import {z} from "zod";
+import {FriendAction} from "~/types/api/user.friends";
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import type {FriendActionParam} from "~/types/api/user.friends";
+import type {PostgrestError} from "@supabase/postgrest-js";
+
+const friendActionSchema = z.object({
+    friendship_id: z.bigint().positive(),
+    action: z.nativeEnum(FriendAction)
+}).readonly()
+
+export default defineEventHandler(async (event) => {
+    // validate post-request body
+    const result = await readValidatedBody(event, body => friendActionSchema.safeParse(body))
+    if (!result.success) {
+        setResponseStatus(event, 400);
+        return {error: result.error.issues};
+    }
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Send request
+    const client = serverSupabaseServiceRole(event);
+    const param: FriendActionParam = {friendship_id: result.data.friendship_id};
+
+    let error: PostgrestError | null = null;
+    switch (result.data.action) {
+        case FriendAction.ACCEPT: {
+            const {error: acceptErr} = await client.rpc('accept_friend_request', param as never);
+            error = acceptErr;
+            error = acceptErr;
+            break;
+        }
+        case FriendAction.DECLINE: {
+            const {error: declineErr} = await client.rpc('decline_friend_request', param as never);
+            error = declineErr;
+            break;
+        }
+    }
+
+    // Handle errors
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    return {};
+});
\ No newline at end of file
diff --git a/types/api/user.friends.ts b/types/api/user.friends.ts
index 9bfb869..a51ee65 100644
--- a/types/api/user.friends.ts
+++ b/types/api/user.friends.ts
@@ -1,11 +1,4 @@
-export interface GetFriendsResponse {
-    friendship_id: bigint,
-    friend_id: string,
-    created_at: string
-    updated_at: string
-    status: "pending" | "accepted"
-}
-
+// ----- Internal Types -----
 export interface FriendError {
     message: string
 }
@@ -17,4 +10,27 @@ export interface GetFriendParam {
 export interface SendFriendRequestParam {
     sender_id: string,
     receiver_id: string
-}
\ No newline at end of file
+}
+
+export interface FriendActionParam {
+    friendship_id: bigint,
+}
+
+// ----- For API Consumer -----
+export interface GetFriendsResponse {
+    friendship_id: bigint,
+    friend_id: string,
+    created_at: string
+    updated_at: string
+    status: "pending" | "accepted"
+}
+
+export enum FriendAction {
+    ACCEPT = "accept",
+    DECLINE = "decline"
+}
+
+export interface FriendActionRequest {
+    action: FriendAction,
+    friendship_id: bigint
+}

From cd4da148fefb9b0040454ee74a2d5f3f2c4dbf87 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 4 Dec 2024 13:42:38 +0100
Subject: [PATCH 037/221] added game controls and user/opponent view to
 homepage

---
 components/home/Controls/GameButtons.vue | 15 ++++++++
 components/home/Turns/Opponent.vue       | 14 ++++++++
 components/home/Turns/User.vue           | 14 ++++++++
 components/home/Users/UserBox.vue        | 25 ++++++++++++++
 pages/home.vue                           | 44 ------------------------
 pages/index.vue                          |  7 ++++
 6 files changed, 75 insertions(+), 44 deletions(-)
 create mode 100644 components/home/Controls/GameButtons.vue
 create mode 100644 components/home/Turns/Opponent.vue
 create mode 100644 components/home/Turns/User.vue
 create mode 100644 components/home/Users/UserBox.vue
 delete mode 100644 pages/home.vue

diff --git a/components/home/Controls/GameButtons.vue b/components/home/Controls/GameButtons.vue
new file mode 100644
index 0000000..36344c6
--- /dev/null
+++ b/components/home/Controls/GameButtons.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="flex space-x-3 w-full">
+        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
+            Start Game
+        </button>
+        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
+            Start Round
+        </button>
+    </div>
+</template>
+
diff --git a/components/home/Turns/Opponent.vue b/components/home/Turns/Opponent.vue
new file mode 100644
index 0000000..611abb5
--- /dev/null
+++ b/components/home/Turns/Opponent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3 h">
+        <p class="my-1">Opponentes Turn</p>
+        <div class="flex space-x-3">
+            <HomeUsersUserBox name="test1" :userTurn=false></HomeUsersUserBox>
+            <HomeUsersUserBox name="test2" :userTurn=false></HomeUsersUserBox>
+            <HomeUsersUserBox name="test3" :userTurn=false></HomeUsersUserBox>
+        </div>
+    </div>
+</template>
diff --git a/components/home/Turns/User.vue b/components/home/Turns/User.vue
new file mode 100644
index 0000000..326112b
--- /dev/null
+++ b/components/home/Turns/User.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3 h-full">
+        <p class="my-1">Your Turn</p>
+        <div class="flex-col space-y-3">
+            <HomeUsersUserBox name="test1" :userTurn=true></HomeUsersUserBox>
+            <HomeUsersUserBox name="test2" :userTurn=true></HomeUsersUserBox>
+            <HomeUsersUserBox name="test3" :userTurn=true></HomeUsersUserBox>
+        </div>
+    </div>
+</template>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
new file mode 100644
index 0000000..60e7176
--- /dev/null
+++ b/components/home/Users/UserBox.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+    const props = defineProps({
+    profilePicture: {
+        type: String,
+        default: 'https://i.scdn.co/image/ab6775700000ee855d4c281804e8773208248312'
+    },
+    name: {
+        type: String,
+        default: 'Opponent'
+    },
+    userTurn: {
+        type: Boolean,
+        default: false
+    }
+    });
+</script>
+
+<template>
+    <div :class="['bg-blue-600', props.userTurn ? 'flex items-center h-30 w-full rounded-3xl p-3' : 'flex flex-col items-center justify-center h-30 w-full rounded-3xl p-3']">
+        <img v-if="!props.userTurn" :src="props.profilePicture" :alt="name" class="rounded-full w-16 h-16 mb-2" >
+        <img v-else :src="props.profilePicture" :alt="name" class="rounded-full w-16 h-16 mr-3" >
+        <p>{{ props.name }}</p>
+        <button v-if="props.userTurn"></button>
+    </div>
+</template>
\ No newline at end of file
diff --git a/pages/home.vue b/pages/home.vue
deleted file mode 100644
index 24e22a1..0000000
--- a/pages/home.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-
-import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
-
-useSeoMeta({
-  title: "BeatBuzzer",
-  description: "A fun music quiz game",
-  viewport: "width=device-width, initial-scale=1.0",
-})
-
-</script>
-
-<template>
-  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
-    <HeaderFooterView>
-      <template #header>
-        <div>
-          1A
-        </div>
-        <div>
-          2B
-        </div>
-        <div>
-          3C
-        </div>
-      </template>
-      <template #content>
-        <div class="flex justify-center items-end h-full space-x-1">
-            <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
-                Start Game
-            </button>
-            <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
-                Start Round
-            </button>
-        </div>
-      </template>
-      <template #footer>
-        <div class="text-4xl">A</div>
-        <div class="text-4xl">B</div>
-        <div class="text-4xl">C</div>
-      </template>
-    </HeaderFooterView>
-  </div>
-</template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 8686f48..e7f44be 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -24,6 +24,13 @@ useSeoMeta({
           3C
         </div>
       </template>
+      <template #content>
+        <div class="flex flex-col h-full p-3">
+          <HomeTurnsUser></HomeTurnsUser>
+          <HomeTurnsOpponent></HomeTurnsOpponent>
+          <HomeControlsGameButtons></HomeControlsGameButtons>
+        </div>
+      </template>
       <template #footer>
         <div class="text-4xl">A</div>
         <div class="text-4xl">B</div>

From 1fec8f37e6365cfe4e7c2019f582a3655a53052d Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 4 Dec 2024 14:19:40 +0100
Subject: [PATCH 038/221] added play button to user turn and changed text color
 to white

---
 components/home/Turns/Opponent.vue | 12 ++++++------
 components/home/Turns/User.vue     |  6 +++---
 components/home/Users/UserBox.vue  |  9 +++++----
 pages/index.vue                    |  6 +++---
 public/icons/playButton.svg        |  7 +++++++
 5 files changed, 24 insertions(+), 16 deletions(-)
 create mode 100644 public/icons/playButton.svg

diff --git a/components/home/Turns/Opponent.vue b/components/home/Turns/Opponent.vue
index 611abb5..c8b5acb 100644
--- a/components/home/Turns/Opponent.vue
+++ b/components/home/Turns/Opponent.vue
@@ -3,12 +3,12 @@
 </script>
 
 <template>
-    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3 h">
-        <p class="my-1">Opponentes Turn</p>
+    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
+        <p class="my-1 ">Opponentes Turn</p>
         <div class="flex space-x-3">
-            <HomeUsersUserBox name="test1" :userTurn=false></HomeUsersUserBox>
-            <HomeUsersUserBox name="test2" :userTurn=false></HomeUsersUserBox>
-            <HomeUsersUserBox name="test3" :userTurn=false></HomeUsersUserBox>
+            <HomeUsersUserBox name="test1" :user-turn="false"/>
+            <HomeUsersUserBox name="test2" :user-turn="false"/>
+            <HomeUsersUserBox name="test3" :user-turn="false"/>
         </div>
     </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/components/home/Turns/User.vue b/components/home/Turns/User.vue
index 326112b..824cbb5 100644
--- a/components/home/Turns/User.vue
+++ b/components/home/Turns/User.vue
@@ -6,9 +6,9 @@
     <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3 h-full">
         <p class="my-1">Your Turn</p>
         <div class="flex-col space-y-3">
-            <HomeUsersUserBox name="test1" :userTurn=true></HomeUsersUserBox>
-            <HomeUsersUserBox name="test2" :userTurn=true></HomeUsersUserBox>
-            <HomeUsersUserBox name="test3" :userTurn=true></HomeUsersUserBox>
+            <HomeUsersUserBox name="test1" :user-turn="true"/>
+            <HomeUsersUserBox name="test2" :user-turn="true"/>
+            <HomeUsersUserBox name="test3" :user-turn="true"/>
         </div>
     </div>
 </template>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 60e7176..1355cf6 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -17,9 +17,10 @@
 
 <template>
     <div :class="['bg-blue-600', props.userTurn ? 'flex items-center h-30 w-full rounded-3xl p-3' : 'flex flex-col items-center justify-center h-30 w-full rounded-3xl p-3']">
-        <img v-if="!props.userTurn" :src="props.profilePicture" :alt="name" class="rounded-full w-16 h-16 mb-2" >
-        <img v-else :src="props.profilePicture" :alt="name" class="rounded-full w-16 h-16 mr-3" >
-        <p>{{ props.name }}</p>
-        <button v-if="props.userTurn"></button>
+        <img :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20 lg:w-24 lg:h-24', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture" :alt="name">
+        <p class="text-white">{{ props.name }}</p>
+        <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
+            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14"/>
+        </button>
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index e7f44be..65289b0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -26,9 +26,9 @@ useSeoMeta({
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <HomeTurnsUser></HomeTurnsUser>
-          <HomeTurnsOpponent></HomeTurnsOpponent>
-          <HomeControlsGameButtons></HomeControlsGameButtons>
+          <HomeTurnsUser/>
+          <HomeTurnsOpponent/>
+          <HomeControlsGameButtons/>
         </div>
       </template>
       <template #footer>
diff --git a/public/icons/playButton.svg b/public/icons/playButton.svg
new file mode 100644
index 0000000..2763488
--- /dev/null
+++ b/public/icons/playButton.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-19.24 -19.24 519.48 519.48" xml:space="preserve" stroke="#000000" stroke-width="12.025">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g> <g> <path d="M410.6,70.4C365.1,25,304.7,0,240.5,0S115.9,25,70.4,70.4C25,115.9,0,176.3,0,240.5s25,124.6,70.4,170.1 C115.8,456,176.2,481,240.5,481s124.6-25,170.1-70.4C456,365.2,481,304.8,481,240.5S456,115.9,410.6,70.4z M240.5,454 C122.8,454,27,358.2,27,240.5S122.8,27,240.5,27S454,122.8,454,240.5S358.2,454,240.5,454z"/> <path d="M349.2,229.1l-152.6-97.9c-4.2-2.7-9.4-2.9-13.8-0.5c-4.3,2.4-7,6.9-7,11.8v195.7c0,4.9,2.7,9.5,7,11.8 c2,1.1,4.3,1.7,6.5,1.7c2.5,0,5.1-0.7,7.3-2.1l152.6-97.9c3.9-2.5,6.2-6.8,6.2-11.4S353,231.6,349.2,229.1z M202.8,313.7V167.3 l114.1,73.2L202.8,313.7z"/> </g> </g> </g>
+
</svg>
\ No newline at end of file

From 7d30789b22d2d41649d0aeb6fd8c8eef27daeec8 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 4 Dec 2024 14:31:32 +0100
Subject: [PATCH 039/221] resizes profile picture and play button

---
 components/home/Users/UserBox.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 1355cf6..c42b901 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -17,10 +17,10 @@
 
 <template>
     <div :class="['bg-blue-600', props.userTurn ? 'flex items-center h-30 w-full rounded-3xl p-3' : 'flex flex-col items-center justify-center h-30 w-full rounded-3xl p-3']">
-        <img :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20 lg:w-24 lg:h-24', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture" :alt="name">
+        <img :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture" :alt="name">
         <p class="text-white">{{ props.name }}</p>
         <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
-            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14"/>
+            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16 hover:bg-black"/>
         </button>
     </div>
 </template>
\ No newline at end of file

From 24ab8b7f2c785ecf1987b1836184af9c40062e38 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 4 Dec 2024 15:27:38 +0100
Subject: [PATCH 040/221] fix(friends): fix accept and decline endpoints

---
 DB/friendships.sql                              |  8 ++++----
 nuxt.config.ts                                  |  2 +-
 .../friends/{index.put.ts => action.post.ts}    | 17 ++++++++---------
 types/api/user.friends.ts                       | 16 +++++++++++-----
 4 files changed, 24 insertions(+), 19 deletions(-)
 rename server/api/v1/user/friends/{index.put.ts => action.post.ts} (76%)

diff --git a/DB/friendships.sql b/DB/friendships.sql
index 87fa8c4..5be07d3 100644
--- a/DB/friendships.sql
+++ b/DB/friendships.sql
@@ -9,7 +9,7 @@ $$;
 
 CREATE TABLE IF NOT EXISTS friendships
 (
-    friendship_id  BIGSERIAL PRIMARY KEY,
+    friendship_id  SERIAL PRIMARY KEY,
     user1_id       UUID                     NOT NULL,
     user2_id       UUID                     NOT NULL,
     status         friendship_status        NOT NULL,
@@ -77,7 +77,7 @@ END;
 $$ LANGUAGE plpgsql;
 
 -- accept friendship request
-CREATE OR REPLACE FUNCTION accept_friend_request_by_id(friendship_id_param BIGINT)
+CREATE OR REPLACE FUNCTION accept_friend_request_by_id(friendship_id_param INT)
     RETURNS void AS
 $$
 BEGIN
@@ -94,7 +94,7 @@ $$ LANGUAGE plpgsql;
 
 
 -- decline friendship request
-CREATE OR REPLACE FUNCTION decline_friend_request_by_id(friendship_id_param BIGINT)
+CREATE OR REPLACE FUNCTION decline_friend_request_by_id(friendship_id_param INT)
     RETURNS void AS
 $$
 BEGIN
@@ -142,7 +142,7 @@ $$ LANGUAGE plpgsql;
 CREATE OR REPLACE FUNCTION get_friends(user_id UUID)
     RETURNS TABLE
             (
-                friendship_id  BIGINT,
+                friendship_id  INT,
                 friend_id      UUID,
                 status         friendship_status,
                 action_user_id UUID,
diff --git a/nuxt.config.ts b/nuxt.config.ts
index debde16..9a5de5a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     compatibilityDate: '2024-04-03',
-    devtools: {enabled: false},
+    devtools: {enabled: true},
     modules: ['@nuxtjs/tailwindcss', '@nuxt/eslint', '@nuxtjs/supabase', '@nuxt/image'],
     supabase: {
         redirectOptions: {
diff --git a/server/api/v1/user/friends/index.put.ts b/server/api/v1/user/friends/action.post.ts
similarity index 76%
rename from server/api/v1/user/friends/index.put.ts
rename to server/api/v1/user/friends/action.post.ts
index f07f455..79c03db 100644
--- a/server/api/v1/user/friends/index.put.ts
+++ b/server/api/v1/user/friends/action.post.ts
@@ -1,12 +1,12 @@
 import {z} from "zod";
-import {FriendAction} from "~/types/api/user.friends";
+import {FriendshipAction, GetFriendsResponse} from "~/types/api/user.friends";
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 import type {FriendActionParam} from "~/types/api/user.friends";
 import type {PostgrestError} from "@supabase/postgrest-js";
 
 const friendActionSchema = z.object({
-    friendship_id: z.bigint().positive(),
-    action: z.nativeEnum(FriendAction)
+    friendship_id: z.number().int().positive(),
+    action: z.nativeEnum(FriendshipAction)
 }).readonly()
 
 export default defineEventHandler(async (event) => {
@@ -26,18 +26,17 @@ export default defineEventHandler(async (event) => {
 
     // Send request
     const client = serverSupabaseServiceRole(event);
-    const param: FriendActionParam = {friendship_id: result.data.friendship_id};
+    const param: FriendActionParam = {friendship_id_param: result.data.friendship_id};
 
     let error: PostgrestError | null = null;
     switch (result.data.action) {
-        case FriendAction.ACCEPT: {
-            const {error: acceptErr} = await client.rpc('accept_friend_request', param as never);
-            error = acceptErr;
+        case FriendshipAction.ACCEPT: {
+            const {error: acceptErr} = await client.rpc('accept_friend_request_by_id', param as never);
             error = acceptErr;
             break;
         }
-        case FriendAction.DECLINE: {
-            const {error: declineErr} = await client.rpc('decline_friend_request', param as never);
+        case FriendshipAction.DECLINE: {
+            const {error: declineErr} = await client.rpc('decline_friend_request_by_id', param as never);
             error = declineErr;
             break;
         }
diff --git a/types/api/user.friends.ts b/types/api/user.friends.ts
index a51ee65..0bf7789 100644
--- a/types/api/user.friends.ts
+++ b/types/api/user.friends.ts
@@ -13,24 +13,30 @@ export interface SendFriendRequestParam {
 }
 
 export interface FriendActionParam {
-    friendship_id: bigint,
+    friendship_id_param: number,
 }
 
 // ----- For API Consumer -----
 export interface GetFriendsResponse {
-    friendship_id: bigint,
+    friendship_id: number,
     friend_id: string,
     created_at: string
     updated_at: string
     status: "pending" | "accepted"
 }
 
-export enum FriendAction {
+export enum FriendshipAction {
     ACCEPT = "accept",
     DECLINE = "decline"
 }
 
+export enum FriendshipStatus {
+    PENDING= "pending",
+    ACCEPTED= "accepted",
+    DECLINED= "declined"
+}
+
 export interface FriendActionRequest {
-    action: FriendAction,
-    friendship_id: bigint
+    action: FriendshipAction,
+    friendship_id: number
 }

From d1f89a0569e486a00b0e009521e8e29265c50988 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 4 Dec 2024 15:28:18 +0100
Subject: [PATCH 041/221] feat(friends): Tracking testpage for easy frontend
 work

---
 pages/testfriends.vue | 92 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 pages/testfriends.vue

diff --git a/pages/testfriends.vue b/pages/testfriends.vue
new file mode 100644
index 0000000..ba40d00
--- /dev/null
+++ b/pages/testfriends.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import {
+  type FriendActionRequest,
+  FriendshipAction,
+  FriendshipStatus,
+  type GetFriendsResponse
+} from "@/types/api/user.friends";
+
+const requests: Ref<GetFriendsResponse[]> = useState("all_friendships", ()=> [])
+const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
+
+const session = useSupabaseSession()
+
+onMounted(async () => {
+  if (session.value) {
+    await getFriendships()
+  }
+})
+
+async function getFriendships() {
+  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
+      .then((data) => {
+        requests.value = data.filter((item) => item.status === FriendshipStatus.PENDING)
+        friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+      });
+}
+
+function handleFriendRequestAction(action: FriendshipAction, friendship_id: number) {
+  console.log(action, friendship_id)
+  if (action === FriendshipAction.ACCEPT) {
+    // optimistically update the UI instantly
+    friends.value = friends.value.concat(requests.value.filter((item) => item.friendship_id === friendship_id))
+    requests.value = requests.value.filter((item) => item.friendship_id !== friendship_id)
+    getFriendships() // lazily refresh the list
+  } else if (action === FriendshipAction.DECLINE) {
+    // optimistically update the UI instantly
+    requests.value = requests.value.filter((item) => item.friendship_id !== friendship_id)
+   getFriendships() // lazily refresh the list
+  }
+}
+
+function accept(friendship_id: number) {
+
+  const actionRequest: FriendActionRequest = {
+    friendship_id: friendship_id,
+    action: FriendshipAction.ACCEPT
+  }
+
+  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends/action', {
+    method: 'POST',
+    body: JSON.stringify(actionRequest)
+  }).then(() => {
+    handleFriendRequestAction(FriendshipAction.ACCEPT, friendship_id)
+  })
+}
+
+function decline(friendship_id: number) {
+  const actionRequest: FriendActionRequest = {
+    friendship_id: friendship_id,
+    action: FriendshipAction.DECLINE
+  }
+
+  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends/action', {
+    method: 'POST',
+    body: JSON.stringify(actionRequest)
+  }).then(() => {
+    handleFriendRequestAction(FriendshipAction.DECLINE, friendship_id)
+  })
+}
+
+</script>
+
+<template>
+  <div class="h-screen bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+    <h1 class="py-4 mx-4 text-2xl">Friend Requests:</h1>
+    <div v-for="item in requests" :key="item.friend_id" class="grid grid-cols-3">
+      <div class="bg-white p-4 m-4 text-center rounded-lg">{{ item.friend_id }}</div>
+      <button class="bg-white text-black p-4 m-4 hover:bg-gray-200 rounded-lg" @click="accept(item.friendship_id)">
+        Accept
+      </button>
+      <button class="bg-white text-black p-4 m-4 hover:bg-gray-200 rounded-lg" @click="decline(item.friendship_id)">
+        Decline
+      </button>
+    </div>
+    <br>
+    <div class="flex flex-auto flex-row items-center">
+      <h1 class="py-4 mx-4 text-2xl">Friends:</h1>
+      <div v-for="item in friends" :key="item.friend_id"  class="bg-white p-4 m-4 text-center rounded-lg">{{ item.friend_id }}</div>
+    </div>
+    <br><br>
+  </div>
+</template>
\ No newline at end of file

From 8db2fea9e8ad44d5ca8df34747580f8d09f18a7c Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 4 Dec 2024 16:16:14 +0100
Subject: [PATCH 042/221] feat(friends): add incoming/outgoing request
 attribute

---
 DB/friendships.sql                         | 23 +++++++++++++++--
 pages/testfriends.vue                      | 30 +++++++++++++++++++---
 server/api/v1/user/friends/action.post.ts  | 14 +++++++---
 server/api/v1/user/friends/index.delete.ts |  1 -
 types/api/user.friends.ts                  | 17 ++++++++----
 5 files changed, 71 insertions(+), 14 deletions(-)
 delete mode 100644 server/api/v1/user/friends/index.delete.ts

diff --git a/DB/friendships.sql b/DB/friendships.sql
index 5be07d3..4fd56e0 100644
--- a/DB/friendships.sql
+++ b/DB/friendships.sql
@@ -137,6 +137,20 @@ BEGIN
 END;
 $$ LANGUAGE plpgsql;
 
+-- 2nd version with id
+CREATE OR REPLACE FUNCTION remove_friend_by_id(friendship_id_param INT) RETURNS void AS
+$$
+BEGIN
+    DELETE
+    FROM friendships
+    WHERE friendship_id = friendship_id_param
+      AND status = 'accepted';
+
+    IF NOT FOUND THEN
+        RAISE EXCEPTION 'No active friendship found with this ID';
+    END IF;
+END;
+$$ LANGUAGE plpgsql;
 
 -- retrieve all friends, incoming and outgoing friend requests
 CREATE OR REPLACE FUNCTION get_friends(user_id UUID)
@@ -147,7 +161,8 @@ CREATE OR REPLACE FUNCTION get_friends(user_id UUID)
                 status         friendship_status,
                 action_user_id UUID,
                 created_at     TIMESTAMP WITH TIME ZONE,
-                updated_at     TIMESTAMP WITH TIME ZONE
+                updated_at     TIMESTAMP WITH TIME ZONE,
+                request_type   TEXT
             )
 AS
 $$
@@ -161,7 +176,11 @@ BEGIN
                f.status,
                f.action_user_id,
                f.created_at,
-               f.updated_at
+               f.updated_at,
+               CASE
+                   WHEN f.action_user_id = user_id THEN 'outgoing'
+                   ELSE 'incoming'
+                   END AS request_type
         FROM friendships f
         WHERE (f.user1_id = user_id OR f.user2_id = user_id)
           AND (f.status != 'declined');
diff --git a/pages/testfriends.vue b/pages/testfriends.vue
index ba40d00..aa615e0 100644
--- a/pages/testfriends.vue
+++ b/pages/testfriends.vue
@@ -3,10 +3,11 @@ import {
   type FriendActionRequest,
   FriendshipAction,
   FriendshipStatus,
+  FriendshipType,
   type GetFriendsResponse
 } from "@/types/api/user.friends";
 
-const requests: Ref<GetFriendsResponse[]> = useState("all_friendships", ()=> [])
+const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", ()=> [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
 
 const session = useSupabaseSession()
@@ -20,7 +21,7 @@ onMounted(async () => {
 async function getFriendships() {
   $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
       .then((data) => {
-        requests.value = data.filter((item) => item.status === FriendshipStatus.PENDING)
+        requests.value = data.filter((item) =>item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
         friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
       });
 }
@@ -36,6 +37,10 @@ function handleFriendRequestAction(action: FriendshipAction, friendship_id: numb
     // optimistically update the UI instantly
     requests.value = requests.value.filter((item) => item.friendship_id !== friendship_id)
    getFriendships() // lazily refresh the list
+  } else if (action === FriendshipAction.REMOVE) {
+    // optimistically update the UI instantly
+    friends.value = friends.value.filter((item) => item.friendship_id !== friendship_id)
+    getFriendships() // lazily refresh the list
   }
 }
 
@@ -68,6 +73,20 @@ function decline(friendship_id: number) {
   })
 }
 
+function remove(friendship_id: number) {
+  const actionRequest: FriendActionRequest = {
+    friendship_id: friendship_id,
+    action: FriendshipAction.REMOVE
+  }
+
+  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends/action', {
+    method: 'POST',
+    body: JSON.stringify(actionRequest)
+  }).then(() => {
+    handleFriendRequestAction(FriendshipAction.REMOVE, friendship_id)
+  })
+}
+
 </script>
 
 <template>
@@ -85,7 +104,12 @@ function decline(friendship_id: number) {
     <br>
     <div class="flex flex-auto flex-row items-center">
       <h1 class="py-4 mx-4 text-2xl">Friends:</h1>
-      <div v-for="item in friends" :key="item.friend_id"  class="bg-white p-4 m-4 text-center rounded-lg">{{ item.friend_id }}</div>
+      <div v-for="item in friends" :key="item.friend_id"  class="bg-white p-4 m-4 text-center rounded-lg">
+        {{ item.friend_id }}
+        <button class="pl-4 hover:text-red-500" @click="remove(item.friendship_id)">
+          Remove
+        </button>
+      </div>
     </div>
     <br><br>
   </div>
diff --git a/server/api/v1/user/friends/action.post.ts b/server/api/v1/user/friends/action.post.ts
index 79c03db..637bf1b 100644
--- a/server/api/v1/user/friends/action.post.ts
+++ b/server/api/v1/user/friends/action.post.ts
@@ -1,7 +1,7 @@
 import {z} from "zod";
-import {FriendshipAction, GetFriendsResponse} from "~/types/api/user.friends";
-import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 import type {FriendActionParam} from "~/types/api/user.friends";
+import {FriendshipAction} from "~/types/api/user.friends";
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 import type {PostgrestError} from "@supabase/postgrest-js";
 
 const friendActionSchema = z.object({
@@ -40,11 +40,19 @@ export default defineEventHandler(async (event) => {
             error = declineErr;
             break;
         }
+        case FriendshipAction.REMOVE: {
+            const {error: declineErr} = await client.rpc('remove_friend_by_id', param as never);
+            error = declineErr;
+            break;
+        }
     }
 
     // Handle errors
     if (error) {
-        setResponseStatus(event, 500);
+        if (error.code === 'P0001') {
+            setResponseStatus(event, 400)
+        } else setResponseStatus(event, 500);
+
         return {error: error.message};
     }
 
diff --git a/server/api/v1/user/friends/index.delete.ts b/server/api/v1/user/friends/index.delete.ts
deleted file mode 100644
index 950c339..0000000
--- a/server/api/v1/user/friends/index.delete.ts
+++ /dev/null
@@ -1 +0,0 @@
-// remove friend
\ No newline at end of file
diff --git a/types/api/user.friends.ts b/types/api/user.friends.ts
index 0bf7789..51458c5 100644
--- a/types/api/user.friends.ts
+++ b/types/api/user.friends.ts
@@ -22,18 +22,25 @@ export interface GetFriendsResponse {
     friend_id: string,
     created_at: string
     updated_at: string
-    status: "pending" | "accepted"
+    status: FriendshipStatus,
+    request_type: FriendshipType
 }
 
 export enum FriendshipAction {
     ACCEPT = "accept",
-    DECLINE = "decline"
+    DECLINE = "decline",
+    REMOVE = "remove"
 }
 
 export enum FriendshipStatus {
-    PENDING= "pending",
-    ACCEPTED= "accepted",
-    DECLINED= "declined"
+    PENDING = "pending",
+    ACCEPTED = "accepted",
+    DECLINED = "declined"
+}
+
+export enum FriendshipType {
+    OUTGOING = "outgoing",
+    INCOMING = "incoming"
 }
 
 export interface FriendActionRequest {

From c3498a9654c01f9579ca68a18641194ab07536d9 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 4 Dec 2024 16:20:15 +0100
Subject: [PATCH 043/221] chore: fix tsconfig.json

---
 tsconfig.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index f72ecb1..07b0aaa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,8 @@
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+      "~/*": ["./*"]
     }
   },
 }

From 0f81c556db3cef03f8339f56fc8bd5c6445d49e4 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 4 Dec 2024 21:12:41 +0100
Subject: [PATCH 044/221] added first draft for profile view

---
 components/profile/Friendlist.vue         | 14 ++++++++++++
 components/profile/ProfileInformation.vue | 21 ++++++++++++++++++
 components/profile/ProfileOverview.vue    | 14 ++++++++++++
 layouts/FooterView.vue                    | 27 +++++++++++++++++++++++
 pages/index.vue                           |  7 ------
 pages/profile.vue                         | 19 ++++++++++++++++
 6 files changed, 95 insertions(+), 7 deletions(-)
 create mode 100644 components/profile/Friendlist.vue
 create mode 100644 components/profile/ProfileInformation.vue
 create mode 100644 components/profile/ProfileOverview.vue
 create mode 100644 layouts/FooterView.vue
 create mode 100644 pages/profile.vue

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
new file mode 100644
index 0000000..b30ff99
--- /dev/null
+++ b/components/profile/Friendlist.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
+        <p class="my-1 ">Friends</p>
+        <div class="flex space-x-3">
+            <HomeUsersUserBox name="test1" :user-turn="false"/>
+            <HomeUsersUserBox name="test2" :user-turn="false"/>
+            <HomeUsersUserBox name="test3" :user-turn="false"/>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
new file mode 100644
index 0000000..dee57b8
--- /dev/null
+++ b/components/profile/ProfileInformation.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="flex flex-col">
+        <!-- First inner div -->
+        <div class="flex flex-col items-center justify-center mb-3">
+            <img src="https://i.scdn.co/image/ab6775700000ee855d4c281804e8773208248312"
+                class="w-16 h-16 rounded-full" />
+            <p>Nickname</p>
+        </div>
+        <!-- Second inner div -->
+        <div  class="grid grid-cols-2 gap-4">
+            <div class="bg-gray-200 h-8 rounded-3xl px-3">Streak</div>
+            <div class="bg-gray-200 h-8 rounded-3xl px-3">Games played</div>
+            <div class="bg-gray-200 h-8 rounded-3xl px-3">Placeholder</div>
+            <div class="bg-gray-200 h-8 rounded-3xl px-3">Date joined</div>
+        </div>
+    </div>
+</template>
diff --git a/components/profile/ProfileOverview.vue b/components/profile/ProfileOverview.vue
new file mode 100644
index 0000000..f8e09f9
--- /dev/null
+++ b/components/profile/ProfileOverview.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import Friendlist from './Friendlist.vue';
+
+
+</script>
+
+<template>
+    <div>
+        <div class="p-3">
+            <ProfileInformation class="py-8"/>
+            <Friendlist/>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/layouts/FooterView.vue b/layouts/FooterView.vue
new file mode 100644
index 0000000..6381c9d
--- /dev/null
+++ b/layouts/FooterView.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex flex-col h-screen max-h-screen items-center">
+    <!-- Wrapper div für die Breiten-Kontrolle -->
+    <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
+      <!-- Content -->
+      <div class="flex-1 border rounded-3xl">
+          <slot name="content"/>
+      </div>
+
+      <!-- Footer -->
+      <div class="basis-24 border rounded-t-3xl">
+        <div class="flex justify-around items-center h-full">
+          <slot name="footer"/>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 65289b0..0f8d7a4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,13 +1,6 @@
 <script setup lang="ts">
-
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
 
-useSeoMeta({
-  title: "BeatBuzzer",
-  description: "A fun music quiz game",
-  viewport: "width=device-width, initial-scale=1.0",
-})
-
 </script>
 
 <template>
diff --git a/pages/profile.vue b/pages/profile.vue
new file mode 100644
index 0000000..48e8a39
--- /dev/null
+++ b/pages/profile.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+    import HeaderFooterView from "~/layouts/FooterView.vue";
+</script>
+
+<template>
+    <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+        <HeaderFooterView>
+            <template #content>
+                <ProfileOverview/>
+            </template>
+
+            <template #footer>
+                <div class="text-4xl">A</div>
+                <div class="text-4xl">B</div>
+                <div class="text-4xl">C</div>
+            </template>
+        </HeaderFooterView>
+    </div>
+</template>
\ No newline at end of file

From 81dbf5f704092c972b21057b18ef554fea1014c1 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 4 Dec 2024 21:50:42 +0100
Subject: [PATCH 045/221] added initial functionality

---
 components/profile/Friendlist.vue | 36 +++++++++++++++++++++--
 types/api/user.friends.ts         | 49 +++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 types/api/user.friends.ts

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index b30ff99..8cac097 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,4 +1,30 @@
 <script setup lang="ts">
+import {
+  type FriendActionRequest,
+  FriendshipAction,
+  FriendshipStatus,
+  FriendshipType,
+  type GetFriendsResponse
+} from "@/types/api/user.friends";
+
+const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", ()=> [])
+const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
+
+const session = useSupabaseSession()
+onMounted(async () => {
+    if (session.value) {
+        await getFriendships();
+        console.log(friends.value)
+    }
+})
+
+async function getFriendships() {
+    $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
+        .then((data) => {
+            requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
+            friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+        });
+}
 
 </script>
 
@@ -6,9 +32,13 @@
     <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
         <p class="my-1 ">Friends</p>
         <div class="flex space-x-3">
-            <HomeUsersUserBox name="test1" :user-turn="false"/>
-            <HomeUsersUserBox name="test2" :user-turn="false"/>
-            <HomeUsersUserBox name="test3" :user-turn="false"/>
+            <HomeUsersUserBox name="test1" :user-turn="false" />
+            <HomeUsersUserBox name="test2" :user-turn="false" />
+            <HomeUsersUserBox name="test3" :user-turn="false" />
         </div>
     </div>
+
+    <div v-for="item in friends" :key="item.friend_id"  class="bg-white p-4 m-4 text-center rounded-lg">
+        {{ item.friend_id }}
+        </div>
 </template>
\ No newline at end of file
diff --git a/types/api/user.friends.ts b/types/api/user.friends.ts
new file mode 100644
index 0000000..bdb60b1
--- /dev/null
+++ b/types/api/user.friends.ts
@@ -0,0 +1,49 @@
+// ----- Internal Types -----
+export interface FriendError {
+    message: string
+}
+
+export interface GetFriendParam {
+    user_id: string
+}
+
+export interface SendFriendRequestParam {
+    sender_id: string,
+    receiver_id: string
+}
+
+export interface FriendActionParam {
+    friendship_id_param: number,
+}
+
+// ----- For API Consumer -----
+export interface GetFriendsResponse {
+    friendship_id: number,
+    friend_id: string,
+    created_at: string
+    updated_at: string
+    status: FriendshipStatus,
+    request_type: FriendshipType
+}
+
+export enum FriendshipAction {
+    ACCEPT = "accept",
+    DECLINE = "decline",
+    REMOVE = "remove"
+}
+
+export enum FriendshipStatus {
+    PENDING = "pending",
+    ACCEPTED = "accepted",
+    DECLINED = "declined"
+}
+
+export enum FriendshipType {
+    OUTGOING = "outgoing",
+    INCOMING = "incoming"
+}
+
+export interface FriendActionRequest {
+    action: FriendshipAction,
+    friendship_id: number
+}
\ No newline at end of file

From 203c86916a8a7fce4b76cab447d1c832a606f3bb Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 4 Dec 2024 22:10:35 +0100
Subject: [PATCH 046/221] added needed api files for friendlist

---
 DB/friendships.sql                        | 195 ++++++++++++++++++++++
 DB/users.sql                              |  15 ++
 components/profile/Friendlist.vue         |  20 +--
 server/api/v1/README.md                   |  80 +++++++++
 server/api/v1/health.ts                   |   8 +
 server/api/v1/playlist/[uid].get.ts       |  36 ++++
 server/api/v1/playlist/index.get.ts       |  27 +++
 server/api/v1/playlist/index.post.ts      |  55 ++++++
 server/api/v1/playlist/playlist.http      |  36 ++++
 server/api/v1/user/[uid].get.ts           |   5 +
 server/api/v1/user/friends/action.post.ts |  60 +++++++
 server/api/v1/user/friends/index.get.ts   |  31 ++++
 server/api/v1/user/friends/index.post.ts  |  37 ++++
 13 files changed, 595 insertions(+), 10 deletions(-)
 create mode 100644 DB/friendships.sql
 create mode 100644 DB/users.sql
 create mode 100644 server/api/v1/README.md
 create mode 100644 server/api/v1/health.ts
 create mode 100644 server/api/v1/playlist/[uid].get.ts
 create mode 100644 server/api/v1/playlist/index.get.ts
 create mode 100644 server/api/v1/playlist/index.post.ts
 create mode 100644 server/api/v1/playlist/playlist.http
 create mode 100644 server/api/v1/user/[uid].get.ts
 create mode 100644 server/api/v1/user/friends/action.post.ts
 create mode 100644 server/api/v1/user/friends/index.get.ts
 create mode 100644 server/api/v1/user/friends/index.post.ts

diff --git a/DB/friendships.sql b/DB/friendships.sql
new file mode 100644
index 0000000..3f59a05
--- /dev/null
+++ b/DB/friendships.sql
@@ -0,0 +1,195 @@
+DO
+$$
+    BEGIN
+        IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'friendship_status') THEN
+            CREATE TYPE friendship_status AS ENUM ('pending', 'accepted', 'declined');
+        END IF;
+    END
+$$;
+
+CREATE TABLE IF NOT EXISTS friendships
+(
+    friendship_id  SERIAL PRIMARY KEY,
+    user1_id       UUID                     NOT NULL,
+    user2_id       UUID                     NOT NULL,
+    status         friendship_status        NOT NULL,
+    action_user_id UUID                     NOT NULL, -- The user who performed the last action
+    created_at     TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
+    updated_at     TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),
+
+    -- Ensure user1_id is always less than user2_id to prevent duplicate friendships
+    CONSTRAINT ensure_user_order CHECK (user1_id < user2_id),
+    CONSTRAINT unique_friendship UNIQUE (user1_id, user2_id),
+
+    -- Foreign keys
+    CONSTRAINT fk_user1 FOREIGN KEY (user1_id) REFERENCES users (id) ON DELETE CASCADE,
+    CONSTRAINT fk_user2 FOREIGN KEY (user2_id) REFERENCES users (id) ON DELETE CASCADE,
+    CONSTRAINT fk_action_user FOREIGN KEY (action_user_id) REFERENCES users (id)
+);
+
+CREATE INDEX IF NOT EXISTS idx_friendship_user1 ON friendships (user1_id, status);
+CREATE INDEX IF NOT EXISTS idx_friendship_user2 ON friendships (user2_id, status);
+
+-- Functions
+
+-- automatically update updated_at timestamp
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+    RETURNS TRIGGER AS
+$$
+BEGIN
+    NEW.updated_at = now();
+    RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE TRIGGER update_friendships_timestamp
+    BEFORE UPDATE
+    ON friendships
+    FOR EACH ROW
+EXECUTE FUNCTION update_updated_at_column();
+
+-- Send a friend request
+CREATE OR REPLACE FUNCTION send_friend_request(sender_id UUID, receiver_id UUID) RETURNS void AS
+$$
+DECLARE
+    smaller_id UUID;
+    larger_id  UUID;
+BEGIN
+    -- Determine order of IDs
+    IF sender_id < receiver_id THEN
+        smaller_id := sender_id;
+        larger_id := receiver_id;
+    ELSE
+        smaller_id := receiver_id;
+        larger_id := sender_id;
+    END IF;
+
+    -- Insert friendship record
+    INSERT INTO friendships (user1_id, user2_id, status, action_user_id)
+    VALUES (smaller_id, larger_id, 'pending', sender_id)
+    ON CONFLICT (user1_id, user2_id) DO UPDATE
+        SET status         = CASE
+                                 WHEN friendships.status = 'declined' THEN 'pending'::friendship_status
+                                 ELSE friendships.status
+            END,
+            action_user_id = sender_id;
+END;
+$$ LANGUAGE plpgsql;
+
+-- accept friendship request
+CREATE OR REPLACE FUNCTION accept_friend_request_by_id(friendship_id_param INT)
+    RETURNS void AS
+$$
+BEGIN
+    UPDATE friendships
+    SET status = 'accepted'
+    WHERE friendship_id = friendship_id_param
+      AND status = 'pending';
+
+    IF NOT FOUND THEN
+        RAISE EXCEPTION 'No pending friend request found with this ID';
+    END IF;
+END;
+$$ LANGUAGE plpgsql;
+
+
+-- decline friendship request
+CREATE OR REPLACE FUNCTION decline_friend_request_by_id(friendship_id_param INT)
+    RETURNS void AS
+$$
+BEGIN
+    UPDATE friendships
+    SET status = 'declined'
+    WHERE friendship_id = friendship_id_param
+      AND status = 'pending';
+
+    IF NOT FOUND THEN
+        RAISE EXCEPTION 'No pending friend request found with this ID';
+    END IF;
+END;
+$$ LANGUAGE plpgsql;
+
+-- delete friendship
+CREATE OR REPLACE FUNCTION remove_friend(user_id UUID, friend_id UUID) RETURNS void AS
+$$
+DECLARE
+    smaller_id UUID;
+    larger_id  UUID;
+BEGIN
+    -- Determine order of IDs
+    IF friend_id < user_id THEN
+        smaller_id := friend_id;
+        larger_id := user_id;
+    ELSE
+        smaller_id := user_id;
+        larger_id := friend_id;
+    END IF;
+
+    DELETE
+    FROM friendships
+    WHERE user1_id = smaller_id
+      AND user2_id = larger_id
+      AND status = 'accepted';
+
+    IF NOT FOUND THEN
+        RAISE EXCEPTION 'No active friendship found between these users';
+    END IF;
+END;
+$$ LANGUAGE plpgsql;
+
+-- 2nd version with id
+CREATE OR REPLACE FUNCTION remove_friend_by_id(friendship_id_param INT) RETURNS void AS
+$$
+BEGIN
+    DELETE
+    FROM friendships
+    WHERE friendship_id = friendship_id_param
+      AND status = 'accepted';
+
+    IF NOT FOUND THEN
+        RAISE EXCEPTION 'No active friendship found with this ID';
+    END IF;
+END;
+$$ LANGUAGE plpgsql;
+
+-- retrieve all friends, incoming and outgoing friend requests
+CREATE OR REPLACE FUNCTION get_friends(user_id UUID)
+    RETURNS TABLE
+            (
+                friendship_id  INT,
+                friend_id      UUID,
+                status         friendship_status,
+                action_user_id UUID,
+                created_at     TIMESTAMP WITH TIME ZONE,
+                updated_at     TIMESTAMP WITH TIME ZONE,
+                request_type   TEXT
+            )
+AS
+$$
+BEGIN
+    RETURN QUERY
+        SELECT f.friendship_id,
+               CASE
+                   WHEN f.user1_id = user_id THEN f.user2_id
+                   ELSE f.user1_id
+                   END AS friend_id,
+               f.status,
+               f.action_user_id,
+               f.created_at,
+               f.updated_at,
+               CASE
+                   WHEN f.action_user_id = user_id THEN 'outgoing'
+                   ELSE 'incoming'
+                   END AS request_type
+        FROM friendships f
+        WHERE (f.user1_id = user_id OR f.user2_id = user_id)
+          AND (f.status != 'declined');
+END;
+$$ LANGUAGE plpgsql;
+
+-- examples
+-- SELECT send_friend_request('sender', 'receiver');
+-- SELECT accept_friend_request_by_id(4);
+-- SELECT decline_friend_request_by_id(4);
+-- SELECT remove_friend('friend_user');
+-- SELECT * FROM get_friends('user_id');
\ No newline at end of file
diff --git a/DB/users.sql b/DB/users.sql
new file mode 100644
index 0000000..ef78b16
--- /dev/null
+++ b/DB/users.sql
@@ -0,0 +1,15 @@
+CREATE TABLE users
+(
+    id                 uuid    not null references auth.users on delete cascade,
+    avatar_url         text,
+    username           text    not null,
+    spotify_id         text    not null,
+    spotify_visibility boolean not null default false,
+    primary key (id)
+);
+
+ALTER TABLE users
+    ADD CONSTRAINT unique_username UNIQUE (username),
+    ADD CONSTRAINT valid_username check (username <> '' AND length(trim(username)) >= 4 AND username ~ '^[a-zA-Z0-9_]+$');
+
+CREATE INDEX idx_username ON users(username);
\ No newline at end of file
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 8cac097..44f32c7 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -11,19 +11,19 @@ const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", ()=
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
 
 const session = useSupabaseSession()
+
 onMounted(async () => {
-    if (session.value) {
-        await getFriendships();
-        console.log(friends.value)
-    }
+  if (session.value) {
+    await getFriendships()
+  }
 })
 
 async function getFriendships() {
-    $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
-        .then((data) => {
-            requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
-            friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
-        });
+  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
+      .then((data) => {
+        requests.value = data.filter((item) =>item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
+        friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+      });
 }
 
 </script>
@@ -40,5 +40,5 @@ async function getFriendships() {
 
     <div v-for="item in friends" :key="item.friend_id"  class="bg-white p-4 m-4 text-center rounded-lg">
         {{ item.friend_id }}
-        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/server/api/v1/README.md b/server/api/v1/README.md
new file mode 100644
index 0000000..36bd42f
--- /dev/null
+++ b/server/api/v1/README.md
@@ -0,0 +1,80 @@
+# Examples how to create api handlers
+
+## Example 1: Simple handler
+
+Route based: `server/api/v1/hello.ts` will hear on `/api/v1/hello`
+
+```ts
+import {serverSupabaseClient} from '#supabase/server'
+
+export default defineEventHandler(async (event) => {
+    const client = await serverSupabaseClient(event)
+    const {data} = await client.from('calculations').select('*')
+
+    return {data: data}
+})
+```
+
+## Example 2: Handler with Route parameters
+File: `server/api/hello/[name].ts`.  
+Square brackets indicate wildcard that will get passed to handler.
+
+
+```ts
+export default defineEventHandler((event) => {
+    const name = getRouterParam(event, 'name')
+
+    return `Hello, ${name}!`
+})
+```
+
+## Example 3: Handler with Query parameters
+Example: `/api/query?foo=bar&baz=qux`
+
+```ts
+export default defineEventHandler((event) => {
+    const query = getQuery(event)
+
+    return { a: query.foo, b: query.baz }   
+})
+```
+
+## Example 4: Handler with POST body
+
+File: `server/api/v1/hello.POST.ts`
+```ts
+import { z } from 'zod'
+
+const userSchema = z.object({
+    name: z.string().default('Guest'),
+    email: z.string().email(),
+})
+
+export default defineEventHandler(async (event) => {
+    const result = await readValidatedBody(event, body => userSchema.safeParse(body)) // or `.parse` to directly throw an error
+
+    if (!result.success)
+        throw result.error.issues
+
+    // User object is validated and typed!
+    return result.data
+})
+```
+
+## Example 5: Custom Error handling
+
+```ts
+export default defineEventHandler(async (event) => {
+    throw createError({
+        statusCode: 400,
+        statusMessage: 'ID should be an integer',
+    })
+})
+```
+
+## Example 6: Custom Status Codes
+```ts
+export default defineEventHandler(async (event) => {
+    setResponseStatus(event, 202)
+})
+```
\ No newline at end of file
diff --git a/server/api/v1/health.ts b/server/api/v1/health.ts
new file mode 100644
index 0000000..ab9acdf
--- /dev/null
+++ b/server/api/v1/health.ts
@@ -0,0 +1,8 @@
+export default defineEventHandler(async () => {
+    return {
+        status: 'ok',
+        timestamp: new Date().toISOString(),
+        uptime: process.uptime(),
+        memoryUsage: process.memoryUsage().heapUsed*1e-6, // in MB
+    };
+})
\ No newline at end of file
diff --git a/server/api/v1/playlist/[uid].get.ts b/server/api/v1/playlist/[uid].get.ts
new file mode 100644
index 0000000..b9be938
--- /dev/null
+++ b/server/api/v1/playlist/[uid].get.ts
@@ -0,0 +1,36 @@
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+
+
+/**
+ * Endpoint to get a playlist by id
+ * @returns {Object} - Playlist object
+ * @throws {400} - Invalid playlistId
+ * @throws {401} - Unauthenticated
+ * @throws {500} - Internal Server Error
+ */
+export default defineEventHandler(async (event) => {
+    const playlistId = getRouterParam(event, 'uid')
+
+    // check regex playlistId
+    if (!playlistId || !isValidSpotifyID(playlistId!)) {
+        setResponseStatus(event, 400);
+        return {error: 'invalid playlistId'};
+    }
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    const client = serverSupabaseServiceRole(event);
+    const {data, error} = await client.from('playlists').select('*').eq('id', playlistId).single();
+
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    return data;
+})
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.get.ts b/server/api/v1/playlist/index.get.ts
new file mode 100644
index 0000000..1a23cb1
--- /dev/null
+++ b/server/api/v1/playlist/index.get.ts
@@ -0,0 +1,27 @@
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+
+/**
+ * Endpoint to get all playlists
+ * @throws {401} - Unauthenticated
+ * @throws {500} - Internal Server Error
+ * @returns {Array} - Array of playlists
+ */
+export default defineEventHandler(async (event) => {
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    const client = serverSupabaseServiceRole(event);
+    const {data, error} = await client.from('playlists').select();
+
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    return data;
+})
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
new file mode 100644
index 0000000..7fa2412
--- /dev/null
+++ b/server/api/v1/playlist/index.post.ts
@@ -0,0 +1,55 @@
+import {z} from 'zod'
+import {spotifyIDRegex} from "~/server/utils/data-validation";
+import {serverSupabaseServiceRole} from "#supabase/server";
+import {UNIQUE_VIOLATION} from "~/server/utils/postgres-errors";
+import {getPlaylistCover, getSpotifyToken} from "~/server/utils/spotify";
+
+const schema = z.object({
+    id: z.string().regex(spotifyIDRegex),
+    name: z.string(),
+    spotifyId: z.string().regex(spotifyIDRegex),
+    categories: z.array(z.string()),
+    enabled: z.boolean().optional().default(true)
+})
+
+
+/**
+ * Unauthenticated endpoint to create a playlist - management only
+ * @throws {400} - Invalid body
+ * @throws {400} - Playlist with this ID already exists
+ * @throws {500} - Internal Server Error
+ * @returns {Object} - Created playlist
+ */
+export default defineEventHandler(async (event) => {
+    const result = await readValidatedBody(event, body => schema.safeParse(body))
+
+    if (!result.success) {
+        setResponseStatus(event, 400);
+        return {error: result.error.issues};
+    }
+
+    const token = await getSpotifyToken();
+    const coverUrl = await getPlaylistCover(token, result.data.spotifyId);
+
+    const playlistInsert = {
+        id: result.data.id,
+        name: result.data.name,
+        spotifyId: result.data.spotifyId,
+        cover: coverUrl
+    }
+
+    const client = serverSupabaseServiceRole(event)
+    const {data, error} = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
+
+    if (error) {
+        setResponseStatus(event, 400);
+        if (error.code === UNIQUE_VIOLATION)
+            return {error: 'Playlist with this ID already exists'};
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+
+    setResponseStatus(event, 201);
+    return data;
+})
\ No newline at end of file
diff --git a/server/api/v1/playlist/playlist.http b/server/api/v1/playlist/playlist.http
new file mode 100644
index 0000000..629a587
--- /dev/null
+++ b/server/api/v1/playlist/playlist.http
@@ -0,0 +1,36 @@
+@baseUrl = http://localhost:3000/api/v1
+@authCookie =
+
+### Get all Playlists
+GET {{baseUrl}}/playlist
+Cookie: {{authCookie}}
+
+
+### Get specific Playlist
+@playlistId = 37i9dQZF1EIYE32WUF6sxN
+
+GET {{baseUrl}}/playlist/{{playlistId}}
+Cookie: {{authCookie}}
+
+
+### Add a Spotify Playlist to our system
+POST {{baseUrl}}/playlist
+
+{
+"id": "37i9dQZF1DX2CtuHQcongT",
+"name": "This is SEGA SOUND TEAM",
+"spotifyId": "37i9dQZF1DX2CtuHQcongT",
+"categories": ["sega"]
+}
+
+### Add a Disabled Spotify Playlist to our system
+POST {{baseUrl}}/playlist
+
+{
+"id": "37i9dQZF1DX2CtuHQcongT",
+"name": "This is SEGA SOUND TEAM",
+"spotifyId": "37i9dQZF1DX2CtuHQcongT",
+"categories": ["sega"]
+"enabled": false
+}
+
diff --git a/server/api/v1/user/[uid].get.ts b/server/api/v1/user/[uid].get.ts
new file mode 100644
index 0000000..f42c743
--- /dev/null
+++ b/server/api/v1/user/[uid].get.ts
@@ -0,0 +1,5 @@
+export default defineEventHandler((event) => {
+    const userId = getRouterParam(event, 'uid')
+
+    return;
+})
\ No newline at end of file
diff --git a/server/api/v1/user/friends/action.post.ts b/server/api/v1/user/friends/action.post.ts
new file mode 100644
index 0000000..637bf1b
--- /dev/null
+++ b/server/api/v1/user/friends/action.post.ts
@@ -0,0 +1,60 @@
+import {z} from "zod";
+import type {FriendActionParam} from "~/types/api/user.friends";
+import {FriendshipAction} from "~/types/api/user.friends";
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import type {PostgrestError} from "@supabase/postgrest-js";
+
+const friendActionSchema = z.object({
+    friendship_id: z.number().int().positive(),
+    action: z.nativeEnum(FriendshipAction)
+}).readonly()
+
+export default defineEventHandler(async (event) => {
+    // validate post-request body
+    const result = await readValidatedBody(event, body => friendActionSchema.safeParse(body))
+    if (!result.success) {
+        setResponseStatus(event, 400);
+        return {error: result.error.issues};
+    }
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Send request
+    const client = serverSupabaseServiceRole(event);
+    const param: FriendActionParam = {friendship_id_param: result.data.friendship_id};
+
+    let error: PostgrestError | null = null;
+    switch (result.data.action) {
+        case FriendshipAction.ACCEPT: {
+            const {error: acceptErr} = await client.rpc('accept_friend_request_by_id', param as never);
+            error = acceptErr;
+            break;
+        }
+        case FriendshipAction.DECLINE: {
+            const {error: declineErr} = await client.rpc('decline_friend_request_by_id', param as never);
+            error = declineErr;
+            break;
+        }
+        case FriendshipAction.REMOVE: {
+            const {error: declineErr} = await client.rpc('remove_friend_by_id', param as never);
+            error = declineErr;
+            break;
+        }
+    }
+
+    // Handle errors
+    if (error) {
+        if (error.code === 'P0001') {
+            setResponseStatus(event, 400)
+        } else setResponseStatus(event, 500);
+
+        return {error: error.message};
+    }
+
+    return {};
+});
\ No newline at end of file
diff --git a/server/api/v1/user/friends/index.get.ts b/server/api/v1/user/friends/index.get.ts
new file mode 100644
index 0000000..9942fd0
--- /dev/null
+++ b/server/api/v1/user/friends/index.get.ts
@@ -0,0 +1,31 @@
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import type {FriendError, GetFriendParam, GetFriendsResponse} from "~/types/api/user.friends";
+
+// Not relative to userid because you should always only be able to see your own friends
+// User id can be grabbed from the access token
+
+export default defineEventHandler(async (event) => {
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Get friends
+    const client = serverSupabaseServiceRole(event);
+    const param: GetFriendParam = {user_id: user.id};
+
+    const {data, error}: {
+        data: GetFriendsResponse[] | null,
+        error: FriendError | null
+    } = await client.rpc('get_friends', param as never);
+
+    // Handle errors
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    return data;
+});
\ No newline at end of file
diff --git a/server/api/v1/user/friends/index.post.ts b/server/api/v1/user/friends/index.post.ts
new file mode 100644
index 0000000..5c373bc
--- /dev/null
+++ b/server/api/v1/user/friends/index.post.ts
@@ -0,0 +1,37 @@
+// send friend invite
+import {z} from 'zod'
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import type {SendFriendRequestParam} from "~/types/api/user.friends";
+
+const userSchema = z.object({
+    receiver_id: z.string().uuid()
+}).readonly()
+
+export default defineEventHandler(async (event) => {
+    // validate post-request body
+    const result = await readValidatedBody(event, body => userSchema.safeParse(body))
+    if (!result.success) {
+        setResponseStatus(event, 400);
+        return {error: result.error.issues};
+    }
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Send request
+    const client = serverSupabaseServiceRole(event);
+    const param: SendFriendRequestParam = {sender_id: user.id, receiver_id: result.data.receiver_id};
+    const {error} = await client.rpc('send_friend_request', param as never);
+
+    // Handle errors
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    return {};
+});
\ No newline at end of file

From 8e4cff3f0ab502edfd6afc119a98d920249ee371 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 4 Dec 2024 22:52:19 +0100
Subject: [PATCH 047/221] feat(friend): friend endpoint now presents basic user
 info

---
 DB/friendships.sql        | 38 ++++++++++++++++++++------------------
 types/api/user.friends.ts |  6 ++++++
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/DB/friendships.sql b/DB/friendships.sql
index 4fd56e0..3e80df6 100644
--- a/DB/friendships.sql
+++ b/DB/friendships.sql
@@ -156,37 +156,39 @@ $$ LANGUAGE plpgsql;
 CREATE OR REPLACE FUNCTION get_friends(user_id UUID)
     RETURNS TABLE
             (
-                friendship_id  INT,
-                friend_id      UUID,
-                status         friendship_status,
-                action_user_id UUID,
-                created_at     TIMESTAMP WITH TIME ZONE,
-                updated_at     TIMESTAMP WITH TIME ZONE,
-                request_type   TEXT
+                friendship_id             INT,
+                friend_id                 UUID,
+                friend_username           TEXT,
+                friend_avatar             TEXT,
+                friend_spotify_id         TEXT,
+                friend_spotify_visibility BOOLEAN,
+                status                    friendship_status,
+                action_user_id            UUID,
+                created_at                TIMESTAMP WITH TIME ZONE,
+                updated_at                TIMESTAMP WITH TIME ZONE,
+                request_type              TEXT
             )
 AS
 $$
 BEGIN
     RETURN QUERY
         SELECT f.friendship_id,
-               CASE
-                   WHEN f.user1_id = user_id THEN f.user2_id
-                   ELSE f.user1_id
-                   END AS friend_id,
+               CASE WHEN f.user1_id = user_id THEN f.user2_id ELSE f.user1_id END       AS friend_id,
+               u.username                                                               AS friend_username,
+               u.avatar_url                                                             AS friend_avatar,
+               u.spotify_id                                                             AS friend_spotify_id,
+               u.spotify_visibility                                                     AS friend_spotify_visibility,
                f.status,
                f.action_user_id,
                f.created_at,
                f.updated_at,
-               CASE
-                   WHEN f.action_user_id = user_id THEN 'outgoing'
-                   ELSE 'incoming'
-                   END AS request_type
-        FROM friendships f
+               CASE WHEN f.action_user_id = user_id THEN 'outgoing' ELSE 'incoming' END AS request_type
+        FROM friendships f, users u
         WHERE (f.user1_id = user_id OR f.user2_id = user_id)
-          AND (f.status != 'declined');
+          AND (f.status != 'declined')
+          AND (CASE WHEN f.user1_id = user_id THEN f.user2_id ELSE f.user1_id END = u.id);
 END;
 $$ LANGUAGE plpgsql;
-
 -- examples
 -- SELECT send_friend_request('sender', 'receiver');
 -- SELECT accept_friend_request_by_id(4);
diff --git a/types/api/user.friends.ts b/types/api/user.friends.ts
index 51458c5..08c51dd 100644
--- a/types/api/user.friends.ts
+++ b/types/api/user.friends.ts
@@ -1,4 +1,6 @@
 // ----- Internal Types -----
+import type * as url from "node:url";
+
 export interface FriendError {
     message: string
 }
@@ -20,6 +22,10 @@ export interface FriendActionParam {
 export interface GetFriendsResponse {
     friendship_id: number,
     friend_id: string,
+    friend_username: string,
+    friend_avatar: url.URL | null,
+    friend_spotify_id: string,
+    friend_spotify_visibility: boolean,
     created_at: string
     updated_at: string
     status: FriendshipStatus,

From 04613af5d624c83e0734d40001ce05f4b4e1c78d Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 4 Dec 2024 22:57:01 +0100
Subject: [PATCH 048/221] added working friendlist (name is still uid)

---
 components/profile/Friendlist.vue    | 42 ++++++++++-----------
 server/api/v1/playlist/[uid].get.ts  | 36 ------------------
 server/api/v1/playlist/index.get.ts  | 27 --------------
 server/api/v1/playlist/index.post.ts | 55 ----------------------------
 server/api/v1/playlist/playlist.http | 36 ------------------
 5 files changed, 20 insertions(+), 176 deletions(-)
 delete mode 100644 server/api/v1/playlist/[uid].get.ts
 delete mode 100644 server/api/v1/playlist/index.get.ts
 delete mode 100644 server/api/v1/playlist/index.post.ts
 delete mode 100644 server/api/v1/playlist/playlist.http

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 44f32c7..177a354 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,29 +1,30 @@
 <script setup lang="ts">
 import {
-  type FriendActionRequest,
-  FriendshipAction,
-  FriendshipStatus,
-  FriendshipType,
-  type GetFriendsResponse
+    type FriendActionRequest,
+    FriendshipAction,
+    FriendshipStatus,
+    FriendshipType,
+    type GetFriendsResponse
 } from "@/types/api/user.friends";
 
-const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", ()=> [])
+const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
 
 const session = useSupabaseSession()
 
 onMounted(async () => {
-  if (session.value) {
-    await getFriendships()
-  }
+    if (session.value) {
+        await getFriendships()
+        friends.value.push(friends.value[0])
+    }
 })
 
 async function getFriendships() {
-  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
-      .then((data) => {
-        requests.value = data.filter((item) =>item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
-        friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
-      });
+    $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
+        .then((data) => {
+            requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
+            friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+        });
 }
 
 </script>
@@ -31,14 +32,11 @@ async function getFriendships() {
 <template>
     <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
         <p class="my-1 ">Friends</p>
-        <div class="flex space-x-3">
-            <HomeUsersUserBox name="test1" :user-turn="false" />
-            <HomeUsersUserBox name="test2" :user-turn="false" />
-            <HomeUsersUserBox name="test3" :user-turn="false" />
+        <div class="flex space-x-3 overflow-x-auto">
+            <HomeUsersUserBox v-for="item in friends" :key="item.friend_id" :name="item.friend_id" :user-turn="false"
+                class="shrink-0 w-[calc(33.33%-1rem)]" />
         </div>
-    </div>
 
-    <div v-for="item in friends" :key="item.friend_id"  class="bg-white p-4 m-4 text-center rounded-lg">
-        {{ item.friend_id }}
+
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/server/api/v1/playlist/[uid].get.ts b/server/api/v1/playlist/[uid].get.ts
deleted file mode 100644
index b9be938..0000000
--- a/server/api/v1/playlist/[uid].get.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
-
-
-/**
- * Endpoint to get a playlist by id
- * @returns {Object} - Playlist object
- * @throws {400} - Invalid playlistId
- * @throws {401} - Unauthenticated
- * @throws {500} - Internal Server Error
- */
-export default defineEventHandler(async (event) => {
-    const playlistId = getRouterParam(event, 'uid')
-
-    // check regex playlistId
-    if (!playlistId || !isValidSpotifyID(playlistId!)) {
-        setResponseStatus(event, 400);
-        return {error: 'invalid playlistId'};
-    }
-
-    // Require user to be authenticated
-    const user = await serverSupabaseUser(event);
-    if (!user?.id) {
-        setResponseStatus(event, 401);
-        return {error: 'unauthenticated'};
-    }
-
-    const client = serverSupabaseServiceRole(event);
-    const {data, error} = await client.from('playlists').select('*').eq('id', playlistId).single();
-
-    if (error) {
-        setResponseStatus(event, 500);
-        return {error: error.message};
-    }
-
-    return data;
-})
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.get.ts b/server/api/v1/playlist/index.get.ts
deleted file mode 100644
index 1a23cb1..0000000
--- a/server/api/v1/playlist/index.get.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
-
-/**
- * Endpoint to get all playlists
- * @throws {401} - Unauthenticated
- * @throws {500} - Internal Server Error
- * @returns {Array} - Array of playlists
- */
-export default defineEventHandler(async (event) => {
-
-    // Require user to be authenticated
-    const user = await serverSupabaseUser(event);
-    if (!user?.id) {
-        setResponseStatus(event, 401);
-        return {error: 'unauthenticated'};
-    }
-
-    const client = serverSupabaseServiceRole(event);
-    const {data, error} = await client.from('playlists').select();
-
-    if (error) {
-        setResponseStatus(event, 500);
-        return {error: error.message};
-    }
-
-    return data;
-})
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
deleted file mode 100644
index 7fa2412..0000000
--- a/server/api/v1/playlist/index.post.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {z} from 'zod'
-import {spotifyIDRegex} from "~/server/utils/data-validation";
-import {serverSupabaseServiceRole} from "#supabase/server";
-import {UNIQUE_VIOLATION} from "~/server/utils/postgres-errors";
-import {getPlaylistCover, getSpotifyToken} from "~/server/utils/spotify";
-
-const schema = z.object({
-    id: z.string().regex(spotifyIDRegex),
-    name: z.string(),
-    spotifyId: z.string().regex(spotifyIDRegex),
-    categories: z.array(z.string()),
-    enabled: z.boolean().optional().default(true)
-})
-
-
-/**
- * Unauthenticated endpoint to create a playlist - management only
- * @throws {400} - Invalid body
- * @throws {400} - Playlist with this ID already exists
- * @throws {500} - Internal Server Error
- * @returns {Object} - Created playlist
- */
-export default defineEventHandler(async (event) => {
-    const result = await readValidatedBody(event, body => schema.safeParse(body))
-
-    if (!result.success) {
-        setResponseStatus(event, 400);
-        return {error: result.error.issues};
-    }
-
-    const token = await getSpotifyToken();
-    const coverUrl = await getPlaylistCover(token, result.data.spotifyId);
-
-    const playlistInsert = {
-        id: result.data.id,
-        name: result.data.name,
-        spotifyId: result.data.spotifyId,
-        cover: coverUrl
-    }
-
-    const client = serverSupabaseServiceRole(event)
-    const {data, error} = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
-
-    if (error) {
-        setResponseStatus(event, 400);
-        if (error.code === UNIQUE_VIOLATION)
-            return {error: 'Playlist with this ID already exists'};
-        setResponseStatus(event, 500);
-        return {error: error.message};
-    }
-
-
-    setResponseStatus(event, 201);
-    return data;
-})
\ No newline at end of file
diff --git a/server/api/v1/playlist/playlist.http b/server/api/v1/playlist/playlist.http
deleted file mode 100644
index 629a587..0000000
--- a/server/api/v1/playlist/playlist.http
+++ /dev/null
@@ -1,36 +0,0 @@
-@baseUrl = http://localhost:3000/api/v1
-@authCookie =
-
-### Get all Playlists
-GET {{baseUrl}}/playlist
-Cookie: {{authCookie}}
-
-
-### Get specific Playlist
-@playlistId = 37i9dQZF1EIYE32WUF6sxN
-
-GET {{baseUrl}}/playlist/{{playlistId}}
-Cookie: {{authCookie}}
-
-
-### Add a Spotify Playlist to our system
-POST {{baseUrl}}/playlist
-
-{
-"id": "37i9dQZF1DX2CtuHQcongT",
-"name": "This is SEGA SOUND TEAM",
-"spotifyId": "37i9dQZF1DX2CtuHQcongT",
-"categories": ["sega"]
-}
-
-### Add a Disabled Spotify Playlist to our system
-POST {{baseUrl}}/playlist
-
-{
-"id": "37i9dQZF1DX2CtuHQcongT",
-"name": "This is SEGA SOUND TEAM",
-"spotifyId": "37i9dQZF1DX2CtuHQcongT",
-"categories": ["sega"]
-"enabled": false
-}
-

From bec55ff7d0f01f956c564a3b8a3664c484384ed3 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 08:57:45 +0100
Subject: [PATCH 049/221] fixef ESLint errors

---
 components/profile/Friendlist.vue         | 5 ++---
 components/profile/ProfileInformation.vue | 8 ++++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 177a354..dac4093 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import {
-    type FriendActionRequest,
-    FriendshipAction,
     FriendshipStatus,
     FriendshipType,
     type GetFriendsResponse
@@ -33,7 +31,8 @@ async function getFriendships() {
     <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
         <p class="my-1 ">Friends</p>
         <div class="flex space-x-3 overflow-x-auto">
-            <HomeUsersUserBox v-for="item in friends" :key="item.friend_id" :name="item.friend_id" :user-turn="false"
+            <HomeUsersUserBox 
+            v-for="item in friends" :key="item.friend_id" :name="item.friend_id" :user-turn="false"
                 class="shrink-0 w-[calc(33.33%-1rem)]" />
         </div>
 
diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index dee57b8..e07e6bd 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -4,13 +4,13 @@
 
 <template>
     <div class="flex flex-col">
-        <!-- First inner div -->
         <div class="flex flex-col items-center justify-center mb-3">
-            <img src="https://i.scdn.co/image/ab6775700000ee855d4c281804e8773208248312"
-                class="w-16 h-16 rounded-full" />
+            <img 
+            src="https://i.scdn.co/image/ab6775700000ee855d4c281804e8773208248312"
+                class="w-16 h-16 rounded-full" >
             <p>Nickname</p>
         </div>
-        <!-- Second inner div -->
+
         <div  class="grid grid-cols-2 gap-4">
             <div class="bg-gray-200 h-8 rounded-3xl px-3">Streak</div>
             <div class="bg-gray-200 h-8 rounded-3xl px-3">Games played</div>

From 2d8d28f47fe3a29fb5c42ecc397df0444bcf506e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 13:55:57 +0100
Subject: [PATCH 050/221] added functional profile view

---
 components/home/Users/UserBox.vue         |  2 +-
 components/profile/Friendlist.vue         |  4 +-
 components/profile/ProfileInformation.vue | 45 ++++++++++++++++++++---
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index c42b901..5a6ff43 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -2,7 +2,7 @@
     const props = defineProps({
     profilePicture: {
         type: String,
-        default: 'https://i.scdn.co/image/ab6775700000ee855d4c281804e8773208248312'
+        default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
     },
     name: {
         type: String,
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index dac4093..baa2742 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -32,10 +32,8 @@ async function getFriendships() {
         <p class="my-1 ">Friends</p>
         <div class="flex space-x-3 overflow-x-auto">
             <HomeUsersUserBox 
-            v-for="item in friends" :key="item.friend_id" :name="item.friend_id" :user-turn="false"
+            v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar" :name="item.friend_id" :user-turn="false"
                 class="shrink-0 w-[calc(33.33%-1rem)]" />
         </div>
-
-
     </div>
 </template>
diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index e07e6bd..5237013 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -1,17 +1,52 @@
 <script setup lang="ts">
 
+/*const props = defineProps({
+    profilePicture: {
+        type: String,
+        default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
+    },
+    username: {
+        type: String,
+        default: 'Username'
+    },
+});*/
+
+const username = ref('Username');
+const profilePicture = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
+
+
+const session = useSupabaseSession()
+
+onMounted(async () => {
+    if (session.value) {
+        await getProfileInformation(session.value.user.id)
+    }
+})
+
+// write type for user data
+async function getProfileInformation(userId: string) {
+    try {
+        const data = await $fetch('http://localhost:3000/api/v1/user/' + userId);
+        if (data.username) {
+            username.value = data.username;
+        }
+        if (data.avatar_url) {
+            profilePicture.value = data.avatar_url;
+        }
+    } catch (error) {
+        console.error('Error fetching profile information:', error);
+    }
+}
 </script>
 
 <template>
     <div class="flex flex-col">
         <div class="flex flex-col items-center justify-center mb-3">
-            <img 
-            src="https://i.scdn.co/image/ab6775700000ee855d4c281804e8773208248312"
-                class="w-16 h-16 rounded-full" >
-            <p>Nickname</p>
+            <NuxtImg :src="profilePicture" class="w-16 h-16 rounded-full" />
+            <p>{{ username }}</p>
         </div>
 
-        <div  class="grid grid-cols-2 gap-4">
+        <div class="grid grid-cols-2 gap-4">
             <div class="bg-gray-200 h-8 rounded-3xl px-3">Streak</div>
             <div class="bg-gray-200 h-8 rounded-3xl px-3">Games played</div>
             <div class="bg-gray-200 h-8 rounded-3xl px-3">Placeholder</div>

From 8398ef3b7c9f1bac6d531fc04bd70721b027b628 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 19:19:57 +0100
Subject: [PATCH 051/221] added working user information friend list does not
 work correct if it overflows

---
 DB/users.sql                              | 22 +++++++-
 components/home/Users/UserBox.vue         |  2 +-
 components/profile/Friendlist.vue         | 61 ++++++++++++++++++++++-
 components/profile/ProfileInformation.vue | 36 ++++---------
 server/api/v1/user/[uid].get.ts           | 53 ++++++++++++++++++--
 types/api/user.ts                         | 15 ++++++
 6 files changed, 156 insertions(+), 33 deletions(-)
 create mode 100644 types/api/user.ts

diff --git a/DB/users.sql b/DB/users.sql
index ef78b16..981dd87 100644
--- a/DB/users.sql
+++ b/DB/users.sql
@@ -12,4 +12,24 @@ ALTER TABLE users
     ADD CONSTRAINT unique_username UNIQUE (username),
     ADD CONSTRAINT valid_username check (username <> '' AND length(trim(username)) >= 4 AND username ~ '^[a-zA-Z0-9_]+$');
 
-CREATE INDEX idx_username ON users(username);
\ No newline at end of file
+CREATE INDEX idx_username ON users(username);
+
+CREATE OR REPLACE FUNCTION get_profile_information(userId UUID)
+    RETURNS RECORD
+AS
+$$
+DECLARE
+    result RECORD;
+BEGIN
+    SELECT u.id                 AS user_id,
+           u.avatar_url         AS user_avatar,
+           u.username           AS username,
+           u.spotify_id         AS user_spotify_id,
+           u.spotify_visibility AS spotify_visibility
+    INTO result
+    FROM users u
+    WHERE u.id = userId;
+
+    RETURN result;
+END;
+$$ LANGUAGE plpgsql;
\ No newline at end of file
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 5a6ff43..d49e502 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -6,7 +6,7 @@
     },
     name: {
         type: String,
-        default: 'Opponent'
+        default: 'User'
     },
     userTurn: {
         type: Boolean,
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index baa2742..e1dc425 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<!--script setup lang="ts">
 import {
     FriendshipStatus,
     FriendshipType,
@@ -36,4 +36,61 @@ async function getFriendships() {
                 class="shrink-0 w-[calc(33.33%-1rem)]" />
         </div>
     </div>
-</template>
+</template-->
+
+
+<script setup lang="ts">
+import {
+    FriendshipStatus,
+    FriendshipType,
+    type GetFriendsResponse
+} from "@/types/api/user.friends";
+import { freemem } from "os";
+import { ref } from 'vue';
+
+const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
+const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
+const newFriendId = ref('')
+const newFriendAvatar = ref('')
+
+const session = useSupabaseSession()
+
+onMounted(async () => {
+    if (session.value) {
+        await getFriendships()
+        friends.value.push(friends.value[0])
+    }
+})
+
+async function getFriendships() {
+    $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
+        .then((data) => {
+            requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
+            friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+        });
+}
+
+function addFriend() {
+    const newFriend = {
+        friend_id: "123123",
+    }
+    friends.value.push(newFriend)
+    newFriendId.value = ''
+    newFriendAvatar.value = ''
+}
+</script>
+
+<template>
+    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
+        <p class="my-1">Friends</p>
+        <div :class="['flex space-x-3', friends.length > 3 ? 'overflow-x-auto' : '']">
+            <HomeUsersUserBox 
+                v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar" :name="item.friend_username" :user-turn="false"
+                :class="friends.length > 3 ? 'shrink-0' : ''"
+                />
+        </div>
+        <div class="mt-3">
+            <button @click="addFriend" class="p-2 bg-blue-500 text-white rounded ml-2">Add Friend</button>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 5237013..5ff4b3d 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -1,41 +1,27 @@
 <script setup lang="ts">
-
-/*const props = defineProps({
-    profilePicture: {
-        type: String,
-        default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
-    },
-    username: {
-        type: String,
-        default: 'Username'
-    },
-});*/
+import type {
+    GetProfileResponse
+} from "@/types/api/user";
 
 const username = ref('Username');
 const profilePicture = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
 
-
 const session = useSupabaseSession()
 
 onMounted(async () => {
     if (session.value) {
-        await getProfileInformation(session.value.user.id)
+        await getProfileInformation()
     }
 })
 
-// write type for user data
-async function getProfileInformation(userId: string) {
-    try {
-        const data = await $fetch('http://localhost:3000/api/v1/user/' + userId);
-        if (data.username) {
-            username.value = data.username;
+async function getProfileInformation() {
+    $fetch<GetProfileResponse>('http://localhost:3000/api/v1/user/' + session.value?.user.id)
+      .then((data) => {
+        username.value = data.username
+        if (data.user_avatar) {
+            profilePicture.value = data.user_avatar;
         }
-        if (data.avatar_url) {
-            profilePicture.value = data.avatar_url;
-        }
-    } catch (error) {
-        console.error('Error fetching profile information:', error);
-    }
+      });
 }
 </script>
 
diff --git a/server/api/v1/user/[uid].get.ts b/server/api/v1/user/[uid].get.ts
index f42c743..236e9bb 100644
--- a/server/api/v1/user/[uid].get.ts
+++ b/server/api/v1/user/[uid].get.ts
@@ -1,5 +1,50 @@
-export default defineEventHandler((event) => {
-    const userId = getRouterParam(event, 'uid')
+import {
+  serverSupabaseServiceRole,
+  serverSupabaseUser,
+} from "#supabase/server";
 
-    return;
-})
\ No newline at end of file
+import type {
+  ProfileError,
+  GetProfileParam,
+  GetProfileResponse,
+} from "~/types/api/user";
+
+/**
+ * Endpoint to get a user by id
+ * @returns {Object} - User object
+ * @throws {400} - Invalid userId
+ * @throws {401} - Unauthenticated
+ * @throws {500} - Internal Server Error
+ */
+
+// check regex userId
+/*if (!userId || !isValidSpotifyID(userId!)) {
+        setResponseStatus(event, 400);
+        return {error: 'invalid userId'};
+    }*/
+export default defineEventHandler(async (event) => {
+  const user = await serverSupabaseUser(event);
+  if (!user?.id) {
+    setResponseStatus(event, 401);
+    return { error: "unauthenticated" };
+  }
+
+  const client = serverSupabaseServiceRole(event);
+  const param: GetProfileParam = { userid: user.id };
+
+  const {
+    data,
+    error,
+  }: {
+    data: GetProfileResponse | null;
+    error: ProfileError | null;
+  } = await client.rpc("get_profile_information", param as never);
+
+  if (error) {
+    setResponseStatus(event, 500);
+    return { error: error.message };
+  }
+
+  console.log(data)
+  return data;
+});
diff --git a/types/api/user.ts b/types/api/user.ts
new file mode 100644
index 0000000..d45dacd
--- /dev/null
+++ b/types/api/user.ts
@@ -0,0 +1,15 @@
+export interface ProfileError {
+    message: string
+}
+
+export interface GetProfileParam {
+    userid: string
+}
+
+export interface GetProfileResponse {
+    user_id: number,
+    user_avatar: string | null,
+    username: string,
+    user_spotify_id: string,
+    spotify_visibility: boolean,
+}
\ No newline at end of file

From e4eee092630213bf2a5d944c11a9a18f0e6de21b Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 19:26:56 +0100
Subject: [PATCH 052/221] fiexed url error

---
 components/home/Users/UserBox.vue | 3 ++-
 components/profile/Friendlist.vue | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index d49e502..ddbd106 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+
     const props = defineProps({
     profilePicture: {
         type: String,
@@ -17,7 +18,7 @@
 
 <template>
     <div :class="['bg-blue-600', props.userTurn ? 'flex items-center h-30 w-full rounded-3xl p-3' : 'flex flex-col items-center justify-center h-30 w-full rounded-3xl p-3']">
-        <img :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture" :alt="name">
+        <NuxtImg :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture.toString()" :alt="name"/>
         <p class="text-white">{{ props.name }}</p>
         <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
             <NuxtImg src="icons/playButton.svg" alt="Play" class="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16 hover:bg-black"/>
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index e1dc425..da414d5 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -72,7 +72,7 @@ async function getFriendships() {
 
 function addFriend() {
     const newFriend = {
-        friend_id: "123123",
+        friend_username: "sfsdf",
     }
     friends.value.push(newFriend)
     newFriendId.value = ''
@@ -85,12 +85,12 @@ function addFriend() {
         <p class="my-1">Friends</p>
         <div :class="['flex space-x-3', friends.length > 3 ? 'overflow-x-auto' : '']">
             <HomeUsersUserBox 
-                v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar" :name="item.friend_username" :user-turn="false"
+                v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar?.toString()" :name="item.friend_username" :user-turn="false"
                 :class="friends.length > 3 ? 'shrink-0' : ''"
                 />
         </div>
         <div class="mt-3">
-            <button @click="addFriend" class="p-2 bg-blue-500 text-white rounded ml-2">Add Friend</button>
+            <button  class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
         </div>
     </div>
 </template>
\ No newline at end of file

From 2ec89e35b9f50093007021e50d41dee77bb9e50a Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 19:29:40 +0100
Subject: [PATCH 053/221] removed import, which were added by accident

---
 components/profile/Friendlist.vue | 47 -------------------------------
 1 file changed, 47 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index da414d5..3e59cca 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,57 +1,12 @@
-<!--script setup lang="ts">
-import {
-    FriendshipStatus,
-    FriendshipType,
-    type GetFriendsResponse
-} from "@/types/api/user.friends";
-
-const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
-const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
-
-const session = useSupabaseSession()
-
-onMounted(async () => {
-    if (session.value) {
-        await getFriendships()
-        friends.value.push(friends.value[0])
-    }
-})
-
-async function getFriendships() {
-    $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
-        .then((data) => {
-            requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
-            friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
-        });
-}
-
-</script>
-
-<template>
-    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
-        <p class="my-1 ">Friends</p>
-        <div class="flex space-x-3 overflow-x-auto">
-            <HomeUsersUserBox 
-            v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar" :name="item.friend_id" :user-turn="false"
-                class="shrink-0 w-[calc(33.33%-1rem)]" />
-        </div>
-    </div>
-</template-->
-
-
 <script setup lang="ts">
 import {
     FriendshipStatus,
     FriendshipType,
     type GetFriendsResponse
 } from "@/types/api/user.friends";
-import { freemem } from "os";
-import { ref } from 'vue';
 
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
-const newFriendId = ref('')
-const newFriendAvatar = ref('')
 
 const session = useSupabaseSession()
 
@@ -75,8 +30,6 @@ function addFriend() {
         friend_username: "sfsdf",
     }
     friends.value.push(newFriend)
-    newFriendId.value = ''
-    newFriendAvatar.value = ''
 }
 </script>
 

From 95d73d535c6bf9f1a4d58ca5787d29104fe1bd5c Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 21:18:11 +0100
Subject: [PATCH 054/221] changed size of header/content/footer

---
 layouts/HeaderFooterView.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 11cadc7..2ebdc02 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -3,26 +3,26 @@
 </script>
 
 <template>
-  <div class="flex flex-col h-screen max-h-screen items-center">
-    <!-- Wrapper div für die Breiten-Kontrolle -->
+  <div class="flex flex-col h-screen items-center">
+    <!-- Wrapper div for width control -->
     <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
 
       <!-- Header -->
-      <div class="basis-24 border rounded-b-3xl">
+      <div class="h-1/6 border rounded-b-3xl">
         <div class="flex justify-around items-center h-full">
-          <slot name="header"/>
+          <slot name="header" />
         </div>
       </div>
 
       <!-- Content -->
-      <div class="flex-1 border rounded-3xl">
-          <slot name="content"/>
+      <div class="h-5/6 border rounded-3xl">
+        <slot name="content" />
       </div>
 
       <!-- Footer -->
-      <div class="basis-24 border rounded-t-3xl">
+      <div class="h-1/6 border rounded-t-3xl">
         <div class="flex justify-around items-center h-full">
-          <slot name="footer"/>
+          <slot name="footer" />
         </div>
       </div>
 
@@ -32,4 +32,4 @@
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>

From 53c05a14eb07b0b0c2141bab11ce19f93a942b93 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 21:23:59 +0100
Subject: [PATCH 055/221] removed hover effect from play button on user turn

---
 components/home/Users/UserBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index ddbd106..a687115 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -21,7 +21,7 @@
         <NuxtImg :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture.toString()" :alt="name"/>
         <p class="text-white">{{ props.name }}</p>
         <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
-            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16 hover:bg-black"/>
+            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16"/>
         </button>
     </div>
 </template>
\ No newline at end of file

From 4b0a1e7ec61dd631c15c66f5d6fa166e450b9f67 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 21:25:22 +0100
Subject: [PATCH 056/221] removed testfriend page

---
 pages/testfriends.vue | 116 ------------------------------------------
 1 file changed, 116 deletions(-)
 delete mode 100644 pages/testfriends.vue

diff --git a/pages/testfriends.vue b/pages/testfriends.vue
deleted file mode 100644
index aa615e0..0000000
--- a/pages/testfriends.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import {
-  type FriendActionRequest,
-  FriendshipAction,
-  FriendshipStatus,
-  FriendshipType,
-  type GetFriendsResponse
-} from "@/types/api/user.friends";
-
-const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", ()=> [])
-const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
-
-const session = useSupabaseSession()
-
-onMounted(async () => {
-  if (session.value) {
-    await getFriendships()
-  }
-})
-
-async function getFriendships() {
-  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
-      .then((data) => {
-        requests.value = data.filter((item) =>item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
-        friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
-      });
-}
-
-function handleFriendRequestAction(action: FriendshipAction, friendship_id: number) {
-  console.log(action, friendship_id)
-  if (action === FriendshipAction.ACCEPT) {
-    // optimistically update the UI instantly
-    friends.value = friends.value.concat(requests.value.filter((item) => item.friendship_id === friendship_id))
-    requests.value = requests.value.filter((item) => item.friendship_id !== friendship_id)
-    getFriendships() // lazily refresh the list
-  } else if (action === FriendshipAction.DECLINE) {
-    // optimistically update the UI instantly
-    requests.value = requests.value.filter((item) => item.friendship_id !== friendship_id)
-   getFriendships() // lazily refresh the list
-  } else if (action === FriendshipAction.REMOVE) {
-    // optimistically update the UI instantly
-    friends.value = friends.value.filter((item) => item.friendship_id !== friendship_id)
-    getFriendships() // lazily refresh the list
-  }
-}
-
-function accept(friendship_id: number) {
-
-  const actionRequest: FriendActionRequest = {
-    friendship_id: friendship_id,
-    action: FriendshipAction.ACCEPT
-  }
-
-  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends/action', {
-    method: 'POST',
-    body: JSON.stringify(actionRequest)
-  }).then(() => {
-    handleFriendRequestAction(FriendshipAction.ACCEPT, friendship_id)
-  })
-}
-
-function decline(friendship_id: number) {
-  const actionRequest: FriendActionRequest = {
-    friendship_id: friendship_id,
-    action: FriendshipAction.DECLINE
-  }
-
-  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends/action', {
-    method: 'POST',
-    body: JSON.stringify(actionRequest)
-  }).then(() => {
-    handleFriendRequestAction(FriendshipAction.DECLINE, friendship_id)
-  })
-}
-
-function remove(friendship_id: number) {
-  const actionRequest: FriendActionRequest = {
-    friendship_id: friendship_id,
-    action: FriendshipAction.REMOVE
-  }
-
-  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends/action', {
-    method: 'POST',
-    body: JSON.stringify(actionRequest)
-  }).then(() => {
-    handleFriendRequestAction(FriendshipAction.REMOVE, friendship_id)
-  })
-}
-
-</script>
-
-<template>
-  <div class="h-screen bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
-    <h1 class="py-4 mx-4 text-2xl">Friend Requests:</h1>
-    <div v-for="item in requests" :key="item.friend_id" class="grid grid-cols-3">
-      <div class="bg-white p-4 m-4 text-center rounded-lg">{{ item.friend_id }}</div>
-      <button class="bg-white text-black p-4 m-4 hover:bg-gray-200 rounded-lg" @click="accept(item.friendship_id)">
-        Accept
-      </button>
-      <button class="bg-white text-black p-4 m-4 hover:bg-gray-200 rounded-lg" @click="decline(item.friendship_id)">
-        Decline
-      </button>
-    </div>
-    <br>
-    <div class="flex flex-auto flex-row items-center">
-      <h1 class="py-4 mx-4 text-2xl">Friends:</h1>
-      <div v-for="item in friends" :key="item.friend_id"  class="bg-white p-4 m-4 text-center rounded-lg">
-        {{ item.friend_id }}
-        <button class="pl-4 hover:text-red-500" @click="remove(item.friendship_id)">
-          Remove
-        </button>
-      </div>
-    </div>
-    <br><br>
-  </div>
-</template>
\ No newline at end of file

From f00170e9f30d30b6b80fed2648f779512baa5922 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 22:21:08 +0100
Subject: [PATCH 057/221] made opponents turn and users turn into one component

---
 components/MultipleUsersView.vue   | 48 ++++++++++++++++++++++++++++++
 components/home/Turns/Opponent.vue | 14 ---------
 components/home/Turns/User.vue     | 14 ---------
 3 files changed, 48 insertions(+), 28 deletions(-)
 create mode 100644 components/MultipleUsersView.vue
 delete mode 100644 components/home/Turns/Opponent.vue
 delete mode 100644 components/home/Turns/User.vue

diff --git a/components/MultipleUsersView.vue b/components/MultipleUsersView.vue
new file mode 100644
index 0000000..fc78557
--- /dev/null
+++ b/components/MultipleUsersView.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { UserViewType } from "@/types/components/users.view";
+
+// Props
+const props = defineProps({
+    viewType: {
+        type: Number, // Matches UserViewType enum
+        required: true,
+    },
+});
+
+// Computed Classes
+const containerClasses = computed(() => {
+    const baseClasses = 'w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3';
+    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto`;
+    if (props.viewType === UserViewType.OPPONENTTURN) return `${baseClasses}`;
+    return '';
+});
+
+const userBoxContainerClasses = computed(() =>
+    props.viewType === UserViewType.USERTURN
+        ? 'flex flex-col space-y-3'
+        : 'flex space-x-3'
+);
+
+// Example Users
+const users = [
+    { name: 'test1' },
+    { name: 'test2' },
+    { name: 'test3' },
+    { name: 'test3' },
+];
+</script>
+
+<template>
+    <div :class="containerClasses">
+        <!-- Conditional Header -->
+        <p v-if="viewType === UserViewType.USERTURN" class="my-1">Your Turn</p>
+        <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="my-1">Opponent's Turn</p>
+        <p v-else-if="viewType === UserViewType.FRIENDS" class="my-1">Friends</p>
+
+        <!-- User Boxes -->
+        <div :class="userBoxContainerClasses">
+            <HomeUsersUserBox v-for="user in users" :key="user.name" :name="user.name"
+                :user-turn="viewType === UserViewType.USERTURN" />
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/home/Turns/Opponent.vue b/components/home/Turns/Opponent.vue
deleted file mode 100644
index c8b5acb..0000000
--- a/components/home/Turns/Opponent.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
-        <p class="my-1 ">Opponentes Turn</p>
-        <div class="flex space-x-3">
-            <HomeUsersUserBox name="test1" :user-turn="false"/>
-            <HomeUsersUserBox name="test2" :user-turn="false"/>
-            <HomeUsersUserBox name="test3" :user-turn="false"/>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/components/home/Turns/User.vue b/components/home/Turns/User.vue
deleted file mode 100644
index 824cbb5..0000000
--- a/components/home/Turns/User.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3 h-full">
-        <p class="my-1">Your Turn</p>
-        <div class="flex-col space-y-3">
-            <HomeUsersUserBox name="test1" :user-turn="true"/>
-            <HomeUsersUserBox name="test2" :user-turn="true"/>
-            <HomeUsersUserBox name="test3" :user-turn="true"/>
-        </div>
-    </div>
-</template>

From c35ffdf4ad6905d548762320dfb584c6d49b6270 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 22:21:25 +0100
Subject: [PATCH 058/221] made game buttons responsive

---
 components/home/Controls/GameButtons.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/home/Controls/GameButtons.vue b/components/home/Controls/GameButtons.vue
index 36344c6..7bb8d9d 100644
--- a/components/home/Controls/GameButtons.vue
+++ b/components/home/Controls/GameButtons.vue
@@ -4,10 +4,10 @@
 
 <template>
     <div class="flex space-x-3 w-full">
-        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
+        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full">
             Start Game
         </button>
-        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
+        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full">
             Start Round
         </button>
     </div>

From c62b699c29d06bc9450999515f0c39500572daff Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 22:21:41 +0100
Subject: [PATCH 059/221] added types for userview

---
 types/components/users.view.ts | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 types/components/users.view.ts

diff --git a/types/components/users.view.ts b/types/components/users.view.ts
new file mode 100644
index 0000000..525dc9b
--- /dev/null
+++ b/types/components/users.view.ts
@@ -0,0 +1,5 @@
+export enum UserViewType {
+    FRIENDS = 0,
+    OPPONENTTURN = 1,
+    USERTURN = 2 
+}
\ No newline at end of file

From 09fbb03505f3839eb4569673e7251ebec27a84f3 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 22:21:59 +0100
Subject: [PATCH 060/221] made home view more responsive

---
 components/home/Users/UserBox.vue | 45 ++++++++++++++++++++++++++-----
 pages/index.vue                   |  9 ++++---
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index a687115..638f738 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -17,11 +17,42 @@
 </script>
 
 <template>
-    <div :class="['bg-blue-600', props.userTurn ? 'flex items-center h-30 w-full rounded-3xl p-3' : 'flex flex-col items-center justify-center h-30 w-full rounded-3xl p-3']">
-        <NuxtImg :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture.toString()" :alt="name"/>
-        <p class="text-white">{{ props.name }}</p>
-        <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
-            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16"/>
-        </button>
+    <div
+      :class="[
+        'bg-blue-600 rounded-3xl p-3 w-full', 
+        props.userTurn
+          ? 'flex items-center'
+          : 'flex flex-col items-center justify-center h-full'
+      ]"
+    >
+      <!-- Profile Picture -->
+      <NuxtImg
+        :class="[
+          'rounded-full', 
+          'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16',
+          props.userTurn ? 'mr-3' : 'mb-2'
+        ]"
+        :src="props.profilePicture.toString()"
+        :alt="name"
+      />
+      
+      <!-- User Name -->
+      <p class="text-white text-sm sm:text-base md:text-lg lg:text-xl">
+        {{ props.name }}
+      </p>
+      
+      <!-- Play Button -->
+      <button
+        v-if="props.userTurn"
+        class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5"
+        @click="console.log(props.name)"
+      >
+        <NuxtImg
+          src="icons/playButton.svg"
+          alt="Play"
+          class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14"
+        />
+      </button>
     </div>
-</template>
\ No newline at end of file
+  </template>
+  
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 0f8d7a4..e330d39 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
+import { UserViewType } from "@/types/components/users.view"
 
 </script>
 
@@ -19,9 +20,11 @@ import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <HomeTurnsUser/>
-          <HomeTurnsOpponent/>
-          <HomeControlsGameButtons/>
+          <MultipleUsersView :view-type="UserViewType.USERTURN" class="h-3/6"/>
+          <MultipleUsersView :view-type="UserViewType.OPPONENTTURN"class="h-2/6"/>
+          <!--HomeTurnsUser/>
+          <HomeTurnsOpponent/-->
+          <HomeControlsGameButtons class="h-1/6"/>
         </div>
       </template>
       <template #footer>

From 0c2c624445286796707056b190fe162c60218f6b Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 22:21:59 +0100
Subject: [PATCH 061/221] Fixed ESLint error

---
 components/MultipleUsersView.vue  |  3 ++-
 components/home/Users/UserBox.vue | 45 ++++++++++++++++++++++++++-----
 pages/index.vue                   |  9 ++++---
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/components/MultipleUsersView.vue b/components/MultipleUsersView.vue
index fc78557..fddc6c8 100644
--- a/components/MultipleUsersView.vue
+++ b/components/MultipleUsersView.vue
@@ -41,7 +41,8 @@ const users = [
 
         <!-- User Boxes -->
         <div :class="userBoxContainerClasses">
-            <HomeUsersUserBox v-for="user in users" :key="user.name" :name="user.name"
+            <HomeUsersUserBox 
+            v-for="user in users" :key="user.name" :name="user.name"
                 :user-turn="viewType === UserViewType.USERTURN" />
         </div>
     </div>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index a687115..638f738 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -17,11 +17,42 @@
 </script>
 
 <template>
-    <div :class="['bg-blue-600', props.userTurn ? 'flex items-center h-30 w-full rounded-3xl p-3' : 'flex flex-col items-center justify-center h-30 w-full rounded-3xl p-3']">
-        <NuxtImg :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture.toString()" :alt="name"/>
-        <p class="text-white">{{ props.name }}</p>
-        <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
-            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16"/>
-        </button>
+    <div
+      :class="[
+        'bg-blue-600 rounded-3xl p-3 w-full', 
+        props.userTurn
+          ? 'flex items-center'
+          : 'flex flex-col items-center justify-center h-full'
+      ]"
+    >
+      <!-- Profile Picture -->
+      <NuxtImg
+        :class="[
+          'rounded-full', 
+          'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16',
+          props.userTurn ? 'mr-3' : 'mb-2'
+        ]"
+        :src="props.profilePicture.toString()"
+        :alt="name"
+      />
+      
+      <!-- User Name -->
+      <p class="text-white text-sm sm:text-base md:text-lg lg:text-xl">
+        {{ props.name }}
+      </p>
+      
+      <!-- Play Button -->
+      <button
+        v-if="props.userTurn"
+        class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5"
+        @click="console.log(props.name)"
+      >
+        <NuxtImg
+          src="icons/playButton.svg"
+          alt="Play"
+          class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14"
+        />
+      </button>
     </div>
-</template>
\ No newline at end of file
+  </template>
+  
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 0f8d7a4..04afcc2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
+import { UserViewType } from "@/types/components/users.view"
 
 </script>
 
@@ -19,9 +20,11 @@ import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <HomeTurnsUser/>
-          <HomeTurnsOpponent/>
-          <HomeControlsGameButtons/>
+          <MultipleUsersView :view-type="UserViewType.USERTURN" class="h-3/6"/>
+          <MultipleUsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"/>
+          <!--HomeTurnsUser/>
+          <HomeTurnsOpponent/-->
+          <HomeControlsGameButtons class="h-1/6"/>
         </div>
       </template>
       <template #footer>

From e7397605c8a06d0f0127222a186e2f53b0b7a3ef Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 6 Dec 2024 07:32:50 +0100
Subject: [PATCH 062/221] fix(friends): corrected friend list scrolling
 behavior

---
 components/profile/Friendlist.vue | 65 +++++++++++++++++--------------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 3e59cca..c958df3 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
-    FriendshipStatus,
-    FriendshipType,
-    type GetFriendsResponse
-} from "@/types/api/user.friends";
+import {FriendshipStatus, FriendshipType, type GetFriendsResponse} from "@/types/api/user.friends";
 
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
@@ -11,39 +7,50 @@ const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () =
 const session = useSupabaseSession()
 
 onMounted(async () => {
-    if (session.value) {
-        await getFriendships()
-        friends.value.push(friends.value[0])
-    }
+  if (session.value) {
+    await getFriendships()
+    friends.value.push(friends.value[0])
+  }
 })
 
 async function getFriendships() {
-    $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
-        .then((data) => {
-            requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
-            friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
-        });
+  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
+      .then((data) => {
+        requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
+        friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+      });
 }
 
 function addFriend() {
-    const newFriend = {
-        friend_username: "sfsdf",
-    }
-    friends.value.push(newFriend)
+  const newFriend = {
+    friend_username: "sfsdf",
+  }
+  friends.value.push(newFriend)
 }
 </script>
 
 <template>
-    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
-        <p class="my-1">Friends</p>
-        <div :class="['flex space-x-3', friends.length > 3 ? 'overflow-x-auto' : '']">
-            <HomeUsersUserBox 
-                v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar?.toString()" :name="item.friend_username" :user-turn="false"
-                :class="friends.length > 3 ? 'shrink-0' : ''"
-                />
-        </div>
-        <div class="mt-3">
-            <button  class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
-        </div>
+  <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
+    <p class="my-1">Friends</p>
+    <div class="relative">
+      <div
+          :class="['flex gap-3', friends.length > 3 ? 'overflow-x-auto pb-2' : '']">
+        <HomeUsersUserBox
+            v-for="item in friends"
+            :key="item.friend_id"
+            :profile-picture="item.friend_avatar?.toString()"
+            :name="item.friend_username"
+            :user-turn="false"
+            :class="[
+                        friends.length > 3 ? 'w-[calc(33.33%-0.67rem)] flex-shrink-0' :
+                        friends.length === 3 ? 'w-1/3' :
+                        friends.length === 2 ? 'w-1/2' : 'w-full'
+                    ]"
+        />
+      </div>
     </div>
+    <div class="mt-3">
+      <button class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
+    </div>
+  </div>
 </template>
\ No newline at end of file

From a1fc5f20e42113e4b5274b6833aac1dfe38412cb Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 6 Dec 2024 08:17:37 +0100
Subject: [PATCH 063/221] update footer

---
 components/profile/Friendlist.vue |  2 +-
 nuxt.config.ts                    |  2 +-
 package.json                      |  2 ++
 pages/index.vue                   | 13 +++++++++----
 pages/profile.vue                 | 32 ++++++++++++++++++-------------
 5 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index c958df3..0fa5e1f 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -9,7 +9,7 @@ const session = useSupabaseSession()
 onMounted(async () => {
   if (session.value) {
     await getFriendships()
-    friends.value.push(friends.value[0])
+    //friends.value.push(friends.value[0]) unexpected behavior on initial page load
   }
 })
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9a5de5a..50c0cb9 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
     compatibilityDate: '2024-04-03',
     devtools: {enabled: true},
-    modules: ['@nuxtjs/tailwindcss', '@nuxt/eslint', '@nuxtjs/supabase', '@nuxt/image'],
+    modules: ['@nuxtjs/tailwindcss', '@nuxt/eslint', '@nuxtjs/supabase', '@nuxt/image', '@nuxt/icon'],
     supabase: {
         redirectOptions: {
             login: '/login',
diff --git a/package.json b/package.json
index ffd3bf5..d71c4d5 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@hebilicious/authjs-nuxt": "^0.3.5",
+    "@nuxt/icon": "^1.9.0",
     "@nuxt/image": "^1.8.1",
     "@nuxtjs/supabase": "v1.2.2",
     "@nuxtjs/tailwindcss": "^6.12.1",
@@ -22,6 +23,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@iconify-json/mdi": "^1.2.1",
     "@nuxt/eslint": "^0.5.7",
     "@types/node": "^22.8.5",
     "eslint": "^9.11.1",
diff --git a/pages/index.vue b/pages/index.vue
index 0f8d7a4..fae7360 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
-
 </script>
 
 <template>
@@ -25,9 +24,15 @@ import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
         </div>
       </template>
       <template #footer>
-        <div class="text-4xl">A</div>
-        <div class="text-4xl">B</div>
-        <div class="text-4xl">C</div>
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl py-5">
+          <Icon name="mdi:album" class="text-white"/>
+        </NuxtLink>
+        <NuxtLink to="/" class="inline-flex items-center bg-blue-500 text-6xl rounded-full p-1.5">
+          <Icon name="mdi:home" class="text-white"/>
+        </NuxtLink>
+        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl py-5">
+          <Icon name="mdi:account-details" class="text-white"/>
+        </NuxtLink>
       </template>
     </HeaderFooterView>
   </div>
diff --git a/pages/profile.vue b/pages/profile.vue
index 48e8a39..492e694 100644
--- a/pages/profile.vue
+++ b/pages/profile.vue
@@ -1,19 +1,25 @@
 <script setup lang="ts">
-    import HeaderFooterView from "~/layouts/FooterView.vue";
+import HeaderFooterView from "~/layouts/FooterView.vue";
 </script>
 
 <template>
-    <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
-        <HeaderFooterView>
-            <template #content>
-                <ProfileOverview/>
-            </template>
+  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+    <HeaderFooterView>
+      <template #content>
+        <ProfileOverview/>
+      </template>
 
-            <template #footer>
-                <div class="text-4xl">A</div>
-                <div class="text-4xl">B</div>
-                <div class="text-4xl">C</div>
-            </template>
-        </HeaderFooterView>
-    </div>
+      <template #footer>
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl py-5">
+          <Icon name="mdi:album" class="text-white"/>
+        </NuxtLink>
+        <NuxtLink to="/" class="inline-flex items-center bg-blue-500 text-6xl rounded-full p-1.5">
+          <Icon name="mdi:home" class="text-white"/>
+        </NuxtLink>
+        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl py-5">
+          <Icon name="mdi:account-details" class="text-white"/>
+        </NuxtLink>
+      </template>
+    </HeaderFooterView>
+  </div>
 </template>
\ No newline at end of file

From ec95723f7abab7a5a1d77156a9e595157cbbd801 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 6 Dec 2024 08:18:05 +0100
Subject: [PATCH 064/221] update footer

---
 package-lock.json | 841 ++++++++++++++++++++++++++++++----------------
 1 file changed, 542 insertions(+), 299 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index decf1e8..4a8d988 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@hebilicious/authjs-nuxt": "^0.3.5",
+        "@nuxt/icon": "^1.9.0",
         "@nuxt/image": "^1.8.1",
         "@nuxtjs/supabase": "v1.2.2",
         "@nuxtjs/tailwindcss": "^6.12.1",
@@ -17,6 +18,7 @@
         "zod": "^3.23.8"
       },
       "devDependencies": {
+        "@iconify-json/mdi": "^1.2.1",
         "@nuxt/eslint": "^0.5.7",
         "@types/node": "^22.8.5",
         "eslint": "^9.11.1",
@@ -48,6 +50,19 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.4.1.tgz",
+      "integrity": "sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==",
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^0.2.0",
+        "tinyexec": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@antfu/utils": {
       "version": "0.7.10",
       "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.10.tgz",
@@ -98,12 +113,13 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
-      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.24.7",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
         "picocolors": "^1.0.0"
       },
       "engines": {
@@ -111,30 +127,30 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
-      "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.3.tgz",
+      "integrity": "sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
-      "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
+      "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.0",
-        "@babel/helper-compilation-targets": "^7.25.2",
-        "@babel/helper-module-transforms": "^7.25.2",
-        "@babel/helpers": "^7.25.0",
-        "@babel/parser": "^7.25.0",
-        "@babel/template": "^7.25.0",
-        "@babel/traverse": "^7.25.2",
-        "@babel/types": "^7.25.2",
+        "@babel/code-frame": "^7.26.0",
+        "@babel/generator": "^7.26.0",
+        "@babel/helper-compilation-targets": "^7.25.9",
+        "@babel/helper-module-transforms": "^7.26.0",
+        "@babel/helpers": "^7.26.0",
+        "@babel/parser": "^7.26.0",
+        "@babel/template": "^7.25.9",
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.26.0",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -159,15 +175,16 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.6.tgz",
-      "integrity": "sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz",
+      "integrity": "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.6",
+        "@babel/parser": "^7.26.3",
+        "@babel/types": "^7.26.3",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
-        "jsesc": "^2.5.1"
+        "jsesc": "^3.0.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -186,14 +203,14 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
-      "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz",
+      "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.25.2",
-        "@babel/helper-validator-option": "^7.24.8",
-        "browserslist": "^4.23.1",
+        "@babel/compat-data": "^7.25.9",
+        "@babel/helper-validator-option": "^7.25.9",
+        "browserslist": "^4.24.0",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
       },
@@ -254,28 +271,27 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
-      "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz",
-      "integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
+      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.24.7",
-        "@babel/helper-simple-access": "^7.24.7",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "@babel/traverse": "^7.25.2"
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/traverse": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -322,19 +338,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-simple-access": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
-      "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz",
@@ -349,67 +352,52 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
-      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
-      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
-      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
+      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.6.tgz",
-      "integrity": "sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz",
+      "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/highlight": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
-      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
-      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
+      "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.6"
+        "@babel/types": "^7.26.3"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -527,39 +515,39 @@
       }
     },
     "node_modules/@babel/standalone": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.25.6.tgz",
-      "integrity": "sha512-Kf2ZcZVqsKbtYhlA7sP0z5A3q5hmCVYMKMWRWNK/5OVwHIve3JY1djVRmIVAx8FMueLIfZGKQDIILK2w8zO4mg==",
+      "version": "7.26.4",
+      "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.26.4.tgz",
+      "integrity": "sha512-SF+g7S2mhTT1b7CHyfNjDkPU1corxg4LPYsyP0x5KuCl+EbtBQHRLqr9N3q7e7+x7NQ5LYxQf8mJ2PmzebLr0A==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
-      "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/parser": "^7.25.0",
-        "@babel/types": "^7.25.0"
+        "@babel/code-frame": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/types": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.6.tgz",
-      "integrity": "sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==",
+      "version": "7.26.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz",
+      "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.6",
-        "@babel/parser": "^7.25.6",
-        "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.6",
+        "@babel/code-frame": "^7.26.2",
+        "@babel/generator": "^7.26.3",
+        "@babel/parser": "^7.26.3",
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.3",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -568,14 +556,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
-      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
+      "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.24.8",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1947,6 +1934,61 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify-json/mdi": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.1.tgz",
+      "integrity": "sha512-dSkQU78gsZV6Yxnq78+LuX7jzeFC/5NAmz7O3rh558GimGFcwMVY/OtqRowIzjqJBmMmWZft7wkFV4TrwRXjlg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/collections": {
+      "version": "1.0.490",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.490.tgz",
+      "integrity": "sha512-Ovq4xC2gXl2o3P8me4VNuG9ow+tU1d6u+7YHR6rU9+xTrpXKvew76gyls+SqsOgGcQZYl/NuzraKBW1ON3/7jA==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "2.1.33",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.1.33.tgz",
+      "integrity": "sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^0.4.0",
+        "@antfu/utils": "^0.7.10",
+        "@iconify/types": "^2.0.0",
+        "debug": "^4.3.6",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^0.5.0",
+        "mlly": "^1.7.1"
+      }
+    },
+    "node_modules/@iconify/vue": {
+      "version": "4.2.0-dev.2",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.2.0-dev.2.tgz",
+      "integrity": "sha512-fHsLaBaegrXyshUR2j9sV4TXkTgRQ9FhQ9PIqWgW/dFTPcMe2uEtUr1H9XQaDTpN8F9chnVqhLH8FT9asTDaSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -2505,6 +2547,209 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@nuxt/icon": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-1.9.0.tgz",
+      "integrity": "sha512-UDPrYwDVq7FvU9ENG8dDsI3RmqMmncmKyFQMD3BPJvh4DFGgmBVRCno8dtAyXYms6Vymz4kXQY7edpM93LZiMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/collections": "^1.0.484",
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^2.1.33",
+        "@iconify/vue": "^4.2.0-dev.2",
+        "@nuxt/devtools-kit": "^1.6.0",
+        "@nuxt/kit": "^3.14.159",
+        "consola": "^3.2.3",
+        "local-pkg": "^0.5.1",
+        "mlly": "^1.7.3",
+        "ohash": "^1.1.4",
+        "pathe": "^1.1.2",
+        "std-env": "^3.8.0",
+        "tinyglobby": "^0.2.10"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/@nuxt/devtools-kit": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-1.6.3.tgz",
+      "integrity": "sha512-rcWpsGUnaDyGtmA667A4FDrVWdjuAturHV+Lkt3Xmedu5G4wC4sOzoA0+/Yco3/kWZ6fLVUTKwI2mvfzaQIugA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.14.1592",
+        "@nuxt/schema": "^3.14.1592",
+        "execa": "^7.2.0"
+      },
+      "peerDependencies": {
+        "vite": "*"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/@nuxt/kit": {
+      "version": "3.14.1592",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.14.1592.tgz",
+      "integrity": "sha512-r9r8bISBBisvfcNgNL3dSIQHSBe0v5YkX5zwNblIC2T0CIEgxEVoM5rq9O5wqgb5OEydsHTtT2hL57vdv6VT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/schema": "3.14.1592",
+        "c12": "^2.0.1",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "destr": "^2.0.3",
+        "globby": "^14.0.2",
+        "hash-sum": "^2.0.0",
+        "ignore": "^6.0.2",
+        "jiti": "^2.4.0",
+        "klona": "^2.0.6",
+        "knitwork": "^1.1.0",
+        "mlly": "^1.7.3",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.1",
+        "scule": "^1.3.0",
+        "semver": "^7.6.3",
+        "ufo": "^1.5.4",
+        "unctx": "^2.3.1",
+        "unimport": "^3.13.2",
+        "untyped": "^1.5.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/@nuxt/schema": {
+      "version": "3.14.1592",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.14.1592.tgz",
+      "integrity": "sha512-A1d/08ueX8stTXNkvGqnr1eEXZgvKn+vj6s7jXhZNWApUSqMgItU4VK28vrrdpKbjIPwq2SwhnGOHUYvN9HwCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^2.0.1",
+        "compatx": "^0.1.8",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "hookable": "^5.5.3",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.1",
+        "scule": "^1.3.0",
+        "std-env": "^3.8.0",
+        "ufo": "^1.5.4",
+        "uncrypto": "^0.1.3",
+        "unimport": "^3.13.2",
+        "untyped": "^1.5.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/c12": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-2.0.1.tgz",
+      "integrity": "sha512-Z4JgsKXHG37C6PYUtIxCfLJZvo6FyhHJoClwwb9ftUkLpPSkuYqn6Tr+vnaN8hymm0kIbcg6Ey3kv/Q71k5w/A==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.1",
+        "confbox": "^0.1.7",
+        "defu": "^6.1.4",
+        "dotenv": "^16.4.5",
+        "giget": "^1.2.3",
+        "jiti": "^2.3.0",
+        "mlly": "^1.7.1",
+        "ohash": "^1.1.4",
+        "pathe": "^1.1.2",
+        "perfect-debounce": "^1.0.0",
+        "pkg-types": "^1.2.0",
+        "rc9": "^2.1.2"
+      },
+      "peerDependencies": {
+        "magicast": "^0.3.5"
+      },
+      "peerDependenciesMeta": {
+        "magicast": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/chokidar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/fdir": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
+      "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/ignore": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-6.0.2.tgz",
+      "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/jiti": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.1.tgz",
+      "integrity": "sha512-yPBThwecp1wS9DmoA4x4KR2h3QoslacnDR8ypuFM962kI4/456Iy1oHx2RAgh4jfZNdn0bctsdadceiBUgpU1g==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/readdirp": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/tinyglobby": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",
+      "integrity": "sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/@nuxt/image": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@nuxt/image/-/image-1.8.1.tgz",
@@ -3202,14 +3447,14 @@
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz",
-      "integrity": "sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
+      "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.0",
         "estree-walker": "^2.0.2",
-        "picomatch": "^2.3.1"
+        "picomatch": "^4.0.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -3229,6 +3474,18 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.22.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
@@ -4553,18 +4810,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -5005,9 +5250,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
-      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
+      "version": "4.24.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
+      "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
       "funding": [
         {
           "type": "opencollective",
@@ -5024,10 +5269,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001646",
-        "electron-to-chromium": "^1.5.4",
+        "caniuse-lite": "^1.0.30001669",
+        "electron-to-chromium": "^1.5.41",
         "node-releases": "^2.0.18",
-        "update-browserslist-db": "^1.1.0"
+        "update-browserslist-db": "^1.1.1"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -5201,9 +5446,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001663",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz",
-      "integrity": "sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==",
+      "version": "1.0.30001686",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
+      "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
       "funding": [
         {
           "type": "opencollective",
@@ -5231,29 +5476,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/chalk/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/character-entities-html4": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
@@ -5484,20 +5706,12 @@
         "node": ">=12.5.0"
       }
     },
-    "node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/color-string": {
       "version": "1.9.1",
@@ -5622,9 +5836,9 @@
       "license": "MIT"
     },
     "node_modules/confbox": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.7.tgz",
-      "integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==",
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
       "license": "MIT"
     },
     "node_modules/consola": {
@@ -6354,9 +6568,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.28",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.28.tgz",
-      "integrity": "sha512-VufdJl+rzaKZoYVUijN13QcXVF5dWPZANeFTLNy+OSpHdDL5ynXTF35+60RSBbaQYB1ae723lQXHCrf4pyLsMw==",
+      "version": "1.5.71",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz",
+      "integrity": "sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -6771,19 +6985,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-plugin-unicorn/node_modules/jsesc": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
-      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/eslint-plugin-vue": {
       "version": "9.28.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.28.0.tgz",
@@ -7682,15 +7883,6 @@
         "unenv": "^1.9.0"
       }
     },
-    "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -8424,15 +8616,15 @@
       }
     },
     "node_modules/jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=6"
       }
     },
     "node_modules/json-buffer": {
@@ -8851,13 +9043,13 @@
       }
     },
     "node_modules/local-pkg": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
-      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.1.tgz",
+      "integrity": "sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==",
       "license": "MIT",
       "dependencies": {
-        "mlly": "^1.4.2",
-        "pkg-types": "^1.0.3"
+        "mlly": "^1.7.3",
+        "pkg-types": "^1.2.1"
       },
       "engines": {
         "node": ">=14"
@@ -8936,9 +9128,9 @@
       "license": "MIT"
     },
     "node_modules/magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "version": "0.30.14",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz",
+      "integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
@@ -9342,15 +9534,27 @@
       "optional": true
     },
     "node_modules/mlly": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.1.tgz",
-      "integrity": "sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.3.tgz",
+      "integrity": "sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==",
       "license": "MIT",
       "dependencies": {
-        "acorn": "^8.11.3",
+        "acorn": "^8.14.0",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.1.1",
-        "ufo": "^1.5.3"
+        "pkg-types": "^1.2.1",
+        "ufo": "^1.5.4"
+      }
+    },
+    "node_modules/mlly/node_modules/acorn": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
       }
     },
     "node_modules/mri": {
@@ -10764,13 +10968,13 @@
       }
     },
     "node_modules/pkg-types": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.2.0.tgz",
-      "integrity": "sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.2.1.tgz",
+      "integrity": "sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==",
       "license": "MIT",
       "dependencies": {
-        "confbox": "^0.1.7",
-        "mlly": "^1.7.1",
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.2",
         "pathe": "^1.1.2"
       }
     },
@@ -12869,9 +13073,9 @@
       }
     },
     "node_modules/std-env": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
-      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.8.0.tgz",
+      "integrity": "sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==",
       "license": "MIT"
     },
     "node_modules/streamx": {
@@ -13005,21 +13209,21 @@
       }
     },
     "node_modules/strip-literal": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.0.tgz",
-      "integrity": "sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.1.tgz",
+      "integrity": "sha512-631UJ6O00eNGfMiWG78ck80dfBab8X6IVFB51jZK5Icd7XAs60Z5y7QdSd/wGIklnWvRbUNloVzhOKKmutxQ6Q==",
       "license": "MIT",
       "dependencies": {
-        "js-tokens": "^9.0.0"
+        "js-tokens": "^9.0.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/strip-literal/node_modules/js-tokens": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz",
-      "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
       "license": "MIT"
     },
     "node_modules/stylehacks": {
@@ -13125,18 +13329,6 @@
         "node": ">=16"
       }
     },
-    "node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -13484,6 +13676,12 @@
       "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
       "license": "MIT"
     },
+    "node_modules/tinyexec": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
+      "integrity": "sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.6.tgz",
@@ -13523,15 +13721,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -13827,24 +14016,76 @@
       }
     },
     "node_modules/unimport": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.12.0.tgz",
-      "integrity": "sha512-5y8dSvNvyevsnw4TBQkIQR1Rjdbb+XjVSwQwxltpnVZrStBvvPkMPcZrh1kg5kY77kpx6+D4Ztd3W6FOBH/y2Q==",
+      "version": "3.14.4",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.14.4.tgz",
+      "integrity": "sha512-90jQsiS2D0vIrWg4U58do7B5Hr4q0qt9o/rS0TrDMzrvNuAQ7XF1sQ47Pe2zjVlvFWNkoPBb/2l2GJFy5XjqDg==",
       "license": "MIT",
       "dependencies": {
-        "@rollup/pluginutils": "^5.1.0",
-        "acorn": "^8.12.1",
+        "@rollup/pluginutils": "^5.1.3",
+        "acorn": "^8.14.0",
         "escape-string-regexp": "^5.0.0",
         "estree-walker": "^3.0.3",
-        "fast-glob": "^3.3.2",
-        "local-pkg": "^0.5.0",
-        "magic-string": "^0.30.11",
-        "mlly": "^1.7.1",
+        "local-pkg": "^0.5.1",
+        "magic-string": "^0.30.14",
+        "mlly": "^1.7.3",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.2.0",
+        "picomatch": "^4.0.2",
+        "pkg-types": "^1.2.1",
         "scule": "^1.3.0",
-        "strip-literal": "^2.1.0",
-        "unplugin": "^1.14.1"
+        "strip-literal": "^2.1.1",
+        "tinyglobby": "^0.2.10",
+        "unplugin": "^1.16.0"
+      }
+    },
+    "node_modules/unimport/node_modules/acorn": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/unimport/node_modules/fdir": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
+      "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unimport/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/unimport/node_modules/tinyglobby": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",
+      "integrity": "sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
     "node_modules/unist-util-is": {
@@ -13930,24 +14171,16 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.14.1.tgz",
-      "integrity": "sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.0.tgz",
+      "integrity": "sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==",
       "license": "MIT",
       "dependencies": {
-        "acorn": "^8.12.1",
+        "acorn": "^8.14.0",
         "webpack-virtual-modules": "^0.6.2"
       },
       "engines": {
         "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "webpack-sources": "^3"
-      },
-      "peerDependenciesMeta": {
-        "webpack-sources": {
-          "optional": true
-        }
       }
     },
     "node_modules/unplugin-vue-router": {
@@ -13980,6 +14213,18 @@
         }
       }
     },
+    "node_modules/unplugin/node_modules/acorn": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/unstorage": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.12.0.tgz",
@@ -14075,23 +14320,32 @@
       }
     },
     "node_modules/untyped": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/untyped/-/untyped-1.4.2.tgz",
-      "integrity": "sha512-nC5q0DnPEPVURPhfPQLahhSTnemVtPzdx7ofiRxXpOB2SYnb3MfdU3DVGyJdS8Lx+tBWeAePO8BfU/3EgksM7Q==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/untyped/-/untyped-1.5.1.tgz",
+      "integrity": "sha512-reBOnkJBFfBZ8pCKaeHgfZLcehXtM6UTxc+vqs1JvCps0c4amLNp3fhdGBZwYp+VLyoY9n3X5KOP7lCyWBUX9A==",
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.23.7",
-        "@babel/standalone": "^7.23.8",
-        "@babel/types": "^7.23.6",
+        "@babel/core": "^7.25.7",
+        "@babel/standalone": "^7.25.7",
+        "@babel/types": "^7.25.7",
         "defu": "^6.1.4",
-        "jiti": "^1.21.0",
+        "jiti": "^2.3.1",
         "mri": "^1.2.0",
-        "scule": "^1.2.0"
+        "scule": "^1.3.0"
       },
       "bin": {
         "untyped": "dist/cli.mjs"
       }
     },
+    "node_modules/untyped/node_modules/jiti": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.1.tgz",
+      "integrity": "sha512-yPBThwecp1wS9DmoA4x4KR2h3QoslacnDR8ypuFM962kI4/456Iy1oHx2RAgh4jfZNdn0bctsdadceiBUgpU1g==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/unwasm": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/unwasm/-/unwasm-0.3.9.tgz",
@@ -14107,9 +14361,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
-      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
+      "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
       "funding": [
         {
           "type": "opencollective",
@@ -14126,8 +14380,8 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "escalade": "^3.1.2",
-        "picocolors": "^1.0.1"
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.0"
       },
       "bin": {
         "update-browserslist-db": "cli.js"
@@ -15176,17 +15430,6 @@
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
       "license": "BSD-2-Clause"
     },
-    "node_modules/webpack-sources": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
-      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",

From bb33da5e78ca7a05acf343ef9b3c0b847daadaf6 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 6 Dec 2024 08:29:26 +0100
Subject: [PATCH 065/221] add todo

---
 components/profile/ProfileInformation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 5ff4b3d..0ba0a5e 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -15,7 +15,7 @@ onMounted(async () => {
 })
 
 async function getProfileInformation() {
-    $fetch<GetProfileResponse>('http://localhost:3000/api/v1/user/' + session.value?.user.id)
+    $fetch<GetProfileResponse>('http://localhost:3000/api/v1/user/' + session.value?.user.id) //TODO: change after implementing diffrent user endpoint. also add as global state wit useState named 'user'
       .then((data) => {
         username.value = data.username
         if (data.user_avatar) {

From dc9b50935a508a25fb3ef9989c8781c96ba4d5c8 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 6 Dec 2024 20:49:14 +0100
Subject: [PATCH 066/221] fixed correct overflow for friendlist

---
 components/profile/Friendlist.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 0fa5e1f..2e0d2ad 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -27,6 +27,9 @@ function addFriend() {
   }
   friends.value.push(newFriend)
 }
+
+
+// :class="['flex gap-3', friends.length > 3 ? 'overflow-x-auto pb-2' : '']"
 </script>
 
 <template>
@@ -34,7 +37,7 @@ function addFriend() {
     <p class="my-1">Friends</p>
     <div class="relative">
       <div
-          :class="['flex gap-3', friends.length > 3 ? 'overflow-x-auto pb-2' : '']">
+          :class="['flex gap-3 overflow-x-auto pb-2']">
         <HomeUsersUserBox
             v-for="item in friends"
             :key="item.friend_id"
@@ -42,7 +45,7 @@ function addFriend() {
             :name="item.friend_username"
             :user-turn="false"
             :class="[
-                        friends.length > 3 ? 'w-[calc(33.33%-0.67rem)] flex-shrink-0' :
+                        friends.length > 3 ? 'w-[calc(33.33%-1rem)] flex-shrink-0' :
                         friends.length === 3 ? 'w-1/3' :
                         friends.length === 2 ? 'w-1/2' : 'w-full'
                     ]"

From 2355f5ab3e4b527417714d96504ecedb1da28a37 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 6 Dec 2024 21:34:42 +0100
Subject: [PATCH 067/221] renamed MultipleUsersView and updated scrolling for
 friends and opponents

---
 components/{MultipleUsersView.vue => UsersView.vue} | 13 +++++++++++--
 pages/index.vue                                     |  6 ++----
 2 files changed, 13 insertions(+), 6 deletions(-)
 rename components/{MultipleUsersView.vue => UsersView.vue} (69%)

diff --git a/components/MultipleUsersView.vue b/components/UsersView.vue
similarity index 69%
rename from components/MultipleUsersView.vue
rename to components/UsersView.vue
index fddc6c8..85f5e59 100644
--- a/components/MultipleUsersView.vue
+++ b/components/UsersView.vue
@@ -14,13 +14,14 @@ const containerClasses = computed(() => {
     const baseClasses = 'w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3';
     if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto`;
     if (props.viewType === UserViewType.OPPONENTTURN) return `${baseClasses}`;
+    if (props.viewType === UserViewType.FRIENDS) return `${baseClasses}`;
     return '';
 });
 
 const userBoxContainerClasses = computed(() =>
     props.viewType === UserViewType.USERTURN
         ? 'flex flex-col space-y-3'
-        : 'flex space-x-3'
+        : 'flex gap-3 overflow-x-auto pb-2'
 );
 
 // Example Users
@@ -43,7 +44,15 @@ const users = [
         <div :class="userBoxContainerClasses">
             <HomeUsersUserBox 
             v-for="user in users" :key="user.name" :name="user.name"
-                :user-turn="viewType === UserViewType.USERTURN" />
+                :user-turn="viewType === UserViewType.USERTURN"
+                :class="[
+                            ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
+                                users.length > 3 ? 'w-[calc(33.33%-.99rem)] flex-shrink-0' :
+                                users.length === 3 ? 'w-1/3' :
+                                users.length === 2 ? 'w-1/2' : 'w-full'
+                            : ''
+                        ]"
+            />
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 4e56173..a8808e0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,10 +20,8 @@ import { UserViewType } from "@/types/components/users.view"
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <MultipleUsersView :view-type="UserViewType.USERTURN" class="h-3/6"/>
-          <MultipleUsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"/>
-          <!--HomeTurnsUser/>
-          <HomeTurnsOpponent/-->
+          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6"/>
+          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"/>
           <HomeControlsGameButtons class="h-1/6"/>
         </div>
       </template>

From 0c1ca8238d448db983f5bab301a38df057b63738 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 6 Dec 2024 21:49:25 +0100
Subject: [PATCH 068/221] removed unnecessary comment

---
 components/UsersView.vue          | 2 +-
 components/profile/Friendlist.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 85f5e59..a7336d1 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -47,7 +47,7 @@ const users = [
                 :user-turn="viewType === UserViewType.USERTURN"
                 :class="[
                             ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
-                                users.length > 3 ? 'w-[calc(33.33%-.99rem)] flex-shrink-0' :
+                                users.length > 3 ? 'w-[calc(33.33%-.98rem)] flex-shrink-0' :
                                 users.length === 3 ? 'w-1/3' :
                                 users.length === 2 ? 'w-1/2' : 'w-full'
                             : ''
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 2e0d2ad..44ea6e1 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {FriendshipStatus, FriendshipType, type GetFriendsResponse} from "@/types/api/user.friends";
+import { UserViewType } from "@/types/components/users.view";
 
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
@@ -27,12 +28,11 @@ function addFriend() {
   }
   friends.value.push(newFriend)
 }
-
-
-// :class="['flex gap-3', friends.length > 3 ? 'overflow-x-auto pb-2' : '']"
 </script>
 
 <template>
+  <UsersView :view-type="UserViewType.FRIENDS"/>
+
   <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
     <p class="my-1">Friends</p>
     <div class="relative">

From 1ee4fc48e51e3a9f763f7b89d982741423faf928 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 6 Dec 2024 22:00:50 +0100
Subject: [PATCH 069/221] moved friendlist into UserView component with working
 friends

---
 components/UsersView.vue          | 19 +++++++++----------
 components/profile/Friendlist.vue | 24 ++----------------------
 2 files changed, 11 insertions(+), 32 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index a7336d1..b3f45f3 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
+import { type GetFriendsResponse } from "@/types/api/user.friends";
 import { UserViewType } from "@/types/components/users.view";
 
 // Props
 const props = defineProps({
     viewType: {
-        type: Number, // Matches UserViewType enum
+        type: Number,
         required: true,
     },
+    users: {
+        type: Array as PropType<GetFriendsResponse[]>,
+        required: true,
+    }
 });
 
 // Computed Classes
@@ -23,14 +28,6 @@ const userBoxContainerClasses = computed(() =>
         ? 'flex flex-col space-y-3'
         : 'flex gap-3 overflow-x-auto pb-2'
 );
-
-// Example Users
-const users = [
-    { name: 'test1' },
-    { name: 'test2' },
-    { name: 'test3' },
-    { name: 'test3' },
-];
 </script>
 
 <template>
@@ -43,7 +40,9 @@ const users = [
         <!-- User Boxes -->
         <div :class="userBoxContainerClasses">
             <HomeUsersUserBox 
-            v-for="user in users" :key="user.name" :name="user.name"
+            v-for="user in props.users" :key="user.friend_id"
+                :profile-picture="user.friend_avatar?.toString()" 
+                :name="user.friend_username"
                 :user-turn="viewType === UserViewType.USERTURN"
                 :class="[
                             ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 44ea6e1..491f1a7 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -31,29 +31,9 @@ function addFriend() {
 </script>
 
 <template>
-  <UsersView :view-type="UserViewType.FRIENDS"/>
+  <UsersView :view-type="UserViewType.FRIENDS" :users="friends"/>
 
-  <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
-    <p class="my-1">Friends</p>
-    <div class="relative">
-      <div
-          :class="['flex gap-3 overflow-x-auto pb-2']">
-        <HomeUsersUserBox
-            v-for="item in friends"
-            :key="item.friend_id"
-            :profile-picture="item.friend_avatar?.toString()"
-            :name="item.friend_username"
-            :user-turn="false"
-            :class="[
-                        friends.length > 3 ? 'w-[calc(33.33%-1rem)] flex-shrink-0' :
-                        friends.length === 3 ? 'w-1/3' :
-                        friends.length === 2 ? 'w-1/2' : 'w-full'
-                    ]"
-        />
-      </div>
-    </div>
-    <div class="mt-3">
+  <div class="mt-3">
       <button class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
-    </div>
   </div>
 </template>
\ No newline at end of file

From 588bf37d21acf4ee296c430906b636407e46223e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 6 Dec 2024 22:52:00 +0100
Subject: [PATCH 070/221] Updated UsersView to display all users, no matter the
 type

---
 components/UsersView.vue | 48 +++++++++++++++++++++++++++++++++++-----
 pages/index.vue          | 42 +++++++++++++++++++++++++++++++++--
 types/api/user.ts        |  6 +++++
 3 files changed, 88 insertions(+), 8 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index b3f45f3..d16f738 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type GetFriendsResponse } from "@/types/api/user.friends";
 import { UserViewType } from "@/types/components/users.view";
+import { type UserInformation } from "@/types/api/user"
 
 // Props
 const props = defineProps({
@@ -9,7 +10,7 @@ const props = defineProps({
         required: true,
     },
     users: {
-        type: Array as PropType<GetFriendsResponse[]>,
+        type: Array as PropType<GetFriendsResponse[] | UserInformation[]>,
         required: true,
     }
 });
@@ -17,7 +18,7 @@ const props = defineProps({
 // Computed Classes
 const containerClasses = computed(() => {
     const baseClasses = 'w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3';
-    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto`;
+    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto flex-grow-0`;
     if (props.viewType === UserViewType.OPPONENTTURN) return `${baseClasses}`;
     if (props.viewType === UserViewType.FRIENDS) return `${baseClasses}`;
     return '';
@@ -26,8 +27,43 @@ const containerClasses = computed(() => {
 const userBoxContainerClasses = computed(() =>
     props.viewType === UserViewType.USERTURN
         ? 'flex flex-col space-y-3'
-        : 'flex gap-3 overflow-x-auto pb-2'
+        : 'flex gap-3 overflow-x-auto'
 );
+
+
+function isGetFriendsResponse(user: any): user is GetFriendsResponse {
+    return 'friend_id' in user && 'friend_username' in user && 'friend_spotify_id' in user;
+}
+
+function isUserInformation(user: any): user is UserInformation {
+    return 'user_id' in user && 'username' in user;
+}
+
+// Map users conditionally depending on their type
+const mappedUsers = computed(() => {
+    return props.users.map(user => {
+        console.log()
+        if (isGetFriendsResponse(user)) {
+            return {
+                userId: user.friend_id,
+                userName: user.friend_username,
+                userAvatar: user.friend_avatar,
+                spotifyId: user.friend_spotify_id,
+                status: user.status,
+                requestType: user.request_type,
+                createdAt: user.created_at,
+                updatedAt: user.updated_at,
+            };
+        } else if (isUserInformation(user)) {
+            return {
+                userId: user.user_id,
+                userName: user.username,
+                userAvatar: user.user_avatar,
+            };
+        }
+        return {};
+    });
+});
 </script>
 
 <template>
@@ -40,9 +76,9 @@ const userBoxContainerClasses = computed(() =>
         <!-- User Boxes -->
         <div :class="userBoxContainerClasses">
             <HomeUsersUserBox 
-            v-for="user in props.users" :key="user.friend_id"
-                :profile-picture="user.friend_avatar?.toString()" 
-                :name="user.friend_username"
+            v-for="user in mappedUsers" :key="user.userId"
+                :profile-picture="user.userAvatar?.toString()" 
+                :name="user.userName"
                 :user-turn="viewType === UserViewType.USERTURN"
                 :class="[
                             ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
diff --git a/pages/index.vue b/pages/index.vue
index a8808e0..3d82672 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,8 +20,46 @@ import { UserViewType } from "@/types/components/users.view"
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6"/>
-          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"/>
+          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6" :users="[
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },            
+          ]"/>
+          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6" :users="[
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 2,
+              user_avatar: null,
+              username: 'Test2'
+            },
+            { user_id: 3,
+              user_avatar: null,
+              username: 'Test3'
+            },
+            { user_id: 4,
+              user_avatar: null,
+              username: 'Test4'
+            },
+          ]"/>
           <HomeControlsGameButtons class="h-1/6"/>
         </div>
       </template>
diff --git a/types/api/user.ts b/types/api/user.ts
index d45dacd..7528a15 100644
--- a/types/api/user.ts
+++ b/types/api/user.ts
@@ -12,4 +12,10 @@ export interface GetProfileResponse {
     username: string,
     user_spotify_id: string,
     spotify_visibility: boolean,
+}
+
+export interface UserInformation {
+    user_id: number,
+    user_avatar: string | null,
+    username: string, 
 }
\ No newline at end of file

From 0d8004183a4c94bfac6866c45efad283dfd76cea Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sat, 7 Dec 2024 09:49:49 +0100
Subject: [PATCH 071/221] user spotify visibility setting now respected in
 friend and suer endpoint.

---
 DB/users.sql                            | 18 ++++++-----
 server/api/v1/user/[uid].get.ts         | 40 +++++++++++++++++++++++--
 server/api/v1/user/friends/index.get.ts | 10 +++++++
 server/utils/data-validation.ts         | 12 +++++++-
 types/api/user.friends.ts               |  2 +-
 types/api/users.ts                      | 11 +++++++
 6 files changed, 82 insertions(+), 11 deletions(-)
 create mode 100644 types/api/users.ts

diff --git a/DB/users.sql b/DB/users.sql
index ef78b16..22c1342 100644
--- a/DB/users.sql
+++ b/DB/users.sql
@@ -1,15 +1,19 @@
 CREATE TABLE users
 (
-    id                 uuid    not null references auth.users on delete cascade,
-    avatar_url         text,
-    username           text    not null,
-    spotify_id         text    not null,
-    spotify_visibility boolean not null default false,
+    id                      uuid                     not null references auth.users on delete cascade,
+    avatar_url              text,
+    username                text                     not null,
+    spotify_id              text                     not null,
+    spotify_visibility      boolean                  not null default false,
+    created_at              timestamp with time zone          default now(),
+    daily_streak            integer                  not null default 0,
+    daily_streak_updated_at timestamp with time zone not null default now(),
     primary key (id)
 );
 
 ALTER TABLE users
     ADD CONSTRAINT unique_username UNIQUE (username),
-    ADD CONSTRAINT valid_username check (username <> '' AND length(trim(username)) >= 4 AND username ~ '^[a-zA-Z0-9_]+$');
+    ADD CONSTRAINT valid_username check (username <> '' AND length(trim(username)) >= 4 AND
+                                         username ~ '^[a-zA-Z0-9_]+$');
 
-CREATE INDEX idx_username ON users(username);
\ No newline at end of file
+CREATE INDEX idx_username ON users (username);
\ No newline at end of file
diff --git a/server/api/v1/user/[uid].get.ts b/server/api/v1/user/[uid].get.ts
index f42c743..84cd857 100644
--- a/server/api/v1/user/[uid].get.ts
+++ b/server/api/v1/user/[uid].get.ts
@@ -1,5 +1,41 @@
-export default defineEventHandler((event) => {
+import {isValidUUID} from "~/server/utils/data-validation";
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import type {GetUserResponse} from "~/types/api/users";
+
+export default defineEventHandler(async (event) => {
     const userId = getRouterParam(event, 'uid')
 
-    return;
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    if (!userId || !isValidUUID(userId)) {
+        setResponseStatus(event, 400);
+        return {error: 'Invalid user ID'};
+    }
+
+    // Send request
+    const client = serverSupabaseServiceRole(event);
+    const {data, error}:{ data: GetUserResponse|null, error: any} = await client.from('users').select('*').eq('id', userId).maybeSingle();
+
+    if (!data) {
+        setResponseStatus(event, 404);
+        return {error: 'User not found'};
+    }
+
+    // Handle errors
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    // Hide spotify id if not visible
+    if (!data.spotify_visibility) {
+        delete data.spotify_id;
+    }
+
+    return data;
 })
\ No newline at end of file
diff --git a/server/api/v1/user/friends/index.get.ts b/server/api/v1/user/friends/index.get.ts
index 9942fd0..3e884ed 100644
--- a/server/api/v1/user/friends/index.get.ts
+++ b/server/api/v1/user/friends/index.get.ts
@@ -27,5 +27,15 @@ export default defineEventHandler(async (event) => {
         return {error: error.message};
     }
 
+    if(data === null) return [];
+
+    // Hide spotify id if not visible
+    // Yes this works even when the IDE marks it as an error
+    data!.forEach(friend => {
+        if (!friend.friend_spotify_visibility) {
+            delete friend.friend_spotify_id;
+        }
+    });
+
     return data;
 });
\ No newline at end of file
diff --git a/server/utils/data-validation.ts b/server/utils/data-validation.ts
index d8d2876..0c830e6 100644
--- a/server/utils/data-validation.ts
+++ b/server/utils/data-validation.ts
@@ -9,5 +9,15 @@ export const spotifyIDRegex = /^[a-zA-Z0-9]+$/; // base62
  * @returns Whether the string is a valid Spotify ID
  */
 export function isValidSpotifyID(spotifyID: string): boolean {
-  return spotifyID.match(spotifyIDRegex) !== null; // base62
+    return spotifyID.match(spotifyIDRegex) !== null; // base62
+}
+
+/**
+ * Check if a string is a valid UUID
+ * @param uuid - The string to check
+ * @returns Whether the string is a valid UUID
+ */
+export function isValidUUID(uuid: string): boolean {
+    if(uuid.length !== 36) return false;
+    return uuid.match(/^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$/) !== null;
 }
\ No newline at end of file
diff --git a/types/api/user.friends.ts b/types/api/user.friends.ts
index 5add186..06c54da 100644
--- a/types/api/user.friends.ts
+++ b/types/api/user.friends.ts
@@ -23,7 +23,7 @@ export interface GetFriendsResponse {
     friend_id: string,
     friend_username: string,
     friend_avatar: url.URL | null,
-    friend_spotify_id: string,
+    friend_spotify_id?: string,
     friend_spotify_visibility: boolean,
     created_at: string
     updated_at: string
diff --git a/types/api/users.ts b/types/api/users.ts
new file mode 100644
index 0000000..44f7eda
--- /dev/null
+++ b/types/api/users.ts
@@ -0,0 +1,11 @@
+import type url from "node:url";
+
+export interface GetUserResponse {
+    id: string,
+    avatar_url?: url.URL | null,
+    username: string,
+    spotify_id?: string,
+    spotify_visibility: boolean,
+    daily_streak: number,
+    daily_streak_updated_at: string
+}
\ No newline at end of file

From 52f39942959ada2a38e1c71d1406038ad0d3f2fb Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sat, 7 Dec 2024 09:04:25 +0100
Subject: [PATCH 072/221] fix UsersView Component List

---
 components/UsersView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index d16f738..d4c45ed 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -82,11 +82,11 @@ const mappedUsers = computed(() => {
                 :user-turn="viewType === UserViewType.USERTURN"
                 :class="[
                             ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
-                                users.length > 3 ? 'w-[calc(33.33%-.98rem)] flex-shrink-0' :
                                 users.length === 3 ? 'w-1/3' :
                                 users.length === 2 ? 'w-1/2' : 'w-full'
                             : ''
                         ]"
+                :style="users.length > 3 ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } : {}"
             />
         </div>
     </div>

From 8dee5c2fe8cf5d9ebddaa636e035c7edcce03405 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 7 Dec 2024 14:09:17 +0100
Subject: [PATCH 073/221] Updated home view to hopefully function as intended

---
 components/UsersView.vue          | 77 +++++++++++++++++++++----------
 components/home/Users/UserBox.vue | 10 ++--
 2 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index d4c45ed..ae1965c 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -17,17 +17,16 @@ const props = defineProps({
 
 // Computed Classes
 const containerClasses = computed(() => {
-    const baseClasses = 'w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3';
-    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto flex-grow-0`;
-    if (props.viewType === UserViewType.OPPONENTTURN) return `${baseClasses}`;
-    if (props.viewType === UserViewType.FRIENDS) return `${baseClasses}`;
+    const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
+    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
+    if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS) return `${baseClasses} overflow-y-hidden`;
     return '';
 });
 
 const userBoxContainerClasses = computed(() =>
     props.viewType === UserViewType.USERTURN
-        ? 'flex flex-col space-y-3'
-        : 'flex gap-3 overflow-x-auto'
+        ? 'flex flex-col space-y-1 md:space-y-3 h-full overflow-y-auto'
+        : 'flex gap-1 md:gap-3 mt-6 md:mt-9'
 );
 
 
@@ -42,11 +41,10 @@ function isUserInformation(user: any): user is UserInformation {
 // Map users conditionally depending on their type
 const mappedUsers = computed(() => {
     return props.users.map(user => {
-        console.log()
         if (isGetFriendsResponse(user)) {
             return {
                 userId: user.friend_id,
-                userName: user.friend_username,
+                username: user.friend_username,
                 userAvatar: user.friend_avatar,
                 spotifyId: user.friend_spotify_id,
                 status: user.status,
@@ -57,7 +55,7 @@ const mappedUsers = computed(() => {
         } else if (isUserInformation(user)) {
             return {
                 userId: user.user_id,
-                userName: user.username,
+                username: user.username,
                 userAvatar: user.user_avatar,
             };
         }
@@ -67,27 +65,56 @@ const mappedUsers = computed(() => {
 </script>
 
 <template>
-    <div :class="containerClasses">
-        <!-- Conditional Header -->
-        <p v-if="viewType === UserViewType.USERTURN" class="my-1">Your Turn</p>
-        <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="my-1">Opponent's Turn</p>
-        <p v-else-if="viewType === UserViewType.FRIENDS" class="my-1">Friends</p>
+    <div :class="[
+                    containerClasses,
+                    ((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) && users.length > 3) ? 'pr-0' : ''
+                ]"
+    >
+        <!-- Fixed Conditional Header -->
+        <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+            <p v-if="viewType === UserViewType.USERTURN">
+                Your Turn
+            </p>
+            <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="fixed">
+                Opponent's Turn
+            </p>
+            <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
+                Friends
+            </p>
+        </div>
 
-        <!-- User Boxes -->
-        <div :class="userBoxContainerClasses">
+        <!-- Scrollable User Boxes -->
+        <div 
+            :class="userBoxContainerClasses"
+        >
             <HomeUsersUserBox 
-            v-for="user in mappedUsers" :key="user.userId"
+                v-for="user in mappedUsers" 
+                :key="user.userId"
                 :profile-picture="user.userAvatar?.toString()" 
-                :name="user.userName"
+                :name="user.username"
                 :user-turn="viewType === UserViewType.USERTURN"
                 :class="[
-                            ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
-                                users.length === 3 ? 'w-1/3' :
-                                users.length === 2 ? 'w-1/2' : 'w-full'
-                            : ''
-                        ]"
-                :style="users.length > 3 ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } : {}"
+                    (viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) 
+                        ? users.length === 3 ? 'w-1/3' 
+                        : users.length === 2 ? 'w-1/2' 
+                        : 'w-full'
+                        : ''
+                ]"
+                :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) 
+                    ? users.length > 3 
+                        ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } 
+                        : {} 
+                    : {}"
             />
+            <HomeUsersUserBox v-if="users.length > 3" :class="['invisible', viewType === UserViewType.USERTURN ? 'h-1' : 'w-1']"/>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style>
+.fixed-header {
+  position: sticky;
+  top: 0;
+  background-color: black;
+}
+</style>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 638f738..e6e8a63 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -19,25 +19,25 @@
 <template>
     <div
       :class="[
-        'bg-blue-600 rounded-3xl p-3 w-full', 
+        'bg-blue-600 rounded-3xl px-3 w-full', 
         props.userTurn
           ? 'flex items-center'
-          : 'flex flex-col items-center justify-center h-full'
+          : 'flex flex-col items-center justify-center mb-3 py-2'
       ]"
     >
       <!-- Profile Picture -->
       <NuxtImg
         :class="[
           'rounded-full', 
-          'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16',
-          props.userTurn ? 'mr-3' : 'mb-2'
+          'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
+          props.userTurn ? 'mr-3' : 'mb-0'
         ]"
         :src="props.profilePicture.toString()"
         :alt="name"
       />
       
       <!-- User Name -->
-      <p class="text-white text-sm sm:text-base md:text-lg lg:text-xl">
+      <p class="text-white text-sm sm:text-base md:text-lg">
         {{ props.name }}
       </p>
       

From 9b07ba6efe53d55257eb20414122159c9162dc1e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 8 Dec 2024 15:21:48 +0100
Subject: [PATCH 074/221] added working playlist view

---
 components/playlists/PlaylistBox.vue  | 37 +++++++++++++++++
 components/playlists/PlaylistView.vue | 60 +++++++++++++++++++++++++++
 components/profile/Friendlist.vue     |  8 ++--
 pages/playlists.vue                   | 25 +++++++++++
 types/api/playlists.ts                | 10 +++++
 5 files changed, 136 insertions(+), 4 deletions(-)
 create mode 100644 components/playlists/PlaylistBox.vue
 create mode 100644 components/playlists/PlaylistView.vue
 create mode 100644 pages/playlists.vue
 create mode 100644 types/api/playlists.ts

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
new file mode 100644
index 0000000..593043e
--- /dev/null
+++ b/components/playlists/PlaylistBox.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+    const props = defineProps({
+    cover: {
+        type: Object as () => URL,
+        default: new URL('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg')
+    },
+    name: {
+        type: String,
+        default: 'Playlist'
+    }
+    });
+</script>
+
+<template>
+    <div
+      :class="[
+        'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block'
+      ]"
+    >
+      <!-- Playlist Cover -->
+      <NuxtImg
+        :class="[ 
+          'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl'
+        ]"
+        :src="props.cover.toString()"
+        :alt="name"
+      />
+      
+      <!-- Playlist Name -->
+      <p class="text-white text-sm sm:text-base md:text-lg text-center">
+        {{ props.name }}
+      </p>
+    </div>
+  </template>
+  
+  
\ No newline at end of file
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
new file mode 100644
index 0000000..ebeddc3
--- /dev/null
+++ b/components/playlists/PlaylistView.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { type GetPlaylistResponse } from "@/types/api/playlists"
+
+const cover = ref(new URL('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg'));
+const playlists = ref()
+
+
+const session = useSupabaseSession()
+
+onMounted(async () => {
+    if (session.value) {
+        await getProfileInformation()
+    }
+})
+
+async function getProfileInformation() {
+    $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist')
+      .then((data) => {
+        playlists.value = [...data]
+        console.log(playlists.value[1])
+      });
+}
+
+// Computed Classes
+const containerClasses = computed(() => {
+    const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
+    //if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
+    //if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS) return `${baseClasses} overflow-y-hidden`;
+    return `${baseClasses}`;
+});
+
+/*const userBoxContainerClasses = computed(() =>
+   props.viewType === UserViewType.USERTURN
+        ? 'flex flex-col space-y-1 md:space-y-3 h-full overflow-y-auto'
+        : 'flex gap-1 md:gap-3 mt-6 md:mt-9'
+);*/
+
+</script>
+
+<template>
+    <div :class="[
+                    containerClasses,
+                    //((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) && users.length > 3) ? 'pr-0' : ''
+                ]"
+    >
+        <!-- Fixed Header -->
+        <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+            <p> Genre</p>
+        </div>
+
+        <!-- Scrollable User Boxes -->
+        <div>
+            <PlaylistsPlaylistBox 
+                v-for="item in playlists" 
+                :key="item.id"
+                :name="item.name"
+                v-bind="item.cover ? { cover: item.cover } : {}"/>
+        </div>
+    </div>
+</template>
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 491f1a7..25bf86e 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -22,18 +22,18 @@ async function getFriendships() {
       });
 }
 
-function addFriend() {
+/*function addFriend() {
   const newFriend = {
     friend_username: "sfsdf",
   }
   friends.value.push(newFriend)
-}
+}*/
 </script>
 
 <template>
   <UsersView :view-type="UserViewType.FRIENDS" :users="friends"/>
 
-  <div class="mt-3">
+  <!--div class="mt-3">
       <button class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
-  </div>
+  </div-->
 </template>
\ No newline at end of file
diff --git a/pages/playlists.vue b/pages/playlists.vue
new file mode 100644
index 0000000..0621356
--- /dev/null
+++ b/pages/playlists.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import HeaderFooterView from "~/layouts/FooterView.vue";
+</script>
+
+<template>
+  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+    <HeaderFooterView>
+      <template #content>
+        <PlaylistsPlaylistView/>
+      </template>
+
+      <template #footer>
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl py-5">
+          <Icon name="mdi:album" class="text-white"/>
+        </NuxtLink>
+        <NuxtLink to="/" class="inline-flex items-center bg-blue-500 text-6xl rounded-full p-1.5">
+          <Icon name="mdi:home" class="text-white"/>
+        </NuxtLink>
+        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl py-5">
+          <Icon name="mdi:account-details" class="text-white"/>
+        </NuxtLink>
+      </template>
+    </HeaderFooterView>
+  </div>
+</template>
\ No newline at end of file
diff --git a/types/api/playlists.ts b/types/api/playlists.ts
new file mode 100644
index 0000000..cac3d37
--- /dev/null
+++ b/types/api/playlists.ts
@@ -0,0 +1,10 @@
+import type * as url from "node:url";
+
+export interface GetPlaylistResponse {
+    id: number,
+    spotifyId: string,
+    name: string,
+    cover: url.URL | null,
+    enabled: boolean,
+    categories: string[]
+}
\ No newline at end of file

From 1e4bbb2c444054a13bfb079adf40e660ed8b5ed5 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 8 Dec 2024 15:23:07 +0100
Subject: [PATCH 075/221] removed unnecessary style

---
 components/UsersView.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index ae1965c..7b1ca4b 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -110,11 +110,3 @@ const mappedUsers = computed(() => {
         </div>
     </div>
 </template>
-
-<style>
-.fixed-header {
-  position: sticky;
-  top: 0;
-  background-color: black;
-}
-</style>

From e1769180011f05b6ecd62f9311d9c4c2949de643 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 8 Dec 2024 16:11:11 +0100
Subject: [PATCH 076/221] added scroll effect for long names

---
 components/playlists/PlaylistBox.vue  | 77 ++++++++++++++++++++-------
 components/playlists/PlaylistView.vue |  3 --
 2 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 593043e..07360f2 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -13,25 +13,66 @@
 </script>
 
 <template>
-    <div
-      :class="[
-        'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block'
+  <div
+    :class="[
+      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block overflow-hidden'
+    ]"
+  >
+    <!-- Playlist Cover -->
+    <NuxtImg
+      :class="[ 
+        'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl cover-image'
       ]"
-    >
-      <!-- Playlist Cover -->
-      <NuxtImg
-        :class="[ 
-          'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl'
-        ]"
-        :src="props.cover.toString()"
-        :alt="name"
-      />
-      
-      <!-- Playlist Name -->
-      <p class="text-white text-sm sm:text-base md:text-lg text-center">
-        {{ props.name }}
-      </p>
+      :src="props.cover.toString()"
+      :alt="props.name"
+    />
+    
+    <!-- Horizontally Scrolling Text -->
+    <div class="text-container">
+      <p :class="['text-center', props.name.length > 5 ? 'scrolling-text' : '']">{{ props.name }}</p>
     </div>
-  </template>
+  </div>
+</template>
+
+<style scoped>
+.playlist-container {
+  max-width: 150px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.cover-image {
+  max-width: 100%;
+  display: block;
+}
+
+.text-container {
+  overflow: hidden;
+  white-space: nowrap; 
+  position: relative;
+  width: 100%;
+}
+
+.scrolling-text {
+  display: inline-block;
+  animation: scrollText 10s linear infinite; /* Adjust speed with '10s' */
+  white-space: nowrap;
+}
+
+/* Scroll animation keyframe */
+@keyframes scrollText {
+  0% {
+    transform: translateX(0%); /* Start outside the box */
+  }
+  100% {
+    transform: translateX(-100%); /* Scroll completely to the left */
+  }
+}
+</style>
+
   
   
\ No newline at end of file
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index ebeddc3..2a64d3e 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { type GetPlaylistResponse } from "@/types/api/playlists"
 
-const cover = ref(new URL('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg'));
 const playlists = ref()
 
-
 const session = useSupabaseSession()
 
 onMounted(async () => {
@@ -40,7 +38,6 @@ const containerClasses = computed(() => {
 <template>
     <div :class="[
                     containerClasses,
-                    //((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) && users.length > 3) ? 'pr-0' : ''
                 ]"
     >
         <!-- Fixed Header -->

From 989d477e0dafd099abe85888ab7e3fbd40726368 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sun, 8 Dec 2024 23:55:38 +0100
Subject: [PATCH 077/221] feat(game): Added game init endpoint & logic

---
 DB/game.sql                      | 143 ++++++++++++++++++++++++++++
 DB/playlists.sql                 |   2 +-
 package-lock.json                | 155 ++++++++++++++++++++++++++++++-
 package.json                     |   2 +
 server/api/v1/game/index.post.ts | 125 +++++++++++++++++++++++++
 server/utils/spotify.ts          |  71 ++++++++++++++
 types/api/game.ts                |  58 ++++++++++++
 7 files changed, 551 insertions(+), 5 deletions(-)
 create mode 100644 DB/game.sql
 create mode 100644 server/api/v1/game/index.post.ts
 create mode 100644 types/api/game.ts

diff --git a/DB/game.sql b/DB/game.sql
new file mode 100644
index 0000000..f30114a
--- /dev/null
+++ b/DB/game.sql
@@ -0,0 +1,143 @@
+DO
+$$
+    BEGIN
+        IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'game_status') THEN
+            CREATE TYPE game_status AS ENUM ('playing', 'finished');
+        END IF;
+    END
+$$;
+
+
+DO
+$$
+    BEGIN
+        IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'game_song_input') THEN
+            CREATE TYPE game_song_input AS
+            (
+                spotify_song_id TEXT,
+                wrong_option_1  TEXT,
+                wrong_option_2  TEXT,
+                wrong_option_3  TEXT
+            );
+        END IF;
+    END
+$$;
+
+-- Games
+CREATE TABLE IF NOT EXISTS games
+(
+    game_id     SERIAL PRIMARY KEY,
+    playlist_id TEXT                     NOT NULL REFERENCES playlists (id) ON DELETE CASCADE,
+    status      game_status              NOT NULL DEFAULT 'playing',
+    created_at  TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now()
+);
+
+-- Players of each game and their scores
+CREATE TABLE IF NOT EXISTS game_players
+(
+    game_id    INTEGER REFERENCES games (game_id) ON DELETE CASCADE,
+    user_id    UUID REFERENCES users (id),
+    score      INTEGER NOT NULL DEFAULT 0,
+    is_creator BOOLEAN NOT NULL DEFAULT false,
+    PRIMARY KEY (game_id, user_id)
+);
+-- Index for ensuring only one creator per game or none
+CREATE UNIQUE INDEX one_creator_per_game ON game_players (game_id) WHERE is_creator = true;
+-- Index for finding players in a game
+CREATE INDEX idx_game_players_player_id ON game_players (user_id);
+-- Index for finding high scores by user
+CREATE INDEX idx_game_players_score ON game_players (user_id, score DESC);
+
+-- Songs
+-- mostly for reference after the game is over since we always fetch songs from Spotify
+CREATE TABLE IF NOT EXISTS songs
+(
+    spotify_song_id TEXT PRIMARY KEY,
+    song_name       TEXT NOT NULL,
+    artist_name     TEXT NOT NULL,
+    preview_url     TEXT
+);
+
+-- Songs in each game
+CREATE TABLE IF NOT EXISTS game_rounds
+(
+    game_id        INTEGER REFERENCES games (game_id) ON DELETE CASCADE,
+    song_order     INTEGER NOT NULL,
+    song_id        TEXT    NOT NULL,
+    wrong_option_1 TEXT    NOT NULL,
+    wrong_option_2 TEXT    NOT NULL,
+    wrong_option_3 TEXT    NOT NULL,
+    PRIMARY KEY (game_id, song_order),
+
+    CONSTRAINT fk_spotify_song_id FOREIGN KEY (song_id) REFERENCES songs (spotify_song_id),
+    CONSTRAINT fk_wrong_option_1 FOREIGN KEY (wrong_option_1) REFERENCES songs (spotify_song_id),
+    CONSTRAINT fk_wrong_option_2 FOREIGN KEY (wrong_option_2) REFERENCES songs (spotify_song_id),
+    CONSTRAINT fk_wrong_option_3 FOREIGN KEY (wrong_option_3) REFERENCES songs (spotify_song_id)
+);
+
+-- Statistics for each song of each game for each user
+CREATE TABLE IF NOT EXISTS game_player_song_stats
+(
+    game_id         INTEGER REFERENCES games (game_id) ON DELETE CASCADE,
+    user_id         UUID REFERENCES users (id),
+    song_order      INTEGER NOT NULL,
+    time_to_guess   INTEGER,
+    correct_guess   BOOLEAN NOT NULL DEFAULT false,
+    guessed_song_id TEXT,
+    PRIMARY KEY (game_id, user_id, song_order),
+    FOREIGN KEY (game_id, song_order) REFERENCES game_rounds (game_id, song_order)
+);
+
+CREATE INDEX idx_game_player_song_stats_game_user ON game_player_song_stats (game_id, user_id);
+
+--- Functions
+
+-- Initialize a game with a playlist and players
+CREATE OR REPLACE FUNCTION init_game(
+    playlist_id_input TEXT,
+    player_ids UUID[],
+    song_data game_song_input[]
+) RETURNS TABLE(game_id INTEGER, created_at TIMESTAMP WITH TIME ZONE) AS
+$$
+DECLARE
+    new_game_id INTEGER;
+    new_created_at TIMESTAMP WITH TIME ZONE;
+    player_id   UUID;
+BEGIN
+    -- Create game
+    INSERT INTO games (playlist_id, status)
+    VALUES (playlist_id_input, 'playing')
+    RETURNING games.game_id, games.created_at INTO new_game_id, new_created_at;
+
+    -- Add all players from array
+    FOREACH player_id IN ARRAY player_ids
+        LOOP
+            INSERT INTO game_players (game_id, user_id, score)
+            VALUES (new_game_id, player_id, 0);
+        END LOOP;
+
+    UPDATE game_players
+    SET is_creator = true
+    WHERE game_players.game_id = new_game_id AND game_players.user_id = player_ids[1];
+
+    -- Insert songs (assuming the songs already exist in the songs table)
+    INSERT INTO game_rounds (game_id,
+                             song_order,
+                             song_id,
+                             wrong_option_1,
+                             wrong_option_2,
+                             wrong_option_3)
+    SELECT
+        new_game_id,
+        row_number() OVER (ORDER BY song.spotify_song_id),  -- Added ORDER BY
+        song.spotify_song_id,
+        song.wrong_option_1,
+        song.wrong_option_2,
+        song.wrong_option_3
+    FROM unnest(song_data) song;
+
+    RETURN QUERY
+        SELECT new_game_id AS game_id, new_created_at AS created_at;
+
+END;
+$$ LANGUAGE plpgsql;
\ No newline at end of file
diff --git a/DB/playlists.sql b/DB/playlists.sql
index 9c39e60..031f240 100644
--- a/DB/playlists.sql
+++ b/DB/playlists.sql
@@ -12,6 +12,6 @@ CREATE UNIQUE INDEX enabled_playlist_unique_name ON playlists (name) WHERE enabl
 create table categories
 (
     name         text not null,
-    "playlistId" text not null references playlists,
+    "playlistId" text not null references playlists (id) on delete cascade,
     primary key (name, "playlistId")
 );
diff --git a/package-lock.json b/package-lock.json
index decf1e8..61db8a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@nuxt/image": "^1.8.1",
         "@nuxtjs/supabase": "v1.2.2",
         "@nuxtjs/tailwindcss": "^6.12.1",
+        "jsonpath": "^1.1.1",
         "nuxt": "^3.13.0",
         "vue": "latest",
         "vue-router": "latest",
@@ -18,6 +19,7 @@
       },
       "devDependencies": {
         "@nuxt/eslint": "^0.5.7",
+        "@types/jsonpath": "^0.2.4",
         "@types/node": "^22.8.5",
         "eslint": "^9.11.1",
         "typedoc": "^0.26.10"
@@ -3646,6 +3648,13 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/jsonpath": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@types/jsonpath/-/jsonpath-0.2.4.tgz",
+      "integrity": "sha512-K3hxB8Blw0qgW6ExKgMbXQv2UPZBoE2GqLpVY+yr7nMD2Pq86lsuIzyAaiQ7eMqFL5B6di6pxSkogLJEyEHoGA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -6085,7 +6094,6 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/deepmerge": {
@@ -6507,6 +6515,110 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/escodegen": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/escodegen/node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/escodegen/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/optionator": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.6",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "word-wrap": "~1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/eslint": {
       "version": "9.11.1",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.11.1.tgz",
@@ -7037,6 +7149,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz",
+      "integrity": "sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -7086,7 +7210,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -7204,7 +7327,6 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/fast-npm-meta": {
@@ -8498,6 +8620,17 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonpath": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jsonpath/-/jsonpath-1.1.1.tgz",
+      "integrity": "sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==",
+      "license": "MIT",
+      "dependencies": {
+        "esprima": "1.2.2",
+        "static-eval": "2.0.2",
+        "underscore": "1.12.1"
+      }
+    },
     "node_modules/keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -12859,6 +12992,15 @@
       "integrity": "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==",
       "license": "MIT"
     },
+    "node_modules/static-eval": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
+      "integrity": "sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==",
+      "license": "MIT",
+      "dependencies": {
+        "escodegen": "^1.8.1"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -13756,6 +13898,12 @@
         "unplugin": "^1.3.1"
       }
     },
+    "node_modules/underscore": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
+      "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==",
+      "license": "MIT"
+    },
     "node_modules/undici": {
       "version": "5.28.4",
       "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
@@ -15231,7 +15379,6 @@
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
diff --git a/package.json b/package.json
index ffd3bf5..b6728f7 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@nuxt/image": "^1.8.1",
     "@nuxtjs/supabase": "v1.2.2",
     "@nuxtjs/tailwindcss": "^6.12.1",
+    "jsonpath": "^1.1.1",
     "nuxt": "^3.13.0",
     "vue": "latest",
     "vue-router": "latest",
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@nuxt/eslint": "^0.5.7",
+    "@types/jsonpath": "^0.2.4",
     "@types/node": "^22.8.5",
     "eslint": "^9.11.1",
     "typedoc": "^0.26.10"
diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
new file mode 100644
index 0000000..e914b03
--- /dev/null
+++ b/server/api/v1/game/index.post.ts
@@ -0,0 +1,125 @@
+import {z} from "zod";
+import {spotifyIDRegex} from "~/server/utils/data-validation";
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import {fetchPreviewUrl, getSongsFromPlaylist} from "~/server/utils/spotify";
+import type {GameRound, Song, SpotifySong} from "~/types/api/game";
+import type {SupabaseClient} from "@supabase/supabase-js";
+
+const GameInitSchema = z.object({
+    playlist_id: z.string().regex(spotifyIDRegex),
+    opponent_id: z.string().uuid()
+}).readonly()
+
+async function saveSongsToDatabase(client: SupabaseClient, songs: Song[]) {
+    const {error: songError} = await client
+        .from('songs')
+        .upsert(songs.map((song: Song) => ({
+            spotify_song_id: song.id,
+            song_name: song.name,
+            artist_name: song.artists[0].name, // Using first artist only
+            preview_url: song.preview_url      // Mostly null, spotify changed their API
+        })));
+
+    if (songError) {
+        throw new Error(songError.message);
+    }
+}
+
+async function createGameRounds(songs: Song[], rounds_to_play: number = 5): Promise<GameRound[]> {
+    const gameRounds: GameRound[] = [];
+    const shuffledSongs = [...songs].sort(() => Math.random() - 0.5);
+
+    for (let i = 0; i < rounds_to_play; i++) {
+        const selectedTrack = shuffledSongs.pop();
+        // Get preview url through parsing embed for selected track
+        selectedTrack!.preview_url = await fetchPreviewUrl(selectedTrack!.id);
+
+        // keep track of used IDs for this song option
+        const usedIds = new Set<string>([selectedTrack!.id]);
+        const getUniqueWrong = () => {
+            let wrongTrack;
+            do {
+                wrongTrack = shuffledSongs[Math.floor(Math.random() * shuffledSongs.length)];
+            } while (usedIds.has(wrongTrack.id));
+            usedIds.add(wrongTrack.id);
+            return wrongTrack;
+        };
+
+        gameRounds.push({
+            round: i + 1, // 1-indexed since postgres functions are also 1-indexed
+            correct_song: selectedTrack!,
+            wrong_songs: [getUniqueWrong(), getUniqueWrong(), getUniqueWrong()]
+        });
+    }
+
+    return gameRounds;
+}
+
+export default defineEventHandler(async (event) => {
+    // validate post-request body
+    const result = await readValidatedBody(event, body => GameInitSchema.safeParse(body))
+    if (!result.success) {
+        setResponseStatus(event, 400);
+        return {error: result.error.issues};
+    }
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Determine songs
+    const token = await getSpotifyToken();
+    const spotifySongs = await getSongsFromPlaylist(token, result.data.playlist_id);
+
+    if (!spotifySongs) {
+        setResponseStatus(event, 500);
+        return {error: 'Failed to get songs from playlist'};
+    }
+
+    if (spotifySongs.total < 8) {
+        setResponseStatus(event, 400);
+        return {error: 'Insufficient tracks in playlist. Minimum 8 tracks required'};
+    }
+
+    const songs = spotifySongs.items.map((item: SpotifySong) => item.track).filter((track: Song) => track.is_playable);
+    const client = serverSupabaseServiceRole(event);
+
+    try {
+        await saveSongsToDatabase(client, songs);
+        const gameRounds = await createGameRounds(songs);
+
+        const init_game_params = {
+            playlist_id_input: result.data.playlist_id,
+            player_ids: [user.id, result.data.opponent_id],
+            song_data: gameRounds.map(round => ({
+                spotify_song_id: round.correct_song.id,
+                wrong_option_1: round.wrong_songs[0].id,
+                wrong_option_2: round.wrong_songs[1].id,
+                wrong_option_3: round.wrong_songs[2].id
+            }))
+        }
+
+        const {error} = await client.rpc('init_game', init_game_params as never).select().single();
+
+        if (error) {
+            setResponseStatus(event, 500);
+            return {error: error.message};
+        }
+
+        const response = {
+            rounds: gameRounds.map((round) => ({
+                round: round.round,
+                preview_url: round.correct_song.preview_url!,
+                options: [round.correct_song, ...round.wrong_songs].sort(() => Math.random() - 0.5)
+            }))
+        }
+
+        return response;
+    } catch (error) {
+        setResponseStatus(event, 500);
+        return {error: error instanceof Error ? error.message : 'An unknown error occurred'};
+    }
+});
\ No newline at end of file
diff --git a/server/utils/spotify.ts b/server/utils/spotify.ts
index 1f07a71..c51b0b1 100644
--- a/server/utils/spotify.ts
+++ b/server/utils/spotify.ts
@@ -1,3 +1,5 @@
+import jsonpath from 'jsonpath';
+
 let spotifyToken: string | null = null
 let tokenExpiry: number = 0
 
@@ -44,4 +46,73 @@ export async function getPlaylistCover(token: string | null, playlistId: string)
     const data = await res.json()
     // console.log(data)
     return data[0].url;
+}
+
+export async function getSongsFromPlaylist(token: string | null, playlistId: string) {
+    if (!token) return [];
+
+    const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/tracks?market=DE&fields=total%2Citems%28track%28artists%2Cname%2Cis_playable%2Cid%2Cpreview_url%29%29`, {
+        headers: {'Authorization': `Bearer ${token}`}
+    })
+    const data = await res.json()
+    // console.log(data)
+
+    return data;
+}
+
+// Workaround to get the preview URL from the Spotify embed page
+// based on https://stackoverflow.com/a/79238027/12822225
+export async function fetchPreviewUrl(trackId: string): Promise<string | null> {
+    try {
+        const embedUrl = `https://open.spotify.com/embed/track/${trackId}`;
+
+        const response = await fetch(embedUrl, {
+            headers: {
+                'Accept': 'text/html',
+                'User-Agent': 'Mozilla/5.0 (compatible; Nuxt/3.0; +https://nuxtjs.org)'
+            }
+        });
+
+        if (!response.ok) {
+            console.error(`Failed to fetch embed page: ${response.status}`);
+            return null;
+        }
+
+        const html = await response.text();
+
+        // Extract all script tags content
+        const scriptRegex = /<script[^>]*>([\s\S]*?)<\/script>/gi;
+        const scripts: string[] = [];
+        let match;
+
+        while ((match = scriptRegex.exec(html)) !== null) {
+            if (match[1].trim()) {
+                scripts.push(match[1].trim());
+            }
+        }
+
+        // Search through each script tag for the preview URL
+        for (const scriptContent of scripts) {
+            try {
+                // Try to parse the script content as JSON
+                // Some script tags might contain non-JSON content, so we need to handle that
+                const jsonData = JSON.parse(scriptContent);
+
+                // Use JsonPath to find the audioPreview URL
+                const query = '$..[?(@.audioPreview)].audioPreview.url';
+                const result = jsonpath.query(jsonData, query);
+
+                if (result && result.length > 0) {
+                    return result[0] as string;
+                }
+            } catch (e) {
+                // Skip this script tag if it's not valid JSON
+            }
+        }
+
+        return null;
+    } catch (error) {
+        console.error('Error fetching preview URL:', error);
+        return null;
+    }
 }
\ No newline at end of file
diff --git a/types/api/game.ts b/types/api/game.ts
new file mode 100644
index 0000000..b858ffe
--- /dev/null
+++ b/types/api/game.ts
@@ -0,0 +1,58 @@
+export interface SpotifySong {
+    track: Song;
+}
+
+export interface Song {
+    id: string;
+    name: string;
+    artists: SongArtist[];
+    preview_url?: string | null;
+    is_playable: boolean;
+}
+
+interface SongArtist {
+    id: string;
+    name: string;
+}
+
+export interface GameRound {
+    round: number;
+    correct_song: Song;
+    wrong_songs: Song[];
+}
+
+export interface Game {
+    game_id: number;
+    playlist_id: string;
+    player_ids: string[];
+    songs: GameRound[];
+    created_at: string;
+    stats?: GameStats[];
+}
+
+export interface GameStats {
+    user_id: string;
+    score: number;
+    guesses: GameStatsContent[];
+}
+
+export interface GameStatsContent {
+    song_order: number;
+    song: Song;
+    time_to_guess: number;
+    correct_guess: boolean;
+}
+
+export interface GameInitResponse {
+    rounds: {
+        round: number;
+        preview_url: string;
+        options: Song[];
+    }
+}
+
+// Requests
+export interface GameInitRequest {
+    playlist_id: string;
+    opponent_id: string;
+}
\ No newline at end of file

From 33d7fe904680a4efc558b43dff5911a386b8f81d Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 9 Dec 2024 00:15:12 +0100
Subject: [PATCH 078/221] update footers to minimalize height and display
 active page

---
 layouts/FooterView.vue       |  2 +-
 layouts/HeaderFooterView.vue |  2 +-
 pages/index.vue              | 12 ++++++------
 pages/profile.vue            | 10 +++++-----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/layouts/FooterView.vue b/layouts/FooterView.vue
index 6381c9d..bcadbec 100644
--- a/layouts/FooterView.vue
+++ b/layouts/FooterView.vue
@@ -12,7 +12,7 @@
       </div>
 
       <!-- Footer -->
-      <div class="basis-24 border rounded-t-3xl">
+      <div class="bg-yellow-500 text-red-600 rounded-t-3xl">
         <div class="flex justify-around items-center h-full">
           <slot name="footer"/>
         </div>
diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 2ebdc02..9137d55 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -20,7 +20,7 @@
       </div>
 
       <!-- Footer -->
-      <div class="h-1/6 border rounded-t-3xl">
+      <div class="bg-yellow-500 text-red-600 rounded-t-3xl">
         <div class="flex justify-around items-center h-full">
           <slot name="footer" />
         </div>
diff --git a/pages/index.vue b/pages/index.vue
index 3d82672..54b798f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,7 +5,7 @@ import { UserViewType } from "@/types/components/users.view"
 </script>
 
 <template>
-  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+  <div class="bg-gradient-to-b from-indigo-500 to-purple-500">
     <HeaderFooterView>
       <template #header>
         <div>
@@ -64,14 +64,14 @@ import { UserViewType } from "@/types/components/users.view"
         </div>
       </template>
       <template #footer>
-        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl py-5">
-          <Icon name="mdi:album" class="text-white"/>
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl">
+          <Icon name="mdi:album" class=""/>
         </NuxtLink>
-        <NuxtLink to="/" class="inline-flex items-center bg-blue-500 text-6xl rounded-full p-1.5">
+        <NuxtLink to="/" class="inline-flex items-center text-6xl rounded-full p-1.5">
           <Icon name="mdi:home" class="text-white"/>
         </NuxtLink>
-        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl py-5">
-          <Icon name="mdi:account-details" class="text-white"/>
+        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl">
+          <Icon name="mdi:account-details" class=""/>
         </NuxtLink>
       </template>
     </HeaderFooterView>
diff --git a/pages/profile.vue b/pages/profile.vue
index 492e694..219c49c 100644
--- a/pages/profile.vue
+++ b/pages/profile.vue
@@ -10,13 +10,13 @@ import HeaderFooterView from "~/layouts/FooterView.vue";
       </template>
 
       <template #footer>
-        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl py-5">
-          <Icon name="mdi:album" class="text-white"/>
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl">
+          <Icon name="mdi:album" class=""/>
         </NuxtLink>
-        <NuxtLink to="/" class="inline-flex items-center bg-blue-500 text-6xl rounded-full p-1.5">
-          <Icon name="mdi:home" class="text-white"/>
+        <NuxtLink to="/" class="inline-flex items-center text-6xl rounded-full p-1.5">
+          <Icon name="mdi:home" class=""/>
         </NuxtLink>
-        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl py-5">
+        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl">
           <Icon name="mdi:account-details" class="text-white"/>
         </NuxtLink>
       </template>

From e48df284b0fea0977a3f9512d93a8f41408761b9 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 9 Dec 2024 00:50:00 +0100
Subject: [PATCH 079/221] enhanced ProfileInformation Component and introduces
 user state

---
 components/profile/ProfileInformation.vue | 47 +++++++++--------------
 composables/useUser.ts                    | 34 ++++++++++++++++
 server/api/v1/user/index.get.ts           | 34 ++++++++++++++++
 types/api/users.ts                        |  4 +-
 4 files changed, 88 insertions(+), 31 deletions(-)
 create mode 100644 composables/useUser.ts
 create mode 100644 server/api/v1/user/index.get.ts

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 0ba0a5e..9254ce8 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -1,42 +1,33 @@
 <script setup lang="ts">
-import type {
-    GetProfileResponse
-} from "@/types/api/user";
-
-const username = ref('Username');
-const profilePicture = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
 
 const session = useSupabaseSession()
+const {user, loading, error, fetchUser} = useUser()
 
 onMounted(async () => {
-    if (session.value) {
-        await getProfileInformation()
-    }
+  if (session.value) {
+    await fetchUser()
+    console.log(user.value)
+  }
 })
 
-async function getProfileInformation() {
-    $fetch<GetProfileResponse>('http://localhost:3000/api/v1/user/' + session.value?.user.id) //TODO: change after implementing diffrent user endpoint. also add as global state wit useState named 'user'
-      .then((data) => {
-        username.value = data.username
-        if (data.user_avatar) {
-            profilePicture.value = data.user_avatar;
-        }
-      });
-}
+const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
 </script>
 
 <template>
+  <div>
+    <div v-if="error" class="text-red-500">Error occurred: {{error}}</div>
     <div class="flex flex-col">
-        <div class="flex flex-col items-center justify-center mb-3">
-            <NuxtImg :src="profilePicture" class="w-16 h-16 rounded-full" />
-            <p>{{ username }}</p>
-        </div>
+      <div class="flex flex-col items-center justify-center mb-3">
+        <NuxtImg :src="loading || !user?.avatar_url ? default_avatar : user!.avatar_url" class="w-16 h-16 rounded-full"/>
+        <p>{{ loading ? 'Loading.' : user?.username }}</p>
+      </div>
 
-        <div class="grid grid-cols-2 gap-4">
-            <div class="bg-gray-200 h-8 rounded-3xl px-3">Streak</div>
-            <div class="bg-gray-200 h-8 rounded-3xl px-3">Games played</div>
-            <div class="bg-gray-200 h-8 rounded-3xl px-3">Placeholder</div>
-            <div class="bg-gray-200 h-8 rounded-3xl px-3">Date joined</div>
-        </div>
+      <div class="grid grid-cols-2 gap-4">
+        <div class="bg-gray-200 h-8 rounded-3xl px-3">Games played</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3">Streak: {{ user?.daily_streak }}</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3">Spotify {{user?.spotify_visibility ? 'public' : 'private'}}</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3">Joined {{ new Date(session?.user.created_at).toDateString() }}</div>
+      </div>
     </div>
+  </div>
 </template>
diff --git a/composables/useUser.ts b/composables/useUser.ts
new file mode 100644
index 0000000..7f997cb
--- /dev/null
+++ b/composables/useUser.ts
@@ -0,0 +1,34 @@
+import type {GetUserResponse} from "@/types/api/users";
+
+export const useUser = () => {
+    const user = useState<GetUserResponse|null>('user', () => null)
+    const loading = useState<boolean>('userLoading', () => false)
+    const error = useState<string|null>('userError', () => null)
+
+    const fetchUser = async () => {
+        // Only fetch if we don't have user data
+        if (!user.value) {
+            loading.value = true
+            error.value = null
+            try {
+                user.value = await useProfileInformation()
+            } catch (err) {
+                error.value = 'Failed to fetch user'
+                console.error(err)
+            } finally {
+                loading.value = false
+            }
+        }
+    }
+
+    return {
+        user,
+        loading,
+        error,
+        fetchUser
+    }
+}
+
+async function useProfileInformation() {
+    return await $fetch<GetUserResponse>('http://localhost:3000/api/v1/user/')
+}
\ No newline at end of file
diff --git a/server/api/v1/user/index.get.ts b/server/api/v1/user/index.get.ts
new file mode 100644
index 0000000..9a52add
--- /dev/null
+++ b/server/api/v1/user/index.get.ts
@@ -0,0 +1,34 @@
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import type {GetUserResponse} from "~/types/api/users";
+
+export default defineEventHandler(async (event) => {
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Send request
+    const client = serverSupabaseServiceRole(event);
+    const {data, error}:{ data: GetUserResponse|null, error: any} = await client.from('users').select('*').eq('id', user.id).maybeSingle();
+
+    if (!data) {
+        setResponseStatus(event, 404);
+        return {error: 'User not found'};
+    }
+
+    // Handle errors
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    // Hide spotify id if not visible
+    if (!data.spotify_visibility) {
+        delete data.spotify_id;
+    }
+
+    return data;
+})
\ No newline at end of file
diff --git a/types/api/users.ts b/types/api/users.ts
index 44f7eda..abffbcb 100644
--- a/types/api/users.ts
+++ b/types/api/users.ts
@@ -1,8 +1,6 @@
-import type url from "node:url";
-
 export interface GetUserResponse {
     id: string,
-    avatar_url?: url.URL | null,
+    avatar_url?: string,
     username: string,
     spotify_id?: string,
     spotify_visibility: boolean,

From 4a50299f4864e9e8effdcc4a66f72c0b9e97840f Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 9 Dec 2024 01:00:17 +0100
Subject: [PATCH 080/221] fix types of UsersView

---
 components/UsersView.vue | 141 ++++++++++++++++++++-------------------
 types/api/user.ts        |  21 ------
 2 files changed, 72 insertions(+), 90 deletions(-)
 delete mode 100644 types/api/user.ts

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 7b1ca4b..88898bf 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { type GetFriendsResponse } from "@/types/api/user.friends";
-import { UserViewType } from "@/types/components/users.view";
-import { type UserInformation } from "@/types/api/user"
+import type {GetFriendsResponse} from "@/types/api/user.friends";
+import {UserViewType} from "@/types/components/users.view";
+import type {GetUserResponse} from "@/types/api/users";
 
 // Props
 const props = defineProps({
-    viewType: {
-        type: Number,
-        required: true,
-    },
-    users: {
-        type: Array as PropType<GetFriendsResponse[] | UserInformation[]>,
-        required: true,
-    }
+  viewType: {
+    type: Number,
+    required: true,
+  },
+  users: {
+    type: Array as PropType<GetFriendsResponse[] | GetUserResponse[]>,
+    required: true,
+  }
 });
 
 // Computed Classes
 const containerClasses = computed(() => {
-    const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
-    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
-    if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS) return `${baseClasses} overflow-y-hidden`;
-    return '';
+  const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
+  if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
+  if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS) return `${baseClasses} overflow-y-hidden`;
+  return '';
 });
 
 const userBoxContainerClasses = computed(() =>
@@ -30,83 +30,86 @@ const userBoxContainerClasses = computed(() =>
 );
 
 
-function isGetFriendsResponse(user: any): user is GetFriendsResponse {
-    return 'friend_id' in user && 'friend_username' in user && 'friend_spotify_id' in user;
+function isGetFriendsResponse(user: GetFriendsResponse | GetUserResponse): user is GetFriendsResponse {
+  return 'friend_id' in user && 'friend_username' in user && 'friend_spotify_id' in user;
 }
 
-function isUserInformation(user: any): user is UserInformation {
-    return 'user_id' in user && 'username' in user;
+function isUserInformation(user: GetFriendsResponse | GetUserResponse): user is GetUserResponse {
+  return 'id' in user && 'username' in user;
 }
 
 // Map users conditionally depending on their type
 const mappedUsers = computed(() => {
-    return props.users.map(user => {
-        if (isGetFriendsResponse(user)) {
-            return {
-                userId: user.friend_id,
-                username: user.friend_username,
-                userAvatar: user.friend_avatar,
-                spotifyId: user.friend_spotify_id,
-                status: user.status,
-                requestType: user.request_type,
-                createdAt: user.created_at,
-                updatedAt: user.updated_at,
-            };
-        } else if (isUserInformation(user)) {
-            return {
-                userId: user.user_id,
-                username: user.username,
-                userAvatar: user.user_avatar,
-            };
-        }
-        return {};
-    });
+  return props.users.map(user => {
+    if (isGetFriendsResponse(user)) {
+      return {
+        userId: user.friend_id,
+        username: user.friend_username,
+        userAvatar: user.friend_avatar,
+        spotifyId: user.friend_spotify_id,
+        status: user.status,
+        requestType: user.request_type,
+        createdAt: user.created_at,
+        updatedAt: user.updated_at,
+      };
+    } else if (isUserInformation(user)) {
+      return {
+        userId: user.id,
+        username: user.username,
+        userAvatar: user.avatar_url,
+      };
+    }
+    return {};
+  });
 });
 </script>
 
 <template>
-    <div :class="[
+  <div
+      :class="[
                     containerClasses,
                     ((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) && users.length > 3) ? 'pr-0' : ''
                 ]"
-    >
-        <!-- Fixed Conditional Header -->
-        <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
-            <p v-if="viewType === UserViewType.USERTURN">
-                Your Turn
-            </p>
-            <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="fixed">
-                Opponent's Turn
-            </p>
-            <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
-                Friends
-            </p>
-        </div>
+  >
+    <!-- Fixed Conditional Header -->
+    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+      <p v-if="viewType === UserViewType.USERTURN">
+        Your Turn
+      </p>
+      <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="fixed">
+        Opponent's Turn
+      </p>
+      <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
+        Friends
+      </p>
+    </div>
 
-        <!-- Scrollable User Boxes -->
-        <div 
-            :class="userBoxContainerClasses"
-        >
-            <HomeUsersUserBox 
-                v-for="user in mappedUsers" 
-                :key="user.userId"
-                :profile-picture="user.userAvatar?.toString()" 
-                :name="user.username"
-                :user-turn="viewType === UserViewType.USERTURN"
-                :class="[
+    <!-- Scrollable User Boxes -->
+    <div
+        :class="userBoxContainerClasses"
+    >
+      <HomeUsersUserBox
+          v-for="user in mappedUsers"
+          :key="user.userId"
+          :profile-picture="user.userAvatar?.toString()"
+          :name="user.username"
+          :user-turn="viewType === UserViewType.USERTURN"
+          :class="[
                     (viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) 
                         ? users.length === 3 ? 'w-1/3' 
                         : users.length === 2 ? 'w-1/2' 
                         : 'w-full'
                         : ''
                 ]"
-                :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) 
+          :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN)
                     ? users.length > 3 
                         ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } 
                         : {} 
                     : {}"
-            />
-            <HomeUsersUserBox v-if="users.length > 3" :class="['invisible', viewType === UserViewType.USERTURN ? 'h-1' : 'w-1']"/>
-        </div>
+      />
+      <HomeUsersUserBox
+          v-if="users.length > 3"
+          :class="['invisible', viewType === UserViewType.USERTURN ? 'h-1' : 'w-1']"/>
     </div>
+  </div>
 </template>
diff --git a/types/api/user.ts b/types/api/user.ts
deleted file mode 100644
index 7528a15..0000000
--- a/types/api/user.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface ProfileError {
-    message: string
-}
-
-export interface GetProfileParam {
-    userid: string
-}
-
-export interface GetProfileResponse {
-    user_id: number,
-    user_avatar: string | null,
-    username: string,
-    user_spotify_id: string,
-    spotify_visibility: boolean,
-}
-
-export interface UserInformation {
-    user_id: number,
-    user_avatar: string | null,
-    username: string, 
-}
\ No newline at end of file

From e6b8fb772bb25bcbe52a2c4a5b14eac12b374e06 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 9 Dec 2024 01:07:08 +0100
Subject: [PATCH 081/221] fix useUser always in loading state

---
 components/profile/ProfileInformation.vue |  1 -
 composables/useUser.ts                    | 26 +++++++++++------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 9254ce8..20f0386 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -6,7 +6,6 @@ const {user, loading, error, fetchUser} = useUser()
 onMounted(async () => {
   if (session.value) {
     await fetchUser()
-    console.log(user.value)
   }
 })
 
diff --git a/composables/useUser.ts b/composables/useUser.ts
index 7f997cb..d068454 100644
--- a/composables/useUser.ts
+++ b/composables/useUser.ts
@@ -1,23 +1,23 @@
 import type {GetUserResponse} from "@/types/api/users";
 
 export const useUser = () => {
-    const user = useState<GetUserResponse|null>('user', () => null)
+    const user = useState<GetUserResponse | null>('user', () => null)
     const loading = useState<boolean>('userLoading', () => false)
-    const error = useState<string|null>('userError', () => null)
+    const error = useState<string | null>('userError', () => null)
 
     const fetchUser = async () => {
-        // Only fetch if we don't have user data
-        if (!user.value) {
-            loading.value = true
-            error.value = null
-            try {
-                user.value = await useProfileInformation()
-            } catch (err) {
-                error.value = 'Failed to fetch user'
-                console.error(err)
-            } finally {
-                loading.value = false
+        try {
+            // Only set loading on initial fetch
+            if (!user.value) {
+                loading.value = true
             }
+
+            user.value = await useProfileInformation()
+        } catch (err) {
+            error.value = 'Failed to fetch user'
+            console.error(err)
+        } finally {
+            loading.value = false
         }
     }
 

From dd07a8967397a4ede4bf117f5342ce8dd0914f4f Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Mon, 9 Dec 2024 14:48:32 +0100
Subject: [PATCH 082/221] fixed sizing for long text

---
 components/playlists/PlaylistBox.vue  |  6 +--
 components/playlists/PlaylistView.vue | 60 +++++++++++++++++----------
 layouts/FooterView.vue                |  2 +-
 3 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 07360f2..cd9923e 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -15,7 +15,7 @@
 <template>
   <div
     :class="[
-      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block overflow-hidden'
+      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block w-20 md:w-24'
     ]"
   >
     <!-- Playlist Cover -->
@@ -29,7 +29,7 @@
     
     <!-- Horizontally Scrolling Text -->
     <div class="text-container">
-      <p :class="['text-center', props.name.length > 5 ? 'scrolling-text' : '']">{{ props.name }}</p>
+      <p :class="['text-center', props.name.length > 8 ? 'scrolling-text' : '']">{{ props.name }}</p>
     </div>
   </div>
 </template>
@@ -59,7 +59,7 @@
 
 .scrolling-text {
   display: inline-block;
-  animation: scrollText 10s linear infinite; /* Adjust speed with '10s' */
+  animation: scrollText 5s linear infinite; /* Adjust speed with '10s' */
   white-space: nowrap;
 }
 
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 2a64d3e..5bc991e 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -13,10 +13,10 @@ onMounted(async () => {
 
 async function getProfileInformation() {
     $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist')
-      .then((data) => {
-        playlists.value = [...data]
-        console.log(playlists.value[1])
-      });
+        .then((data) => {
+            playlists.value = [...data]
+            console.log(playlists.value[1])
+        });
 }
 
 // Computed Classes
@@ -33,25 +33,41 @@ const containerClasses = computed(() => {
         : 'flex gap-1 md:gap-3 mt-6 md:mt-9'
 );*/
 
+function addPlaylist() {
+    const newFriend = {
+        friend_username: "sfsdf",
+    }
+    playlists.value.push(newFriend)
+}
+
 </script>
 
 <template>
-    <div :class="[
-                    containerClasses,
-                ]"
-    >
-        <!-- Fixed Header -->
-        <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
-            <p> Genre</p>
-        </div>
-
-        <!-- Scrollable User Boxes -->
-        <div>
-            <PlaylistsPlaylistBox 
-                v-for="item in playlists" 
-                :key="item.id"
-                :name="item.name"
-                v-bind="item.cover ? { cover: item.cover } : {}"/>
-        </div>
+    <div :class="[containerClasses]">
+      <!-- Fixed Header -->
+      <div class="mb-1 text-xs md:text-base mt-2 pt-2">
+        <p>Genre</p>
+      </div>
+  
+      <!-- Scrollable Playlist Boxes with constrained height -->
+      <div class="overflow-y-auto h-[calc(100%-5rem)]"> <!-- Adjust height based on parent header -->
+        <PlaylistsPlaylistBox
+          v-for="item in playlists"
+          :key="item.id"
+          :name="item.name"
+          v-bind="item.cover ? { cover: item.cover } : {}"
+        />
+      </div>
+  
+      <!-- Add Playlist Button -->
+      <div class="mt-3">
+        <button
+          class="p-2 bg-blue-500 text-white rounded ml-2"
+          @click="addPlaylist"
+        >
+          Add Playlist
+        </button>
+      </div>
     </div>
-</template>
+  </template>
+  
diff --git a/layouts/FooterView.vue b/layouts/FooterView.vue
index 6381c9d..18f46f4 100644
--- a/layouts/FooterView.vue
+++ b/layouts/FooterView.vue
@@ -7,7 +7,7 @@
     <!-- Wrapper div für die Breiten-Kontrolle -->
     <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
       <!-- Content -->
-      <div class="flex-1 border rounded-3xl">
+      <div class="flex-1 border rounded-3xl p-3">
           <slot name="content"/>
       </div>
 

From e48408df0e1ffae26b1c8c58f764c22a46efb611 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 9 Dec 2024 18:47:33 +0100
Subject: [PATCH 083/221] minor changes. reduced complexity of UserView

---
 DB/users.sql                            | 22 +----------------
 components/UsersView.vue                | 33 +++++++++----------------
 components/home/Users/UserBox.vue       |  6 ++---
 pages/index.vue                         |  2 ++
 server/api/v1/user/friends/index.get.ts | 24 ++++++++++++++++--
 types/api/user.friends.ts               |  8 +++---
 types/api/users.ts                      |  4 +--
 7 files changed, 43 insertions(+), 56 deletions(-)

diff --git a/DB/users.sql b/DB/users.sql
index 12ee040..725f49b 100644
--- a/DB/users.sql
+++ b/DB/users.sql
@@ -16,24 +16,4 @@ ALTER TABLE users
     ADD CONSTRAINT valid_username check (username <> '' AND length(trim(username)) >= 4 AND
                                          username ~ '^[a-zA-Z0-9_]+$');
                                          
-CREATE INDEX idx_username ON users(username);
-
-CREATE OR REPLACE FUNCTION get_profile_information(userId UUID)
-    RETURNS RECORD
-AS
-$$
-DECLARE
-    result RECORD;
-BEGIN
-    SELECT u.id                 AS user_id,
-           u.avatar_url         AS user_avatar,
-           u.username           AS username,
-           u.spotify_id         AS user_spotify_id,
-           u.spotify_visibility AS spotify_visibility
-    INTO result
-    FROM users u
-    WHERE u.id = userId;
-
-    RETURN result;
-END;
-$$ LANGUAGE plpgsql;
\ No newline at end of file
+CREATE INDEX idx_username ON users(username);
\ No newline at end of file
diff --git a/components/UsersView.vue b/components/UsersView.vue
index 88898bf..d2ab1e3 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -15,6 +15,8 @@ const props = defineProps({
   }
 });
 
+const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
+
 // Computed Classes
 const containerClasses = computed(() => {
   const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
@@ -31,7 +33,7 @@ const userBoxContainerClasses = computed(() =>
 
 
 function isGetFriendsResponse(user: GetFriendsResponse | GetUserResponse): user is GetFriendsResponse {
-  return 'friend_id' in user && 'friend_username' in user && 'friend_spotify_id' in user;
+  return 'friend_id' in user;
 }
 
 function isUserInformation(user: GetFriendsResponse | GetUserResponse): user is GetUserResponse {
@@ -39,25 +41,12 @@ function isUserInformation(user: GetFriendsResponse | GetUserResponse): user is
 }
 
 // Map users conditionally depending on their type
-const mappedUsers = computed(() => {
+const mappedUsers: Array<GetUserResponse> = computed(() => {
   return props.users.map(user => {
     if (isGetFriendsResponse(user)) {
-      return {
-        userId: user.friend_id,
-        username: user.friend_username,
-        userAvatar: user.friend_avatar,
-        spotifyId: user.friend_spotify_id,
-        status: user.status,
-        requestType: user.request_type,
-        createdAt: user.created_at,
-        updatedAt: user.updated_at,
-      };
+      return user.user;
     } else if (isUserInformation(user)) {
-      return {
-        userId: user.id,
-        username: user.username,
-        userAvatar: user.avatar_url,
-      };
+      return user;
     }
     return {};
   });
@@ -86,12 +75,13 @@ const mappedUsers = computed(() => {
 
     <!-- Scrollable User Boxes -->
     <div
+        v-if="users.length != 0"
         :class="userBoxContainerClasses"
     >
       <HomeUsersUserBox
           v-for="user in mappedUsers"
-          :key="user.userId"
-          :profile-picture="user.userAvatar?.toString()"
+          :key="user.id"
+          :profile-picture="user?.avatar_url ? user.avatar_url : default_avatar"
           :name="user.username"
           :user-turn="viewType === UserViewType.USERTURN"
           :class="[
@@ -107,9 +97,8 @@ const mappedUsers = computed(() => {
                         : {} 
                     : {}"
       />
-      <HomeUsersUserBox
-          v-if="users.length > 3"
-          :class="['invisible', viewType === UserViewType.USERTURN ? 'h-1' : 'w-1']"/>
+      <!-- Placeholder for scrolling -->
+      <div v-if="users.length > 3" class="px-1 py-4"/>
     </div>
   </div>
 </template>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index e6e8a63..2c8438d 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -33,13 +33,11 @@
           props.userTurn ? 'mr-3' : 'mb-0'
         ]"
         :src="props.profilePicture.toString()"
-        :alt="name"
+        :alt="props.name"
       />
       
       <!-- User Name -->
-      <p class="text-white text-sm sm:text-base md:text-lg">
-        {{ props.name }}
-      </p>
+      <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name"/>
       
       <!-- Play Button -->
       <button
diff --git a/pages/index.vue b/pages/index.vue
index 54b798f..99296ea 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,6 +2,8 @@
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
 import { UserViewType } from "@/types/components/users.view"
 
+useUser().fetchUser(); // loading user state just in case
+
 </script>
 
 <template>
diff --git a/server/api/v1/user/friends/index.get.ts b/server/api/v1/user/friends/index.get.ts
index 3e884ed..4a9adbb 100644
--- a/server/api/v1/user/friends/index.get.ts
+++ b/server/api/v1/user/friends/index.get.ts
@@ -27,7 +27,7 @@ export default defineEventHandler(async (event) => {
         return {error: error.message};
     }
 
-    if(data === null) return [];
+    if (data === null) return [];
 
     // Hide spotify id if not visible
     // Yes this works even when the IDE marks it as an error
@@ -37,5 +37,25 @@ export default defineEventHandler(async (event) => {
         }
     });
 
-    return data;
+    const friends = data.map((friendship: GetFriendsResponse) => {
+        return {
+            friendship_id: friendship.friendship_id,
+            friend_id: friendship.friend_id,
+            created_at: friendship.created_at,
+            updated_at: friendship.updated_at,
+            status: friendship.status,
+            request_type: friendship.request_type,
+            user: {
+                id: friendship.friend_id,
+                avatar_url: friendship.friend_avatar,
+                username: friendship.friend_username,
+                spotify_id: friendship.friend_spotify_visibility ? friendship.friend_spotify_id : undefined,
+                spotify_visibility: friendship.friend_spotify_visibility,
+                daily_streak: undefined,
+                daily_streak_updated_at: undefined
+            }
+        }
+    });
+
+    return friends;
 });
\ No newline at end of file
diff --git a/types/api/user.friends.ts b/types/api/user.friends.ts
index 06c54da..d64cfda 100644
--- a/types/api/user.friends.ts
+++ b/types/api/user.friends.ts
@@ -1,5 +1,6 @@
 // ----- Internal Types -----
 import type * as url from "node:url";
+import type {GetUserResponse} from "@/types/api/users";
 export interface FriendError {
     message: string
 }
@@ -21,14 +22,11 @@ export interface FriendActionParam {
 export interface GetFriendsResponse {
     friendship_id: number,
     friend_id: string,
-    friend_username: string,
-    friend_avatar: url.URL | null,
-    friend_spotify_id?: string,
-    friend_spotify_visibility: boolean,
     created_at: string
     updated_at: string
     status: FriendshipStatus,
-    request_type: FriendshipType
+    request_type: FriendshipType,
+    user: GetUserResponse
 }
 
 export enum FriendshipAction {
diff --git a/types/api/users.ts b/types/api/users.ts
index abffbcb..00f0041 100644
--- a/types/api/users.ts
+++ b/types/api/users.ts
@@ -4,6 +4,6 @@ export interface GetUserResponse {
     username: string,
     spotify_id?: string,
     spotify_visibility: boolean,
-    daily_streak: number,
-    daily_streak_updated_at: string
+    daily_streak?: number,
+    daily_streak_updated_at?: string
 }
\ No newline at end of file

From 4f9a03b23a0ac4e2490d8f9edb573d54eced293d Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 08:45:48 +0100
Subject: [PATCH 084/221] resized PlaylistsBoxes and added 'Add Playlists'
 button

---
 components/playlists/PlaylistBox.vue  | 50 +++++++++++----------------
 components/playlists/PlaylistView.vue | 22 +++---------
 2 files changed, 25 insertions(+), 47 deletions(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index cd9923e..21b836c 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -7,7 +7,12 @@
     },
     name: {
         type: String,
-        default: 'Playlist'
+        default: 'Playlist',
+        required: true
+    },
+    controlElement: {
+      type: String,
+      default: null
     }
     });
 </script>
@@ -15,58 +20,43 @@
 <template>
   <div
     :class="[
-      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block w-20 md:w-24'
+      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block w-24 md:w-28'
     ]"
   >
     <!-- Playlist Cover -->
-    <NuxtImg
+    <div class="flex flex-col items-center justify-center">
+    <Icon
+      v-if="controlElement"  :name="props.controlElement" :class="[ 
+        'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl text-white'
+      ]"/>
+    <NuxtImg 
+      v-else
       :class="[ 
-        'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl cover-image'
+        'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl'
       ]"
       :src="props.cover.toString()"
       :alt="props.name"
     />
+  </div>
     
     <!-- Horizontally Scrolling Text -->
-    <div class="text-container">
-      <p :class="['text-center', props.name.length > 8 ? 'scrolling-text' : '']">{{ props.name }}</p>
+    <div class="overflow-hidden">
+      <p :class="['text-center text-sm md:text-base', props.name.length > 12 ? 'scrolling-text' : '']">{{ props.name }}</p>
     </div>
   </div>
 </template>
 
 <style scoped>
-.playlist-container {
-  max-width: 150px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-}
-
-.cover-image {
-  max-width: 100%;
-  display: block;
-}
-
-.text-container {
-  overflow: hidden;
-  white-space: nowrap; 
-  position: relative;
-  width: 100%;
-}
-
 .scrolling-text {
   display: inline-block;
-  animation: scrollText 5s linear infinite; /* Adjust speed with '10s' */
+  animation: scrollText 5s linear infinite;
   white-space: nowrap;
 }
 
 /* Scroll animation keyframe */
 @keyframes scrollText {
   0% {
-    transform: translateX(0%); /* Start outside the box */
+    transform: translateX(0%); /* Start at beginning */
   }
   100% {
     transform: translateX(-100%); /* Scroll completely to the left */
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 5bc991e..a9d2ea1 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type GetPlaylistResponse } from "@/types/api/playlists"
+import type { GetPlaylistResponse } from "@/types/api/playlists"
 
 const playlists = ref()
 
@@ -7,31 +7,23 @@ const session = useSupabaseSession()
 
 onMounted(async () => {
     if (session.value) {
-        await getProfileInformation()
+        await getPlaylists()
     }
 })
 
-async function getProfileInformation() {
+async function getPlaylists() {
     $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist')
         .then((data) => {
             playlists.value = [...data]
-            console.log(playlists.value[1])
         });
 }
 
 // Computed Classes
 const containerClasses = computed(() => {
     const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
-    //if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
-    //if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS) return `${baseClasses} overflow-y-hidden`;
     return `${baseClasses}`;
 });
 
-/*const userBoxContainerClasses = computed(() =>
-   props.viewType === UserViewType.USERTURN
-        ? 'flex flex-col space-y-1 md:space-y-3 h-full overflow-y-auto'
-        : 'flex gap-1 md:gap-3 mt-6 md:mt-9'
-);*/
 
 function addPlaylist() {
     const newFriend = {
@@ -57,17 +49,13 @@ function addPlaylist() {
           :name="item.name"
           v-bind="item.cover ? { cover: item.cover } : {}"
         />
-      </div>
-  
-      <!-- Add Playlist Button -->
-      <div class="mt-3">
         <button
-          class="p-2 bg-blue-500 text-white rounded ml-2"
           @click="addPlaylist"
         >
-          Add Playlist
+          <PlaylistsPlaylistBox name="Add Playlist" control-element="mdi:plus"/>
         </button>
       </div>
+
     </div>
   </template>
   

From 1f80eb5eab09006b571a08d04b943b21d99124e9 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 09:17:59 +0100
Subject: [PATCH 085/221] replaced svg with mdi

---
 components/home/Users/UserBox.vue | 6 +-----
 public/icons/playButton.svg       | 7 -------
 2 files changed, 1 insertion(+), 12 deletions(-)
 delete mode 100644 public/icons/playButton.svg

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 2c8438d..c9ed55a 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -45,11 +45,7 @@
         class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5"
         @click="console.log(props.name)"
       >
-        <NuxtImg
-          src="icons/playButton.svg"
-          alt="Play"
-          class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14"
-        />
+      <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white"/>
       </button>
     </div>
   </template>
diff --git a/public/icons/playButton.svg b/public/icons/playButton.svg
deleted file mode 100644
index 2763488..0000000
--- a/public/icons/playButton.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-19.24 -19.24 519.48 519.48" xml:space="preserve" stroke="#000000" stroke-width="12.025">
-
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
<g id="SVGRepo_iconCarrier"> <g> <g> <path d="M410.6,70.4C365.1,25,304.7,0,240.5,0S115.9,25,70.4,70.4C25,115.9,0,176.3,0,240.5s25,124.6,70.4,170.1 C115.8,456,176.2,481,240.5,481s124.6-25,170.1-70.4C456,365.2,481,304.8,481,240.5S456,115.9,410.6,70.4z M240.5,454 C122.8,454,27,358.2,27,240.5S122.8,27,240.5,27S454,122.8,454,240.5S358.2,454,240.5,454z"/> <path d="M349.2,229.1l-152.6-97.9c-4.2-2.7-9.4-2.9-13.8-0.5c-4.3,2.4-7,6.9-7,11.8v195.7c0,4.9,2.7,9.5,7,11.8 c2,1.1,4.3,1.7,6.5,1.7c2.5,0,5.1-0.7,7.3-2.1l152.6-97.9c3.9-2.5,6.2-6.8,6.2-11.4S353,231.6,349.2,229.1z M202.8,313.7V167.3 l114.1,73.2L202.8,313.7z"/> </g> </g> </g>
-
</svg>
\ No newline at end of file

From 949c17be061e843c399aec7c8ffe4cc2c74c939d Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 09:18:34 +0100
Subject: [PATCH 086/221] formatted time string, fits into smaller div when
 using iPhone SE

---
 components/profile/ProfileInformation.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 20f0386..bbab124 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -10,6 +10,12 @@ onMounted(async () => {
 })
 
 const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
+
+const formatDate = (dateString : string) => {
+  const options = { year: "numeric", month: "short", day: "numeric" };
+  const formattedDate = new Intl.DateTimeFormat('en-US', options).format(new Date(dateString));
+  return formattedDate.replace(',', '');
+};
 </script>
 
 <template>
@@ -22,10 +28,10 @@ const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970
       </div>
 
       <div class="grid grid-cols-2 gap-4">
-        <div class="bg-gray-200 h-8 rounded-3xl px-3">Games played</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-3">Streak: {{ user?.daily_streak }}</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-3">Spotify {{user?.spotify_visibility ? 'public' : 'private'}}</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-3">Joined {{ new Date(session?.user.created_at).toDateString() }}</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Games played</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Streak: {{ user?.daily_streak }}</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Spotify: {{user?.spotify_visibility ? 'public' : 'private'}}</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Joined: {{ formatDate(session?.user.created_at) }}</div>
       </div>
     </div>
   </div>

From 0ab2ce5423d3d5632026a6b64d71d57811da52ac Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 10 Dec 2024 10:49:49 +0100
Subject: [PATCH 087/221] feat(game): Add get games endpoint

---
 DB/game.sql                        | 122 +++++++++++++++++++++---
 server/api/v1/game/index.get.ts    |  30 ++++++
 server/utils/mapper/game-mapper.ts | 145 +++++++++++++++++++++++++++++
 types/api/game.ts                  |  22 ++++-
 types/api/users.ts                 |   7 +-
 5 files changed, 309 insertions(+), 17 deletions(-)
 create mode 100644 server/api/v1/game/index.get.ts
 create mode 100644 server/utils/mapper/game-mapper.ts

diff --git a/DB/game.sql b/DB/game.sql
index f30114a..ec34e92 100644
--- a/DB/game.sql
+++ b/DB/game.sql
@@ -97,12 +97,18 @@ CREATE OR REPLACE FUNCTION init_game(
     playlist_id_input TEXT,
     player_ids UUID[],
     song_data game_song_input[]
-) RETURNS TABLE(game_id INTEGER, created_at TIMESTAMP WITH TIME ZONE) AS
+)
+    RETURNS TABLE
+            (
+                game_id    INTEGER,
+                created_at TIMESTAMP WITH TIME ZONE
+            )
+AS
 $$
 DECLARE
-    new_game_id INTEGER;
+    new_game_id    INTEGER;
     new_created_at TIMESTAMP WITH TIME ZONE;
-    player_id   UUID;
+    player_id      UUID;
 BEGIN
     -- Create game
     INSERT INTO games (playlist_id, status)
@@ -118,7 +124,8 @@ BEGIN
 
     UPDATE game_players
     SET is_creator = true
-    WHERE game_players.game_id = new_game_id AND game_players.user_id = player_ids[1];
+    WHERE game_players.game_id = new_game_id
+      AND game_players.user_id = player_ids[1];
 
     -- Insert songs (assuming the songs already exist in the songs table)
     INSERT INTO game_rounds (game_id,
@@ -127,17 +134,110 @@ BEGIN
                              wrong_option_1,
                              wrong_option_2,
                              wrong_option_3)
-    SELECT
-        new_game_id,
-        row_number() OVER (ORDER BY song.spotify_song_id),  -- Added ORDER BY
-        song.spotify_song_id,
-        song.wrong_option_1,
-        song.wrong_option_2,
-        song.wrong_option_3
+    SELECT new_game_id,
+           row_number() OVER (ORDER BY song.spotify_song_id), -- Added ORDER BY
+           song.spotify_song_id,
+           song.wrong_option_1,
+           song.wrong_option_2,
+           song.wrong_option_3
     FROM unnest(song_data) song;
 
     RETURN QUERY
         SELECT new_game_id AS game_id, new_created_at AS created_at;
 
 END;
+$$ LANGUAGE plpgsql;
+
+-- Get all games for a user
+CREATE OR REPLACE FUNCTION get_player_games(p_user_id UUID)
+    RETURNS TABLE
+            (
+                -- Game basic info
+                game_id                          INTEGER,
+                status                           game_status,
+                playlist_id                      TEXT,
+                playlist_cover                   TEXT,
+                playlist_name                    TEXT,
+                created_at                       TIMESTAMPTZ,
+                creator_id                       UUID,
+                -- Opponent info (renamed from player_ to opponent_)
+                opponent_user_id                 UUID,
+                opponent_avatar_url              TEXT,
+                opponent_username                TEXT,
+                opponent_spotify_id              TEXT,
+                opponent_spotify_visibility      BOOLEAN,
+                opponent_daily_streak            INTEGER,
+                opponent_daily_streak_updated_at TIMESTAMPTZ,
+                -- Round info
+                round_number                     INTEGER,
+                correct_song_id                  TEXT,
+                correct_song_name                TEXT,
+                correct_song_artist              TEXT,
+                correct_song_preview_url         TEXT,
+                wrong_song_1_id                  TEXT,
+                wrong_song_1_name                TEXT,
+                wrong_song_1_artist              TEXT,
+                wrong_song_1_preview_url         TEXT,
+                wrong_song_2_id                  TEXT,
+                wrong_song_2_name                TEXT,
+                wrong_song_2_artist              TEXT,
+                wrong_song_2_preview_url         TEXT,
+                wrong_song_3_id                  TEXT,
+                wrong_song_3_name                TEXT,
+                wrong_song_3_artist              TEXT,
+                wrong_song_3_preview_url         TEXT
+            )
+AS
+$$
+BEGIN
+    RETURN QUERY
+        SELECT g.game_id,
+               g.status,
+               g.playlist_id,
+               p.cover,
+               p.name,
+               g.created_at,
+               gp_creator.user_id,
+
+               -- Opponent information
+               u.id,
+               u.avatar_url,
+               u.username,
+               u.spotify_id,
+               u.spotify_visibility,
+               u.daily_streak,
+               u.daily_streak_updated_at,
+               -- Round information
+               gr.song_order,
+               cs.spotify_song_id,
+               cs.song_name,
+               cs.artist_name,
+               cs.preview_url,
+               w1.spotify_song_id,
+               w1.song_name,
+               w1.artist_name,
+               w1.preview_url,
+               w2.spotify_song_id,
+               w2.song_name,
+               w2.artist_name,
+               w2.preview_url,
+               w3.spotify_song_id,
+               w3.song_name,
+               w3.artist_name,
+               w3.preview_url
+        FROM games g
+                 -- Join to get current user's games
+                 JOIN game_players gp_current ON g.game_id = gp_current.game_id AND gp_current.user_id = p_user_id
+            -- Join to get opponent's info
+                 JOIN game_players gp_opponent ON g.game_id = gp_opponent.game_id AND gp_opponent.user_id != p_user_id
+                 LEFT JOIN game_players gp_creator ON g.game_id = gp_creator.game_id AND gp_creator.is_creator = true
+                 JOIN users u ON gp_opponent.user_id = u.id
+                 JOIN game_rounds gr ON g.game_id = gr.game_id
+                 JOIN songs cs ON gr.song_id = cs.spotify_song_id
+                 JOIN songs w1 ON gr.wrong_option_1 = w1.spotify_song_id
+                 JOIN songs w2 ON gr.wrong_option_2 = w2.spotify_song_id
+                 JOIN songs w3 ON gr.wrong_option_3 = w3.spotify_song_id
+                 JOIN playlists p ON g.playlist_id = p.id
+        ORDER BY g.created_at DESC, gr.song_order ASC;
+END;
 $$ LANGUAGE plpgsql;
\ No newline at end of file
diff --git a/server/api/v1/game/index.get.ts b/server/api/v1/game/index.get.ts
new file mode 100644
index 0000000..e482ad7
--- /dev/null
+++ b/server/api/v1/game/index.get.ts
@@ -0,0 +1,30 @@
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import {mapDatabaseRowsToGames} from "~/server/utils/mapper/game-mapper";
+import {GameStatus} from "~/types/api/game";
+
+export default defineEventHandler(async (event) => {
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Get user's games
+    const client = serverSupabaseServiceRole(event);
+    const {data, error} = await client.rpc('get_player_games', {p_user_id: user.id} as never).select();
+
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    const games = mapDatabaseRowsToGames(data);
+
+    return {
+        active: games.filter(game => game.status === GameStatus.PLAYING && game.creator_id !== user.id),
+        waiting: games.filter(game => game.status === GameStatus.PLAYING && game.creator_id === user.id),
+        past: games.filter(game => game.status === GameStatus.FINISHED)
+    }
+
+});
\ No newline at end of file
diff --git a/server/utils/mapper/game-mapper.ts b/server/utils/mapper/game-mapper.ts
new file mode 100644
index 0000000..390f06c
--- /dev/null
+++ b/server/utils/mapper/game-mapper.ts
@@ -0,0 +1,145 @@
+// Types from your original interfaces
+
+import type {Game, GameRound, Song} from "~/types/api/game";
+import type {GetUserResponse} from "~/types/api/users";
+import {GameStatus} from "~/types/api/game";
+
+interface DatabaseGameRow {
+    // Game basic info
+    game_id: number;
+    status: string;
+    playlist_id: string;
+    playlist_cover: string;
+    playlist_name: string;
+    created_at: string;
+    creator_id: string; // who created the game and thus already started playing
+
+    // Opponent info (the other player's data)
+    opponent_user_id: string;
+    opponent_avatar_url: string | null;
+    opponent_username: string;
+    opponent_spotify_id: string | null;
+    opponent_spotify_visibility: boolean;
+    opponent_daily_streak: number | null;
+    opponent_daily_streak_updated_at: string | null;
+
+    // Round info (the song being played)
+    round_number: number;         // From game_rounds table - the order of the song
+    correct_song_id: string;
+    correct_song_name: string;
+    correct_song_artist: string;
+    correct_song_preview_url: string | null;
+
+    // Wrong options (the 3 incorrect choices)
+    wrong_song_1_id: string;
+    wrong_song_1_name: string;
+    wrong_song_1_artist: string;
+    wrong_song_1_preview_url: string | null;
+
+    wrong_song_2_id: string;      // Similar to wrong_song_1
+    wrong_song_2_name: string;
+    wrong_song_2_artist: string;
+    wrong_song_2_preview_url: string | null;
+
+    wrong_song_3_id: string;      // Similar to wrong_song_1
+    wrong_song_3_name: string;
+    wrong_song_3_artist: string;
+    wrong_song_3_preview_url: string | null;
+}
+
+const createSongFromRow = (
+    id: string,
+    name: string,
+    artist: string,
+    previewUrl: string | null
+): Song => ({
+    id,
+    name,
+    artists: [{
+        id: 'placeholder', // You might want to adjust this based on your needs
+        name: artist
+    }],
+    preview_url: previewUrl,
+    is_playable: previewUrl !== null
+});
+
+
+export const mapDatabaseRowsToGame = (rows: DatabaseGameRow[]): Game => {
+    if (rows.length === 0) {
+        throw new Error('No rows provided to map to Game');
+    }
+
+    const firstRow = rows[0];
+
+    // Map opponent info
+    const opponent: GetUserResponse = {
+        id: firstRow.opponent_user_id,
+        avatar_url: firstRow.opponent_avatar_url ?? undefined,
+        username: firstRow.opponent_username,
+        spotify_id: firstRow.opponent_spotify_id ?? undefined,
+        spotify_visibility: firstRow.opponent_spotify_visibility,
+        daily_streak: firstRow.opponent_daily_streak ?? undefined,
+        daily_streak_updated_at: firstRow.opponent_daily_streak_updated_at ?? undefined
+    };
+
+    // Map rounds
+    const rounds: GameRound[] = rows.map(row => ({
+        round: row.round_number,
+        correct_song: createSongFromRow(
+            row.correct_song_id,
+            row.correct_song_name,
+            row.correct_song_artist,
+            row.correct_song_preview_url
+        ),
+        wrong_songs: [
+            createSongFromRow(
+                row.wrong_song_1_id,
+                row.wrong_song_1_name,
+                row.wrong_song_1_artist,
+                row.wrong_song_1_preview_url
+            ),
+            createSongFromRow(
+                row.wrong_song_2_id,
+                row.wrong_song_2_name,
+                row.wrong_song_2_artist,
+                row.wrong_song_2_preview_url
+            ),
+            createSongFromRow(
+                row.wrong_song_3_id,
+                row.wrong_song_3_name,
+                row.wrong_song_3_artist,
+                row.wrong_song_3_preview_url
+            )
+        ]
+    }));
+
+    // Construct final game object with players instead of player_ids
+    return {
+        game_id: firstRow.game_id,
+        status: firstRow.status as GameStatus,
+        creator_id: firstRow.creator_id,
+        playlist: {
+            id: firstRow.playlist_id,
+            name: firstRow.playlist_name,
+            cover: firstRow.playlist_cover
+        },
+        opponents: [opponent],
+        songs: rounds,
+        created_at: firstRow.created_at
+    };
+};
+
+export const mapDatabaseRowsToGames = (rows: DatabaseGameRow[]): Game[] => {
+    if (rows.length === 0) return [];
+
+    // Group rows by game_id
+    const gameRows = new Map<number, DatabaseGameRow[]>();
+    rows.forEach(row => {
+        const currentRows = gameRows.get(row.game_id) ?? [];
+        gameRows.set(row.game_id, [...currentRows, row]);
+    });
+
+    // Map each group of rows to a Game
+    return Array.from(gameRows.values())
+        .map(gameRows => mapDatabaseRowsToGame(gameRows));
+};
\ No newline at end of file
diff --git a/types/api/game.ts b/types/api/game.ts
index b858ffe..71539bd 100644
--- a/types/api/game.ts
+++ b/types/api/game.ts
@@ -1,3 +1,5 @@
+import type {GetUserResponse} from "@/types/api/users";
+
 export interface SpotifySong {
     track: Song;
 }
@@ -23,13 +25,24 @@ export interface GameRound {
 
 export interface Game {
     game_id: number;
-    playlist_id: string;
-    player_ids: string[];
+    status: GameStatus;
+    creator_id: string; // who created the game and thus already played its turn
+    playlist: {
+        id: string;
+        name: string;
+        cover?: string;
+    };
+    opponents: GetUserResponse[];
     songs: GameRound[];
     created_at: string;
     stats?: GameStats[];
 }
 
+export enum GameStatus {
+    PLAYING = 'playing',
+    FINISHED = 'finished'
+}
+
 export interface GameStats {
     user_id: string;
     score: number;
@@ -55,4 +68,9 @@ export interface GameInitResponse {
 export interface GameInitRequest {
     playlist_id: string;
     opponent_id: string;
+}
+
+export interface GetGameResponse {
+    active: Game[];
+    past: Game[];
 }
\ No newline at end of file
diff --git a/types/api/users.ts b/types/api/users.ts
index 44f7eda..7931ecd 100644
--- a/types/api/users.ts
+++ b/types/api/users.ts
@@ -1,11 +1,10 @@
-import type url from "node:url";
 
 export interface GetUserResponse {
     id: string,
-    avatar_url?: url.URL | null,
+    avatar_url?: string,
     username: string,
     spotify_id?: string,
     spotify_visibility: boolean,
-    daily_streak: number,
-    daily_streak_updated_at: string
+    daily_streak?: number,
+    daily_streak_updated_at?: string
 }
\ No newline at end of file

From 7ef65a55f25485056f238d62d5172e0e1212004f Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 10 Dec 2024 10:54:54 +0100
Subject: [PATCH 088/221] fix(game): remove ability to play against yourself

---
 server/api/v1/game/index.post.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
index e914b03..9da4e5b 100644
--- a/server/api/v1/game/index.post.ts
+++ b/server/api/v1/game/index.post.ts
@@ -70,6 +70,11 @@ export default defineEventHandler(async (event) => {
         return {error: 'unauthenticated'};
     }
 
+    if(result.data.opponent_id === user.id) {
+        setResponseStatus(event, 400);
+        return {error: 'You cannot play against yourself'};
+    }
+
     // Determine songs
     const token = await getSpotifyToken();
     const spotifySongs = await getSongsFromPlaylist(token, result.data.playlist_id);

From b581ce4e757212e9e18fc2ed2876d57bcf743959 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sun, 8 Dec 2024 23:55:38 +0100
Subject: [PATCH 089/221] feat(game): Added game init endpoint & logic

---
 DB/game.sql                      | 143 ++++++++++++++++++++++++++++
 DB/playlists.sql                 |   2 +-
 package-lock.json                | 155 ++++++++++++++++++++++++++++++-
 package.json                     |   2 +
 server/api/v1/game/index.post.ts | 125 +++++++++++++++++++++++++
 server/utils/spotify.ts          |  71 ++++++++++++++
 types/api/game.ts                |  58 ++++++++++++
 7 files changed, 551 insertions(+), 5 deletions(-)
 create mode 100644 DB/game.sql
 create mode 100644 server/api/v1/game/index.post.ts
 create mode 100644 types/api/game.ts

diff --git a/DB/game.sql b/DB/game.sql
new file mode 100644
index 0000000..f30114a
--- /dev/null
+++ b/DB/game.sql
@@ -0,0 +1,143 @@
+DO
+$$
+    BEGIN
+        IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'game_status') THEN
+            CREATE TYPE game_status AS ENUM ('playing', 'finished');
+        END IF;
+    END
+$$;
+
+
+DO
+$$
+    BEGIN
+        IF NOT EXISTS (SELECT 1 FROM pg_type WHERE typname = 'game_song_input') THEN
+            CREATE TYPE game_song_input AS
+            (
+                spotify_song_id TEXT,
+                wrong_option_1  TEXT,
+                wrong_option_2  TEXT,
+                wrong_option_3  TEXT
+            );
+        END IF;
+    END
+$$;
+
+-- Games
+CREATE TABLE IF NOT EXISTS games
+(
+    game_id     SERIAL PRIMARY KEY,
+    playlist_id TEXT                     NOT NULL REFERENCES playlists (id) ON DELETE CASCADE,
+    status      game_status              NOT NULL DEFAULT 'playing',
+    created_at  TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now()
+);
+
+-- Players of each game and their scores
+CREATE TABLE IF NOT EXISTS game_players
+(
+    game_id    INTEGER REFERENCES games (game_id) ON DELETE CASCADE,
+    user_id    UUID REFERENCES users (id),
+    score      INTEGER NOT NULL DEFAULT 0,
+    is_creator BOOLEAN NOT NULL DEFAULT false,
+    PRIMARY KEY (game_id, user_id)
+);
+-- Index for ensuring only one creator per game or none
+CREATE UNIQUE INDEX one_creator_per_game ON game_players (game_id) WHERE is_creator = true;
+-- Index for finding players in a game
+CREATE INDEX idx_game_players_player_id ON game_players (user_id);
+-- Index for finding high scores by user
+CREATE INDEX idx_game_players_score ON game_players (user_id, score DESC);
+
+-- Songs
+-- mostly for reference after the game is over since we always fetch songs from Spotify
+CREATE TABLE IF NOT EXISTS songs
+(
+    spotify_song_id TEXT PRIMARY KEY,
+    song_name       TEXT NOT NULL,
+    artist_name     TEXT NOT NULL,
+    preview_url     TEXT
+);
+
+-- Songs in each game
+CREATE TABLE IF NOT EXISTS game_rounds
+(
+    game_id        INTEGER REFERENCES games (game_id) ON DELETE CASCADE,
+    song_order     INTEGER NOT NULL,
+    song_id        TEXT    NOT NULL,
+    wrong_option_1 TEXT    NOT NULL,
+    wrong_option_2 TEXT    NOT NULL,
+    wrong_option_3 TEXT    NOT NULL,
+    PRIMARY KEY (game_id, song_order),
+
+    CONSTRAINT fk_spotify_song_id FOREIGN KEY (song_id) REFERENCES songs (spotify_song_id),
+    CONSTRAINT fk_wrong_option_1 FOREIGN KEY (wrong_option_1) REFERENCES songs (spotify_song_id),
+    CONSTRAINT fk_wrong_option_2 FOREIGN KEY (wrong_option_2) REFERENCES songs (spotify_song_id),
+    CONSTRAINT fk_wrong_option_3 FOREIGN KEY (wrong_option_3) REFERENCES songs (spotify_song_id)
+);
+
+-- Statistics for each song of each game for each user
+CREATE TABLE IF NOT EXISTS game_player_song_stats
+(
+    game_id         INTEGER REFERENCES games (game_id) ON DELETE CASCADE,
+    user_id         UUID REFERENCES users (id),
+    song_order      INTEGER NOT NULL,
+    time_to_guess   INTEGER,
+    correct_guess   BOOLEAN NOT NULL DEFAULT false,
+    guessed_song_id TEXT,
+    PRIMARY KEY (game_id, user_id, song_order),
+    FOREIGN KEY (game_id, song_order) REFERENCES game_rounds (game_id, song_order)
+);
+
+CREATE INDEX idx_game_player_song_stats_game_user ON game_player_song_stats (game_id, user_id);
+
+--- Functions
+
+-- Initialize a game with a playlist and players
+CREATE OR REPLACE FUNCTION init_game(
+    playlist_id_input TEXT,
+    player_ids UUID[],
+    song_data game_song_input[]
+) RETURNS TABLE(game_id INTEGER, created_at TIMESTAMP WITH TIME ZONE) AS
+$$
+DECLARE
+    new_game_id INTEGER;
+    new_created_at TIMESTAMP WITH TIME ZONE;
+    player_id   UUID;
+BEGIN
+    -- Create game
+    INSERT INTO games (playlist_id, status)
+    VALUES (playlist_id_input, 'playing')
+    RETURNING games.game_id, games.created_at INTO new_game_id, new_created_at;
+
+    -- Add all players from array
+    FOREACH player_id IN ARRAY player_ids
+        LOOP
+            INSERT INTO game_players (game_id, user_id, score)
+            VALUES (new_game_id, player_id, 0);
+        END LOOP;
+
+    UPDATE game_players
+    SET is_creator = true
+    WHERE game_players.game_id = new_game_id AND game_players.user_id = player_ids[1];
+
+    -- Insert songs (assuming the songs already exist in the songs table)
+    INSERT INTO game_rounds (game_id,
+                             song_order,
+                             song_id,
+                             wrong_option_1,
+                             wrong_option_2,
+                             wrong_option_3)
+    SELECT
+        new_game_id,
+        row_number() OVER (ORDER BY song.spotify_song_id),  -- Added ORDER BY
+        song.spotify_song_id,
+        song.wrong_option_1,
+        song.wrong_option_2,
+        song.wrong_option_3
+    FROM unnest(song_data) song;
+
+    RETURN QUERY
+        SELECT new_game_id AS game_id, new_created_at AS created_at;
+
+END;
+$$ LANGUAGE plpgsql;
\ No newline at end of file
diff --git a/DB/playlists.sql b/DB/playlists.sql
index 9c39e60..031f240 100644
--- a/DB/playlists.sql
+++ b/DB/playlists.sql
@@ -12,6 +12,6 @@ CREATE UNIQUE INDEX enabled_playlist_unique_name ON playlists (name) WHERE enabl
 create table categories
 (
     name         text not null,
-    "playlistId" text not null references playlists,
+    "playlistId" text not null references playlists (id) on delete cascade,
     primary key (name, "playlistId")
 );
diff --git a/package-lock.json b/package-lock.json
index 4a8d988..f874545 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@nuxt/image": "^1.8.1",
         "@nuxtjs/supabase": "v1.2.2",
         "@nuxtjs/tailwindcss": "^6.12.1",
+        "jsonpath": "^1.1.1",
         "nuxt": "^3.13.0",
         "vue": "latest",
         "vue-router": "latest",
@@ -20,6 +21,7 @@
       "devDependencies": {
         "@iconify-json/mdi": "^1.2.1",
         "@nuxt/eslint": "^0.5.7",
+        "@types/jsonpath": "^0.2.4",
         "@types/node": "^22.8.5",
         "eslint": "^9.11.1",
         "typedoc": "^0.26.10"
@@ -3903,6 +3905,13 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@types/jsonpath": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@types/jsonpath/-/jsonpath-0.2.4.tgz",
+      "integrity": "sha512-K3hxB8Blw0qgW6ExKgMbXQv2UPZBoE2GqLpVY+yr7nMD2Pq86lsuIzyAaiQ7eMqFL5B6di6pxSkogLJEyEHoGA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -6299,7 +6308,6 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/deepmerge": {
@@ -6721,6 +6729,110 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/escodegen": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/escodegen/node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/escodegen/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/optionator": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.6",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "word-wrap": "~1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/escodegen/node_modules/type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/eslint": {
       "version": "9.11.1",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.11.1.tgz",
@@ -7238,6 +7350,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.2.2.tgz",
+      "integrity": "sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -7287,7 +7411,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -7405,7 +7528,6 @@
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/fast-npm-meta": {
@@ -8690,6 +8812,17 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonpath": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/jsonpath/-/jsonpath-1.1.1.tgz",
+      "integrity": "sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==",
+      "license": "MIT",
+      "dependencies": {
+        "esprima": "1.2.2",
+        "static-eval": "2.0.2",
+        "underscore": "1.12.1"
+      }
+    },
     "node_modules/keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -13063,6 +13196,15 @@
       "integrity": "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==",
       "license": "MIT"
     },
+    "node_modules/static-eval": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.0.2.tgz",
+      "integrity": "sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==",
+      "license": "MIT",
+      "dependencies": {
+        "escodegen": "^1.8.1"
+      }
+    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -13945,6 +14087,12 @@
         "unplugin": "^1.3.1"
       }
     },
+    "node_modules/underscore": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
+      "integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==",
+      "license": "MIT"
+    },
     "node_modules/undici": {
       "version": "5.28.4",
       "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
@@ -15474,7 +15622,6 @@
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
diff --git a/package.json b/package.json
index d71c4d5..6374c74 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@nuxt/image": "^1.8.1",
     "@nuxtjs/supabase": "v1.2.2",
     "@nuxtjs/tailwindcss": "^6.12.1",
+    "jsonpath": "^1.1.1",
     "nuxt": "^3.13.0",
     "vue": "latest",
     "vue-router": "latest",
@@ -25,6 +26,7 @@
   "devDependencies": {
     "@iconify-json/mdi": "^1.2.1",
     "@nuxt/eslint": "^0.5.7",
+    "@types/jsonpath": "^0.2.4",
     "@types/node": "^22.8.5",
     "eslint": "^9.11.1",
     "typedoc": "^0.26.10"
diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
new file mode 100644
index 0000000..e914b03
--- /dev/null
+++ b/server/api/v1/game/index.post.ts
@@ -0,0 +1,125 @@
+import {z} from "zod";
+import {spotifyIDRegex} from "~/server/utils/data-validation";
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import {fetchPreviewUrl, getSongsFromPlaylist} from "~/server/utils/spotify";
+import type {GameRound, Song, SpotifySong} from "~/types/api/game";
+import type {SupabaseClient} from "@supabase/supabase-js";
+
+const GameInitSchema = z.object({
+    playlist_id: z.string().regex(spotifyIDRegex),
+    opponent_id: z.string().uuid()
+}).readonly()
+
+async function saveSongsToDatabase(client: SupabaseClient, songs: Song[]) {
+    const {error: songError} = await client
+        .from('songs')
+        .upsert(songs.map((song: Song) => ({
+            spotify_song_id: song.id,
+            song_name: song.name,
+            artist_name: song.artists[0].name, // Using first artist only
+            preview_url: song.preview_url      // Mostly null, spotify changed their API
+        })));
+
+    if (songError) {
+        throw new Error(songError.message);
+    }
+}
+
+async function createGameRounds(songs: Song[], rounds_to_play: number = 5): Promise<GameRound[]> {
+    const gameRounds: GameRound[] = [];
+    const shuffledSongs = [...songs].sort(() => Math.random() - 0.5);
+
+    for (let i = 0; i < rounds_to_play; i++) {
+        const selectedTrack = shuffledSongs.pop();
+        // Get preview url through parsing embed for selected track
+        selectedTrack!.preview_url = await fetchPreviewUrl(selectedTrack!.id);
+
+        // keep track of used IDs for this song option
+        const usedIds = new Set<string>([selectedTrack!.id]);
+        const getUniqueWrong = () => {
+            let wrongTrack;
+            do {
+                wrongTrack = shuffledSongs[Math.floor(Math.random() * shuffledSongs.length)];
+            } while (usedIds.has(wrongTrack.id));
+            usedIds.add(wrongTrack.id);
+            return wrongTrack;
+        };
+
+        gameRounds.push({
+            round: i + 1, // 1-indexed since postgres functions are also 1-indexed
+            correct_song: selectedTrack!,
+            wrong_songs: [getUniqueWrong(), getUniqueWrong(), getUniqueWrong()]
+        });
+    }
+
+    return gameRounds;
+}
+
+export default defineEventHandler(async (event) => {
+    // validate post-request body
+    const result = await readValidatedBody(event, body => GameInitSchema.safeParse(body))
+    if (!result.success) {
+        setResponseStatus(event, 400);
+        return {error: result.error.issues};
+    }
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Determine songs
+    const token = await getSpotifyToken();
+    const spotifySongs = await getSongsFromPlaylist(token, result.data.playlist_id);
+
+    if (!spotifySongs) {
+        setResponseStatus(event, 500);
+        return {error: 'Failed to get songs from playlist'};
+    }
+
+    if (spotifySongs.total < 8) {
+        setResponseStatus(event, 400);
+        return {error: 'Insufficient tracks in playlist. Minimum 8 tracks required'};
+    }
+
+    const songs = spotifySongs.items.map((item: SpotifySong) => item.track).filter((track: Song) => track.is_playable);
+    const client = serverSupabaseServiceRole(event);
+
+    try {
+        await saveSongsToDatabase(client, songs);
+        const gameRounds = await createGameRounds(songs);
+
+        const init_game_params = {
+            playlist_id_input: result.data.playlist_id,
+            player_ids: [user.id, result.data.opponent_id],
+            song_data: gameRounds.map(round => ({
+                spotify_song_id: round.correct_song.id,
+                wrong_option_1: round.wrong_songs[0].id,
+                wrong_option_2: round.wrong_songs[1].id,
+                wrong_option_3: round.wrong_songs[2].id
+            }))
+        }
+
+        const {error} = await client.rpc('init_game', init_game_params as never).select().single();
+
+        if (error) {
+            setResponseStatus(event, 500);
+            return {error: error.message};
+        }
+
+        const response = {
+            rounds: gameRounds.map((round) => ({
+                round: round.round,
+                preview_url: round.correct_song.preview_url!,
+                options: [round.correct_song, ...round.wrong_songs].sort(() => Math.random() - 0.5)
+            }))
+        }
+
+        return response;
+    } catch (error) {
+        setResponseStatus(event, 500);
+        return {error: error instanceof Error ? error.message : 'An unknown error occurred'};
+    }
+});
\ No newline at end of file
diff --git a/server/utils/spotify.ts b/server/utils/spotify.ts
index 1f07a71..c51b0b1 100644
--- a/server/utils/spotify.ts
+++ b/server/utils/spotify.ts
@@ -1,3 +1,5 @@
+import jsonpath from 'jsonpath';
+
 let spotifyToken: string | null = null
 let tokenExpiry: number = 0
 
@@ -44,4 +46,73 @@ export async function getPlaylistCover(token: string | null, playlistId: string)
     const data = await res.json()
     // console.log(data)
     return data[0].url;
+}
+
+export async function getSongsFromPlaylist(token: string | null, playlistId: string) {
+    if (!token) return [];
+
+    const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/tracks?market=DE&fields=total%2Citems%28track%28artists%2Cname%2Cis_playable%2Cid%2Cpreview_url%29%29`, {
+        headers: {'Authorization': `Bearer ${token}`}
+    })
+    const data = await res.json()
+    // console.log(data)
+
+    return data;
+}
+
+// Workaround to get the preview URL from the Spotify embed page
+// based on https://stackoverflow.com/a/79238027/12822225
+export async function fetchPreviewUrl(trackId: string): Promise<string | null> {
+    try {
+        const embedUrl = `https://open.spotify.com/embed/track/${trackId}`;
+
+        const response = await fetch(embedUrl, {
+            headers: {
+                'Accept': 'text/html',
+                'User-Agent': 'Mozilla/5.0 (compatible; Nuxt/3.0; +https://nuxtjs.org)'
+            }
+        });
+
+        if (!response.ok) {
+            console.error(`Failed to fetch embed page: ${response.status}`);
+            return null;
+        }
+
+        const html = await response.text();
+
+        // Extract all script tags content
+        const scriptRegex = /<script[^>]*>([\s\S]*?)<\/script>/gi;
+        const scripts: string[] = [];
+        let match;
+
+        while ((match = scriptRegex.exec(html)) !== null) {
+            if (match[1].trim()) {
+                scripts.push(match[1].trim());
+            }
+        }
+
+        // Search through each script tag for the preview URL
+        for (const scriptContent of scripts) {
+            try {
+                // Try to parse the script content as JSON
+                // Some script tags might contain non-JSON content, so we need to handle that
+                const jsonData = JSON.parse(scriptContent);
+
+                // Use JsonPath to find the audioPreview URL
+                const query = '$..[?(@.audioPreview)].audioPreview.url';
+                const result = jsonpath.query(jsonData, query);
+
+                if (result && result.length > 0) {
+                    return result[0] as string;
+                }
+            } catch (e) {
+                // Skip this script tag if it's not valid JSON
+            }
+        }
+
+        return null;
+    } catch (error) {
+        console.error('Error fetching preview URL:', error);
+        return null;
+    }
 }
\ No newline at end of file
diff --git a/types/api/game.ts b/types/api/game.ts
new file mode 100644
index 0000000..b858ffe
--- /dev/null
+++ b/types/api/game.ts
@@ -0,0 +1,58 @@
+export interface SpotifySong {
+    track: Song;
+}
+
+export interface Song {
+    id: string;
+    name: string;
+    artists: SongArtist[];
+    preview_url?: string | null;
+    is_playable: boolean;
+}
+
+interface SongArtist {
+    id: string;
+    name: string;
+}
+
+export interface GameRound {
+    round: number;
+    correct_song: Song;
+    wrong_songs: Song[];
+}
+
+export interface Game {
+    game_id: number;
+    playlist_id: string;
+    player_ids: string[];
+    songs: GameRound[];
+    created_at: string;
+    stats?: GameStats[];
+}
+
+export interface GameStats {
+    user_id: string;
+    score: number;
+    guesses: GameStatsContent[];
+}
+
+export interface GameStatsContent {
+    song_order: number;
+    song: Song;
+    time_to_guess: number;
+    correct_guess: boolean;
+}
+
+export interface GameInitResponse {
+    rounds: {
+        round: number;
+        preview_url: string;
+        options: Song[];
+    }
+}
+
+// Requests
+export interface GameInitRequest {
+    playlist_id: string;
+    opponent_id: string;
+}
\ No newline at end of file

From c32e11d537fa92cedf60e0d4c1070446ea89aa2e Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 10 Dec 2024 10:49:49 +0100
Subject: [PATCH 090/221] feat(game): Add get games endpoint

---
 DB/game.sql                        | 122 +++++++++++++++++++++---
 server/api/v1/game/index.get.ts    |  30 ++++++
 server/utils/mapper/game-mapper.ts | 145 +++++++++++++++++++++++++++++
 types/api/game.ts                  |  22 ++++-
 4 files changed, 306 insertions(+), 13 deletions(-)
 create mode 100644 server/api/v1/game/index.get.ts
 create mode 100644 server/utils/mapper/game-mapper.ts

diff --git a/DB/game.sql b/DB/game.sql
index f30114a..ec34e92 100644
--- a/DB/game.sql
+++ b/DB/game.sql
@@ -97,12 +97,18 @@ CREATE OR REPLACE FUNCTION init_game(
     playlist_id_input TEXT,
     player_ids UUID[],
     song_data game_song_input[]
-) RETURNS TABLE(game_id INTEGER, created_at TIMESTAMP WITH TIME ZONE) AS
+)
+    RETURNS TABLE
+            (
+                game_id    INTEGER,
+                created_at TIMESTAMP WITH TIME ZONE
+            )
+AS
 $$
 DECLARE
-    new_game_id INTEGER;
+    new_game_id    INTEGER;
     new_created_at TIMESTAMP WITH TIME ZONE;
-    player_id   UUID;
+    player_id      UUID;
 BEGIN
     -- Create game
     INSERT INTO games (playlist_id, status)
@@ -118,7 +124,8 @@ BEGIN
 
     UPDATE game_players
     SET is_creator = true
-    WHERE game_players.game_id = new_game_id AND game_players.user_id = player_ids[1];
+    WHERE game_players.game_id = new_game_id
+      AND game_players.user_id = player_ids[1];
 
     -- Insert songs (assuming the songs already exist in the songs table)
     INSERT INTO game_rounds (game_id,
@@ -127,17 +134,110 @@ BEGIN
                              wrong_option_1,
                              wrong_option_2,
                              wrong_option_3)
-    SELECT
-        new_game_id,
-        row_number() OVER (ORDER BY song.spotify_song_id),  -- Added ORDER BY
-        song.spotify_song_id,
-        song.wrong_option_1,
-        song.wrong_option_2,
-        song.wrong_option_3
+    SELECT new_game_id,
+           row_number() OVER (ORDER BY song.spotify_song_id), -- Added ORDER BY
+           song.spotify_song_id,
+           song.wrong_option_1,
+           song.wrong_option_2,
+           song.wrong_option_3
     FROM unnest(song_data) song;
 
     RETURN QUERY
         SELECT new_game_id AS game_id, new_created_at AS created_at;
 
 END;
+$$ LANGUAGE plpgsql;
+
+-- Get all games for a user
+CREATE OR REPLACE FUNCTION get_player_games(p_user_id UUID)
+    RETURNS TABLE
+            (
+                -- Game basic info
+                game_id                          INTEGER,
+                status                           game_status,
+                playlist_id                      TEXT,
+                playlist_cover                   TEXT,
+                playlist_name                    TEXT,
+                created_at                       TIMESTAMPTZ,
+                creator_id                       UUID,
+                -- Opponent info (renamed from player_ to opponent_)
+                opponent_user_id                 UUID,
+                opponent_avatar_url              TEXT,
+                opponent_username                TEXT,
+                opponent_spotify_id              TEXT,
+                opponent_spotify_visibility      BOOLEAN,
+                opponent_daily_streak            INTEGER,
+                opponent_daily_streak_updated_at TIMESTAMPTZ,
+                -- Round info
+                round_number                     INTEGER,
+                correct_song_id                  TEXT,
+                correct_song_name                TEXT,
+                correct_song_artist              TEXT,
+                correct_song_preview_url         TEXT,
+                wrong_song_1_id                  TEXT,
+                wrong_song_1_name                TEXT,
+                wrong_song_1_artist              TEXT,
+                wrong_song_1_preview_url         TEXT,
+                wrong_song_2_id                  TEXT,
+                wrong_song_2_name                TEXT,
+                wrong_song_2_artist              TEXT,
+                wrong_song_2_preview_url         TEXT,
+                wrong_song_3_id                  TEXT,
+                wrong_song_3_name                TEXT,
+                wrong_song_3_artist              TEXT,
+                wrong_song_3_preview_url         TEXT
+            )
+AS
+$$
+BEGIN
+    RETURN QUERY
+        SELECT g.game_id,
+               g.status,
+               g.playlist_id,
+               p.cover,
+               p.name,
+               g.created_at,
+               gp_creator.user_id,
+
+               -- Opponent information
+               u.id,
+               u.avatar_url,
+               u.username,
+               u.spotify_id,
+               u.spotify_visibility,
+               u.daily_streak,
+               u.daily_streak_updated_at,
+               -- Round information
+               gr.song_order,
+               cs.spotify_song_id,
+               cs.song_name,
+               cs.artist_name,
+               cs.preview_url,
+               w1.spotify_song_id,
+               w1.song_name,
+               w1.artist_name,
+               w1.preview_url,
+               w2.spotify_song_id,
+               w2.song_name,
+               w2.artist_name,
+               w2.preview_url,
+               w3.spotify_song_id,
+               w3.song_name,
+               w3.artist_name,
+               w3.preview_url
+        FROM games g
+                 -- Join to get current user's games
+                 JOIN game_players gp_current ON g.game_id = gp_current.game_id AND gp_current.user_id = p_user_id
+            -- Join to get opponent's info
+                 JOIN game_players gp_opponent ON g.game_id = gp_opponent.game_id AND gp_opponent.user_id != p_user_id
+                 LEFT JOIN game_players gp_creator ON g.game_id = gp_creator.game_id AND gp_creator.is_creator = true
+                 JOIN users u ON gp_opponent.user_id = u.id
+                 JOIN game_rounds gr ON g.game_id = gr.game_id
+                 JOIN songs cs ON gr.song_id = cs.spotify_song_id
+                 JOIN songs w1 ON gr.wrong_option_1 = w1.spotify_song_id
+                 JOIN songs w2 ON gr.wrong_option_2 = w2.spotify_song_id
+                 JOIN songs w3 ON gr.wrong_option_3 = w3.spotify_song_id
+                 JOIN playlists p ON g.playlist_id = p.id
+        ORDER BY g.created_at DESC, gr.song_order ASC;
+END;
 $$ LANGUAGE plpgsql;
\ No newline at end of file
diff --git a/server/api/v1/game/index.get.ts b/server/api/v1/game/index.get.ts
new file mode 100644
index 0000000..e482ad7
--- /dev/null
+++ b/server/api/v1/game/index.get.ts
@@ -0,0 +1,30 @@
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import {mapDatabaseRowsToGames} from "~/server/utils/mapper/game-mapper";
+import {GameStatus} from "~/types/api/game";
+
+export default defineEventHandler(async (event) => {
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Get user's games
+    const client = serverSupabaseServiceRole(event);
+    const {data, error} = await client.rpc('get_player_games', {p_user_id: user.id} as never).select();
+
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    const games = mapDatabaseRowsToGames(data);
+
+    return {
+        active: games.filter(game => game.status === GameStatus.PLAYING && game.creator_id !== user.id),
+        waiting: games.filter(game => game.status === GameStatus.PLAYING && game.creator_id === user.id),
+        past: games.filter(game => game.status === GameStatus.FINISHED)
+    }
+
+});
\ No newline at end of file
diff --git a/server/utils/mapper/game-mapper.ts b/server/utils/mapper/game-mapper.ts
new file mode 100644
index 0000000..390f06c
--- /dev/null
+++ b/server/utils/mapper/game-mapper.ts
@@ -0,0 +1,145 @@
+// Types from your original interfaces
+
+import type {Game, GameRound, Song} from "~/types/api/game";
+import type {GetUserResponse} from "~/types/api/users";
+import {GameStatus} from "~/types/api/game";
+
+interface DatabaseGameRow {
+    // Game basic info
+    game_id: number;
+    status: string;
+    playlist_id: string;
+    playlist_cover: string;
+    playlist_name: string;
+    created_at: string;
+    creator_id: string; // who created the game and thus already started playing
+
+    // Opponent info (the other player's data)
+    opponent_user_id: string;
+    opponent_avatar_url: string | null;
+    opponent_username: string;
+    opponent_spotify_id: string | null;
+    opponent_spotify_visibility: boolean;
+    opponent_daily_streak: number | null;
+    opponent_daily_streak_updated_at: string | null;
+
+    // Round info (the song being played)
+    round_number: number;         // From game_rounds table - the order of the song
+    correct_song_id: string;
+    correct_song_name: string;
+    correct_song_artist: string;
+    correct_song_preview_url: string | null;
+
+    // Wrong options (the 3 incorrect choices)
+    wrong_song_1_id: string;
+    wrong_song_1_name: string;
+    wrong_song_1_artist: string;
+    wrong_song_1_preview_url: string | null;
+
+    wrong_song_2_id: string;      // Similar to wrong_song_1
+    wrong_song_2_name: string;
+    wrong_song_2_artist: string;
+    wrong_song_2_preview_url: string | null;
+
+    wrong_song_3_id: string;      // Similar to wrong_song_1
+    wrong_song_3_name: string;
+    wrong_song_3_artist: string;
+    wrong_song_3_preview_url: string | null;
+}
+
+const createSongFromRow = (
+    id: string,
+    name: string,
+    artist: string,
+    previewUrl: string | null
+): Song => ({
+    id,
+    name,
+    artists: [{
+        id: 'placeholder', // You might want to adjust this based on your needs
+        name: artist
+    }],
+    preview_url: previewUrl,
+    is_playable: previewUrl !== null
+});
+
+
+export const mapDatabaseRowsToGame = (rows: DatabaseGameRow[]): Game => {
+    if (rows.length === 0) {
+        throw new Error('No rows provided to map to Game');
+    }
+
+    const firstRow = rows[0];
+
+    // Map opponent info
+    const opponent: GetUserResponse = {
+        id: firstRow.opponent_user_id,
+        avatar_url: firstRow.opponent_avatar_url ?? undefined,
+        username: firstRow.opponent_username,
+        spotify_id: firstRow.opponent_spotify_id ?? undefined,
+        spotify_visibility: firstRow.opponent_spotify_visibility,
+        daily_streak: firstRow.opponent_daily_streak ?? undefined,
+        daily_streak_updated_at: firstRow.opponent_daily_streak_updated_at ?? undefined
+    };
+
+    // Map rounds
+    const rounds: GameRound[] = rows.map(row => ({
+        round: row.round_number,
+        correct_song: createSongFromRow(
+            row.correct_song_id,
+            row.correct_song_name,
+            row.correct_song_artist,
+            row.correct_song_preview_url
+        ),
+        wrong_songs: [
+            createSongFromRow(
+                row.wrong_song_1_id,
+                row.wrong_song_1_name,
+                row.wrong_song_1_artist,
+                row.wrong_song_1_preview_url
+            ),
+            createSongFromRow(
+                row.wrong_song_2_id,
+                row.wrong_song_2_name,
+                row.wrong_song_2_artist,
+                row.wrong_song_2_preview_url
+            ),
+            createSongFromRow(
+                row.wrong_song_3_id,
+                row.wrong_song_3_name,
+                row.wrong_song_3_artist,
+                row.wrong_song_3_preview_url
+            )
+        ]
+    }));
+
+    // Construct final game object with players instead of player_ids
+    return {
+        game_id: firstRow.game_id,
+        status: firstRow.status as GameStatus,
+        creator_id: firstRow.creator_id,
+        playlist: {
+            id: firstRow.playlist_id,
+            name: firstRow.playlist_name,
+            cover: firstRow.playlist_cover
+        },
+        opponents: [opponent],
+        songs: rounds,
+        created_at: firstRow.created_at
+    };
+};
+
+export const mapDatabaseRowsToGames = (rows: DatabaseGameRow[]): Game[] => {
+    if (rows.length === 0) return [];
+
+    // Group rows by game_id
+    const gameRows = new Map<number, DatabaseGameRow[]>();
+    rows.forEach(row => {
+        const currentRows = gameRows.get(row.game_id) ?? [];
+        gameRows.set(row.game_id, [...currentRows, row]);
+    });
+
+    // Map each group of rows to a Game
+    return Array.from(gameRows.values())
+        .map(gameRows => mapDatabaseRowsToGame(gameRows));
+};
\ No newline at end of file
diff --git a/types/api/game.ts b/types/api/game.ts
index b858ffe..71539bd 100644
--- a/types/api/game.ts
+++ b/types/api/game.ts
@@ -1,3 +1,5 @@
+import type {GetUserResponse} from "@/types/api/users";
+
 export interface SpotifySong {
     track: Song;
 }
@@ -23,13 +25,24 @@ export interface GameRound {
 
 export interface Game {
     game_id: number;
-    playlist_id: string;
-    player_ids: string[];
+    status: GameStatus;
+    creator_id: string; // who created the game and thus already played its turn
+    playlist: {
+        id: string;
+        name: string;
+        cover?: string;
+    };
+    opponents: GetUserResponse[];
     songs: GameRound[];
     created_at: string;
     stats?: GameStats[];
 }
 
+export enum GameStatus {
+    PLAYING = 'playing',
+    FINISHED = 'finished'
+}
+
 export interface GameStats {
     user_id: string;
     score: number;
@@ -55,4 +68,9 @@ export interface GameInitResponse {
 export interface GameInitRequest {
     playlist_id: string;
     opponent_id: string;
+}
+
+export interface GetGameResponse {
+    active: Game[];
+    past: Game[];
 }
\ No newline at end of file

From 5ddeab36b34f20e7d0197cd579b988227ec3bb96 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 10 Dec 2024 10:54:54 +0100
Subject: [PATCH 091/221] fix(game): remove ability to play against yourself

---
 server/api/v1/game/index.post.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
index e914b03..9da4e5b 100644
--- a/server/api/v1/game/index.post.ts
+++ b/server/api/v1/game/index.post.ts
@@ -70,6 +70,11 @@ export default defineEventHandler(async (event) => {
         return {error: 'unauthenticated'};
     }
 
+    if(result.data.opponent_id === user.id) {
+        setResponseStatus(event, 400);
+        return {error: 'You cannot play against yourself'};
+    }
+
     // Determine songs
     const token = await getSpotifyToken();
     const spotifySongs = await getSongsFromPlaylist(token, result.data.playlist_id);

From 22c09e9d060eae401b0da066e524f3fc3064f25b Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 11:15:21 +0100
Subject: [PATCH 092/221] added levelbar

---
 layouts/HeaderFooterView.vue |  2 +-
 pages/index.vue              | 67 +++++++++++++++++++++++-------------
 2 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 9137d55..233ff0e 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -8,7 +8,7 @@
     <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
 
       <!-- Header -->
-      <div class="h-1/6 border rounded-b-3xl">
+      <div class="bg-yellow-500 h-1/6 border rounded-b-3xl">
         <div class="flex justify-around items-center h-full">
           <slot name="header" />
         </div>
diff --git a/pages/index.vue b/pages/index.vue
index 99296ea..b84dbc6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,78 +2,99 @@
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
 import { UserViewType } from "@/types/components/users.view"
 
+const { user } = useUser()
+
 useUser().fetchUser(); // loading user state just in case
 
+function setLevelbar(newValue: number) {
+  const levelbar = document.getElementById('levelbar')
+  if (levelbar) {
+    levelbar.style.width = newValue + "%"
+  }
+}
+
 </script>
 
 <template>
   <div class="bg-gradient-to-b from-indigo-500 to-purple-500">
     <HeaderFooterView>
       <template #header>
-        <div>
-          1A
-        </div>
-        <div>
-          2B
+        <div class="m-3 w-full flex items-center justify-center">
+          <Icon name="mdi:fire" class="text-red-600 text-4xl mr-2" />
+          <p class="text-xl font-bold">Streak: {{ user?.daily_streak }}</p>
         </div>
-        <div>
-          3C
+        <div class="m-3 w-full flex items-center justify-center">
+          <Icon name="mdi:star" class="text-red-600 text-5xl  mr-2" />
+          <div class="w-full bg-gray-700 rounded-full h-2.5">
+            <div id="levelbar" class="bg-red-600 h-2.5 rounded-full" style="width: 50%" />
+          </div>
         </div>
+
+
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
           <UsersView :view-type="UserViewType.USERTURN" class="h-3/6" :users="[
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
             },
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
             },
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
             },
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
             },
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
-            },            
-          ]"/>
+            },
+          ]" />
           <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6" :users="[
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
             },
-            { user_id: 2,
+            {
+              user_id: 2,
               user_avatar: null,
               username: 'Test2'
             },
-            { user_id: 3,
+            {
+              user_id: 3,
               user_avatar: null,
               username: 'Test3'
             },
-            { user_id: 4,
+            {
+              user_id: 4,
               user_avatar: null,
               username: 'Test4'
             },
-          ]"/>
-          <HomeControlsGameButtons class="h-1/6"/>
+          ]" />
+          <HomeControlsGameButtons class="h-1/6" />
         </div>
       </template>
       <template #footer>
         <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl">
-          <Icon name="mdi:album" class=""/>
+          <Icon name="mdi:album" class="" />
         </NuxtLink>
         <NuxtLink to="/" class="inline-flex items-center text-6xl rounded-full p-1.5">
-          <Icon name="mdi:home" class="text-white"/>
+          <Icon name="mdi:home" class="text-white" />
         </NuxtLink>
         <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl">
-          <Icon name="mdi:account-details" class=""/>
+          <Icon name="mdi:account-details" class="" />
         </NuxtLink>
       </template>
     </HeaderFooterView>

From a7f8cbab3f8217fe3825d9845c7ca001da79053a Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 10 Dec 2024 11:31:00 +0100
Subject: [PATCH 093/221] feat(game): Homepage fetch & display games from data

---
 components/UsersView.vue                    |  4 +-
 components/home/Controls/GameButtons.vue    |  2 +-
 composables/useGames.ts                     | 29 ++++++++++++
 pages/index.vue                             | 51 ++++-----------------
 server/api/v1/{game => games}/index.get.ts  |  0
 server/api/v1/{game => games}/index.post.ts |  0
 types/api/game.ts                           |  1 +
 7 files changed, 44 insertions(+), 43 deletions(-)
 create mode 100644 composables/useGames.ts
 rename server/api/v1/{game => games}/index.get.ts (100%)
 rename server/api/v1/{game => games}/index.post.ts (100%)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index d2ab1e3..2e268fe 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -42,6 +42,8 @@ function isUserInformation(user: GetFriendsResponse | GetUserResponse): user is
 
 // Map users conditionally depending on their type
 const mappedUsers: Array<GetUserResponse> = computed(() => {
+  if(!props.users || props.users.length < 1) return [];
+
   return props.users.map(user => {
     if (isGetFriendsResponse(user)) {
       return user.user;
@@ -75,7 +77,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
 
     <!-- Scrollable User Boxes -->
     <div
-        v-if="users.length != 0"
+        v-if="users"
         :class="userBoxContainerClasses"
     >
       <HomeUsersUserBox
diff --git a/components/home/Controls/GameButtons.vue b/components/home/Controls/GameButtons.vue
index 7bb8d9d..839da88 100644
--- a/components/home/Controls/GameButtons.vue
+++ b/components/home/Controls/GameButtons.vue
@@ -8,7 +8,7 @@
             Start Game
         </button>
         <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full">
-            Start Round
+            Quick Game
         </button>
     </div>
 </template>
diff --git a/composables/useGames.ts b/composables/useGames.ts
new file mode 100644
index 0000000..9339569
--- /dev/null
+++ b/composables/useGames.ts
@@ -0,0 +1,29 @@
+import type {GetGameResponse} from "@/types/api/game";
+
+export const useGame = () => {
+    const games = useState<GetGameResponse | null>('games', () => null)
+    const loading = useState<boolean>('gameLoading', () => false)
+    const error = useState<string | null>('gameError', () => null)
+
+    const fetchGames = async () => {
+        loading.value = true
+        try {
+            games.value = await getGames()
+        } catch (e) {
+            error.value = (e as Error).message
+        } finally {
+            loading.value = false
+        }
+    }
+
+    return {
+        games,
+        loading,
+        error,
+        fetchGames
+    }
+}
+
+async function getGames() {
+    return await $fetch<GetGameResponse>('http://localhost:3000/api/v1/games/')
+}
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 99296ea..cfb30ea 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,9 +1,16 @@
 <script setup lang="ts">
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
-import { UserViewType } from "@/types/components/users.view"
+import {UserViewType} from "@/types/components/users.view"
+import {useGame} from "@/composables/useGames";
 
 useUser().fetchUser(); // loading user state just in case
 
+const {games, loading, error, fetchGames} = useGame();
+
+onMounted(() => {
+  fetchGames();
+});
+
 </script>
 
 <template>
@@ -22,46 +29,8 @@ useUser().fetchUser(); // loading user state just in case
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6" :users="[
-            { user_id: 1,
-              user_avatar: null,
-              username: 'Test1'
-            },
-            { user_id: 1,
-              user_avatar: null,
-              username: 'Test1'
-            },
-            { user_id: 1,
-              user_avatar: null,
-              username: 'Test1'
-            },
-            { user_id: 1,
-              user_avatar: null,
-              username: 'Test1'
-            },
-            { user_id: 1,
-              user_avatar: null,
-              username: 'Test1'
-            },            
-          ]"/>
-          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6" :users="[
-            { user_id: 1,
-              user_avatar: null,
-              username: 'Test1'
-            },
-            { user_id: 2,
-              user_avatar: null,
-              username: 'Test2'
-            },
-            { user_id: 3,
-              user_avatar: null,
-              username: 'Test3'
-            },
-            { user_id: 4,
-              user_avatar: null,
-              username: 'Test4'
-            },
-          ]"/>
+          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6" :users="games?.active.map(game=>game.opponents[0])"/>
+          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6" :users="games?.waiting ? games?.waiting.map(game=>game.opponents[0]) : []"/>
           <HomeControlsGameButtons class="h-1/6"/>
         </div>
       </template>
diff --git a/server/api/v1/game/index.get.ts b/server/api/v1/games/index.get.ts
similarity index 100%
rename from server/api/v1/game/index.get.ts
rename to server/api/v1/games/index.get.ts
diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/games/index.post.ts
similarity index 100%
rename from server/api/v1/game/index.post.ts
rename to server/api/v1/games/index.post.ts
diff --git a/types/api/game.ts b/types/api/game.ts
index 71539bd..4f2cb5e 100644
--- a/types/api/game.ts
+++ b/types/api/game.ts
@@ -72,5 +72,6 @@ export interface GameInitRequest {
 
 export interface GetGameResponse {
     active: Game[];
+    waiting: Game[];
     past: Game[];
 }
\ No newline at end of file

From 02df601b8181f8736d3449e96064f79d7b51c425 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 11:41:06 +0100
Subject: [PATCH 094/221] fixed size of levelbar

---
 layouts/HeaderFooterView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 233ff0e..e064306 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -8,7 +8,7 @@
     <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
 
       <!-- Header -->
-      <div class="bg-yellow-500 h-1/6 border rounded-b-3xl">
+      <div class="bg-yellow-500 rounded-b-3xl">
         <div class="flex justify-around items-center h-full">
           <slot name="header" />
         </div>

From 1e3da0e3e7e20d8ae5162f06145622098e4b5f45 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 10 Dec 2024 12:20:06 +0100
Subject: [PATCH 095/221] prettified header

---
 pages/index.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 1400a24..149ff46 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -26,17 +26,19 @@ function setLevelbar(newValue: number) {
   <div class="bg-gradient-to-b from-indigo-500 to-purple-500">
     <HeaderFooterView>
       <template #header>
+
         <div class="m-3 w-full flex items-center justify-center">
-          <Icon name="mdi:fire" class="text-red-600 text-4xl mr-2" />
-          <p class="text-xl font-bold">Streak: {{ user?.daily_streak }}</p>
-        </div>
-        <div class="m-3 w-full flex items-center justify-center">
-          <Icon name="mdi:star" class="text-red-600 text-5xl  mr-2" />
+          <Icon name="mdi:star" class="text-red-600 text-6xl  mr-2 -my-1" />
           <div class="w-full bg-gray-700 rounded-full h-2.5">
             <div id="levelbar" class="bg-red-600 h-2.5 rounded-full" style="width: 50%" />
           </div>
         </div>
 
+        <div class="m-3 w-full flex items-center justify-center">
+          <Icon name="mdi:fire" class="text-red-600 text-4xl mr-2" />
+          <p class="text-xl font-bold">Streak: {{ user?.daily_streak }}</p>
+        </div>
+
 
       </template>
       <template #content>

From b699f1d433bc8225786ff23c55629fa420ff56cf Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 10 Dec 2024 12:54:19 +0100
Subject: [PATCH 096/221] add playtest page

---
 layouts/Game/GameSelectLayout.vue | 17 +++++++++++++++++
 pages/playtest.vue                | 31 +++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 layouts/Game/GameSelectLayout.vue
 create mode 100644 pages/playtest.vue

diff --git a/layouts/Game/GameSelectLayout.vue b/layouts/Game/GameSelectLayout.vue
new file mode 100644
index 0000000..e51b080
--- /dev/null
+++ b/layouts/Game/GameSelectLayout.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex flex-col h-screen max-h-screen">
+    <div>
+      <slot name="scoreboard"/>
+    </div>
+    <div>
+      <slot name="round-indicator"/>
+    </div>
+    <div>
+      <slot name="select-options"/>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/pages/playtest.vue b/pages/playtest.vue
new file mode 100644
index 0000000..7ed6385
--- /dev/null
+++ b/pages/playtest.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+
+import GameSelectLayout from "@/layouts/Game/GameSelectLayout.vue";
+</script>
+
+<template>
+  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+    <GameSelectLayout>
+      <template #scoreboard>
+        <div class="text-white text-center">User 1 vs User 2</div>
+      </template>
+      <template #round-indicator>
+        <div class="text-white text-center"> Round:</div>
+        <div class="text-white text-center">🔴🔴⭕⭕⭕</div>
+      </template>
+      <template #select-options>
+        <br>
+        <div class="text-white text-center">Select:</div>
+        <div class="flex  justify-center">
+          <div class="grid grid-cols-2 grid-rows-2 gap-4 text-2xl">
+            <button class="container px-5 py-2.5 rounded bg-amber-50">Song A</button>
+            <button class="container px-5 py-2.5 rounded bg-amber-50">Song B</button>
+            <button class="container px-5 py-2.5 rounded bg-amber-50">Song C</button>
+            <button class="container px-5 py-2.5 rounded bg-amber-50">Song D</button>
+          </div>
+        </div>
+
+      </template>
+    </GameSelectLayout>
+  </div>
+</template>
\ No newline at end of file

From f2f713c337b6f6a58da722645e7e0b712c764180 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 13:53:49 +0100
Subject: [PATCH 097/221] added value for friend requests

---
 types/components/users.view.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/types/components/users.view.ts b/types/components/users.view.ts
index 525dc9b..9bc96a7 100644
--- a/types/components/users.view.ts
+++ b/types/components/users.view.ts
@@ -1,5 +1,6 @@
 export enum UserViewType {
     FRIENDS = 0,
     OPPONENTTURN = 1,
-    USERTURN = 2 
+    USERTURN = 2, 
+    REQUESTS = 3
 }
\ No newline at end of file

From d03570df3e90059e8fb82e1b8dd20072a327ca32 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 13:54:09 +0100
Subject: [PATCH 098/221] added box for incoming friend requests

---
 components/UsersView.vue          | 12 ++--
 components/home/Users/UserBox.vue | 94 +++++++++++++++----------------
 components/profile/Friendlist.vue | 36 ++++++++++--
 3 files changed, 85 insertions(+), 57 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 2e268fe..482aae8 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -21,7 +21,7 @@ const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970
 const containerClasses = computed(() => {
   const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
   if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
-  if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS) return `${baseClasses} overflow-y-hidden`;
+  if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS || props.viewType === UserViewType.REQUESTS) return `${baseClasses} overflow-y-hidden`;
   return '';
 });
 
@@ -59,7 +59,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
   <div
       :class="[
                     containerClasses,
-                    ((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) && users.length > 3) ? 'pr-0' : ''
+                    ((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN || viewType === UserViewType.REQUESTS) && users.length > 3) ? 'pr-0' : ''
                 ]"
   >
     <!-- Fixed Conditional Header -->
@@ -73,6 +73,9 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
       <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
         Friends
       </p>
+      <p v-else-if="viewType === UserViewType.REQUESTS" class="fixed">
+        Friend Requests
+      </p>
     </div>
 
     <!-- Scrollable User Boxes -->
@@ -87,17 +90,18 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
           :name="user.username"
           :user-turn="viewType === UserViewType.USERTURN"
           :class="[
-                    (viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) 
+                    (viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN || viewType === UserViewType.REQUESTS) 
                         ? users.length === 3 ? 'w-1/3' 
                         : users.length === 2 ? 'w-1/2' 
                         : 'w-full'
                         : ''
                 ]"
-          :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN)
+          :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN || viewType === UserViewType.REQUESTS)
                     ? users.length > 3 
                         ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } 
                         : {} 
                     : {}"
+          :friend-request="viewType === UserViewType.REQUESTS"
       />
       <!-- Placeholder for scrolling -->
       <div v-if="users.length > 3" class="px-1 py-4"/>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index c9ed55a..7f34cb9 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -1,52 +1,52 @@
 <script setup lang="ts">
 
-    const props = defineProps({
-    profilePicture: {
-        type: String,
-        default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
-    },
-    name: {
-        type: String,
-        default: 'User'
-    },
-    userTurn: {
-        type: Boolean,
-        default: false
-    }
-    });
+const props = defineProps({
+  profilePicture: {
+    type: String,
+    default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
+  },
+  name: {
+    type: String,
+    default: 'User'
+  },
+  userTurn: {
+    type: Boolean,
+    default: false
+  },
+  friendRequest: {
+    type: Boolean,
+    default: false
+  }
+});
 </script>
 
 <template>
-    <div
-      :class="[
-        'bg-blue-600 rounded-3xl px-3 w-full', 
-        props.userTurn
-          ? 'flex items-center'
-          : 'flex flex-col items-center justify-center mb-3 py-2'
-      ]"
-    >
-      <!-- Profile Picture -->
-      <NuxtImg
-        :class="[
-          'rounded-full', 
-          'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
-          props.userTurn ? 'mr-3' : 'mb-0'
-        ]"
-        :src="props.profilePicture.toString()"
-        :alt="props.name"
-      />
-      
-      <!-- User Name -->
-      <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name"/>
-      
-      <!-- Play Button -->
-      <button
-        v-if="props.userTurn"
-        class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5"
-        @click="console.log(props.name)"
-      >
-      <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white"/>
-      </button>
-    </div>
-  </template>
-  
\ No newline at end of file
+  <div 
+  :class="[
+    'bg-blue-600 rounded-3xl px-3 w-full',
+    props.userTurn
+      ? 'flex items-center'
+      : 'flex flex-col items-center justify-center mb-3 py-2'
+  ]">
+    <!-- Profile Picture -->
+    <NuxtImg 
+    :class="[
+      'rounded-full',
+      'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
+      props.userTurn ? 'mr-3' : 'mb-0'
+    ]" :src="props.profilePicture.toString()" :alt="props.name" />
+
+    <!-- User Name -->
+    <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name" />
+
+    <!-- Play Button -->
+    <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
+      <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white" />
+    </button>
+
+    <!-- Accept Button -->
+    <!--button v-if="props.friendRequest" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
+      <Icon name="mdi:check" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white" />
+    </button-->
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 491f1a7..90ff79a 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -7,6 +7,8 @@ const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () =
 
 const session = useSupabaseSession()
 
+const newFriend = ref('')
+
 onMounted(async () => {
   if (session.value) {
     await getFriendships()
@@ -22,18 +24,40 @@ async function getFriendships() {
       });
 }
 
-function addFriend() {
-  const newFriend = {
-    friend_username: "sfsdf",
+const addFriend = async () => {
+  console.log(newFriend.value)
+  try {
+    await useFetch('/api/v1/user/', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+  } catch (err) {
+    console.error('Unexpected error:', err);
   }
-  friends.value.push(newFriend)
-}
+
+
+  try {
+    await useFetch('/api/v1/user/friends', {
+      method: 'POST',
+      body: JSON.stringify({ receiver_id: newFriend.value }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+  } catch (err) {
+    console.error('Unexpected error:', err);
+  }
+};
 </script>
 
 <template>
-  <UsersView :view-type="UserViewType.FRIENDS" :users="friends"/>
+  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"/>
+  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"/>
 
   <div class="mt-3">
       <button class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
+      <input v-model="newFriend">
   </div>
 </template>
\ No newline at end of file

From 15220ac89cf3aa908ad026cfdb34f437287b6062 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 14:31:47 +0100
Subject: [PATCH 099/221] added working friend request by name

---
 components/profile/Friendlist.vue        | 15 +--------------
 server/api/v1/user/friends/index.post.ts |  8 ++++----
 types/api/user.friends.ts                |  5 +++++
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 90ff79a..a4f3b76 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -25,23 +25,10 @@ async function getFriendships() {
 }
 
 const addFriend = async () => {
-  console.log(newFriend.value)
-  try {
-    await useFetch('/api/v1/user/', {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-  } catch (err) {
-    console.error('Unexpected error:', err);
-  }
-
-
   try {
     await useFetch('/api/v1/user/friends', {
       method: 'POST',
-      body: JSON.stringify({ receiver_id: newFriend.value }),
+      body: JSON.stringify({ receiver_name: newFriend.value }),
       headers: {
         'Content-Type': 'application/json'
       }
diff --git a/server/api/v1/user/friends/index.post.ts b/server/api/v1/user/friends/index.post.ts
index 5c373bc..9f018ad 100644
--- a/server/api/v1/user/friends/index.post.ts
+++ b/server/api/v1/user/friends/index.post.ts
@@ -1,10 +1,10 @@
 // send friend invite
 import {z} from 'zod'
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
-import type {SendFriendRequestParam} from "~/types/api/user.friends";
+import type {SendFriendRequestNameParam} from "~/types/api/user.friends";
 
 const userSchema = z.object({
-    receiver_id: z.string().uuid()
+    receiver_name: z.string()
 }).readonly()
 
 export default defineEventHandler(async (event) => {
@@ -24,8 +24,8 @@ export default defineEventHandler(async (event) => {
 
     // Send request
     const client = serverSupabaseServiceRole(event);
-    const param: SendFriendRequestParam = {sender_id: user.id, receiver_id: result.data.receiver_id};
-    const {error} = await client.rpc('send_friend_request', param as never);
+    const param: SendFriendRequestNameParam = {sender_id: user.id, receiver_name: result.data.receiver_name};
+    const {error} = await client.rpc('send_friend_request_by_name', param as never);
 
     // Handle errors
     if (error) {
diff --git a/types/api/user.friends.ts b/types/api/user.friends.ts
index d64cfda..7a75062 100644
--- a/types/api/user.friends.ts
+++ b/types/api/user.friends.ts
@@ -14,6 +14,11 @@ export interface SendFriendRequestParam {
     receiver_id: string
 }
 
+export interface SendFriendRequestNameParam {
+    sender_id: string,
+    receiver_name: string
+}
+
 export interface FriendActionParam {
     friendship_id_param: number,
 }

From 105ee8840f734d4071a4868720f4050e89748e24 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 15:10:21 +0100
Subject: [PATCH 100/221] added error field

---
 components/profile/Friendlist.vue | 44 ++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index a4f3b76..fe08485 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {FriendshipStatus, FriendshipType, type GetFriendsResponse} from "@/types/api/user.friends";
+import { FriendshipStatus, FriendshipType, type GetFriendsResponse } from "@/types/api/user.friends";
 import { UserViewType } from "@/types/components/users.view";
 
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
@@ -8,6 +8,7 @@ const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () =
 const session = useSupabaseSession()
 
 const newFriend = ref('')
+const newFriendError = ref('')
 
 onMounted(async () => {
   if (session.value) {
@@ -18,33 +19,52 @@ onMounted(async () => {
 
 async function getFriendships() {
   $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
-      .then((data) => {
-        requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
-        friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
-      });
+    .then((data) => {
+      requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
+      friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+    });
 }
 
 const addFriend = async () => {
   try {
-    await useFetch('/api/v1/user/friends', {
+    const data = await $fetch('/api/v1/user/friends', {
       method: 'POST',
       body: JSON.stringify({ receiver_name: newFriend.value }),
       headers: {
         'Content-Type': 'application/json'
       }
     });
+    console.log('Friend request sent successfully:', data);
+    newFriendError.value = ''; 
   } catch (err) {
-    console.error('Unexpected error:', err);
+    if (err.response) {
+      newFriendError.value = "Please check your input."
+      console.error('Error response:', err.response);
+      console.error('Error data:', err.response.data);
+    } else {
+      // Something else happened while setting up the request
+      console.error('Error message:', err.message);
+    }
   }
 };
 </script>
 
 <template>
-  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"/>
-  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"/>
+  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends" />
+  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests" />
 
   <div class="mt-3">
-      <button class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
-      <input v-model="newFriend">
+    <input v-model="newFriend" class="rounded-3xl pl-2">
+    <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="addFriend">Add Friend</button>
+
+    <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.error-message {
+  color: red;
+  margin-top: 5px;
+  background-color: white;
+}
+</style>
\ No newline at end of file

From b9c61240442702a4ed02f19ebc502136ce4ed79a Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 12:21:59 +0100
Subject: [PATCH 101/221] added modal for accepting friend requests

---
 components/UsersView.vue          |  23 ++++--
 components/home/Users/UserBox.vue |  26 ++++--
 components/profile/Friendlist.vue |   8 +-
 components/profile/UserModal.vue  | 132 ++++++++++++++++++++++++++++++
 types/components/users.view.ts    |   3 +-
 5 files changed, 176 insertions(+), 16 deletions(-)
 create mode 100644 components/profile/UserModal.vue

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 482aae8..0193f57 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type {GetFriendsResponse} from "@/types/api/user.friends";
+import {type GetFriendsResponse, FriendshipStatus} from "@/types/api/user.friends";
 import {UserViewType} from "@/types/components/users.view";
 import type {GetUserResponse} from "@/types/api/users";
 
@@ -15,14 +15,16 @@ const props = defineProps({
   }
 });
 
+const friendshipId = ref(0);
+const friendshipStatus = ref(FriendshipStatus.ACCEPTED);
+
 const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
 
 // Computed Classes
 const containerClasses = computed(() => {
   const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
   if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
-  if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS || props.viewType === UserViewType.REQUESTS) return `${baseClasses} overflow-y-hidden`;
-  return '';
+  else return `${baseClasses} overflow-y-hidden`;
 });
 
 const userBoxContainerClasses = computed(() =>
@@ -33,6 +35,9 @@ const userBoxContainerClasses = computed(() =>
 
 
 function isGetFriendsResponse(user: GetFriendsResponse | GetUserResponse): user is GetFriendsResponse {
+  friendshipId.value = user.friendship_id;
+  friendshipStatus.value = user.status;
+  console.log("userView:" + friendshipId.value)
   return 'friend_id' in user;
 }
 
@@ -59,7 +64,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
   <div
       :class="[
                     containerClasses,
-                    ((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN || viewType === UserViewType.REQUESTS) && users.length > 3) ? 'pr-0' : ''
+                    ((viewType != UserViewType.USERTURN) && users.length > 3) ? 'pr-0' : ''
                 ]"
   >
     <!-- Fixed Conditional Header -->
@@ -76,6 +81,9 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
       <p v-else-if="viewType === UserViewType.REQUESTS" class="fixed">
         Friend Requests
       </p>
+      <p v-else-if="viewType === UserViewType.SENTREQUESTS" class="fixed">
+        Sent Friend Requests
+      </p>
     </div>
 
     <!-- Scrollable User Boxes -->
@@ -90,18 +98,21 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
           :name="user.username"
           :user-turn="viewType === UserViewType.USERTURN"
           :class="[
-                    (viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN || viewType === UserViewType.REQUESTS) 
+                    (viewType != UserViewType.USERTURN) 
                         ? users.length === 3 ? 'w-1/3' 
                         : users.length === 2 ? 'w-1/2' 
                         : 'w-full'
                         : ''
                 ]"
-          :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN || viewType === UserViewType.REQUESTS)
+          :style="(viewType != UserViewType.USERTURN)
                     ? users.length > 3 
                         ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } 
                         : {} 
                     : {}"
           :friend-request="viewType === UserViewType.REQUESTS"
+          :friendship-id="friendshipId"
+          :friends-status="friendshipStatus"
+          :friend-id="user.id"
       />
       <!-- Placeholder for scrolling -->
       <div v-if="users.length > 3" class="px-1 py-4"/>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 7f34cb9..9d0430b 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+import { FriendshipStatus } from '@/types/api/user.friends';
 
 const props = defineProps({
   profilePicture: {
@@ -16,18 +18,32 @@ const props = defineProps({
   friendRequest: {
     type: Boolean,
     default: false
+  },
+  friendshipId: {
+    type: Number,
+    default: 0
+  },
+  friendsStatus: {
+    type: FriendshipStatus,
+    default: FriendshipStatus.PENDING
+  },
+  friendId: {
+    type: Number,
+    required: true
   }
 });
+
+const showModal = ref(false);
 </script>
 
 <template>
   <div 
   :class="[
-    'bg-blue-600 rounded-3xl px-3 w-full',
+    'bg-blue-600 rounded-3xl px-3 w-full hover:bg-sky-700',
     props.userTurn
       ? 'flex items-center'
       : 'flex flex-col items-center justify-center mb-3 py-2'
-  ]">
+  ]" @click="showModal = true">
     <!-- Profile Picture -->
     <NuxtImg 
     :class="[
@@ -43,10 +59,6 @@ const props = defineProps({
     <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
       <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white" />
     </button>
-
-    <!-- Accept Button -->
-    <!--button v-if="props.friendRequest" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
-      <Icon name="mdi:check" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white" />
-    </button-->
   </div>
+  <ProfileUserModal v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" @close-modal="showModal = false"/>
 </template>
\ No newline at end of file
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index fe08485..dcd4287 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -4,6 +4,7 @@ import { UserViewType } from "@/types/components/users.view";
 
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
+const sentRequests: Ref<GetFriendsResponse[]> = useState("outgoing_friendships", () => [])
 
 const session = useSupabaseSession()
 
@@ -22,6 +23,7 @@ async function getFriendships() {
     .then((data) => {
       requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
       friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+      sentRequests.value = data.filter((item) => item.request_type == FriendshipType.OUTGOING && item.status === FriendshipStatus.PENDING)
     });
 }
 
@@ -35,7 +37,8 @@ const addFriend = async () => {
       }
     });
     console.log('Friend request sent successfully:', data);
-    newFriendError.value = ''; 
+    newFriendError.value = '';
+    await getFriendships();
   } catch (err) {
     if (err.response) {
       newFriendError.value = "Please check your input."
@@ -51,7 +54,8 @@ const addFriend = async () => {
 
 <template>
   <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends" />
-  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests" />
+  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"/>
+  <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests" />
 
   <div class="mt-3">
     <input v-model="newFriend" class="rounded-3xl pl-2">
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
new file mode 100644
index 0000000..a2e8a46
--- /dev/null
+++ b/components/profile/UserModal.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { FriendshipAction, FriendshipStatus } from '@/types/api/user.friends';
+import type { GetUserResponse } from '@/types/api/users';
+
+const props = defineProps({
+    profilePicture: {
+        type: String,
+        default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
+    },
+    name: {
+        type: String,
+        default: 'User'
+    },
+    friendshipId: {
+        type: Number,
+        required: true
+    },
+    friendsStatus: {
+        type: FriendshipStatus,
+        default: FriendshipStatus.ACCEPTED
+    },
+    friendId: {
+        type: Number,
+        required: true
+    }
+});
+
+const friend = ref()
+
+onMounted(async () => {
+    friend.value = await getFriendInformation()
+    console.log(friend.value.daily_streak);
+})
+
+const emit = defineEmits(['close-modal']);
+
+const icon_wrapper = 'bg-yellow-500 flex items-center rounded-full justify-center p-1 hover:cursor-pointer hover:bg-yellow-600'
+
+async function handleFriendship(action: FriendshipAction) {
+    console.log(props.friendsStatus)
+    emit('close-modal');
+    try {
+        const data = await $fetch('/api/v1/user/friends/action', {
+            method: 'POST',
+            body: JSON.stringify({ friendship_id: props.friendshipId, action: action }),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+        console.log('Friend request accepted successfully:', data);
+    } catch (err) {
+        if (err.response) {
+            console.error('Error response:', err.response);
+            console.error('Error data:', err.response.data);
+        } else {
+            // Something else happened while setting up the request
+            console.error('Error message:', err.message);
+        }
+    }
+    if (action === FriendshipAction.ACCEPT) {
+        console.log()
+    }
+    else {
+        console.log("Decline")
+    }
+};
+
+async function getFriendInformation() {
+    return await $fetch<GetUserResponse>('http://localhost:3000/api/v1/user/' + props.friendId)
+}
+
+</script>
+
+<template>
+    <div class="modal-overlay">
+        <div class="modal">
+            <NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" />
+            <p v-if="props.friendsStatus === FriendshipStatus.PENDING">Do you want to accept {{ name }}'s friend request?'</p>
+            <p v-else>Streak: {{  }}</p>
+            <div v-if="props.friendsStatus === FriendshipStatus.PENDING" class="flex mt-5 gap-10">
+                <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.DECLINE)">
+                    <Icon name="mdi:close" class="text-5xl text-red-600" />
+                </div>
+                <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.ACCEPT)">
+                    <Icon name="mdi:check" class="text-5xl text-red-600" />
+                </div>
+            </div>
+            <button class="bg-indigo-600 hover:bg-indigo-800" @click="$emit('close-modal')">Close</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    background-color: #000000da;
+}
+
+.modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: white;
+    height: 500px;
+    width: 500px;
+    margin-top: 10%;
+    padding: 60px 0;
+    border-radius: 20px;
+}
+
+.icon-wrapper {
+    aspect-ratio: 1;
+    border-radius: 50%;
+}
+
+button {
+    width: 150px;
+    height: 40px;
+    color: white;
+    font-size: 14px;
+    border-radius: 16px;
+    margin-top: 50px;
+}
+</style>
diff --git a/types/components/users.view.ts b/types/components/users.view.ts
index 9bc96a7..1a134ae 100644
--- a/types/components/users.view.ts
+++ b/types/components/users.view.ts
@@ -2,5 +2,6 @@ export enum UserViewType {
     FRIENDS = 0,
     OPPONENTTURN = 1,
     USERTURN = 2, 
-    REQUESTS = 3
+    REQUESTS = 3,
+    SENTREQUESTS = 4
 }
\ No newline at end of file

From e6d9c4368bd45fe050fe192862d3768faa53c1cc Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 12:51:46 +0100
Subject: [PATCH 102/221] added friend removal functionality

---
 components/UsersView.vue          |  1 +
 components/home/Users/UserBox.vue | 12 ++++++++----
 components/profile/UserModal.vue  | 25 ++++++++++++++++---------
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 0193f57..e57068f 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -113,6 +113,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
           :friendship-id="friendshipId"
           :friends-status="friendshipStatus"
           :friend-id="user.id"
+          :view-type="props.viewType"
       />
       <!-- Placeholder for scrolling -->
       <div v-if="users.length > 3" class="px-1 py-4"/>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 9d0430b..ed78456 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -24,13 +24,17 @@ const props = defineProps({
     default: 0
   },
   friendsStatus: {
-    type: FriendshipStatus,
+    type: String,
     default: FriendshipStatus.PENDING
   },
   friendId: {
-    type: Number,
+    type: String,
     required: true
-  }
+  },
+  viewType: {
+    type: Number,
+    required: true,
+  },
 });
 
 const showModal = ref(false);
@@ -60,5 +64,5 @@ const showModal = ref(false);
       <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white" />
     </button>
   </div>
-  <ProfileUserModal v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" @close-modal="showModal = false"/>
+  <ProfileUserModal v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false"/>
 </template>
\ No newline at end of file
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index a2e8a46..e0de945 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { FriendshipAction, FriendshipStatus } from '@/types/api/user.friends';
 import type { GetUserResponse } from '@/types/api/users';
+import { UserViewType } from '@/types/components/users.view';
+
 
 const props = defineProps({
     profilePicture: {
@@ -16,20 +18,24 @@ const props = defineProps({
         required: true
     },
     friendsStatus: {
-        type: FriendshipStatus,
+        type: String,
         default: FriendshipStatus.ACCEPTED
     },
     friendId: {
         type: Number,
         required: true
-    }
+    },
+    viewType: {
+    type: Number,
+    required: true
+  },
 });
 
 const friend = ref()
 
 onMounted(async () => {
     friend.value = await getFriendInformation()
-    console.log(friend.value.daily_streak);
+    console.log(props.viewType);
 })
 
 const emit = defineEmits(['close-modal']);
@@ -75,17 +81,20 @@ async function getFriendInformation() {
     <div class="modal-overlay">
         <div class="modal">
             <NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" />
-            <p v-if="props.friendsStatus === FriendshipStatus.PENDING">Do you want to accept {{ name }}'s friend request?'</p>
+            <p v-if="props.viewType === UserViewType.SENTREQUESTS">Do you want to accept {{ name }}'s friend request?'</p>
             <p v-else>Streak: {{  }}</p>
-            <div v-if="props.friendsStatus === FriendshipStatus.PENDING" class="flex mt-5 gap-10">
+            <div v-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-5 gap-10">
                 <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.DECLINE)">
-                    <Icon name="mdi:close" class="text-5xl text-red-600" />
+                    <Icon name="mdi:close" class="text-5xl text-red-600"  />
                 </div>
                 <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.ACCEPT)">
                     <Icon name="mdi:check" class="text-5xl text-red-600" />
                 </div>
             </div>
-            <button class="bg-indigo-600 hover:bg-indigo-800" @click="$emit('close-modal')">Close</button>
+            <div v-else-if="props.viewType === UserViewType.FRIENDS" class="flex mt-5 gap-10">
+                <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.REMOVE)">Remove Friend</button>
+            </div>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
         </div>
     </div>
 </template>
@@ -124,9 +133,7 @@ async function getFriendInformation() {
 button {
     width: 150px;
     height: 40px;
-    color: white;
     font-size: 14px;
     border-radius: 16px;
-    margin-top: 50px;
 }
 </style>

From 45fce371d017fc0f567b5eade1bb6bf797ca756d Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 13:01:42 +0100
Subject: [PATCH 103/221] fixed condition for opening modal

---
 components/home/Users/UserBox.vue | 3 ++-
 components/profile/UserModal.vue  | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index ed78456..a7ef88e 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { FriendshipStatus } from '@/types/api/user.friends';
+import { UserViewType } from '@/types/components/users.view';
 
 const props = defineProps({
   profilePicture: {
@@ -64,5 +65,5 @@ const showModal = ref(false);
       <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white" />
     </button>
   </div>
-  <ProfileUserModal v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false"/>
+  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false"/>
 </template>
\ No newline at end of file
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index e0de945..9e9bf79 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -22,7 +22,7 @@ const props = defineProps({
         default: FriendshipStatus.ACCEPTED
     },
     friendId: {
-        type: Number,
+        type: String,
         required: true
     },
     viewType: {
@@ -81,9 +81,9 @@ async function getFriendInformation() {
     <div class="modal-overlay">
         <div class="modal">
             <NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" />
-            <p v-if="props.viewType === UserViewType.SENTREQUESTS">Do you want to accept {{ name }}'s friend request?'</p>
+            <p v-if="props.viewType === UserViewType.REQUESTS">Do you want to accept {{ name }}'s friend request?'</p>
             <p v-else>Streak: {{  }}</p>
-            <div v-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-5 gap-10">
+            <div v-if="props.viewType === UserViewType.REQUESTS" class="flex mt-5 gap-10">
                 <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.DECLINE)">
                     <Icon name="mdi:close" class="text-5xl text-red-600"  />
                 </div>

From dc3d0b07dfcff7ec139a9825444a117c2dfcf34c Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 21:45:06 +0100
Subject: [PATCH 104/221] fixed size of content

---
 layouts/HeaderFooterView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index e064306..eb20070 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -15,7 +15,7 @@
       </div>
 
       <!-- Content -->
-      <div class="h-5/6 border rounded-3xl">
+      <div class="h-full border rounded-3xl">
         <slot name="content" />
       </div>
 

From 6f57df342e5c6fd3f825441c664338e3e46bcf28 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 22:21:34 +0100
Subject: [PATCH 105/221] added automatic refresh on action

---
 components/UsersView.vue          | 4 +++-
 components/home/Users/UserBox.vue | 5 ++++-
 components/profile/Friendlist.vue | 6 +++---
 components/profile/UserModal.vue  | 9 +++++----
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index e57068f..ddc13e6 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -15,6 +15,8 @@ const props = defineProps({
   }
 });
 
+const emit = defineEmits(['refresh']);
+
 const friendshipId = ref(0);
 const friendshipStatus = ref(FriendshipStatus.ACCEPTED);
 
@@ -37,7 +39,6 @@ const userBoxContainerClasses = computed(() =>
 function isGetFriendsResponse(user: GetFriendsResponse | GetUserResponse): user is GetFriendsResponse {
   friendshipId.value = user.friendship_id;
   friendshipStatus.value = user.status;
-  console.log("userView:" + friendshipId.value)
   return 'friend_id' in user;
 }
 
@@ -114,6 +115,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
           :friends-status="friendshipStatus"
           :friend-id="user.id"
           :view-type="props.viewType"
+          @refresh="emit('refresh');"
       />
       <!-- Placeholder for scrolling -->
       <div v-if="users.length > 3" class="px-1 py-4"/>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index a7ef88e..3598457 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -38,7 +38,10 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['refresh']);
+
 const showModal = ref(false);
+
 </script>
 
 <template>
@@ -65,5 +68,5 @@ const showModal = ref(false);
       <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white" />
     </button>
   </div>
-  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false"/>
+  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false" @refresh="emit('refresh')"/>
 </template>
\ No newline at end of file
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index dcd4287..da5daa2 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -53,9 +53,9 @@ const addFriend = async () => {
 </script>
 
 <template>
-  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends" />
-  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"/>
-  <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests" />
+  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends" @refresh="getFriendships"/>
+  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests" @refresh="getFriendships"/>
+  <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests" @refresh="getFriendships"/>
 
   <div class="mt-3">
     <input v-model="newFriend" class="rounded-3xl pl-2">
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index 9e9bf79..386b405 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -31,15 +31,14 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['close-modal', 'refresh']);
+
 const friend = ref()
 
 onMounted(async () => {
     friend.value = await getFriendInformation()
-    console.log(props.viewType);
 })
 
-const emit = defineEmits(['close-modal']);
-
 const icon_wrapper = 'bg-yellow-500 flex items-center rounded-full justify-center p-1 hover:cursor-pointer hover:bg-yellow-600'
 
 async function handleFriendship(action: FriendshipAction) {
@@ -63,6 +62,8 @@ async function handleFriendship(action: FriendshipAction) {
             console.error('Error message:', err.message);
         }
     }
+    console.log('emit: user-modal')
+    emit('refresh')
     if (action === FriendshipAction.ACCEPT) {
         console.log()
     }
@@ -82,7 +83,7 @@ async function getFriendInformation() {
         <div class="modal">
             <NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" />
             <p v-if="props.viewType === UserViewType.REQUESTS">Do you want to accept {{ name }}'s friend request?'</p>
-            <p v-else>Streak: {{  }}</p>
+            <p v-else>{{ name }}</p>
             <div v-if="props.viewType === UserViewType.REQUESTS" class="flex mt-5 gap-10">
                 <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.DECLINE)">
                     <Icon name="mdi:close" class="text-5xl text-red-600"  />

From aba96c8b58958208ff8a1b576ffc0223a2342dd0 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 22:35:23 +0100
Subject: [PATCH 106/221] added cancel of sent request

---
 components/home/Users/UserBox.vue | 2 +-
 components/profile/Friendlist.vue | 1 +
 components/profile/UserModal.vue  | 9 +++------
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 3598457..9add244 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -68,5 +68,5 @@ const showModal = ref(false);
       <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white" />
     </button>
   </div>
-  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false" @refresh="emit('refresh')"/>
+  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS || viewType === UserViewType.SENTREQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false" @refresh="emit('refresh')"/>
 </template>
\ No newline at end of file
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index da5daa2..7835034 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -38,6 +38,7 @@ const addFriend = async () => {
     });
     console.log('Friend request sent successfully:', data);
     newFriendError.value = '';
+    newFriend.value = ''
     await getFriendships();
   } catch (err) {
     if (err.response) {
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index 386b405..cb96b0b 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -64,12 +64,6 @@ async function handleFriendship(action: FriendshipAction) {
     }
     console.log('emit: user-modal')
     emit('refresh')
-    if (action === FriendshipAction.ACCEPT) {
-        console.log()
-    }
-    else {
-        console.log("Decline")
-    }
 };
 
 async function getFriendInformation() {
@@ -95,6 +89,9 @@ async function getFriendInformation() {
             <div v-else-if="props.viewType === UserViewType.FRIENDS" class="flex mt-5 gap-10">
                 <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.REMOVE)">Remove Friend</button>
             </div>
+            <div v-else-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-5 gap-10">
+                <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.DECLINE)">Cancel Request</button>
+            </div>
             <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
         </div>
     </div>

From 9050e6f26b6bd6bff74d773db31c28df2041ac08 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 22:38:59 +0100
Subject: [PATCH 107/221] fixed vue warning

---
 components/home/Users/UserBox.vue | 46 +++++++++++++++++--------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 9add244..8905ef2 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -45,28 +45,32 @@ const showModal = ref(false);
 </script>
 
 <template>
-  <div 
-  :class="[
-    'bg-blue-600 rounded-3xl px-3 w-full hover:bg-sky-700',
-    props.userTurn
-      ? 'flex items-center'
-      : 'flex flex-col items-center justify-center mb-3 py-2'
-  ]" @click="showModal = true">
-    <!-- Profile Picture -->
-    <NuxtImg 
-    :class="[
-      'rounded-full',
-      'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
-      props.userTurn ? 'mr-3' : 'mb-0'
-    ]" :src="props.profilePicture.toString()" :alt="props.name" />
+  <div>
+    <div :class="[
+      'bg-blue-600 rounded-3xl px-3 w-full hover:bg-sky-700',
+      props.userTurn
+        ? 'flex items-center'
+        : 'flex flex-col items-center justify-center mb-3 py-2'
+    ]" @click="showModal = true">
+      <!-- Profile Picture -->
+      <NuxtImg :class="[
+        'rounded-full',
+        'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
+        props.userTurn ? 'mr-3' : 'mb-0'
+      ]" :src="props.profilePicture.toString()" :alt="props.name" />
 
-    <!-- User Name -->
-    <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name" />
+      <!-- User Name -->
+      <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name" />
 
-    <!-- Play Button -->
-    <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
-      <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white" />
-    </button>
+      <!-- Play Button -->
+      <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
+        <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white" />
+      </button>
+    </div>
+    <ProfileUserModal
+      v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS || viewType === UserViewType.SENTREQUESTS"
+      v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId"
+      :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType"
+      @close-modal="showModal = false" @refresh="emit('refresh')" />
   </div>
-  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS || viewType === UserViewType.SENTREQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false" @refresh="emit('refresh')"/>
 </template>
\ No newline at end of file

From 93cec65b84806aa49959882560475bcc76b61fd2 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 22:57:03 +0100
Subject: [PATCH 108/221] fixed ESLint warnings

---
 components/home/Users/UserBox.vue | 6 ++++--
 pages/index.vue                   | 2 --
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 8905ef2..23bc568 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -46,12 +46,14 @@ const showModal = ref(false);
 
 <template>
   <div>
-    <div :class="[
+    <div 
+      :class="[
       'bg-blue-600 rounded-3xl px-3 w-full hover:bg-sky-700',
       props.userTurn
         ? 'flex items-center'
         : 'flex flex-col items-center justify-center mb-3 py-2'
-    ]" @click="showModal = true">
+      ]" 
+      @click="showModal = true">
       <!-- Profile Picture -->
       <NuxtImg :class="[
         'rounded-full',
diff --git a/pages/index.vue b/pages/index.vue
index 149ff46..4895739 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -18,8 +18,6 @@ function setLevelbar(newValue: number) {
     levelbar.style.width = newValue + "%"
   }
 }
-
-
 </script>
 
 <template>

From e6ff093c8168e8e7ce8184c5cd411958b452793e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 12 Dec 2024 12:36:37 +0100
Subject: [PATCH 109/221] added modal for sending friend requests

---
 components/profile/FriendRequestModal.vue | 88 +++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 components/profile/FriendRequestModal.vue

diff --git a/components/profile/FriendRequestModal.vue b/components/profile/FriendRequestModal.vue
new file mode 100644
index 0000000..0874a3a
--- /dev/null
+++ b/components/profile/FriendRequestModal.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { FriendshipAction, FriendshipStatus } from '@/types/api/user.friends';
+import type { GetUserResponse } from '@/types/api/users';
+import { UserViewType } from '@/types/components/users.view';
+
+
+const props = defineProps({
+    name: {
+        type: String,
+        default: 'User'
+    },
+});
+
+const emit = defineEmits(['close-modal', 'refresh']);
+
+const newFriend = ref('')
+const newFriendError = ref('')
+
+const addFriend = async () => {
+  try {
+    await $fetch('/api/v1/user/friends', {
+      method: 'POST',
+      body: JSON.stringify({ receiver_name: newFriend.value }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    emit('refresh');
+    emit('close-modal');
+    newFriendError.value = '';
+    newFriend.value = ''
+  } catch {
+    newFriendError.value = "Please check your input."
+  }
+};
+
+</script>
+
+<template>
+    <div class="modal-overlay">
+        <div class="modal">
+            <!--NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" /-->
+            <input v-model="newFriend" class="rounded-3xl pl-2 border border-black">
+            <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
+            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="addFriend">Add Friend</button>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    background-color: #000000da;
+}
+
+.modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: white;
+    height: 500px;
+    width: 500px;
+    margin-top: 10%;
+    padding: 60px 0;
+    border-radius: 20px;
+}
+
+.icon-wrapper {
+    aspect-ratio: 1;
+    border-radius: 50%;
+}
+
+button {
+    width: 150px;
+    height: 40px;
+    font-size: 14px;
+    border-radius: 16px;
+}
+</style>

From d75798ce36023e6a2f15d94d5d88e999f75d3c39 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 12 Dec 2024 13:10:42 +0100
Subject: [PATCH 110/221] fixed text moving with the user boxes

---
 components/UsersView.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index ddc13e6..ddf3051 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -25,14 +25,14 @@ const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970
 // Computed Classes
 const containerClasses = computed(() => {
   const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
-  if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
+  if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-hidden flex-grow-0`;
   else return `${baseClasses} overflow-y-hidden`;
 });
 
 const userBoxContainerClasses = computed(() =>
     props.viewType === UserViewType.USERTURN
         ? 'flex flex-col space-y-1 md:space-y-3 h-full overflow-y-auto'
-        : 'flex gap-1 md:gap-3 mt-6 md:mt-9'
+        : 'flex gap-1 md:gap-3 md:mt-9 overflow-x-auto'
 );
 
 
@@ -73,16 +73,16 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
       <p v-if="viewType === UserViewType.USERTURN">
         Your Turn
       </p>
-      <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="fixed">
+      <p v-else-if="viewType === UserViewType.OPPONENTTURN">
         Opponent's Turn
       </p>
-      <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
+      <p v-else-if="viewType === UserViewType.FRIENDS">
         Friends
       </p>
-      <p v-else-if="viewType === UserViewType.REQUESTS" class="fixed">
+      <p v-else-if="viewType === UserViewType.REQUESTS">
         Friend Requests
       </p>
-      <p v-else-if="viewType === UserViewType.SENTREQUESTS" class="fixed">
+      <p v-else-if="viewType === UserViewType.SENTREQUESTS">
         Sent Friend Requests
       </p>
     </div>

From 833e4238e0c0e15945922ca9a5cb4809436a9402 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 12 Dec 2024 13:10:57 +0100
Subject: [PATCH 111/221] removed unnessacary code

---
 components/profile/FriendRequestModal.vue | 17 ++-----
 components/profile/Friendlist.vue         | 56 ++++++++---------------
 components/profile/ProfileOverview.vue    |  2 +-
 3 files changed, 23 insertions(+), 52 deletions(-)

diff --git a/components/profile/FriendRequestModal.vue b/components/profile/FriendRequestModal.vue
index 0874a3a..ec79a2a 100644
--- a/components/profile/FriendRequestModal.vue
+++ b/components/profile/FriendRequestModal.vue
@@ -1,15 +1,4 @@
 <script setup lang="ts">
-import { FriendshipAction, FriendshipStatus } from '@/types/api/user.friends';
-import type { GetUserResponse } from '@/types/api/users';
-import { UserViewType } from '@/types/components/users.view';
-
-
-const props = defineProps({
-    name: {
-        type: String,
-        default: 'User'
-    },
-});
 
 const emit = defineEmits(['close-modal', 'refresh']);
 
@@ -39,10 +28,11 @@ const addFriend = async () => {
 <template>
     <div class="modal-overlay">
         <div class="modal">
-            <!--NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" /-->
+            <p class="text-3xl font-bold">New friend</p>
+            <p class="mb-3">Enter your friends name:</p>
             <input v-model="newFriend" class="rounded-3xl pl-2 border border-black">
             <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
-            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="addFriend">Add Friend</button>
+            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-4" @click="addFriend">Add Friend</button>
             <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
         </div>
     </div>
@@ -70,7 +60,6 @@ const addFriend = async () => {
     height: 500px;
     width: 500px;
     margin-top: 10%;
-    padding: 60px 0;
     border-radius: 20px;
 }
 
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 7835034..3273810 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -8,13 +8,12 @@ const sentRequests: Ref<GetFriendsResponse[]> = useState("outgoing_friendships",
 
 const session = useSupabaseSession()
 
-const newFriend = ref('')
-const newFriendError = ref('')
+const showModal = ref(false);
 
 onMounted(async () => {
   if (session.value) {
     await getFriendships()
-    //friends.value.push(friends.value[0]) unexpected behavior on initial page load
+    //  friends.value.push() // unexpected behavior on initial page load
   }
 })
 
@@ -26,46 +25,29 @@ async function getFriendships() {
       sentRequests.value = data.filter((item) => item.request_type == FriendshipType.OUTGOING && item.status === FriendshipStatus.PENDING)
     });
 }
-
-const addFriend = async () => {
-  try {
-    const data = await $fetch('/api/v1/user/friends', {
-      method: 'POST',
-      body: JSON.stringify({ receiver_name: newFriend.value }),
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    console.log('Friend request sent successfully:', data);
-    newFriendError.value = '';
-    newFriend.value = ''
-    await getFriendships();
-  } catch (err) {
-    if (err.response) {
-      newFriendError.value = "Please check your input."
-      console.error('Error response:', err.response);
-      console.error('Error data:', err.response.data);
-    } else {
-      // Something else happened while setting up the request
-      console.error('Error message:', err.message);
-    }
-  }
-};
 </script>
 
 <template>
-  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends" @refresh="getFriendships"/>
-  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests" @refresh="getFriendships"/>
-  <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests" @refresh="getFriendships"/>
-
-  <div class="mt-3">
-    <input v-model="newFriend" class="rounded-3xl pl-2">
-    <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="addFriend">Add Friend</button>
-
-    <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
+  <div class="flex flex-col">
+    <!-- Buttons Section -->
+    <div class="flex justify-center mb-3">
+      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new Friends</button>
+      <ProfileFriendRequestModal v-show="showModal" @close-modal="showModal = false" @refresh="getFriendships" />
+    </div>
+
+    <!-- Responsive Size Content Section -->
+    <div class="overflow-y-auto" style="max-height: 43vh;">
+      <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
+        @refresh="getFriendships" />
+      <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
+        @refresh="getFriendships" />
+      <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
+        @refresh="getFriendships" />
+    </div>
   </div>
 </template>
 
+
 <style scoped>
 .error-message {
   color: red;
diff --git a/components/profile/ProfileOverview.vue b/components/profile/ProfileOverview.vue
index f8e09f9..4d881aa 100644
--- a/components/profile/ProfileOverview.vue
+++ b/components/profile/ProfileOverview.vue
@@ -7,7 +7,7 @@ import Friendlist from './Friendlist.vue';
 <template>
     <div>
         <div class="p-3">
-            <ProfileInformation class="py-8"/>
+            <ProfileInformation class="py-5"/>
             <Friendlist/>
         </div>
     </div>

From 6ab6fc628dea989699e471529ec16a780f15b3e3 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 13 Dec 2024 16:14:24 +0100
Subject: [PATCH 112/221] fixed userbox margin

---
 components/UsersView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index ddf3051..07c5343 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -32,7 +32,7 @@ const containerClasses = computed(() => {
 const userBoxContainerClasses = computed(() =>
     props.viewType === UserViewType.USERTURN
         ? 'flex flex-col space-y-1 md:space-y-3 h-full overflow-y-auto'
-        : 'flex gap-1 md:gap-3 md:mt-9 overflow-x-auto'
+        : 'flex gap-1 md:gap-3 overflow-x-auto'
 );
 
 

From 8ff3496f5a74d06de2806778848ab8b1c66fba82 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 13 Dec 2024 16:25:20 +0100
Subject: [PATCH 113/221] changed styling of modal

---
 components/profile/FriendRequestModal.vue | 2 +-
 components/profile/Friendlist.vue         | 2 +-
 components/profile/UserModal.vue          | 9 ++++-----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/profile/FriendRequestModal.vue b/components/profile/FriendRequestModal.vue
index ec79a2a..1e6a8c0 100644
--- a/components/profile/FriendRequestModal.vue
+++ b/components/profile/FriendRequestModal.vue
@@ -58,7 +58,7 @@ const addFriend = async () => {
     text-align: center;
     background-color: white;
     height: 500px;
-    width: 500px;
+    width: 40vb;
     margin-top: 10%;
     border-radius: 20px;
 }
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 3273810..5c13584 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -31,7 +31,7 @@ async function getFriendships() {
   <div class="flex flex-col">
     <!-- Buttons Section -->
     <div class="flex justify-center mb-3">
-      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new Friends</button>
+      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new friend</button>
       <ProfileFriendRequestModal v-show="showModal" @close-modal="showModal = false" @refresh="getFriendships" />
     </div>
 
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index cb96b0b..ef919cf 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -86,13 +86,13 @@ async function getFriendInformation() {
                     <Icon name="mdi:check" class="text-5xl text-red-600" />
                 </div>
             </div>
-            <div v-else-if="props.viewType === UserViewType.FRIENDS" class="flex mt-5 gap-10">
+            <div v-else-if="props.viewType === UserViewType.FRIENDS" class="flex mt-16 gap-10">
                 <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.REMOVE)">Remove Friend</button>
             </div>
-            <div v-else-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-5 gap-10">
+            <div v-else-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-16 gap-10">
                 <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.DECLINE)">Cancel Request</button>
             </div>
-            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-3 text-white" @click="$emit('close-modal')">Close</button>
         </div>
     </div>
 </template>
@@ -117,9 +117,8 @@ async function getFriendInformation() {
     text-align: center;
     background-color: white;
     height: 500px;
-    width: 500px;
+    width: 40vb;
     margin-top: 10%;
-    padding: 60px 0;
     border-radius: 20px;
 }
 

From e24bae8bf522127b80b78290c9c1b9f61fcaec5c Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 13 Dec 2024 18:14:48 +0100
Subject: [PATCH 114/221] add small Add additional add friend button

---
 components/UsersView.vue                  | 18 +++++++++++++++---
 components/profile/FriendRequestModal.vue |  2 +-
 components/profile/Friendlist.vue         |  4 ++--
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 07c5343..db677e0 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {type GetFriendsResponse, FriendshipStatus} from "@/types/api/user.friends";
+import {FriendshipStatus, type GetFriendsResponse} from "@/types/api/user.friends";
 import {UserViewType} from "@/types/components/users.view";
 import type {GetUserResponse} from "@/types/api/users";
 
@@ -12,6 +12,14 @@ const props = defineProps({
   users: {
     type: Array as PropType<GetFriendsResponse[] | GetUserResponse[]>,
     required: true,
+  },
+  onAction: {
+    type: Function as PropType<() => void>,
+    required: false
+  },
+  actionLabel: {
+    type: String,
+    required: false
   }
 });
 
@@ -48,7 +56,7 @@ function isUserInformation(user: GetFriendsResponse | GetUserResponse): user is
 
 // Map users conditionally depending on their type
 const mappedUsers: Array<GetUserResponse> = computed(() => {
-  if(!props.users || props.users.length < 1) return [];
+  if (!props.users || props.users.length < 1) return [];
 
   return props.users.map(user => {
     if (isGetFriendsResponse(user)) {
@@ -69,7 +77,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
                 ]"
   >
     <!-- Fixed Conditional Header -->
-    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2 flex justify-between">
       <p v-if="viewType === UserViewType.USERTURN">
         Your Turn
       </p>
@@ -85,6 +93,10 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
       <p v-else-if="viewType === UserViewType.SENTREQUESTS">
         Sent Friend Requests
       </p>
+      <button v-if="props.onAction && props.actionLabel" class="flex items-center text-gray-700" @click="props.onAction()">
+        <Icon name="mdi:plus"/>
+        {{ props.actionLabel }}
+      </button>
     </div>
 
     <!-- Scrollable User Boxes -->
diff --git a/components/profile/FriendRequestModal.vue b/components/profile/FriendRequestModal.vue
index 1e6a8c0..f2068a2 100644
--- a/components/profile/FriendRequestModal.vue
+++ b/components/profile/FriendRequestModal.vue
@@ -26,7 +26,7 @@ const addFriend = async () => {
 </script>
 
 <template>
-    <div class="modal-overlay">
+    <div class="modal-overlay z-50">
         <div class="modal">
             <p class="text-3xl font-bold">New friend</p>
             <p class="mb-3">Enter your friends name:</p>
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 5c13584..4776391 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -31,14 +31,14 @@ async function getFriendships() {
   <div class="flex flex-col">
     <!-- Buttons Section -->
     <div class="flex justify-center mb-3">
-      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new friend</button>
+      <button v-if="friends.length < 1" class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new friend</button>
       <ProfileFriendRequestModal v-show="showModal" @close-modal="showModal = false" @refresh="getFriendships" />
     </div>
 
     <!-- Responsive Size Content Section -->
     <div class="overflow-y-auto" style="max-height: 43vh;">
       <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
-        @refresh="getFriendships" />
+        action-label="Add Friend" :on-action="() => {showModal = true}" @refresh="getFriendships" />
       <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
         @refresh="getFriendships" />
       <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"

From ac75051e15583b2867c9df763828c4a3652e8592 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sun, 15 Dec 2024 19:08:50 +0100
Subject: [PATCH 115/221] fixed non-plural naming in UsersView

---
 components/UsersView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index db677e0..ca6ca07 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -79,10 +79,10 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
     <!-- Fixed Conditional Header -->
     <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2 flex justify-between">
       <p v-if="viewType === UserViewType.USERTURN">
-        Your Turn
+        Your Turn(s)
       </p>
       <p v-else-if="viewType === UserViewType.OPPONENTTURN">
-        Opponent's Turn
+        Opponent's Turn(s)
       </p>
       <p v-else-if="viewType === UserViewType.FRIENDS">
         Friends

From cdc6b35107486926ade9bea41c6b42573ea22de7 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sun, 15 Dec 2024 19:11:49 +0100
Subject: [PATCH 116/221] fix(layout): removed white borders of content

---
 layouts/FooterView.vue       | 2 +-
 layouts/HeaderFooterView.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/layouts/FooterView.vue b/layouts/FooterView.vue
index 77c5841..5e959b0 100644
--- a/layouts/FooterView.vue
+++ b/layouts/FooterView.vue
@@ -7,7 +7,7 @@
     <!-- Wrapper div für die Breiten-Kontrolle -->
     <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
       <!-- Content -->
-      <div class="flex-1 border rounded-3xl p-3">
+      <div class="flex-1 p-3">
           <slot name="content"/>
       </div>
 
diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index eb20070..f87986a 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -15,7 +15,7 @@
       </div>
 
       <!-- Content -->
-      <div class="h-full border rounded-3xl">
+      <div class="h-full">
         <slot name="content" />
       </div>
 

From 390ebce42fd08483780c41047262f595f83e4d83 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 15 Dec 2024 19:32:16 +0100
Subject: [PATCH 117/221] fixed z-index for usermodal

---
 components/profile/UserModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index ef919cf..f314364 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -73,7 +73,7 @@ async function getFriendInformation() {
 </script>
 
 <template>
-    <div class="modal-overlay">
+    <div class="modal-overlay z-50">
         <div class="modal">
             <NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" />
             <p v-if="props.viewType === UserViewType.REQUESTS">Do you want to accept {{ name }}'s friend request?'</p>

From 5ab9c96d6a7d3ffbb1598e19d9794e0260ed5d12 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sun, 15 Dec 2024 20:40:15 +0100
Subject: [PATCH 118/221] feat(game): Reworked responses from game endpoint

---
 pages/index.vue                    |  4 +-
 server/api/v1/games/index.get.ts   | 28 +++++++++++---
 server/api/v1/games/index.post.ts  | 62 ++++++++++++++++++++++++------
 server/utils/mapper/game-mapper.ts | 31 ++++++++++++---
 types/api/game.ts                  | 33 +++++++++++-----
 types/api/playlist.ts              |  7 ++++
 6 files changed, 132 insertions(+), 33 deletions(-)
 create mode 100644 types/api/playlist.ts

diff --git a/pages/index.vue b/pages/index.vue
index 4895739..e60da0a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -41,8 +41,8 @@ function setLevelbar(newValue: number) {
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6" :users="games?.active.map(game=>game.opponents[0])"/>
-          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6" :users="games?.waiting ? games?.waiting.map(game=>game.opponents[0]) : []"/>
+          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6" :users="games?.active.map(game=>game.players[0])"/>
+          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6" :users="games?.waiting ? games?.waiting.map(game=>game.players[0]) : []"/>
           <HomeControlsGameButtons class="h-1/6"/>
         </div>
       </template>
diff --git a/server/api/v1/games/index.get.ts b/server/api/v1/games/index.get.ts
index e482ad7..1d0c56c 100644
--- a/server/api/v1/games/index.get.ts
+++ b/server/api/v1/games/index.get.ts
@@ -1,6 +1,7 @@
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
-import {mapDatabaseRowsToGames} from "~/server/utils/mapper/game-mapper";
-import {GameStatus} from "~/types/api/game";
+import {mapDatabaseRowsToGames, mapGameToActiveGame} from "~/server/utils/mapper/game-mapper";
+import {GameStatus, GetGameResponse} from "~/types/api/game";
+import {fetchPreviewUrl} from "~/server/utils/spotify";
 
 export default defineEventHandler(async (event) => {
     // Require user to be authenticated
@@ -20,11 +21,28 @@ export default defineEventHandler(async (event) => {
     }
 
     const games = mapDatabaseRowsToGames(data);
+    const activeGames = await Promise.all(
+        games
+            .filter(game => game.status === GameStatus.PLAYING && game.creator_id !== user.id)
+            .map(async (game) => {
+                //  handle all the async preview URL fetches for this game
+                const updatedGame = { ...game };
+                await Promise.all(
+                    updatedGame.rounds.map(async (round) => {
+                        round.correct_song.preview_url = await fetchPreviewUrl(round.correct_song.id);
+                    })
+                );
+                // Then map synchronously
+                return mapGameToActiveGame(updatedGame);
+            })
+    );
 
-    return {
-        active: games.filter(game => game.status === GameStatus.PLAYING && game.creator_id !== user.id),
+    const response: GetGameResponse = {
+        active: activeGames,
         waiting: games.filter(game => game.status === GameStatus.PLAYING && game.creator_id === user.id),
         past: games.filter(game => game.status === GameStatus.FINISHED)
-    }
+    };
+
+    return response;
 
 });
\ No newline at end of file
diff --git a/server/api/v1/games/index.post.ts b/server/api/v1/games/index.post.ts
index 9da4e5b..c88c2e0 100644
--- a/server/api/v1/games/index.post.ts
+++ b/server/api/v1/games/index.post.ts
@@ -2,8 +2,11 @@ import {z} from "zod";
 import {spotifyIDRegex} from "~/server/utils/data-validation";
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 import {fetchPreviewUrl, getSongsFromPlaylist} from "~/server/utils/spotify";
-import type {GameRound, Song, SpotifySong} from "~/types/api/game";
+import type {ActiveGame, ActiveGameRound, GameInitResponse, GameRound, Song, SpotifySong} from "~/types/api/game";
+import {GameStatus} from "~/types/api/game";
 import type {SupabaseClient} from "@supabase/supabase-js";
+import type {Playlist} from "~/types/api/playlist";
+import type {PostgrestError} from "@supabase/postgrest-js";
 
 const GameInitSchema = z.object({
     playlist_id: z.string().regex(spotifyIDRegex),
@@ -70,11 +73,32 @@ export default defineEventHandler(async (event) => {
         return {error: 'unauthenticated'};
     }
 
-    if(result.data.opponent_id === user.id) {
+    if (result.data.opponent_id === user.id) {
         setResponseStatus(event, 400);
         return {error: 'You cannot play against yourself'};
     }
 
+    const client = serverSupabaseServiceRole(event);
+    const {data: playlist, error: playlistError}: {
+        data: Playlist | null,
+        error: PostgrestError | null
+    } = await client.from('playlists').select().eq('id', result.data.playlist_id).single();
+
+    if (playlistError) {
+        setResponseStatus(event, 500);
+        return {error: playlistError.message};
+    }
+
+    if (!playlist) {
+        setResponseStatus(event, 400);
+        return {error: 'Playlist not found'};
+    }
+
+    if (!playlist.enabled) {
+        setResponseStatus(event, 400);
+        return {error: 'Playlist is disabled'};
+    }
+
     // Determine songs
     const token = await getSpotifyToken();
     const spotifySongs = await getSongsFromPlaylist(token, result.data.playlist_id);
@@ -90,7 +114,6 @@ export default defineEventHandler(async (event) => {
     }
 
     const songs = spotifySongs.items.map((item: SpotifySong) => item.track).filter((track: Song) => track.is_playable);
-    const client = serverSupabaseServiceRole(event);
 
     try {
         await saveSongsToDatabase(client, songs);
@@ -107,22 +130,39 @@ export default defineEventHandler(async (event) => {
             }))
         }
 
-        const {error} = await client.rpc('init_game', init_game_params as never).select().single();
+        const {data: initData, error: error}: {
+            data: GameInitResponse | null,
+            error: PostgrestError | null
+        } = await client.rpc('init_game', init_game_params as never).select();
 
         if (error) {
             setResponseStatus(event, 500);
             return {error: error.message};
         }
 
-        const response = {
-            rounds: gameRounds.map((round) => ({
-                round: round.round,
-                preview_url: round.correct_song.preview_url!,
-                options: [round.correct_song, ...round.wrong_songs].sort(() => Math.random() - 0.5)
-            }))
+        const mappedGameRounds: ActiveGameRound[] = gameRounds.map((round) => ({
+            round: round.round,
+            preview_url: round.correct_song.preview_url!,
+            options: [round.correct_song, ...round.wrong_songs].sort(() => Math.random() - 0.5)
+        }));
+
+        const game: ActiveGame = {
+            game_id: initData!.game_id,
+            status: GameStatus.PLAYING,
+            creator_id: user.id,
+            playlist: {
+                id: result.data.playlist_id,
+                name: playlist.name,
+                cover: playlist.cover
+            },
+            players: [
+                {id: user.id},
+                {id: result.data.opponent_id}
+            ], // TODO: Fetch opponent data and fix this
+            rounds: mappedGameRounds
         }
 
-        return response;
+        return game;
     } catch (error) {
         setResponseStatus(event, 500);
         return {error: error instanceof Error ? error.message : 'An unknown error occurred'};
diff --git a/server/utils/mapper/game-mapper.ts b/server/utils/mapper/game-mapper.ts
index 390f06c..f482e25 100644
--- a/server/utils/mapper/game-mapper.ts
+++ b/server/utils/mapper/game-mapper.ts
@@ -1,8 +1,7 @@
 // Types from your original interfaces
 
-import type {Game, GameRound, Song} from "~/types/api/game";
+import type {ActiveGame, Game, GameRound, GameStatus, Song} from "~/types/api/game";
 import type {GetUserResponse} from "~/types/api/users";
-import {GameStatus} from "~/types/api/game";
 
 interface DatabaseGameRow {
     // Game basic info
@@ -56,7 +55,6 @@ const createSongFromRow = (
     id,
     name,
     artists: [{
-        id: 'placeholder', // You might want to adjust this based on your needs
         name: artist
     }],
     preview_url: previewUrl,
@@ -123,8 +121,8 @@ export const mapDatabaseRowsToGame = (rows: DatabaseGameRow[]): Game => {
             name: firstRow.playlist_name,
             cover: firstRow.playlist_cover
         },
-        opponents: [opponent],
-        songs: rounds,
+        players: [opponent],
+        rounds: rounds,
         created_at: firstRow.created_at
     };
 };
@@ -142,4 +140,25 @@ export const mapDatabaseRowsToGames = (rows: DatabaseGameRow[]): Game[] => {
     // Map each group of rows to a Game
     return Array.from(gameRows.values())
         .map(gameRows => mapDatabaseRowsToGame(gameRows));
-};
\ No newline at end of file
+};
+
+export const mapGameToActiveGame = (game: Game): ActiveGame => {
+    const mappedRounds = game.rounds.map((round) => ({
+        round: round.round,
+        preview_url: round.correct_song.preview_url!,
+        options: [round.correct_song, ...round.wrong_songs].map(option => {
+            // Remove preview URL from all options to not identify the correct one
+            option.preview_url = null;
+            return option;
+        }).sort(() => Math.random() - 0.5)
+    }));
+
+    return {
+        game_id: game.game_id,
+        status: game.status,
+        creator_id: game.creator_id,
+        playlist: game.playlist,
+        players: game.players,
+        rounds: mappedRounds
+    };
+}
\ No newline at end of file
diff --git a/types/api/game.ts b/types/api/game.ts
index 4f2cb5e..8315844 100644
--- a/types/api/game.ts
+++ b/types/api/game.ts
@@ -13,7 +13,6 @@ export interface Song {
 }
 
 interface SongArtist {
-    id: string;
     name: string;
 }
 
@@ -32,12 +31,31 @@ export interface Game {
         name: string;
         cover?: string;
     };
-    opponents: GetUserResponse[];
-    songs: GameRound[];
+    players: GetUserResponse[];
+    rounds: GameRound[];
     created_at: string;
     stats?: GameStats[];
 }
 
+export interface ActiveGame {
+    game_id: number;
+    status: GameStatus;
+    creator_id: string; // who created the game and thus already played its turn
+    playlist: {
+        id: string;
+        name: string;
+        cover?: string;
+    };
+    players: GetUserResponse[];
+    rounds: ActiveGameRound[];
+}
+
+export interface ActiveGameRound {
+    round: number;
+    preview_url: string;
+    options: Song[];
+}
+
 export enum GameStatus {
     PLAYING = 'playing',
     FINISHED = 'finished'
@@ -57,11 +75,8 @@ export interface GameStatsContent {
 }
 
 export interface GameInitResponse {
-    rounds: {
-        round: number;
-        preview_url: string;
-        options: Song[];
-    }
+    game_id: number,
+    new_created_at: string
 }
 
 // Requests
@@ -71,7 +86,7 @@ export interface GameInitRequest {
 }
 
 export interface GetGameResponse {
-    active: Game[];
+    active: ActiveGame[];
     waiting: Game[];
     past: Game[];
 }
\ No newline at end of file
diff --git a/types/api/playlist.ts b/types/api/playlist.ts
new file mode 100644
index 0000000..20dd84c
--- /dev/null
+++ b/types/api/playlist.ts
@@ -0,0 +1,7 @@
+export interface Playlist {
+    id: string;
+    spotifyId: string;
+    cover?: string;
+    enabled: boolean;
+    name: string;
+}
\ No newline at end of file

From 0d58e961ff6d03ae85bba7de4bb2d0a8f264f018 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sun, 15 Dec 2024 20:58:18 +0100
Subject: [PATCH 119/221] feat(game): storing preview urls in db

---
 server/api/v1/games/index.get.ts   | 10 +++++++---
 server/utils/mapper/game-mapper.ts |  3 ++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/server/api/v1/games/index.get.ts b/server/api/v1/games/index.get.ts
index 1d0c56c..2e78bdd 100644
--- a/server/api/v1/games/index.get.ts
+++ b/server/api/v1/games/index.get.ts
@@ -1,6 +1,7 @@
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 import {mapDatabaseRowsToGames, mapGameToActiveGame} from "~/server/utils/mapper/game-mapper";
-import {GameStatus, GetGameResponse} from "~/types/api/game";
+import type {GetGameResponse} from "~/types/api/game";
+import {GameStatus} from "~/types/api/game";
 import {fetchPreviewUrl} from "~/server/utils/spotify";
 
 export default defineEventHandler(async (event) => {
@@ -26,10 +27,13 @@ export default defineEventHandler(async (event) => {
             .filter(game => game.status === GameStatus.PLAYING && game.creator_id !== user.id)
             .map(async (game) => {
                 //  handle all the async preview URL fetches for this game
-                const updatedGame = { ...game };
+                const updatedGame = {...game};
                 await Promise.all(
                     updatedGame.rounds.map(async (round) => {
-                        round.correct_song.preview_url = await fetchPreviewUrl(round.correct_song.id);
+                        if (!round.correct_song.preview_url) {
+                            round.correct_song.preview_url = await fetchPreviewUrl(round.correct_song.id);
+                            client.from('songs').update({preview_url: round.correct_song.preview_url} as never).eq('spotify_song_id', round.correct_song.id);
+                        }
                     })
                 );
                 // Then map synchronously
diff --git a/server/utils/mapper/game-mapper.ts b/server/utils/mapper/game-mapper.ts
index f482e25..9056d7a 100644
--- a/server/utils/mapper/game-mapper.ts
+++ b/server/utils/mapper/game-mapper.ts
@@ -1,6 +1,7 @@
 // Types from your original interfaces
 
-import type {ActiveGame, Game, GameRound, GameStatus, Song} from "~/types/api/game";
+import type {ActiveGame, Game, GameRound, Song} from "~/types/api/game";
+import {GameStatus} from "~/types/api/game";
 import type {GetUserResponse} from "~/types/api/users";
 
 interface DatabaseGameRow {

From 18570f04fc0b5704a76f3bf1292f9f1e5874e926 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sun, 15 Dec 2024 21:04:39 +0100
Subject: [PATCH 120/221] fix some typing errors

---
 server/api/v1/games/index.post.ts  | 2 +-
 server/utils/mapper/game-mapper.ts | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/server/api/v1/games/index.post.ts b/server/api/v1/games/index.post.ts
index c88c2e0..f6fc448 100644
--- a/server/api/v1/games/index.post.ts
+++ b/server/api/v1/games/index.post.ts
@@ -133,7 +133,7 @@ export default defineEventHandler(async (event) => {
         const {data: initData, error: error}: {
             data: GameInitResponse | null,
             error: PostgrestError | null
-        } = await client.rpc('init_game', init_game_params as never).select();
+        } = await client.rpc('init_game', init_game_params as never).select().single();
 
         if (error) {
             setResponseStatus(event, 500);
diff --git a/server/utils/mapper/game-mapper.ts b/server/utils/mapper/game-mapper.ts
index 9056d7a..c98b372 100644
--- a/server/utils/mapper/game-mapper.ts
+++ b/server/utils/mapper/game-mapper.ts
@@ -1,7 +1,6 @@
 // Types from your original interfaces
 
-import type {ActiveGame, Game, GameRound, Song} from "~/types/api/game";
-import {GameStatus} from "~/types/api/game";
+import type {ActiveGame, Game, GameRound, Song,GameStatus} from "~/types/api/game";
 import type {GetUserResponse} from "~/types/api/users";
 
 interface DatabaseGameRow {

From c94d9f8e19b3e1bdb9dbe14dd16a6c6782a759a1 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sun, 15 Dec 2024 21:24:12 +0100
Subject: [PATCH 121/221] fixed wrong fetch sources & fixed game endpoint name

---
 components/profile/Friendlist.vue           | 2 +-
 composables/useGames.ts                     | 2 +-
 composables/useUser.ts                      | 2 +-
 server/api/v1/{games => game}/index.get.ts  | 0
 server/api/v1/{games => game}/index.post.ts | 0
 5 files changed, 3 insertions(+), 3 deletions(-)
 rename server/api/v1/{games => game}/index.get.ts (100%)
 rename server/api/v1/{games => game}/index.post.ts (100%)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 4776391..aff3afd 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -18,7 +18,7 @@ onMounted(async () => {
 })
 
 async function getFriendships() {
-  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
+  $fetch<GetFriendsResponse[]>('/api/v1/user/friends')
     .then((data) => {
       requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
       friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
diff --git a/composables/useGames.ts b/composables/useGames.ts
index 9339569..ff83f48 100644
--- a/composables/useGames.ts
+++ b/composables/useGames.ts
@@ -25,5 +25,5 @@ export const useGame = () => {
 }
 
 async function getGames() {
-    return await $fetch<GetGameResponse>('http://localhost:3000/api/v1/games/')
+    return await $fetch<GetGameResponse>('/api/v1/game/')
 }
\ No newline at end of file
diff --git a/composables/useUser.ts b/composables/useUser.ts
index d068454..4699e39 100644
--- a/composables/useUser.ts
+++ b/composables/useUser.ts
@@ -30,5 +30,5 @@ export const useUser = () => {
 }
 
 async function useProfileInformation() {
-    return await $fetch<GetUserResponse>('http://localhost:3000/api/v1/user/')
+    return await $fetch<GetUserResponse>('/api/v1/user/')
 }
\ No newline at end of file
diff --git a/server/api/v1/games/index.get.ts b/server/api/v1/game/index.get.ts
similarity index 100%
rename from server/api/v1/games/index.get.ts
rename to server/api/v1/game/index.get.ts
diff --git a/server/api/v1/games/index.post.ts b/server/api/v1/game/index.post.ts
similarity index 100%
rename from server/api/v1/games/index.post.ts
rename to server/api/v1/game/index.post.ts

From 4b3be6c9e481998a93763a446f1473c1fa7328bb Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 16 Dec 2024 13:30:23 +0100
Subject: [PATCH 122/221] feat(game): added play endpoint and gameplay logic

---
 DB/game.sql                             |  97 +++++++++++++++
 server/api/v1/game/[uid]/play.post.ts   | 151 ++++++++++++++++++++++++
 server/api/v1/game/index.post.ts        |   2 +-
 server/api/v1/user/friends/index.get.ts |  14 +--
 server/utils/mapper/game-mapper.ts      |  56 +++++++++
 types/api/game.ts                       |   2 +-
 types/api/user.friends.ts               |  15 ++-
 7 files changed, 327 insertions(+), 10 deletions(-)
 create mode 100644 server/api/v1/game/[uid]/play.post.ts

diff --git a/DB/game.sql b/DB/game.sql
index ec34e92..4017073 100644
--- a/DB/game.sql
+++ b/DB/game.sql
@@ -240,4 +240,101 @@ BEGIN
                  JOIN playlists p ON g.playlist_id = p.id
         ORDER BY g.created_at DESC, gr.song_order ASC;
 END;
+$$ LANGUAGE plpgsql;
+
+-- Get a game by its ID
+-- Returns multiple rows, one for each player in the game
+CREATE OR REPLACE FUNCTION get_game(p_game_id INTEGER)
+    RETURNS TABLE
+            (
+                -- Game info
+                game_id         INTEGER,
+                status          game_status,
+                playlist_id     TEXT,
+                created_at      TIMESTAMPTZ,
+                -- Players array
+                player_id       UUID,
+                is_creator      BOOLEAN,
+                has_played      BOOLEAN,
+                -- Round info
+                round_number    INTEGER,
+                correct_song_id TEXT
+            )
+AS
+$$
+BEGIN
+    RETURN QUERY
+        SELECT g.game_id,
+               g.status,
+               g.playlist_id,
+               g.created_at,
+               gp.user_id,
+               gp.is_creator,
+                EXISTS(SELECT 1
+                         FROM game_player_song_stats gpss
+                         WHERE gpss.game_id = g.game_id
+                            AND gpss.user_id = gp.user_id) AS has_played,
+               gr.song_order,
+               gr.song_id as correct_song_id
+        FROM games g
+                 -- Join to get all players
+                 JOIN game_players gp
+                      ON g.game_id = gp.game_id
+            -- Join to get rounds
+                 JOIN game_rounds gr
+                      ON g.game_id = gr.game_id
+        WHERE g.game_id = p_game_id
+        ORDER BY gr.song_order;
+END;
+$$ LANGUAGE plpgsql;
+
+-- A player finished his rounds
+CREATE OR REPLACE FUNCTION handle_player_finish(
+    p_game_id INTEGER,
+    p_user_id UUID,
+    p_song_orders INTEGER[],
+    p_times_to_guess INTEGER[],
+    p_correct_guesses BOOLEAN[],
+    p_guessed_song_ids TEXT[],
+    p_score INTEGER
+) RETURNS VOID AS
+$$
+DECLARE
+    i INTEGER;
+BEGIN
+    -- Insert all stats
+    FOR i IN 1..array_length(p_song_orders, 1)
+        LOOP
+            INSERT INTO game_player_song_stats (game_id,
+                                                user_id,
+                                                song_order,
+                                                time_to_guess,
+                                                correct_guess,
+                                                guessed_song_id)
+            VALUES (p_game_id,
+                    p_user_id,
+                    p_song_orders[i],
+                    p_times_to_guess[i],
+                    p_correct_guesses[i],
+                    p_guessed_song_ids[i]);
+        END LOOP;
+
+    -- Update player's score with provided score
+    UPDATE game_players
+    SET score = p_score
+    WHERE game_id = p_game_id
+      AND user_id = p_user_id;
+
+    -- Check if all players have finished and update game status if needed
+    UPDATE games
+    SET status = 'finished'
+    WHERE game_id = p_game_id
+      AND NOT EXISTS (SELECT 1
+                      FROM game_players gp
+                               LEFT JOIN (SELECT DISTINCT user_id
+                                          FROM game_player_song_stats
+                                          WHERE game_id = p_game_id) gpss ON gp.user_id = gpss.user_id
+                      WHERE gp.game_id = p_game_id
+                        AND gpss.user_id IS NULL);
+END;
 $$ LANGUAGE plpgsql;
\ No newline at end of file
diff --git a/server/api/v1/game/[uid]/play.post.ts b/server/api/v1/game/[uid]/play.post.ts
new file mode 100644
index 0000000..904f001
--- /dev/null
+++ b/server/api/v1/game/[uid]/play.post.ts
@@ -0,0 +1,151 @@
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import {z} from "zod";
+import {GameStatus} from "~/types/api/game";
+import type {PostgrestError} from "@supabase/postgrest-js";
+import type {GameDB, GetGameDBRow} from "~/server/utils/mapper/game-mapper";
+import {mapGameRows} from "~/server/utils/mapper/game-mapper";
+
+const PlayGameSchema = z.object({
+    round: z.number(),
+    guess: z.string().regex(spotifyIDRegex, {message: 'Invalid Spotify ID'}),
+    time: z.number()
+}).readonly()
+
+
+function calculateScore(time_to_guess: number): number {
+    return Math.floor((15 - time_to_guess) * 9.81);
+}
+
+export default defineEventHandler(async (event) => {
+    const gameId = getRouterParam(event, 'uid');
+
+    // validate game id
+    if (!gameId) {
+        setResponseStatus(event, 400);
+        return {error: 'Invalid game id'};
+    }
+
+    // validate post-request body
+    const body = await readValidatedBody(event, body => PlayGameSchema.safeParse(body));
+    if (!body.success) {
+        setResponseStatus(event, 400);
+        return {error: body.error.issues};
+    }
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    let game = await useStorage<GameDB>().getItem('game:' + gameId);
+    const client = serverSupabaseServiceRole(event);
+
+    // Get game from database if not present in memory
+    if (!game) {
+        const {data: rows, error: getGameError}: {
+            data: GetGameDBRow[] | null,
+            error: PostgrestError | null
+        } = await client.rpc('get_game', {p_game_id: gameId} as never).select();
+
+        if (getGameError) {
+            setResponseStatus(event, 500);
+            return {error: 'Internal server error'};
+        }
+
+        if (!rows) {
+            setResponseStatus(event, 404);
+            return {error: 'Game not found'};
+        }
+
+        game = mapGameRows(rows);
+
+        // Save game to memory
+        useStorage().setItem('game:' + gameId, game).then(() => console.debug('Added game to memory:' + gameId));
+    }
+
+    if (!game) {
+        setResponseStatus(event, 500);
+        return {error: 'Game not found in memory'};
+    }
+
+    // Check if game is still active
+    if (game.status !== GameStatus.PLAYING) {
+        setResponseStatus(event, 400);
+        return {error: 'Game is not active'};
+    }
+
+    // Check if player is part of the game
+    if (!game.players.some(player => player.player_id === user.id)) {
+        setResponseStatus(event, 400);
+        return {error: 'Player not part of the game'};
+    }
+
+    // Check if round is valid
+    if (game.rounds.length < body.data.round) {
+        setResponseStatus(event, 400);
+        return {error: 'Invalid round'};
+    }
+
+    // Handle rounds
+    const round = game.rounds[body.data.round - 1];
+    const player = game.players.find(player => player.player_id === user.id);
+
+    // Check if round has already been played by player
+    if(game.rounds.some(round => round.round_number === body.data.round && round.time_to_guess) || player?.has_played) {
+        setResponseStatus(event, 400);
+        return {error: 'Round has already been played'};
+    }
+
+    if (round.correct_song_id === body.data.guess) {
+        round.correct_guess = true;
+        round.guess = body.data.guess;
+        round.time_to_guess = body.data.time;
+
+        const reward = calculateScore(body.data.time);
+
+        if (player && player.score) {
+            player.score += reward;
+        } else player!.score = reward;
+
+    } else {
+        round.correct_guess = false;
+        round.guess = body.data.guess;
+        round.time_to_guess = body.data.time;
+
+        if (!player!.score) {
+            player!.score = 0;
+        }
+    }
+
+    // Update game in memory
+    useStorage().setItem('game:' + gameId, game).then(() => console.debug('Updated game in memory:' + gameId));
+
+    // Handle Last round has been played
+    if (game.rounds.length === body.data.round) {
+
+        // persist game to database
+        const params = {
+            p_game_id: gameId,
+            p_user_id: user.id,
+            p_song_orders: game.rounds.map(round => round.round_number),
+            p_times_to_guess: game.rounds.map(round => round.time_to_guess),
+            p_correct_guesses: game.rounds.map(round => round.correct_guess),
+            p_guessed_song_ids: game.rounds.map(round => round.guess),
+            p_score: game.players.find(player => player.player_id === user.id)?.score
+        };
+        const {error} = await client.rpc('handle_player_finish', params as never);
+
+        if (error) {
+            setResponseStatus(event, 500);
+            return {error: 'Internal server error'};
+        }
+
+        // asynchronously remove game from memory. No await!
+        useStorage().removeItem('game:' + gameId).then(() => console.debug('Removed game from memory:' + gameId));
+    }
+
+    return {correct_guess: round.correct_guess, score: player!.score, was_last_round: game.rounds.length === body.data.round};
+
+});
diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
index f6fc448..52f27d5 100644
--- a/server/api/v1/game/index.post.ts
+++ b/server/api/v1/game/index.post.ts
@@ -9,7 +9,7 @@ import type {Playlist} from "~/types/api/playlist";
 import type {PostgrestError} from "@supabase/postgrest-js";
 
 const GameInitSchema = z.object({
-    playlist_id: z.string().regex(spotifyIDRegex),
+    playlist_id: z.string().regex(spotifyIDRegex, {message: 'Invalid Spotify ID'}),
     opponent_id: z.string().uuid()
 }).readonly()
 
diff --git a/server/api/v1/user/friends/index.get.ts b/server/api/v1/user/friends/index.get.ts
index 4a9adbb..b5d3c8f 100644
--- a/server/api/v1/user/friends/index.get.ts
+++ b/server/api/v1/user/friends/index.get.ts
@@ -1,5 +1,5 @@
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
-import type {FriendError, GetFriendParam, GetFriendsResponse} from "~/types/api/user.friends";
+import type {FriendError, GetFriendParam, GetFriendsDBResponse, GetFriendsResponse} from "~/types/api/user.friends";
 
 // Not relative to userid because you should always only be able to see your own friends
 // User id can be grabbed from the access token
@@ -17,7 +17,7 @@ export default defineEventHandler(async (event) => {
     const param: GetFriendParam = {user_id: user.id};
 
     const {data, error}: {
-        data: GetFriendsResponse[] | null,
+        data: GetFriendsDBResponse[] | null,
         error: FriendError | null
     } = await client.rpc('get_friends', param as never);
 
@@ -28,16 +28,18 @@ export default defineEventHandler(async (event) => {
     }
 
     if (data === null) return [];
+    // redundant, but seems to fix type error
+    const friendData: GetFriendsDBResponse[] = data
 
     // Hide spotify id if not visible
     // Yes this works even when the IDE marks it as an error
-    data!.forEach(friend => {
+    friendData.forEach(friend => {
         if (!friend.friend_spotify_visibility) {
             delete friend.friend_spotify_id;
         }
     });
 
-    const friends = data.map((friendship: GetFriendsResponse) => {
+    const friends = friendData.map((friendship: GetFriendsDBResponse) => {
         return {
             friendship_id: friendship.friendship_id,
             friend_id: friendship.friend_id,
@@ -50,9 +52,7 @@ export default defineEventHandler(async (event) => {
                 avatar_url: friendship.friend_avatar,
                 username: friendship.friend_username,
                 spotify_id: friendship.friend_spotify_visibility ? friendship.friend_spotify_id : undefined,
-                spotify_visibility: friendship.friend_spotify_visibility,
-                daily_streak: undefined,
-                daily_streak_updated_at: undefined
+                spotify_visibility: friendship.friend_spotify_visibility
             }
         }
     });
diff --git a/server/utils/mapper/game-mapper.ts b/server/utils/mapper/game-mapper.ts
index c98b372..ff79ada 100644
--- a/server/utils/mapper/game-mapper.ts
+++ b/server/utils/mapper/game-mapper.ts
@@ -46,6 +46,42 @@ interface DatabaseGameRow {
     wrong_song_3_preview_url: string | null;
 }
 
+export interface GetGameDBRow {
+    game_id: number;
+    status: GameStatus;
+    playlist_id: string;
+    created_at: string;
+    player_id: string;
+    is_creator: boolean;
+    has_played: boolean;
+    round_number: number;
+    correct_song_id: string;
+}
+
+interface GameDBPlayer {
+    player_id: string;
+    is_creator: boolean;
+    has_played: boolean;
+    score?: number;
+}
+
+interface GameDBRound {
+    round_number: number;
+    correct_song_id: string;
+    time_to_guess?: number;
+    correct_guess?: boolean;
+    guess?: string;
+}
+
+export interface GameDB {
+    game_id: number;
+    status: GameStatus;
+    playlist_id: string;
+    created_at: string;
+    players: GameDBPlayer[];
+    rounds: GameDBRound[];
+}
+
 const createSongFromRow = (
     id: string,
     name: string,
@@ -161,4 +197,24 @@ export const mapGameToActiveGame = (game: Game): ActiveGame => {
         players: game.players,
         rounds: mappedRounds
     };
+}
+
+export function mapGameRows(rows: GetGameDBRow[]): GameDB {
+    const firstRow = rows[0];
+
+    return {
+        game_id: firstRow.game_id,
+        status: firstRow.status,
+        playlist_id: firstRow.playlist_id,
+        created_at: firstRow.created_at,
+        players: [...new Set(rows.map(row => row.player_id))].map(playerId => ({
+            player_id: playerId,
+            is_creator: rows.find(r => r.player_id === playerId)!.is_creator,
+            has_played: rows.find(r => r.player_id === playerId)!.has_played
+        })),
+        rounds: [...new Set(rows.map(row => row.round_number))].map(roundNum => ({
+            round_number: roundNum,
+            correct_song_id: rows.find(r => r.round_number === roundNum)!.correct_song_id
+        }))
+    };
 }
\ No newline at end of file
diff --git a/types/api/game.ts b/types/api/game.ts
index 8315844..19f637d 100644
--- a/types/api/game.ts
+++ b/types/api/game.ts
@@ -68,7 +68,7 @@ export interface GameStats {
 }
 
 export interface GameStatsContent {
-    song_order: number;
+    round_number: number;
     song: Song;
     time_to_guess: number;
     correct_guess: boolean;
diff --git a/types/api/user.friends.ts b/types/api/user.friends.ts
index 7a75062..5b34676 100644
--- a/types/api/user.friends.ts
+++ b/types/api/user.friends.ts
@@ -1,5 +1,4 @@
 // ----- Internal Types -----
-import type * as url from "node:url";
 import type {GetUserResponse} from "@/types/api/users";
 export interface FriendError {
     message: string
@@ -23,6 +22,20 @@ export interface FriendActionParam {
     friendship_id_param: number,
 }
 
+export interface GetFriendsDBResponse {
+    friendship_id: number;
+    friend_id: string;
+    friend_username: string;
+    friend_avatar: string | null;
+    friend_spotify_id?: string;
+    friend_spotify_visibility: boolean;
+    status: FriendshipStatus;
+    action_user_id: string;
+    created_at: Date;
+    updated_at: Date;
+    request_type: string;
+}
+
 // ----- For API Consumer -----
 export interface GetFriendsResponse {
     friendship_id: number,

From 8790c1fcca7771c5736dabed438f19e489c1fb73 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 16 Dec 2024 15:41:07 +0100
Subject: [PATCH 123/221] fix(game): fix game init procedure

---
 DB/game.sql                      | 10 +++++-----
 server/api/v1/game/index.post.ts | 12 ++++++++++--
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/DB/game.sql b/DB/game.sql
index 4017073..fbafea8 100644
--- a/DB/game.sql
+++ b/DB/game.sql
@@ -127,7 +127,7 @@ BEGIN
     WHERE game_players.game_id = new_game_id
       AND game_players.user_id = player_ids[1];
 
-    -- Insert songs (assuming the songs already exist in the songs table)
+    -- Insert songs with preserved order
     INSERT INTO game_rounds (game_id,
                              song_order,
                              song_id,
@@ -135,16 +135,16 @@ BEGIN
                              wrong_option_2,
                              wrong_option_3)
     SELECT new_game_id,
-           row_number() OVER (ORDER BY song.spotify_song_id), -- Added ORDER BY
+           ordinality, -- This preserves the array order
            song.spotify_song_id,
            song.wrong_option_1,
            song.wrong_option_2,
            song.wrong_option_3
-    FROM unnest(song_data) song;
+    FROM unnest(song_data) WITH ORDINALITY as song;
 
+    -- Return the new game info
     RETURN QUERY
-        SELECT new_game_id AS game_id, new_created_at AS created_at;
-
+        SELECT new_game_id, new_created_at;
 END;
 $$ LANGUAGE plpgsql;
 
diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
index 52f27d5..0d1703d 100644
--- a/server/api/v1/game/index.post.ts
+++ b/server/api/v1/game/index.post.ts
@@ -122,7 +122,7 @@ export default defineEventHandler(async (event) => {
         const init_game_params = {
             playlist_id_input: result.data.playlist_id,
             player_ids: [user.id, result.data.opponent_id],
-            song_data: gameRounds.map(round => ({
+            song_data: gameRounds.sort((gr)=> gr.round).map(round => ({
                 spotify_song_id: round.correct_song.id,
                 wrong_option_1: round.wrong_songs[0].id,
                 wrong_option_2: round.wrong_songs[1].id,
@@ -143,7 +143,15 @@ export default defineEventHandler(async (event) => {
         const mappedGameRounds: ActiveGameRound[] = gameRounds.map((round) => ({
             round: round.round,
             preview_url: round.correct_song.preview_url!,
-            options: [round.correct_song, ...round.wrong_songs].sort(() => Math.random() - 0.5)
+            options: [round.correct_song, ...round.wrong_songs]
+                .sort(() => Math.random() - 0.5)
+                .map((song) => ({
+                    id: song.id,
+                    name: song.name,
+                    artists: [song.artists[0].name],
+                    is_playable: song.is_playable,
+                    preview_url: null
+                }))
         }));
 
         const game: ActiveGame = {

From b509605b170ca83c9b373e6b99a755c9d2e186c8 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 16 Dec 2024 17:51:28 +0100
Subject: [PATCH 124/221] feat(game): change scoring. Implement  test page

---
 DB/game.sql                           |   6 +-
 pages/playtest.vue                    | 127 ++++++++++++++++++++++++--
 server/api/v1/game/[uid]/play.post.ts |  21 ++++-
 types/api/game.ts                     |  12 +++
 4 files changed, 152 insertions(+), 14 deletions(-)

diff --git a/DB/game.sql b/DB/game.sql
index fbafea8..1cc578e 100644
--- a/DB/game.sql
+++ b/DB/game.sql
@@ -81,7 +81,7 @@ CREATE TABLE IF NOT EXISTS game_player_song_stats
     game_id         INTEGER REFERENCES games (game_id) ON DELETE CASCADE,
     user_id         UUID REFERENCES users (id),
     song_order      INTEGER NOT NULL,
-    time_to_guess   INTEGER,
+    time_to_guess   NUMERIC,
     correct_guess   BOOLEAN NOT NULL DEFAULT false,
     guessed_song_id TEXT,
     PRIMARY KEY (game_id, user_id, song_order),
@@ -289,11 +289,11 @@ END;
 $$ LANGUAGE plpgsql;
 
 -- A player finished his rounds
-CREATE OR REPLACE FUNCTION handle_player_finish(
+CREATE OR REPLACE FUNCTION game_handle_player_finish(
     p_game_id INTEGER,
     p_user_id UUID,
     p_song_orders INTEGER[],
-    p_times_to_guess INTEGER[],
+    p_times_to_guess NUMERIC[],
     p_correct_guesses BOOLEAN[],
     p_guessed_song_ids TEXT[],
     p_score INTEGER
diff --git a/pages/playtest.vue b/pages/playtest.vue
index 7ed6385..43d27f5 100644
--- a/pages/playtest.vue
+++ b/pages/playtest.vue
@@ -1,6 +1,120 @@
 <script setup lang="ts">
 
 import GameSelectLayout from "@/layouts/Game/GameSelectLayout.vue";
+import type {ActiveGame, PlayGameResponse, Song} from "@/types/api/game";
+
+const game = ref<ActiveGame | null>(null)
+const round = computed(() => game.value ? game.value.rounds[roundIdx.value - 1] : null)
+const time = ref(0);
+const roundIdx = ref(1)
+
+const score = ref(0);
+const scoreAddition = ref(0);
+
+const audio = ref<HTMLAudioElement | null>(null);
+const volume = ref(0.1);
+
+onMounted(async () => {
+  await nextTick();
+  audio.value = new Audio();
+  audio.value.preload = 'auto';
+  audio.value.controls = false;
+  audio.value.volume = volume.value;
+
+  audio.value.onended = async () => {
+    await clickOption(round.value!.options[0]);
+  }
+});
+
+
+const playAudio = (url: string) => {
+  if (!audio.value) return;
+  audio.value.src = url;
+  audio.value.volume = volume.value;
+  audio.value.load();
+  // wait for audio to load
+  audio.value.oncanplay = () => {
+    time.value = new Date().getTime(); // start measuring time to guess
+    audio.value!.play();
+  }
+};
+
+const pauseAudio = () => {
+  if (!audio.value) return;
+  audio.value.pause();
+};
+
+const nextRound = () => {
+  if (!game.value || !round.value) return;
+  // Game end
+  if (roundIdx.value >= game.value.rounds.length) {
+    pauseAudio();
+    game.value = null;
+    roundIdx.value = 1;
+    audio.value!.src = '';
+    scoreAddition.value = 0;
+    return
+  } else roundIdx.value += 1;
+
+  playAudio(round.value.preview_url);
+}
+
+const clickOption = async (option: Song) => {
+  time.value = new Date().getTime() - time.value; // end measuring time to guess
+
+  // mark clicked option
+  const el = document.getElementById(option.id);
+  if (!el) return;
+  el.classList.add('bg-blue-400');
+
+  // async fetch if the guess is correct
+  const response = $fetch<PlayGameResponse>(`/api/v1/game/${game.value!.game_id}/play`, {
+    method: 'POST',
+    body: {
+      "round": roundIdx.value,
+      "guess": option.id,
+      "time": time.value / 1000,
+    }
+  })
+
+  // wait a fixed amount for pretty UI
+  await new Promise(resolve => setTimeout(resolve, 1000));
+
+  const data: PlayGameResponse = await response;
+  if (!data) return;
+
+  scoreAddition.value = data.score - score.value;
+  score.value = data.score;
+
+
+  el.classList.remove('bg-blue-400');
+  if (data.correct_guess) {
+    el.classList.add('bg-green-400');
+  } else {
+    el.classList.add('bg-red-400');
+  }
+
+  // wait for UI
+  await new Promise(resolve => setTimeout(resolve, 1250));
+  pauseAudio();
+  await new Promise(resolve => setTimeout(resolve, 175));
+
+  el.classList.remove('bg-green-400', 'bg-red-400');
+
+  nextRound();
+}
+
+async function newGame() {
+  const data = await $fetch<ActiveGame>('/api/v1/game', {
+    method: 'POST',
+    body: JSON.stringify({
+      playlist_id: '0X9Td39Sy24s2vmmiTFIez',
+      opponent_id: '9da97502-5363-4964-ae80-c242a053e810',
+    }),
+  });
+  playAudio(data.rounds[0].preview_url);
+  game.value = data;
+}
 </script>
 
 <template>
@@ -8,23 +122,24 @@ import GameSelectLayout from "@/layouts/Game/GameSelectLayout.vue";
     <GameSelectLayout>
       <template #scoreboard>
         <div class="text-white text-center">User 1 vs User 2</div>
+        <button v-if="!game" @click="newGame()">New Game</button>
       </template>
       <template #round-indicator>
         <div class="text-white text-center"> Round:</div>
         <div class="text-white text-center">🔴🔴⭕⭕⭕</div>
+        <div class="text-white text-center" v-text="score"/>
+        <div v-if="scoreAddition" class="text-white text-center"> +{{scoreAddition}}</div>
       </template>
       <template #select-options>
         <br>
         <div class="text-white text-center">Select:</div>
-        <div class="flex  justify-center">
+        <div v-if="game" class="flex  justify-center">
           <div class="grid grid-cols-2 grid-rows-2 gap-4 text-2xl">
-            <button class="container px-5 py-2.5 rounded bg-amber-50">Song A</button>
-            <button class="container px-5 py-2.5 rounded bg-amber-50">Song B</button>
-            <button class="container px-5 py-2.5 rounded bg-amber-50">Song C</button>
-            <button class="container px-5 py-2.5 rounded bg-amber-50">Song D</button>
+            <button v-for="option in round!.options" :id="option.id" :key="option.id"
+                    class="container px-5 py-2.5 rounded bg-amber-50" @click="clickOption(option)"
+                    v-text="option.name"/>
           </div>
         </div>
-
       </template>
     </GameSelectLayout>
   </div>
diff --git a/server/api/v1/game/[uid]/play.post.ts b/server/api/v1/game/[uid]/play.post.ts
index 904f001..7e05641 100644
--- a/server/api/v1/game/[uid]/play.post.ts
+++ b/server/api/v1/game/[uid]/play.post.ts
@@ -12,8 +12,15 @@ const PlayGameSchema = z.object({
 }).readonly()
 
 
+// Calculate score based on time to guess
+// Upper bound is 500, lower bound is 18 (max time to guess is 30s)
+// Perfect score for guessing lower than 0.175 s
+const time_ceiling_for_perfect_score = Math.abs(0.175);
+
 function calculateScore(time_to_guess: number): number {
-    return Math.floor((15 - time_to_guess) * 9.81);
+    const reward = Math.floor(500 * Math.exp((-0.11 * (time_to_guess - time_ceiling_for_perfect_score))));
+    if (reward > 500) return 500;
+    return reward;
 }
 
 export default defineEventHandler(async (event) => {
@@ -93,7 +100,7 @@ export default defineEventHandler(async (event) => {
     const player = game.players.find(player => player.player_id === user.id);
 
     // Check if round has already been played by player
-    if(game.rounds.some(round => round.round_number === body.data.round && round.time_to_guess) || player?.has_played) {
+    if (game.rounds.some(round => round.round_number === body.data.round && round.time_to_guess) || player?.has_played) {
         setResponseStatus(event, 400);
         return {error: 'Round has already been played'};
     }
@@ -133,9 +140,9 @@ export default defineEventHandler(async (event) => {
             p_times_to_guess: game.rounds.map(round => round.time_to_guess),
             p_correct_guesses: game.rounds.map(round => round.correct_guess),
             p_guessed_song_ids: game.rounds.map(round => round.guess),
-            p_score: game.players.find(player => player.player_id === user.id)?.score
+            p_score: Math.floor(game.players.find(player => player.player_id === user.id)!.score!)
         };
-        const {error} = await client.rpc('handle_player_finish', params as never);
+        const {error} = await client.rpc('game_handle_player_finish', params as never);
 
         if (error) {
             setResponseStatus(event, 500);
@@ -146,6 +153,10 @@ export default defineEventHandler(async (event) => {
         useStorage().removeItem('game:' + gameId).then(() => console.debug('Removed game from memory:' + gameId));
     }
 
-    return {correct_guess: round.correct_guess, score: player!.score, was_last_round: game.rounds.length === body.data.round};
+    return {
+        correct_guess: round.correct_guess,
+        score: player!.score,
+        was_last_round: game.rounds.length === body.data.round
+    };
 
 });
diff --git a/types/api/game.ts b/types/api/game.ts
index 19f637d..ee52fce 100644
--- a/types/api/game.ts
+++ b/types/api/game.ts
@@ -89,4 +89,16 @@ export interface GetGameResponse {
     active: ActiveGame[];
     waiting: Game[];
     past: Game[];
+}
+
+export interface PlayGameRequest {
+    round: number;
+    guess: string;
+    time: number;
+}
+
+export interface PlayGameResponse {
+    correct_guess: boolean;
+    score: number;
+    was_last_round: boolean;
 }
\ No newline at end of file

From eb2b9141804a957fd277dbf62bc03c54889d422c Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 16 Dec 2024 19:04:59 +0100
Subject: [PATCH 125/221] feat(game): enhance playtest

---
 layouts/Game/GameSelectLayout.vue     | 21 ++++++++++++---------
 pages/playtest.vue                    | 18 ++++++++++--------
 server/api/v1/game/[uid]/play.post.ts |  4 ++--
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/layouts/Game/GameSelectLayout.vue b/layouts/Game/GameSelectLayout.vue
index e51b080..5396c8b 100644
--- a/layouts/Game/GameSelectLayout.vue
+++ b/layouts/Game/GameSelectLayout.vue
@@ -3,15 +3,18 @@
 </script>
 
 <template>
-  <div class="flex flex-col h-screen max-h-screen">
-    <div>
-      <slot name="scoreboard"/>
-    </div>
-    <div>
-      <slot name="round-indicator"/>
-    </div>
-    <div>
-      <slot name="select-options"/>
+  <div class="flex flex-col h-screen max-h-screen items-center">
+    <!-- Wrapper div für die Breiten-Kontrolle -->
+    <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
+      <div class="basis-full">
+        <slot name="scoreboard"/>
+      </div>
+      <div class="basis-full">
+        <slot name="round-indicator"/>
+      </div>
+      <div class="flex basis-full justify-center items-end mb-10 h-full">
+        <slot name="select-options"/>
+      </div>
     </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/playtest.vue b/pages/playtest.vue
index 43d27f5..e3e3840 100644
--- a/pages/playtest.vue
+++ b/pages/playtest.vue
@@ -112,6 +112,7 @@ async function newGame() {
       opponent_id: '9da97502-5363-4964-ae80-c242a053e810',
     }),
   });
+  score.value = 0;
   playAudio(data.rounds[0].preview_url);
   game.value = data;
 }
@@ -125,16 +126,17 @@ async function newGame() {
         <button v-if="!game" @click="newGame()">New Game</button>
       </template>
       <template #round-indicator>
-        <div class="text-white text-center"> Round:</div>
-        <div class="text-white text-center">🔴🔴⭕⭕⭕</div>
-        <div class="text-white text-center" v-text="score"/>
-        <div v-if="scoreAddition" class="text-white text-center"> +{{scoreAddition}}</div>
+        <div>
+          <div class="text-white text-center"> Round:</div>
+          <div class="text-white text-center">🔴🔴⭕⭕⭕</div>
+          <div class="text-white text-center" v-text="score"/>
+          <div v-if="scoreAddition" class="text-white text-center"> +{{scoreAddition}}</div>
+        </div>
+
       </template>
       <template #select-options>
-        <br>
-        <div class="text-white text-center">Select:</div>
-        <div v-if="game" class="flex  justify-center">
-          <div class="grid grid-cols-2 grid-rows-2 gap-4 text-2xl">
+        <div v-if="game">
+          <div class="grid grid-cols-2 grid-rows-2 gap-4 text-xl text-balance">
             <button v-for="option in round!.options" :id="option.id" :key="option.id"
                     class="container px-5 py-2.5 rounded bg-amber-50" @click="clickOption(option)"
                     v-text="option.name"/>
diff --git a/server/api/v1/game/[uid]/play.post.ts b/server/api/v1/game/[uid]/play.post.ts
index 7e05641..bc20204 100644
--- a/server/api/v1/game/[uid]/play.post.ts
+++ b/server/api/v1/game/[uid]/play.post.ts
@@ -15,10 +15,10 @@ const PlayGameSchema = z.object({
 // Calculate score based on time to guess
 // Upper bound is 500, lower bound is 18 (max time to guess is 30s)
 // Perfect score for guessing lower than 0.175 s
-const time_ceiling_for_perfect_score = Math.abs(0.175);
+const time_ceiling_for_perfect_score = Math.abs(0.4);
 
 function calculateScore(time_to_guess: number): number {
-    const reward = Math.floor(500 * Math.exp((-0.11 * (time_to_guess - time_ceiling_for_perfect_score))));
+    const reward = Math.floor(500 * Math.exp((-0.19 * (time_to_guess - time_ceiling_for_perfect_score))));
     if (reward > 500) return 500;
     return reward;
 }

From 91b58a2c11baf2375057830af9edb4a0ff380ce7 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 16 Dec 2024 19:27:28 +0100
Subject: [PATCH 126/221] feat(game): enhance playtest

---
 pages/playtest.vue | 36 ++++++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/pages/playtest.vue b/pages/playtest.vue
index e3e3840..c5f02a2 100644
--- a/pages/playtest.vue
+++ b/pages/playtest.vue
@@ -65,7 +65,8 @@ const clickOption = async (option: Song) => {
   // mark clicked option
   const el = document.getElementById(option.id);
   if (!el) return;
-  el.classList.add('bg-blue-400');
+  el.classList.add('bg-purple-300');
+  el.classList.remove('bg-white');
 
   // async fetch if the guess is correct
   const response = $fetch<PlayGameResponse>(`/api/v1/game/${game.value!.game_id}/play`, {
@@ -87,7 +88,7 @@ const clickOption = async (option: Song) => {
   score.value = data.score;
 
 
-  el.classList.remove('bg-blue-400');
+  el.classList.remove('bg-purple-300');
   if (data.correct_guess) {
     el.classList.add('bg-green-400');
   } else {
@@ -100,6 +101,7 @@ const clickOption = async (option: Song) => {
   await new Promise(resolve => setTimeout(resolve, 175));
 
   el.classList.remove('bg-green-400', 'bg-red-400');
+  el.classList.add('bg-white');
 
   nextRound();
 }
@@ -126,21 +128,27 @@ async function newGame() {
         <button v-if="!game" @click="newGame()">New Game</button>
       </template>
       <template #round-indicator>
-        <div>
-          <div class="text-white text-center"> Round:</div>
-          <div class="text-white text-center">🔴🔴⭕⭕⭕</div>
-          <div class="text-white text-center" v-text="score"/>
-          <div v-if="scoreAddition" class="text-white text-center"> +{{scoreAddition}}</div>
+        <div class="flex justify-center gap-2 p-4">
+        <span
+            v-for="roundNum in 5"
+            :key="roundNum"
+            class="text-2xl"
+        >
+          {{ roundIdx >= roundNum ? '🔴' : '⭕' }}
+        </span>
         </div>
-
       </template>
+
       <template #select-options>
-        <div v-if="game">
-          <div class="grid grid-cols-2 grid-rows-2 gap-4 text-xl text-balance">
-            <button v-for="option in round!.options" :id="option.id" :key="option.id"
-                    class="container px-5 py-2.5 rounded bg-amber-50" @click="clickOption(option)"
-                    v-text="option.name"/>
-          </div>
+        <div class="grid grid-cols-2 grid-rows-2 gap-4 w-full px-4">
+          <button
+              v-for="option in round?.options"
+              :key="option.id"
+              :id="option.id"
+              class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-4 px-6 border border-gray-400 rounded shadow-sm transition-colors duration-200 min-h-[100px] h-full flex items-center justify-center text-center"
+              @click="clickOption(option)"
+              v-text="option.name"
+          />
         </div>
       </template>
     </GameSelectLayout>

From bdf933a1f5d0ee44c4e4189dccd3377f6c49ebe7 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 16 Dec 2024 21:14:31 +0100
Subject: [PATCH 127/221] feat(game): enhance playtest

---
 layouts/Game/GameSelectLayout.vue |  4 ++--
 pages/playtest.vue                | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/layouts/Game/GameSelectLayout.vue b/layouts/Game/GameSelectLayout.vue
index 5396c8b..b987552 100644
--- a/layouts/Game/GameSelectLayout.vue
+++ b/layouts/Game/GameSelectLayout.vue
@@ -9,10 +9,10 @@
       <div class="basis-full">
         <slot name="scoreboard"/>
       </div>
-      <div class="basis-full">
+      <div class="flex flex-col">
         <slot name="round-indicator"/>
       </div>
-      <div class="flex basis-full justify-center items-end mb-10 h-full">
+      <div class="flex basis-full justify-center items-end mb-28 h-full">
         <slot name="select-options"/>
       </div>
     </div>
diff --git a/pages/playtest.vue b/pages/playtest.vue
index c5f02a2..3a64422 100644
--- a/pages/playtest.vue
+++ b/pages/playtest.vue
@@ -8,11 +8,13 @@ const round = computed(() => game.value ? game.value.rounds[roundIdx.value - 1]
 const time = ref(0);
 const roundIdx = ref(1)
 
+const buttonActiveColor = 'bg-indigo-500';
+
 const score = ref(0);
 const scoreAddition = ref(0);
 
 const audio = ref<HTMLAudioElement | null>(null);
-const volume = ref(0.1);
+const volume = ref(0.03);
 
 onMounted(async () => {
   await nextTick();
@@ -65,7 +67,7 @@ const clickOption = async (option: Song) => {
   // mark clicked option
   const el = document.getElementById(option.id);
   if (!el) return;
-  el.classList.add('bg-purple-300');
+  el.classList.add(buttonActiveColor);
   el.classList.remove('bg-white');
 
   // async fetch if the guess is correct
@@ -88,7 +90,7 @@ const clickOption = async (option: Song) => {
   score.value = data.score;
 
 
-  el.classList.remove('bg-purple-300');
+  el.classList.remove(buttonActiveColor);
   if (data.correct_guess) {
     el.classList.add('bg-green-400');
   } else {
@@ -128,7 +130,7 @@ async function newGame() {
         <button v-if="!game" @click="newGame()">New Game</button>
       </template>
       <template #round-indicator>
-        <div class="flex justify-center gap-2 p-4">
+        <div v-if="game" class="flex justify-center gap-2 p-4">
         <span
             v-for="roundNum in 5"
             :key="roundNum"
@@ -140,12 +142,12 @@ async function newGame() {
       </template>
 
       <template #select-options>
-        <div class="grid grid-cols-2 grid-rows-2 gap-4 w-full px-4">
+        <div class="grid grid-cols-1 gap-4 w-full px-4">
           <button
               v-for="option in round?.options"
               :key="option.id"
               :id="option.id"
-              class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-4 px-6 border border-gray-400 rounded shadow-sm transition-colors duration-200 min-h-[100px] h-full flex items-center justify-center text-center"
+              class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-4 px-6 border border-gray-700 rounded shadow-sm transition-colors duration-200 min-h-[75px] h-full flex items-center justify-center text-center"
               @click="clickOption(option)"
               v-text="option.name"
           />

From 4e30ad818aaf2be7c6364131e6985bb31a9faa43 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 17 Dec 2024 01:31:40 +0100
Subject: [PATCH 128/221] feat(game): introduce /play

---
 DB/users.sql                             |  18 +-
 components/home/Controls/GameButtons.vue |   4 +-
 components/home/Users/UserBox.vue        |  11 +-
 layouts/Game/GameSelectLayout.vue        |   2 +-
 pages/index.vue                          |  27 +--
 pages/play.vue                           | 226 +++++++++++++++++++++++
 pages/playtest.vue                       |   4 +-
 server/api/v1/game/[uid]/play.post.ts    |  45 +++++
 server/api/v1/playlist/playlist.http     |   2 +-
 9 files changed, 316 insertions(+), 23 deletions(-)
 create mode 100644 pages/play.vue

diff --git a/DB/users.sql b/DB/users.sql
index 725f49b..f13ca6f 100644
--- a/DB/users.sql
+++ b/DB/users.sql
@@ -16,4 +16,20 @@ ALTER TABLE users
     ADD CONSTRAINT valid_username check (username <> '' AND length(trim(username)) >= 4 AND
                                          username ~ '^[a-zA-Z0-9_]+$');
                                          
-CREATE INDEX idx_username ON users(username);
\ No newline at end of file
+CREATE INDEX idx_username ON users(username);
+
+-- automatically update daily_streak_updated_at timestamp
+CREATE OR REPLACE FUNCTION user_update_streak_updated_at_column()
+    RETURNS TRIGGER AS
+$$
+BEGIN
+    NEW.daily_streak_updated_at = now();
+RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE TRIGGER update_daily_streak_timestamp
+    BEFORE UPDATE
+                         ON users
+                         FOR EACH ROW
+                         EXECUTE FUNCTION user_update_streak_updated_at_column();
\ No newline at end of file
diff --git a/components/home/Controls/GameButtons.vue b/components/home/Controls/GameButtons.vue
index 839da88..bee8a2a 100644
--- a/components/home/Controls/GameButtons.vue
+++ b/components/home/Controls/GameButtons.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-
+defineEmits(['startGame', 'quickGame']);
 </script>
 
 <template>
@@ -7,7 +7,7 @@
         <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full">
             Start Game
         </button>
-        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full">
+        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full"  @click="$emit('quickGame')">
             Quick Game
         </button>
     </div>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 23bc568..d2c5e94 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -38,7 +38,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['refresh']);
+const emit = defineEmits(['refresh','play']);
 
 const showModal = ref(false);
 
@@ -46,13 +46,13 @@ const showModal = ref(false);
 
 <template>
   <div>
-    <div 
+    <div
       :class="[
       'bg-blue-600 rounded-3xl px-3 w-full hover:bg-sky-700',
       props.userTurn
         ? 'flex items-center'
         : 'flex flex-col items-center justify-center mb-3 py-2'
-      ]" 
+      ]"
       @click="showModal = true">
       <!-- Profile Picture -->
       <NuxtImg :class="[
@@ -65,8 +65,9 @@ const showModal = ref(false);
       <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name" />
 
       <!-- Play Button -->
-      <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
-        <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white" />
+      <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="$emit('play')">
+        <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white"/>
+
       </button>
     </div>
     <ProfileUserModal
diff --git a/layouts/Game/GameSelectLayout.vue b/layouts/Game/GameSelectLayout.vue
index b987552..161c4ec 100644
--- a/layouts/Game/GameSelectLayout.vue
+++ b/layouts/Game/GameSelectLayout.vue
@@ -12,7 +12,7 @@
       <div class="flex flex-col">
         <slot name="round-indicator"/>
       </div>
-      <div class="flex basis-full justify-center items-end mb-28 h-full">
+      <div class="flex basis-full justify-center items-end mb-10 h-full">
         <slot name="select-options"/>
       </div>
     </div>
diff --git a/pages/index.vue b/pages/index.vue
index e60da0a..e7c05cb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,12 +2,15 @@
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
 import {UserViewType} from "@/types/components/users.view"
 import {useGame} from "@/composables/useGames";
+import type {ActiveGame} from "@/types/api/game";
 
-const { user } = useUser()
+const {user} = useUser()
 
 useUser().fetchUser(); // loading user state just in case
 const {games, loading, error, fetchGames} = useGame();
 
+const curr_game = useState<ActiveGame | null>('current_game', () => null);
+
 onMounted(() => {
   fetchGames();
 });
@@ -26,14 +29,14 @@ function setLevelbar(newValue: number) {
       <template #header>
 
         <div class="m-3 w-full flex items-center justify-center">
-          <Icon name="mdi:star" class="text-red-600 text-6xl  mr-2 -my-1" />
+          <Icon name="mdi:star" class="text-red-600 text-6xl  mr-2 -my-1"/>
           <div class="w-full bg-gray-700 rounded-full h-2.5">
-            <div id="levelbar" class="bg-red-600 h-2.5 rounded-full" style="width: 50%" />
+            <div id="levelbar" class="bg-red-600 h-2.5 rounded-full" style="width: 50%"/>
           </div>
         </div>
 
         <div class="m-3 w-full flex items-center justify-center">
-          <Icon name="mdi:fire" class="text-red-600 text-4xl mr-2" />
+          <Icon name="mdi:fire" class="text-red-600 text-4xl mr-2"/>
           <p class="text-xl font-bold">Streak: {{ user?.daily_streak }}</p>
         </div>
 
@@ -41,20 +44,22 @@ function setLevelbar(newValue: number) {
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6" :users="games?.active.map(game=>game.players[0])"/>
-          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6" :users="games?.waiting ? games?.waiting.map(game=>game.players[0]) : []"/>
-          <HomeControlsGameButtons class="h-1/6"/>
+          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6"
+                     :users="games?.active.map(game=>game.players[0])"/>
+          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
+                     :users="games?.waiting ? games?.waiting.map(game=>game.players[0]) : []"/>
+          <HomeControlsGameButtons class="h-1/6" @quick-game="()=>{curr_game=games!.active[0]; navigateTo('/play');}"/>
         </div>
       </template>
       <template #footer>
-        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl">
-          <Icon name="mdi:album" class="" />
+        <NuxtLink to="/playlist" class="inline-flex items-center text-5xl rounded-xl">
+          <Icon name="mdi:album" class=""/>
         </NuxtLink>
         <NuxtLink to="/" class="inline-flex items-center text-6xl rounded-full p-1.5">
-          <Icon name="mdi:home" class="text-white" />
+          <Icon name="mdi:home" class="text-white"/>
         </NuxtLink>
         <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl">
-          <Icon name="mdi:account-details" class="" />
+          <Icon name="mdi:account-details" class=""/>
         </NuxtLink>
       </template>
     </HeaderFooterView>
diff --git a/pages/play.vue b/pages/play.vue
new file mode 100644
index 0000000..3c38846
--- /dev/null
+++ b/pages/play.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+
+import type {ActiveGame, ActiveGameRound, PlayGameResponse, Song} from "@/types/api/game";
+import GameSelectLayout from "@/layouts/Game/GameSelectLayout.vue";
+import {FetchError} from "ofetch";
+
+interface Scoreboard {
+  score: number;
+  change: number;
+}
+
+// States
+const game = useState<ActiveGame | null>('current_game', () => null);
+const round = computed<ActiveGameRound | null>(() => game.value ? game.value.rounds[roundIdx.value - 1] : null);
+const roundIdx = ref<number>(1); // current round number
+const scoreboard = useState<Scoreboard>('current_game_score', () => ({score: 0, change: 0}));
+
+const error = useState<string | null>('game_error', () => null); // possible error message
+
+// Temporary variables
+const time = ref<number>(0);
+const lastServerResponse = ref<PlayGameResponse | null>(null);
+
+// Needed for audio playback
+const audio = ref<HTMLAudioElement | null>(null);
+const volume = 0.03;                                  // originally a ref but not needed to be reactive
+
+// Hooks
+onMounted(async () => {
+  await nextTick();                                   // needed, dont know why!
+  audio.value = new Audio();
+  audio.value.preload = 'auto';
+  audio.value.volume = volume;
+
+  // Handle audio end / guess time limit reached
+  audio.value.onended = async () => {
+    // Automatically select first option if time runs out
+    await selectOption(round.value!.options[0]);
+  }
+
+  playRound();
+});
+
+onUnmounted(() => {
+  if (audio.value) audio.value.pause();
+});
+
+onBeforeMount(() => {
+  if (!game.value) navigateTo('/');
+});
+
+// Functions
+const startGame = () => {
+  if (!game.value) return;
+  // Reset game state
+  roundIdx.value = 1;
+  scoreboard.value = {score: 0, change: 0};
+  // Start first round
+  playRound();
+};
+
+const playRound = () => {
+  if (!round.value) return;
+  if (!audio.value) return;
+
+  // Load audio
+  audio.value.src = round.value.preview_url;
+  audio.value.volume = volume;
+  audio.value.load();
+
+  // Wait for audio to load
+  audio.value.oncanplaythrough = async() => {
+    if (!audio.value) return;
+    audio.value.play(); // start audio playback
+    await nextTick();
+    await nextTick();
+    time.value = new Date().getTime(); // start measuring time to guess
+  }
+};
+
+const nextRound = () => {
+  if (!game.value || !round.value) abortGame();
+  roundIdx.value += 1;
+  playRound();
+};
+
+const selectOption = async (option: Song) => {
+  time.value = new Date().getTime() - time.value; // end measuring time to guess
+
+  if (!round.value) return;
+  if (!option) {
+    error.value = 'Unknown Error occurred: Option couldn\'t be handled';
+    abortGame();
+    return;
+  }
+
+  const clickedElement = document.getElementById(option.id);
+  if (clickedElement) {
+    clickedElement.classList.add('selected');
+  }
+
+  // Send guess asynchronously to server
+  const serverResponse = $fetch<PlayGameResponse>(`/api/v1/game/${game.value!.game_id}/play`, {
+    method: 'POST',
+    body: {
+      "round": roundIdx.value,
+      "guess": option.id,
+      "time": time.value / 1000,
+    }
+  });
+  //TODO handle errors
+  // onResponse & onRequestError
+
+  // wait a fixed amount for pretty UI
+  await new Promise(resolve => setTimeout(resolve, 750));
+
+  // hopefully we already have the response, but we wait for it anyway
+  lastServerResponse.value = await serverResponse;
+  if (!lastServerResponse.value) {
+    error.value = 'Server didnt respond to guess';
+    abortGame();
+    return;
+  }
+
+  // Update scoreboard
+  scoreboard.value = {
+    score: lastServerResponse.value.score,
+    change: Math.abs(scoreboard.value.score - lastServerResponse.value.score),
+  };
+
+  // Highlight if guess was correct
+  clickedElement?.classList.remove('selected');
+  if (lastServerResponse.value.correct_guess) {
+    clickedElement?.classList.add('correct');
+  } else {
+    clickedElement?.classList.add('wrong');
+  }
+
+  // Wait for a bit before next round to keep the result on screen
+  await new Promise(resolve => setTimeout(resolve, 1250));
+  pauseAudio();
+  await new Promise(resolve => setTimeout(resolve, 175));
+
+  // Stop highlighting the option
+  clickedElement?.classList.remove('correct', 'wrong');
+
+  // Start next round
+  if (!lastServerResponse.value.was_last_round)
+    nextRound();
+  else endGame();
+};
+
+const pauseAudio = () => {
+  if (!audio.value) return;
+  audio.value.pause();
+};
+
+const endGame = () => {
+  audio.value!.src = '';
+  audio.value?.load();
+  navigateTo('/');
+}
+
+const abortGame = () => {
+  game.value = null;
+  roundIdx.value = 1;
+  audio.value!.src = '';
+  audio.value?.load();
+  scoreboard.value = {score: 0, change: 0};
+  // TODO: abort game on server
+  // TODO: show error message on homepage UI
+  navigateTo('/');
+};
+
+</script>
+
+<template>
+  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+    <GameSelectLayout>
+      <template #scoreboard>
+        <div class="flex justify-center gap-4 p-4">
+          <span class="text-2xl font-semibold">Score: {{ scoreboard.score }}</span>
+          <span class="text-2xl font-semibold">Change: {{ scoreboard.change }}</span>
+        </div>
+      </template>
+      <template #round-indicator>
+        <div v-if="game" class="flex justify-center gap-2 p-4">
+        <span
+            v-for="roundNum in 5"
+            :key="roundNum"
+            class="text-2xl"
+        >
+          {{ roundIdx > roundNum ? '💽' : '💿' }}
+        </span>
+        </div>
+      </template>
+
+      <template #select-options>
+        <div class="grid grid-cols-1 gap-4 w-full px-4">
+          <button
+              v-for="option in round?.options"
+              :id="option.id"
+              :key="option.id"
+              class="bg-white text-gray-800 font-semibold py-4 px-6 border border-gray-700 rounded shadow-sm transition-colors duration-300 h-full"
+              @click="selectOption(option)"
+              v-text="option.name"
+          />
+        </div>
+      </template>
+    </GameSelectLayout>
+  </div>
+</template>
+
+<style scoped>
+.selected {
+  background-color: #6366f1 !important;
+}
+
+.correct {
+  background-color: #4ade80 !important;
+}
+
+.wrong {
+  background-color: #ef4444 !important;
+}
+</style>
\ No newline at end of file
diff --git a/pages/playtest.vue b/pages/playtest.vue
index 3a64422..1e96fa5 100644
--- a/pages/playtest.vue
+++ b/pages/playtest.vue
@@ -112,7 +112,7 @@ async function newGame() {
   const data = await $fetch<ActiveGame>('/api/v1/game', {
     method: 'POST',
     body: JSON.stringify({
-      playlist_id: '0X9Td39Sy24s2vmmiTFIez',
+      playlist_id: '4DZ79IJM4IlYBI8dpWZZO2',
       opponent_id: '9da97502-5363-4964-ae80-c242a053e810',
     }),
   });
@@ -147,7 +147,7 @@ async function newGame() {
               v-for="option in round?.options"
               :key="option.id"
               :id="option.id"
-              class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-4 px-6 border border-gray-700 rounded shadow-sm transition-colors duration-200 min-h-[75px] h-full flex items-center justify-center text-center"
+              class="bg-white text-gray-800 font-semibold py-4 px-6 border border-gray-700 rounded shadow-sm transition-colors duration-300 h-full"
               @click="clickOption(option)"
               v-text="option.name"
           />
diff --git a/server/api/v1/game/[uid]/play.post.ts b/server/api/v1/game/[uid]/play.post.ts
index bc20204..8065f76 100644
--- a/server/api/v1/game/[uid]/play.post.ts
+++ b/server/api/v1/game/[uid]/play.post.ts
@@ -151,6 +151,51 @@ export default defineEventHandler(async (event) => {
 
         // asynchronously remove game from memory. No await!
         useStorage().removeItem('game:' + gameId).then(() => console.debug('Removed game from memory:' + gameId));
+
+        // Update or reset streak
+        client.from('users').select('*').eq('id', user.id).single()
+            .then(async ({data, error}: {
+                data: {
+                    daily_streak: number,
+                    daily_streak_last_updated: string,
+                } | null,
+                error: PostgrestError | null
+            }) => {
+                if (error) {
+                    console.error('Error getting user', error);
+                    return;
+                }
+                if (!data) return;
+
+                const lastUpdated = new Date(data.daily_streak_last_updated);
+                const now = new Date();
+                const hoursDifference = (now.getTime() - lastUpdated.getTime()) / (1000 * 60 * 60);
+
+                let newStreak = data.daily_streak;
+
+                // If last update was more than 24 hours ago but less than 48 hours ago
+                if (hoursDifference >= 24 && hoursDifference < 48) {
+                    // Increment streak
+                    newStreak = data.daily_streak + 1;
+                }
+                // If more than 48 hours passed, reset streak
+                else if (hoursDifference >= 48) {
+                    newStreak = 0;
+                }
+                // If less than 24 hours, keep current streak
+
+                const {error: updateError} = await client
+                    .from('users')
+                    .update({
+                        daily_streak: newStreak,
+                        // no need to update timestamp. DB hook will automatically set it
+                    } as never)
+                    .eq('id', user.id);
+
+                if (updateError) {
+                    console.error('Error updating streak', updateError);
+                }
+            });
     }
 
     return {
diff --git a/server/api/v1/playlist/playlist.http b/server/api/v1/playlist/playlist.http
index 629a587..7598558 100644
--- a/server/api/v1/playlist/playlist.http
+++ b/server/api/v1/playlist/playlist.http
@@ -31,6 +31,6 @@ POST {{baseUrl}}/playlist
 "name": "This is SEGA SOUND TEAM",
 "spotifyId": "37i9dQZF1DX2CtuHQcongT",
 "categories": ["sega"]
-"enabled": false
+"enabled": true
 }
 

From d4c1f28b9ca1874db580aca0e82fbb2b1cb41589 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 17 Dec 2024 11:09:28 +0100
Subject: [PATCH 129/221] feat(game): introduce VerticalGameList & GameBox
 components

---
 components/home/Game/GameBox.vue          | 46 +++++++++++++++++++++++
 components/home/Game/VerticalGameList.vue | 46 +++++++++++++++++++++++
 pages/index.vue                           |  4 +-
 3 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 components/home/Game/GameBox.vue
 create mode 100644 components/home/Game/VerticalGameList.vue

diff --git a/components/home/Game/GameBox.vue b/components/home/Game/GameBox.vue
new file mode 100644
index 0000000..f573708
--- /dev/null
+++ b/components/home/Game/GameBox.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+
+import type {ActiveGame} from "@/types/api/game";
+import type {GetUserResponse} from "@/types/api/users";
+
+const props = defineProps({
+  game: {
+    type: Object as PropType<ActiveGame>,
+    required: true,
+  },
+});
+
+defineEmits<{ (e: 'onPlay', game: ActiveGame): void }>();
+
+const playlist = computed(() => props.game.playlist);
+
+const default_user_avatar = "https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg"
+const game_creator: GetUserResponse | null = props.game.players.find(player => player.id === props.game.creator_id) || null;
+
+</script>
+
+<template>
+  <div class="bg-blue-600 rounded-3xl px-3 w-full flex items-center">
+    <!-- Profile Picture -->
+    <NuxtImg
+        class="rounded-full w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 mr-3"
+        :src="game_creator?.avatar_url || default_user_avatar"
+        :alt="game_creator?.username"
+    />
+
+    <!-- User Name -->
+    <p class="text-white text-sm sm:text-base md:text-lg" v-text="game_creator?.username || 'Custom game'"/>
+
+    <!-- Play Button -->
+    <button
+        class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5"
+        @click="$emit('onPlay', props.game)"
+    >
+      <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white"/>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/components/home/Game/VerticalGameList.vue b/components/home/Game/VerticalGameList.vue
new file mode 100644
index 0000000..2ebacc7
--- /dev/null
+++ b/components/home/Game/VerticalGameList.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+
+import type {ActiveGame} from "@/types/api/game";
+import GameBox from "@/components/home/Game/GameBox.vue";
+
+const props = defineProps({
+  games: {
+    type: Array as PropType<ActiveGame[]>,
+    required: true,
+  },
+})
+
+// For telling /play page which game to play
+const curr_game = useState<ActiveGame | null>('current_game', () => null);
+
+const setGame = (game: ActiveGame) => {
+  if (!game) return;
+  if (!curr_game.value) {
+    curr_game.value = game;
+  }
+}
+
+</script>
+
+<template>
+  <div
+      class="w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3 h-full overflow-y-hidden overflow-x-auto flex-grow-0">
+
+    <!-- Fixed Header -->
+    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+      <p>Your turn(s)</p>
+    </div>
+
+    <!-- Scrollable Boxes -->
+    <div v-if="games" class="flex flex-col space-y-1 md:space-y-3 h-full overflow-y-auto">
+      <GameBox
+          v-for="game in props.games" :key="game.game_id" :game="game"
+          @on-play="(g) => {setGame(g); navigateTo('/play');}"/>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index e7c05cb..173a2a8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,6 +3,7 @@ import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
 import {UserViewType} from "@/types/components/users.view"
 import {useGame} from "@/composables/useGames";
 import type {ActiveGame} from "@/types/api/game";
+import VerticalGameList from "@/components/home/Game/VerticalGameList.vue";
 
 const {user} = useUser()
 
@@ -44,8 +45,7 @@ function setLevelbar(newValue: number) {
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6"
-                     :users="games?.active.map(game=>game.players[0])"/>
+          <VerticalGameList :games="games?.active || []" class="h-3/6"/>
           <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
                      :users="games?.waiting ? games?.waiting.map(game=>game.players[0]) : []"/>
           <HomeControlsGameButtons class="h-1/6" @quick-game="()=>{curr_game=games!.active[0]; navigateTo('/play');}"/>

From dad3e52bf1fdde00193770b79788ffe3f1754951 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 17 Dec 2024 11:10:01 +0100
Subject: [PATCH 130/221] fix(game): remove edge case stale games from active
 game view

---
 DB/game.sql | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/DB/game.sql b/DB/game.sql
index 1cc578e..5361f47 100644
--- a/DB/game.sql
+++ b/DB/game.sql
@@ -238,6 +238,14 @@ BEGIN
                  JOIN songs w2 ON gr.wrong_option_2 = w2.spotify_song_id
                  JOIN songs w3 ON gr.wrong_option_3 = w3.spotify_song_id
                  JOIN playlists p ON g.playlist_id = p.id
+        -- This is an edge case - happens when the player has played all his rounds but the creator hasn't.
+        -- Without the creator's play, the game won't finish when the opponent plays their round.
+        -- To combat this, we will remove the active games for the user when he already played his round.
+        WHERE NOT EXISTS(SELECT 1
+                         FROM game_player_song_stats gpss
+                         WHERE gpss.game_id = g.game_id
+                           AND gpss.user_id = gp_current.user_id)
+        -- End edge case
         ORDER BY g.created_at DESC, gr.song_order ASC;
 END;
 $$ LANGUAGE plpgsql;
@@ -270,12 +278,12 @@ BEGIN
                g.created_at,
                gp.user_id,
                gp.is_creator,
-                EXISTS(SELECT 1
-                         FROM game_player_song_stats gpss
-                         WHERE gpss.game_id = g.game_id
-                            AND gpss.user_id = gp.user_id) AS has_played,
+               EXISTS(SELECT 1
+                      FROM game_player_song_stats gpss
+                      WHERE gpss.game_id = g.game_id
+                        AND gpss.user_id = gp.user_id) AS has_played,
                gr.song_order,
-               gr.song_id as correct_song_id
+               gr.song_id                              as correct_song_id
         FROM games g
                  -- Join to get all players
                  JOIN game_players gp

From e3dc298c0466042a6a596203fdff1e133b2f17e1 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 17 Dec 2024 11:24:30 +0100
Subject: [PATCH 131/221] enhance(game): prettify GameBox

---
 components/home/Game/GameBox.vue | 50 ++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/components/home/Game/GameBox.vue b/components/home/Game/GameBox.vue
index f573708..a7284eb 100644
--- a/components/home/Game/GameBox.vue
+++ b/components/home/Game/GameBox.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import type {ActiveGame} from "@/types/api/game";
 import type {GetUserResponse} from "@/types/api/users";
 
@@ -15,32 +14,45 @@ defineEmits<{ (e: 'onPlay', game: ActiveGame): void }>();
 const playlist = computed(() => props.game.playlist);
 
 const default_user_avatar = "https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg"
+const default_playlist_cover = "PLACEHOLDER_URL" // Replace this with your URL later
 const game_creator: GetUserResponse | null = props.game.players.find(player => player.id === props.game.creator_id) || null;
-
 </script>
 
 <template>
-  <div class="bg-blue-600 rounded-3xl px-3 w-full flex items-center">
-    <!-- Profile Picture -->
-    <NuxtImg
-        class="rounded-full w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 mr-3"
-        :src="game_creator?.avatar_url || default_user_avatar"
-        :alt="game_creator?.username"
-    />
-
-    <!-- User Name -->
-    <p class="text-white text-sm sm:text-base md:text-lg" v-text="game_creator?.username || 'Custom game'"/>
+  <div class="bg-blue-600 rounded-3xl px-4 w-full flex items-center py-3">
+    <!-- Profile Picture Container with Overlay -->
+    <div class="relative mr-4">
+      <!-- User Avatar -->
+      <NuxtImg
+          class="rounded-full w-14 h-14"
+          :src="game_creator?.avatar_url || default_user_avatar"
+          :alt="game_creator?.username"
+      />
+      <!-- Playlist Cover Overlay -->
+      <NuxtImg
+          class="absolute -bottom-2 -right-2 w-9 h-9 rounded border-2 border-blue-600"
+          :src="playlist?.cover || default_playlist_cover"
+          :alt="playlist?.name"
+      />
+    </div>
+
+    <div class="flex flex-col min-w-0">
+      <!-- User Name -->
+      <div class="flex items-center">
+        <p class="text-white text-lg font-medium truncate"
+           v-text="game_creator?.username || 'Custom game'"/>
+      </div>
+
+      <!-- Playlist Name -->
+      <p class="text-white/75 text-sm truncate" v-text="playlist?.name"/>
+    </div>
 
     <!-- Play Button -->
     <button
-        class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5"
+        class="ml-auto p-2.5"
         @click="$emit('onPlay', props.game)"
     >
-      <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white"/>
+      <Icon name="mdi:play" class="w-8 h-8 text-white"/>
     </button>
   </div>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file

From 0718e37ba20924fe4e734ab022f25649bf285a72 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 17 Dec 2024 12:16:16 +0100
Subject: [PATCH 132/221] enhance(game): spotify cover image now loaded with
 300px instead of 640px to reduce loading time

---
 server/utils/spotify.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/utils/spotify.ts b/server/utils/spotify.ts
index c51b0b1..27676d7 100644
--- a/server/utils/spotify.ts
+++ b/server/utils/spotify.ts
@@ -45,7 +45,7 @@ export async function getPlaylistCover(token: string | null, playlistId: string)
     })
     const data = await res.json()
     // console.log(data)
-    return data[0].url;
+    return data[1].url; // [0] = 640px, [1] = 300px, [2] = 60px
 }
 
 export async function getSongsFromPlaylist(token: string | null, playlistId: string) {

From 489f764ae2fef18f9361d4221c6d5a66f0c0951b Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 17 Dec 2024 14:07:31 +0100
Subject: [PATCH 133/221] feat(game): Added game end page

---
 DB/game.sql                        | 190 ++++++++++++++++-------------
 layouts/FooterView.vue             |   2 +-
 pages/index.vue                    |   4 +-
 pages/play/end.vue                 | 113 +++++++++++++++++
 pages/{play.vue => play/index.vue} |   5 +-
 server/utils/mapper/game-mapper.ts | 159 ++++++++++++++++--------
 types/api/game.ts                  |  12 +-
 7 files changed, 340 insertions(+), 145 deletions(-)
 create mode 100644 pages/play/end.vue
 rename pages/{play.vue => play/index.vue} (98%)

diff --git a/DB/game.sql b/DB/game.sql
index 5361f47..c3173e9 100644
--- a/DB/game.sql
+++ b/DB/game.sql
@@ -153,100 +153,123 @@ CREATE OR REPLACE FUNCTION get_player_games(p_user_id UUID)
     RETURNS TABLE
             (
                 -- Game basic info
-                game_id                          INTEGER,
-                status                           game_status,
-                playlist_id                      TEXT,
-                playlist_cover                   TEXT,
-                playlist_name                    TEXT,
-                created_at                       TIMESTAMPTZ,
-                creator_id                       UUID,
-                -- Opponent info (renamed from player_ to opponent_)
-                opponent_user_id                 UUID,
-                opponent_avatar_url              TEXT,
-                opponent_username                TEXT,
-                opponent_spotify_id              TEXT,
-                opponent_spotify_visibility      BOOLEAN,
-                opponent_daily_streak            INTEGER,
-                opponent_daily_streak_updated_at TIMESTAMPTZ,
+                game_id              INTEGER,
+                status              game_status,
+                playlist_id         TEXT,
+                playlist_cover      TEXT,
+                playlist_name       TEXT,
+                created_at         TIMESTAMPTZ,
+                creator_id         UUID,
+
+                -- Player info
+                player_user_id     UUID,
+                player_avatar_url  TEXT,
+                player_username    TEXT,
+                player_spotify_id  TEXT,
+                player_spotify_visibility BOOLEAN,
+                player_daily_streak INTEGER,
+                player_daily_streak_updated_at TIMESTAMPTZ,
+                player_score       INTEGER,
+
                 -- Round info
-                round_number                     INTEGER,
-                correct_song_id                  TEXT,
-                correct_song_name                TEXT,
-                correct_song_artist              TEXT,
-                correct_song_preview_url         TEXT,
-                wrong_song_1_id                  TEXT,
-                wrong_song_1_name                TEXT,
-                wrong_song_1_artist              TEXT,
-                wrong_song_1_preview_url         TEXT,
-                wrong_song_2_id                  TEXT,
-                wrong_song_2_name                TEXT,
-                wrong_song_2_artist              TEXT,
-                wrong_song_2_preview_url         TEXT,
-                wrong_song_3_id                  TEXT,
-                wrong_song_3_name                TEXT,
-                wrong_song_3_artist              TEXT,
-                wrong_song_3_preview_url         TEXT
+                round_number       INTEGER,
+                correct_song_id    TEXT,
+                correct_song_name  TEXT,
+                correct_song_artist TEXT,
+                correct_song_preview_url TEXT,
+                wrong_song_1_id    TEXT,
+                wrong_song_1_name  TEXT,
+                wrong_song_1_artist TEXT,
+                wrong_song_1_preview_url TEXT,
+                wrong_song_2_id    TEXT,
+                wrong_song_2_name  TEXT,
+                wrong_song_2_artist TEXT,
+                wrong_song_2_preview_url TEXT,
+                wrong_song_3_id    TEXT,
+                wrong_song_3_name  TEXT,
+                wrong_song_3_artist TEXT,
+                wrong_song_3_preview_url TEXT,
+
+                -- Round stats (directly associated with player)
+                time_to_guess      NUMERIC,
+                correct_guess      BOOLEAN,
+                guessed_song_id    TEXT,
+                guessed_song_name  TEXT,
+                guessed_song_artist TEXT,
+                guessed_song_preview_url TEXT
             )
 AS
 $$
 BEGIN
     RETURN QUERY
-        SELECT g.game_id,
-               g.status,
-               g.playlist_id,
-               p.cover,
-               p.name,
-               g.created_at,
-               gp_creator.user_id,
-
-               -- Opponent information
-               u.id,
-               u.avatar_url,
-               u.username,
-               u.spotify_id,
-               u.spotify_visibility,
-               u.daily_streak,
-               u.daily_streak_updated_at,
-               -- Round information
-               gr.song_order,
-               cs.spotify_song_id,
-               cs.song_name,
-               cs.artist_name,
-               cs.preview_url,
-               w1.spotify_song_id,
-               w1.song_name,
-               w1.artist_name,
-               w1.preview_url,
-               w2.spotify_song_id,
-               w2.song_name,
-               w2.artist_name,
-               w2.preview_url,
-               w3.spotify_song_id,
-               w3.song_name,
-               w3.artist_name,
-               w3.preview_url
+        SELECT DISTINCT ON (g.game_id, gr.song_order, all_players.user_id)
+            g.game_id,
+            g.status,
+            g.playlist_id,
+            p.cover,
+            p.name,
+            g.created_at,
+            gp_creator.user_id,
+            -- Player information
+            all_players.user_id,
+            u.avatar_url,
+            u.username,
+            u.spotify_id,
+            u.spotify_visibility,
+            u.daily_streak,
+            u.daily_streak_updated_at,
+            gp_stats.score,
+            -- Round information
+            gr.song_order,
+            cs.spotify_song_id,
+            cs.song_name,
+            cs.artist_name,
+            cs.preview_url,
+            w1.spotify_song_id,
+            w1.song_name,
+            w1.artist_name,
+            w1.preview_url,
+            w2.spotify_song_id,
+            w2.song_name,
+            w2.artist_name,
+            w2.preview_url,
+            w3.spotify_song_id,
+            w3.song_name,
+            w3.artist_name,
+            w3.preview_url,
+            -- Stats information (associated with player)
+            gpss.time_to_guess,
+            gpss.correct_guess,
+            gs.spotify_song_id,
+            gs.song_name,
+            gs.artist_name,
+            gs.preview_url
         FROM games g
-                 -- Join to get current user's games
-                 JOIN game_players gp_current ON g.game_id = gp_current.game_id AND gp_current.user_id = p_user_id
-            -- Join to get opponent's info
-                 JOIN game_players gp_opponent ON g.game_id = gp_opponent.game_id AND gp_opponent.user_id != p_user_id
-                 LEFT JOIN game_players gp_creator ON g.game_id = gp_creator.game_id AND gp_creator.is_creator = true
-                 JOIN users u ON gp_opponent.user_id = u.id
+                 -- Get current player's games
+                 JOIN game_players gp_current ON g.game_id = gp_current.game_id
+            AND gp_current.user_id = p_user_id
+            -- Get all players in the game
+                 JOIN game_players all_players ON g.game_id = all_players.game_id
+            -- Get user info for all players
+                 JOIN users u ON all_players.user_id = u.id
+            -- Get creator info
+                 LEFT JOIN game_players gp_creator ON g.game_id = gp_creator.game_id
+            AND gp_creator.is_creator = true
+            -- Get rounds info
                  JOIN game_rounds gr ON g.game_id = gr.game_id
                  JOIN songs cs ON gr.song_id = cs.spotify_song_id
                  JOIN songs w1 ON gr.wrong_option_1 = w1.spotify_song_id
                  JOIN songs w2 ON gr.wrong_option_2 = w2.spotify_song_id
                  JOIN songs w3 ON gr.wrong_option_3 = w3.spotify_song_id
                  JOIN playlists p ON g.playlist_id = p.id
-        -- This is an edge case - happens when the player has played all his rounds but the creator hasn't.
-        -- Without the creator's play, the game won't finish when the opponent plays their round.
-        -- To combat this, we will remove the active games for the user when he already played his round.
-        WHERE NOT EXISTS(SELECT 1
-                         FROM game_player_song_stats gpss
-                         WHERE gpss.game_id = g.game_id
-                           AND gpss.user_id = gp_current.user_id)
-        -- End edge case
-        ORDER BY g.created_at DESC, gr.song_order ASC;
+            -- Get stats for all players
+                 LEFT JOIN game_players gp_stats ON g.game_id = gp_stats.game_id
+            AND gp_stats.user_id = all_players.user_id
+                 LEFT JOIN game_player_song_stats gpss ON g.game_id = gpss.game_id
+            AND gpss.song_order = gr.song_order
+            AND gpss.user_id = all_players.user_id
+                 LEFT JOIN songs gs ON gpss.guessed_song_id = gs.spotify_song_id
+        ORDER BY g.game_id, gr.song_order, all_players.user_id, g.created_at DESC;
 END;
 $$ LANGUAGE plpgsql;
 
@@ -345,4 +368,7 @@ BEGIN
                       WHERE gp.game_id = p_game_id
                         AND gpss.user_id IS NULL);
 END;
-$$ LANGUAGE plpgsql;
\ No newline at end of file
+$$ LANGUAGE plpgsql;
+
+SELECT *
+FROM get_player_games('d2e6a9a3-a0be-45ce-ae39-676c6a88c53a');
\ No newline at end of file
diff --git a/layouts/FooterView.vue b/layouts/FooterView.vue
index 5e959b0..8619e13 100644
--- a/layouts/FooterView.vue
+++ b/layouts/FooterView.vue
@@ -7,7 +7,7 @@
     <!-- Wrapper div für die Breiten-Kontrolle -->
     <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
       <!-- Content -->
-      <div class="flex-1 p-3">
+      <div class="flex-1 p-3 h-full overflow-y-auto">
           <slot name="content"/>
       </div>
 
diff --git a/pages/index.vue b/pages/index.vue
index 173a2a8..e7e58ad 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -12,8 +12,8 @@ const {games, loading, error, fetchGames} = useGame();
 
 const curr_game = useState<ActiveGame | null>('current_game', () => null);
 
-onMounted(() => {
-  fetchGames();
+onMounted(async () => {
+  await fetchGames();
 });
 
 function setLevelbar(newValue: number) {
diff --git a/pages/play/end.vue b/pages/play/end.vue
new file mode 100644
index 0000000..d650b0a
--- /dev/null
+++ b/pages/play/end.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+
+import type {ActiveGame, ActiveGamePlaylist, Game} from "@/types/api/game";
+import type {Scoreboard} from "@/pages/play/index.vue";
+import FooterView from "@/layouts/FooterView.vue";
+
+
+// composables
+const {loading, error, games, fetchGames} = useGame();
+const {user, fetchUser} = useUser()
+
+// states from parent
+const scoreboard = useState<Scoreboard>('current_game_score', () => ({score: 0, change: 0}));
+const activeGame = useState<ActiveGame | undefined>('current_game', () => undefined);
+
+// computed
+const game = computed<Game | null>(() => computeGame(activeGame?.value));
+const stats = computed(() => game.value?.stats?.find(stat => stat.user_id === user.value?.id));
+const opStats = computed(() => game.value?.stats?.find(stat => stat.user_id !== user.value?.id));
+const playlist = computed<ActiveGamePlaylist | null>(() => game.value ? game.value.playlist : null);
+
+const computeGame = (activeGame?: ActiveGame): Game | null => {
+  if (!activeGame) return null;
+  if (!games.value) return null;
+  if (!user.value) return null;
+
+  let foundGame = null;
+  if (activeGame.creator_id === user.value?.id) {
+    foundGame = games.value.waiting.find(game => game.game_id === activeGame.game_id);
+  } else {
+    foundGame = games.value.past.find(game => game.game_id === activeGame.game_id);
+  }
+
+  if (!foundGame) return null;
+
+  return {
+    ...foundGame
+  }
+};
+
+// Hooks
+onMounted(async () => {
+  await fetchUser();
+  await fetchGames();
+});
+
+onUnmounted(() => {
+  activeGame.value = undefined;
+  scoreboard.value = {score: 0, change: 0};
+});
+
+</script>
+
+<template>
+  <div>
+    <FooterView>
+      <template #content>
+        <div class="h-full flex flex-col">
+          <!-- Text content fixed at top -->
+          <div class="text-center p-12 pb-48">
+            Lots of content..
+          </div>
+
+          <!-- Spacer to push game rounds to bottom -->
+          <div class="flex-grow"></div>
+
+          <!-- Game rounds container aligned to bottom -->
+          <div class="w-full">
+            <div
+                v-for="(gameRound, idx) in game?.rounds"
+                :key="gameRound.round"
+                class="flex flex-col basis-1/5 items-center mb-4"
+            >
+              <div class="inline-flex items-center justify-around w-full">
+                <div>
+                  <Icon v-if="stats!.guesses[idx].correct_guess" name="mdi:checkbox-outline" class="text-green-500 text-4xl"/>
+                  <Icon v-else name="mdi:close-box-outline" class="text-red-500 text-4xl"/>
+                  <div class="text-sm font-thin" v-text="stats?.guesses[idx].time_to_guess + 's'"/>
+                </div>
+                <NuxtImg
+                    src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg"
+                    width="50" height="50"
+                />
+                <div>
+                  <Icon v-if="opStats!.guesses[idx].correct_guess" name="mdi:checkbox-outline" class="text-green-500 text-4xl"/>
+                  <Icon v-else name="mdi:close-box-outline" class="text-red-500 text-4xl"/>
+                  <div class="text-sm font-thin" v-text="opStats?.guesses[idx].time_to_guess + 's'"/>
+                </div>
+              </div>
+              <div class="mt-1">{{ gameRound.correct_song.name }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #footer>
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl">
+          <Icon name="mdi:album"/>
+        </NuxtLink>
+        <NuxtLink to="/" class="inline-flex items-center text-6xl rounded-full p-1.5">
+          <Icon name="mdi:home"/>
+        </NuxtLink>
+        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl">
+          <Icon name="mdi:account-details"/>
+        </NuxtLink>
+      </template>
+    </FooterView>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/play.vue b/pages/play/index.vue
similarity index 98%
rename from pages/play.vue
rename to pages/play/index.vue
index 3c38846..a3d7587 100644
--- a/pages/play.vue
+++ b/pages/play/index.vue
@@ -2,9 +2,8 @@
 
 import type {ActiveGame, ActiveGameRound, PlayGameResponse, Song} from "@/types/api/game";
 import GameSelectLayout from "@/layouts/Game/GameSelectLayout.vue";
-import {FetchError} from "ofetch";
 
-interface Scoreboard {
+export interface Scoreboard {
   score: number;
   change: number;
 }
@@ -158,7 +157,7 @@ const pauseAudio = () => {
 const endGame = () => {
   audio.value!.src = '';
   audio.value?.load();
-  navigateTo('/');
+  navigateTo('/play/end');
 }
 
 const abortGame = () => {
diff --git a/server/utils/mapper/game-mapper.ts b/server/utils/mapper/game-mapper.ts
index ff79ada..7951364 100644
--- a/server/utils/mapper/game-mapper.ts
+++ b/server/utils/mapper/game-mapper.ts
@@ -1,6 +1,6 @@
 // Types from your original interfaces
 
-import type {ActiveGame, Game, GameRound, Song,GameStatus} from "~/types/api/game";
+import type {ActiveGame, Game, GameRound, Song, GameStatus, GameStats} from "~/types/api/game";
 import type {GetUserResponse} from "~/types/api/users";
 
 interface DatabaseGameRow {
@@ -13,14 +13,15 @@ interface DatabaseGameRow {
     created_at: string;
     creator_id: string; // who created the game and thus already started playing
 
-    // Opponent info (the other player's data)
-    opponent_user_id: string;
-    opponent_avatar_url: string | null;
-    opponent_username: string;
-    opponent_spotify_id: string | null;
-    opponent_spotify_visibility: boolean;
-    opponent_daily_streak: number | null;
-    opponent_daily_streak_updated_at: string | null;
+    // Player info
+    player_user_id: string;
+    player_avatar_url: string | null;
+    player_username: string;
+    player_spotify_id: string | null;
+    player_spotify_visibility: boolean;
+    player_daily_streak: number | null;
+    player_daily_streak_updated_at: string | null;
+    player_score: number;
 
     // Round info (the song being played)
     round_number: number;         // From game_rounds table - the order of the song
@@ -44,6 +45,14 @@ interface DatabaseGameRow {
     wrong_song_3_name: string;
     wrong_song_3_artist: string;
     wrong_song_3_preview_url: string | null;
+
+    // Player round stats
+    time_to_guess: number | null;
+    correct_guess: boolean | null;
+    guessed_song_id: string | null;
+    guessed_song_name: string | null;
+    guessed_song_artist: string | null;
+    guessed_song_preview_url: string | null;
 }
 
 export interface GetGameDBRow {
@@ -105,49 +114,94 @@ export const mapDatabaseRowsToGame = (rows: DatabaseGameRow[]): Game => {
 
     const firstRow = rows[0];
 
-    // Map opponent info
-    const opponent: GetUserResponse = {
-        id: firstRow.opponent_user_id,
-        avatar_url: firstRow.opponent_avatar_url ?? undefined,
-        username: firstRow.opponent_username,
-        spotify_id: firstRow.opponent_spotify_id ?? undefined,
-        spotify_visibility: firstRow.opponent_spotify_visibility,
-        daily_streak: firstRow.opponent_daily_streak ?? undefined,
-        daily_streak_updated_at: firstRow.opponent_daily_streak_updated_at ?? undefined
-    };
+    // Group all players from rows
+    const playersMap = new Map<string, GetUserResponse>();
+
+    rows.forEach(row => {
+        const playerId = row.player_user_id;
+        if (!playersMap.has(playerId)) {
+            playersMap.set(playerId, {
+                id: row.player_user_id,
+                avatar_url: row.player_avatar_url ?? undefined,
+                username: row.player_username,
+                spotify_id: row.player_spotify_id ?? undefined,
+                spotify_visibility: row.player_spotify_visibility,
+                daily_streak: row.player_daily_streak ?? undefined,
+                daily_streak_updated_at: row.player_daily_streak_updated_at ?? undefined
+            });
+        }
+    });
 
     // Map rounds
-    const rounds: GameRound[] = rows.map(row => ({
-        round: row.round_number,
-        correct_song: createSongFromRow(
-            row.correct_song_id,
-            row.correct_song_name,
-            row.correct_song_artist,
-            row.correct_song_preview_url
-        ),
-        wrong_songs: [
-            createSongFromRow(
-                row.wrong_song_1_id,
-                row.wrong_song_1_name,
-                row.wrong_song_1_artist,
-                row.wrong_song_1_preview_url
-            ),
-            createSongFromRow(
-                row.wrong_song_2_id,
-                row.wrong_song_2_name,
-                row.wrong_song_2_artist,
-                row.wrong_song_2_preview_url
-            ),
-            createSongFromRow(
-                row.wrong_song_3_id,
-                row.wrong_song_3_name,
-                row.wrong_song_3_artist,
-                row.wrong_song_3_preview_url
-            )
-        ]
-    }));
+    const uniqueRounds = new Map<number, GameRound>();
+    rows.forEach(row => {
+        if (!uniqueRounds.has(row.round_number)) {
+            uniqueRounds.set(row.round_number, {
+                round: row.round_number,
+                correct_song: createSongFromRow(
+                    row.correct_song_id,
+                    row.correct_song_name,
+                    row.correct_song_artist,
+                    row.correct_song_preview_url
+                ),
+                wrong_songs: [
+                    createSongFromRow(
+                        row.wrong_song_1_id,
+                        row.wrong_song_1_name,
+                        row.wrong_song_1_artist,
+                        row.wrong_song_1_preview_url
+                    ),
+                    createSongFromRow(
+                        row.wrong_song_2_id,
+                        row.wrong_song_2_name,
+                        row.wrong_song_2_artist,
+                        row.wrong_song_2_preview_url
+                    ),
+                    createSongFromRow(
+                        row.wrong_song_3_id,
+                        row.wrong_song_3_name,
+                        row.wrong_song_3_artist,
+                        row.wrong_song_3_preview_url
+                    )
+                ]
+            });
+        }
+    });
+
+    // Map stats
+    const stats: GameStats[] = [];
+    const statsMap = new Map<string, GameStats>();
+
+    rows.forEach(row => {
+        if (!statsMap.has(row.player_user_id)) {
+            statsMap.set(row.player_user_id, {
+                user_id: row.player_user_id,
+                score: row.player_score,
+                guesses: []
+            });
+        }
+
+        const playerStats = statsMap.get(row.player_user_id)!;
+
+        // Only add guess if we have stats data for this round
+        if (row.time_to_guess !== null) {
+            playerStats.guesses.push({
+                round_number: row.round_number,
+                time_to_guess: row.time_to_guess,
+                correct_guess: row.correct_guess!,
+                song: createSongFromRow(
+                    row.guessed_song_id!,
+                    row.guessed_song_name!,
+                    row.guessed_song_artist!,
+                    row.guessed_song_preview_url
+                )
+            });
+        }
+    });
+
+    // Add all stats to the array
+    stats.push(...Array.from(statsMap.values()));
 
-    // Construct final game object with players instead of player_ids
     return {
         game_id: firstRow.game_id,
         status: firstRow.status as GameStatus,
@@ -157,9 +211,10 @@ export const mapDatabaseRowsToGame = (rows: DatabaseGameRow[]): Game => {
             name: firstRow.playlist_name,
             cover: firstRow.playlist_cover
         },
-        players: [opponent],
-        rounds: rounds,
-        created_at: firstRow.created_at
+        players: Array.from(playersMap.values()),
+        rounds: Array.from(uniqueRounds.values()),
+        created_at: firstRow.created_at,
+        stats: stats.length > 0 ? stats : undefined
     };
 };
 
diff --git a/types/api/game.ts b/types/api/game.ts
index ee52fce..f7b9f0d 100644
--- a/types/api/game.ts
+++ b/types/api/game.ts
@@ -41,15 +41,17 @@ export interface ActiveGame {
     game_id: number;
     status: GameStatus;
     creator_id: string; // who created the game and thus already played its turn
-    playlist: {
-        id: string;
-        name: string;
-        cover?: string;
-    };
+    playlist: ActiveGamePlaylist;
     players: GetUserResponse[];
     rounds: ActiveGameRound[];
 }
 
+export interface ActiveGamePlaylist {
+    id: string;
+    name: string;
+    cover?: string;
+}
+
 export interface ActiveGameRound {
     round: number;
     preview_url: string;

From 7122c6e1b0b16f59148da8a5a32260cb1b5285d5 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 17 Dec 2024 14:45:44 +0100
Subject: [PATCH 134/221] feat(game): Prettify end view

---
 pages/play/end.vue | 35 +++++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/pages/play/end.vue b/pages/play/end.vue
index d650b0a..3dc9b6b 100644
--- a/pages/play/end.vue
+++ b/pages/play/end.vue
@@ -38,6 +38,8 @@ const computeGame = (activeGame?: ActiveGame): Game | null => {
   }
 };
 
+const defaultImg = "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg"
+
 // Hooks
 onMounted(async () => {
   await fetchUser();
@@ -57,7 +59,7 @@ onUnmounted(() => {
       <template #content>
         <div class="h-full flex flex-col">
           <!-- Text content fixed at top -->
-          <div class="text-center p-12 pb-48">
+          <div class="text-center p-20">
             Lots of content..
           </div>
 
@@ -65,29 +67,34 @@ onUnmounted(() => {
           <div class="flex-grow"></div>
 
           <!-- Game rounds container aligned to bottom -->
-          <div class="w-full">
+          <div class="w-full pb-5">
             <div
                 v-for="(gameRound, idx) in game?.rounds"
                 :key="gameRound.round"
-                class="flex flex-col basis-1/5 items-center mb-4"
+                class="flex flex-col basis-1/5 items-center mb-3"
             >
               <div class="inline-flex items-center justify-around w-full">
-                <div>
-                  <Icon v-if="stats!.guesses[idx].correct_guess" name="mdi:checkbox-outline" class="text-green-500 text-4xl"/>
-                  <Icon v-else name="mdi:close-box-outline" class="text-red-500 text-4xl"/>
-                  <div class="text-sm font-thin" v-text="stats?.guesses[idx].time_to_guess + 's'"/>
+                <div class="inline-flex flex-col">
+                  <Icon v-if="stats!.guesses[idx].correct_guess" name="mdi:checkbox-marked" class="text-green-500 text-4xl"/>
+                  <Icon v-else name="mdi:close-box" class="text-red-500 text-4xl"/>
+                  <div class="text-sm font-thin text-center" v-text="stats?.guesses[idx].time_to_guess + 's'"/>
                 </div>
                 <NuxtImg
-                    src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg"
-                    width="50" height="50"
+                    :src="defaultImg"
+                    width="55" height="auto"
                 />
-                <div>
-                  <Icon v-if="opStats!.guesses[idx].correct_guess" name="mdi:checkbox-outline" class="text-green-500 text-4xl"/>
-                  <Icon v-else name="mdi:close-box-outline" class="text-red-500 text-4xl"/>
-                  <div class="text-sm font-thin" v-text="opStats?.guesses[idx].time_to_guess + 's'"/>
+                <div v-if="opStats?.guesses && opStats.guesses.length > 1" class="inline-flex flex-col">
+                  <Icon v-if="opStats?.guesses[idx].correct_guess" name="mdi:checkbox-marked" class="text-green-500 text-4xl"/>
+                  <Icon v-else name="mdi:close-box" class="text-red-500 text-4xl"/>
+                  <div class="text-sm font-thin text-center " v-text="opStats?.guesses[idx].time_to_guess + 's'"/>
+                </div>
+                <div v-else class="inline-flex flex-col">
+                  <!-- Invisible to not break layout -->
+                  <Icon name="mdi:help-box" class="text-gray-500 text-4xl invisible"/>
+                  <div class="text-sm font-thin text-center invisible" v-text="'dnf'"/>
                 </div>
               </div>
-              <div class="mt-1">{{ gameRound.correct_song.name }}</div>
+              <div class="tracking-tight font-semibold mt-1 mb-2 text-sm">{{ gameRound.correct_song.name }}</div>
             </div>
           </div>
         </div>

From a66ee8586589e437e85db7a825de75ffdd1d0419 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 17 Dec 2024 14:46:24 +0100
Subject: [PATCH 135/221] enhance(game): Temp. Change Quick Game Button to
 create game

---
 pages/index.vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index e7e58ad..3f2a151 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -22,6 +22,20 @@ function setLevelbar(newValue: number) {
     levelbar.style.width = newValue + "%"
   }
 }
+
+const newGame = async () => {
+  const data = await $fetch<ActiveGame>('/api/v1/game', {
+    method: 'POST',
+    body: JSON.stringify({
+      playlist_id: '4DZ79IJM4IlYBI8dpWZZO2',
+      opponent_id: '9da97502-5363-4964-ae80-c242a053e810',
+    }),
+  });
+
+  curr_game.value = data;
+  navigateTo('/play');
+}
+
 </script>
 
 <template>
@@ -48,7 +62,7 @@ function setLevelbar(newValue: number) {
           <VerticalGameList :games="games?.active || []" class="h-3/6"/>
           <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
                      :users="games?.waiting ? games?.waiting.map(game=>game.players[0]) : []"/>
-          <HomeControlsGameButtons class="h-1/6" @quick-game="()=>{curr_game=games!.active[0]; navigateTo('/play');}"/>
+          <HomeControlsGameButtons class="h-1/6" @quick-game="()=>newGame()"/>
         </div>
       </template>
       <template #footer>

From a1eece563b2a656574c41571723feca3ea164f91 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 17 Dec 2024 16:56:44 +0100
Subject: [PATCH 136/221] fix(game): streak now able to update

---
 server/api/v1/game/[uid]/play.post.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/server/api/v1/game/[uid]/play.post.ts b/server/api/v1/game/[uid]/play.post.ts
index 8065f76..17bcad0 100644
--- a/server/api/v1/game/[uid]/play.post.ts
+++ b/server/api/v1/game/[uid]/play.post.ts
@@ -184,6 +184,9 @@ export default defineEventHandler(async (event) => {
                 }
                 // If less than 24 hours, keep current streak
 
+                // Update streak if changed
+                if(newStreak === data.daily_streak) return;
+
                 const {error: updateError} = await client
                     .from('users')
                     .update({

From 1611e83e446b3150413e19a308ad810d9603b938 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 17 Dec 2024 16:56:44 +0100
Subject: [PATCH 137/221] fix(game): streak now able to update

---
 pages/play/end.vue                    | 2 +-
 server/api/v1/game/[uid]/play.post.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/play/end.vue b/pages/play/end.vue
index 3dc9b6b..a87aa39 100644
--- a/pages/play/end.vue
+++ b/pages/play/end.vue
@@ -77,7 +77,7 @@ onUnmounted(() => {
                 <div class="inline-flex flex-col">
                   <Icon v-if="stats!.guesses[idx].correct_guess" name="mdi:checkbox-marked" class="text-green-500 text-4xl"/>
                   <Icon v-else name="mdi:close-box" class="text-red-500 text-4xl"/>
-                  <div class="text-sm font-thin text-center" v-text="stats?.guesses[idx].time_to_guess + 's'"/>
+                  <div class="text-sm max-w-9 font-thin text-center" v-text="stats?.guesses[idx].time_to_guess + 's'"/>
                 </div>
                 <NuxtImg
                     :src="defaultImg"
diff --git a/server/api/v1/game/[uid]/play.post.ts b/server/api/v1/game/[uid]/play.post.ts
index 17bcad0..d192f73 100644
--- a/server/api/v1/game/[uid]/play.post.ts
+++ b/server/api/v1/game/[uid]/play.post.ts
@@ -157,7 +157,7 @@ export default defineEventHandler(async (event) => {
             .then(async ({data, error}: {
                 data: {
                     daily_streak: number,
-                    daily_streak_last_updated: string,
+                    daily_streak_updated_at: string,
                 } | null,
                 error: PostgrestError | null
             }) => {
@@ -167,7 +167,7 @@ export default defineEventHandler(async (event) => {
                 }
                 if (!data) return;
 
-                const lastUpdated = new Date(data.daily_streak_last_updated);
+                const lastUpdated = new Date(data.daily_streak_updated_at);
                 const now = new Date();
                 const hoursDifference = (now.getTime() - lastUpdated.getTime()) / (1000 * 60 * 60);
 

From 457f264e756df5fdef62cbb589609036a4289e43 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Tue, 17 Dec 2024 17:26:18 +0100
Subject: [PATCH 138/221] chore(fix): change README & one less error in tsdoc

---
 README.md                        | 29 +++++++++++++++--------------
 server/api/v1/game/index.post.ts |  4 ++--
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 6907cea..540c4b2 100644
--- a/README.md
+++ b/README.md
@@ -1,29 +1,30 @@
-# Nuxt 3 Minimal Starter
-
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+# BeatBuzzer Music Game
 
 ## Setup
 
-Make sure to install the dependencies:
+Execute the following commands to run the project locally:
 
 ```bash
-npm install
+npm install && npm run dev
 ```
 
-## Development Server
+The server will be available at `http://localhost:3000`.
 
-Start the development server on `http://localhost:3000`:
+## TSDocs
 
-```bash
-npm run dev
-```
+To generate the TSDoc documentation, run the following command:
 
-## TSDocs
 ```bash
 npm run docs:serve
 ```
 
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
-
 ## Required Environment Variables
-Check `.env.example` for the required environment variables.
\ No newline at end of file
+
+Check `.env.example` for the required environment variables.
+
+Utilize ur systems capabilities to set the environment variables or create a `.env` file in the root of the project and
+set the variables there. Latter is suggested.
+
+> [!WARNING] Careful
+> Make sure to never commit the `.env` file to the repository.  
+> Check the `.gitignore` file to see the `.env` file is ignored.
\ No newline at end of file
diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
index 0d1703d..9e1cc52 100644
--- a/server/api/v1/game/index.post.ts
+++ b/server/api/v1/game/index.post.ts
@@ -145,10 +145,10 @@ export default defineEventHandler(async (event) => {
             preview_url: round.correct_song.preview_url!,
             options: [round.correct_song, ...round.wrong_songs]
                 .sort(() => Math.random() - 0.5)
-                .map((song) => ({
+                .map<Song>((song) => ({
                     id: song.id,
                     name: song.name,
-                    artists: [song.artists[0].name],
+                    artists: [{name: song.artists[0].name}],
                     is_playable: song.is_playable,
                     preview_url: null
                 }))

From f69355f9bffd4fae8e0eedf1b695221dc339c233 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 03:31:06 +0100
Subject: [PATCH 139/221] feat(game): Initial user signup #32

---
 DB/game.sql                            |   5 +-
 DB/users.sql                           |  16 ++--
 components/login/RegistrationModal.vue | 112 +++++++++++++++++++++++++
 composables/useUser.ts                 |   4 +-
 pages/confirm.vue                      |  42 +++++++---
 pages/index.vue                        |  13 ++-
 pages/login.vue                        |  15 ++++
 server/api/v1/user/register.post.ts    |  52 ++++++++++++
 8 files changed, 234 insertions(+), 25 deletions(-)
 create mode 100644 components/login/RegistrationModal.vue
 create mode 100644 server/api/v1/user/register.post.ts

diff --git a/DB/game.sql b/DB/game.sql
index c3173e9..32fea3b 100644
--- a/DB/game.sql
+++ b/DB/game.sql
@@ -7,7 +7,6 @@ $$
     END
 $$;
 
-
 DO
 $$
     BEGIN
@@ -36,7 +35,7 @@ CREATE TABLE IF NOT EXISTS games
 CREATE TABLE IF NOT EXISTS game_players
 (
     game_id    INTEGER REFERENCES games (game_id) ON DELETE CASCADE,
-    user_id    UUID REFERENCES users (id),
+    user_id    UUID REFERENCES users (id) ON DELETE SET DEFAULT DEFAULT '00000000-0000-0000-0000-000000000000',
     score      INTEGER NOT NULL DEFAULT 0,
     is_creator BOOLEAN NOT NULL DEFAULT false,
     PRIMARY KEY (game_id, user_id)
@@ -79,7 +78,7 @@ CREATE TABLE IF NOT EXISTS game_rounds
 CREATE TABLE IF NOT EXISTS game_player_song_stats
 (
     game_id         INTEGER REFERENCES games (game_id) ON DELETE CASCADE,
-    user_id         UUID REFERENCES users (id),
+    user_id         UUID REFERENCES users (id)  ON DELETE SET DEFAULT DEFAULT '00000000-0000-0000-0000-000000000000',
     song_order      INTEGER NOT NULL,
     time_to_guess   NUMERIC,
     correct_guess   BOOLEAN NOT NULL DEFAULT false,
diff --git a/DB/users.sql b/DB/users.sql
index f13ca6f..ec3f44f 100644
--- a/DB/users.sql
+++ b/DB/users.sql
@@ -15,8 +15,8 @@ ALTER TABLE users
     ADD CONSTRAINT unique_username UNIQUE (username),
     ADD CONSTRAINT valid_username check (username <> '' AND length(trim(username)) >= 4 AND
                                          username ~ '^[a-zA-Z0-9_]+$');
-                                         
-CREATE INDEX idx_username ON users(username);
+
+CREATE INDEX idx_username ON users (username);
 
 -- automatically update daily_streak_updated_at timestamp
 CREATE OR REPLACE FUNCTION user_update_streak_updated_at_column()
@@ -24,12 +24,16 @@ CREATE OR REPLACE FUNCTION user_update_streak_updated_at_column()
 $$
 BEGIN
     NEW.daily_streak_updated_at = now();
-RETURN NEW;
+    RETURN NEW;
 END;
 $$ LANGUAGE plpgsql;
 
 CREATE OR REPLACE TRIGGER update_daily_streak_timestamp
     BEFORE UPDATE
-                         ON users
-                         FOR EACH ROW
-                         EXECUTE FUNCTION user_update_streak_updated_at_column();
\ No newline at end of file
+    ON users
+    FOR EACH ROW
+EXECUTE FUNCTION user_update_streak_updated_at_column();
+
+--
+INSERT INTO users (id, username, spotify_id, spotify_visibility)
+VALUES ('00000000-0000-0000-0000-000000000000', 'delete_user', '', false);
\ No newline at end of file
diff --git a/components/login/RegistrationModal.vue b/components/login/RegistrationModal.vue
new file mode 100644
index 0000000..1202117
--- /dev/null
+++ b/components/login/RegistrationModal.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+const username = ref('')
+const isUsernameTaken = ref(false)
+const showSpotify = ref(false)
+
+interface RegisterResponse {
+  success: boolean;
+}
+
+const props = defineProps<{
+  onRegister: () => void;
+}>()
+
+const handleSubmit = async  () => {
+  await $fetch<RegisterResponse>('/api/v1/user/register', {
+    method: 'POST',
+    body: {
+      username: username.value,
+      spotify_visibility: showSpotify.value,
+    },
+    onResponse({response}: { response: Response }) {
+      if (response.ok) {
+        isUsernameTaken.value = false;
+        props.onRegister();
+      }
+    },
+    onResponseError({response}: { response: Response }) {
+      if (response.status === 409) {
+        isUsernameTaken.value = true;
+      }
+    }
+  });
+}
+</script>
+
+<template>
+  <div class="flex flex-col h-screen items-center">
+    <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
+      <div class="flex items-center justify-center h-full">
+        <div class="bg-white p-8 rounded-lg shadow-lg w-full">
+          <h2 class="text-2xl font-semibold mb-6 text-gray-800">Register</h2>
+
+          <div class="space-y-6">
+            <div>
+              <label for="username" class="block text-sm font-medium text-gray-700 mb-1">
+                Username
+              </label>
+              <input
+                  id="username"
+                  v-model="username"
+                  type="text"
+                  :class="`
+                  w-full px-4 py-2 rounded-md border
+                  focus:outline-none focus:ring-2
+                  ${isUsernameTaken
+                    ? 'border-red-500 focus:ring-red-200'
+                    : 'border-gray-300 focus:ring-blue-200'
+                  }
+                `"
+                  placeholder="Enter username"
+              >
+              <p v-if="isUsernameTaken" class="mt-2 text-sm text-red-600">
+                This username is already in use
+              </p>
+            </div>
+
+            <!-- Spotify Visibility Toggle -->
+            <div class="flex items-center justify-between">
+              <label for="spotify-toggle" class="text-sm font-medium text-gray-700">
+                Make my Spotify profile visible
+              </label>
+              <label class="relative inline-flex items-center cursor-pointer">
+                <input
+                    id="spotify-toggle"
+                    v-model="showSpotify"
+                    type="checkbox"
+                    class="sr-only peer"
+                >
+                <div
+                    class="w-11 h-6 bg-gray-200 rounded-full peer
+                           peer-focus:ring-4 peer-focus:ring-blue-200
+                           peer-checked:after:translate-x-full
+                           peer-checked:after:border-white
+                           after:content-[''] after:absolute
+                           after:top-0.5 after:left-[2px]
+                           after:bg-white after:border-gray-300
+                           after:border after:rounded-full
+                           after:h-5 after:w-5
+                           after:transition-all
+                           peer-checked:bg-blue-600"/>
+              </label>
+            </div>
+
+            <button
+                class="w-full bg-blue-600 text-white py-2 px-4 rounded-md
+                     hover:bg-blue-700 transition-colors
+                     focus:outline-none focus:ring-2 focus:ring-blue-200"
+                @click="handleSubmit">
+              Register
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+input[type="checkbox"] + div {
+  transition: background-color 0.2s ease-in-out;
+}
+</style>
\ No newline at end of file
diff --git a/composables/useUser.ts b/composables/useUser.ts
index 4699e39..8fa5ef1 100644
--- a/composables/useUser.ts
+++ b/composables/useUser.ts
@@ -14,8 +14,8 @@ export const useUser = () => {
 
             user.value = await useProfileInformation()
         } catch (err) {
-            error.value = 'Failed to fetch user'
-            console.error(err)
+            error.value = 'An error occurred';
+            console.error('Error fetching user', err)
         } finally {
             loading.value = false
         }
diff --git a/pages/confirm.vue b/pages/confirm.vue
index d0522da..ded4bf7 100644
--- a/pages/confirm.vue
+++ b/pages/confirm.vue
@@ -1,20 +1,42 @@
 <script setup lang="ts">
-const user = useSupabaseUser()
 
 // Get redirect path from cookies
 const cookieName = useRuntimeConfig().public.supabase.cookieName
 const redirectPath = useCookie(`${cookieName}-redirect-path`).value
 
-watch(user, () => {
-  if (user.value) {
-    // Clear cookie
-    useCookie(`${cookieName}-redirect-path`).value = null
-    // Redirect to path
-    return navigateTo(redirectPath || '/', {external: true});
-  } else {
-    return navigateTo('',{external: true});
+export interface LoginError {
+  error: string | null,
+  error_code: string | null,
+  msg: string | null
+}
+
+const {query} = useRoute();
+const error = useState<LoginError>('login_error', () => ({
+  error: query.error as string,
+  error_code: query.error_code as string,
+  msg: query.error_description as string
+}));
+
+onMounted(() => {
+  if (error.value.error) {
+    console.error('Login error:', error.value.error, error.value.error_code, error.value.msg)
+    navigateTo('/login')
+    return;
   }
-}, { immediate: true })
+
+  const user = useSupabaseUser()
+
+  watch(user, () => {
+    if (user.value) {
+      // Clear cookie
+      useCookie(`${cookieName}-redirect-path`).value = null
+      // Redirect to path
+      return navigateTo(redirectPath || '/', {external: true});
+    } else {
+      return navigateTo('', {external: true});
+    }
+  }, {immediate: true})
+})
 </script>
 <template>
   <div class="h-screen bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
diff --git a/pages/index.vue b/pages/index.vue
index 3f2a151..b8e7bb2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,15 +4,17 @@ import {UserViewType} from "@/types/components/users.view"
 import {useGame} from "@/composables/useGames";
 import type {ActiveGame} from "@/types/api/game";
 import VerticalGameList from "@/components/home/Game/VerticalGameList.vue";
+import RegistrationView from "@/components/login/RegistrationModal.vue";
 
-const {user} = useUser()
+const {fetchUser, user,error:userError} = useUser()
 
-useUser().fetchUser(); // loading user state just in case
-const {games, loading, error, fetchGames} = useGame();
+const {games, fetchGames} = useGame();
 
 const curr_game = useState<ActiveGame | null>('current_game', () => null);
 
 onMounted(async () => {
+  setLevelbar(70);
+  await fetchUser();
   await fetchGames();
 });
 
@@ -40,7 +42,10 @@ const newGame = async () => {
 
 <template>
   <div class="bg-gradient-to-b from-indigo-500 to-purple-500">
-    <HeaderFooterView>
+
+    <RegistrationView v-if="userError" :on-register="async ()=> {await fetchUser();}"/>
+
+    <HeaderFooterView v-if="user">
       <template #header>
 
         <div class="m-3 w-full flex items-center justify-center">
diff --git a/pages/login.vue b/pages/login.vue
index 567f95f..dde12ba 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,11 +1,26 @@
 <script setup lang="ts">
 import SplitView from "~/layouts/SplitView.vue";
+import type {LoginError} from "@/pages/confirm.vue";
 
 useSeoMeta({
   title: "BeatBuzzer",
   description: "A fun music quiz game",
   viewport: "width=device-width, initial-scale=1.0",
 })
+
+const loginError = useState<LoginError>('login_error', () => ({error: null, error_code: null, msg: null}));
+
+onMounted(() => {
+  if(loginError.value.error){
+    throw createError({
+      fatal: true,
+      statusCode: 401,
+      statusMessage: 'Unauthorized',
+      message: loginError.value.msg || 'Login error',
+    })
+
+  }
+})
 </script>
 
 <template>
diff --git a/server/api/v1/user/register.post.ts b/server/api/v1/user/register.post.ts
new file mode 100644
index 0000000..b5bf9a4
--- /dev/null
+++ b/server/api/v1/user/register.post.ts
@@ -0,0 +1,52 @@
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import {z} from "zod";
+import type {PostgrestError} from "@supabase/postgrest-js";
+import {UNIQUE_VIOLATION} from "~/server/utils/postgres-errors";
+
+
+const registerSchema = z.object({
+    username: z.string()
+        .min(4, 'Username must be at least 4 characters long')
+        .regex(
+            /^[a-zA-Z0-9_]+$/,
+            'Username can only contain letters, numbers, and underscores'
+        ),
+    spotify_visibility: z.boolean(),
+});
+
+export default defineEventHandler(async (event) => {
+    const body = await readValidatedBody(event, body => registerSchema.safeParse(body))
+
+    if (!body.success) {
+        setResponseStatus(event, 400);
+        return {error: body.error.issues};
+    }
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    const client = serverSupabaseServiceRole(event);
+    const {error}: { error: PostgrestError | null } = await client.from('users').insert({
+        id: user.id,
+        username: body.data.username,
+        spotify_id: user.user_metadata.provider_id,
+        spotify_visibility: body.data.spotify_visibility
+    } as never).single();
+
+    if (error) {
+        if (error.code === UNIQUE_VIOLATION) {
+            setResponseStatus(event, 409);
+            return {error: 'Username already taken'};
+        }
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    return {
+        success: true
+    };
+});
\ No newline at end of file

From faabbc3a8419756da00903997a03ee91e3b0f466 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 13 Dec 2024 18:09:36 +0100
Subject: [PATCH 140/221] fixed overflow on playlistview

---
 components/playlists/PlaylistBox.vue  |  2 +-
 components/playlists/PlaylistView.vue | 80 +++++++++++++--------------
 components/profile/Friendlist.vue     | 11 +---
 pages/playlists.vue                   | 10 ++--
 4 files changed, 46 insertions(+), 57 deletions(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 21b836c..5e97139 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -20,7 +20,7 @@
 <template>
   <div
     :class="[
-      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block w-24 md:w-28'
+      'bg-blue-600 rounded-3xl p-3 mb-3 inline-block w-24 md:w-28'
     ]"
   >
     <!-- Playlist Cover -->
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index a9d2ea1..1bc3ed4 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -1,61 +1,59 @@
 <script setup lang="ts">
-import type { GetPlaylistResponse } from "@/types/api/playlists"
+import type { GetPlaylistResponse } from "@/types/api/playlists";
 
-const playlists = ref()
+const playlists = ref();
 
-const session = useSupabaseSession()
+const session = useSupabaseSession();
 
 onMounted(async () => {
-    if (session.value) {
-        await getPlaylists()
-    }
-})
+  if (session.value) {
+    await getPlaylists();
+  }
+});
 
 async function getPlaylists() {
-    $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist')
-        .then((data) => {
-            playlists.value = [...data]
-        });
+  $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist')
+    .then((data) => {
+      playlists.value = [...data];
+    });
 }
 
 // Computed Classes
 const containerClasses = computed(() => {
-    const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
-    return `${baseClasses}`;
+  const baseClasses =
+    'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3 flex flex-col flex-grow-0 overflow-hidden';
+  return `${baseClasses}`;
 });
 
-
+// Add Playlist Example
 function addPlaylist() {
-    const newFriend = {
-        friend_username: "sfsdf",
-    }
-    playlists.value.push(newFriend)
+  const newPlaylist = {
+    id: Math.random().toString(),
+    name: "New Playlist",
+    cover: null,
+  };
+  playlists.value.push(newPlaylist);
 }
-
 </script>
 
 <template>
-    <div :class="[containerClasses]">
-      <!-- Fixed Header -->
-      <div class="mb-1 text-xs md:text-base mt-2 pt-2">
-        <p>Genre</p>
+  <div class="flex flex-col">
+    <div class="overflow-y-auto" style="max-height: 85vh;">
+      <div :class="[containerClasses]">
+        <!-- Fixed Header -->
+        <div class="mb-1 text-xs md:text-base mt-2 pt-2">
+          <p>Genre</p>
+        </div>
+
+        <!-- Scrollable Playlist Boxes -->
+        <div class="flex flex-row flex-nowrap overflow-x-auto space-x-2">
+          <PlaylistsPlaylistBox v-for="item in playlists" :key="item.id" :name="item.name"
+            v-bind="item.cover ? { cover: item.cover } : {}" class="flex-grow-0 flex-shrink-0" />
+          <button @click="addPlaylist">
+            <PlaylistsPlaylistBox name="Add Playlist" control-element="mdi:plus" />
+          </button>
+        </div>
       </div>
-  
-      <!-- Scrollable Playlist Boxes with constrained height -->
-      <div class="overflow-y-auto h-[calc(100%-5rem)]"> <!-- Adjust height based on parent header -->
-        <PlaylistsPlaylistBox
-          v-for="item in playlists"
-          :key="item.id"
-          :name="item.name"
-          v-bind="item.cover ? { cover: item.cover } : {}"
-        />
-        <button
-          @click="addPlaylist"
-        >
-          <PlaylistsPlaylistBox name="Add Playlist" control-element="mdi:plus"/>
-        </button>
-      </div>
-
     </div>
-  </template>
-  
+  </div>
+</template>
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index aff3afd..4084376 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -45,13 +45,4 @@ async function getFriendships() {
         @refresh="getFriendships" />
     </div>
   </div>
-</template>
-
-
-<style scoped>
-.error-message {
-  color: red;
-  margin-top: 5px;
-  background-color: white;
-}
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/pages/playlists.vue b/pages/playlists.vue
index 0621356..dfdc2fe 100644
--- a/pages/playlists.vue
+++ b/pages/playlists.vue
@@ -10,14 +10,14 @@ import HeaderFooterView from "~/layouts/FooterView.vue";
       </template>
 
       <template #footer>
-        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl py-5">
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl">
           <Icon name="mdi:album" class="text-white"/>
         </NuxtLink>
-        <NuxtLink to="/" class="inline-flex items-center bg-blue-500 text-6xl rounded-full p-1.5">
-          <Icon name="mdi:home" class="text-white"/>
+        <NuxtLink to="/" class="inline-flex items-center text-6xl rounded-full p-1.5">
+          <Icon name="mdi:home" class=""/>
         </NuxtLink>
-        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl py-5">
-          <Icon name="mdi:account-details" class="text-white"/>
+        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl">
+          <Icon name="mdi:account-details" class=""/>
         </NuxtLink>
       </template>
     </HeaderFooterView>

From 75ad5f9296e2d876d22706fe236bd62002389a19 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 15 Dec 2024 19:41:38 +0100
Subject: [PATCH 141/221] added modal and fixed gap

---
 components/playlists/PlaylistBox.vue   |  5 +++
 components/playlists/PlaylistModal.vue | 46 ++++++++++++++++++++++++++
 components/playlists/PlaylistView.vue  |  2 +-
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 components/playlists/PlaylistModal.vue

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 5e97139..e774b8b 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -15,6 +15,8 @@
       default: null
     }
     });
+
+    const showModal = ref(false);
 </script>
 
 <template>
@@ -22,6 +24,7 @@
     :class="[
       'bg-blue-600 rounded-3xl p-3 mb-3 inline-block w-24 md:w-28'
     ]"
+    @click="showModal = true"
   >
     <!-- Playlist Cover -->
     <div class="flex flex-col items-center justify-center">
@@ -44,6 +47,8 @@
       <p :class="['text-center text-sm md:text-base', props.name.length > 12 ? 'scrolling-text' : '']">{{ props.name }}</p>
     </div>
   </div>
+
+  <PlaylistsPlaylistModal  v-show="showModal" @close-modal="showModal = false"/>
 </template>
 
 <style scoped>
diff --git a/components/playlists/PlaylistModal.vue b/components/playlists/PlaylistModal.vue
new file mode 100644
index 0000000..540d631
--- /dev/null
+++ b/components/playlists/PlaylistModal.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+
+const emit = defineEmits(['close-modal']);
+
+</script>
+
+<template>
+    <div class="modal-overlay z-50">
+        <div class="modal">
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="emit('close-modal')">Close</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    background-color: #000000da;
+}
+
+.modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: white;
+    height: 500px;
+    width: 40vb;
+    margin-top: 10%;
+    border-radius: 20px;
+}
+
+button {
+    width: 150px;
+    height: 40px;
+    font-size: 14px;
+    border-radius: 16px;
+}
+</style>
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 1bc3ed4..20b6e25 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -46,7 +46,7 @@ function addPlaylist() {
         </div>
 
         <!-- Scrollable Playlist Boxes -->
-        <div class="flex flex-row flex-nowrap overflow-x-auto space-x-2">
+        <div class="flex flex-row flex-nowrap overflow-x-auto gap-2">
           <PlaylistsPlaylistBox v-for="item in playlists" :key="item.id" :name="item.name"
             v-bind="item.cover ? { cover: item.cover } : {}" class="flex-grow-0 flex-shrink-0" />
           <button @click="addPlaylist">

From e307d5bf2d6ef8a68526b970393e484d20c27c22 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 15 Dec 2024 20:30:05 +0100
Subject: [PATCH 142/221] added modal

---
 components/playlists/PlaylistBox.vue   | 80 ++++++++++++--------------
 components/playlists/PlaylistModal.vue | 10 +++-
 components/playlists/PlaylistView.vue  |  4 +-
 3 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index e774b8b..1e086e4 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -1,54 +1,50 @@
 <script setup lang="ts">
 
-    const props = defineProps({
-    cover: {
-        type: Object as () => URL,
-        default: new URL('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg')
-    },
-    name: {
-        type: String,
-        default: 'Playlist',
-        required: true
-    },
-    controlElement: {
-      type: String,
-      default: null
-    }
-    });
+const props = defineProps({
+  playlistId: {
+    type: String,
+    required: true
+  },
+  cover: {
+    type: Object as () => URL,
+    default: new URL('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg')
+  },
+  name: {
+    type: String,
+    default: 'Playlist',
+    required: true
+  },
+  controlElement: {
+    type: String,
+    default: null
+  }
+});
 
-    const showModal = ref(false);
+const showModal = ref(false);
 </script>
 
 <template>
-  <div
-    :class="[
-      'bg-blue-600 rounded-3xl p-3 mb-3 inline-block w-24 md:w-28'
-    ]"
-    @click="showModal = true"
-  >
+  <div :class="[
+    'bg-blue-600 rounded-3xl p-3 mb-3 inline-block w-24 md:w-28'
+  ]" @click="showModal = true">
     <!-- Playlist Cover -->
     <div class="flex flex-col items-center justify-center">
-    <Icon
-      v-if="controlElement"  :name="props.controlElement" :class="[ 
+      <Icon v-if="controlElement" :name="props.controlElement" :class="[
         'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl text-white'
-      ]"/>
-    <NuxtImg 
-      v-else
-      :class="[ 
+      ]" />
+      <NuxtImg v-else :class="[
         'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl'
-      ]"
-      :src="props.cover.toString()"
-      :alt="props.name"
-    />
-  </div>
-    
+      ]" :src="props.cover.toString()" :alt="props.name" />
+    </div>
+
     <!-- Horizontally Scrolling Text -->
     <div class="overflow-hidden">
-      <p :class="['text-center text-sm md:text-base', props.name.length > 12 ? 'scrolling-text' : '']">{{ props.name }}</p>
+      <p :class="['text-center text-sm md:text-base', props.name.length > 12 ? 'scrolling-text' : '']">{{ props.name }}
+      </p>
     </div>
   </div>
 
-  <PlaylistsPlaylistModal  v-show="showModal" @close-modal="showModal = false"/>
+  <PlaylistsPlaylistModal v-show="showModal" :playlist-id="props.playlistId" @close-modal="showModal = false" />
 </template>
 
 <style scoped>
@@ -61,13 +57,13 @@
 /* Scroll animation keyframe */
 @keyframes scrollText {
   0% {
-    transform: translateX(0%); /* Start at beginning */
+    transform: translateX(0%);
+    /* Start at beginning */
   }
+
   100% {
-    transform: translateX(-100%); /* Scroll completely to the left */
+    transform: translateX(-100%);
+    /* Scroll completely to the left */
   }
 }
-</style>
-
-  
-  
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/components/playlists/PlaylistModal.vue b/components/playlists/PlaylistModal.vue
index 540d631..33a0a98 100644
--- a/components/playlists/PlaylistModal.vue
+++ b/components/playlists/PlaylistModal.vue
@@ -1,12 +1,20 @@
 <script setup lang="ts">
+import { followPlaylist } from '@/server/utils/spotify';
 
-const emit = defineEmits(['close-modal']);
+const props = defineProps({
+    playlistId: {
+        type: String,
+        required: true
+    }
+}) 
 
+const emit = defineEmits(['close-modal']);
 </script>
 
 <template>
     <div class="modal-overlay z-50">
         <div class="modal">
+            <button @click="followPlaylist(props.playlistId)">{{ props.playlistId }}</button>
             <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="emit('close-modal')">Close</button>
         </div>
     </div>
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 20b6e25..24bbaf3 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -47,10 +47,10 @@ function addPlaylist() {
 
         <!-- Scrollable Playlist Boxes -->
         <div class="flex flex-row flex-nowrap overflow-x-auto gap-2">
-          <PlaylistsPlaylistBox v-for="item in playlists" :key="item.id" :name="item.name"
+          <PlaylistsPlaylistBox v-for="item in playlists" :key="item.id" :playlist-id="item.spotifyId" :name="item.name"
             v-bind="item.cover ? { cover: item.cover } : {}" class="flex-grow-0 flex-shrink-0" />
           <button @click="addPlaylist">
-            <PlaylistsPlaylistBox name="Add Playlist" control-element="mdi:plus" />
+            <PlaylistsPlaylistBox playlist-id="button" name="Add Playlist" control-element="mdi:plus" />
           </button>
         </div>
       </div>

From 4642c53663f848c2b5b04b15a31d1d4232bb086c Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 15 Dec 2024 23:47:51 +0100
Subject: [PATCH 143/221] added scopes

---
 components/login/ProviderButton.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/login/ProviderButton.vue b/components/login/ProviderButton.vue
index 2ad842b..57f121b 100644
--- a/components/login/ProviderButton.vue
+++ b/components/login/ProviderButton.vue
@@ -20,6 +20,7 @@ async function signIn() {
     provider: props.provider,
     options: {
       redirectTo: `http://${window.location.host}/confirm`,
+      scopes: `playlist-modify-public playlist-modify-private`
     },
   });
   if (error) {

From 60b05f1d5bf66956618b1908c4f05d395541997c Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 15 Dec 2024 23:48:10 +0100
Subject: [PATCH 144/221] added modal props

---
 components/playlists/PlaylistBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 1e086e4..505b0d9 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -44,7 +44,7 @@ const showModal = ref(false);
     </div>
   </div>
 
-  <PlaylistsPlaylistModal v-show="showModal" :playlist-id="props.playlistId" @close-modal="showModal = false" />
+  <PlaylistsPlaylistModal v-show="showModal" :playlist-id="props.playlistId" :playlist-name="props.name" :playlist-cover="props.cover.toString()" @close-modal="showModal = false" />
 </template>
 
 <style scoped>

From dc0b158cc34f8f8fd741d6e8fe087d37be67b3af Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 15 Dec 2024 23:48:27 +0100
Subject: [PATCH 145/221] added first functionality to modal

---
 components/playlists/PlaylistModal.vue | 93 +++++++++++++++++++++++++-
 1 file changed, 90 insertions(+), 3 deletions(-)

diff --git a/components/playlists/PlaylistModal.vue b/components/playlists/PlaylistModal.vue
index 33a0a98..3080cf0 100644
--- a/components/playlists/PlaylistModal.vue
+++ b/components/playlists/PlaylistModal.vue
@@ -1,20 +1,107 @@
 <script setup lang="ts">
-import { followPlaylist } from '@/server/utils/spotify';
+//import { useSpotify } from '@/composables/useSpotify';
 
 const props = defineProps({
     playlistId: {
         type: String,
         required: true
+    },
+    playlistName: {
+        type: String,
+        required: true
+    },
+    playlistCover: {
+        type: String,
+        required: true
     }
-}) 
+});
 
 const emit = defineEmits(['close-modal']);
+
+const session = useSupabaseSession();
+const token = ref('');
+const playlistStatus = ref(false);
+
+onMounted(async () => {
+  if (session.value) {
+    token.value = session.value.provider_token;
+  }
+});
+
+onUpdated(async () => { playlistStatus.value = await getPlaylistStatus()});
+
+async function getPlaylistStatus() {
+    try {
+        const res = await fetch(`https://api.spotify.com/v1/playlists/${props.playlistId}/followers/contains`, {
+            method: 'GET',
+            headers: {
+                'Authorization': `Bearer ${token.value}`,
+            },
+        });
+
+        // Ensure the response is OK
+        if (!res.ok) {
+            console.error(`Error: ${res.status} - ${res.statusText}`);
+            return false;
+        }
+
+        // Parse the response JSON
+        const data = await res.json();
+
+        // Log the response data
+        return data[0];
+    } catch (error) {
+        console.error('Failed to get playlist status:', error);
+    }
+}
+
+async function followPlaylist(): Promise<void> {
+    const res = await fetch(`https://api.spotify.com/v1/playlists/${props.playlistId}/followers`, {
+        method: 'PUT', // Specify the HTTP method as PUT
+        headers: {
+            'Authorization': `Bearer ${token.value}`,
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({public: true}) // An empty JSON body
+    });
+    playlistStatus.value = await getPlaylistStatus()
+
+    if (res.status === 200) {
+        console.log('Successfully followed the playlist.');
+    } else {
+        const errorData = await res.json();
+        console.error('Failed to follow playlist:', errorData);
+    }
+}
+
+async function unfollowPlaylist(): Promise<void> {
+    const res = await fetch(`https://api.spotify.com/v1/playlists/${props.playlistId}/followers`, {
+        method: 'DELETE', // Specify the HTTP method as PUT
+        headers: {
+            'Authorization': `Bearer ${token.value}`,
+            'Content-Type': 'application/json'
+        },
+    });
+    playlistStatus.value = await getPlaylistStatus()
+
+    if (res.status === 200) {
+        console.log('Successfully unfollowed the playlist.');
+    } else {
+        const errorData = await res.json();
+        console.error('Failed to unfollow playlist:', errorData);
+    }
+}
+
+
 </script>
 
 <template>
     <div class="modal-overlay z-50">
         <div class="modal">
-            <button @click="followPlaylist(props.playlistId)">{{ props.playlistId }}</button>
+            <p class="text-xl mb-2">{{  playlistName }}</p>
+            <NuxtImg :src="playlistCover" class="rounded-2xl h-40 w-40 mb-6" />
+            <button v-if="!playlistStatus" class="bg-yellow-500 hover:bg-yellow-600 text-red-600" @click="followPlaylist">Follow Playlist</button>
+            <button v-else class="bg-yellow-500 hover:bg-yellow-600 text-red-600" @click="unfollowPlaylist">Unfollow Playlist</button>
             <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="emit('close-modal')">Close</button>
         </div>
     </div>

From a0087be32852f169854d19e3cb8acf68123cec2c Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Mon, 16 Dec 2024 13:58:55 +0100
Subject: [PATCH 146/221] every category now shows up in a seperate box

---
 components/playlists/PlaylistBox.vue       |  6 +-
 components/playlists/PlaylistContainer.vue | 39 +++++++++++++
 components/playlists/PlaylistView.vue      | 64 ++++++++++------------
 3 files changed, 71 insertions(+), 38 deletions(-)
 create mode 100644 components/playlists/PlaylistContainer.vue

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 505b0d9..cd8d607 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -6,8 +6,8 @@ const props = defineProps({
     required: true
   },
   cover: {
-    type: Object as () => URL,
-    default: new URL('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg')
+    type: String,
+    default: 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg'
   },
   name: {
     type: String,
@@ -18,6 +18,8 @@ const props = defineProps({
     type: String,
     default: null
   }
+
+
 });
 
 const showModal = ref(false);
diff --git a/components/playlists/PlaylistContainer.vue b/components/playlists/PlaylistContainer.vue
new file mode 100644
index 0000000..17cf440
--- /dev/null
+++ b/components/playlists/PlaylistContainer.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+
+const props = defineProps({
+    genre: {
+        type: String,
+        required: true
+    },
+    playlists: {
+        type: Array,
+        required: true
+    },
+    categories: {
+        type: Array,
+        required: true
+    }
+});
+
+</script>
+
+<template>
+
+    <div class="w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3 flex flex-col flex-grow-0 overflow-hidden">
+        <!-- Fixed Header -->
+        <div class="mb-1 text-xs md:text-base mt-2 pt-2">
+            <p>{{ genre }}</p>
+        </div>
+
+        <!-- Scrollable Playlist Boxes -->
+        <div class="flex flex-row flex-nowrap overflow-x-auto gap-2">
+            <PlaylistsPlaylistBox 
+                v-for="item in playlists" :key="item.id" 
+                :playlist-id="item.spotifyId"
+                :name="item.name" 
+                v-bind="item.cover ? { cover: item.cover } : {}" class="flex-grow-0 flex-shrink-0" />
+        </div>
+    </div>
+
+
+</template>
\ No newline at end of file
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 24bbaf3..1873b14 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import type { GetPlaylistResponse } from "@/types/api/playlists";
 
-const playlists = ref();
+const playlists = ref([]);
 
 const session = useSupabaseSession();
 
+const categories = ref([])
+
 onMounted(async () => {
   if (session.value) {
     await getPlaylists();
@@ -12,48 +14,38 @@ onMounted(async () => {
 });
 
 async function getPlaylists() {
-  $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist')
-    .then((data) => {
-      playlists.value = [...data];
+  try {
+    const data = await $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist');
+    playlists.value = [...data];
+
+    playlists.value.forEach(element => {
+      element.categories.forEach(category => {
+        // Check if the category already exists in the array
+        const existingCategory = categories.value.find(item => item.category === category);
+
+        if (existingCategory) {
+          // Add the new id if not already present
+          if (!existingCategory.ids.includes(element.id)) {
+            existingCategory.ids.push(element.id);
+          }
+        } else {
+          // Add a new entry if the category does not exist
+          categories.value.push({ category, ids: [element.id] });
+        }
+      });
     });
-}
-
-// Computed Classes
-const containerClasses = computed(() => {
-  const baseClasses =
-    'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3 flex flex-col flex-grow-0 overflow-hidden';
-  return `${baseClasses}`;
-});
-
-// Add Playlist Example
-function addPlaylist() {
-  const newPlaylist = {
-    id: Math.random().toString(),
-    name: "New Playlist",
-    cover: null,
-  };
-  playlists.value.push(newPlaylist);
+  } catch (error) {
+    console.error("Failed to fetch playlists:", error);
+  }
 }
 </script>
 
 <template>
   <div class="flex flex-col">
     <div class="overflow-y-auto" style="max-height: 85vh;">
-      <div :class="[containerClasses]">
-        <!-- Fixed Header -->
-        <div class="mb-1 text-xs md:text-base mt-2 pt-2">
-          <p>Genre</p>
-        </div>
-
-        <!-- Scrollable Playlist Boxes -->
-        <div class="flex flex-row flex-nowrap overflow-x-auto gap-2">
-          <PlaylistsPlaylistBox v-for="item in playlists" :key="item.id" :playlist-id="item.spotifyId" :name="item.name"
-            v-bind="item.cover ? { cover: item.cover } : {}" class="flex-grow-0 flex-shrink-0" />
-          <button @click="addPlaylist">
-            <PlaylistsPlaylistBox playlist-id="button" name="Add Playlist" control-element="mdi:plus" />
-          </button>
-        </div>
-      </div>
+
+      <PlaylistsPlaylistContainer v-for="categoryEl in categories" :key="categoryEl.category" :genre="categoryEl.category" :playlists="playlists" :categories="categories"/>
+
     </div>
   </div>
 </template>

From 927087ca8c6a47c189d5ccfde6697762b689b1d3 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Mon, 16 Dec 2024 21:10:55 +0100
Subject: [PATCH 147/221] fixed playlists showing up in every category

---
 components/playlists/PlaylistContainer.vue | 15 +++++++++++----
 components/playlists/PlaylistView.vue      |  2 +-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/playlists/PlaylistContainer.vue b/components/playlists/PlaylistContainer.vue
index 17cf440..b6c158f 100644
--- a/components/playlists/PlaylistContainer.vue
+++ b/components/playlists/PlaylistContainer.vue
@@ -12,13 +12,21 @@ const props = defineProps({
     categories: {
         type: Array,
         required: true
+    },
+    playlistIds: {
+        type: Array,
+        required: true
     }
 });
 
+
+const filteredPlaylists = computed(() => 
+    props.playlists.filter((item) => props.playlistIds.includes(item.spotifyId))
+);
+
 </script>
 
 <template>
-
     <div class="w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3 flex flex-col flex-grow-0 overflow-hidden">
         <!-- Fixed Header -->
         <div class="mb-1 text-xs md:text-base mt-2 pt-2">
@@ -28,12 +36,11 @@ const props = defineProps({
         <!-- Scrollable Playlist Boxes -->
         <div class="flex flex-row flex-nowrap overflow-x-auto gap-2">
             <PlaylistsPlaylistBox 
-                v-for="item in playlists" :key="item.id" 
+                v-for="item in filteredPlaylists" 
+                :key="item.id" 
                 :playlist-id="item.spotifyId"
                 :name="item.name" 
                 v-bind="item.cover ? { cover: item.cover } : {}" class="flex-grow-0 flex-shrink-0" />
         </div>
     </div>
-
-
 </template>
\ No newline at end of file
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 1873b14..4eef29d 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -44,7 +44,7 @@ async function getPlaylists() {
   <div class="flex flex-col">
     <div class="overflow-y-auto" style="max-height: 85vh;">
 
-      <PlaylistsPlaylistContainer v-for="categoryEl in categories" :key="categoryEl.category" :genre="categoryEl.category" :playlists="playlists" :categories="categories"/>
+      <PlaylistsPlaylistContainer v-for="categoryEl in categories" :key="categoryEl.category" :genre="categoryEl.category" :playlist-ids="categoryEl.ids" :playlists="playlists" :categories="categories"/>
 
     </div>
   </div>

From 19d426c51b21ea75d27532c96f1703b9fd541659 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Mon, 16 Dec 2024 21:22:52 +0100
Subject: [PATCH 148/221] moved function to comunicate with spotify api to
 useSpotify

---
 components/playlists/PlaylistModal.vue | 69 ++--------------------
 composables/useSpotify.ts              | 80 ++++++++++++++++++++++++++
 2 files changed, 84 insertions(+), 65 deletions(-)
 create mode 100644 composables/useSpotify.ts

diff --git a/components/playlists/PlaylistModal.vue b/components/playlists/PlaylistModal.vue
index 3080cf0..9ae86f9 100644
--- a/components/playlists/PlaylistModal.vue
+++ b/components/playlists/PlaylistModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-//import { useSpotify } from '@/composables/useSpotify';
+import useSpotify from '@/composables/useSpotify';
 
 const props = defineProps({
     playlistId: {
@@ -20,7 +20,6 @@ const emit = defineEmits(['close-modal']);
 
 const session = useSupabaseSession();
 const token = ref('');
-const playlistStatus = ref(false);
 
 onMounted(async () => {
   if (session.value) {
@@ -28,70 +27,10 @@ onMounted(async () => {
   }
 });
 
-onUpdated(async () => { playlistStatus.value = await getPlaylistStatus()});
-
-async function getPlaylistStatus() {
-    try {
-        const res = await fetch(`https://api.spotify.com/v1/playlists/${props.playlistId}/followers/contains`, {
-            method: 'GET',
-            headers: {
-                'Authorization': `Bearer ${token.value}`,
-            },
-        });
-
-        // Ensure the response is OK
-        if (!res.ok) {
-            console.error(`Error: ${res.status} - ${res.statusText}`);
-            return false;
-        }
-
-        // Parse the response JSON
-        const data = await res.json();
-
-        // Log the response data
-        return data[0];
-    } catch (error) {
-        console.error('Failed to get playlist status:', error);
-    }
-}
-
-async function followPlaylist(): Promise<void> {
-    const res = await fetch(`https://api.spotify.com/v1/playlists/${props.playlistId}/followers`, {
-        method: 'PUT', // Specify the HTTP method as PUT
-        headers: {
-            'Authorization': `Bearer ${token.value}`,
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({public: true}) // An empty JSON body
-    });
-    playlistStatus.value = await getPlaylistStatus()
-
-    if (res.status === 200) {
-        console.log('Successfully followed the playlist.');
-    } else {
-        const errorData = await res.json();
-        console.error('Failed to follow playlist:', errorData);
-    }
-}
-
-async function unfollowPlaylist(): Promise<void> {
-    const res = await fetch(`https://api.spotify.com/v1/playlists/${props.playlistId}/followers`, {
-        method: 'DELETE', // Specify the HTTP method as PUT
-        headers: {
-            'Authorization': `Bearer ${token.value}`,
-            'Content-Type': 'application/json'
-        },
-    });
-    playlistStatus.value = await getPlaylistStatus()
-
-    if (res.status === 200) {
-        console.log('Successfully unfollowed the playlist.');
-    } else {
-        const errorData = await res.json();
-        console.error('Failed to unfollow playlist:', errorData);
-    }
-}
+console.log(props.playlistId)
+const { playlistStatus, getPlaylistStatus, followPlaylist, unfollowPlaylist } = useSpotify(token, props.playlistId);
 
+onUpdated(async () => { playlistStatus.value = await getPlaylistStatus()});
 
 </script>
 
diff --git a/composables/useSpotify.ts b/composables/useSpotify.ts
new file mode 100644
index 0000000..e580bd2
--- /dev/null
+++ b/composables/useSpotify.ts
@@ -0,0 +1,80 @@
+export default function useSpotify(token: Ref<string>, playlistId: string) {
+    const playlistStatus = ref<boolean | null>(null);
+
+    async function getPlaylistStatus(): Promise<boolean | null> {
+        try {
+            const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/followers/contains`, {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${token.value}`,
+                },
+            });
+
+            if (!res.ok) {
+                console.error(`Error: ${res.status} - ${res.statusText}`);
+                return null;
+            }
+
+            const data = await res.json();
+            playlistStatus.value = data[0];
+            return data[0];
+        } catch (error) {
+            console.error('Failed to get playlist status:', error);
+            return null;
+        }
+    }
+
+    async function followPlaylist(): Promise<void> {
+        try {
+            console.log(token.value)
+            console.log(playlistId.value)
+            const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/followers`, {
+                method: 'PUT',
+                headers: {
+                    'Authorization': `Bearer ${token.value}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ public: true }),
+            });
+
+            if (res.ok) {
+                console.log('Successfully followed the playlist.');
+                await getPlaylistStatus();
+            } else {
+                const errorData = await res.json();
+                console.error('Failed to follow playlist:', errorData);
+            }
+        } catch (error) {
+            console.error('Error following playlist:', error);
+        }
+    }
+
+    async function unfollowPlaylist(): Promise<void> {
+        try {
+            const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/followers`, {
+                method: 'DELETE',
+                headers: {
+                    'Authorization': `Bearer ${token.value}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            if (res.ok) {
+                console.log('Successfully unfollowed the playlist.');
+                await getPlaylistStatus();
+            } else {
+                const errorData = await res.json();
+                console.error('Failed to unfollow playlist:', errorData);
+            }
+        } catch (error) {
+            console.error('Error unfollowing playlist:', error);
+        }
+    }
+
+    return {
+        playlistStatus,
+        getPlaylistStatus,
+        followPlaylist,
+        unfollowPlaylist,
+    };
+}

From c6981df6e8a260502301d14c9297eaa4237ba7b0 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 17 Dec 2024 19:09:57 +0100
Subject: [PATCH 149/221] edited animation duration

---
 components/playlists/PlaylistBox.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index cd8d607..f18b360 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -41,7 +41,10 @@ const showModal = ref(false);
 
     <!-- Horizontally Scrolling Text -->
     <div class="overflow-hidden">
-      <p :class="['text-center text-sm md:text-base', props.name.length > 12 ? 'scrolling-text' : '']">{{ props.name }}
+      <p 
+        :class="['text-center text-sm md:text-base', props.name.length > 13 ? 'scrolling-text' : '']"
+        :style="{ animationDuration: props.name.length / 7 + 's' }">
+        {{ props.name }}
       </p>
     </div>
   </div>
@@ -52,14 +55,14 @@ const showModal = ref(false);
 <style scoped>
 .scrolling-text {
   display: inline-block;
-  animation: scrollText 5s linear infinite;
+  animation: scrollText linear infinite;
   white-space: nowrap;
 }
 
 /* Scroll animation keyframe */
 @keyframes scrollText {
   0% {
-    transform: translateX(0%);
+    transform: translateX(75%);
     /* Start at beginning */
   }
 

From 4803ea52aac089c1aba420627ecd9e409dc7e85e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 17 Dec 2024 19:14:19 +0100
Subject: [PATCH 150/221] added comments

---
 components/playlists/PlaylistBox.vue | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index f18b360..68e0ede 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -18,17 +18,17 @@ const props = defineProps({
     type: String,
     default: null
   }
-
-
 });
 
 const showModal = ref(false);
 </script>
 
 <template>
-  <div :class="[
-    'bg-blue-600 rounded-3xl p-3 mb-3 inline-block w-24 md:w-28'
-  ]" @click="showModal = true">
+  <div 
+    :class="[
+      'bg-blue-600 rounded-3xl p-3 mb-3 inline-block w-24 md:w-28'
+    ]" 
+    @click="showModal = true">
     <!-- Playlist Cover -->
     <div class="flex flex-col items-center justify-center">
       <Icon v-if="controlElement" :name="props.controlElement" :class="[
@@ -38,8 +38,7 @@ const showModal = ref(false);
         'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl'
       ]" :src="props.cover.toString()" :alt="props.name" />
     </div>
-
-    <!-- Horizontally Scrolling Text -->
+    <!-- Playlist name, scrolls when it's too long -->
     <div class="overflow-hidden">
       <p 
         :class="['text-center text-sm md:text-base', props.name.length > 13 ? 'scrolling-text' : '']"
@@ -49,6 +48,7 @@ const showModal = ref(false);
     </div>
   </div>
 
+  <!-- Modal for (un)following playlists -->
   <PlaylistsPlaylistModal v-show="showModal" :playlist-id="props.playlistId" :playlist-name="props.name" :playlist-cover="props.cover.toString()" @close-modal="showModal = false" />
 </template>
 
@@ -59,16 +59,13 @@ const showModal = ref(false);
   white-space: nowrap;
 }
 
-/* Scroll animation keyframe */
+/* Scroll animation*/
 @keyframes scrollText {
   0% {
     transform: translateX(75%);
-    /* Start at beginning */
   }
-
   100% {
     transform: translateX(-100%);
-    /* Scroll completely to the left */
   }
 }
 </style>
\ No newline at end of file

From 76fb9026889e28c85cb33c8d83a399e6c303329e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 17 Dec 2024 23:42:56 +0100
Subject: [PATCH 151/221] added default cover

---
 public/icons/default_cover.jpg | Bin 0 -> 16481 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 public/icons/default_cover.jpg

diff --git a/public/icons/default_cover.jpg b/public/icons/default_cover.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f41631de89d9a4abddb59beed7ddb81347cc1df0
GIT binary patch
literal 16481
zcmc(`dsGuw)Hi%)l0di`Fyaj%V1TFzq9USzP7sxVXtdgbsR|ktYXYKZ@m7Y5fTCOi
z#tVu8?^aug8c<PCu!vC$*iu6jP|!*hMFhMc@a+k<&-<)*t#7UGukQfK%$a@PzrD|y
zNf>xE@D!EKiCwn_A(3c2Vj_f$kTpg_7#vZ5qcDcy{aZL5{q=YS9P_@?;BY(?{~!8w
zDRcup2sDg=Ef{)9L+IakBZM-I5go3%O`hb2Wepx<AOWeq&QEf4!&HM32L=$rRf7^a
zKtlUJjw$g2dNdm`jf{+q7))bhV-pjmsX5!i+|0~;r1j7t>@lP4?Z%9<wdHVKT{w>X
zv9`9nY2)~Alic0i?Omq(cuw|qo#H;35`vkSn3$WHkFc;9G1<Y^Ve<dyF>ni6F=-t5
z!K@H&h0(0Afl4$QVHl!e@bcfl=nNxc8V(nS{jYfg0XEQp%xM_HSu_^J|H*z+-gwhX
zY_>|JI>}%#c<_f*NDM(itO7(ZnFI`99H;N`FTfFD&ESgtFH<}PIR+*Jmx0HW;@QOl
zqW_y`u?-uEbIy$;#t8#VO-;oxOvM<%6f+PDAi<#z4i1Ooe}W|U(3y^@xD8GM3y=4I
zu$W>5W{OlKVqz2zkW+vEu^|5fie<b_Le8K+NTpJNV#;wkVu2HUAm=zBcyVMFpiCY~
z-@{;-_}1k|fEJ804F=*t1Q6oz4J><rnB#!p#lXTx+{J9MX^wyjo6|A_4;FwC41|*a
z%RPu>fg);9Z!CvUj*v|-S!`3&gbN0iMM4MxCKM8&1t&=qj3^cZ@&97k#o?*)$1Pb*
zE(UL4;QP%$31t|V_LYT&bHyA7oG5Tu#k4_00-L8A_LT((Cj6wB$3Sd~g9!m3S(G9c
zcM$@XLW%`P3FCNX!hnPe43lpYa_}5F#GB{4#}qLPT5!Z<GBJz^KlmIL*9^m%g<pAm
z7aMpI5)zWmF&NBckQz$Qpdu1f!5?=K=%Lt<37#M>NH{sZW{H4;m;q&H7J)x7a0nZu
zAH_SSf-+EtQCyro4!#tNS-=wBNd}^R5qp>^4<W!AU<P<Nz*0`J01xiVBe|vyM1W1g
zezO2b;(p>JQmIr9KiH7KKn((LW&j!lA{BJubI5r5BE$ohq@O94T`D&G;7R!eB!=SP
z&=DjC5d@S0Gl55vsliNZ2I&wn9<NKv|6wTwGKg{xG8MDf0B6tvJj_KHa%B5bWdLl}
zR(=$i+2R}lBf#b)WFImQ1D#pC)PYb@Y9Ke1BKjW6Iz*E34s0TmkDy=#48Ss^A5S2m
zU@*e>4<2P13*mEcI@p7=5a<Cl34FQ<UXB3DHH-5jpk@dNF#_!G_g_XDl%Ui_H~<mD
zAPAHm6Z{s+<kNwSSSH>-hcXEmR8C?ZW+qlqCBtOlsjNb9gNYo#Ens05(Bnht43y7X
zW(tX<@`%_f`Z)%2_yJF#EZc>MECOsA)blS32PB_a1~tQ=vZw-Y_7iL>j~pI2@2|p;
z{|P=K<IO1BOl)vY8gj&IsDzyL-6Mv~KuH3`5TY6r9k{q+L_!&Y9#$b$Y7Sur$S_oF
zC$j+ST`EWmWJQb#3Fz$r8AQi<IQq$A-6aSw?%+p9slf?WekN>!AZ?&!P^mG5*iidW
zFcgm?8*yeD9jrT?{bn1%0kBc#`JZ6z;rJJ_=m-)6T|*4u$)5v}#z|9_>MPRB#|Eqm
zT8AcQ%tItj#eza~JSUh*A~S*)P>|zfCiFE`i9s6=4KqcC3Z1=dUC_8BghtLgo`5h4
zdxJpOLnj;vpch|ap8@m?whb{RRv`ugmqaJsfAa)uK^cIE$`%FeRL626fpG?lpd3qr
zqGnLd2J~U$Axk@gCY_pUd=I#g`SIF2hyxYzKT(YT0ew|x2HF@D2LK5%CRvO-HC0M6
zAuMN`8#G7I27Q5ycP#hA85|WuH4K13g&%tEE-Jx1`qUQ(>ke`#9#~p=U7;A{54sRN
zjbcotoBHk{O$(B!Ko&p(cCqOKDr0|)T0MU?X<&lg!lIYuEC)Z#F&=UJZJ?bnS;UDn
zA^;f>WwHbc0{{#9FyZs^uRI9d^%((7DBcth1-MOGgfma@18@bo6fhzTATQzM5(c$4
zFuY5?GGV<lQ_3Oylrp-QLsgWYRT$1>XO82U2H-VIpt1s>_p>gWG9YKz^X5TD`%N1n
zgNmvSv%>B6z?x~zfXHM5O6IUQ<R0I6LMU8fC}n^&g64{RYyM@OVo`m?gP`qm=iK#S
z!{SLn473tipp`0TCN$^8yHxqSMUeJ0P@1MZ?@~&sMb?#R&Y=iJpGq1zuOI<gk2B@a
zG3Xn9e2x%fGoe=mVBbPqDT6VB2Ueid2S|kMFa8i2bn^p<aE$)B0782LGo$(fizu|B
z2Qw2Gq!mV}@)?Xpi+8byF~mHSZ#tfh5yBUyi1s?t;%4zIP|I{oh}PyCiC(IxHpHS+
zHDSZz#D{VSY>uI$EEzV3K`dTM7hq-tQrU%KipYJ{7pb!1FvXq^{mip#eQg{FXi6C6
zZ>S@asmetE13X_bTg<vd=c&*)_mJ1n9fl@Gva#O|bEJ8D2(p0A$LP?#{lRQH2!R!A
zkx;zUP$Iwz1*}3_Q;k<efzK>9qGO)VYiZmr0`SMAn;}Og@WFCMbs%abFMt|>=1Ed)
z;vtjJ>!3CQAyP#klPcHLkuC)YIE5&f$pX|uA+wlxrr6XbNp%i704ZL=z)5KTrw@`_
zoV($G8Vjb!5Y;{`C`po8fFpy81soimKw{H^lUT%fF>F>6NNBY@^qyl`*{GtTgP3^q
zs{)8@C?Z(Yn(oJ^3o#oy&HyiR7$+Hkr6thk=qdm&CVWARiNDSufDg72E%#ZI7tZ!g
zg^;FVuu^mBW;nrQTl3fsBHtPcf+oIuFke#~+@#$r_o8j1w$@Olwp%HU5y6y)81lEV
zLh)fNCOd(Lz`&*XJjNnl@Dj=lfM9%x++x&4@liqTu1(~2amYc11vo6)P%cb>pV$<y
zQ>o4|gn)M*lLwo&_imQuji3yg6a@8`y(3-n={N!pVMV2SBek=n6U(3lsLt^MObZfJ
z49JBw<opFWX6toCXV9VO=+kL)&9iGV2^9e@!cxKFI|70rlgltLGRFyv;0Xck3?>8d
z-V>IkjU<jIAX7TBjXw@fiqImk8&c0A=ET#X$_d1PwhElXfRjNi0<_ZEb`h%0FWwC%
zl4U8339a@4TQLf&ek@1`UJk7sF<`l*Iwf?j99WlOJL~-?@#_9F!{&jBY!hDIRBST=
z7|}`C1aN|hOe-QDLHC5J#Fi{!Q_B@b7}BU36Mdb4O9)59v)n-)LIloK5kvwn3APWQ
z&4EAybcSaZKmu--;G_y7`99RLq!E!6TLRu`lsVEx1-o`8tZH9l%EAx>p`{Sg{0Qim
zP{su8xb0-vU!%)`3wkjv%bl$D>YyNlpau(|V>!Y!^hL@u(*l)>r@~?BP+<!_(5roq
zfXS%v&x6jBh7>8*j;i?9Ji82WNLai%WE#$77IG*^snAkfr2@DS3`jgjg^u4ZpYbpj
z%p5i4$RrXdCNJnSY?UE>CR9)n0h40r=-^!fEFYJUDQSwlpAfHt9x>2}zwOpjT&UWs
zi{z281I2l%9LH1^lbVDIHZ)3D5vX2+a^7#IU6>Y%%%`MHDyIlWy6nIZ#zFC+j(`|Q
zBsF-jHVTPlnD~UDk_h7?X!EId#Q1n*T)Ke(xCq1{sO~~>0ct5OG;9vWgSLqA5WWkU
zZY?(sj;z5J2xH0(*C$(kr0N|nhs2SohSdCPpeYaP0HFdE?|r6a;S&|FVu2Mg$h4q~
z#euc7fZC8TA^6l_ApDHV339H&Pv7~|wWM<9oS82c6;5{pUSui#yWBu!e(@@SSUeUE
zIWU2Bd~m4nGi(kdj%`oNb3fe*leF{G2wJM!;AM;aM}QMR3DkfURgMTs3$ljq8b+mV
z)baf@Ln+G5Yub3h8|Hda#|W!A>d1uR;Sh%QN6oM?F@lm@N{56E_uE7m$o|Yd!LSu3
zP{#;uIkk<=f)WQsut-od1RIAX7f~IIJ!;o;Y6=w1ZDSa_MJzF#jI8<rdISeYg*d#x
zU?OY|6ZELWxap1s4nKt&$YvamA<bu}1RG9HuUSiCh{>Uwa-iOzrE#F@*w&eBoWyJJ
zO+V)wsL+h#8%@d5cMqsDY(b$O41;}^m?NYR550vDqcf%iY?T;nE6?zcq=9QpSTTl1
zG5)5oW?pg1gA1YwCZ3AJEePO&gn8aDQ)oAAbbQ1!!oY(yjBG~Oo``*mI$+nM8@)Od
zykMb1zy<;C5F9u~$cALWhQM^{-y8!I`lf6a0q)K;+dI1_+@1g$5<#D%6q#a(N5U!K
z2beHolBEDhVR*QNl5FaLfWP3ybOsCXO(3xl`VlpaY?8)7W;352Xf>SDE_kFG4yabc
z1`;|6@2oi>o6e&yFwTe}0)O8(C8@K~Q!b!k)PVu2u$DnbK|IbL0s;sUNQA~G@Ce2%
zW4jVKMriHPb-fIOV#Z+ZAi&7V|AdOVO28k=4`m}BVSIn<YU&x!klHIV#&%KjhQUO5
zc|6z<5B?^Q5Tiw?5HiewPRtUoA3i_SJ`?*qCFoG`OcfP-s)13%8jKMmjzMDpC}hB#
zxFAG`*!KIYX8O-OB_b{xf<zJ1Df2iO0b6*(so@nAFidR-%A=)_0>hjN78SrO{SpUW
ztrIA~ixF|gk%V$#;5861*m$93NJId+83WLoK!u6H#l_SNkn>>409YWzIFS#TSCOzv
zn1Cy6KmwVMNX(Zcg?J{Lq*T%`VMHdNoFI8BQbmeYyi6X4$L0>+Q;5kz&NzlONoR_g
z)_OWLM}+xhA~66w$wWxqeA(bNu(vT~oCsh;q#3*DI9^UJg~*V;HCg_PF<%HQTLfVP
zgXn1KE<YZdh2VY~R#g^c-xPWP+cy(D#)P<2K^9dIh$<#=zA1~%VsjS}1%zrb<qe1j
z?bHh##tRTVO-Ln(&E&$qm`f=b&qhr05(|=oCsE0OL5I-51Wu^Lu(^f_oVWzxp^WAs
z>+=lat3X6i!3!*lSSZ7vdLt-<O?Y?>knaIbAU%T-^nV3|p&-$)(g7a_<#P}oPtXg3
zdAr!Ge5$vpC>CIZ0ZvkH1bvYZ-W*9*02BRe3OYE33;PKJ0rg_g3uQ+c4uGMSCpxUN
z;J5=!zy)NTMdZUJ5DfuBU;-FLF`B|&1qcvY!XVFJLIWJZNs{u*F#gAML_r095gUhY
zY6IIN0tD|GoP%kK18m1ZiIB=0ID^DYG|m8i6<qsQBxMo!$pLzJ0duG`zzXJ1p_MxO
z>NyqPMaY*Nl(pDkJ))>Uf+46Z1WBeiU~nK!Uki<@Ht>_6`oh<%aP8l)QULneKz4xw
zWDgG?#{-mTG#cQLdh|*S8cqeqokfIN4du95i`kPL9EYh2;fW;myZ~e118ASAGDq@-
z^eWwvJmQS{W{^$Lt+s&0Z}bz=t!ij<4g{T1SO%^vGtzx8{Z+pwZPK<07jtX$6ZV`H
z1*JJZjtN<HE_LI9di{jmtmDJd`0UznTi2Y+uKo48@4eG~NAa%;=45RQxc<2*R6ilv
z>V5Pgr?-Bw8`~w}8x*2xW2}SE71*A9>~XhMt}gj3KKVEyIO@3U7f-j$OP&SiQbs*t
z=bW@r-mTSqH*)kh$`sbQ(MB!5{*|QpcAvVW@R6s$((w-ua(IDc!d%_=qH&Agc>ZOU
zf7`^}ZSRUJvJ0cbH*_&~l|0*f&NkFa<hv+JX5b6W&FS*ozasf&$v^dN@<CbB1+EVa
zLMFQmUprwxm@sl^+Qt2pV)H$>b$6dffc0}$y?(y&Qq=wm$D%D8uPmE(_i0w}wdvnq
z82x<1o%73&{POL-&JyXjt`EMOF!z)9<Ov`s`}mH$k;C>~++SULW1;z;-*k6dUpBcU
z&si;dJ~<{TyTb9EX5*n5)2g3l#p<WeKRUX#<4&pk$f*VUI%B0Prv2RQ_Y+q4d}%;t
z^tNlq8_T%eYkv`lvVG24Yfk?ryids<zVGF$x(sg8qVL&_zk$+;qwk#}SWlnYu56(6
zv~2a<pnN$_xw$u&5*=lo<uG#Z@$5#!wb(oMCCd{*$jE)ot=BVUlGYAJ7ERrnba=_3
zsPDEt>;B~Y^9-MJzdv4<?Hu5jx&P_NeNUYiwim76|Dkd`J=_1n(#^}i>;7$ZtoL`-
zjlcQKa*5ma{GZu@j;X)O)=Z1<^q91+_pgkfyqNc*jCX&$`bcdr|MkiBO$`ffO&NVF
z$i6A`51;otb)qnf^;d=$?yc(B=-Lq#dEmpczpgjX3hl3DO?+Rp@3(h9{q^hB`d3@_
zd3p5S`n6>F-YpZePuY*Z{!8xXgg;K5YG)0(zTwxjo!RbRmVMe^a(~Xg<!8e<UoszS
z^MCuL%Y(3Qx?cIH;Ynofj&J@E&pr3Wx%;EwpL^wp16b+w=d+ykHe)|sc{Z(I=J&;<
zP-<5bn?r6f*MAUI{*gP*727beL3jDViBoqLvX@!=l|&SNZeM@yX~y-oaq4ew-@PL(
zm^^uW+tnTN_2*u$39o6%{(-3RioT}5u)JjH$|Tb-oTa(Re?C0jTR(uHGTBzpEdJN1
zG1MS@j4%tco&Enpf&WJ_6{;Jf8!?SA2GlM!V6CHBZDct(5}{$%oUv|`7e(h!nj#d(
zXRR9QyEvifzd|>f1%>`w@^~@LBk+=<VE*_@oBEt?`Qd=xseT-3?c&|jFCO}BjHY8=
zw(My3;oJ<rjX}$PSv%r~;w<lMiR@^_)TyVFZIhqgYcZSShvhB_`2CsQJ?Y2wQS1x)
zL%$8x6y{wB9oDnnji@fTJk0jPgS8`k_2rZ0hfOaEstRV=?4DF|<w$5lBfiyHqx1Uo
z&9d0AJ4-ij_Pn`t!u)>0MgN6cH1Fni{1d&~_Q52&wc>a-dgsQSdtl05uP{c?CGos1
z=Z76>FhS;rCNF*woqXQQNAg4GNT(9_jH%z9J2Y;S=dCZJ#vVQ=|M^a<QvG^f-qXp8
z|A|g&&J<PujL|$Ac)wl@CKj|CCi$G7k4qfJH2m@HrU)mFd2zMkz&CqGUldN))P_n&
zC;ImXExk<<CNA}<{r~rU=KD1NenHryPm!K67B7BoFa5Kx_~5eZL;sjsERB(#H5xk?
zEFX3DgLt#-eb@T+E`pY`zgaBl-RGq2=k<I2O<n7Lwqqx49sli<1#Ul_uAlH7x$5%w
zV+_ZAlWraBc}BT8^W6SdZ5ubcl}}nm{!@>Aw?>_l{N8KY;WEwpr9F?MKd$!|y{wO4
zP;mOsz_Q%zE7$ucEE#2)oci}awTrlamoEAI^XDt(KYwUvH>~{F5ID)}dC<Ae)f;2W
zGIqK?dABV$;q;#?gCA$#`|IstlNO&}#vfZc;qRrDLmIqyz6+eWcge3qqn9+CoOxp(
zt&DsZ@l#94hstZuL#~XMN7c{k8U51e;mSk(+yB{r?{S&tisV=OC6}1-PjtgJ3GAFU
zefaapFA=?uB@4B(KTl?@_aD1VtFHgUc<$5Pzc>B0F%i@LxXk*e(b_kU$7r{%et!Oh
zWg^B8-)Nh?V(8+nqxUYfE<CtxX5^@O@t)$u=4EzyDLboam4yL*=+@QoRu)$4Y(H#(
z9a&fTMhkkX`6Mf8>z@`5+21l>{frzRyZxh|Gmlf_OH}N?99j2xj6U(&)^$IWy(xww
z7EmS1FfyV(9sF9NR>)yde$gaC7#h~W;<!b}XNhmtK7IFJX=1Y+pfpoLTK%>0S3;Yw
zkTX71c$&<u7{AXUPV?t<Yt0ASt0n2Q-&J=j7Fivo_wb6iIr}Gh=RV$8&0#pvCLnhc
z@fhDblP~rXf%(^~Cj4-9_elTQSkK*Z_rQB=E3Mxy_jxltXi?+dmRT?Fs=98^)UP}k
zSl`f+GyFhOz|P64>BDHe^gD~U6qyTcgR0i0&v(L=E6h1x@ToHs1sS$ZoAoV<qm`t+
ztb|rsdV7b+wL4bda>(Q03kz3rg4bCT20Y7M4|iCu?cf<7a(`uZ-D7uz)yY4-w;X)_
z^XA0ew`8ktwgw#wg_{b3wK4EqZ2P3U<<?>bKSx-|*y?WLacld~-)|%xKAo<$JzcPk
zvGz@2*~3}83D27kS7800HwNT+@i!){zC5yXhRq@GWL2BTfk#6xaL=}=tDJRr&&Y<z
zj?DcKIIFkn<Z9@MG%PxE$vfTZ>@`b<i-s*6qnz#$CXC7XZ)&MwYO^qAzhP=Ed$?%M
z!ZG#JJ)#X$PgZBI1;+oTKo&IxRE&jVdJM7@OWrks_?+P)C&Sb_Va)$bg&U@}3S*Q8
zs<lA%e@%^<OpN1={8R7qWfi~SaM6#boFB4qpE;v<S=D<KJj$r7xw1F$+nC^l)@^xS
z_cqGv5(@|uCv;oMI9K$!a>+ch`;SJ-fHB4!&5fKC#)QS{`UYykwx@XF*b(PF&5a{(
zRM_Uat6uQVPTD*BeggiqaGvu$-t@dzf6RC+G2bYAmbiba$Iz?Ki{^1uw6h1WxVgc?
zo@Ebbq0xQogYA}1I?uBT)uxq9Inz{B?WubH{p!%AcZRD!b#<AlUlh#xxO(Ha-0Py-
z#^bw}&^C_WFtn@p)AO9>r;oL(WDA#V5^Brlwtgra-TnSoSEkQFMZkf)QcyS~{?JC>
zgJrXRKl0PN`NK!<G9Ewnk!i^hRi)3&jpdoE{Z2^s)+grp^gXWRuu`o4!ZB_$jXvk{
zj}Q3cek|H}q-N8wu%8&)Dp@8@<whfr$&Th6`jHW>k%UY1rZW}-zt>exc+I?^XBo0l
zP5<mVdSmkkhby)3hQ=@&Z1I}AT;U`Bg{G{=PZt)KWG3pQz8*tt2-intUp{>fNXw$z
zDB=^0$`>3x-H>P<+S4a5)9srPeI`#jajI*;rlH+A@j{#FkA@FDdHlVqVq7Vs{(I-3
z${7d431^k>$YonU&A7X<teF<pK^uScml5%cX_kGH9_}X154`<`#xz4((<hBpr<V9m
z339lDZ~WDYU`Qu;UcEy<{mA^V<)IDmIOET=q|<0wnM8K@{(D9!Z0yMabhYW<Zw(-7
zE6@5p{FsQZ43Vm}9L+68f`r3WSQO6=w-$vbiDc^Ez12Et|MngAA>E3=aHT}1PLpwh
zxf)!A^f%SDQf088Qp<m@6(|>;zELeJ3vtru!Zo+J>P)&Su)Pq;Rfh#OA#;*MeD&`$
zdv$9%^%s=dZly$^kjNZokD~{2iuHuYA%XM5u$+eZ3J~@7x*|%D9m2mB@?8DMNhx&F
z1oM>f>pT?mm9-I^C;UrVflAB2rgy2+O;u~J=Slbpx^SD2@PtEhg|*099-&OI=+w?v
zH<+sfOVvANdFuta)obh81WIwZCSV*lSE>+AmIexqw0xCTpbm7ps-33PZqbB%QSNkA
zYq>^xeol5cSEOmk;uf&v>HrJ1gsYaEzqn3%RUUp|y^}`IRo}HZE(-Dxt@F@J6*`_#
zh?JvqDGXfO`Raxy<VL+@i#kxQkZ@JHT{-3c)*^u-P?m!`X~c7s+oYPf$lO<g+$W{#
zIP<F^PKuS`ik0gUBwU3^pb7M|e#lMM36i(E)ax#*t1s)dt~J_|%8>AS?L^INx>7IK
zG*}dv@YHt%>PKr8JHwBKNRLS_YucHeI+;3fz9Qr`d$&N-Fke#>p$w6Y)$%7xoRlHm
z$|#6uWY-XxTF<`}FSsZkr_pgC1@5D{8p20i;RIPerg!Po{-_KJQ%cS%Lc**+R_6Ey
zY4mc%C<}F9m`#Xua^Q7M_4$ii<p<V<*O`Rp>BH4nc!SP_6mb>)=0?@wiYzC^Z2mPZ
z|7!J2&8Iaz%im~19MoE=jozt0F#`Exj<dtBiXyH`oYWzJhxS};l=`ipaXnvM5w0OD
z4!>$A14P_vrXobD9O<nN2?sp%hjgnYu65PVm4Qyl64|Lhr}vUj*q}O!UKa;iC_)@G
zAu_cbg5acX=N}FUR|oUeA@dclUer;d=vO5tGpn5xX#%BWZGCmOGLYY>y`U6@t0mH_
zSs)6+&Mj^i)ZdY*bqsZNxH69aStrvhe|}NRR|j%6qUgziFJPxF*XUc7z0zbIKS#pX
zgskoS{k%pSemLZkx>~9+3s*elD|KAW0FseeKI%n2^;$u_R<2&}T(AA23^|!A5h%f@
zz=^m-s;uTJ^<8;7US6BL;0ctSt7d0-*(cdG-H*x;zUC%hsikXlmo$1=c9iszzf4{0
zs+721`?OXmDN|}oi`Rv#wc*ww0!6%&1_B@0s?hrzg~*k!oRpu673&4p1`z*ZpmUG*
zvQi6fx}2)!DgdRTbqL8cX;O&lG09AIUs<Pav-&N+3@p=0HTQ$mAWI}w!AAm;P)!J!
z`{iQq#HP6C2ewM<byBrtoH|5)I9sj|Ig!vckkciJlR_&yTzy&j_V0d)hjMwivN~Mz
zjZ_mDb3!5FP&5c{5U8tVYVCz%A(5Y>zCf;X^#X-9=9EsRkVL@a55tgK>tq@Uw<qLv
z+0L0w+Q>R>sX9b(Ko_KzaMjeq4{8|gmMNkC1W6BTKRncx)h}<q2)W)a=*(Wz1CKSn
z4ry_qi(0p~{`U*l+FBtHf`*XIO6?lW%1{p-=U*a(OHL}D@YPZLeo5(H@*h8IuWO<N
z%KNW1cY@Ua5;-D4o$k6)J5w!}H!b|7;qCKlfv)wEiHCIpMRw>{s(8YvO?FHhp8aWU
z=aUatbrYLHe$)iDLeSNc)>DH-R)Rt#)vVvFuI^T>kL(TMs&{^Y95!gBnsw6RL95~g
znrg7h<*I~#Oz*0BTdJ&<g7vPQkVBmeR2s~(&@|9X5&!TLfimhmpru~hr>_1`FP9$+
z6sUWrY63gp(IYoonyV+BMUhIabEB@iSRP(BfWj4V&?wgY71(-1BvYUuz`R1TGY5CR
z5%~Pt&hR|#jn23a14!%ISzW4bKYyTlr$WLpGJrm+Uqm=IoxG~M(OG@|T9lx-eE`)<
zx-Uw?b3+7bJy!|N>7#l?f>K<r)I~N)oO_zOm3?LU0mMB<1^<#pBGpuLa6qBlNmETa
z2g)>2-AZ}5J|wbf{fA!d4K)N`E>luoPV9jOr{f;PozxOdr`81us<bSstLbfbZf_(+
zUoU|k8H&pRssL)zS;x=aDO104)k}&yb%G|yd`PKAqUnL|i{!abvl4kG9;1<e(S%$+
z*0;8|ZK`^EsTvC8T8QkJT%gd08iApMKb;~pR^mK>AP173y1uT)KxuCuoa?r9>IJ!h
zQVjx?fPe5bQoj>&0F5s4GibX1p=W3J#dbh`Po0i~Q?&+8lsn4%>$NTrE9Fif#Q>VB
zczeF=6<=R1SGHf$KtCBkQ3FWNEySmFLNH%N=>vP}tE2h@o%=;)%9WP^M7?s3k;u7D
zeo3iAWBUY(>Kp2}*RQ>$GWw-Hqz_t^Mh>x!(htT>@B9dd(=|;YarMi)!ONZj^htV6
z>)I3IS_jb$>=+DOuAFq#JE`MJi{*k|T~x1p0CiTE)$jbGS$;`FMQ#lwK@YPXNT#g5
zu9TE&+WBSeHy~0@$KuxX>STb7{~fy?Ie|-@n*s&LLe|zxKyP31019#K)k2q<s1KAX
zA$E|lK=~y|OPoOQw)EQDiM??HsF&&r-N)j>HBmivdI%mwE|d%3XcU#zYa{h~O?@AD
zYjCA)ZIjlusa>w<)6^rWQZFZ|0`uqz3@_WcwkhPNCQ2uuQyFz#8CTXRSp!xU8tJ(T
zLmkrk0IfGV-<B3f_3Np?0|<`A@ejm(0pMLjT&3PX257GCrvfMeVRB8=04nYb`Oq2i
zOOp<|Eg<g_X`sXPPGwQ0#XG~V4IqeBac^9=;%%3j;%b+xsmz8B(#ezqsH|R63JsTv
zY81pq>(T^^Es*p?fk0OS9aMjRQxt?RvZ)>9X_}}q3xwziaurMt5@^UladEwIPKvje
zkG<^yBE7s!-v?eu)o=?0-IiJxsbSpSU#E@i)q*Y{5^3~tWxXLcn))0JS0n35!#izS
zFBQ7*YjGgxx<(GB$8}xXS=M8?4AmcMAVb5eFDoE&dV~ESQBV0$EiID~hU-!KK{^_2
zc=~&xMEfYaAhXW;_CB@bL%D&<D5}Tsj(Lb=xqV;Ml+H^U(Zv2I{Y~;O%4Wkwz=pvQ
zBobVc_w<BNO=JMoi6-{wJ<9rS=tCwBl2J9=3WqpDBP#Cg<L5%K29U_vK;Cm7fTign
z21%h7BjBSCk7`X*yG$tu%LmYjT*_DKN3oI$5qFT(5h4m_ifT$uagW5gH||TeT%e(5
z2avS5uV3G6pv2>PsNhqx?U$9HekZsqD%0p;8U$DW3i<~{jvZ7p_}UKFL;|&_A3z07
z(!dT;7(nkO07t2TgJx)2QF2W+R}&be@9WRrPSN#&0t#nwZIh!u7>vL)kXE^-P6DJ(
zW$ius#tVjIgE;D^R}u(eCO{?~C@5>?8j)P#RMsnxRLH4{@2P932N$5|qV(1Xg$OiI
zDIzWqDnu?+RR(>Hk)C@13^2rC-C|(q1mM1aS|0ob5tOvfK$sms{RT}2#vZt`ZZy=I
z9B!Q{{c6A`5a}a>%Gx#UgJ$ZuxzjXFP#Hk+`WSRI#TJmzP`9$bQLmR5%0UKb1azuU
zU>x8IC{AEez^tjBW=PgPCpBpABdw#}c7qOzTtSQ$MVJgA=%0Nj;$aK1upO>w9$7o7
z>lA@ool1`NgY84Wl671%CwE$}T!v6_Z|DhR!p%b2>*LA+E}wj!Un02*0-}o`D79uD
z0pI}QW|~X`hq<^2H{oisrA~JQ)HZr9V3{PdOor+>vP=Sp$WU<r=y3pgks=qA3EyI;
z_v^U8D^;+N@h1W7+(?+Eh6yYw8j%;5IsjSah!#g;d_@44n~AKyMp<et5&)(3Y^frU
z03O8xJ%p2kH~^faO!%D6FyNjHgaodG&z<0^3<3%|Pp*^Va3Oba6KKdAWg5tkf~DEq
zT&Dq)ibHn;N8r;>1@H<qLN0}1+#el+Nhit|UlGSzghs-n7J%?L1?41xaDuCV`yZ~R
zh67)WIRP?7T&};!AOxvl6&y4lBIwU0DS;vg9XFQ>j#6Y|?GLL0GBSXUN|8SY2oT22
z#KArRECmS?nWh?UEr5{#?ym#RF|Z0cwp3FGA!d-0a1HFrAfi+N3`0REfKdn8ffWa|
z2qBip%nt`sby9^Nh_DtpfDp(p2RGqSJU9V&j}#fAD?}b390XFo5_#`Bz5=FMAV&mG
z;_R#t^(olbr*LoqK2XOtgp!0f)2;l!NAIjVr_LyR>=je<{0pS%Jthss*C)Ia<?mP?
zd4B2JM7#XbtndsG>*^)`)Qse+?}|Dfy<BOK4IiD+20wH+NJdtn2vczg@dk2GHucb+
z^~S7vV)Fj$Mmt_Vx56!>mWSK+PUhWB0Riwi9T<n`#)khRphUp`7r?_ohe^aDVHi9j
z%<m{NJSF`1bGliq{DTQhP6BiKqkP{aHZS;*$0#>lW$ncW=|&?qxQE?)!4op}u!MBh
zrXt^6du({2Q)1ex<_XJdFU}jfyK#d%UufjW<RoIL`M$TAoT9p1x8|_p^MrqdRlZ^g
zXJfu8UToefH>2N9+s%F8LbDj<F4L7)#3zsPJVGDAbl*GIv2uhNyT`|Q-w4?=!=)6O
zrBO1@<gJ<>T$K7ewdkZi{YdN)ixCmEcRDX-0q;vcmN2zw6_b;{D#^xjtZIv_V$J>B
zsZZno-VK+66OwHBLSH6)b8J^4Sya^8;dvxzL|Do!b4%wDvNpI5-X^g*MX5z;)o(n4
zY|Y)nl1I5!tl8_<dC}s?f_OR$zR$}NCkB^G5|WGUCXS6iZs~l_J?yx-M_970r7?Ce
z!F*R5OPmm&zpByo$X3tJtp{bz8{B0T6xn9;<k?nqHfMSodx&qxq>A{4u!|>N$U->@
zm8{?*hMA3<&Dip9G6FLkqqhW&^4JK*<-u16lUPC{{PrH3=9@3KmfE>KFuFe?;+d@W
zxWy>9<_#=yxsYLQ<Y;E}IM(|}^gq$ho_a*QkX7tXp_#kYzJxDKMX-WBJ$c{c`+BeV
z%g)tnQpLQnbMLw7j<31rImVI64^A*0k;pJl+F<*Abd}u#&$egpJhLrq(;r&K`!Xll
za1u;e!S4LgR;?`=vonnCEWO<4Z;3cEf5rmmbmtK<X>3k@W+Jw5xb4=GmW*k(TZfK0
zV(SrOJKsG*mojv<gRkj`R8Hk8%LU$c3tiGOre&oJT{GHUR-3%n?S;YZgk5H=V7FD4
zr|k~d#(J-aqMdjVmV7^V#9sP{y;!1K=*_C!;-co3JGIAmUyMJ#29WS#k_}JFN!(@5
z@U$>L68)kxTAwjH-FAV|J;=c*kBEwcMF2`Mr1Ex6`8Vknmb!G$7Wjqe9gf-LX>0EG
z2CiC+MVmdlylsJb_<}roe4M4dGplY&+U{tlA3I{!Rm2}RpPuVhvDUvbIDgfyR35Q8
z(Kfnj%yn1K2S1#dj}mqoPZ_oQ6RW@Ur{f-vhc~)(<-fD9I#7KqOD}DXIT)6_*FB<Q
z?kG=iu4q+q)@ql9#<}U9@1r+tKQybvFXHdaFGdURq?@cT?jAtm)@Mrp>X~bYRJW(w
z?#rE?J7a<4?Nt66PNgJc^&>yzso08HrMzD`mi#bj^a_hvc568H&+I+ty*=K!U8buG
zySQdVM1{F~Od4RDEIM12U0t=CwfdmS=brzB6vsaQ9n*Eo2GEtK-6k0$cI4K0TEr#l
z=RR<LU<AdSBFrcA85X#Ca+U3t_X|FUagGV^{pPU3&!{(V)*{l<Zsd!FZ412!ZR?vp
z%g6g{_s+OK%B>5p9BGlB2Z7~p;>}Fk`#Ngo{>o!#?}<LIY&T&Zn!x>ZBc<zFwC7>Z
z5n+H*_bp6ba1AHF<{AdyiBjxvd}tT;Io;lQOl!-^jNlT+vkvd7X=Q<*k6yKOwhcP$
zd2qvaI&000;R}3^mj85Orfs`rMqliZM2pny=PMr2&h#yK@?wOn!eT_&BfdC4Gr@AV
zj;mZ~_jA{^&7<6&g<YISGk5<nmDAXD;|Q&6?+yAaVRAg*|5=9R+yN9=JZ0{_gJG4m
z$r*k;;R#vH=byqCw>F;6OxrQPpZWBIP42tDeV98+IIgXpL&8YdV79;9>!vgGfTP~Y
z&;&VkT{m`%TE#zgS@{>Ij()CfzMY>j?8Xr6ozYxlSOM3}0y}cuTEmjlUHlWw8GFXi
zPDjOB`86Z+gUwZYju~hC@vZz>;`85|=SUY~EuTxiNZ%dkeNy7R4}e**1{^CD8vAwo
z%uaeU??8E)XodIb{A2rVJ|6mFRrO|zW2*esy^Y%h{Xfcfjy!%S#pQhP%jGk+eJ^+x
zKy-U21+RQj-D5lRSwZ839(wNvG_|>+c~#5JzoXt?+j7{g_9AqIl-MFh8cUdVQ(wFw
z&z$)y=~Co6W^d=|A&<rO(GjRL?qS1*$%Qzr_J`Qg<^4a(ue(f{M~hDxe(=tk87_6}
zw{)!h^yG@qntRZbw>gkSMk$G>qrNGos{iJ5*sflazjCWh-ZyH-QE%wPzPnO6f3!a=
z&flK#&CTa!@2_p#IwGu62X?fNnwt`tcRKxp9duC(_&SJw;kxqL<5yl%rTO6KjpMx;
zE(7R-J~A)c-1D$oMSSsjSZYSCa6Rg^ZDmQ9XSZ2jWMk5^4emegHTsa>Rq=RB$E?p!
zF10=DItVMw>Pq3NUHdGL`dH>2kEDwK-PWc)*M``csV~|d{=o~*zx<*rH@XT6+IFjV
zRR3R*DTU437Lnx;mWQX)?&>pEr#DU<K<hP6yzQK!N|NtQ_wi-&#nsL2`qK*oKiE}`
zDd~voU0(F?^ofc?7cH)@c3@cia`Y;g*5lbV>&q{X+VrQh%5`pCt1NzZS#b2~&cF{T
zad+A?rbSIL_lUWkz~ryrHl}m{mGqRfKmEPKOa8F>MTG9SWy-;OLWYH9-h#aJNS|N4
zVyAqu)W>`nYH@U8aKddf)|zgw*zD-`Ri2$LAIB6uy!p~6Ho+pwC9SyhN;zS!5aYx7
zSSvg`_?%%px>+)WIB?I&`6#(PbN*O-NBQTZgHJ!W^jOaM>5U`G`T#rQ&&i~TuFrI(
zTj8xcsgtw1hkra;)Z7M($J|jf@>W%jY8+y`aQ1_1>7K8blF~hBYsJ%w@{WCdJsaL1
zSw+Kc_H597JgRAXSQ7yYqz^AqwdLKmvn3Gi)y>V(6GI)cQisIbPky&EvTwnowui-u
z$NQPER6V)6)oYtcNz2jePxD;*Q;zH?%-Ogd?kFF(r{}pguKAtlGN(hH^DG++)}NUk
zdw{gtkbN*kdyA&(Ykbu0eb24J!Y&CGy$kxA`kOD;w4_Y5%Jf;7zS3vNn=KEk^^fDq
zOUFQ4ulhN6PsffX^5fs_CR}xFm!p5x>vgT2o=1j!oR)anE3z}?rS~e;<2_MVTDnc*
z;jW8${dd|sBNnsIj~Nj1rE$Zx2_1i<-DvBtXR&g49x$a-)IXcNelN2uy6V-!DH}2?
zR=7Za*lB$%w`0Y`5Lhkj4*sy^Re1;*dyKH1KeqLON&k(9M_GHvzWH%%bQRmr+&+QX
zcVl<n$hccOcX`FU+Y)xKwyvd~zoz|R+K|+!KI6OA9~-6*aeab{Z8vpq|Li)`Hhv|y
zR{wGc(QPr&o><%ce(T3LW~zS(_ni;NEycw6@RXj<+(Wdc*8XwLZOxrN6WVM$)@+!$
z@Ea4ZVxhhDHeRIX)45l&@5Oz{=huZjO<8+Y%z+Pz@0i<0KO9^VQ)u%Fwo%L4jF@Ft
zo<IILWaE-`zfE+_lB6@rH(dHSWa1|im74IgDoy#5#{I-ZpZs2b_YUse^rzEms3o<!
zDm%m2Hs<}7*Nvk`eB3!JFV){=d$H|?#4KB5H}6?*qsLt}5+yd58oT+V9NY8}Fi?Ex
zj~;KksNu7ptGKtkAI+P&V$9IQ$9+RS*>P#*H&N;*w6f|1+$N-UZ>vs*dz7~s6OFz7
zd?#$Tv(n#wShwv!)DQPa!m4>8);DH!Y4r3@7w!G#+4-+xen0#~*fIJn{FD6|DI;AP
zhnl1RF89rMbF1{ubg(lrvA-lDcHW}BJ!W70#m{*B))_G!+wD@o_x$!v6<xveisBz1
zy5pUpGWC4F;rIg^Zp$Iwmx|ZD!hYWq_)z~hvlh>ftNe8K2K}jBWTR^n(Nf>#71Q>}
zO5JQ6T^TonTbuMbu|IX@lL_fl7I?PYe%3QH{#kcY28UCw+MW0?-&2O!{Y3k`vnAc<
zfw$cdW1u;md-GLv)fIjEj13k0zR$n&(Z0LJ!mixcGj`?cxE{lfWiUz9>x|fIF<tQ9
zm}0xlHn!Am!4acx=&`A?XAM`pw(WZyYwU8YcUI=21md*qcGz`Nxq(gwJC2sU^UhYK
zrF+HBh%K4*6RmP<`frSxp|sQiWLJ8*v$mzOmno?<n$qo^k`fo;bc!VA8G>RL=@qTN
z2@SHj{aLqXOUCg0=9YACW^}Z3hv)UUr@q`N&!ShPWK`tE-Lr9^HwFzU%y_&q?PmM$
z|7<*!l(PF#c4fxyJEiW=zT0%Kmy!Yob-?b@)nHk1WS*txJHXwGmYXkHs+(JqT7L<}
z>^JTIb((5_Ufej+e^y-Y%~$n%Z#0+uoXHwd0<2W4HvA^u*Qa~7zW{-4U9OL}9f|4K
z0>=;=*aP~2{0x^!uWgS3(k1OxV@e+zF6UXo1h8MGUdCLD^=xbI0Gn#Suk6!fN}(Kz
zBRyM+(;!^`{obsCDTteAN33DCuH`nhJBF}=dho|9y35iFT%ttVxgLqV5nlyC+X99Z
zXa6T8eFo^=>J2%AoMgCw_OlN&hQpo{D5&?U{I6b}g!gA{Knq($!_>C#V>+Vs#Zks~
zt{}tSk20*fDzSJ>>G!bIR#%;b>_h_4s<Ll?6#;r0UBN!^dZlk07}n_er1Z$3wC%Pr
zlz@!Y8N=;{1cICl$;}s_F1i~y;KEJ)?Ps51|6M{w(X(X$(P6ghYIGa0gZml7BfT3B
z*haVi+cz@S165tiA3*gEe5%U6|Ey!%pstf`(JvqfFAWi~jUGVpVE){ee;&u0!p#X~
zYb~hEqjn74a5FPw%#@5TQ_^R3Jn*vlJZ<5*=&HJs&rcT|iJ5hC=Anlf1v|ePK(;N%
JAI1&n{vSo<L4*JR

literal 0
HcmV?d00001


From f94e3258a345f23ad54089f25b76b115a6563d31 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 17 Dec 2024 23:43:20 +0100
Subject: [PATCH 152/221] added comments and improved code

---
 components/playlists/PlaylistBox.vue       | 20 +++++-----
 components/playlists/PlaylistContainer.vue | 16 +++-----
 components/playlists/PlaylistModal.vue     | 46 +++-------------------
 components/playlists/PlaylistView.vue      | 10 ++---
 composables/useSpotify.ts                  |  8 +++-
 5 files changed, 33 insertions(+), 67 deletions(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 68e0ede..676c8bb 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 const props = defineProps({
   playlistId: {
     type: String,
@@ -7,7 +6,7 @@ const props = defineProps({
   },
   cover: {
     type: String,
-    default: 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg'
+    default: "/icons/default_cover.jpg"
   },
   name: {
     type: String,
@@ -29,14 +28,12 @@ const showModal = ref(false);
       'bg-blue-600 rounded-3xl p-3 mb-3 inline-block w-24 md:w-28'
     ]" 
     @click="showModal = true">
-    <!-- Playlist Cover -->
+    <!-- Playlist cover, when none is given a default image is used -->
     <div class="flex flex-col items-center justify-center">
-      <Icon v-if="controlElement" :name="props.controlElement" :class="[
-        'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl text-white'
-      ]" />
-      <NuxtImg v-else :class="[
-        'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl'
-      ]" :src="props.cover.toString()" :alt="props.name" />
+      <NuxtImg 
+        :class="[
+          'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl'
+        ]" :src="props.cover" :alt="props.name" />
     </div>
     <!-- Playlist name, scrolls when it's too long -->
     <div class="overflow-hidden">
@@ -49,7 +46,9 @@ const showModal = ref(false);
   </div>
 
   <!-- Modal for (un)following playlists -->
-  <PlaylistsPlaylistModal v-show="showModal" :playlist-id="props.playlistId" :playlist-name="props.name" :playlist-cover="props.cover.toString()" @close-modal="showModal = false" />
+  <PlaylistsPlaylistModal 
+    v-show="showModal" :playlist-id="props.playlistId" :playlist-name="props.name"
+    :playlist-cover="props.cover" @close-modal="showModal = false" />
 </template>
 
 <style scoped>
@@ -64,6 +63,7 @@ const showModal = ref(false);
   0% {
     transform: translateX(75%);
   }
+
   100% {
     transform: translateX(-100%);
   }
diff --git a/components/playlists/PlaylistContainer.vue b/components/playlists/PlaylistContainer.vue
index b6c158f..1ff51b1 100644
--- a/components/playlists/PlaylistContainer.vue
+++ b/components/playlists/PlaylistContainer.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { GetPlaylistResponse } from "@/types/api/playlists";
 
 const props = defineProps({
     genre: {
@@ -6,11 +7,7 @@ const props = defineProps({
         required: true
     },
     playlists: {
-        type: Array,
-        required: true
-    },
-    categories: {
-        type: Array,
+        type: Array as PropType<GetPlaylistResponse[]>,
         required: true
     },
     playlistIds: {
@@ -19,28 +16,27 @@ const props = defineProps({
     }
 });
 
-
+/* Filter the playlists array for playlits where the ID exists in the genre. */
 const filteredPlaylists = computed(() => 
     props.playlists.filter((item) => props.playlistIds.includes(item.spotifyId))
 );
-
 </script>
 
 <template>
     <div class="w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3 flex flex-col flex-grow-0 overflow-hidden">
-        <!-- Fixed Header -->
+        <!-- Header with genre name -->
         <div class="mb-1 text-xs md:text-base mt-2 pt-2">
             <p>{{ genre }}</p>
         </div>
 
-        <!-- Scrollable Playlist Boxes -->
+        <!-- Boxes with the name and cover of the playlist in the genre -->
         <div class="flex flex-row flex-nowrap overflow-x-auto gap-2">
             <PlaylistsPlaylistBox 
                 v-for="item in filteredPlaylists" 
                 :key="item.id" 
                 :playlist-id="item.spotifyId"
                 :name="item.name" 
-                v-bind="item.cover ? { cover: item.cover } : {}" class="flex-grow-0 flex-shrink-0" />
+                v-bind="item.cover ? { cover: item.cover.toString() } : {}" class="flex-grow-0 flex-shrink-0" />
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/components/playlists/PlaylistModal.vue b/components/playlists/PlaylistModal.vue
index 9ae86f9..00a7138 100644
--- a/components/playlists/PlaylistModal.vue
+++ b/components/playlists/PlaylistModal.vue
@@ -1,3 +1,4 @@
+<!-- Modal for (un)following playlists -->
 <script setup lang="ts">
 import useSpotify from '@/composables/useSpotify';
 
@@ -16,27 +17,16 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(['close-modal']);
-
-const session = useSupabaseSession();
-const token = ref('');
-
-onMounted(async () => {
-  if (session.value) {
-    token.value = session.value.provider_token;
-  }
-});
-
-console.log(props.playlistId)
-const { playlistStatus, getPlaylistStatus, followPlaylist, unfollowPlaylist } = useSpotify(token, props.playlistId);
-
 onUpdated(async () => { playlistStatus.value = await getPlaylistStatus()});
 
+const emit = defineEmits(['close-modal']);
+
+const { playlistStatus, getPlaylistStatus, followPlaylist, unfollowPlaylist } = useSpotify(props.playlistId);
 </script>
 
 <template>
-    <div class="modal-overlay z-50">
-        <div class="modal">
+    <div class="fixed top-0 bottom-0 left-0 right-0 flex justify-center bg-black bg-opacity-85 z-50">
+        <div class="mt-[10%] w-5/6 md:w-1/6 h-5/6 md:h-3/6 rounded-3xl flex flex-col items-center justify-center text-center bg-white">
             <p class="text-xl mb-2">{{  playlistName }}</p>
             <NuxtImg :src="playlistCover" class="rounded-2xl h-40 w-40 mb-6" />
             <button v-if="!playlistStatus" class="bg-yellow-500 hover:bg-yellow-600 text-red-600" @click="followPlaylist">Follow Playlist</button>
@@ -47,30 +37,6 @@ onUpdated(async () => { playlistStatus.value = await getPlaylistStatus()});
 </template>
 
 <style scoped>
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    background-color: #000000da;
-}
-
-.modal {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    background-color: white;
-    height: 500px;
-    width: 40vb;
-    margin-top: 10%;
-    border-radius: 20px;
-}
-
 button {
     width: 150px;
     height: 40px;
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 4eef29d..82a4a9b 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import type { GetPlaylistResponse } from "@/types/api/playlists";
 
-const playlists = ref([]);
+const playlists = ref<GetPlaylistResponse[]>([]);
+  const categories = ref<{ category: string; ids: number[] }[]>([]);
 
 const session = useSupabaseSession();
 
-const categories = ref([])
-
 onMounted(async () => {
   if (session.value) {
     await getPlaylists();
   }
 });
 
+/* Get all available playlists and get every category with corresponding playlist IDs*/
 async function getPlaylists() {
   try {
     const data = await $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist');
@@ -24,7 +24,7 @@ async function getPlaylists() {
         const existingCategory = categories.value.find(item => item.category === category);
 
         if (existingCategory) {
-          // Add the new id if not already present
+          // Add the new ID if not already present
           if (!existingCategory.ids.includes(element.id)) {
             existingCategory.ids.push(element.id);
           }
@@ -43,9 +43,7 @@ async function getPlaylists() {
 <template>
   <div class="flex flex-col">
     <div class="overflow-y-auto" style="max-height: 85vh;">
-
       <PlaylistsPlaylistContainer v-for="categoryEl in categories" :key="categoryEl.category" :genre="categoryEl.category" :playlist-ids="categoryEl.ids" :playlists="playlists" :categories="categories"/>
-
     </div>
   </div>
 </template>
diff --git a/composables/useSpotify.ts b/composables/useSpotify.ts
index e580bd2..8930a19 100644
--- a/composables/useSpotify.ts
+++ b/composables/useSpotify.ts
@@ -1,6 +1,12 @@
-export default function useSpotify(token: Ref<string>, playlistId: string) {
+export default function useSpotify(playlistId: string) {
     const playlistStatus = ref<boolean | null>(null);
 
+    const session = useSupabaseSession();
+    const token = ref('');
+    if (session.value) {
+        token.value = session.value.provider_token;
+    }
+
     async function getPlaylistStatus(): Promise<boolean | null> {
         try {
             const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/followers/contains`, {

From af494bf10d87e11ce80b6101678dd6b87edd44e2 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 17 Dec 2024 23:46:40 +0100
Subject: [PATCH 153/221] Removed debug output

---
 composables/useSpotify.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/composables/useSpotify.ts b/composables/useSpotify.ts
index 8930a19..9c3fd02 100644
--- a/composables/useSpotify.ts
+++ b/composables/useSpotify.ts
@@ -1,10 +1,11 @@
+/* Communicate with Spotify API */
 export default function useSpotify(playlistId: string) {
     const playlistStatus = ref<boolean | null>(null);
 
     const session = useSupabaseSession();
     const token = ref('');
     if (session.value) {
-        token.value = session.value.provider_token;
+        token.value = session.value.provider_token ?? '';
     }
 
     async function getPlaylistStatus(): Promise<boolean | null> {
@@ -32,8 +33,6 @@ export default function useSpotify(playlistId: string) {
 
     async function followPlaylist(): Promise<void> {
         try {
-            console.log(token.value)
-            console.log(playlistId.value)
             const res = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}/followers`, {
                 method: 'PUT',
                 headers: {
@@ -44,7 +43,6 @@ export default function useSpotify(playlistId: string) {
             });
 
             if (res.ok) {
-                console.log('Successfully followed the playlist.');
                 await getPlaylistStatus();
             } else {
                 const errorData = await res.json();
@@ -66,7 +64,6 @@ export default function useSpotify(playlistId: string) {
             });
 
             if (res.ok) {
-                console.log('Successfully unfollowed the playlist.');
                 await getPlaylistStatus();
             } else {
                 const errorData = await res.json();

From 6d1ea7333f53fd57ca8af76c582d4cb9eb14f929 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 12:11:25 +0100
Subject: [PATCH 154/221] fix(playlist): dont show disabled playlists

---
 components/playlists/PlaylistView.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 82a4a9b..ea6d03d 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -2,7 +2,7 @@
 import type { GetPlaylistResponse } from "@/types/api/playlists";
 
 const playlists = ref<GetPlaylistResponse[]>([]);
-  const categories = ref<{ category: string; ids: number[] }[]>([]);
+const categories = ref<{ category: string; ids: number[] }[]>([]);
 
 const session = useSupabaseSession();
 
@@ -18,19 +18,22 @@ async function getPlaylists() {
     const data = await $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist');
     playlists.value = [...data];
 
-    playlists.value.forEach(element => {
-      element.categories.forEach(category => {
+    playlists.value.forEach(playlist => {
+      // Skip disabled playlists
+      if(!playlist.enabled) return;
+
+      playlist.categories.forEach(category => {
         // Check if the category already exists in the array
         const existingCategory = categories.value.find(item => item.category === category);
 
         if (existingCategory) {
           // Add the new ID if not already present
-          if (!existingCategory.ids.includes(element.id)) {
-            existingCategory.ids.push(element.id);
+          if (!existingCategory.ids.includes(playlist.id)) {
+            existingCategory.ids.push(playlist.id);
           }
         } else {
           // Add a new entry if the category does not exist
-          categories.value.push({ category, ids: [element.id] });
+          categories.value.push({ category, ids: [playlist.id] });
         }
       });
     });

From 5fa785f46dd323d87477f37cceae4b081d09cc3f Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 12:23:18 +0100
Subject: [PATCH 155/221] remove playtest page

---
 pages/playtest.vue | 158 ---------------------------------------------
 1 file changed, 158 deletions(-)
 delete mode 100644 pages/playtest.vue

diff --git a/pages/playtest.vue b/pages/playtest.vue
deleted file mode 100644
index 1e96fa5..0000000
--- a/pages/playtest.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<script setup lang="ts">
-
-import GameSelectLayout from "@/layouts/Game/GameSelectLayout.vue";
-import type {ActiveGame, PlayGameResponse, Song} from "@/types/api/game";
-
-const game = ref<ActiveGame | null>(null)
-const round = computed(() => game.value ? game.value.rounds[roundIdx.value - 1] : null)
-const time = ref(0);
-const roundIdx = ref(1)
-
-const buttonActiveColor = 'bg-indigo-500';
-
-const score = ref(0);
-const scoreAddition = ref(0);
-
-const audio = ref<HTMLAudioElement | null>(null);
-const volume = ref(0.03);
-
-onMounted(async () => {
-  await nextTick();
-  audio.value = new Audio();
-  audio.value.preload = 'auto';
-  audio.value.controls = false;
-  audio.value.volume = volume.value;
-
-  audio.value.onended = async () => {
-    await clickOption(round.value!.options[0]);
-  }
-});
-
-
-const playAudio = (url: string) => {
-  if (!audio.value) return;
-  audio.value.src = url;
-  audio.value.volume = volume.value;
-  audio.value.load();
-  // wait for audio to load
-  audio.value.oncanplay = () => {
-    time.value = new Date().getTime(); // start measuring time to guess
-    audio.value!.play();
-  }
-};
-
-const pauseAudio = () => {
-  if (!audio.value) return;
-  audio.value.pause();
-};
-
-const nextRound = () => {
-  if (!game.value || !round.value) return;
-  // Game end
-  if (roundIdx.value >= game.value.rounds.length) {
-    pauseAudio();
-    game.value = null;
-    roundIdx.value = 1;
-    audio.value!.src = '';
-    scoreAddition.value = 0;
-    return
-  } else roundIdx.value += 1;
-
-  playAudio(round.value.preview_url);
-}
-
-const clickOption = async (option: Song) => {
-  time.value = new Date().getTime() - time.value; // end measuring time to guess
-
-  // mark clicked option
-  const el = document.getElementById(option.id);
-  if (!el) return;
-  el.classList.add(buttonActiveColor);
-  el.classList.remove('bg-white');
-
-  // async fetch if the guess is correct
-  const response = $fetch<PlayGameResponse>(`/api/v1/game/${game.value!.game_id}/play`, {
-    method: 'POST',
-    body: {
-      "round": roundIdx.value,
-      "guess": option.id,
-      "time": time.value / 1000,
-    }
-  })
-
-  // wait a fixed amount for pretty UI
-  await new Promise(resolve => setTimeout(resolve, 1000));
-
-  const data: PlayGameResponse = await response;
-  if (!data) return;
-
-  scoreAddition.value = data.score - score.value;
-  score.value = data.score;
-
-
-  el.classList.remove(buttonActiveColor);
-  if (data.correct_guess) {
-    el.classList.add('bg-green-400');
-  } else {
-    el.classList.add('bg-red-400');
-  }
-
-  // wait for UI
-  await new Promise(resolve => setTimeout(resolve, 1250));
-  pauseAudio();
-  await new Promise(resolve => setTimeout(resolve, 175));
-
-  el.classList.remove('bg-green-400', 'bg-red-400');
-  el.classList.add('bg-white');
-
-  nextRound();
-}
-
-async function newGame() {
-  const data = await $fetch<ActiveGame>('/api/v1/game', {
-    method: 'POST',
-    body: JSON.stringify({
-      playlist_id: '4DZ79IJM4IlYBI8dpWZZO2',
-      opponent_id: '9da97502-5363-4964-ae80-c242a053e810',
-    }),
-  });
-  score.value = 0;
-  playAudio(data.rounds[0].preview_url);
-  game.value = data;
-}
-</script>
-
-<template>
-  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
-    <GameSelectLayout>
-      <template #scoreboard>
-        <div class="text-white text-center">User 1 vs User 2</div>
-        <button v-if="!game" @click="newGame()">New Game</button>
-      </template>
-      <template #round-indicator>
-        <div v-if="game" class="flex justify-center gap-2 p-4">
-        <span
-            v-for="roundNum in 5"
-            :key="roundNum"
-            class="text-2xl"
-        >
-          {{ roundIdx >= roundNum ? '🔴' : '⭕' }}
-        </span>
-        </div>
-      </template>
-
-      <template #select-options>
-        <div class="grid grid-cols-1 gap-4 w-full px-4">
-          <button
-              v-for="option in round?.options"
-              :key="option.id"
-              :id="option.id"
-              class="bg-white text-gray-800 font-semibold py-4 px-6 border border-gray-700 rounded shadow-sm transition-colors duration-300 h-full"
-              @click="clickOption(option)"
-              v-text="option.name"
-          />
-        </div>
-      </template>
-    </GameSelectLayout>
-  </div>
-</template>
\ No newline at end of file

From 06e9eb59e2c6053a122f796bd85bc9d5a2861ec4 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 12:29:08 +0100
Subject: [PATCH 156/221] fix daily streak not updating at first game after
 signup

---
 DB/users.sql                          |   2 +-
 server/api/v1/game/[uid]/play.post.ts | 101 ++++++++++++++------------
 2 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/DB/users.sql b/DB/users.sql
index ec3f44f..86cd03a 100644
--- a/DB/users.sql
+++ b/DB/users.sql
@@ -7,7 +7,7 @@ CREATE TABLE users
     spotify_visibility      boolean                  not null default false,
     created_at              timestamp with time zone          default now(),
     daily_streak            integer                  not null default 0,
-    daily_streak_updated_at timestamp with time zone not null default now(),
+    daily_streak_updated_at timestamp with time zone not null default now()-interval '1 day',
     primary key (id)
 );
 
diff --git a/server/api/v1/game/[uid]/play.post.ts b/server/api/v1/game/[uid]/play.post.ts
index d192f73..5411977 100644
--- a/server/api/v1/game/[uid]/play.post.ts
+++ b/server/api/v1/game/[uid]/play.post.ts
@@ -4,6 +4,7 @@ import {GameStatus} from "~/types/api/game";
 import type {PostgrestError} from "@supabase/postgrest-js";
 import type {GameDB, GetGameDBRow} from "~/server/utils/mapper/game-mapper";
 import {mapGameRows} from "~/server/utils/mapper/game-mapper";
+import type {SupabaseClient} from "@supabase/supabase-js";
 
 const PlayGameSchema = z.object({
     round: z.number(),
@@ -149,56 +150,11 @@ export default defineEventHandler(async (event) => {
             return {error: 'Internal server error'};
         }
 
-        // asynchronously remove game from memory. No await!
+        // No await!. Asynchronously remove game from memory
         useStorage().removeItem('game:' + gameId).then(() => console.debug('Removed game from memory:' + gameId));
 
-        // Update or reset streak
-        client.from('users').select('*').eq('id', user.id).single()
-            .then(async ({data, error}: {
-                data: {
-                    daily_streak: number,
-                    daily_streak_updated_at: string,
-                } | null,
-                error: PostgrestError | null
-            }) => {
-                if (error) {
-                    console.error('Error getting user', error);
-                    return;
-                }
-                if (!data) return;
-
-                const lastUpdated = new Date(data.daily_streak_updated_at);
-                const now = new Date();
-                const hoursDifference = (now.getTime() - lastUpdated.getTime()) / (1000 * 60 * 60);
-
-                let newStreak = data.daily_streak;
-
-                // If last update was more than 24 hours ago but less than 48 hours ago
-                if (hoursDifference >= 24 && hoursDifference < 48) {
-                    // Increment streak
-                    newStreak = data.daily_streak + 1;
-                }
-                // If more than 48 hours passed, reset streak
-                else if (hoursDifference >= 48) {
-                    newStreak = 0;
-                }
-                // If less than 24 hours, keep current streak
-
-                // Update streak if changed
-                if(newStreak === data.daily_streak) return;
-
-                const {error: updateError} = await client
-                    .from('users')
-                    .update({
-                        daily_streak: newStreak,
-                        // no need to update timestamp. DB hook will automatically set it
-                    } as never)
-                    .eq('id', user.id);
-
-                if (updateError) {
-                    console.error('Error updating streak', updateError);
-                }
-            });
+        // No await! Update or reset streak asynchronously
+        updateStreak(client, user.id);
     }
 
     return {
@@ -208,3 +164,52 @@ export default defineEventHandler(async (event) => {
     };
 
 });
+
+const updateStreak = async (client: SupabaseClient, user_id: string) => {
+    client.from('users').select('*').eq('id', user_id).single()
+        .then(async ({data, error}: {
+            data: {
+                daily_streak: number,
+                daily_streak_updated_at: string,
+            } | null,
+            error: PostgrestError | null
+        }) => {
+            if (error) {
+                console.error('Error getting user', error);
+                return;
+            }
+            if (!data) return;
+
+            const lastUpdated = new Date(data.daily_streak_updated_at);
+            const now = new Date();
+            const hoursDifference = (now.getTime() - lastUpdated.getTime()) / (1000 * 60 * 60);
+
+            let newStreak = data.daily_streak;
+
+            // If last update was more than 24 hours ago but less than 48 hours ago
+            if (hoursDifference >= 24 && hoursDifference < 48) {
+                // Increment streak
+                newStreak = data.daily_streak + 1;
+            }
+            // If more than 48 hours passed, reset streak
+            else if (hoursDifference >= 48) {
+                newStreak = 0;
+            }
+            // If less than 24 hours, keep current streak
+
+            // Update streak if changed
+            if(newStreak === data.daily_streak) return;
+
+            const {error: updateError} = await client
+                .from('users')
+                .update({
+                    daily_streak: newStreak,
+                    // no need to update timestamp. DB hook will automatically set it
+                } as never)
+                .eq('id', user_id);
+
+            if (updateError) {
+                console.error('Error updating streak', updateError);
+            }
+        });
+}

From d96e36d6ac53b784e111bc777bde509810c2d088 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 12:34:00 +0100
Subject: [PATCH 157/221] fix(tslint): fix errors

---
 server/api/v1/game/index.post.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
index 9e1cc52..1e92f83 100644
--- a/server/api/v1/game/index.post.ts
+++ b/server/api/v1/game/index.post.ts
@@ -7,6 +7,7 @@ import {GameStatus} from "~/types/api/game";
 import type {SupabaseClient} from "@supabase/supabase-js";
 import type {Playlist} from "~/types/api/playlist";
 import type {PostgrestError} from "@supabase/postgrest-js";
+import type {GetUserResponse} from "~/types/api/users";
 
 const GameInitSchema = z.object({
     playlist_id: z.string().regex(spotifyIDRegex, {message: 'Invalid Spotify ID'}),
@@ -164,8 +165,8 @@ export default defineEventHandler(async (event) => {
                 cover: playlist.cover
             },
             players: [
-                {id: user.id},
-                {id: result.data.opponent_id}
+                {id: user.id} as GetUserResponse,
+                {id: result.data.opponent_id} as GetUserResponse
             ], // TODO: Fetch opponent data and fix this
             rounds: mappedGameRounds
         }

From 01b0db6653183344713fab50b5491b2fe82d7489 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 12:50:14 +0100
Subject: [PATCH 158/221] fix wrong footer link

---
 pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index b8e7bb2..25e79c2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -71,7 +71,7 @@ const newGame = async () => {
         </div>
       </template>
       <template #footer>
-        <NuxtLink to="/playlist" class="inline-flex items-center text-5xl rounded-xl">
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl">
           <Icon name="mdi:album" class=""/>
         </NuxtLink>
         <NuxtLink to="/" class="inline-flex items-center text-6xl rounded-full p-1.5">

From 1fb802cb752f267b9fea45dd0d6e0a9ea8712397 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 12:50:25 +0100
Subject: [PATCH 159/221] add Dockerfile

---
 Dockerfile | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 Dockerfile

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..5b927f8
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,38 @@
+# Build stage
+FROM node:20-alpine as builder
+
+WORKDIR /app
+
+# Install dependencies needed for node-gyp
+RUN apk add --no-cache python3 make g++
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy project files
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Copy built assets from builder
+COPY --from=builder /app/.output /app/.output
+
+# Expose the port
+EXPOSE 3000
+
+# Set environment variables
+ENV PORT=3000
+ENV HOST=0.0.0.0
+ENV NODE_ENV=production
+
+# Start the application
+CMD ["node", ".output/server/index.mjs"]
\ No newline at end of file

From 2594e4d25a5a8b242292fd8fdaf7a24ac448b8ed Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 12:53:27 +0100
Subject: [PATCH 160/221] enhance Dockerfile for layer caching

---
 Dockerfile | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 5b927f8..fb8f9a2 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -6,13 +6,13 @@ WORKDIR /app
 # Install dependencies needed for node-gyp
 RUN apk add --no-cache python3 make g++
 
-# Copy package files
-COPY package*.json ./
+# Copy package files first
+COPY package.json package-lock.json ./
 
-# Install dependencies
-RUN npm install
+# Install dependencies (this layer will be cached if package files don't change)
+RUN npm ci
 
-# Copy project files
+# Copy all source files
 COPY . .
 
 # Build the application

From b5b6843034c7b9d6ce593231d6eb891f61fffea9 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 12:58:58 +0100
Subject: [PATCH 161/221] fix Opponents Turn showing wrong name

---
 pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index 25e79c2..0b77459 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -66,7 +66,7 @@ const newGame = async () => {
         <div class="flex flex-col h-full p-3">
           <VerticalGameList :games="games?.active || []" class="h-3/6"/>
           <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
-                     :users="games?.waiting ? games?.waiting.map(game=>game.players[0]) : []"/>
+                     :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"/>
           <HomeControlsGameButtons class="h-1/6" @quick-game="()=>newGame()"/>
         </div>
       </template>

From 4eae0d1dd7f4ffbd98d89cfdf3e94ffa3f81c098 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 13:02:02 +0100
Subject: [PATCH 162/221] feat(ci/cd): Automatically build docker image

---
 .github/workflows/docker-publish.yml | 53 ++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 .github/workflows/docker-publish.yml

diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
new file mode 100644
index 0000000..a86d0df
--- /dev/null
+++ b/.github/workflows/docker-publish.yml
@@ -0,0 +1,53 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches: [ "main" ]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=sha,format=long
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
\ No newline at end of file

From 621ef5440033a6b36a7d1a71a2fb65443aebed3a Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 13:22:15 +0100
Subject: [PATCH 163/221] feat(ci/cd): change docker image tag

---
 .github/workflows/docker-publish.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
index a86d0df..4f409d0 100644
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -6,7 +6,7 @@ on:
 
 env:
   REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
+  IMAGE_NAME: ${{ github.repository_owner }}/beat-buzzer
 
 jobs:
   build-and-push:
@@ -35,7 +35,7 @@ jobs:
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
-            type=sha,format=long
+            type=sha,format=short
             type=ref,event=branch
             type=ref,event=pr
             type=semver,pattern={{version}}

From 3bc9a91785498d59e008d0c4663fe380342d431d Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 18 Dec 2024 16:31:41 +0100
Subject: [PATCH 164/221] added enabled value to request

---
 server/api/v1/playlist/index.post.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index 7131877..f95c0ee 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -35,7 +35,8 @@ export default defineEventHandler(async (event) => {
         id: result.data.id,
         name: result.data.name,
         spotifyId: result.data.spotifyId,
-        cover: coverUrl
+        cover: coverUrl,
+        enabled: result.data.enabled
     }
 
     const categoriesInsert = result.data.categories.map((category) => ({

From 76c2527f19aa75d0a4f99d934fba55642dd6c7d7 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 18 Dec 2024 16:32:06 +0100
Subject: [PATCH 165/221] added getUserPlaylist from spotify

---
 composables/useSpotify.ts | 48 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/composables/useSpotify.ts b/composables/useSpotify.ts
index 9c3fd02..195fd0c 100644
--- a/composables/useSpotify.ts
+++ b/composables/useSpotify.ts
@@ -1,9 +1,13 @@
 /* Communicate with Spotify API */
+import type { Playlist } from "@/types/api/playlist"
+
 export default function useSpotify(playlistId: string) {
     const playlistStatus = ref<boolean | null>(null);
+    const userPlaylists = ref<Playlist[]>([]);
 
     const session = useSupabaseSession();
     const token = ref('');
+
     if (session.value) {
         token.value = session.value.provider_token ?? '';
     }
@@ -24,12 +28,12 @@ export default function useSpotify(playlistId: string) {
 
             const data = await res.json();
             playlistStatus.value = data[0];
-            return data[0];
+            return playlistStatus.value;
         } catch (error) {
             console.error('Failed to get playlist status:', error);
             return null;
         }
-    }
+    };
 
     async function followPlaylist(): Promise<void> {
         try {
@@ -51,7 +55,7 @@ export default function useSpotify(playlistId: string) {
         } catch (error) {
             console.error('Error following playlist:', error);
         }
-    }
+    };
 
     async function unfollowPlaylist(): Promise<void> {
         try {
@@ -72,6 +76,43 @@ export default function useSpotify(playlistId: string) {
         } catch (error) {
             console.error('Error unfollowing playlist:', error);
         }
+    };
+
+    async function getUserPlaylists(): Promise<Playlist[] | null> {
+        try {
+            const res = await fetch(`https://api.spotify.com/v1/users/${session.value?.user.user_metadata.full_name}/playlists`, {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${token.value}`,
+                },
+            });
+
+            if (!res.ok) {
+                console.error(`Error: ${res.status} - ${res.statusText}`);
+                return null;
+            }
+
+            const data = await res.json();
+
+            console.log(data)
+
+            data.items.forEach(item => {
+                if (!userPlaylists.value.some(playlist => playlist.id === item.id)) {
+                    userPlaylists.value.push({ 
+                        id: item.id, 
+                        spotifyId: item.id, 
+                        cover: item.images[0].url, 
+                        enabled: true, 
+                        name: item.name
+                    } as Playlist);
+                }
+            });
+            
+            return userPlaylists.value;
+        } catch (error) {
+            console.error('Failed to get playlists:', error);
+            return null;
+        }
     }
 
     return {
@@ -79,5 +120,6 @@ export default function useSpotify(playlistId: string) {
         getPlaylistStatus,
         followPlaylist,
         unfollowPlaylist,
+        getUserPlaylists
     };
 }

From ef71060c10d58754eacc39bd621976f729378b2e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 18 Dec 2024 16:32:29 +0100
Subject: [PATCH 166/221] added functionality to add user created playlists to
 the game

---
 components/playlists/AddPlaylistsModal.vue    | 58 ++++++++++++++++
 components/playlists/PlaylistBox.vue          | 10 +--
 components/playlists/PlaylistContainer.vue    | 15 ++++-
 components/playlists/PlaylistModal.vue        | 47 +++++++++++--
 components/playlists/PlaylistView.vue         | 67 ++++++++++++++-----
 .../playlists/UserSpotifyPlaylistsView.vue    | 38 +++++++++++
 6 files changed, 205 insertions(+), 30 deletions(-)
 create mode 100644 components/playlists/AddPlaylistsModal.vue
 create mode 100644 components/playlists/UserSpotifyPlaylistsView.vue

diff --git a/components/playlists/AddPlaylistsModal.vue b/components/playlists/AddPlaylistsModal.vue
new file mode 100644
index 0000000..7750325
--- /dev/null
+++ b/components/playlists/AddPlaylistsModal.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import UserSpotifyPlaylistsView from './UserSpotifyPlaylistsView.vue';
+
+
+const emit = defineEmits(['close-modal', 'refresh']);
+
+const playlistError = ref('')
+
+</script>
+
+<template>
+    <div class="modal-overlay z-50">
+        <div class="modal">
+            <p class="text-3xl font-bold my-3">Your Playlists</p>
+            <UserSpotifyPlaylistsView @refresh="emit('refresh')"/>
+            <p v-if="playlistError" class="error-message">{{ playlistError }}</p>
+            <p class="px-8">If you can't see your playlist here, add it to your Spotfiy profile.</p>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="emit('close-modal')">Close</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    background-color: #000000da;
+}
+
+.modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    background-color: white;
+    height: 500px;
+    width: 40vb;
+    margin-top: 10%;
+    border-radius: 20px;
+}
+
+.icon-wrapper {
+    aspect-ratio: 1;
+    border-radius: 50%;
+}
+
+button {
+    width: 150px;
+    height: 40px;
+    font-size: 14px;
+    border-radius: 16px;
+}
+</style>
diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 676c8bb..a7ba92b 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -13,12 +13,14 @@ const props = defineProps({
     default: 'Playlist',
     required: true
   },
-  controlElement: {
-    type: String,
-    default: null
+  userPlaylist : {
+    type: Boolean,
+    default: false
   }
 });
 
+const emit = defineEmits(['refresh']);
+
 const showModal = ref(false);
 </script>
 
@@ -48,7 +50,7 @@ const showModal = ref(false);
   <!-- Modal for (un)following playlists -->
   <PlaylistsPlaylistModal 
     v-show="showModal" :playlist-id="props.playlistId" :playlist-name="props.name"
-    :playlist-cover="props.cover" @close-modal="showModal = false" />
+    :playlist-cover="props.cover" :user-playlist="props.userPlaylist" @close-modal="showModal = false" @refresh="emit('refresh')"/>
 </template>
 
 <style scoped>
diff --git a/components/playlists/PlaylistContainer.vue b/components/playlists/PlaylistContainer.vue
index 1ff51b1..0c07e5c 100644
--- a/components/playlists/PlaylistContainer.vue
+++ b/components/playlists/PlaylistContainer.vue
@@ -13,6 +13,14 @@ const props = defineProps({
     playlistIds: {
         type: Array,
         required: true
+    },
+    onAction: {
+        type: Function as PropType<() => void>,
+        required: false
+    },
+    actionLabel: {
+        type: String,
+        required: false
     }
 });
 
@@ -25,10 +33,15 @@ const filteredPlaylists = computed(() =>
 <template>
     <div class="w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3 flex flex-col flex-grow-0 overflow-hidden">
         <!-- Header with genre name -->
-        <div class="mb-1 text-xs md:text-base mt-2 pt-2">
+        <div class="flex mb-1 text-xs md:text-base mt-2 pt-2 justify-between">
             <p>{{ genre }}</p>
+            <button v-if="props.onAction && props.actionLabel" class="flex items-center text-gray-700" @click="props.onAction()">
+            <Icon name="mdi:plus"/>
+            {{ props.actionLabel }}
+        </button>
         </div>
 
+
         <!-- Boxes with the name and cover of the playlist in the genre -->
         <div class="flex flex-row flex-nowrap overflow-x-auto gap-2">
             <PlaylistsPlaylistBox 
diff --git a/components/playlists/PlaylistModal.vue b/components/playlists/PlaylistModal.vue
index 00a7138..2f4b180 100644
--- a/components/playlists/PlaylistModal.vue
+++ b/components/playlists/PlaylistModal.vue
@@ -14,24 +14,57 @@ const props = defineProps({
     playlistCover: {
         type: String,
         required: true
+    },
+    userPlaylist: {
+        type: Boolean,
+        default: false
     }
 });
 
-onUpdated(async () => { playlistStatus.value = await getPlaylistStatus()});
+onUpdated(async () => { playlistStatus.value = await getPlaylistStatus() });
 
-const emit = defineEmits(['close-modal']);
+const emit = defineEmits(['close-modal', 'refresh']);
 
 const { playlistStatus, getPlaylistStatus, followPlaylist, unfollowPlaylist } = useSpotify(props.playlistId);
+
+async function addPlaylist() {
+    emit('close-modal')
+    await $fetch('/api/v1/playlist', {
+    method: 'POST',
+    body: {
+      id: props.playlistId,
+      name: props.playlistName,
+      spotifyId: props.playlistId,
+      categories: ["User created"],
+      enabled: true
+    }   
+  })
+  emit('refresh')
+}
 </script>
 
 <template>
     <div class="fixed top-0 bottom-0 left-0 right-0 flex justify-center bg-black bg-opacity-85 z-50">
-        <div class="mt-[10%] w-5/6 md:w-1/6 h-5/6 md:h-3/6 rounded-3xl flex flex-col items-center justify-center text-center bg-white">
-            <p class="text-xl mb-2">{{  playlistName }}</p>
+        <div
+            class="mt-[10%] w-5/6 md:w-1/6 h-5/6 md:h-3/6 rounded-3xl flex flex-col items-center justify-center text-center bg-white">
+            <p class="text-xl mb-2">{{ playlistName }}</p>
             <NuxtImg :src="playlistCover" class="rounded-2xl h-40 w-40 mb-6" />
-            <button v-if="!playlistStatus" class="bg-yellow-500 hover:bg-yellow-600 text-red-600" @click="followPlaylist">Follow Playlist</button>
-            <button v-else class="bg-yellow-500 hover:bg-yellow-600 text-red-600" @click="unfollowPlaylist">Unfollow Playlist</button>
-            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="emit('close-modal')">Close</button>
+            <div v-if="!props.userPlaylist">
+                <button 
+                    v-if="!playlistStatus" class="bg-yellow-500 hover:bg-yellow-600 text-red-600"
+                    @click="followPlaylist">Follow Playlist</button>
+                <button 
+                    v-else class="bg-yellow-500 hover:bg-yellow-600 text-red-600" @click="unfollowPlaylist">Unfollow
+                    Playlist</button>
+            </div>
+            <div v-else>
+                <button 
+                    class="bg-yellow-500 hover:bg-yellow-600 text-red-600"
+                    @click="addPlaylist">Add Playlist</button>
+            </div>
+            <button 
+                class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white"
+                @click="emit('close-modal')">Close</button>
         </div>
     </div>
 </template>
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index ea6d03d..70b453e 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -2,16 +2,22 @@
 import type { GetPlaylistResponse } from "@/types/api/playlists";
 
 const playlists = ref<GetPlaylistResponse[]>([]);
+const userPlaylistIds = ref<{ category: "User created"; ids: number[] }[]>([]);
+const userPlaylists = ref<GetPlaylistResponse[]>([]);
 const categories = ref<{ category: string; ids: number[] }[]>([]);
 
 const session = useSupabaseSession();
 
+const showModal = ref(false);
+
 onMounted(async () => {
   if (session.value) {
     await getPlaylists();
   }
 });
 
+// action-label="Add Friend" :on-action="() => {showModal = true}"
+
 /* Get all available playlists and get every category with corresponding playlist IDs*/
 async function getPlaylists() {
   try {
@@ -19,34 +25,59 @@ async function getPlaylists() {
     playlists.value = [...data];
 
     playlists.value.forEach(playlist => {
-      // Skip disabled playlists
-      if(!playlist.enabled) return;
-
-      playlist.categories.forEach(category => {
-        // Check if the category already exists in the array
-        const existingCategory = categories.value.find(item => item.category === category);
-
-        if (existingCategory) {
-          // Add the new ID if not already present
-          if (!existingCategory.ids.includes(playlist.id)) {
-            existingCategory.ids.push(playlist.id);
-          }
-        } else {
-          // Add a new entry if the category does not exist
-          categories.value.push({ category, ids: [playlist.id] });
+  // Skip disabled playlists
+  if (!playlist.enabled) return;
+
+  playlist.categories.forEach(category => {
+    if (category === "User created") {
+      // Handle "User created" category separately
+      const existingUserCategory = userPlaylistIds.value.find(item => item.category === "User created");
+
+      if (existingUserCategory) {
+        // Add the new ID if not already present
+        if (!existingUserCategory.ids.includes(playlist.id)) {
+          existingUserCategory.ids.push(playlist.id);
+        }
+      } else {
+        // Add a new entry for "User created" category
+        userPlaylistIds.value.push({ category: "User created", ids: [playlist.id] });
+      }
+    } else {
+      // Check if the category already exists in the array
+      const existingCategory = categories.value.find(item => item.category === category);
+
+      if (existingCategory) {
+        // Add the new ID if not already present
+        if (!existingCategory.ids.includes(playlist.id)) {
+          existingCategory.ids.push(playlist.id);
         }
-      });
-    });
+      } else {
+        // Add a new entry if the category does not exist
+        categories.value.push({ category, ids: [playlist.id] });
+      }
+    }
+  });
+  const userCreatedIds = userPlaylistIds.value.flatMap(item => item.ids); // Extract all IDs from "User created"
+  userPlaylists.value = playlists.value.filter(playlist => userCreatedIds.includes(playlist.id));
+});
   } catch (error) {
     console.error("Failed to fetch playlists:", error);
   }
-}
+};
+
+
 </script>
 
 <template>
+  <PlaylistsAddPlaylistsModal v-show="showModal" @close-modal="showModal = false" @refresh="getPlaylists"/>
+
   <div class="flex flex-col">
     <div class="overflow-y-auto" style="max-height: 85vh;">
       <PlaylistsPlaylistContainer v-for="categoryEl in categories" :key="categoryEl.category" :genre="categoryEl.category" :playlist-ids="categoryEl.ids" :playlists="playlists" :categories="categories"/>
+      <PlaylistsPlaylistContainer 
+        v-for="item in userPlaylistIds" :key="item.category" :genre="item.category" :playlist-ids="item.ids" :playlists="userPlaylists"
+      action-label="Add Playlist" :on-action="() => {showModal = true}" @refresh="getPlaylists"/>
+      <button v-if="userPlaylists.length === 0" class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add own Playlist</button>
     </div>
   </div>
 </template>
diff --git a/components/playlists/UserSpotifyPlaylistsView.vue b/components/playlists/UserSpotifyPlaylistsView.vue
new file mode 100644
index 0000000..c5331c0
--- /dev/null
+++ b/components/playlists/UserSpotifyPlaylistsView.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import useSpotify from '@/composables/useSpotify';
+import type { Playlist } from "@/types/api/playlist"
+
+const { getUserPlaylists } = useSpotify("");
+
+const userPlaylists = ref<Playlist[] | null>([]);
+
+onMounted(async () => {
+
+        userPlaylists.value = await getUserPlaylists();;
+        console.log(userPlaylists.value)
+})
+
+const emit = defineEmits(['refresh']);
+
+</script>
+
+<template>
+    <div class="w-full bg-gray-200 px-3 py-1 rounded-3xl mb-3  flex flex-col flex-grow-0 overflow-hidden">
+        <!-- Boxes with the name and cover of the playlist in the genre -->
+        <div class="flex flex-row flex-nowrap overflow-x-auto gap-2">
+            <div
+                class="w-full bg-gray-200 rounded-3xl flex flex-col flex-grow-0 overflow-hidden">
+
+                <!-- Boxes with the name and cover of the playlist in the genre -->
+                <div class="grid grid-cols-2 overflow-y-auto gap-1">
+                    <PlaylistsPlaylistBox 
+                        v-for="item in userPlaylists" :key="item.id" :playlist-id="item.spotifyId"
+                        :name="item.name" v-bind="item.cover ? { cover: item.cover.toString() } : {}"
+                        :user-playlist="true"
+                        class="flex-grow-0 flex-shrink-0" 
+                        @refresh="emit('refresh')"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file

From 3ef5386f13ecb31ba1e7750846411c86e97f1904 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 00:29:46 +0100
Subject: [PATCH 167/221] added working Start Game button

---
 components/UsersView.vue                   | 12 ++-
 components/home/Controls/GameButtons.vue   |  6 +-
 components/home/StartGameModal.vue         | 93 ++++++++++++++++++++++
 components/home/Users/UserBox.vue          | 20 +++--
 components/playlists/PlaylistBox.vue       | 10 ++-
 components/playlists/PlaylistContainer.vue | 14 +++-
 components/playlists/PlaylistView.vue      | 15 +++-
 components/profile/Friendlist.vue          | 21 ++++-
 pages/index.vue                            | 20 +++--
 9 files changed, 184 insertions(+), 27 deletions(-)
 create mode 100644 components/home/StartGameModal.vue

diff --git a/components/UsersView.vue b/components/UsersView.vue
index ca6ca07..14e0d0c 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -20,10 +20,14 @@ const props = defineProps({
   actionLabel: {
     type: String,
     required: false
+  },
+  startGame: {
+    type: Boolean,
+    default: false
   }
 });
 
-const emit = defineEmits(['refresh']);
+const emit = defineEmits(['refresh', 'chose_friend']);
 
 const friendshipId = ref(0);
 const friendshipStatus = ref(FriendshipStatus.ACCEPTED);
@@ -67,6 +71,10 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
     return {};
   });
 });
+
+function handleChoseFriend(friendId: string) {
+  emit('chose_friend', friendId)
+}
 </script>
 
 <template>
@@ -127,6 +135,8 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
           :friends-status="friendshipStatus"
           :friend-id="user.id"
           :view-type="props.viewType"
+          :start-game="props.startGame"
+          @chose_friend="handleChoseFriend"
           @refresh="emit('refresh');"
       />
       <!-- Placeholder for scrolling -->
diff --git a/components/home/Controls/GameButtons.vue b/components/home/Controls/GameButtons.vue
index bee8a2a..9e64276 100644
--- a/components/home/Controls/GameButtons.vue
+++ b/components/home/Controls/GameButtons.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-defineEmits(['startGame', 'quickGame']);
+const emit = defineEmits(['startGame', 'quickGame']);
 </script>
 
 <template>
     <div class="flex space-x-3 w-full">
-        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full">
+        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full" @click="emit('startGame')">
             Start Game
         </button>
-        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full"  @click="$emit('quickGame')">
+        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full"  @click="emit('quickGame')">
             Quick Game
         </button>
     </div>
diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
new file mode 100644
index 0000000..49d8435
--- /dev/null
+++ b/components/home/StartGameModal.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { FriendshipStatus, FriendshipType, type GetFriendsResponse } from "@/types/api/user.friends";
+
+const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
+
+const session = useSupabaseSession();
+
+onMounted(async () => {
+  if (session.value) {
+    await getFriendships()
+    //  friends.value.push() // unexpected behavior on initial page load
+  }
+})
+
+async function getFriendships() {
+  $fetch<GetFriendsResponse[]>('/api/v1/user/friends')
+    .then((data) => {
+      friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+    });
+}
+
+const emit = defineEmits(['close-modal', 'refresh', 'friend-playlist-chosen']);
+
+const friendChosen = ref(false);
+const friendId = ref('')
+const playlistChosen = ref(false)
+
+function handleChoseFriendPlaylist(id: string) {
+    if (!friendChosen.value && !playlistChosen.value) {
+        friendChosen.value = true;
+        friendId.value = id
+        return;    
+    } else if (friendChosen.value && !playlistChosen.value) {
+        playlistChosen.value = true;
+        emit('friend-playlist-chosen', friendId.value, id);
+    }    
+}
+
+
+</script>
+
+<template>
+    <div class="modal-overlay z-50">
+        <div class="modal w-full">
+            <ProfileFriendlist v-if="!friendChosen && !playlistChosen" :start-game="true" @chose_friend="handleChoseFriendPlaylist"/>
+            <PlaylistsPlaylistView v-if="friendChosen && !playlistChosen" :start-game="true" @chose-playlist="handleChoseFriendPlaylist"/>           
+
+            <!--p class="text-3xl font-bold">New friend</p>
+            <p class="mb-3">Enter your friends name:</p>
+            <input v-model="newFriend" class="rounded-3xl pl-2 border border-black">
+            <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
+            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-4" @click="addFriend">Add Friend</button-->
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    background-color: #000000da;
+}
+
+.modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: white;
+    height: 500px;
+    margin-top: 10%;
+    border-radius: 20px;
+}
+
+.icon-wrapper {
+    aspect-ratio: 1;
+    border-radius: 50%;
+}
+
+button {
+    width: 150px;
+    height: 40px;
+    font-size: 14px;
+    border-radius: 16px;
+}
+</style>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index d2c5e94..813a967 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -36,11 +36,15 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  startGame: {
+    type: Boolean,
+    default: false
+  }
 });
 
-const emit = defineEmits(['refresh','play']);
+const emit = defineEmits(['refresh', 'play', 'chose_friend']);
 
-const showModal = ref(false);
+const showUserModal = ref(false);
 
 </script>
 
@@ -53,13 +57,15 @@ const showModal = ref(false);
         ? 'flex items-center'
         : 'flex flex-col items-center justify-center mb-3 py-2'
       ]"
-      @click="showModal = true">
+      @click="props.startGame ? emit('chose_friend', friendId) : showUserModal = true">
       <!-- Profile Picture -->
-      <NuxtImg :class="[
+      <NuxtImg 
+        :class="[
         'rounded-full',
         'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
         props.userTurn ? 'mr-3' : 'mb-0'
-      ]" :src="props.profilePicture.toString()" :alt="props.name" />
+        ]"
+        :src="props.profilePicture.toString()" :alt="props.name" />
 
       <!-- User Name -->
       <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name" />
@@ -72,8 +78,8 @@ const showModal = ref(false);
     </div>
     <ProfileUserModal
       v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS || viewType === UserViewType.SENTREQUESTS"
-      v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId"
+      v-show="showUserModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId"
       :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType"
-      @close-modal="showModal = false" @refresh="emit('refresh')" />
+      @close-modal="showUserModal = false" @refresh="emit('refresh')" />
   </div>
 </template>
\ No newline at end of file
diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 676c8bb..73be512 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -16,9 +16,15 @@ const props = defineProps({
   controlElement: {
     type: String,
     default: null
-  }
+  },
+    startGame: {
+        type: Boolean,
+        default: false
+    }
 });
 
+const emit = defineEmits(['chose-playlist'])
+
 const showModal = ref(false);
 </script>
 
@@ -27,7 +33,7 @@ const showModal = ref(false);
     :class="[
       'bg-blue-600 rounded-3xl p-3 mb-3 inline-block w-24 md:w-28'
     ]" 
-    @click="showModal = true">
+    @click="props.startGame ? emit('chose-playlist', props.playlistId) : showModal = true">
     <!-- Playlist cover, when none is given a default image is used -->
     <div class="flex flex-col items-center justify-center">
       <NuxtImg 
diff --git a/components/playlists/PlaylistContainer.vue b/components/playlists/PlaylistContainer.vue
index 1ff51b1..2ec748a 100644
--- a/components/playlists/PlaylistContainer.vue
+++ b/components/playlists/PlaylistContainer.vue
@@ -13,13 +13,23 @@ const props = defineProps({
     playlistIds: {
         type: Array,
         required: true
+    },
+    startGame: {
+        type: Boolean,
+        default: false
     }
 });
 
+const emit = defineEmits(['chose-playlist'])
+
 /* Filter the playlists array for playlits where the ID exists in the genre. */
 const filteredPlaylists = computed(() => 
     props.playlists.filter((item) => props.playlistIds.includes(item.spotifyId))
 );
+
+function handleChosePlaylist(playlistId: string) {
+    emit('chose-playlist', playlistId)
+}
 </script>
 
 <template>
@@ -35,7 +45,9 @@ const filteredPlaylists = computed(() =>
                 v-for="item in filteredPlaylists" 
                 :key="item.id" 
                 :playlist-id="item.spotifyId"
-                :name="item.name" 
+                :name="item.name"
+                :start-game="props.startGame"
+                @chose-playlist="handleChosePlaylist" 
                 v-bind="item.cover ? { cover: item.cover.toString() } : {}" class="flex-grow-0 flex-shrink-0" />
         </div>
     </div>
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index ea6d03d..b96d177 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import type { GetPlaylistResponse } from "@/types/api/playlists";
 
+const props = defineProps({
+  startGame: {
+    type: Boolean,
+    default: false
+  }
+})
+
 const playlists = ref<GetPlaylistResponse[]>([]);
 const categories = ref<{ category: string; ids: number[] }[]>([]);
 
@@ -12,6 +19,8 @@ onMounted(async () => {
   }
 });
 
+const emit = defineEmits(['chose-playlist'])
+
 /* Get all available playlists and get every category with corresponding playlist IDs*/
 async function getPlaylists() {
   try {
@@ -41,12 +50,16 @@ async function getPlaylists() {
     console.error("Failed to fetch playlists:", error);
   }
 }
+
+function handleChosePlaylist(playlistId: string) {
+    emit('chose-playlist', playlistId)
+}
 </script>
 
 <template>
   <div class="flex flex-col">
     <div class="overflow-y-auto" style="max-height: 85vh;">
-      <PlaylistsPlaylistContainer v-for="categoryEl in categories" :key="categoryEl.category" :genre="categoryEl.category" :playlist-ids="categoryEl.ids" :playlists="playlists" :categories="categories"/>
+      <PlaylistsPlaylistContainer v-for="categoryEl in categories" :key="categoryEl.category" :genre="categoryEl.category" :playlist-ids="categoryEl.ids" :playlists="playlists" :categories="categories" :start-game="props.startGame" @chose-playlist="handleChosePlaylist"/>
     </div>
   </div>
 </template>
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 4084376..ed95516 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -2,11 +2,18 @@
 import { FriendshipStatus, FriendshipType, type GetFriendsResponse } from "@/types/api/user.friends";
 import { UserViewType } from "@/types/components/users.view";
 
+const props = defineProps({
+  startGame: {
+    type: Boolean,
+    default: false
+  }
+})
+
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
 const sentRequests: Ref<GetFriendsResponse[]> = useState("outgoing_friendships", () => [])
 
-const session = useSupabaseSession()
+const session = useSupabaseSession();
 
 const showModal = ref(false);
 
@@ -25,6 +32,12 @@ async function getFriendships() {
       sentRequests.value = data.filter((item) => item.request_type == FriendshipType.OUTGOING && item.status === FriendshipStatus.PENDING)
     });
 }
+
+const emit = defineEmits(['chose_friend'])
+
+function handleChoseFriend(friendId: string) {
+  emit('chose_friend', friendId)
+}
 </script>
 
 <template>
@@ -38,10 +51,10 @@ async function getFriendships() {
     <!-- Responsive Size Content Section -->
     <div class="overflow-y-auto" style="max-height: 43vh;">
       <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
-        action-label="Add Friend" :on-action="() => {showModal = true}" @refresh="getFriendships" />
-      <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
+        action-label="Add Friend" :on-action="() => {showModal = true}" :start-game="props.startGame" @refresh="getFriendships" @chose_friend="handleChoseFriend" />
+      <UsersView v-if="requests.length > 0 && !props.startGame" :view-type="UserViewType.REQUESTS" :users="requests"
         @refresh="getFriendships" />
-      <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
+      <UsersView v-if="sentRequests.length > 0 && !props.startGame" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
         @refresh="getFriendships" />
     </div>
   </div>
diff --git a/pages/index.vue b/pages/index.vue
index 0b77459..7fb2ecb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,13 +5,16 @@ import {useGame} from "@/composables/useGames";
 import type {ActiveGame} from "@/types/api/game";
 import VerticalGameList from "@/components/home/Game/VerticalGameList.vue";
 import RegistrationView from "@/components/login/RegistrationModal.vue";
+import StartGameModal from "@/components/home/StartGameModal.vue";
 
-const {fetchUser, user,error:userError} = useUser()
+const {fetchUser, user, error:userError} = useUser()
 
 const {games, fetchGames} = useGame();
 
 const curr_game = useState<ActiveGame | null>('current_game', () => null);
 
+const showModal = ref(false);
+
 onMounted(async () => {
   setLevelbar(70);
   await fetchUser();
@@ -23,21 +26,20 @@ function setLevelbar(newValue: number) {
   if (levelbar) {
     levelbar.style.width = newValue + "%"
   }
-}
+};
 
-const newGame = async () => {
+const newGame = async (friendId: string, playlistId: string) => {
   const data = await $fetch<ActiveGame>('/api/v1/game', {
     method: 'POST',
     body: JSON.stringify({
-      playlist_id: '4DZ79IJM4IlYBI8dpWZZO2',
-      opponent_id: '9da97502-5363-4964-ae80-c242a053e810',
+      playlist_id: playlistId,
+      opponent_id: friendId,
     }),
   });
 
   curr_game.value = data;
   navigateTo('/play');
-}
-
+};
 </script>
 
 <template>
@@ -45,6 +47,8 @@ const newGame = async () => {
 
     <RegistrationView v-if="userError" :on-register="async ()=> {await fetchUser();}"/>
 
+    <StartGameModal v-show="showModal" @close-modal="showModal = false" @friend-playlist-chosen="newGame"/>
+
     <HeaderFooterView v-if="user">
       <template #header>
 
@@ -67,7 +71,7 @@ const newGame = async () => {
           <VerticalGameList :games="games?.active || []" class="h-3/6"/>
           <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
                      :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"/>
-          <HomeControlsGameButtons class="h-1/6" @quick-game="()=>newGame()"/>
+          <HomeControlsGameButtons class="h-1/6" @start-game="showModal = true" @quick-game="()=>newGame()"/>
         </div>
       </template>
       <template #footer>

From 21cab3ccc7c476b28e04be19c89fe3a6d3a2afaa Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 01:36:06 +0100
Subject: [PATCH 168/221] imporoved modal

---
 components/home/StartGameModal.vue | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
index 49d8435..0f125f9 100644
--- a/components/home/StartGameModal.vue
+++ b/components/home/StartGameModal.vue
@@ -31,26 +31,34 @@ function handleChoseFriendPlaylist(id: string) {
         friendId.value = id
         return;    
     } else if (friendChosen.value && !playlistChosen.value) {
-        playlistChosen.value = true;
         emit('friend-playlist-chosen', friendId.value, id);
+        playlistChosen.value = true;
+        emit('close-modal')
     }    
 }
 
+function handleClose() {
+    friendChosen.value = false;
+    friendId.value = '';
+    playlistChosen.value = false;
+    emit('close-modal') ;
+}
+
 
 </script>
 
 <template>
     <div class="modal-overlay z-50">
-        <div class="modal w-full">
-            <ProfileFriendlist v-if="!friendChosen && !playlistChosen" :start-game="true" @chose_friend="handleChoseFriendPlaylist"/>
-            <PlaylistsPlaylistView v-if="friendChosen && !playlistChosen" :start-game="true" @chose-playlist="handleChoseFriendPlaylist"/>           
-
-            <!--p class="text-3xl font-bold">New friend</p>
-            <p class="mb-3">Enter your friends name:</p>
-            <input v-model="newFriend" class="rounded-3xl pl-2 border border-black">
-            <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
-            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-4" @click="addFriend">Add Friend</button-->
-            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
+        <div class="mt-[10%] w-2/3 max-h-[80vh] overflow-y-auto bg-white rounded-lg p-5">
+            <div v-if="!friendChosen && !playlistChosen">
+                <p class="text-3xl font-bold">Choose your Opponent</p>
+                <ProfileFriendlist  :start-game="true" class="w-full p-3" @chose_friend="handleChoseFriendPlaylist"/>
+            </div>
+            <div v-if="friendChosen && !playlistChosen">
+                <p class="text-3xl font-bold">Choose your Playlist</p>
+                <PlaylistsPlaylistView :start-game="true" class="overflow-y-auto" @chose-playlist="handleChoseFriendPlaylist"/>  
+            </div>       
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="handleClose">Close</button>
         </div>
     </div>
 </template>

From 1102b8ab46bc1f65b2e50997e299cbe522ff32b1 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 02:03:14 +0100
Subject: [PATCH 169/221] improved styling

---
 components/home/StartGameModal.vue | 44 +++++-------------------------
 1 file changed, 7 insertions(+), 37 deletions(-)

diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
index 0f125f9..64ba42d 100644
--- a/components/home/StartGameModal.vue
+++ b/components/home/StartGameModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FriendshipStatus, FriendshipType, type GetFriendsResponse } from "@/types/api/user.friends";
+import { FriendshipStatus, type GetFriendsResponse } from "@/types/api/user.friends";
 
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
 
@@ -43,55 +43,25 @@ function handleClose() {
     playlistChosen.value = false;
     emit('close-modal') ;
 }
-
-
 </script>
 
 <template>
-    <div class="modal-overlay z-50">
-        <div class="mt-[10%] w-2/3 max-h-[80vh] overflow-y-auto bg-white rounded-lg p-5">
-            <div v-if="!friendChosen && !playlistChosen">
-                <p class="text-3xl font-bold">Choose your Opponent</p>
+    <div class="flex justify-center bg-black bg-opacity-85 z-50 p-3 fixed top-0 bottom-0 right-0 left-0">
+        <div class="mt-[10%] md:mt-[5%] w-full md:w-1/2 max-h-[80vh] overflow-y-auto bg-white rounded-3xl p-3">
+            <div v-if="!friendChosen && !playlistChosen" class="flex flex-col items-center justify-center h-full">
+                <p class="text-3xl font-bold mb-2">Choose your Opponent</p>
                 <ProfileFriendlist  :start-game="true" class="w-full p-3" @chose_friend="handleChoseFriendPlaylist"/>
             </div>
             <div v-if="friendChosen && !playlistChosen">
-                <p class="text-3xl font-bold">Choose your Playlist</p>
+                <p class="text-3xl font-bold pb-2">Choose your Playlist</p>
                 <PlaylistsPlaylistView :start-game="true" class="overflow-y-auto" @chose-playlist="handleChoseFriendPlaylist"/>  
             </div>       
-            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="handleClose">Close</button>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white mx-auto block" @click="handleClose">Close</button>
         </div>
     </div>
 </template>
 
 <style scoped>
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    background-color: #000000da;
-}
-
-.modal {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    background-color: white;
-    height: 500px;
-    margin-top: 10%;
-    border-radius: 20px;
-}
-
-.icon-wrapper {
-    aspect-ratio: 1;
-    border-radius: 50%;
-}
-
 button {
     width: 150px;
     height: 40px;

From 9adb79a0b0bedbf02f626d965274e3f765a967cf Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 22:54:52 +0100
Subject: [PATCH 170/221] chore(doc): create TSDoc comment for each server
 endpoint

---
 server/api/v1/game/[uid]/play.post.ts     |  13 +++
 server/api/v1/game/index.get.ts           |   9 ++
 server/api/v1/game/index.post.ts          | 103 ++++++++++++----------
 server/api/v1/health.ts                   |  12 +++
 server/api/v1/playlist/[uid].get.ts       |  11 +--
 server/api/v1/playlist/index.get.ts       |   8 +-
 server/api/v1/playlist/index.post.ts      |  17 ++--
 server/api/v1/user/[uid].get.ts           |   9 ++
 server/api/v1/user/friends/action.post.ts |  11 +++
 server/api/v1/user/friends/index.get.ts   |  11 ++-
 server/api/v1/user/friends/index.post.ts  |  10 +++
 server/api/v1/user/index.get.ts           |   7 ++
 server/api/v1/user/register.post.ts       |  15 +++-
 13 files changed, 168 insertions(+), 68 deletions(-)

diff --git a/server/api/v1/game/[uid]/play.post.ts b/server/api/v1/game/[uid]/play.post.ts
index 5411977..ae05d81 100644
--- a/server/api/v1/game/[uid]/play.post.ts
+++ b/server/api/v1/game/[uid]/play.post.ts
@@ -24,6 +24,19 @@ function calculateScore(time_to_guess: number): number {
     return reward;
 }
 
+/**
+ * Submits a guess for a specific round in a game
+ * @param {string} uid - The game ID
+ * @param {Object} body - Request body
+ * @param {number} body.round - Round number
+ * @param {string} body.guess - Spotify ID of the guessed song
+ * @param {number} body.time - Time taken to make the guess in seconds
+ * @throws {400} Bad Request - Invalid game ID, round number, or player not in game
+ * @throws {401} Unauthenticated - User is not logged in
+ * @throws {404} Not Found - Game not found
+ * @throws {500} Internal Server Error - Database or server error
+ * @returns {PlayGameResponse} Object containing game round results
+ */
 export default defineEventHandler(async (event) => {
     const gameId = getRouterParam(event, 'uid');
 
diff --git a/server/api/v1/game/index.get.ts b/server/api/v1/game/index.get.ts
index 2e78bdd..491aeb0 100644
--- a/server/api/v1/game/index.get.ts
+++ b/server/api/v1/game/index.get.ts
@@ -4,6 +4,15 @@ import type {GetGameResponse} from "~/types/api/game";
 import {GameStatus} from "~/types/api/game";
 import {fetchPreviewUrl} from "~/server/utils/spotify";
 
+/**
+ * Retrieves all games for the authenticated user, categorized by status
+ * @throws {401} Unauthenticated - User is not logged in
+ * @throws {500} Internal Server Error - Database or server error
+ * @returns {GetGameResponse} Object containing arrays of:
+ * - active: Games where it's the user's turn to play
+ * - waiting: Games where user is waiting for opponent
+ * - past: Completed games
+ */
 export default defineEventHandler(async (event) => {
     // Require user to be authenticated
     const user = await serverSupabaseUser(event);
diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
index 1e92f83..048d562 100644
--- a/server/api/v1/game/index.post.ts
+++ b/server/api/v1/game/index.post.ts
@@ -14,51 +14,16 @@ const GameInitSchema = z.object({
     opponent_id: z.string().uuid()
 }).readonly()
 
-async function saveSongsToDatabase(client: SupabaseClient, songs: Song[]) {
-    const {error: songError} = await client
-        .from('songs')
-        .upsert(songs.map((song: Song) => ({
-            spotify_song_id: song.id,
-            song_name: song.name,
-            artist_name: song.artists[0].name, // Using first artist only
-            preview_url: song.preview_url      // Mostly null, spotify changed their API
-        })));
-
-    if (songError) {
-        throw new Error(songError.message);
-    }
-}
-
-async function createGameRounds(songs: Song[], rounds_to_play: number = 5): Promise<GameRound[]> {
-    const gameRounds: GameRound[] = [];
-    const shuffledSongs = [...songs].sort(() => Math.random() - 0.5);
-
-    for (let i = 0; i < rounds_to_play; i++) {
-        const selectedTrack = shuffledSongs.pop();
-        // Get preview url through parsing embed for selected track
-        selectedTrack!.preview_url = await fetchPreviewUrl(selectedTrack!.id);
-
-        // keep track of used IDs for this song option
-        const usedIds = new Set<string>([selectedTrack!.id]);
-        const getUniqueWrong = () => {
-            let wrongTrack;
-            do {
-                wrongTrack = shuffledSongs[Math.floor(Math.random() * shuffledSongs.length)];
-            } while (usedIds.has(wrongTrack.id));
-            usedIds.add(wrongTrack.id);
-            return wrongTrack;
-        };
-
-        gameRounds.push({
-            round: i + 1, // 1-indexed since postgres functions are also 1-indexed
-            correct_song: selectedTrack!,
-            wrong_songs: [getUniqueWrong(), getUniqueWrong(), getUniqueWrong()]
-        });
-    }
-
-    return gameRounds;
-}
-
+/**
+ * Initializes a new game between two players using a specified playlist
+ * @param {Object} body - Request body
+ * @param {string} body.playlist_id - Spotify ID of the playlist to use
+ * @param {string} body.opponent_id - UUID of the opponent to play against
+ * @throws {400} Bad Request - Invalid playlist ID, self-play attempt, disabled playlist, or insufficient tracks
+ * @throws {401} Unauthenticated - User is not logged in
+ * @throws {500} Internal Server Error - Database, Spotify API, or server error
+ * @returns {ActiveGame} Newly created game with randomized rounds and song options
+ */
 export default defineEventHandler(async (event) => {
     // validate post-request body
     const result = await readValidatedBody(event, body => GameInitSchema.safeParse(body))
@@ -171,9 +136,55 @@ export default defineEventHandler(async (event) => {
             rounds: mappedGameRounds
         }
 
+        setResponseStatus(event, 201);
         return game;
     } catch (error) {
         setResponseStatus(event, 500);
         return {error: error instanceof Error ? error.message : 'An unknown error occurred'};
     }
-});
\ No newline at end of file
+});
+
+async function saveSongsToDatabase(client: SupabaseClient, songs: Song[]) {
+    const {error: songError} = await client
+        .from('songs')
+        .upsert(songs.map((song: Song) => ({
+            spotify_song_id: song.id,
+            song_name: song.name,
+            artist_name: song.artists[0].name, // Using first artist only
+            preview_url: song.preview_url      // Mostly null, spotify changed their API
+        })));
+
+    if (songError) {
+        throw new Error(songError.message);
+    }
+}
+
+async function createGameRounds(songs: Song[], rounds_to_play: number = 5): Promise<GameRound[]> {
+    const gameRounds: GameRound[] = [];
+    const shuffledSongs = [...songs].sort(() => Math.random() - 0.5);
+
+    for (let i = 0; i < rounds_to_play; i++) {
+        const selectedTrack = shuffledSongs.pop();
+        // Get preview url through parsing embed for selected track
+        selectedTrack!.preview_url = await fetchPreviewUrl(selectedTrack!.id);
+
+        // keep track of used IDs for this song option
+        const usedIds = new Set<string>([selectedTrack!.id]);
+        const getUniqueWrong = () => {
+            let wrongTrack;
+            do {
+                wrongTrack = shuffledSongs[Math.floor(Math.random() * shuffledSongs.length)];
+            } while (usedIds.has(wrongTrack.id));
+            usedIds.add(wrongTrack.id);
+            return wrongTrack;
+        };
+
+        gameRounds.push({
+            round: i + 1, // 1-indexed since postgres functions are also 1-indexed
+            correct_song: selectedTrack!,
+            wrong_songs: [getUniqueWrong(), getUniqueWrong(), getUniqueWrong()]
+        });
+    }
+
+    return gameRounds;
+}
\ No newline at end of file
diff --git a/server/api/v1/health.ts b/server/api/v1/health.ts
index ab9acdf..3462c09 100644
--- a/server/api/v1/health.ts
+++ b/server/api/v1/health.ts
@@ -1,3 +1,15 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+interface HealthCheckResponse {
+    status: string;
+    timestamp: string;
+    uptime: number;
+    memoryUsage: number;
+}
+
+/**
+ * Health check endpoint that provides basic server status information
+ * @returns {HealthCheckResponse} Server health status information
+ */
 export default defineEventHandler(async () => {
     return {
         status: 'ok',
diff --git a/server/api/v1/playlist/[uid].get.ts b/server/api/v1/playlist/[uid].get.ts
index ace864b..19a0d66 100644
--- a/server/api/v1/playlist/[uid].get.ts
+++ b/server/api/v1/playlist/[uid].get.ts
@@ -2,11 +2,12 @@ import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 
 
 /**
- * Endpoint to get a playlist by id
- * @returns {Object} - Playlist object
- * @throws {400} - Invalid playlistId
- * @throws {401} - Unauthenticated
- * @throws {500} - Internal Server Error
+ * Retrieves detailed information about a specific playlist
+ * @param {string} uid - Spotify playlist ID
+ * @throws {400} Bad Request - Invalid Spotify playlist ID format
+ * @throws {401} Unauthenticated - User is not logged in
+ * @throws {500} Internal Server Error - Database or server error
+ * @returns {GetPlaylistResponse} Playlist details including categories
  */
 export default defineEventHandler(async (event) => {
     const playlistId = getRouterParam(event, 'uid')
diff --git a/server/api/v1/playlist/index.get.ts b/server/api/v1/playlist/index.get.ts
index c1e3d9b..c319147 100644
--- a/server/api/v1/playlist/index.get.ts
+++ b/server/api/v1/playlist/index.get.ts
@@ -1,10 +1,10 @@
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 
 /**
- * Endpoint to get all playlists
- * @throws {401} - Unauthenticated
- * @throws {500} - Internal Server Error
- * @returns {Array} - Array of playlists
+ * Retrieves all available playlists with their categories
+ * @throws {401} Unauthenticated - User is not logged in
+ * @throws {500} Internal Server Error - Database or server error
+ * @returns {GetPlaylistResponse[]} Array of playlists with their details and categories
  */
 export default defineEventHandler(async (event) => {
 
diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index 7131877..095b2d6 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -12,13 +12,18 @@ const schema = z.object({
     enabled: z.boolean().optional().default(true)
 })
 
-
 /**
- * Unauthenticated endpoint to create a playlist - management only
- * @throws {400} - Invalid body
- * @throws {400} - Playlist with this ID already exists
- * @throws {500} - Internal Server Error
- * @returns {Object} - Created playlist
+ * Creates a new playlist with categories
+ * @param {Object} body - Request body
+ * @param {string} body.id - Spotify playlist ID
+ * @param {string} body.name - Playlist name
+ * @param {string} body.spotifyId - Spotify playlist ID
+ * @param {string[]} body.categories - Array of category names
+ * @param {boolean} [body.enabled=true] - Whether the playlist is enabled
+ * @throws {400} Bad Request - Invalid request body format or duplicate playlist ID
+ * @throws {500} Internal Server Error - Database, Spotify API, or server error
+ * @returns {Object} Created playlist and categories data
+ * @status {201} Created successfully
  */
 export default defineEventHandler(async (event) => {
     const result = await readValidatedBody(event, body => schema.safeParse(body))
diff --git a/server/api/v1/user/[uid].get.ts b/server/api/v1/user/[uid].get.ts
index 84cd857..0a87f7e 100644
--- a/server/api/v1/user/[uid].get.ts
+++ b/server/api/v1/user/[uid].get.ts
@@ -2,6 +2,15 @@ import {isValidUUID} from "~/server/utils/data-validation";
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 import type {GetUserResponse} from "~/types/api/users";
 
+/**
+ * Retrieves a specific user's profile information by their UUID
+ * @param {string} uid - The UUID of the user to retrieve
+ * @throws {400} Bad Request - Invalid UUID format
+ * @throws {401} Unauthenticated - User is not logged in
+ * @throws {404} Not Found - User profile does not exist
+ * @throws {500} Internal Server Error - Database or server error
+ * @returns {GetUserResponse} User profile data with spotify_id conditionally removed based on visibility settings
+ */
 export default defineEventHandler(async (event) => {
     const userId = getRouterParam(event, 'uid')
 
diff --git a/server/api/v1/user/friends/action.post.ts b/server/api/v1/user/friends/action.post.ts
index 637bf1b..58888ab 100644
--- a/server/api/v1/user/friends/action.post.ts
+++ b/server/api/v1/user/friends/action.post.ts
@@ -9,6 +9,17 @@ const friendActionSchema = z.object({
     action: z.nativeEnum(FriendshipAction)
 }).readonly()
 
+
+/**
+ * Handles friend request actions (accept/decline/remove)
+ * @param {Object} body - Request body
+ * @param {number} body.friendship_id - ID of the friendship to act upon
+ * @param {FriendshipAction} body.action - Action to perform (accept/decline/remove)
+ * @throws {400} Bad Request - Invalid request body or invalid friendship state for action
+ * @throws {401} Unauthenticated - User is not logged in
+ * @throws {500} Internal Server Error - Database or server error
+ * @returns {Object} Empty object on success
+ */
 export default defineEventHandler(async (event) => {
     // validate post-request body
     const result = await readValidatedBody(event, body => friendActionSchema.safeParse(body))
diff --git a/server/api/v1/user/friends/index.get.ts b/server/api/v1/user/friends/index.get.ts
index b5d3c8f..4a558d8 100644
--- a/server/api/v1/user/friends/index.get.ts
+++ b/server/api/v1/user/friends/index.get.ts
@@ -1,9 +1,12 @@
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
-import type {FriendError, GetFriendParam, GetFriendsDBResponse, GetFriendsResponse} from "~/types/api/user.friends";
-
-// Not relative to userid because you should always only be able to see your own friends
-// User id can be grabbed from the access token
+import type {FriendError, GetFriendParam, GetFriendsDBResponse} from "~/types/api/user.friends";
 
+/**
+ * Retrieves all friendships and friend requests for the authenticated user
+ * @throws {401} Unauthenticated - User is not logged in
+ * @throws {500} Internal Server Error - Database or server error
+ * @returns {GetFriendsResponse[]} Array of friendships with friend profile data
+ */
 export default defineEventHandler(async (event) => {
     // Require user to be authenticated
     const user = await serverSupabaseUser(event);
diff --git a/server/api/v1/user/friends/index.post.ts b/server/api/v1/user/friends/index.post.ts
index 9f018ad..18cfeea 100644
--- a/server/api/v1/user/friends/index.post.ts
+++ b/server/api/v1/user/friends/index.post.ts
@@ -7,6 +7,15 @@ const userSchema = z.object({
     receiver_name: z.string()
 }).readonly()
 
+/**
+ * Sends a friend request to a user by their username
+ * @param {Object} body - Request body
+ * @param {string} body.receiver_name - Username of the friend request recipient
+ * @throws {400} Bad Request - Invalid request body format
+ * @throws {401} Unauthenticated - User is not logged in
+ * @throws {500} Internal Server Error - Database or server error
+ * @returns {Object} Empty object on success
+ */
 export default defineEventHandler(async (event) => {
     // validate post-request body
     const result = await readValidatedBody(event, body => userSchema.safeParse(body))
@@ -33,5 +42,6 @@ export default defineEventHandler(async (event) => {
         return {error: error.message};
     }
 
+    setResponseStatus(event, 201);
     return {};
 });
\ No newline at end of file
diff --git a/server/api/v1/user/index.get.ts b/server/api/v1/user/index.get.ts
index 9a52add..6cfec64 100644
--- a/server/api/v1/user/index.get.ts
+++ b/server/api/v1/user/index.get.ts
@@ -1,6 +1,13 @@
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 import type {GetUserResponse} from "~/types/api/users";
 
+/**
+ * Retrieves the authenticated user's profile information
+ * @throws {401} Unauthenticated - User is not logged in
+ * @throws {404} Not Found - User profile does not exist
+ * @throws {500} Internal Server Error - Database or server error
+ * @returns {GetUserResponse} User profile data with spotify_id conditionally removed based on visibility settings
+ */
 export default defineEventHandler(async (event) => {
 
     // Require user to be authenticated
diff --git a/server/api/v1/user/register.post.ts b/server/api/v1/user/register.post.ts
index b5bf9a4..6e92df1 100644
--- a/server/api/v1/user/register.post.ts
+++ b/server/api/v1/user/register.post.ts
@@ -14,6 +14,17 @@ const registerSchema = z.object({
     spotify_visibility: z.boolean(),
 });
 
+/**
+ * Registers a new user profile with username and Spotify visibility settings
+ * @param {Object} body - Request body
+ * @param {string} body.username - Username (4+ chars, alphanumeric + underscore only)
+ * @param {boolean} body.spotify_visibility - Whether to show Spotify profile info publicly
+ * @throws {400} Bad Request - Invalid username format or missing required fields
+ * @throws {401} Unauthenticated - User is not logged in
+ * @throws {409} Conflict - Username already exists
+ * @throws {500} Internal Server Error - Database or server error
+ * @returns {Object} Empty object on success
+ */
 export default defineEventHandler(async (event) => {
     const body = await readValidatedBody(event, body => registerSchema.safeParse(body))
 
@@ -46,7 +57,5 @@ export default defineEventHandler(async (event) => {
         return {error: error.message};
     }
 
-    return {
-        success: true
-    };
+    return {};
 });
\ No newline at end of file

From 3a83db9fd31bb18c51b0308cd391e4244734f008 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Wed, 18 Dec 2024 23:58:30 +0100
Subject: [PATCH 171/221] chore(doc): fix TSLint errors

---
 server/api/v1/playlist/[uid].get.ts  | 24 +++++++++++++++++-------
 server/api/v1/playlist/index.get.ts  | 24 +++++++++++++-----------
 server/api/v1/playlist/index.post.ts | 23 ++++++++++++++---------
 server/utils/spotify.ts              |  6 ++++--
 types/api/playlists.ts               | 20 +++++++++++++++++---
 5 files changed, 65 insertions(+), 32 deletions(-)

diff --git a/server/api/v1/playlist/[uid].get.ts b/server/api/v1/playlist/[uid].get.ts
index 19a0d66..0bba066 100644
--- a/server/api/v1/playlist/[uid].get.ts
+++ b/server/api/v1/playlist/[uid].get.ts
@@ -1,4 +1,6 @@
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import type {GetPlaylistDBResponse} from "~/types/api/playlists";
+import type {PostgrestError} from "@supabase/postgrest-js";
 
 
 /**
@@ -6,6 +8,7 @@ import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
  * @param {string} uid - Spotify playlist ID
  * @throws {400} Bad Request - Invalid Spotify playlist ID format
  * @throws {401} Unauthenticated - User is not logged in
+ * @throws {404} Not Found - Playlist not found
  * @throws {500} Internal Server Error - Database or server error
  * @returns {GetPlaylistResponse} Playlist details including categories
  */
@@ -26,16 +29,23 @@ export default defineEventHandler(async (event) => {
     }
 
     const client = serverSupabaseServiceRole(event);
-    const {data, error} = await client.from('playlists').select('*, categories (name)').eq('id', playlistId).single();
+    const {data, error}: {
+        data: GetPlaylistDBResponse | null, error: PostgrestError | null
+    } = await client.from('playlists').select(`*, categories (name)`).eq('id', playlistId).single(); // join categories
 
     if (error) {
         setResponseStatus(event, 500);
         return {error: error.message};
-    } else {
-        const transformedData = {
-            ...data,
-            categories: data.categories.map(category => category.name)
-          };
-        return transformedData;
     }
+
+    if (!data) {
+        setResponseStatus(event, 404);
+        return {error: 'playlist not found'};
+    }
+
+    return {
+        ...data,
+        categories: data.categories.map((category: { name: string }) => category.name)
+    };
+
 })
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.get.ts b/server/api/v1/playlist/index.get.ts
index c319147..1c25c20 100644
--- a/server/api/v1/playlist/index.get.ts
+++ b/server/api/v1/playlist/index.get.ts
@@ -1,4 +1,6 @@
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import type {GetPlaylistDBResponse} from "~/types/api/playlists";
+import type {PostgrestError} from "@supabase/postgrest-js";
 
 /**
  * Retrieves all available playlists with their categories
@@ -16,20 +18,20 @@ export default defineEventHandler(async (event) => {
     }
 
     const client = serverSupabaseServiceRole(event);
-    const {data, error} = await client.from('playlists')
-    .select(`
-        *,
-        categories (name)
-    `);
+    const {data, error}: {
+        data: GetPlaylistDBResponse[] | null, error: PostgrestError | null
+    } = await client.from('playlists').select(`*, categories (name)`); // join categories
 
     if (error) {
         setResponseStatus(event, 500);
         return {error: error.message};
-    } else {
-        const transformedData = data.map(playlist => ({
-            ...playlist,
-            categories: playlist.categories.map(category => category.name),
-        }));
-        return transformedData;
     }
+
+    if(!data) return [];
+
+    return data.map(playlist => ({
+        ...playlist,
+        categories: playlist.categories.map(category => category.name),
+    }));
+
 })
\ No newline at end of file
diff --git a/server/api/v1/playlist/index.post.ts b/server/api/v1/playlist/index.post.ts
index 095b2d6..f34d9e2 100644
--- a/server/api/v1/playlist/index.post.ts
+++ b/server/api/v1/playlist/index.post.ts
@@ -3,6 +3,8 @@ import {spotifyIDRegex} from "~/server/utils/data-validation";
 import {serverSupabaseServiceRole} from "#supabase/server";
 import {UNIQUE_VIOLATION} from "~/server/utils/postgres-errors";
 import {getPlaylistCover, getSpotifyToken} from "~/server/utils/spotify";
+import type {PostgrestError} from "@supabase/postgrest-js";
+import type {GetCategoryResponse} from "~/types/api/playlists";
 
 const schema = z.object({
     id: z.string().regex(spotifyIDRegex),
@@ -22,7 +24,7 @@ const schema = z.object({
  * @param {boolean} [body.enabled=true] - Whether the playlist is enabled
  * @throws {400} Bad Request - Invalid request body format or duplicate playlist ID
  * @throws {500} Internal Server Error - Database, Spotify API, or server error
- * @returns {Object} Created playlist and categories data
+ * @returns {Object} Created playlist
  * @status {201} Created successfully
  */
 export default defineEventHandler(async (event) => {
@@ -49,7 +51,10 @@ export default defineEventHandler(async (event) => {
     }));
 
     const client = serverSupabaseServiceRole(event);
-    const {data: playlistData, error: playlistError} = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
+    const {
+        data: playlistData,
+        error: playlistError
+    } = await client.from('playlists').insert(playlistInsert as never).select().single(); //todo: fix type error!
 
 
     if (playlistError) {
@@ -60,16 +65,16 @@ export default defineEventHandler(async (event) => {
         return {error: playlistError.message};
     }
 
-    const { data: categoriesData, error: categoriesError } = await client
-    .from('categories')
-    .insert(categoriesInsert as never);
+    const {data: categoriesData, error: categoriesError}:
+        { data: GetCategoryResponse[] | null, error: PostgrestError | null } = await client
+        .from('categories')
+        .insert(categoriesInsert as never).select();
 
     if (categoriesError) {
-    setResponseStatus(event, 500);
-    return { error: `Error inserting categories: ${categoriesError.message}` };
+        setResponseStatus(event, 500);
+        return {error: `Error inserting categories: ${categoriesError.message}`};
     }
 
-
     setResponseStatus(event, 201);
-    return { playlist: playlistData, categories: categoriesData };
+    return {playlist: playlistData, categories: categoriesData?.map((cat) => cat.name)};
 })
\ No newline at end of file
diff --git a/server/utils/spotify.ts b/server/utils/spotify.ts
index 27676d7..a83da19 100644
--- a/server/utils/spotify.ts
+++ b/server/utils/spotify.ts
@@ -44,8 +44,10 @@ export async function getPlaylistCover(token: string | null, playlistId: string)
         headers: {'Authorization': `Bearer ${token}`}
     })
     const data = await res.json()
-    // console.log(data)
-    return data[1].url; // [0] = 640px, [1] = 300px, [2] = 60px
+    console.log(data)
+    //Normally [0] = 640px, [1] = 300px, [2] = 60px,
+    //but sometimes only one image is returned
+    return data[1]?.url || data[0]?.url;
 }
 
 export async function getSongsFromPlaylist(token: string | null, playlistId: string) {
diff --git a/types/api/playlists.ts b/types/api/playlists.ts
index cac3d37..3e0028a 100644
--- a/types/api/playlists.ts
+++ b/types/api/playlists.ts
@@ -1,10 +1,24 @@
-import type * as url from "node:url";
-
 export interface GetPlaylistResponse {
     id: number,
     spotifyId: string,
     name: string,
-    cover: url.URL | null,
+    cover: string | null,
     enabled: boolean,
     categories: string[]
+}
+
+export interface GetCategoryResponse {
+    name: string,
+    playlistId: string
+}
+
+export interface GetPlaylistDBResponse {
+    id: number,
+    spotify_id: string,
+    name: string,
+    cover: string | null,
+    enabled: boolean,
+    categories: {
+        name: string
+    }[]
 }
\ No newline at end of file

From 13c32f56dfec89b67c776419e5f68824bc1d4c15 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 19 Dec 2024 00:10:49 +0100
Subject: [PATCH 172/221] chore(doc): add Project Structure to README

---
 README.md | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 540c4b2..8b240aa 100644
--- a/README.md
+++ b/README.md
@@ -27,4 +27,22 @@ set the variables there. Latter is suggested.
 
 > [!WARNING] Careful
 > Make sure to never commit the `.env` file to the repository.  
-> Check the `.gitignore` file to see the `.env` file is ignored.
\ No newline at end of file
+> Check the `.gitignore` file to see the `.env` file is ignored.
+
+## Project Structure
+We are using the following project structure:
+
+```
+.
+├── pages                   # For Vue pages
+├── components              # For Vue components
+├── composables             # For composables (Vue composition API)
+├── DB                      # All DDLs for the database
+├── layouts                 # For Vue layouts
+├── types                   # For TypeScript types
+└── server                  # For the Nitro server
+    ├── api                 # All API routes (route automatically defined as folder/file)
+        └── health.get.ts   # eg, GET /api/health  
+    └── utils               # For server utilities
+```
+Please see the [Nuxt Documentation](https://nuxt.com/docs/guide/directory-structure/app) for more detailed information.
\ No newline at end of file

From 5df5f638c35c2882fd7b483ab3ee86b9d26fd62e Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 19 Dec 2024 00:16:50 +0100
Subject: [PATCH 173/221] chore(doc): add `npm start` command as required

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 6374c74..3573a23 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
+    "start": "nuxt build && nuxt start",
     "postinstall": "nuxt prepare",
     "docs": "typedoc",
     "docs:serve": "typedoc && npx serve docs"

From 7cac387eb95ced66d77b7296f0e264bc6c8df06c Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 19 Dec 2024 00:20:03 +0100
Subject: [PATCH 174/221] chore(doc): update README

---
 .run/dev -- -o.run.xml | 13 -------------
 README.md              | 10 +++++++++-
 2 files changed, 9 insertions(+), 14 deletions(-)
 delete mode 100644 .run/dev -- -o.run.xml

diff --git a/.run/dev -- -o.run.xml b/.run/dev -- -o.run.xml
deleted file mode 100644
index e299611..0000000
--- a/.run/dev -- -o.run.xml	
+++ /dev/null
@@ -1,13 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="dev -- -o" type="js.build_tools.npm" nameIsGenerated="true">
-    <package-json value="$PROJECT_DIR$/package.json" />
-    <command value="run" />
-    <scripts>
-      <script value="dev" />
-    </scripts>
-    <arguments value="-- -o" />
-    <node-interpreter value="project" />
-    <envs />
-    <method v="2" />
-  </configuration>
-</component>
\ No newline at end of file
diff --git a/README.md b/README.md
index 8b240aa..fe002f8 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 ## Setup
 
-Execute the following commands to run the project locally:
+Execute the following commands to run the project locally in development mode:
 
 ```bash
 npm install && npm run dev
@@ -10,6 +10,12 @@ npm install && npm run dev
 
 The server will be available at `http://localhost:3000`.
 
+Run in **production mode** instead:
+
+```bash
+npm install && npm start
+```
+
 ## TSDocs
 
 To generate the TSDoc documentation, run the following command:
@@ -30,6 +36,7 @@ set the variables there. Latter is suggested.
 > Check the `.gitignore` file to see the `.env` file is ignored.
 
 ## Project Structure
+
 We are using the following project structure:
 
 ```
@@ -45,4 +52,5 @@ We are using the following project structure:
         └── health.get.ts   # eg, GET /api/health  
     └── utils               # For server utilities
 ```
+
 Please see the [Nuxt Documentation](https://nuxt.com/docs/guide/directory-structure/app) for more detailed information.
\ No newline at end of file

From de1479803a45a4894e7e086ac0e4effe69a030e5 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 19 Dec 2024 00:25:22 +0100
Subject: [PATCH 175/221] fix(eslint): fix some type errors

---
 pages/play/index.vue            | 2 +-
 server/api/v1/user/[uid].get.ts | 6 +++++-
 server/api/v1/user/index.get.ts | 6 +++++-
 server/utils/spotify.ts         | 3 ++-
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/pages/play/index.vue b/pages/play/index.vue
index a3d7587..e786ce3 100644
--- a/pages/play/index.vue
+++ b/pages/play/index.vue
@@ -37,7 +37,7 @@ onMounted(async () => {
     await selectOption(round.value!.options[0]);
   }
 
-  playRound();
+  startGame();
 });
 
 onUnmounted(() => {
diff --git a/server/api/v1/user/[uid].get.ts b/server/api/v1/user/[uid].get.ts
index 0a87f7e..a923bb1 100644
--- a/server/api/v1/user/[uid].get.ts
+++ b/server/api/v1/user/[uid].get.ts
@@ -1,6 +1,7 @@
 import {isValidUUID} from "~/server/utils/data-validation";
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 import type {GetUserResponse} from "~/types/api/users";
+import type {PostgrestError} from "@supabase/postgrest-js";
 
 /**
  * Retrieves a specific user's profile information by their UUID
@@ -28,7 +29,10 @@ export default defineEventHandler(async (event) => {
 
     // Send request
     const client = serverSupabaseServiceRole(event);
-    const {data, error}:{ data: GetUserResponse|null, error: any} = await client.from('users').select('*').eq('id', userId).maybeSingle();
+    const {data, error}: {
+        data: GetUserResponse | null,
+        error: PostgrestError | null
+    } = await client.from('users').select('*').eq('id', userId).maybeSingle();
 
     if (!data) {
         setResponseStatus(event, 404);
diff --git a/server/api/v1/user/index.get.ts b/server/api/v1/user/index.get.ts
index 6cfec64..2cbb186 100644
--- a/server/api/v1/user/index.get.ts
+++ b/server/api/v1/user/index.get.ts
@@ -1,5 +1,6 @@
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
 import type {GetUserResponse} from "~/types/api/users";
+import type {PostgrestError} from "@supabase/postgrest-js";
 
 /**
  * Retrieves the authenticated user's profile information
@@ -19,7 +20,10 @@ export default defineEventHandler(async (event) => {
 
     // Send request
     const client = serverSupabaseServiceRole(event);
-    const {data, error}:{ data: GetUserResponse|null, error: any} = await client.from('users').select('*').eq('id', user.id).maybeSingle();
+    const {data, error}: {
+        data: GetUserResponse | null,
+        error: PostgrestError | null
+    } = await client.from('users').select('*').eq('id', user.id).maybeSingle();
 
     if (!data) {
         setResponseStatus(event, 404);
diff --git a/server/utils/spotify.ts b/server/utils/spotify.ts
index a83da19..113b2b6 100644
--- a/server/utils/spotify.ts
+++ b/server/utils/spotify.ts
@@ -107,7 +107,8 @@ export async function fetchPreviewUrl(trackId: string): Promise<string | null> {
                 if (result && result.length > 0) {
                     return result[0] as string;
                 }
-            } catch (e) {
+            } catch (error) {
+                console.debug('Failed to parse script tag as JSON:', error);
                 // Skip this script tag if it's not valid JSON
             }
         }

From 14061f6a5cdd26d820c20c316b1725b11cb5843c Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 19 Dec 2024 11:32:24 +0100
Subject: [PATCH 176/221] fix(homeview): fix Turns expanding and ruining the
 layout

---
 components/UsersView.vue                  |  2 +-
 components/home/Game/VerticalGameList.vue |  9 +++------
 layouts/HeaderFooterView.vue              | 12 +++++-------
 pages/index.vue                           | 23 ++++++++++++++++++-----
 4 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 14e0d0c..d535c6f 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -36,7 +36,7 @@ const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970
 
 // Computed Classes
 const containerClasses = computed(() => {
-  const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
+  const baseClasses = 'w-full bg-gray-200 px-3 mt-auto rounded-3xl mb-3';
   if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-hidden flex-grow-0`;
   else return `${baseClasses} overflow-y-hidden`;
 });
diff --git a/components/home/Game/VerticalGameList.vue b/components/home/Game/VerticalGameList.vue
index 2ebacc7..529703d 100644
--- a/components/home/Game/VerticalGameList.vue
+++ b/components/home/Game/VerticalGameList.vue
@@ -23,21 +23,18 @@ const setGame = (game: ActiveGame) => {
 </script>
 
 <template>
-  <div
-      class="w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3 h-full overflow-y-hidden overflow-x-auto flex-grow-0">
-
+  <div class="w-full bg-gray-200 px-3 pb-1 rounded-3xl mb-3 h-full min-h-0 flex flex-col">
     <!-- Fixed Header -->
-    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+    <div class="flex-shrink-0 mb-1 text-xs md:text-base bg-gray-200 mt-2">
       <p>Your turn(s)</p>
     </div>
 
     <!-- Scrollable Boxes -->
-    <div v-if="games" class="flex flex-col space-y-1 md:space-y-3 h-full overflow-y-auto">
+    <div v-if="games" class="flex flex-col space-y-1 md:space-y-3 overflow-y-auto min-h-0 flex-grow">
       <GameBox
           v-for="game in props.games" :key="game.game_id" :game="game"
           @on-play="(g) => {setGame(g); navigateTo('/play');}"/>
     </div>
-
   </div>
 </template>
 
diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index f87986a..5bed5c3 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -3,29 +3,27 @@
 </script>
 
 <template>
-  <div class="flex flex-col h-screen items-center">
+  <div class="flex flex-col h-screen items-center overflow-hidden">
     <!-- Wrapper div for width control -->
-    <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
-
+    <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full overflow-hidden">
       <!-- Header -->
-      <div class="bg-yellow-500 rounded-b-3xl">
+      <div class="bg-yellow-500 rounded-b-3xl flex-shrink-0">
         <div class="flex justify-around items-center h-full">
           <slot name="header" />
         </div>
       </div>
 
       <!-- Content -->
-      <div class="h-full">
+      <div class="flex-grow overflow-hidden">
         <slot name="content" />
       </div>
 
       <!-- Footer -->
-      <div class="bg-yellow-500 text-red-600 rounded-t-3xl">
+      <div class="bg-yellow-500 text-red-600 rounded-t-3xl flex-shrink-0">
         <div class="flex justify-around items-center h-full">
           <slot name="footer" />
         </div>
       </div>
-
     </div>
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 7fb2ecb..f746a89 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -67,11 +67,24 @@ const newGame = async (friendId: string, playlistId: string) => {
 
       </template>
       <template #content>
-        <div class="flex flex-col h-full p-3">
-          <VerticalGameList :games="games?.active || []" class="h-3/6"/>
-          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
-                     :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"/>
-          <HomeControlsGameButtons class="h-1/6" @start-game="showModal = true" @quick-game="()=>newGame()"/>
+        <div class="flex flex-col h-full p-3 min-h-0 gap-3">
+          <div class="h-4/6 min-h-0">
+            <VerticalGameList :games="games?.active || []" class="h-full"/>
+          </div>
+          <div class="h-fit min-h-0">
+            <UsersView
+                :view-type="UserViewType.OPPONENTTURN"
+                :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"
+                class="h-full"
+            />
+          </div>
+          <div class="h-1/6 min-h-0">
+            <HomeControlsGameButtons
+                class="h-full"
+                @start-game="showModal = true"
+                @quick-game="()=>newGame('9da97502-5363-4964-ae80-c242a053e810','4zfjCJLxd7kB0gnNhKurNn')"
+            />
+          </div>
         </div>
       </template>
       <template #footer>

From 140e66c1efec31dd700f53e43f7cb60b6f42e6d5 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 00:29:46 +0100
Subject: [PATCH 177/221] added working Start Game button

---
 components/UsersView.vue                   | 12 ++-
 components/home/Controls/GameButtons.vue   |  6 +-
 components/home/StartGameModal.vue         | 93 ++++++++++++++++++++++
 components/home/Users/UserBox.vue          | 20 +++--
 components/playlists/PlaylistBox.vue       | 10 ++-
 components/playlists/PlaylistContainer.vue | 14 +++-
 components/playlists/PlaylistView.vue      | 15 +++-
 components/profile/Friendlist.vue          | 21 ++++-
 pages/index.vue                            | 20 +++--
 9 files changed, 184 insertions(+), 27 deletions(-)
 create mode 100644 components/home/StartGameModal.vue

diff --git a/components/UsersView.vue b/components/UsersView.vue
index ca6ca07..14e0d0c 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -20,10 +20,14 @@ const props = defineProps({
   actionLabel: {
     type: String,
     required: false
+  },
+  startGame: {
+    type: Boolean,
+    default: false
   }
 });
 
-const emit = defineEmits(['refresh']);
+const emit = defineEmits(['refresh', 'chose_friend']);
 
 const friendshipId = ref(0);
 const friendshipStatus = ref(FriendshipStatus.ACCEPTED);
@@ -67,6 +71,10 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
     return {};
   });
 });
+
+function handleChoseFriend(friendId: string) {
+  emit('chose_friend', friendId)
+}
 </script>
 
 <template>
@@ -127,6 +135,8 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
           :friends-status="friendshipStatus"
           :friend-id="user.id"
           :view-type="props.viewType"
+          :start-game="props.startGame"
+          @chose_friend="handleChoseFriend"
           @refresh="emit('refresh');"
       />
       <!-- Placeholder for scrolling -->
diff --git a/components/home/Controls/GameButtons.vue b/components/home/Controls/GameButtons.vue
index bee8a2a..9e64276 100644
--- a/components/home/Controls/GameButtons.vue
+++ b/components/home/Controls/GameButtons.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-defineEmits(['startGame', 'quickGame']);
+const emit = defineEmits(['startGame', 'quickGame']);
 </script>
 
 <template>
     <div class="flex space-x-3 w-full">
-        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full">
+        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full" @click="emit('startGame')">
             Start Game
         </button>
-        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full"  @click="$emit('quickGame')">
+        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full"  @click="emit('quickGame')">
             Quick Game
         </button>
     </div>
diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
new file mode 100644
index 0000000..49d8435
--- /dev/null
+++ b/components/home/StartGameModal.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { FriendshipStatus, FriendshipType, type GetFriendsResponse } from "@/types/api/user.friends";
+
+const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
+
+const session = useSupabaseSession();
+
+onMounted(async () => {
+  if (session.value) {
+    await getFriendships()
+    //  friends.value.push() // unexpected behavior on initial page load
+  }
+})
+
+async function getFriendships() {
+  $fetch<GetFriendsResponse[]>('/api/v1/user/friends')
+    .then((data) => {
+      friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+    });
+}
+
+const emit = defineEmits(['close-modal', 'refresh', 'friend-playlist-chosen']);
+
+const friendChosen = ref(false);
+const friendId = ref('')
+const playlistChosen = ref(false)
+
+function handleChoseFriendPlaylist(id: string) {
+    if (!friendChosen.value && !playlistChosen.value) {
+        friendChosen.value = true;
+        friendId.value = id
+        return;    
+    } else if (friendChosen.value && !playlistChosen.value) {
+        playlistChosen.value = true;
+        emit('friend-playlist-chosen', friendId.value, id);
+    }    
+}
+
+
+</script>
+
+<template>
+    <div class="modal-overlay z-50">
+        <div class="modal w-full">
+            <ProfileFriendlist v-if="!friendChosen && !playlistChosen" :start-game="true" @chose_friend="handleChoseFriendPlaylist"/>
+            <PlaylistsPlaylistView v-if="friendChosen && !playlistChosen" :start-game="true" @chose-playlist="handleChoseFriendPlaylist"/>           
+
+            <!--p class="text-3xl font-bold">New friend</p>
+            <p class="mb-3">Enter your friends name:</p>
+            <input v-model="newFriend" class="rounded-3xl pl-2 border border-black">
+            <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
+            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-4" @click="addFriend">Add Friend</button-->
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    background-color: #000000da;
+}
+
+.modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: white;
+    height: 500px;
+    margin-top: 10%;
+    border-radius: 20px;
+}
+
+.icon-wrapper {
+    aspect-ratio: 1;
+    border-radius: 50%;
+}
+
+button {
+    width: 150px;
+    height: 40px;
+    font-size: 14px;
+    border-radius: 16px;
+}
+</style>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index d2c5e94..813a967 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -36,11 +36,15 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  startGame: {
+    type: Boolean,
+    default: false
+  }
 });
 
-const emit = defineEmits(['refresh','play']);
+const emit = defineEmits(['refresh', 'play', 'chose_friend']);
 
-const showModal = ref(false);
+const showUserModal = ref(false);
 
 </script>
 
@@ -53,13 +57,15 @@ const showModal = ref(false);
         ? 'flex items-center'
         : 'flex flex-col items-center justify-center mb-3 py-2'
       ]"
-      @click="showModal = true">
+      @click="props.startGame ? emit('chose_friend', friendId) : showUserModal = true">
       <!-- Profile Picture -->
-      <NuxtImg :class="[
+      <NuxtImg 
+        :class="[
         'rounded-full',
         'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
         props.userTurn ? 'mr-3' : 'mb-0'
-      ]" :src="props.profilePicture.toString()" :alt="props.name" />
+        ]"
+        :src="props.profilePicture.toString()" :alt="props.name" />
 
       <!-- User Name -->
       <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name" />
@@ -72,8 +78,8 @@ const showModal = ref(false);
     </div>
     <ProfileUserModal
       v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS || viewType === UserViewType.SENTREQUESTS"
-      v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId"
+      v-show="showUserModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId"
       :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType"
-      @close-modal="showModal = false" @refresh="emit('refresh')" />
+      @close-modal="showUserModal = false" @refresh="emit('refresh')" />
   </div>
 </template>
\ No newline at end of file
diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 676c8bb..73be512 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -16,9 +16,15 @@ const props = defineProps({
   controlElement: {
     type: String,
     default: null
-  }
+  },
+    startGame: {
+        type: Boolean,
+        default: false
+    }
 });
 
+const emit = defineEmits(['chose-playlist'])
+
 const showModal = ref(false);
 </script>
 
@@ -27,7 +33,7 @@ const showModal = ref(false);
     :class="[
       'bg-blue-600 rounded-3xl p-3 mb-3 inline-block w-24 md:w-28'
     ]" 
-    @click="showModal = true">
+    @click="props.startGame ? emit('chose-playlist', props.playlistId) : showModal = true">
     <!-- Playlist cover, when none is given a default image is used -->
     <div class="flex flex-col items-center justify-center">
       <NuxtImg 
diff --git a/components/playlists/PlaylistContainer.vue b/components/playlists/PlaylistContainer.vue
index 1ff51b1..2ec748a 100644
--- a/components/playlists/PlaylistContainer.vue
+++ b/components/playlists/PlaylistContainer.vue
@@ -13,13 +13,23 @@ const props = defineProps({
     playlistIds: {
         type: Array,
         required: true
+    },
+    startGame: {
+        type: Boolean,
+        default: false
     }
 });
 
+const emit = defineEmits(['chose-playlist'])
+
 /* Filter the playlists array for playlits where the ID exists in the genre. */
 const filteredPlaylists = computed(() => 
     props.playlists.filter((item) => props.playlistIds.includes(item.spotifyId))
 );
+
+function handleChosePlaylist(playlistId: string) {
+    emit('chose-playlist', playlistId)
+}
 </script>
 
 <template>
@@ -35,7 +45,9 @@ const filteredPlaylists = computed(() =>
                 v-for="item in filteredPlaylists" 
                 :key="item.id" 
                 :playlist-id="item.spotifyId"
-                :name="item.name" 
+                :name="item.name"
+                :start-game="props.startGame"
+                @chose-playlist="handleChosePlaylist" 
                 v-bind="item.cover ? { cover: item.cover.toString() } : {}" class="flex-grow-0 flex-shrink-0" />
         </div>
     </div>
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index ea6d03d..b96d177 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import type { GetPlaylistResponse } from "@/types/api/playlists";
 
+const props = defineProps({
+  startGame: {
+    type: Boolean,
+    default: false
+  }
+})
+
 const playlists = ref<GetPlaylistResponse[]>([]);
 const categories = ref<{ category: string; ids: number[] }[]>([]);
 
@@ -12,6 +19,8 @@ onMounted(async () => {
   }
 });
 
+const emit = defineEmits(['chose-playlist'])
+
 /* Get all available playlists and get every category with corresponding playlist IDs*/
 async function getPlaylists() {
   try {
@@ -41,12 +50,16 @@ async function getPlaylists() {
     console.error("Failed to fetch playlists:", error);
   }
 }
+
+function handleChosePlaylist(playlistId: string) {
+    emit('chose-playlist', playlistId)
+}
 </script>
 
 <template>
   <div class="flex flex-col">
     <div class="overflow-y-auto" style="max-height: 85vh;">
-      <PlaylistsPlaylistContainer v-for="categoryEl in categories" :key="categoryEl.category" :genre="categoryEl.category" :playlist-ids="categoryEl.ids" :playlists="playlists" :categories="categories"/>
+      <PlaylistsPlaylistContainer v-for="categoryEl in categories" :key="categoryEl.category" :genre="categoryEl.category" :playlist-ids="categoryEl.ids" :playlists="playlists" :categories="categories" :start-game="props.startGame" @chose-playlist="handleChosePlaylist"/>
     </div>
   </div>
 </template>
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 4084376..ed95516 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -2,11 +2,18 @@
 import { FriendshipStatus, FriendshipType, type GetFriendsResponse } from "@/types/api/user.friends";
 import { UserViewType } from "@/types/components/users.view";
 
+const props = defineProps({
+  startGame: {
+    type: Boolean,
+    default: false
+  }
+})
+
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
 const sentRequests: Ref<GetFriendsResponse[]> = useState("outgoing_friendships", () => [])
 
-const session = useSupabaseSession()
+const session = useSupabaseSession();
 
 const showModal = ref(false);
 
@@ -25,6 +32,12 @@ async function getFriendships() {
       sentRequests.value = data.filter((item) => item.request_type == FriendshipType.OUTGOING && item.status === FriendshipStatus.PENDING)
     });
 }
+
+const emit = defineEmits(['chose_friend'])
+
+function handleChoseFriend(friendId: string) {
+  emit('chose_friend', friendId)
+}
 </script>
 
 <template>
@@ -38,10 +51,10 @@ async function getFriendships() {
     <!-- Responsive Size Content Section -->
     <div class="overflow-y-auto" style="max-height: 43vh;">
       <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
-        action-label="Add Friend" :on-action="() => {showModal = true}" @refresh="getFriendships" />
-      <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
+        action-label="Add Friend" :on-action="() => {showModal = true}" :start-game="props.startGame" @refresh="getFriendships" @chose_friend="handleChoseFriend" />
+      <UsersView v-if="requests.length > 0 && !props.startGame" :view-type="UserViewType.REQUESTS" :users="requests"
         @refresh="getFriendships" />
-      <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
+      <UsersView v-if="sentRequests.length > 0 && !props.startGame" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
         @refresh="getFriendships" />
     </div>
   </div>
diff --git a/pages/index.vue b/pages/index.vue
index 0b77459..7fb2ecb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,13 +5,16 @@ import {useGame} from "@/composables/useGames";
 import type {ActiveGame} from "@/types/api/game";
 import VerticalGameList from "@/components/home/Game/VerticalGameList.vue";
 import RegistrationView from "@/components/login/RegistrationModal.vue";
+import StartGameModal from "@/components/home/StartGameModal.vue";
 
-const {fetchUser, user,error:userError} = useUser()
+const {fetchUser, user, error:userError} = useUser()
 
 const {games, fetchGames} = useGame();
 
 const curr_game = useState<ActiveGame | null>('current_game', () => null);
 
+const showModal = ref(false);
+
 onMounted(async () => {
   setLevelbar(70);
   await fetchUser();
@@ -23,21 +26,20 @@ function setLevelbar(newValue: number) {
   if (levelbar) {
     levelbar.style.width = newValue + "%"
   }
-}
+};
 
-const newGame = async () => {
+const newGame = async (friendId: string, playlistId: string) => {
   const data = await $fetch<ActiveGame>('/api/v1/game', {
     method: 'POST',
     body: JSON.stringify({
-      playlist_id: '4DZ79IJM4IlYBI8dpWZZO2',
-      opponent_id: '9da97502-5363-4964-ae80-c242a053e810',
+      playlist_id: playlistId,
+      opponent_id: friendId,
     }),
   });
 
   curr_game.value = data;
   navigateTo('/play');
-}
-
+};
 </script>
 
 <template>
@@ -45,6 +47,8 @@ const newGame = async () => {
 
     <RegistrationView v-if="userError" :on-register="async ()=> {await fetchUser();}"/>
 
+    <StartGameModal v-show="showModal" @close-modal="showModal = false" @friend-playlist-chosen="newGame"/>
+
     <HeaderFooterView v-if="user">
       <template #header>
 
@@ -67,7 +71,7 @@ const newGame = async () => {
           <VerticalGameList :games="games?.active || []" class="h-3/6"/>
           <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
                      :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"/>
-          <HomeControlsGameButtons class="h-1/6" @quick-game="()=>newGame()"/>
+          <HomeControlsGameButtons class="h-1/6" @start-game="showModal = true" @quick-game="()=>newGame()"/>
         </div>
       </template>
       <template #footer>

From 7798d4dacae03831c9eff710d2f9316b954357e8 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 01:36:06 +0100
Subject: [PATCH 178/221] imporoved modal

---
 components/home/StartGameModal.vue | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
index 49d8435..0f125f9 100644
--- a/components/home/StartGameModal.vue
+++ b/components/home/StartGameModal.vue
@@ -31,26 +31,34 @@ function handleChoseFriendPlaylist(id: string) {
         friendId.value = id
         return;    
     } else if (friendChosen.value && !playlistChosen.value) {
-        playlistChosen.value = true;
         emit('friend-playlist-chosen', friendId.value, id);
+        playlistChosen.value = true;
+        emit('close-modal')
     }    
 }
 
+function handleClose() {
+    friendChosen.value = false;
+    friendId.value = '';
+    playlistChosen.value = false;
+    emit('close-modal') ;
+}
+
 
 </script>
 
 <template>
     <div class="modal-overlay z-50">
-        <div class="modal w-full">
-            <ProfileFriendlist v-if="!friendChosen && !playlistChosen" :start-game="true" @chose_friend="handleChoseFriendPlaylist"/>
-            <PlaylistsPlaylistView v-if="friendChosen && !playlistChosen" :start-game="true" @chose-playlist="handleChoseFriendPlaylist"/>           
-
-            <!--p class="text-3xl font-bold">New friend</p>
-            <p class="mb-3">Enter your friends name:</p>
-            <input v-model="newFriend" class="rounded-3xl pl-2 border border-black">
-            <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
-            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-4" @click="addFriend">Add Friend</button-->
-            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
+        <div class="mt-[10%] w-2/3 max-h-[80vh] overflow-y-auto bg-white rounded-lg p-5">
+            <div v-if="!friendChosen && !playlistChosen">
+                <p class="text-3xl font-bold">Choose your Opponent</p>
+                <ProfileFriendlist  :start-game="true" class="w-full p-3" @chose_friend="handleChoseFriendPlaylist"/>
+            </div>
+            <div v-if="friendChosen && !playlistChosen">
+                <p class="text-3xl font-bold">Choose your Playlist</p>
+                <PlaylistsPlaylistView :start-game="true" class="overflow-y-auto" @chose-playlist="handleChoseFriendPlaylist"/>  
+            </div>       
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="handleClose">Close</button>
         </div>
     </div>
 </template>

From fcac54f0fd96cc49bf172f2fe89f33411f1c8527 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 02:03:14 +0100
Subject: [PATCH 179/221] improved styling

---
 components/home/StartGameModal.vue | 44 +++++-------------------------
 1 file changed, 7 insertions(+), 37 deletions(-)

diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
index 0f125f9..64ba42d 100644
--- a/components/home/StartGameModal.vue
+++ b/components/home/StartGameModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FriendshipStatus, FriendshipType, type GetFriendsResponse } from "@/types/api/user.friends";
+import { FriendshipStatus, type GetFriendsResponse } from "@/types/api/user.friends";
 
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
 
@@ -43,55 +43,25 @@ function handleClose() {
     playlistChosen.value = false;
     emit('close-modal') ;
 }
-
-
 </script>
 
 <template>
-    <div class="modal-overlay z-50">
-        <div class="mt-[10%] w-2/3 max-h-[80vh] overflow-y-auto bg-white rounded-lg p-5">
-            <div v-if="!friendChosen && !playlistChosen">
-                <p class="text-3xl font-bold">Choose your Opponent</p>
+    <div class="flex justify-center bg-black bg-opacity-85 z-50 p-3 fixed top-0 bottom-0 right-0 left-0">
+        <div class="mt-[10%] md:mt-[5%] w-full md:w-1/2 max-h-[80vh] overflow-y-auto bg-white rounded-3xl p-3">
+            <div v-if="!friendChosen && !playlistChosen" class="flex flex-col items-center justify-center h-full">
+                <p class="text-3xl font-bold mb-2">Choose your Opponent</p>
                 <ProfileFriendlist  :start-game="true" class="w-full p-3" @chose_friend="handleChoseFriendPlaylist"/>
             </div>
             <div v-if="friendChosen && !playlistChosen">
-                <p class="text-3xl font-bold">Choose your Playlist</p>
+                <p class="text-3xl font-bold pb-2">Choose your Playlist</p>
                 <PlaylistsPlaylistView :start-game="true" class="overflow-y-auto" @chose-playlist="handleChoseFriendPlaylist"/>  
             </div>       
-            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="handleClose">Close</button>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white mx-auto block" @click="handleClose">Close</button>
         </div>
     </div>
 </template>
 
 <style scoped>
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    background-color: #000000da;
-}
-
-.modal {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    background-color: white;
-    height: 500px;
-    margin-top: 10%;
-    border-radius: 20px;
-}
-
-.icon-wrapper {
-    aspect-ratio: 1;
-    border-radius: 50%;
-}
-
 button {
     width: 150px;
     height: 40px;

From aed55918bdbeed38e7b5f6b8a77e65ee942b2f43 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 19 Dec 2024 11:32:24 +0100
Subject: [PATCH 180/221] fix(homeview): fix Turns expanding and ruining the
 layout

---
 components/UsersView.vue                  |  2 +-
 components/home/Game/VerticalGameList.vue |  9 +++------
 layouts/HeaderFooterView.vue              | 12 +++++-------
 pages/index.vue                           | 23 ++++++++++++++++++-----
 4 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 14e0d0c..d535c6f 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -36,7 +36,7 @@ const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970
 
 // Computed Classes
 const containerClasses = computed(() => {
-  const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
+  const baseClasses = 'w-full bg-gray-200 px-3 mt-auto rounded-3xl mb-3';
   if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-hidden flex-grow-0`;
   else return `${baseClasses} overflow-y-hidden`;
 });
diff --git a/components/home/Game/VerticalGameList.vue b/components/home/Game/VerticalGameList.vue
index 2ebacc7..529703d 100644
--- a/components/home/Game/VerticalGameList.vue
+++ b/components/home/Game/VerticalGameList.vue
@@ -23,21 +23,18 @@ const setGame = (game: ActiveGame) => {
 </script>
 
 <template>
-  <div
-      class="w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3 h-full overflow-y-hidden overflow-x-auto flex-grow-0">
-
+  <div class="w-full bg-gray-200 px-3 pb-1 rounded-3xl mb-3 h-full min-h-0 flex flex-col">
     <!-- Fixed Header -->
-    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+    <div class="flex-shrink-0 mb-1 text-xs md:text-base bg-gray-200 mt-2">
       <p>Your turn(s)</p>
     </div>
 
     <!-- Scrollable Boxes -->
-    <div v-if="games" class="flex flex-col space-y-1 md:space-y-3 h-full overflow-y-auto">
+    <div v-if="games" class="flex flex-col space-y-1 md:space-y-3 overflow-y-auto min-h-0 flex-grow">
       <GameBox
           v-for="game in props.games" :key="game.game_id" :game="game"
           @on-play="(g) => {setGame(g); navigateTo('/play');}"/>
     </div>
-
   </div>
 </template>
 
diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index f87986a..5bed5c3 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -3,29 +3,27 @@
 </script>
 
 <template>
-  <div class="flex flex-col h-screen items-center">
+  <div class="flex flex-col h-screen items-center overflow-hidden">
     <!-- Wrapper div for width control -->
-    <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
-
+    <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full overflow-hidden">
       <!-- Header -->
-      <div class="bg-yellow-500 rounded-b-3xl">
+      <div class="bg-yellow-500 rounded-b-3xl flex-shrink-0">
         <div class="flex justify-around items-center h-full">
           <slot name="header" />
         </div>
       </div>
 
       <!-- Content -->
-      <div class="h-full">
+      <div class="flex-grow overflow-hidden">
         <slot name="content" />
       </div>
 
       <!-- Footer -->
-      <div class="bg-yellow-500 text-red-600 rounded-t-3xl">
+      <div class="bg-yellow-500 text-red-600 rounded-t-3xl flex-shrink-0">
         <div class="flex justify-around items-center h-full">
           <slot name="footer" />
         </div>
       </div>
-
     </div>
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 7fb2ecb..f746a89 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -67,11 +67,24 @@ const newGame = async (friendId: string, playlistId: string) => {
 
       </template>
       <template #content>
-        <div class="flex flex-col h-full p-3">
-          <VerticalGameList :games="games?.active || []" class="h-3/6"/>
-          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
-                     :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"/>
-          <HomeControlsGameButtons class="h-1/6" @start-game="showModal = true" @quick-game="()=>newGame()"/>
+        <div class="flex flex-col h-full p-3 min-h-0 gap-3">
+          <div class="h-4/6 min-h-0">
+            <VerticalGameList :games="games?.active || []" class="h-full"/>
+          </div>
+          <div class="h-fit min-h-0">
+            <UsersView
+                :view-type="UserViewType.OPPONENTTURN"
+                :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"
+                class="h-full"
+            />
+          </div>
+          <div class="h-1/6 min-h-0">
+            <HomeControlsGameButtons
+                class="h-full"
+                @start-game="showModal = true"
+                @quick-game="()=>newGame('9da97502-5363-4964-ae80-c242a053e810','4zfjCJLxd7kB0gnNhKurNn')"
+            />
+          </div>
         </div>
       </template>
       <template #footer>

From e6a44508bbd9c3ba842a04ffdd95e667031e44d7 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 19 Dec 2024 12:12:22 +0100
Subject: [PATCH 181/221] fix(homeview): fixed Opponents turn list & hide stale
 games because of deleted_user

---
 pages/index.vue                 | 2 +-
 server/api/v1/game/index.get.ts | 4 +++-
 types/api/playlists.ts          | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index f746a89..e664053 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -71,7 +71,7 @@ const newGame = async (friendId: string, playlistId: string) => {
           <div class="h-4/6 min-h-0">
             <VerticalGameList :games="games?.active || []" class="h-full"/>
           </div>
-          <div class="h-fit min-h-0">
+          <div class="h-fit min-h-[15%]">
             <UsersView
                 :view-type="UserViewType.OPPONENTTURN"
                 :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"
diff --git a/server/api/v1/game/index.get.ts b/server/api/v1/game/index.get.ts
index 491aeb0..3ad5588 100644
--- a/server/api/v1/game/index.get.ts
+++ b/server/api/v1/game/index.get.ts
@@ -52,7 +52,9 @@ export default defineEventHandler(async (event) => {
 
     const response: GetGameResponse = {
         active: activeGames,
-        waiting: games.filter(game => game.status === GameStatus.PLAYING && game.creator_id === user.id),
+        waiting: games.filter(game => game.status === GameStatus.PLAYING && game.creator_id === user.id)
+            // dont show games where the user is waiting for a deleted player
+            .filter((g)=>!g.players.some((p)=>p.id === '00000000-0000-0000-0000-000000000000')),
         past: games.filter(game => game.status === GameStatus.FINISHED)
     };
 
diff --git a/types/api/playlists.ts b/types/api/playlists.ts
index 3e0028a..170af05 100644
--- a/types/api/playlists.ts
+++ b/types/api/playlists.ts
@@ -1,5 +1,5 @@
 export interface GetPlaylistResponse {
-    id: number,
+    id: string,
     spotifyId: string,
     name: string,
     cover: string | null,
@@ -13,7 +13,7 @@ export interface GetCategoryResponse {
 }
 
 export interface GetPlaylistDBResponse {
-    id: number,
+    id: string,
     spotify_id: string,
     name: string,
     cover: string | null,

From 8330b328a4902f17a679f6d803301eb031c38021 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 19 Dec 2024 12:22:29 +0100
Subject: [PATCH 182/221] enhance(friends): friendlist now use composable

---
 components/profile/Friendlist.vue | 27 ++++++---------------
 composables/useFriends.ts         | 39 +++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 20 deletions(-)
 create mode 100644 composables/useFriends.ts

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index ed95516..147af37 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { FriendshipStatus, FriendshipType, type GetFriendsResponse } from "@/types/api/user.friends";
 import { UserViewType } from "@/types/components/users.view";
+import {useFriends} from "@/composables/useFriends";
 
 const props = defineProps({
   startGame: {
@@ -9,30 +10,16 @@ const props = defineProps({
   }
 })
 
-const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
-const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
-const sentRequests: Ref<GetFriendsResponse[]> = useState("outgoing_friendships", () => [])
-
 const session = useSupabaseSession();
+const {sentRequests, friends, requests,fetchFriends} = useFriends();
 
 const showModal = ref(false);
 
 onMounted(async () => {
   if (session.value) {
-    await getFriendships()
-    //  friends.value.push() // unexpected behavior on initial page load
+    await fetchFriends();
   }
 })
-
-async function getFriendships() {
-  $fetch<GetFriendsResponse[]>('/api/v1/user/friends')
-    .then((data) => {
-      requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
-      friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
-      sentRequests.value = data.filter((item) => item.request_type == FriendshipType.OUTGOING && item.status === FriendshipStatus.PENDING)
-    });
-}
-
 const emit = defineEmits(['chose_friend'])
 
 function handleChoseFriend(friendId: string) {
@@ -45,17 +32,17 @@ function handleChoseFriend(friendId: string) {
     <!-- Buttons Section -->
     <div class="flex justify-center mb-3">
       <button v-if="friends.length < 1" class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new friend</button>
-      <ProfileFriendRequestModal v-show="showModal" @close-modal="showModal = false" @refresh="getFriendships" />
+      <ProfileFriendRequestModal v-show="showModal" @close-modal="showModal = false" @refresh="fetchFriends" />
     </div>
 
     <!-- Responsive Size Content Section -->
     <div class="overflow-y-auto" style="max-height: 43vh;">
       <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
-        action-label="Add Friend" :on-action="() => {showModal = true}" :start-game="props.startGame" @refresh="getFriendships" @chose_friend="handleChoseFriend" />
+        action-label="Add Friend" :on-action="() => {showModal = true}" :start-game="props.startGame" @refresh="fetchFriends" @chose_friend="handleChoseFriend" />
       <UsersView v-if="requests.length > 0 && !props.startGame" :view-type="UserViewType.REQUESTS" :users="requests"
-        @refresh="getFriendships" />
+        @refresh="fetchFriends" />
       <UsersView v-if="sentRequests.length > 0 && !props.startGame" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
-        @refresh="getFriendships" />
+        @refresh="fetchFriends" />
     </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/composables/useFriends.ts b/composables/useFriends.ts
new file mode 100644
index 0000000..e45f974
--- /dev/null
+++ b/composables/useFriends.ts
@@ -0,0 +1,39 @@
+import type {GetFriendsResponse} from "@/types/api/user.friends";
+import {FriendshipStatus, FriendshipType} from "@/types/api/user.friends";
+
+export const useFriends = () => {
+    const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
+    const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
+    const sentRequests: Ref<GetFriendsResponse[]> = useState("outgoing_friendships", () => [])
+
+    const loading = ref(false)
+    const error = ref<string | null>(null)
+
+
+    const fetchFriends = async () => {
+        try {
+            // Only set loading on initial fetch
+            loading.value = true
+
+            const data = await $fetch<GetFriendsResponse[]>('/api/v1/user/friends');
+
+            requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
+            friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+            sentRequests.value = data.filter((item) => item.request_type == FriendshipType.OUTGOING && item.status === FriendshipStatus.PENDING)
+        } catch (err) {
+            error.value = 'An error occurred';
+            console.error('Error fetching user', err)
+        } finally {
+            loading.value = false
+        }
+    }
+
+    return {
+        requests,
+        friends,
+        sentRequests,
+        loading,
+        error,
+        fetchFriends
+    }
+}

From 2b953597d52fe9eb73ad125866513543bb7eaa40 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 13:52:13 +0100
Subject: [PATCH 183/221] improved styling of modals

---
 components/playlists/AddPlaylistsModal.vue    | 38 +++----------------
 components/playlists/PlaylistModal.vue        |  4 +-
 .../playlists/UserSpotifyPlaylistsView.vue    | 27 +++++--------
 3 files changed, 17 insertions(+), 52 deletions(-)

diff --git a/components/playlists/AddPlaylistsModal.vue b/components/playlists/AddPlaylistsModal.vue
index 7750325..1366ea8 100644
--- a/components/playlists/AddPlaylistsModal.vue
+++ b/components/playlists/AddPlaylistsModal.vue
@@ -8,47 +8,21 @@ const playlistError = ref('')
 
 </script>
 
-<template>
-    <div class="modal-overlay z-50">
-        <div class="modal">
+<template> 
+    <div class="fixed top-0 bottom-0 left-0 right-0 flex justify-center z-50 bg-black bg-opacity-85">
+        <div class="mt-[10%] md:mt-[5%] w-full md:w-1/6 max-h-[80vh] md:max-h-[50vh] rounded-3xl flex flex-col align-center text-center bg-white px-5 pt-10">
             <p class="text-3xl font-bold my-3">Your Playlists</p>
             <UserSpotifyPlaylistsView @refresh="emit('refresh')"/>
             <p v-if="playlistError" class="error-message">{{ playlistError }}</p>
-            <p class="px-8">If you can't see your playlist here, add it to your Spotfiy profile.</p>
-            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="emit('close-modal')">Close</button>
+            <p class="px-8">If you can't see your playlist here, make sure to add it to your Spotify profile.</p>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white mx-auto block" @click="emit('close-modal')">Close</button>
         </div>
     </div>
 </template>
 
-<style scoped>
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    background-color: #000000da;
-}
-
-.modal {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    background-color: white;
-    height: 500px;
-    width: 40vb;
-    margin-top: 10%;
-    border-radius: 20px;
-}
 
-.icon-wrapper {
-    aspect-ratio: 1;
-    border-radius: 50%;
-}
 
+<style scoped>
 button {
     width: 150px;
     height: 40px;
diff --git a/components/playlists/PlaylistModal.vue b/components/playlists/PlaylistModal.vue
index 2f4b180..3618f0e 100644
--- a/components/playlists/PlaylistModal.vue
+++ b/components/playlists/PlaylistModal.vue
@@ -46,8 +46,8 @@ async function addPlaylist() {
 <template>
     <div class="fixed top-0 bottom-0 left-0 right-0 flex justify-center bg-black bg-opacity-85 z-50">
         <div
-            class="mt-[10%] w-5/6 md:w-1/6 h-5/6 md:h-3/6 rounded-3xl flex flex-col items-center justify-center text-center bg-white">
-            <p class="text-xl mb-2">{{ playlistName }}</p>
+            class="mt-[10%] md:mt-[5%] w-full md:w-1/6 max-h-[80vh] md:max-h-[50vh] m-5 rounded-3xl flex flex-col items-center justify-center text-center bg-white">
+            <p class="text-xl font-bold mb-10 w-2/3">{{ playlistName }}</p>
             <NuxtImg :src="playlistCover" class="rounded-2xl h-40 w-40 mb-6" />
             <div v-if="!props.userPlaylist">
                 <button 
diff --git a/components/playlists/UserSpotifyPlaylistsView.vue b/components/playlists/UserSpotifyPlaylistsView.vue
index c5331c0..7887ef4 100644
--- a/components/playlists/UserSpotifyPlaylistsView.vue
+++ b/components/playlists/UserSpotifyPlaylistsView.vue
@@ -7,9 +7,7 @@ const { getUserPlaylists } = useSpotify("");
 const userPlaylists = ref<Playlist[] | null>([]);
 
 onMounted(async () => {
-
-        userPlaylists.value = await getUserPlaylists();;
-        console.log(userPlaylists.value)
+    userPlaylists.value = await getUserPlaylists();;
 })
 
 const emit = defineEmits(['refresh']);
@@ -17,21 +15,14 @@ const emit = defineEmits(['refresh']);
 </script>
 
 <template>
-    <div class="w-full bg-gray-200 px-3 py-1 rounded-3xl mb-3  flex flex-col flex-grow-0 overflow-hidden">
-        <!-- Boxes with the name and cover of the playlist in the genre -->
-        <div class="flex flex-row flex-nowrap overflow-x-auto gap-2">
-            <div
-                class="w-full bg-gray-200 rounded-3xl flex flex-col flex-grow-0 overflow-hidden">
-
-                <!-- Boxes with the name and cover of the playlist in the genre -->
-                <div class="grid grid-cols-2 overflow-y-auto gap-1">
-                    <PlaylistsPlaylistBox 
-                        v-for="item in userPlaylists" :key="item.id" :playlist-id="item.spotifyId"
-                        :name="item.name" v-bind="item.cover ? { cover: item.cover.toString() } : {}"
-                        :user-playlist="true"
-                        class="flex-grow-0 flex-shrink-0" 
-                        @refresh="emit('refresh')"/>
-                </div>
+    <div class="w-full bg-gray-200 px-3 py-3 rounded-3xl mb-3 flex flex-col flex-grow-0 overflow-y-auto">
+        <div class="w-full bg-gray-200 rounded-3xl">
+            <!-- Boxes with the name and cover of the playlist in the genre -->
+            <div class="grid grid-cols-3 gap-1 justify-items-center items-center">
+                <PlaylistsPlaylistBox 
+                    v-for="item in userPlaylists" :key="item.id" :playlist-id="item.spotifyId"
+                    :name="item.name" v-bind="item.cover ? { cover: item.cover.toString() } : {}" :user-playlist="true"
+                    class="flex-grow-0 flex-shrink-0" @refresh="emit('refresh')" />
             </div>
         </div>
     </div>

From b992c7c4fe637f7b72c99b1f01df3ff9b007396b Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 13:54:18 +0100
Subject: [PATCH 184/221] added default values for non regquired props

---
 components/playlists/PlaylistContainer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/playlists/PlaylistContainer.vue b/components/playlists/PlaylistContainer.vue
index 0c07e5c..245e2c6 100644
--- a/components/playlists/PlaylistContainer.vue
+++ b/components/playlists/PlaylistContainer.vue
@@ -16,11 +16,11 @@ const props = defineProps({
     },
     onAction: {
         type: Function as PropType<() => void>,
-        required: false
+        default: () => {}
     },
     actionLabel: {
         type: String,
-        required: false
+        default: ''
     }
 });
 

From 1376a8475681ef1b34c1535d4e88498f0c37bdde Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 14:02:06 +0100
Subject: [PATCH 185/221] removed unnecessary comments

---
 components/playlists/AddPlaylistsModal.vue |  2 --
 components/playlists/PlaylistContainer.vue |  1 -
 components/playlists/PlaylistView.vue      | 15 +++------------
 3 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/components/playlists/AddPlaylistsModal.vue b/components/playlists/AddPlaylistsModal.vue
index 1366ea8..f05b9a1 100644
--- a/components/playlists/AddPlaylistsModal.vue
+++ b/components/playlists/AddPlaylistsModal.vue
@@ -20,8 +20,6 @@ const playlistError = ref('')
     </div>
 </template>
 
-
-
 <style scoped>
 button {
     width: 150px;
diff --git a/components/playlists/PlaylistContainer.vue b/components/playlists/PlaylistContainer.vue
index 245e2c6..1d02661 100644
--- a/components/playlists/PlaylistContainer.vue
+++ b/components/playlists/PlaylistContainer.vue
@@ -41,7 +41,6 @@ const filteredPlaylists = computed(() =>
         </button>
         </div>
 
-
         <!-- Boxes with the name and cover of the playlist in the genre -->
         <div class="flex flex-row flex-nowrap overflow-x-auto gap-2">
             <PlaylistsPlaylistBox 
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 70b453e..b1030bd 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -16,8 +16,6 @@ onMounted(async () => {
   }
 });
 
-// action-label="Add Friend" :on-action="() => {showModal = true}"
-
 /* Get all available playlists and get every category with corresponding playlist IDs*/
 async function getPlaylists() {
   try {
@@ -25,47 +23,40 @@ async function getPlaylists() {
     playlists.value = [...data];
 
     playlists.value.forEach(playlist => {
-  // Skip disabled playlists
+
   if (!playlist.enabled) return;
 
+  /* Filter all IDs of playlists in each category. */
   playlist.categories.forEach(category => {
     if (category === "User created") {
-      // Handle "User created" category separately
       const existingUserCategory = userPlaylistIds.value.find(item => item.category === "User created");
 
       if (existingUserCategory) {
-        // Add the new ID if not already present
         if (!existingUserCategory.ids.includes(playlist.id)) {
           existingUserCategory.ids.push(playlist.id);
         }
       } else {
-        // Add a new entry for "User created" category
         userPlaylistIds.value.push({ category: "User created", ids: [playlist.id] });
       }
     } else {
-      // Check if the category already exists in the array
       const existingCategory = categories.value.find(item => item.category === category);
 
       if (existingCategory) {
-        // Add the new ID if not already present
         if (!existingCategory.ids.includes(playlist.id)) {
           existingCategory.ids.push(playlist.id);
         }
       } else {
-        // Add a new entry if the category does not exist
         categories.value.push({ category, ids: [playlist.id] });
       }
     }
   });
-  const userCreatedIds = userPlaylistIds.value.flatMap(item => item.ids); // Extract all IDs from "User created"
+  const userCreatedIds = userPlaylistIds.value.flatMap(item => item.ids);
   userPlaylists.value = playlists.value.filter(playlist => userCreatedIds.includes(playlist.id));
 });
   } catch (error) {
     console.error("Failed to fetch playlists:", error);
   }
 };
-
-
 </script>
 
 <template>

From 80ee56ca6c2e81b5be76578d1a99c92221e782b8 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 16:00:21 +0100
Subject: [PATCH 186/221] imporoved modals for starting game

---
 components/home/StartGameModal.vue    | 21 ++++++++++++---------
 components/playlists/PlaylistBox.vue  |  2 +-
 components/playlists/PlaylistView.vue |  2 +-
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
index 64ba42d..b699e05 100644
--- a/components/home/StartGameModal.vue
+++ b/components/home/StartGameModal.vue
@@ -47,20 +47,23 @@ function handleClose() {
 
 <template>
     <div class="flex justify-center bg-black bg-opacity-85 z-50 p-3 fixed top-0 bottom-0 right-0 left-0">
-        <div class="mt-[10%] md:mt-[5%] w-full md:w-1/2 max-h-[80vh] overflow-y-auto bg-white rounded-3xl p-3">
-            <div v-if="!friendChosen && !playlistChosen" class="flex flex-col items-center justify-center h-full">
-                <p class="text-3xl font-bold mb-2">Choose your Opponent</p>
-                <ProfileFriendlist  :start-game="true" class="w-full p-3" @chose_friend="handleChoseFriendPlaylist"/>
+        <div class="mt-[10%] md:mt-[5%] w-full md:w-1/2 max-h-[80vh] bg-white rounded-3xl p-3 flex flex-col justify-between">
+            <div class="flex-grow">
+                <div v-if="!friendChosen && !playlistChosen" class="flex flex-col items-center justify-center h-full">
+                    <p class="text-3xl font-bold pb-2 text-center">Choose your Opponent</p>
+                    <ProfileFriendlist :start-game="true" class="w-full p-3" @chose_friend="handleChoseFriendPlaylist"/>
+                </div>
+                <div v-if="friendChosen && !playlistChosen">
+                    <p class="text-3xl font-bold pb-2 text-center">Choose your Playlist</p>
+                    <PlaylistsPlaylistView :start-game="true" class="overflow-y-auto max-h-[60vh] mb-5" @chose-playlist="handleChoseFriendPlaylist" />  
+                </div>       
             </div>
-            <div v-if="friendChosen && !playlistChosen">
-                <p class="text-3xl font-bold pb-2">Choose your Playlist</p>
-                <PlaylistsPlaylistView :start-game="true" class="overflow-y-auto" @chose-playlist="handleChoseFriendPlaylist"/>  
-            </div>       
-            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white mx-auto block" @click="handleClose">Close</button>
+            <button class="bg-indigo-600 hover:bg-indigo-800 text-white mx-auto block mb-5" @click="handleClose">Close</button>
         </div>
     </div>
 </template>
 
+
 <style scoped>
 button {
     width: 150px;
diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 73be512..80ba2be 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -31,7 +31,7 @@ const showModal = ref(false);
 <template>
   <div 
     :class="[
-      'bg-blue-600 rounded-3xl p-3 mb-3 inline-block w-24 md:w-28'
+      'bg-blue-600 rounded-3xl p-3 mb-3 inline-block w-24 md:w-28 hover:bg-sky-700'
     ]" 
     @click="props.startGame ? emit('chose-playlist', props.playlistId) : showModal = true">
     <!-- Playlist cover, when none is given a default image is used -->
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index b96d177..874655b 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -58,7 +58,7 @@ function handleChosePlaylist(playlistId: string) {
 
 <template>
   <div class="flex flex-col">
-    <div class="overflow-y-auto" style="max-height: 85vh;">
+    <div class="overflow-y-auto">
       <PlaylistsPlaylistContainer v-for="categoryEl in categories" :key="categoryEl.category" :genre="categoryEl.category" :playlist-ids="categoryEl.ids" :playlists="playlists" :categories="categories" :start-game="props.startGame" @chose-playlist="handleChosePlaylist"/>
     </div>
   </div>

From 4242a968466d60d09f3bef94f99f4474a00c4d2b Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 16:02:53 +0100
Subject: [PATCH 187/221] added some comments

---
 components/home/StartGameModal.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
index b699e05..689d3c9 100644
--- a/components/home/StartGameModal.vue
+++ b/components/home/StartGameModal.vue
@@ -1,17 +1,23 @@
 <script setup lang="ts">
 import { FriendshipStatus, type GetFriendsResponse } from "@/types/api/user.friends";
 
-const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
-
 const session = useSupabaseSession();
 
 onMounted(async () => {
   if (session.value) {
     await getFriendships()
-    //  friends.value.push() // unexpected behavior on initial page load
   }
 })
 
+const emit = defineEmits(['close-modal', 'refresh', 'friend-playlist-chosen']);
+
+const friendChosen = ref(false);
+const friendId = ref('')
+const playlistChosen = ref(false)
+
+const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
+
+/* Only get friends with an accepted friend request*/
 async function getFriendships() {
   $fetch<GetFriendsResponse[]>('/api/v1/user/friends')
     .then((data) => {
@@ -19,12 +25,7 @@ async function getFriendships() {
     });
 }
 
-const emit = defineEmits(['close-modal', 'refresh', 'friend-playlist-chosen']);
-
-const friendChosen = ref(false);
-const friendId = ref('')
-const playlistChosen = ref(false)
-
+/* Check if the user chose everything to start a game */
 function handleChoseFriendPlaylist(id: string) {
     if (!friendChosen.value && !playlistChosen.value) {
         friendChosen.value = true;
@@ -37,6 +38,7 @@ function handleChoseFriendPlaylist(id: string) {
     }    
 }
 
+/* Reset variables on close */
 function handleClose() {
     friendChosen.value = false;
     friendId.value = '';

From a387ee826938e6e2b8986bf36911002028fe7058 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 16:03:35 +0100
Subject: [PATCH 188/221] changed type of playlist to the correct type

---
 components/playlists/PlaylistView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 874655b..802a16d 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -9,7 +9,7 @@ const props = defineProps({
 })
 
 const playlists = ref<GetPlaylistResponse[]>([]);
-const categories = ref<{ category: string; ids: number[] }[]>([]);
+const categories = ref<{ category: string; ids: string[] }[]>([]);
 
 const session = useSupabaseSession();
 

From 86bacee5c2c9c17a98b0a82cb21c90577f5dc0cd Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 19 Dec 2024 17:29:55 +0100
Subject: [PATCH 189/221] propose new start game button

---
 components/home/StartGameModal.vue         | 182 ++++++++++++++-------
 components/home/Users/UserBox.vue          |   6 +-
 components/playlists/PlaylistContainer.vue |   6 +-
 components/playlists/PlaylistView.vue      |   4 +-
 4 files changed, 132 insertions(+), 66 deletions(-)

diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
index 689d3c9..d32617d 100644
--- a/components/home/StartGameModal.vue
+++ b/components/home/StartGameModal.vue
@@ -1,76 +1,142 @@
 <script setup lang="ts">
-import { FriendshipStatus, type GetFriendsResponse } from "@/types/api/user.friends";
+import {ref} from 'vue'
+import type {GetPlaylistResponse} from "@/types/api/playlists";
+import {useFriends} from "@/composables/useFriends";
 
-const session = useSupabaseSession();
+const emit = defineEmits<{
+  'close-modal': []
+  'friend-playlist-chosen': [friendId: string, playlistId: string]
+}>()
 
-onMounted(async () => {
-  if (session.value) {
-    await getFriendships()
-  }
-})
+const currentView = ref<'main' | 'friends' | 'playlists'>('main')
+const selectedPlaylist = useState<GetPlaylistResponse | null>('selected_playlist', () => null)
+const selectedFriend = ref<string | null>(null)
+
+const {fetchFriends, friends} = useFriends();
+
+const showFriendsView = () => {
+  currentView.value = 'friends'
+}
 
-const emit = defineEmits(['close-modal', 'refresh', 'friend-playlist-chosen']);
+const showPlaylistsView = () => {
+  currentView.value = 'playlists'
+}
+
+const showMainView = () => {
+  currentView.value = 'main'
+  selectedFriend.value = null
+}
 
-const friendChosen = ref(false);
-const friendId = ref('')
-const playlistChosen = ref(false)
+const selectFriend = (friendId: string) => {
+  selectedFriend.value = friendId
+  if (selectedPlaylist.value) {
+    emit('friend-playlist-chosen', friendId, selectedPlaylist.value.id)
+    emit('close-modal')
+  } else showPlaylistsView();
+}
 
-const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
+const playWithRandom = () => {
+  if (selectedPlaylist.value) {
+    emit('friend-playlist-chosen', '', selectedPlaylist.value.id)
+    emit('close-modal')
+  }
+}
 
-/* Only get friends with an accepted friend request*/
-async function getFriendships() {
-  $fetch<GetFriendsResponse[]>('/api/v1/user/friends')
-    .then((data) => {
-      friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
-    });
+const selectPlaylist = (playlist: GetPlaylistResponse) => {
+  console.log(playlist)
+  selectedPlaylist.value = playlist
+  if (selectedFriend.value) {
+    emit('friend-playlist-chosen', selectedFriend.value, playlist.id)
+    emit('close-modal')
+  } else showFriendsView();
 }
 
-/* Check if the user chose everything to start a game */
-function handleChoseFriendPlaylist(id: string) {
-    if (!friendChosen.value && !playlistChosen.value) {
-        friendChosen.value = true;
-        friendId.value = id
-        return;    
-    } else if (friendChosen.value && !playlistChosen.value) {
-        emit('friend-playlist-chosen', friendId.value, id);
-        playlistChosen.value = true;
-        emit('close-modal')
-    }    
+const closeModal = () => {
+  emit('close-modal')
 }
 
-/* Reset variables on close */
-function handleClose() {
-    friendChosen.value = false;
-    friendId.value = '';
-    playlistChosen.value = false;
-    emit('close-modal') ;
+// New function to handle backdrop clicks
+const handleBackdropClick = (event: MouseEvent) => {
+  // Check if the click was directly on the backdrop
+  if ((event.target as HTMLElement).classList.contains('modal-backdrop')) {
+    closeModal()
+  }
 }
+
+onMounted(async () => {
+  await fetchFriends();
+})
 </script>
 
 <template>
-    <div class="flex justify-center bg-black bg-opacity-85 z-50 p-3 fixed top-0 bottom-0 right-0 left-0">
-        <div class="mt-[10%] md:mt-[5%] w-full md:w-1/2 max-h-[80vh] bg-white rounded-3xl p-3 flex flex-col justify-between">
-            <div class="flex-grow">
-                <div v-if="!friendChosen && !playlistChosen" class="flex flex-col items-center justify-center h-full">
-                    <p class="text-3xl font-bold pb-2 text-center">Choose your Opponent</p>
-                    <ProfileFriendlist :start-game="true" class="w-full p-3" @chose_friend="handleChoseFriendPlaylist"/>
-                </div>
-                <div v-if="friendChosen && !playlistChosen">
-                    <p class="text-3xl font-bold pb-2 text-center">Choose your Playlist</p>
-                    <PlaylistsPlaylistView :start-game="true" class="overflow-y-auto max-h-[60vh] mb-5" @chose-playlist="handleChoseFriendPlaylist" />  
-                </div>       
-            </div>
-            <button class="bg-indigo-600 hover:bg-indigo-800 text-white mx-auto block mb-5" @click="handleClose">Close</button>
+  <!-- Added click handler and modal-backdrop class -->
+  <div
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 modal-backdrop"
+      @click="handleBackdropClick"
+  >
+    <!-- Modal content -->
+    <div class="bg-white rounded-3xl p-4 w-11/12 max-w-md">
+      <!-- Rest of the modal content stays the same -->
+      <div class="flex justify-end">
+        <button class="text-gray-500 hover:text-gray-700" @click="closeModal">
+          <Icon name="mdi:close" class="text-2xl"/>
+        </button>
+      </div>
+
+      <!-- Display playlist from last game or previous selection -->
+      <div v-if="selectedPlaylist" class="mb-4 flex flex-col items-center rounded-lg">
+        <NuxtImg
+            :src="selectedPlaylist?.cover || '/icons/default_cover.jpg'"
+            :alt="selectedPlaylist?.name || ''"
+            class="w-10 h-10 rounded"
+        />
+        <span class="text-sm font-medium">{{ selectedPlaylist.name }}</span>
+      </div>
+
+      <!-- Main content -->
+      <div v-if="currentView === 'main'" class="space-y-4">
+        <button
+            class="w-full py-4 bg-indigo-500 text-white rounded-xl hover:bg-indigo-600 transition-colors"
+            @click="showFriendsView"
+        >
+          Play with a Friend
+        </button>
+        <button
+            class="w-full py-4 bg-purple-500 text-white rounded-xl hover:bg-purple-600 transition-colors"
+            @click="playWithRandom"
+        >
+          Play with Random Player
+        </button>
+      </div>
+
+      <!-- Friend view -->
+      <div v-else-if="currentView === 'friends'" class="space-y-4">
+        <div class="flex items-center mb-4">
+          <button class="text-gray-500 hover:text-gray-700 mr-2" @click="showMainView">
+            <Icon name="mdi:arrow-left" class="text-2xl"/>
+          </button>
+          <h2 class="text-lg font-semibold">Select a Friend</h2>
         </div>
-    </div>
-</template>
 
+        <div class="space-y-2">
+          <HomeUsersUserBox
+              v-for="friend in friends"
+              :key="friend.user.id"
+              :user-turn="true"
+              :name="friend.user.username"
+              :profile-picture="friend.user.avatar_url || undefined"
+              :friend-id="friend.user.id"
+              @click="selectFriend(friend.user.id)"
+          />
+        </div>
+      </div>
+
+      <div v-else-if="currentView === 'playlists'">
+        <p class="text-3xl font-bold pb-2 text-center">Choose your Playlist</p>
+        <PlaylistsPlaylistView :start-game="true" class="overflow-y-auto max-h-[60vh] mb-5"
+                               @chose-playlist="selectPlaylist"/>
+      </div>
 
-<style scoped>
-button {
-    width: 150px;
-    height: 40px;
-    font-size: 14px;
-    border-radius: 16px;
-}
-</style>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 813a967..8833729 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -6,7 +6,7 @@ import { UserViewType } from '@/types/components/users.view';
 const props = defineProps({
   profilePicture: {
     type: String,
-    default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
+    default: "https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg"
   },
   name: {
     type: String,
@@ -34,7 +34,7 @@ const props = defineProps({
   },
   viewType: {
     type: Number,
-    required: true,
+    required: false,
   },
   startGame: {
     type: Boolean,
@@ -65,7 +65,7 @@ const showUserModal = ref(false);
         'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
         props.userTurn ? 'mr-3' : 'mb-0'
         ]"
-        :src="props.profilePicture.toString()" :alt="props.name" />
+        :src="props.profilePicture" />
 
       <!-- User Name -->
       <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name" />
diff --git a/components/playlists/PlaylistContainer.vue b/components/playlists/PlaylistContainer.vue
index 2ec748a..ef794a3 100644
--- a/components/playlists/PlaylistContainer.vue
+++ b/components/playlists/PlaylistContainer.vue
@@ -27,8 +27,8 @@ const filteredPlaylists = computed(() =>
     props.playlists.filter((item) => props.playlistIds.includes(item.spotifyId))
 );
 
-function handleChosePlaylist(playlistId: string) {
-    emit('chose-playlist', playlistId)
+function handleChosePlaylist(playlist: GetPlaylistResponse) {
+    emit('chose-playlist', playlist)
 }
 </script>
 
@@ -47,7 +47,7 @@ function handleChosePlaylist(playlistId: string) {
                 :playlist-id="item.spotifyId"
                 :name="item.name"
                 :start-game="props.startGame"
-                @chose-playlist="handleChosePlaylist" 
+                @chose-playlist="handleChosePlaylist(item)"
                 v-bind="item.cover ? { cover: item.cover.toString() } : {}" class="flex-grow-0 flex-shrink-0" />
         </div>
     </div>
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 802a16d..b4642b2 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -51,8 +51,8 @@ async function getPlaylists() {
   }
 }
 
-function handleChosePlaylist(playlistId: string) {
-    emit('chose-playlist', playlistId)
+function handleChosePlaylist(playlist: GetPlaylistResponse) {
+    emit('chose-playlist', playlist)
 }
 </script>
 

From 940d1bd4c7c21bc5cffefa7c53870ddb92ad8ad9 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 19:39:10 +0100
Subject: [PATCH 190/221] changed Date Format and added icons

---
 components/profile/ProfileInformation.vue | 24 +++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index bbab124..0b0c9ec 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -12,8 +12,8 @@ onMounted(async () => {
 const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
 
 const formatDate = (dateString : string) => {
-  const options = { year: "numeric", month: "short", day: "numeric" };
-  const formattedDate = new Intl.DateTimeFormat('en-US', options).format(new Date(dateString));
+  const options = { year: "numeric", month: "numeric", day: "numeric" };
+  const formattedDate = new Intl.DateTimeFormat('de-DE', options).format(new Date(dateString));
   return formattedDate.replace(',', '');
 };
 </script>
@@ -21,17 +21,25 @@ const formatDate = (dateString : string) => {
 <template>
   <div>
     <div v-if="error" class="text-red-500">Error occurred: {{error}}</div>
-    <div class="flex flex-col">
+    <div class="flex flex-col bg-gray-200 p-3 rounded-3xl">
       <div class="flex flex-col items-center justify-center mb-3">
         <NuxtImg :src="loading || !user?.avatar_url ? default_avatar : user!.avatar_url" class="w-16 h-16 rounded-full"/>
         <p>{{ loading ? 'Loading.' : user?.username }}</p>
       </div>
 
-      <div class="grid grid-cols-2 gap-4">
-        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Games played</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Streak: {{ user?.daily_streak }}</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Spotify: {{user?.spotify_visibility ? 'public' : 'private'}}</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Joined: {{ formatDate(session?.user.created_at) }}</div>
+      <div class="grid grid-cols-2 gap-2">
+        <div class="bg-gray-200 h-8 rounded-3xl px-1 border border-black flex items-center justify-center">Games played</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-1 border border-black flex items-center justify-center">
+          <Icon name="mdi:fire" class="text-2xl mr-2"/> 
+          {{ user?.daily_streak }}
+        </div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-1 border border-black flex items-center justify-center">
+          <Icon name="mdi:spotify" class="text-2xl mr-2"/> 
+          {{user?.spotify_visibility ? 'public' : 'private'}}</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-1 border border-black flex items-center justify-center">
+          <Icon name="mdi:account-plus" class="text-2xl mr-2"/>
+          {{ formatDate(session?.user.created_at) }}
+        </div>
       </div>
     </div>
   </div>

From e8e9d59792e09a87d585327820ce0b986e1dc0c4 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 20:57:32 +0100
Subject: [PATCH 191/221] improved styling

---
 components/profile/ProfileInformation.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 0b0c9ec..3b4c73f 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -28,15 +28,17 @@ const formatDate = (dateString : string) => {
       </div>
 
       <div class="grid grid-cols-2 gap-2">
-        <div class="bg-gray-200 h-8 rounded-3xl px-1 border border-black flex items-center justify-center">Games played</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-1 border border-black flex items-center justify-center">
+        <div class="bg-gray-200 h-8 rounded-3xl px-2 border border-gray-700 flex items-center">
+          Games played
+        </div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-2 border border-gray-700 flex items-center">
           <Icon name="mdi:fire" class="text-2xl mr-2"/> 
           {{ user?.daily_streak }}
         </div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-1 border border-black flex items-center justify-center">
+        <div class="bg-gray-200 h-8 rounded-3xl px-2 border border-gray-700 flex items-center">
           <Icon name="mdi:spotify" class="text-2xl mr-2"/> 
           {{user?.spotify_visibility ? 'public' : 'private'}}</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-1 border border-black flex items-center justify-center">
+        <div class="bg-gray-200 h-8 rounded-3xl px-2 border border-gray-700 flex items-center">
           <Icon name="mdi:account-plus" class="text-2xl mr-2"/>
           {{ formatDate(session?.user.created_at) }}
         </div>

From b4b3b4a1a82e21dc3501b33646fbb466a23fb8a3 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 21:11:29 +0100
Subject: [PATCH 192/221] fixed some eslint warnings

---
 components/home/Game/GameBox.vue  | 5 +++--
 components/home/Users/UserBox.vue | 7 ++++---
 components/profile/Friendlist.vue | 9 ++++++---
 pages/index.vue                   | 5 +++--
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/components/home/Game/GameBox.vue b/components/home/Game/GameBox.vue
index a7284eb..dd65934 100644
--- a/components/home/Game/GameBox.vue
+++ b/components/home/Game/GameBox.vue
@@ -39,8 +39,9 @@ const game_creator: GetUserResponse | null = props.game.players.find(player => p
     <div class="flex flex-col min-w-0">
       <!-- User Name -->
       <div class="flex items-center">
-        <p class="text-white text-lg font-medium truncate"
-           v-text="game_creator?.username || 'Custom game'"/>
+        <p 
+          class="text-white text-lg font-medium truncate"
+          v-text="game_creator?.username || 'Custom game'"/>
       </div>
 
       <!-- Playlist Name -->
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index d2c5e94..6cceaaa 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -55,9 +55,10 @@ const showModal = ref(false);
       ]"
       @click="showModal = true">
       <!-- Profile Picture -->
-      <NuxtImg :class="[
-        'rounded-full',
-        'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
+      <NuxtImg 
+        :class="[
+          'rounded-full',
+          'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
         props.userTurn ? 'mr-3' : 'mb-0'
       ]" :src="props.profilePicture.toString()" :alt="props.name" />
 
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 4084376..af1ffb5 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -37,11 +37,14 @@ async function getFriendships() {
 
     <!-- Responsive Size Content Section -->
     <div class="overflow-y-auto" style="max-height: 43vh;">
-      <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
+      <UsersView 
+        v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
         action-label="Add Friend" :on-action="() => {showModal = true}" @refresh="getFriendships" />
-      <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
+      <UsersView 
+        v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
         @refresh="getFriendships" />
-      <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
+      <UsersView 
+        v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
         @refresh="getFriendships" />
     </div>
   </div>
diff --git a/pages/index.vue b/pages/index.vue
index 0b77459..74c1b97 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -65,8 +65,9 @@ const newGame = async () => {
       <template #content>
         <div class="flex flex-col h-full p-3">
           <VerticalGameList :games="games?.active || []" class="h-3/6"/>
-          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
-                     :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"/>
+          <UsersView 
+            :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
+            :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"/>
           <HomeControlsGameButtons class="h-1/6" @quick-game="()=>newGame()"/>
         </div>
       </template>

From 712e7f3d9763dc485523bb6c81a8b2a48bdc13ed Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 19 Dec 2024 21:15:14 +0100
Subject: [PATCH 193/221] fixed some eslint warnings

---
 components/home/Game/GameBox.vue  |  5 +++--
 components/home/Users/UserBox.vue | 12 +++++++-----
 components/profile/Friendlist.vue |  9 ++++++---
 pages/index.vue                   |  5 +++--
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/components/home/Game/GameBox.vue b/components/home/Game/GameBox.vue
index a7284eb..dd65934 100644
--- a/components/home/Game/GameBox.vue
+++ b/components/home/Game/GameBox.vue
@@ -39,8 +39,9 @@ const game_creator: GetUserResponse | null = props.game.players.find(player => p
     <div class="flex flex-col min-w-0">
       <!-- User Name -->
       <div class="flex items-center">
-        <p class="text-white text-lg font-medium truncate"
-           v-text="game_creator?.username || 'Custom game'"/>
+        <p 
+          class="text-white text-lg font-medium truncate"
+          v-text="game_creator?.username || 'Custom game'"/>
       </div>
 
       <!-- Playlist Name -->
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index d2c5e94..332c3be 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -55,11 +55,13 @@ const showModal = ref(false);
       ]"
       @click="showModal = true">
       <!-- Profile Picture -->
-      <NuxtImg :class="[
-        'rounded-full',
-        'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
-        props.userTurn ? 'mr-3' : 'mb-0'
-      ]" :src="props.profilePicture.toString()" :alt="props.name" />
+      <NuxtImg 
+        :class="[
+          'rounded-full',
+          'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
+          props.userTurn ? 'mr-3' : 'mb-0'
+        ]" 
+        :src="props.profilePicture.toString()" :alt="props.name" />
 
       <!-- User Name -->
       <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name" />
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 4084376..af1ffb5 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -37,11 +37,14 @@ async function getFriendships() {
 
     <!-- Responsive Size Content Section -->
     <div class="overflow-y-auto" style="max-height: 43vh;">
-      <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
+      <UsersView 
+        v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
         action-label="Add Friend" :on-action="() => {showModal = true}" @refresh="getFriendships" />
-      <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
+      <UsersView 
+        v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
         @refresh="getFriendships" />
-      <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
+      <UsersView 
+        v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
         @refresh="getFriendships" />
     </div>
   </div>
diff --git a/pages/index.vue b/pages/index.vue
index 0b77459..74c1b97 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -65,8 +65,9 @@ const newGame = async () => {
       <template #content>
         <div class="flex flex-col h-full p-3">
           <VerticalGameList :games="games?.active || []" class="h-3/6"/>
-          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
-                     :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"/>
+          <UsersView 
+            :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
+            :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"/>
           <HomeControlsGameButtons class="h-1/6" @quick-game="()=>newGame()"/>
         </div>
       </template>

From 014090255b79109642d8278193cdd70086258414 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Thu, 19 Dec 2024 23:19:49 +0100
Subject: [PATCH 194/221] feat(game): start game modal keeps last played
 playlist

---
 components/home/StartGameModal.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
index d32617d..c82c2e4 100644
--- a/components/home/StartGameModal.vue
+++ b/components/home/StartGameModal.vue
@@ -52,6 +52,7 @@ const selectPlaylist = (playlist: GetPlaylistResponse) => {
 }
 
 const closeModal = () => {
+  showMainView();
   emit('close-modal')
 }
 
@@ -84,17 +85,23 @@ onMounted(async () => {
       </div>
 
       <!-- Display playlist from last game or previous selection -->
-      <div v-if="selectedPlaylist" class="mb-4 flex flex-col items-center rounded-lg">
-        <NuxtImg
-            :src="selectedPlaylist?.cover || '/icons/default_cover.jpg'"
-            :alt="selectedPlaylist?.name || ''"
-            class="w-10 h-10 rounded"
-        />
-        <span class="text-sm font-medium">{{ selectedPlaylist.name }}</span>
+      <div v-if="selectedPlaylist" class="relative group mb-4 flex flex-col items-center rounded-lg cursor-pointer" @click="showPlaylistsView">
+        <span class="text-sm font-light mb-1">Playing: </span>
+        <div class="relative">
+          <NuxtImg
+              :src="selectedPlaylist?.cover || '/icons/default_cover.jpg'"
+              :alt="selectedPlaylist?.name || ''"
+              class="md:w-24 w-20 rounded"
+          />
+          <div class="absolute inset-0 bg-black bg-opacity-50 rounded opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+            <Icon name="mdi:pencil" class="text-white text-lg"/>
+          </div>
+        </div>
+        <span class="text-sm md:text-base font-semibold">{{ selectedPlaylist.name }}</span>
       </div>
 
       <!-- Main content -->
-      <div v-if="currentView === 'main'" class="space-y-4">
+      <div v-if="currentView === 'main'" class="space-y-2">
         <button
             class="w-full py-4 bg-indigo-500 text-white rounded-xl hover:bg-indigo-600 transition-colors"
             @click="showFriendsView"

From 2cb803aca81e2d28ce4e6012cbc07850864a7a3c Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 20 Dec 2024 00:03:01 +0100
Subject: [PATCH 195/221] fixed getUserPlaylist

---
 components/playlists/AddPlaylistsModal.vue | 2 +-
 composables/useSpotify.ts                  | 2 +-
 pages/index.vue                            | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/playlists/AddPlaylistsModal.vue b/components/playlists/AddPlaylistsModal.vue
index f05b9a1..c6e7196 100644
--- a/components/playlists/AddPlaylistsModal.vue
+++ b/components/playlists/AddPlaylistsModal.vue
@@ -10,7 +10,7 @@ const playlistError = ref('')
 
 <template> 
     <div class="fixed top-0 bottom-0 left-0 right-0 flex justify-center z-50 bg-black bg-opacity-85">
-        <div class="mt-[10%] md:mt-[5%] w-full md:w-1/6 max-h-[80vh] md:max-h-[50vh] rounded-3xl flex flex-col align-center text-center bg-white px-5 pt-10">
+        <div class="mt-[10%] md:mt-[5%] w-full sm:w-3/6 xl:w-2/6 2xl:w-2/6 max-h-[80vh] md:max-h-[50vh] rounded-3xl flex flex-col align-center text-center bg-white px-5 pt-10">
             <p class="text-3xl font-bold my-3">Your Playlists</p>
             <UserSpotifyPlaylistsView @refresh="emit('refresh')"/>
             <p v-if="playlistError" class="error-message">{{ playlistError }}</p>
diff --git a/composables/useSpotify.ts b/composables/useSpotify.ts
index 195fd0c..e7e316f 100644
--- a/composables/useSpotify.ts
+++ b/composables/useSpotify.ts
@@ -80,7 +80,7 @@ export default function useSpotify(playlistId: string) {
 
     async function getUserPlaylists(): Promise<Playlist[] | null> {
         try {
-            const res = await fetch(`https://api.spotify.com/v1/users/${session.value?.user.user_metadata.full_name}/playlists`, {
+            const res = await fetch(`https://api.spotify.com/v1/users/${session.value?.user.user_metadata.provider_id}/playlists`, {
                 method: 'GET',
                 headers: {
                     'Authorization': `Bearer ${token.value}`,
diff --git a/pages/index.vue b/pages/index.vue
index 0b77459..4047023 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -65,7 +65,8 @@ const newGame = async () => {
       <template #content>
         <div class="flex flex-col h-full p-3">
           <VerticalGameList :games="games?.active || []" class="h-3/6"/>
-          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
+          <UsersView 
+          :view-type="UserViewType.OPPONENTTURN" class="h-2/6"
                      :users="games?.waiting ? games?.waiting.map(game=>game.players.find((p)=>p.id != user?.id)) : []"/>
           <HomeControlsGameButtons class="h-1/6" @quick-game="()=>newGame()"/>
         </div>

From 4b3164c08f680fe7dd86243d1daa9d5b9d383381 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 20 Dec 2024 00:41:04 +0100
Subject: [PATCH 196/221] prettyfied profile information

---
 components/profile/ProfileInformation.vue | 32 ++++++++++++++---------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 3b4c73f..47bde48 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 const session = useSupabaseSession()
-const {user, loading, error, fetchUser} = useUser()
+const { user, loading, error, fetchUser } = useUser()
 
 onMounted(async () => {
   if (session.value) {
@@ -11,7 +11,7 @@ onMounted(async () => {
 
 const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
 
-const formatDate = (dateString : string) => {
+const formatDate = (dateString: string) => {
   const options = { year: "numeric", month: "numeric", day: "numeric" };
   const formattedDate = new Intl.DateTimeFormat('de-DE', options).format(new Date(dateString));
   return formattedDate.replace(',', '');
@@ -20,29 +20,35 @@ const formatDate = (dateString : string) => {
 
 <template>
   <div>
-    <div v-if="error" class="text-red-500">Error occurred: {{error}}</div>
+    <div v-if="error" class="text-red-500">Error occurred: {{ error }}</div>
     <div class="flex flex-col bg-gray-200 p-3 rounded-3xl">
       <div class="flex flex-col items-center justify-center mb-3">
-        <NuxtImg :src="loading || !user?.avatar_url ? default_avatar : user!.avatar_url" class="w-16 h-16 rounded-full"/>
-        <p>{{ loading ? 'Loading.' : user?.username }}</p>
+        <div class="bg-gray-300 p-3 rounded-3xl">
+          <NuxtImg 
+            :src="loading || !user?.avatar_url ? default_avatar : user!.avatar_url"
+            class="w-16 h-16 rounded-full opacity-100" />
+          <p class="mt-2 px-3 rounded-3xl opacity-100">{{ loading ? 'Loading...' : user?.username }}</p>
+        </div>
       </div>
 
       <div class="grid grid-cols-2 gap-2">
-        <div class="bg-gray-200 h-8 rounded-3xl px-2 border border-gray-700 flex items-center">
+        <div class="bg-gray-200 h-8 rounded-3xl bg-yellow-500 px-2 flex items-center">
           Games played
         </div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-2 border border-gray-700 flex items-center">
-          <Icon name="mdi:fire" class="text-2xl mr-2"/> 
+        <div class="bg-gray-200 h-8 rounded-3xl bg-yellow-500 px-2 flex items-center">
+          <Icon name="mdi:fire" class="text-2xl mr-2 text-red-600" />
           {{ user?.daily_streak }}
         </div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-2 border border-gray-700 flex items-center">
-          <Icon name="mdi:spotify" class="text-2xl mr-2"/> 
-          {{user?.spotify_visibility ? 'public' : 'private'}}</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-2 border border-gray-700 flex items-center">
-          <Icon name="mdi:account-plus" class="text-2xl mr-2"/>
+        <div class="bg-gray-200 h-8 rounded-3xl bg-yellow-500 px-2 flex items-center">
+          <Icon name="mdi:spotify" class="text-2xl mr-2 text-red-600" />
+          {{ user?.spotify_visibility ? 'public' : 'private' }}
+        </div>
+        <div class="bg-gray-200 h-8 rounded-3xl bg-yellow-500 px-2 flex items-center">
+          <Icon name="mdi:account-plus" class="text-2xl mr-2 text-red-600" />
           {{ formatDate(session?.user.created_at) }}
         </div>
       </div>
+
     </div>
   </div>
 </template>

From a17ddbf03e10a7edc824f672ef1a120209b3db72 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 20 Dec 2024 00:59:30 +0100
Subject: [PATCH 197/221] fixed registration view staying after register

---
 pages/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 74c1b97..0c16344 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,9 +4,9 @@ import {UserViewType} from "@/types/components/users.view"
 import {useGame} from "@/composables/useGames";
 import type {ActiveGame} from "@/types/api/game";
 import VerticalGameList from "@/components/home/Game/VerticalGameList.vue";
-import RegistrationView from "@/components/login/RegistrationModal.vue";
+import RegistrationModal from "@/components/login/RegistrationModal.vue";
 
-const {fetchUser, user,error:userError} = useUser()
+const {fetchUser, user, error:userError} = useUser()
 
 const {games, fetchGames} = useGame();
 
@@ -43,7 +43,7 @@ const newGame = async () => {
 <template>
   <div class="bg-gradient-to-b from-indigo-500 to-purple-500">
 
-    <RegistrationView v-if="userError" :on-register="async ()=> {await fetchUser();}"/>
+    <RegistrationModal v-if="userError" :on-register="async ()=> { await fetchUser(); userError = null; }"/>
 
     <HeaderFooterView v-if="user">
       <template #header>

From bc5cc6e09818113cb41e029917e7a32b8c246052 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 01:38:33 +0100
Subject: [PATCH 198/221] feat(game): implement random & quickplay functions

---
 DB/game.sql                        | 79 ++++++++++++++++++++++++-
 components/home/StartGameModal.vue |  6 +-
 pages/index.vue                    | 21 +++++--
 pages/play/index.vue               |  5 ++
 server/api/v1/game/index.post.ts   | 92 +++++++++++++++++++++++++-----
 types/api/playlists.ts             |  2 +-
 6 files changed, 180 insertions(+), 25 deletions(-)

diff --git a/DB/game.sql b/DB/game.sql
index 32fea3b..712f557 100644
--- a/DB/game.sql
+++ b/DB/game.sql
@@ -369,5 +369,80 @@ BEGIN
 END;
 $$ LANGUAGE plpgsql;
 
-SELECT *
-FROM get_player_games('d2e6a9a3-a0be-45ce-ae39-676c6a88c53a');
\ No newline at end of file
+-- Get a random opponent with recent activity
+CREATE OR REPLACE FUNCTION get_random_opponent(requesting_user_id UUID)
+    RETURNS UUID
+    LANGUAGE plpgsql
+AS $$
+DECLARE
+    found_user_id UUID;
+BEGIN
+    -- Try last 24 hours
+    WITH distinct_users AS (
+        SELECT DISTINCT gp.user_id
+        FROM games g
+                 INNER JOIN game_player_song_stats gp ON g.game_id = gp.game_id
+        WHERE g.created_at > now() - INTERVAL '1 day'
+          AND gp.user_id != '00000000-0000-0000-0000-000000000000'
+          AND gp.user_id != requesting_user_id
+    )
+    SELECT user_id INTO found_user_id
+    FROM distinct_users
+    ORDER BY random()
+    LIMIT 1;
+
+    -- If not found, try last week
+    IF found_user_id IS NULL THEN
+        WITH distinct_users AS (
+            SELECT DISTINCT gp.user_id
+            FROM games g
+                     INNER JOIN game_player_song_stats gp ON g.game_id = gp.game_id
+            WHERE g.created_at > now() - INTERVAL '7 days'
+              AND gp.user_id != '00000000-0000-0000-0000-000000000000'
+              AND gp.user_id != requesting_user_id
+        )
+        SELECT user_id INTO found_user_id
+        FROM distinct_users
+        ORDER BY random()
+        LIMIT 1;
+    END IF;
+
+    -- If still not found, try last month
+    IF found_user_id IS NULL THEN
+        WITH distinct_users AS (
+            SELECT DISTINCT gp.user_id
+            FROM games g
+                     INNER JOIN game_player_song_stats gp ON g.game_id = gp.game_id
+            WHERE g.created_at > now() - INTERVAL '30 days'
+              AND gp.user_id != '00000000-0000-0000-0000-000000000000'
+              AND gp.user_id != requesting_user_id
+        )
+        SELECT user_id INTO found_user_id
+        FROM distinct_users
+        ORDER BY random()
+        LIMIT 1;
+    END IF;
+
+    -- If still not found, try all time
+    IF found_user_id IS NULL THEN
+        WITH distinct_users AS (
+            SELECT DISTINCT gp.user_id
+            FROM games g
+                     INNER JOIN game_player_song_stats gp ON g.game_id = gp.game_id
+            WHERE gp.user_id != '00000000-0000-0000-0000-000000000000'
+              AND gp.user_id != requesting_user_id
+        )
+        SELECT user_id INTO found_user_id
+        FROM distinct_users
+        ORDER BY random()
+        LIMIT 1;
+    END IF;
+
+    -- If still no user found, raise exception
+    IF found_user_id IS NULL THEN
+        RAISE EXCEPTION 'No active users found';
+    END IF;
+
+    RETURN found_user_id;
+END;
+$$;
\ No newline at end of file
diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
index c82c2e4..9871917 100644
--- a/components/home/StartGameModal.vue
+++ b/components/home/StartGameModal.vue
@@ -2,6 +2,7 @@
 import {ref} from 'vue'
 import type {GetPlaylistResponse} from "@/types/api/playlists";
 import {useFriends} from "@/composables/useFriends";
+import type {ActiveGamePlaylist} from "@/types/api/game";
 
 const emit = defineEmits<{
   'close-modal': []
@@ -9,7 +10,7 @@ const emit = defineEmits<{
 }>()
 
 const currentView = ref<'main' | 'friends' | 'playlists'>('main')
-const selectedPlaylist = useState<GetPlaylistResponse | null>('selected_playlist', () => null)
+const selectedPlaylist = useState<GetPlaylistResponse | ActiveGamePlaylist | null>('selected_playlist', () => null)
 const selectedFriend = ref<string | null>(null)
 
 const {fetchFriends, friends} = useFriends();
@@ -91,13 +92,14 @@ onMounted(async () => {
           <NuxtImg
               :src="selectedPlaylist?.cover || '/icons/default_cover.jpg'"
               :alt="selectedPlaylist?.name || ''"
-              class="md:w-24 w-20 rounded"
+              class="md:w-28 w-24 rounded"
           />
           <div class="absolute inset-0 bg-black bg-opacity-50 rounded opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
             <Icon name="mdi:pencil" class="text-white text-lg"/>
           </div>
         </div>
         <span class="text-sm md:text-base font-semibold">{{ selectedPlaylist.name }}</span>
+        <span class="text-xs font-extralight -mt-1 text-gray-500">Click here to change</span>
       </div>
 
       <!-- Main content -->
diff --git a/pages/index.vue b/pages/index.vue
index e664053..cd1a915 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,7 +7,7 @@ import VerticalGameList from "@/components/home/Game/VerticalGameList.vue";
 import RegistrationView from "@/components/login/RegistrationModal.vue";
 import StartGameModal from "@/components/home/StartGameModal.vue";
 
-const {fetchUser, user, error:userError} = useUser()
+const {fetchUser, user, error: userError} = useUser()
 
 const {games, fetchGames} = useGame();
 
@@ -28,13 +28,24 @@ function setLevelbar(newValue: number) {
   }
 };
 
-const newGame = async (friendId: string, playlistId: string) => {
+const newGame = async (opponent_id?: string, playlist_id?: string) => {
+  let gameType = undefined;
+
+  if (!playlist_id && !opponent_id) {
+    gameType = 'quickplay';
+  } else if (!opponent_id) {
+    gameType = 'rdm_opponent';
+  }
+
   const data = await $fetch<ActiveGame>('/api/v1/game', {
     method: 'POST',
     body: JSON.stringify({
-      playlist_id: playlistId,
-      opponent_id: friendId,
+      playlist_id: playlist_id,
+      opponent_id: opponent_id,
     }),
+    query: {
+      type: gameType
+    }
   });
 
   curr_game.value = data;
@@ -82,7 +93,7 @@ const newGame = async (friendId: string, playlistId: string) => {
             <HomeControlsGameButtons
                 class="h-full"
                 @start-game="showModal = true"
-                @quick-game="()=>newGame('9da97502-5363-4964-ae80-c242a053e810','4zfjCJLxd7kB0gnNhKurNn')"
+                @quick-game="()=>newGame()"
             />
           </div>
         </div>
diff --git a/pages/play/index.vue b/pages/play/index.vue
index e786ce3..d893659 100644
--- a/pages/play/index.vue
+++ b/pages/play/index.vue
@@ -2,6 +2,7 @@
 
 import type {ActiveGame, ActiveGameRound, PlayGameResponse, Song} from "@/types/api/game";
 import GameSelectLayout from "@/layouts/Game/GameSelectLayout.vue";
+import type {GetPlaylistResponse} from "@/types/api/playlists";
 
 export interface Scoreboard {
   score: number;
@@ -14,6 +15,8 @@ const round = computed<ActiveGameRound | null>(() => game.value ? game.value.rou
 const roundIdx = ref<number>(1); // current round number
 const scoreboard = useState<Scoreboard>('current_game_score', () => ({score: 0, change: 0}));
 
+const selectedPlaylist = useState<GetPlaylistResponse | null>('selected_playlist', () => null)
+
 const error = useState<string | null>('game_error', () => null); // possible error message
 
 // Temporary variables
@@ -54,6 +57,8 @@ const startGame = () => {
   // Reset game state
   roundIdx.value = 1;
   scoreboard.value = {score: 0, change: 0};
+
+  selectedPlaylist.value = game.value.playlist;
   // Start first round
   playRound();
 };
diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
index 048d562..fd20dfa 100644
--- a/server/api/v1/game/index.post.ts
+++ b/server/api/v1/game/index.post.ts
@@ -8,12 +8,18 @@ import type {SupabaseClient} from "@supabase/supabase-js";
 import type {Playlist} from "~/types/api/playlist";
 import type {PostgrestError} from "@supabase/postgrest-js";
 import type {GetUserResponse} from "~/types/api/users";
+import type {GetPlaylistDBResponse} from "~/types/api/playlists";
+import type {EventHandlerRequest, H3Event} from "h3";
 
 const GameInitSchema = z.object({
     playlist_id: z.string().regex(spotifyIDRegex, {message: 'Invalid Spotify ID'}),
     opponent_id: z.string().uuid()
 }).readonly()
 
+const GameInitRdmSchema = z.object({
+    playlist_id: z.string().regex(spotifyIDRegex, {message: 'Invalid Spotify ID'}),
+}).readonly()
+
 /**
  * Initializes a new game between two players using a specified playlist
  * @param {Object} body - Request body
@@ -25,13 +31,6 @@ const GameInitSchema = z.object({
  * @returns {ActiveGame} Newly created game with randomized rounds and song options
  */
 export default defineEventHandler(async (event) => {
-    // validate post-request body
-    const result = await readValidatedBody(event, body => GameInitSchema.safeParse(body))
-    if (!result.success) {
-        setResponseStatus(event, 400);
-        return {error: result.error.issues};
-    }
-
     // Require user to be authenticated
     const user = await serverSupabaseUser(event);
     if (!user?.id) {
@@ -39,7 +38,43 @@ export default defineEventHandler(async (event) => {
         return {error: 'unauthenticated'};
     }
 
-    if (result.data.opponent_id === user.id) {
+    const query = getQuery(event);
+
+    let playlist_id: string;
+    let opponent_id: string;
+
+    switch (query.type) {
+        case 'rdm_opponent': {
+            // validate post-request body
+            const result = await readValidatedBody(event, body => GameInitRdmSchema.safeParse(body))
+            if (!result.success) {
+                setResponseStatus(event, 400);
+                return {error: result.error.issues};
+            }
+            playlist_id = result.data.playlist_id;
+            opponent_id = await selectRandomOpponentId(event, user.id);
+            break;
+        }
+        case 'quickplay': {
+            playlist_id = await selectRandomPlaylistId(event);
+            opponent_id = await selectRandomOpponentId(event, user.id);
+            break;
+        }
+        default: {
+            console.debug('No recognized query type. Assuming opponent and playlist are provided');
+            // validate post-request body
+            const result = await readValidatedBody(event, body => GameInitSchema.safeParse(body))
+            if (!result.success) {
+                setResponseStatus(event, 400);
+                return {error: result.error.issues};
+            }
+            playlist_id = result.data.playlist_id;
+            opponent_id = result.data.opponent_id;
+            break
+        }
+    }
+
+    if (opponent_id! === user.id) {
         setResponseStatus(event, 400);
         return {error: 'You cannot play against yourself'};
     }
@@ -48,7 +83,7 @@ export default defineEventHandler(async (event) => {
     const {data: playlist, error: playlistError}: {
         data: Playlist | null,
         error: PostgrestError | null
-    } = await client.from('playlists').select().eq('id', result.data.playlist_id).single();
+    } = await client.from('playlists').select().eq('id', playlist_id!).single();
 
     if (playlistError) {
         setResponseStatus(event, 500);
@@ -67,7 +102,7 @@ export default defineEventHandler(async (event) => {
 
     // Determine songs
     const token = await getSpotifyToken();
-    const spotifySongs = await getSongsFromPlaylist(token, result.data.playlist_id);
+    const spotifySongs = await getSongsFromPlaylist(token, playlist_id!);
 
     if (!spotifySongs) {
         setResponseStatus(event, 500);
@@ -86,9 +121,9 @@ export default defineEventHandler(async (event) => {
         const gameRounds = await createGameRounds(songs);
 
         const init_game_params = {
-            playlist_id_input: result.data.playlist_id,
-            player_ids: [user.id, result.data.opponent_id],
-            song_data: gameRounds.sort((gr)=> gr.round).map(round => ({
+            playlist_id_input: playlist_id!,
+            player_ids: [user.id, opponent_id!],
+            song_data: gameRounds.sort((gr) => gr.round).map(round => ({
                 spotify_song_id: round.correct_song.id,
                 wrong_option_1: round.wrong_songs[0].id,
                 wrong_option_2: round.wrong_songs[1].id,
@@ -125,13 +160,13 @@ export default defineEventHandler(async (event) => {
             status: GameStatus.PLAYING,
             creator_id: user.id,
             playlist: {
-                id: result.data.playlist_id,
+                id: playlist_id!,
                 name: playlist.name,
                 cover: playlist.cover
             },
             players: [
                 {id: user.id} as GetUserResponse,
-                {id: result.data.opponent_id} as GetUserResponse
+                {id: opponent_id!} as GetUserResponse
             ], // TODO: Fetch opponent data and fix this
             rounds: mappedGameRounds
         }
@@ -187,4 +222,31 @@ async function createGameRounds(songs: Song[], rounds_to_play: number = 5): Prom
     }
 
     return gameRounds;
+}
+
+async function selectRandomPlaylistId(event: H3Event<EventHandlerRequest>): Promise<string> {
+    const client = serverSupabaseServiceRole(event);
+    const {data}: {
+        data: GetPlaylistDBResponse | null
+    } = await client.from('playlists').select(`*`).limit(1).single();
+
+    if (data) return data.id;
+
+    throw new Error('No playlists found');
+}
+
+async function selectRandomOpponentId(event: H3Event<EventHandlerRequest>, user_id: string): Promise<string> {
+    const client = serverSupabaseServiceRole(event);
+
+    const {data} = await client
+        .rpc('get_random_opponent', {
+            requesting_user_id: user_id
+        } as never)
+        .single();
+
+    if (!data) {
+        throw new Error('No active users found');
+    }
+
+    return data;
 }
\ No newline at end of file
diff --git a/types/api/playlists.ts b/types/api/playlists.ts
index 170af05..89c57e3 100644
--- a/types/api/playlists.ts
+++ b/types/api/playlists.ts
@@ -1,6 +1,6 @@
 export interface GetPlaylistResponse {
     id: string,
-    spotifyId: string,
+    spotify_id: string,
     name: string,
     cover: string | null,
     enabled: boolean,

From 8dfad0a37655a7325e2cb494536274bc47810d91 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 01:49:58 +0100
Subject: [PATCH 199/221] fix(game): missing random player playlist selection

---
 components/home/StartGameModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
index 9871917..a267c70 100644
--- a/components/home/StartGameModal.vue
+++ b/components/home/StartGameModal.vue
@@ -40,7 +40,7 @@ const playWithRandom = () => {
   if (selectedPlaylist.value) {
     emit('friend-playlist-chosen', '', selectedPlaylist.value.id)
     emit('close-modal')
-  }
+  } else showPlaylistsView();
 }
 
 const selectPlaylist = (playlist: GetPlaylistResponse) => {

From 0754b98f48da49937e4daaa51fe97cb05771f564 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 01:57:29 +0100
Subject: [PATCH 200/221] update README

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index fe002f8..65810bd 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@ Run in **production mode** instead:
 ```bash
 npm install && npm start
 ```
+Not tested as the project is still in development.
 
 ## TSDocs
 

From 0f0314eeca59122251e8ec7c62025ba434044e60 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 02:07:38 +0100
Subject: [PATCH 201/221] fix(playlist): wrong api endpoint url

---
 components/playlists/PlaylistView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index b4642b2..d5f138d 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -24,7 +24,7 @@ const emit = defineEmits(['chose-playlist'])
 /* Get all available playlists and get every category with corresponding playlist IDs*/
 async function getPlaylists() {
   try {
-    const data = await $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist');
+    const data = await $fetch<GetPlaylistResponse[]>('/api/v1/playlist');
     playlists.value = [...data];
 
     playlists.value.forEach(playlist => {

From 10ef3bdeeead5ab1409a1020c3cfcb6bb9983ebf Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 02:26:02 +0100
Subject: [PATCH 202/221] enable swagger page

---
 nuxt.config.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 50c0cb9..0a6ab3f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -23,5 +23,10 @@ export default defineNuxtConfig({
     devServer: {
         host: '0.0.0.0'
     },
+    nitro: {
+        experimental: {
+            openAPI: true
+        },
+    },
     ssr: false
 })
\ No newline at end of file

From 88c8f1caf22dfcb3f37b3761e2bb5da21aeadcb9 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 20 Dec 2024 02:34:32 +0100
Subject: [PATCH 203/221] switched userError and fetchUser

---
 pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index 0c16344..63d111e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -43,7 +43,7 @@ const newGame = async () => {
 <template>
   <div class="bg-gradient-to-b from-indigo-500 to-purple-500">
 
-    <RegistrationModal v-if="userError" :on-register="async ()=> { await fetchUser(); userError = null; }"/>
+    <RegistrationModal v-if="userError" :on-register="async ()=> { userError = null; await fetchUser(); }"/>
 
     <HeaderFooterView v-if="user">
       <template #header>

From 96cefd2a0873d0af238aac8730541f868b87fc54 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 03:09:29 +0100
Subject: [PATCH 204/221] fix(register): now applying avatar_url

---
 server/api/v1/user/register.post.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/server/api/v1/user/register.post.ts b/server/api/v1/user/register.post.ts
index 6e92df1..a70ce19 100644
--- a/server/api/v1/user/register.post.ts
+++ b/server/api/v1/user/register.post.ts
@@ -45,7 +45,8 @@ export default defineEventHandler(async (event) => {
         id: user.id,
         username: body.data.username,
         spotify_id: user.user_metadata.provider_id,
-        spotify_visibility: body.data.spotify_visibility
+        spotify_visibility: body.data.spotify_visibility,
+        avatar_url: user.user_metadata.avatar_url,
     } as never).single();
 
     if (error) {

From 748e339073af798b9710a49d8422b4d066392c1e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 20 Dec 2024 13:12:55 +0100
Subject: [PATCH 205/221] added refresh

---
 components/playlists/PlaylistView.vue |  9 +++++++++
 components/profile/Friendlist.vue     | 26 +++++++++++---------------
 pages/index.vue                       |  9 +++++++++
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 6737708..7d767ea 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -17,12 +17,21 @@ const session = useSupabaseSession();
 
 const showModal = ref(false);
 
+const intervalId = ref();
+
 onMounted(async () => {
   if (session.value) {
     await getPlaylists();
+    intervalId.value = await setInterval(() => {
+    getPlaylists()
+  }, 5000); // 5 seconds
   }
 });
 
+onBeforeUnmount(() => {
+  clearInterval(intervalId.value);
+});
+
 const emit = defineEmits(['chose-playlist'])
 
 /* Get all available playlists and get every category with corresponding playlist IDs*/
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 79b4d51..5a93a19 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,30 +1,26 @@
 <script setup lang="ts">
-import { FriendshipStatus, FriendshipType, type GetFriendsResponse } from "@/types/api/user.friends";
 import { UserViewType } from "@/types/components/users.view";
 import {useFriends} from "@/composables/useFriends";
 
-const props = defineProps({
-  startGame: {
-    type: Boolean,
-    default: false
-  }
-})
-
 const session = useSupabaseSession();
 const {sentRequests, friends, requests,fetchFriends} = useFriends();
 
 const showModal = ref(false);
 
+const intervalId = ref();
+
 onMounted(async () => {
   if (session.value) {
     await fetchFriends();
+    intervalId.value = await setInterval(() => {
+    fetchFriends()
+  }, 5000); // 5 seconds
   }
 })
-const emit = defineEmits(['chose_friend'])
 
-function handleChoseFriend(friendId: string) {
-  emit('chose_friend', friendId)
-}
+onBeforeUnmount(() => {
+  clearInterval(intervalId.value);
+});
 </script>
 
 <template>
@@ -39,13 +35,13 @@ function handleChoseFriend(friendId: string) {
     <div class="overflow-y-auto" style="max-height: 43vh;">
       <UsersView 
         v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
-        action-label="Add Friend" :on-action="() => {showModal = true}" @refresh="getFriendships" />
+        action-label="Add Friend" :on-action="() => {showModal = true}" @refresh="fetchFriends" />
       <UsersView 
         v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
-        @refresh="getFriendships" />
+        @refresh="fetchFriends" />
       <UsersView 
         v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
-        @refresh="getFriendships" />
+        @refresh="fetchFriends" />
     </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 50254c8..b298f39 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,10 +14,19 @@ const curr_game = useState<ActiveGame | null>('current_game', () => null);
 
 const showModal = ref(false);
 
+const intervalId = ref();
+
 onMounted(async () => {
   setLevelbar(70);
   await fetchUser();
   await fetchGames();
+  intervalId.value = await setInterval(() => {
+    fetchGames()
+  }, 15000); // 15 seconds
+});
+
+onBeforeUnmount(() => {
+  clearInterval(intervalId.value);
 });
 
 function setLevelbar(newValue: number) {

From 1f10297640a0efe57a0eaf5770147add99e6ccab Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 14:51:54 +0100
Subject: [PATCH 206/221] feat(game): Update /play UI

---
 components/game/PlaylistBox.vue       | 42 ++++++++++++
 components/game/ScoreboardUserBox.vue | 92 +++++++++++++++++++++++++++
 pages/play/index.vue                  | 23 +++++--
 server/api/v1/game/index.post.ts      | 21 ++++--
 4 files changed, 170 insertions(+), 8 deletions(-)
 create mode 100644 components/game/PlaylistBox.vue
 create mode 100644 components/game/ScoreboardUserBox.vue

diff --git a/components/game/PlaylistBox.vue b/components/game/PlaylistBox.vue
new file mode 100644
index 0000000..7ec37e6
--- /dev/null
+++ b/components/game/PlaylistBox.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ActiveGamePlaylist } from "@/types/api/game";
+
+const {playlist} = defineProps<{
+  playlist: ActiveGamePlaylist
+}>();
+</script>
+
+<template>
+  <div class="flex items-center gap-3">
+    <NuxtImg
+        :src="playlist.cover"
+        class="w-12 h-12 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl shrink-0 object-cover"
+        :alt="playlist.name"
+    />
+
+    <div class="overflow-hidden">
+      <p
+          class="font-semibold whitespace-nowrap text-sm"
+          :class="{ 'scrolling-text': playlist.name.length > 16 }"
+          :style="{ animationDuration: `${playlist.name.length / 7}s` }"
+      >
+        {{ playlist.name }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scrolling-text {
+  animation: scroll linear infinite;
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/game/ScoreboardUserBox.vue b/components/game/ScoreboardUserBox.vue
new file mode 100644
index 0000000..5094197
--- /dev/null
+++ b/components/game/ScoreboardUserBox.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { GetUserResponse } from "@/types/api/users";
+import type { Scoreboard } from "@/pages/play/index.vue";
+import { ref, watch } from 'vue';
+
+const {user,scoreboard} = defineProps<{
+  user: GetUserResponse,
+  scoreboard: Scoreboard,
+}>();
+
+const default_avatar = 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg';
+
+const score = ref(scoreboard.score);
+const isAnimating = ref(false);
+
+// Watch for changes in the scoreboard
+watch(() => scoreboard, (newVal, oldVal) => {
+  if (newVal.change !== oldVal?.change && newVal.change !== 0) {
+    isAnimating.value = true;
+    setTimeout(() => {
+      isAnimating.value = false;
+    }, 1000); // Animation duration
+  }
+  score.value = newVal.score;
+}, { deep: true });
+</script>
+
+<template>
+  <div class="flex flex-col items-center p-4">
+    <!-- User Avatar with Streak Badge -->
+    <div class="relative">
+      <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden">
+        <NuxtImg
+            :src="user.avatar_url || default_avatar"
+            :alt="user.username"
+            class="w-full h-full object-cover"
+        />
+      </div>
+
+      <!-- Streak Badge -->
+      <div
+          v-if="user.daily_streak"
+          class="absolute -bottom-1 -right-1 bg-black/50 backdrop-blur-sm rounded-full px-2 py-0.5 text-sm text-white flex items-center gap-1"
+      >
+        🔥
+        <span>{{ user.daily_streak }}</span>
+      </div>
+    </div>
+
+    <!-- Username -->
+    <div class="text-lg font-semibold mb-2 mt-2">{{ user.username }}</div>
+
+    <!-- Scoreboard -->
+    <div class="relative">
+      <div
+          class="text-2xl font-bold"
+          :class="{
+          'animate-bounce': isAnimating && scoreboard.change > 0,
+          'animate-shake': isAnimating && scoreboard.change < 0
+        }"
+      >
+        {{ score }}
+      </div>
+
+      <!-- Score Change Indicator -->
+      <div
+          v-if="scoreboard.change !== 0"
+          class="text-base absolute -right-6 transform transition-opacity duration-1000"
+          :class="{
+          'text-green-500': scoreboard.change > 0,
+          'text-red-500': scoreboard.change < 0,
+          'opacity-100': isAnimating,
+          'opacity-0': !isAnimating
+        }"
+      >
+        {{ scoreboard.change > 0 ? '+' : '' }}{{ scoreboard.change }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+.animate-shake {
+  animation: shake 0.5s ease-in-out;
+}
+</style>
\ No newline at end of file
diff --git a/pages/play/index.vue b/pages/play/index.vue
index d893659..49fe4d7 100644
--- a/pages/play/index.vue
+++ b/pages/play/index.vue
@@ -3,6 +3,7 @@
 import type {ActiveGame, ActiveGameRound, PlayGameResponse, Song} from "@/types/api/game";
 import GameSelectLayout from "@/layouts/Game/GameSelectLayout.vue";
 import type {GetPlaylistResponse} from "@/types/api/playlists";
+import ScoreboardUserBox from "@/components/game/ScoreboardUserBox.vue";
 
 export interface Scoreboard {
   score: number;
@@ -14,9 +15,20 @@ const game = useState<ActiveGame | null>('current_game', () => null);
 const round = computed<ActiveGameRound | null>(() => game.value ? game.value.rounds[roundIdx.value - 1] : null);
 const roundIdx = ref<number>(1); // current round number
 const scoreboard = useState<Scoreboard>('current_game_score', () => ({score: 0, change: 0}));
+const user = useSupabaseSession();
 
 const selectedPlaylist = useState<GetPlaylistResponse | null>('selected_playlist', () => null)
 
+const sortedPlayers = computed(() => {
+  if (!game || !game.value?.players) return [];
+
+  return [...game.value.players].sort((a, b) => {
+    if (a.id === user.value?.user.id) return -1;
+    if (b.id === user.value?.user.id) return 1;
+    return 0;
+  });
+});
+
 const error = useState<string | null>('game_error', () => null); // possible error message
 
 // Temporary variables
@@ -73,7 +85,7 @@ const playRound = () => {
   audio.value.load();
 
   // Wait for audio to load
-  audio.value.oncanplaythrough = async() => {
+  audio.value.oncanplaythrough = async () => {
     if (!audio.value) return;
     audio.value.play(); // start audio playback
     await nextTick();
@@ -182,9 +194,12 @@ const abortGame = () => {
   <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
     <GameSelectLayout>
       <template #scoreboard>
-        <div class="flex justify-center gap-4 p-4">
-          <span class="text-2xl font-semibold">Score: {{ scoreboard.score }}</span>
-          <span class="text-2xl font-semibold">Change: {{ scoreboard.change }}</span>
+        <div class="flex justify-center pt-[5%] pb-[5%]">
+            <GamePlaylistBox v-if="game" :playlist="game.playlist"/>
+        </div>
+
+        <div class="flex justify-around ">
+          <ScoreboardUserBox v-for="(player) in sortedPlayers" :key="player.id" :user="player" :scoreboard="scoreboard"/>
         </div>
       </template>
       <template #round-indicator>
diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
index fd20dfa..9399d09 100644
--- a/server/api/v1/game/index.post.ts
+++ b/server/api/v1/game/index.post.ts
@@ -155,6 +155,22 @@ export default defineEventHandler(async (event) => {
                 }))
         }));
 
+        // fetch player data
+        const {data: playerData, error: playerDataError}:{
+            data: GetUserResponse[] | null,
+            error: PostgrestError | null
+        } = await client.from('users').select().in('id', [user.id, opponent_id!]);
+
+        if (playerDataError) {
+            setResponseStatus(event, 500);
+            return {error: playerDataError.message};
+        }
+
+        if(!playerData || playerData?.length < 2) {
+            setResponseStatus(event, 500);
+            return {error: 'Failed to fetch player data'};
+        }
+
         const game: ActiveGame = {
             game_id: initData!.game_id,
             status: GameStatus.PLAYING,
@@ -164,10 +180,7 @@ export default defineEventHandler(async (event) => {
                 name: playlist.name,
                 cover: playlist.cover
             },
-            players: [
-                {id: user.id} as GetUserResponse,
-                {id: opponent_id!} as GetUserResponse
-            ], // TODO: Fetch opponent data and fix this
+            players: playerData,
             rounds: mappedGameRounds
         }
 

From d6e560148176b36a36898e41f82bca6f61281c51 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 15:11:22 +0100
Subject: [PATCH 207/221] feat(game): Update /end UI

---
 pages/play/end.vue | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/pages/play/end.vue b/pages/play/end.vue
index a87aa39..a344f4c 100644
--- a/pages/play/end.vue
+++ b/pages/play/end.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 
-import type {ActiveGame, ActiveGamePlaylist, Game} from "@/types/api/game";
+import type {ActiveGame, ActiveGamePlaylist, Game, GameStats} from "@/types/api/game";
 import type {Scoreboard} from "@/pages/play/index.vue";
 import FooterView from "@/layouts/FooterView.vue";
+import ScoreboardUserBox from "@/components/game/ScoreboardUserBox.vue";
 
 
 // composables
@@ -19,6 +20,14 @@ const stats = computed(() => game.value?.stats?.find(stat => stat.user_id === us
 const opStats = computed(() => game.value?.stats?.find(stat => stat.user_id !== user.value?.id));
 const playlist = computed<ActiveGamePlaylist | null>(() => game.value ? game.value.playlist : null);
 
+const statsMap = computed(() => {
+  if (!game.value) return {};
+  return game.value.stats?.reduce((acc, stat) => {
+    acc[stat.user_id] = stat;
+    return acc;
+  }, {} as Record<string,GameStats>);
+});
+
 const computeGame = (activeGame?: ActiveGame): Game | null => {
   if (!activeGame) return null;
   if (!games.value) return null;
@@ -54,14 +63,18 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="bg-gradient-to-b from-indigo-500 to-purple-500">
     <FooterView>
       <template #content>
-        <div class="h-full flex flex-col">
+        <div class="h-full flex flex-col ">
           <!-- Text content fixed at top -->
-          <div class="text-center p-20">
-            Lots of content..
-          </div>
+            <div class="flex justify-center pt-[5%] pb-[5%]">
+              <GamePlaylistBox v-if="playlist" :playlist="playlist"/>
+            </div>
+
+            <div class="flex justify-between ">
+              <ScoreboardUserBox v-for="(player) in game?.players" :key="player.id" :user="player" :scoreboard="{score: statsMap![player.id].score, change: 0}"/>
+            </div>
 
           <!-- Spacer to push game rounds to bottom -->
           <div class="flex-grow"></div>
@@ -77,7 +90,7 @@ onUnmounted(() => {
                 <div class="inline-flex flex-col">
                   <Icon v-if="stats!.guesses[idx].correct_guess" name="mdi:checkbox-marked" class="text-green-500 text-4xl"/>
                   <Icon v-else name="mdi:close-box" class="text-red-500 text-4xl"/>
-                  <div class="text-sm max-w-9 font-thin text-center" v-text="stats?.guesses[idx].time_to_guess + 's'"/>
+                  <div class="text-sm max-w-9 font-thin text-center" v-text="statsMap![user!.id]?.guesses[idx].time_to_guess + 's'"/>
                 </div>
                 <NuxtImg
                     :src="defaultImg"

From 074422a0ad7d427c059a42cb1a343dd21895ebe8 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 15:28:51 +0100
Subject: [PATCH 208/221] fix(game): remove wrong scoreboard while playing

---
 nuxt.config.ts       |  2 +-
 pages/play/index.vue | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0a6ab3f..74747be 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     compatibilityDate: '2024-04-03',
-    devtools: {enabled: true},
+    devtools: {enabled: false},
     modules: ['@nuxtjs/tailwindcss', '@nuxt/eslint', '@nuxtjs/supabase', '@nuxt/image', '@nuxt/icon'],
     supabase: {
         redirectOptions: {
diff --git a/pages/play/index.vue b/pages/play/index.vue
index 49fe4d7..c8510db 100644
--- a/pages/play/index.vue
+++ b/pages/play/index.vue
@@ -17,6 +17,16 @@ const roundIdx = ref<number>(1); // current round number
 const scoreboard = useState<Scoreboard>('current_game_score', () => ({score: 0, change: 0}));
 const user = useSupabaseSession();
 
+const scoreboardMap = computed<Map<string,Scoreboard>>(() => {
+  if (!game || !game.value?.players) return new Map();
+  const map = new Map<string,Scoreboard>();
+  game.value.players.forEach(player => {
+    if (player.id === user.value?.user.id) map.set(player.id, scoreboard.value);
+    else map.set(player.id, {score: 0, change: 0});
+  });
+  return map;
+})
+
 const selectedPlaylist = useState<GetPlaylistResponse | null>('selected_playlist', () => null)
 
 const sortedPlayers = computed(() => {
@@ -195,11 +205,11 @@ const abortGame = () => {
     <GameSelectLayout>
       <template #scoreboard>
         <div class="flex justify-center pt-[5%] pb-[5%]">
-            <GamePlaylistBox v-if="game" :playlist="game.playlist"/>
+          <GamePlaylistBox v-if="game" :playlist="game.playlist"/>
         </div>
 
         <div class="flex justify-around ">
-          <ScoreboardUserBox v-for="(player) in sortedPlayers" :key="player.id" :user="player" :scoreboard="scoreboard"/>
+          <ScoreboardUserBox v-for="(player) in sortedPlayers" :key="player.id" :user="player" :scoreboard="scoreboardMap.get(player.id)!"/>
         </div>
       </template>
       <template #round-indicator>

From 1d885d3aed7441e9abdb9de9bb07ec118bd8049c Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 14:51:54 +0100
Subject: [PATCH 209/221] feat(game): Update /play UI

---
 components/game/PlaylistBox.vue       | 42 ++++++++++++
 components/game/ScoreboardUserBox.vue | 92 +++++++++++++++++++++++++++
 pages/play/index.vue                  | 23 +++++--
 server/api/v1/game/index.post.ts      | 21 ++++--
 4 files changed, 170 insertions(+), 8 deletions(-)
 create mode 100644 components/game/PlaylistBox.vue
 create mode 100644 components/game/ScoreboardUserBox.vue

diff --git a/components/game/PlaylistBox.vue b/components/game/PlaylistBox.vue
new file mode 100644
index 0000000..7ec37e6
--- /dev/null
+++ b/components/game/PlaylistBox.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ActiveGamePlaylist } from "@/types/api/game";
+
+const {playlist} = defineProps<{
+  playlist: ActiveGamePlaylist
+}>();
+</script>
+
+<template>
+  <div class="flex items-center gap-3">
+    <NuxtImg
+        :src="playlist.cover"
+        class="w-12 h-12 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl shrink-0 object-cover"
+        :alt="playlist.name"
+    />
+
+    <div class="overflow-hidden">
+      <p
+          class="font-semibold whitespace-nowrap text-sm"
+          :class="{ 'scrolling-text': playlist.name.length > 16 }"
+          :style="{ animationDuration: `${playlist.name.length / 7}s` }"
+      >
+        {{ playlist.name }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scrolling-text {
+  animation: scroll linear infinite;
+}
+
+@keyframes scroll {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/game/ScoreboardUserBox.vue b/components/game/ScoreboardUserBox.vue
new file mode 100644
index 0000000..5094197
--- /dev/null
+++ b/components/game/ScoreboardUserBox.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { GetUserResponse } from "@/types/api/users";
+import type { Scoreboard } from "@/pages/play/index.vue";
+import { ref, watch } from 'vue';
+
+const {user,scoreboard} = defineProps<{
+  user: GetUserResponse,
+  scoreboard: Scoreboard,
+}>();
+
+const default_avatar = 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg';
+
+const score = ref(scoreboard.score);
+const isAnimating = ref(false);
+
+// Watch for changes in the scoreboard
+watch(() => scoreboard, (newVal, oldVal) => {
+  if (newVal.change !== oldVal?.change && newVal.change !== 0) {
+    isAnimating.value = true;
+    setTimeout(() => {
+      isAnimating.value = false;
+    }, 1000); // Animation duration
+  }
+  score.value = newVal.score;
+}, { deep: true });
+</script>
+
+<template>
+  <div class="flex flex-col items-center p-4">
+    <!-- User Avatar with Streak Badge -->
+    <div class="relative">
+      <div class="w-24 h-24 md:w-28 md:h-28 rounded-full overflow-hidden">
+        <NuxtImg
+            :src="user.avatar_url || default_avatar"
+            :alt="user.username"
+            class="w-full h-full object-cover"
+        />
+      </div>
+
+      <!-- Streak Badge -->
+      <div
+          v-if="user.daily_streak"
+          class="absolute -bottom-1 -right-1 bg-black/50 backdrop-blur-sm rounded-full px-2 py-0.5 text-sm text-white flex items-center gap-1"
+      >
+        🔥
+        <span>{{ user.daily_streak }}</span>
+      </div>
+    </div>
+
+    <!-- Username -->
+    <div class="text-lg font-semibold mb-2 mt-2">{{ user.username }}</div>
+
+    <!-- Scoreboard -->
+    <div class="relative">
+      <div
+          class="text-2xl font-bold"
+          :class="{
+          'animate-bounce': isAnimating && scoreboard.change > 0,
+          'animate-shake': isAnimating && scoreboard.change < 0
+        }"
+      >
+        {{ score }}
+      </div>
+
+      <!-- Score Change Indicator -->
+      <div
+          v-if="scoreboard.change !== 0"
+          class="text-base absolute -right-6 transform transition-opacity duration-1000"
+          :class="{
+          'text-green-500': scoreboard.change > 0,
+          'text-red-500': scoreboard.change < 0,
+          'opacity-100': isAnimating,
+          'opacity-0': !isAnimating
+        }"
+      >
+        {{ scoreboard.change > 0 ? '+' : '' }}{{ scoreboard.change }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+.animate-shake {
+  animation: shake 0.5s ease-in-out;
+}
+</style>
\ No newline at end of file
diff --git a/pages/play/index.vue b/pages/play/index.vue
index d893659..49fe4d7 100644
--- a/pages/play/index.vue
+++ b/pages/play/index.vue
@@ -3,6 +3,7 @@
 import type {ActiveGame, ActiveGameRound, PlayGameResponse, Song} from "@/types/api/game";
 import GameSelectLayout from "@/layouts/Game/GameSelectLayout.vue";
 import type {GetPlaylistResponse} from "@/types/api/playlists";
+import ScoreboardUserBox from "@/components/game/ScoreboardUserBox.vue";
 
 export interface Scoreboard {
   score: number;
@@ -14,9 +15,20 @@ const game = useState<ActiveGame | null>('current_game', () => null);
 const round = computed<ActiveGameRound | null>(() => game.value ? game.value.rounds[roundIdx.value - 1] : null);
 const roundIdx = ref<number>(1); // current round number
 const scoreboard = useState<Scoreboard>('current_game_score', () => ({score: 0, change: 0}));
+const user = useSupabaseSession();
 
 const selectedPlaylist = useState<GetPlaylistResponse | null>('selected_playlist', () => null)
 
+const sortedPlayers = computed(() => {
+  if (!game || !game.value?.players) return [];
+
+  return [...game.value.players].sort((a, b) => {
+    if (a.id === user.value?.user.id) return -1;
+    if (b.id === user.value?.user.id) return 1;
+    return 0;
+  });
+});
+
 const error = useState<string | null>('game_error', () => null); // possible error message
 
 // Temporary variables
@@ -73,7 +85,7 @@ const playRound = () => {
   audio.value.load();
 
   // Wait for audio to load
-  audio.value.oncanplaythrough = async() => {
+  audio.value.oncanplaythrough = async () => {
     if (!audio.value) return;
     audio.value.play(); // start audio playback
     await nextTick();
@@ -182,9 +194,12 @@ const abortGame = () => {
   <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
     <GameSelectLayout>
       <template #scoreboard>
-        <div class="flex justify-center gap-4 p-4">
-          <span class="text-2xl font-semibold">Score: {{ scoreboard.score }}</span>
-          <span class="text-2xl font-semibold">Change: {{ scoreboard.change }}</span>
+        <div class="flex justify-center pt-[5%] pb-[5%]">
+            <GamePlaylistBox v-if="game" :playlist="game.playlist"/>
+        </div>
+
+        <div class="flex justify-around ">
+          <ScoreboardUserBox v-for="(player) in sortedPlayers" :key="player.id" :user="player" :scoreboard="scoreboard"/>
         </div>
       </template>
       <template #round-indicator>
diff --git a/server/api/v1/game/index.post.ts b/server/api/v1/game/index.post.ts
index fd20dfa..9399d09 100644
--- a/server/api/v1/game/index.post.ts
+++ b/server/api/v1/game/index.post.ts
@@ -155,6 +155,22 @@ export default defineEventHandler(async (event) => {
                 }))
         }));
 
+        // fetch player data
+        const {data: playerData, error: playerDataError}:{
+            data: GetUserResponse[] | null,
+            error: PostgrestError | null
+        } = await client.from('users').select().in('id', [user.id, opponent_id!]);
+
+        if (playerDataError) {
+            setResponseStatus(event, 500);
+            return {error: playerDataError.message};
+        }
+
+        if(!playerData || playerData?.length < 2) {
+            setResponseStatus(event, 500);
+            return {error: 'Failed to fetch player data'};
+        }
+
         const game: ActiveGame = {
             game_id: initData!.game_id,
             status: GameStatus.PLAYING,
@@ -164,10 +180,7 @@ export default defineEventHandler(async (event) => {
                 name: playlist.name,
                 cover: playlist.cover
             },
-            players: [
-                {id: user.id} as GetUserResponse,
-                {id: opponent_id!} as GetUserResponse
-            ], // TODO: Fetch opponent data and fix this
+            players: playerData,
             rounds: mappedGameRounds
         }
 

From e980edf5b6ef50cd058c645ba74e039928761b1e Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 15:11:22 +0100
Subject: [PATCH 210/221] feat(game): Update /end UI

---
 pages/play/end.vue | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/pages/play/end.vue b/pages/play/end.vue
index a87aa39..a344f4c 100644
--- a/pages/play/end.vue
+++ b/pages/play/end.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 
-import type {ActiveGame, ActiveGamePlaylist, Game} from "@/types/api/game";
+import type {ActiveGame, ActiveGamePlaylist, Game, GameStats} from "@/types/api/game";
 import type {Scoreboard} from "@/pages/play/index.vue";
 import FooterView from "@/layouts/FooterView.vue";
+import ScoreboardUserBox from "@/components/game/ScoreboardUserBox.vue";
 
 
 // composables
@@ -19,6 +20,14 @@ const stats = computed(() => game.value?.stats?.find(stat => stat.user_id === us
 const opStats = computed(() => game.value?.stats?.find(stat => stat.user_id !== user.value?.id));
 const playlist = computed<ActiveGamePlaylist | null>(() => game.value ? game.value.playlist : null);
 
+const statsMap = computed(() => {
+  if (!game.value) return {};
+  return game.value.stats?.reduce((acc, stat) => {
+    acc[stat.user_id] = stat;
+    return acc;
+  }, {} as Record<string,GameStats>);
+});
+
 const computeGame = (activeGame?: ActiveGame): Game | null => {
   if (!activeGame) return null;
   if (!games.value) return null;
@@ -54,14 +63,18 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="bg-gradient-to-b from-indigo-500 to-purple-500">
     <FooterView>
       <template #content>
-        <div class="h-full flex flex-col">
+        <div class="h-full flex flex-col ">
           <!-- Text content fixed at top -->
-          <div class="text-center p-20">
-            Lots of content..
-          </div>
+            <div class="flex justify-center pt-[5%] pb-[5%]">
+              <GamePlaylistBox v-if="playlist" :playlist="playlist"/>
+            </div>
+
+            <div class="flex justify-between ">
+              <ScoreboardUserBox v-for="(player) in game?.players" :key="player.id" :user="player" :scoreboard="{score: statsMap![player.id].score, change: 0}"/>
+            </div>
 
           <!-- Spacer to push game rounds to bottom -->
           <div class="flex-grow"></div>
@@ -77,7 +90,7 @@ onUnmounted(() => {
                 <div class="inline-flex flex-col">
                   <Icon v-if="stats!.guesses[idx].correct_guess" name="mdi:checkbox-marked" class="text-green-500 text-4xl"/>
                   <Icon v-else name="mdi:close-box" class="text-red-500 text-4xl"/>
-                  <div class="text-sm max-w-9 font-thin text-center" v-text="stats?.guesses[idx].time_to_guess + 's'"/>
+                  <div class="text-sm max-w-9 font-thin text-center" v-text="statsMap![user!.id]?.guesses[idx].time_to_guess + 's'"/>
                 </div>
                 <NuxtImg
                     :src="defaultImg"

From b0cf5b5f62dcd3623f8a4abc3fe77a8b6458f2bf Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 15:28:51 +0100
Subject: [PATCH 211/221] fix(game): remove wrong scoreboard while playing

---
 nuxt.config.ts       |  2 +-
 pages/play/index.vue | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0a6ab3f..74747be 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
     compatibilityDate: '2024-04-03',
-    devtools: {enabled: true},
+    devtools: {enabled: false},
     modules: ['@nuxtjs/tailwindcss', '@nuxt/eslint', '@nuxtjs/supabase', '@nuxt/image', '@nuxt/icon'],
     supabase: {
         redirectOptions: {
diff --git a/pages/play/index.vue b/pages/play/index.vue
index 49fe4d7..c8510db 100644
--- a/pages/play/index.vue
+++ b/pages/play/index.vue
@@ -17,6 +17,16 @@ const roundIdx = ref<number>(1); // current round number
 const scoreboard = useState<Scoreboard>('current_game_score', () => ({score: 0, change: 0}));
 const user = useSupabaseSession();
 
+const scoreboardMap = computed<Map<string,Scoreboard>>(() => {
+  if (!game || !game.value?.players) return new Map();
+  const map = new Map<string,Scoreboard>();
+  game.value.players.forEach(player => {
+    if (player.id === user.value?.user.id) map.set(player.id, scoreboard.value);
+    else map.set(player.id, {score: 0, change: 0});
+  });
+  return map;
+})
+
 const selectedPlaylist = useState<GetPlaylistResponse | null>('selected_playlist', () => null)
 
 const sortedPlayers = computed(() => {
@@ -195,11 +205,11 @@ const abortGame = () => {
     <GameSelectLayout>
       <template #scoreboard>
         <div class="flex justify-center pt-[5%] pb-[5%]">
-            <GamePlaylistBox v-if="game" :playlist="game.playlist"/>
+          <GamePlaylistBox v-if="game" :playlist="game.playlist"/>
         </div>
 
         <div class="flex justify-around ">
-          <ScoreboardUserBox v-for="(player) in sortedPlayers" :key="player.id" :user="player" :scoreboard="scoreboard"/>
+          <ScoreboardUserBox v-for="(player) in sortedPlayers" :key="player.id" :user="player" :scoreboard="scoreboardMap.get(player.id)!"/>
         </div>
       </template>
       <template #round-indicator>

From 395a634094b222aa426dc167537993b6da6bbdf2 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 20 Dec 2024 22:30:50 +0100
Subject: [PATCH 212/221] feat(game): Add abort game logic

---
 pages/play/index.vue | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/pages/play/index.vue b/pages/play/index.vue
index c8510db..263a5ed 100644
--- a/pages/play/index.vue
+++ b/pages/play/index.vue
@@ -17,9 +17,9 @@ const roundIdx = ref<number>(1); // current round number
 const scoreboard = useState<Scoreboard>('current_game_score', () => ({score: 0, change: 0}));
 const user = useSupabaseSession();
 
-const scoreboardMap = computed<Map<string,Scoreboard>>(() => {
+const scoreboardMap = computed<Map<string, Scoreboard>>(() => {
   if (!game || !game.value?.players) return new Map();
-  const map = new Map<string,Scoreboard>();
+  const map = new Map<string, Scoreboard>();
   game.value.players.forEach(player => {
     if (player.id === user.value?.user.id) map.set(player.id, scoreboard.value);
     else map.set(player.id, {score: 0, change: 0});
@@ -65,8 +65,11 @@ onMounted(async () => {
   startGame();
 });
 
-onUnmounted(() => {
+onUnmounted(async () => {
   if (audio.value) audio.value.pause();
+
+  // send all required guesses so game is not stuck
+  await abortGame();
 });
 
 onBeforeMount(() => {
@@ -116,7 +119,7 @@ const selectOption = async (option: Song) => {
   if (!round.value) return;
   if (!option) {
     error.value = 'Unknown Error occurred: Option couldn\'t be handled';
-    abortGame();
+    await abortGame();
     return;
   }
 
@@ -144,7 +147,7 @@ const selectOption = async (option: Song) => {
   lastServerResponse.value = await serverResponse;
   if (!lastServerResponse.value) {
     error.value = 'Server didnt respond to guess';
-    abortGame();
+    await abortGame();
     return;
   }
 
@@ -187,7 +190,22 @@ const endGame = () => {
   navigateTo('/play/end');
 }
 
-const abortGame = () => {
+const abortGame = async () => {
+
+  for (const round of game.value?.rounds || []) {
+    if (roundIdx.value <= round.round) {
+      await $fetch<PlayGameResponse>(`/api/v1/game/${game.value!.game_id}/play`, {
+        method: 'POST',
+        body: {
+          "round": round.round,
+          "guess": 'wrong', // dummy guess
+          "time": 30,
+        }
+      });
+      console.log('Sent guess for round', round.round);
+    }
+  }
+
   game.value = null;
   roundIdx.value = 1;
   audio.value!.src = '';
@@ -209,7 +227,8 @@ const abortGame = () => {
         </div>
 
         <div class="flex justify-around ">
-          <ScoreboardUserBox v-for="(player) in sortedPlayers" :key="player.id" :user="player" :scoreboard="scoreboardMap.get(player.id)!"/>
+          <ScoreboardUserBox v-for="(player) in sortedPlayers" :key="player.id" :user="player"
+                             :scoreboard="scoreboardMap.get(player.id)!"/>
         </div>
       </template>
       <template #round-indicator>

From d1d3259764b721680bdd7f239b8284f2f7fa3fe2 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 21 Dec 2024 00:53:30 +0100
Subject: [PATCH 213/221] check if 8 songs are in a playlist

---
 composables/useSpotify.ts | 52 +++++++++++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 13 deletions(-)

diff --git a/composables/useSpotify.ts b/composables/useSpotify.ts
index e7e316f..7c640d2 100644
--- a/composables/useSpotify.ts
+++ b/composables/useSpotify.ts
@@ -94,19 +94,21 @@ export default function useSpotify(playlistId: string) {
 
             const data = await res.json();
 
-            console.log(data)
-
-            data.items.forEach(item => {
-                if (!userPlaylists.value.some(playlist => playlist.id === item.id)) {
-                    userPlaylists.value.push({ 
-                        id: item.id, 
-                        spotifyId: item.id, 
-                        cover: item.images[0].url, 
-                        enabled: true, 
-                        name: item.name
-                    } as Playlist);
+            for (const item of data.items) {
+                const itemCount = await getPlaylistItems(item.id);
+                if (itemCount >= 8) {
+                    const exists = userPlaylists.value.some(playlist => playlist.id === item.id);
+                    if (!exists) {
+                        userPlaylists.value.push({
+                            id: item.id,
+                            spotifyId: item.id,
+                            cover: item.images[0].url,
+                            enabled: true,
+                            name: item.name,
+                        } as Playlist);
+                    }
                 }
-            });
+            }
             
             return userPlaylists.value;
         } catch (error) {
@@ -115,11 +117,35 @@ export default function useSpotify(playlistId: string) {
         }
     }
 
+    async function getPlaylistItems(playlistId: string): Promise<number> {
+        try {
+            const res = await fetch(`https://api.spotify.com/v1/playlists/${ playlistId }/tracks`, {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${token.value}`,
+                },
+            });
+
+            if (!res.ok) {
+                console.error(`Error: ${res.status} - ${res.statusText}`);
+                return 0;
+            }
+
+            const data = await res.json();
+            
+            return data.items.length;
+        } catch (error) {
+            console.error('Failed to get playlists:', error);
+            return 0;
+        }
+    }
+
     return {
         playlistStatus,
         getPlaylistStatus,
         followPlaylist,
         unfollowPlaylist,
-        getUserPlaylists
+        getUserPlaylists,
+        getPlaylistItems
     };
 }

From 2b5a56887f4c54ee667dd94c2c01edebfa5373c4 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 21 Dec 2024 00:59:33 +0100
Subject: [PATCH 214/221] added periodic refresh for user playlists

---
 components/playlists/AddPlaylistsModal.vue        |  2 +-
 components/playlists/UserSpotifyPlaylistsView.vue | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/components/playlists/AddPlaylistsModal.vue b/components/playlists/AddPlaylistsModal.vue
index c6e7196..80aa3b2 100644
--- a/components/playlists/AddPlaylistsModal.vue
+++ b/components/playlists/AddPlaylistsModal.vue
@@ -14,7 +14,7 @@ const playlistError = ref('')
             <p class="text-3xl font-bold my-3">Your Playlists</p>
             <UserSpotifyPlaylistsView @refresh="emit('refresh')"/>
             <p v-if="playlistError" class="error-message">{{ playlistError }}</p>
-            <p class="px-8">If you can't see your playlist here, make sure to add it to your Spotify profile.</p>
+            <p class="px-8">If you can't see your playlist here, make sure to add it to your Spotify profile and has more than 8 songs.</p>
             <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white mx-auto block" @click="emit('close-modal')">Close</button>
         </div>
     </div>
diff --git a/components/playlists/UserSpotifyPlaylistsView.vue b/components/playlists/UserSpotifyPlaylistsView.vue
index 7887ef4..3afba80 100644
--- a/components/playlists/UserSpotifyPlaylistsView.vue
+++ b/components/playlists/UserSpotifyPlaylistsView.vue
@@ -6,9 +6,18 @@ const { getUserPlaylists } = useSpotify("");
 
 const userPlaylists = ref<Playlist[] | null>([]);
 
+const intervalId = ref();
+
 onMounted(async () => {
-    userPlaylists.value = await getUserPlaylists();;
-})
+    userPlaylists.value = await getUserPlaylists();
+    intervalId.value = await setInterval(() => {
+        getUserPlaylists();
+  }, 5000); // 5 seconds
+});
+
+onBeforeUnmount(() => {
+  clearInterval(intervalId.value);
+});
 
 const emit = defineEmits(['refresh']);
 

From 00929d95b779b18ae342bdae21d9313519811426 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 21 Dec 2024 12:01:37 +0100
Subject: [PATCH 215/221] fixed ESLint errors

---
 components/UsersView.vue                   | 4 ++--
 components/home/StartGameModal.vue         | 5 +++--
 components/home/Users/UserBox.vue          | 2 +-
 components/playlists/PlaylistContainer.vue | 5 +++--
 pages/play/end.vue                         | 4 ++--
 pages/play/index.vue                       | 5 +++--
 6 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index d535c6f..338752a 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -15,11 +15,11 @@ const props = defineProps({
   },
   onAction: {
     type: Function as PropType<() => void>,
-    required: false
+    default: () => {}
   },
   actionLabel: {
     type: String,
-    required: false
+    default: ""
   },
   startGame: {
     type: Boolean,
diff --git a/components/home/StartGameModal.vue b/components/home/StartGameModal.vue
index a267c70..33cf524 100644
--- a/components/home/StartGameModal.vue
+++ b/components/home/StartGameModal.vue
@@ -142,8 +142,9 @@ onMounted(async () => {
 
       <div v-else-if="currentView === 'playlists'">
         <p class="text-3xl font-bold pb-2 text-center">Choose your Playlist</p>
-        <PlaylistsPlaylistView :start-game="true" class="overflow-y-auto max-h-[60vh] mb-5"
-                               @chose-playlist="selectPlaylist"/>
+        <PlaylistsPlaylistView 
+          :start-game="true" class="overflow-y-auto max-h-[60vh] mb-5"
+          @chose-playlist="selectPlaylist"/>
       </div>
 
     </div>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 6e5909f..04d8552 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -34,7 +34,7 @@ const props = defineProps({
   },
   viewType: {
     type: Number,
-    required: false,
+    default: 0
   },
   startGame: {
     type: Boolean,
diff --git a/components/playlists/PlaylistContainer.vue b/components/playlists/PlaylistContainer.vue
index f85a3e2..55f1198 100644
--- a/components/playlists/PlaylistContainer.vue
+++ b/components/playlists/PlaylistContainer.vue
@@ -59,8 +59,9 @@ function handleChosePlaylist(playlist: GetPlaylistResponse) {
                 :playlist-id="item.spotifyId"
                 :name="item.name"
                 :start-game="props.startGame"
-                @chose-playlist="handleChosePlaylist(item)"
-                v-bind="item.cover ? { cover: item.cover.toString() } : {}" class="flex-grow-0 flex-shrink-0" />
+                class="flex-grow-0 flex-shrink-0"
+                v-bind="item.cover ? { cover: item.cover.toString() } : {}"
+                @chose-playlist="handleChosePlaylist(item)" />
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/play/end.vue b/pages/play/end.vue
index a344f4c..b194845 100644
--- a/pages/play/end.vue
+++ b/pages/play/end.vue
@@ -7,7 +7,7 @@ import ScoreboardUserBox from "@/components/game/ScoreboardUserBox.vue";
 
 
 // composables
-const {loading, error, games, fetchGames} = useGame();
+const {games, fetchGames} = useGame();
 const {user, fetchUser} = useUser()
 
 // states from parent
@@ -77,7 +77,7 @@ onUnmounted(() => {
             </div>
 
           <!-- Spacer to push game rounds to bottom -->
-          <div class="flex-grow"></div>
+          <div class="flex-grow" />
 
           <!-- Game rounds container aligned to bottom -->
           <div class="w-full pb-5">
diff --git a/pages/play/index.vue b/pages/play/index.vue
index 263a5ed..24d9d28 100644
--- a/pages/play/index.vue
+++ b/pages/play/index.vue
@@ -227,8 +227,9 @@ const abortGame = async () => {
         </div>
 
         <div class="flex justify-around ">
-          <ScoreboardUserBox v-for="(player) in sortedPlayers" :key="player.id" :user="player"
-                             :scoreboard="scoreboardMap.get(player.id)!"/>
+          <ScoreboardUserBox 
+            v-for="(player) in sortedPlayers" :key="player.id" :user="player"
+            :scoreboard="scoreboardMap.get(player.id)!"/>
         </div>
       </template>
       <template #round-indicator>

From b80cdbd43e11d22754258ba6066079c2b5c74cf1 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 21 Dec 2024 13:23:21 +0100
Subject: [PATCH 216/221] added covers to end screen

---
 composables/useSpotify.ts | 26 +++++++++++++++++++++++++-
 pages/play/end.vue        | 23 ++++++++++++++++++++---
 types/api/game.ts         |  1 +
 3 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/composables/useSpotify.ts b/composables/useSpotify.ts
index 7c640d2..902a13d 100644
--- a/composables/useSpotify.ts
+++ b/composables/useSpotify.ts
@@ -140,12 +140,36 @@ export default function useSpotify(playlistId: string) {
         }
     }
 
+    async function getTrackCover(trackId: string): Promise<string> {
+        try {
+            const res = await fetch(`https://api.spotify.com/v1/tracks/${trackId}`, {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${token.value}`,
+                },
+            });
+
+            if (!res.ok) {
+                console.error(`Error: ${res.status} - ${res.statusText}`);
+                return 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg';
+            }
+
+            const data = await res.json();
+           
+            return data.album.images[0].url;
+        } catch (error) {
+            console.error('Failed to get playlists:', error);
+            return 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg';;
+        }
+    }
+
     return {
         playlistStatus,
         getPlaylistStatus,
         followPlaylist,
         unfollowPlaylist,
         getUserPlaylists,
-        getPlaylistItems
+        getPlaylistItems,
+        getTrackCover
     };
 }
diff --git a/pages/play/end.vue b/pages/play/end.vue
index b194845..819684d 100644
--- a/pages/play/end.vue
+++ b/pages/play/end.vue
@@ -4,11 +4,13 @@ import type {ActiveGame, ActiveGamePlaylist, Game, GameStats} from "@/types/api/
 import type {Scoreboard} from "@/pages/play/index.vue";
 import FooterView from "@/layouts/FooterView.vue";
 import ScoreboardUserBox from "@/components/game/ScoreboardUserBox.vue";
+import useSpotify from '@/composables/useSpotify';
 
 
 // composables
 const {games, fetchGames} = useGame();
-const {user, fetchUser} = useUser()
+const {user, fetchUser} = useUser();
+const {getTrackCover} = useSpotify("");
 
 // states from parent
 const scoreboard = useState<Scoreboard>('current_game_score', () => ({score: 0, change: 0}));
@@ -42,12 +44,26 @@ const computeGame = (activeGame?: ActiveGame): Game | null => {
 
   if (!foundGame) return null;
 
+  const defaultCover = 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg';
+
+  foundGame.rounds.forEach(round => {
+    round.correct_song_cover = defaultCover;
+
+    getCover(round.correct_song.id).then(cover => {
+      round.correct_song_cover = cover;
+    }).catch(error => {
+      console.error('Failed to fetch cover:', error);
+    });
+  });
+
   return {
     ...foundGame
   }
 };
 
-const defaultImg = "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg"
+async function getCover(id: string) {
+  return await getTrackCover(id)
+}
 
 // Hooks
 onMounted(async () => {
@@ -93,7 +109,7 @@ onUnmounted(() => {
                   <div class="text-sm max-w-9 font-thin text-center" v-text="statsMap![user!.id]?.guesses[idx].time_to_guess + 's'"/>
                 </div>
                 <NuxtImg
-                    :src="defaultImg"
+                    :src="gameRound.correct_song_cover"
                     width="55" height="auto"
                 />
                 <div v-if="opStats?.guesses && opStats.guesses.length > 1" class="inline-flex flex-col">
@@ -108,6 +124,7 @@ onUnmounted(() => {
                 </div>
               </div>
               <div class="tracking-tight font-semibold mt-1 mb-2 text-sm">{{ gameRound.correct_song.name }}</div>
+              <div>{{ gameRound.round }}</div>
             </div>
           </div>
         </div>
diff --git a/types/api/game.ts b/types/api/game.ts
index f7b9f0d..e53707e 100644
--- a/types/api/game.ts
+++ b/types/api/game.ts
@@ -19,6 +19,7 @@ interface SongArtist {
 export interface GameRound {
     round: number;
     correct_song: Song;
+    correct_song_cover: string;
     wrong_songs: Song[];
 }
 

From 7204c9d26b4b770ba9ba394426c16cec6019062d Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 21 Dec 2024 13:37:11 +0100
Subject: [PATCH 217/221] added animation to start buttons

---
 components/home/Loader.vue | 43 ++++++++++++++++++++++++++++++++++++++
 pages/index.vue            |  5 +++++
 2 files changed, 48 insertions(+)
 create mode 100644 components/home/Loader.vue

diff --git a/components/home/Loader.vue b/components/home/Loader.vue
new file mode 100644
index 0000000..6f18e31
--- /dev/null
+++ b/components/home/Loader.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+
+</script>
+
+<template> 
+    <div class="fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black bg-opacity-85 z-50">
+        <div class="loader" />
+    </div>
+</template>
+
+<style scoped>
+.loader {
+    border: 16px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 16px solid #3498db;
+    width: 120px;
+    height: 120px;
+    -webkit-animation: spin 2s linear infinite;
+    /* Safari */
+    animation: spin 2s linear infinite;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index b298f39..c347e1a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -13,6 +13,7 @@ const {games, fetchGames} = useGame();
 const curr_game = useState<ActiveGame | null>('current_game', () => null);
 
 const showModal = ref(false);
+const showLoading = ref(false);
 
 const intervalId = ref();
 
@@ -37,6 +38,7 @@ function setLevelbar(newValue: number) {
 };
 
 const newGame = async (opponent_id?: string, playlist_id?: string) => {
+  showLoading.value = true;
   let gameType = undefined;
 
   if (!playlist_id && !opponent_id) {
@@ -56,6 +58,7 @@ const newGame = async (opponent_id?: string, playlist_id?: string) => {
     }
   });
 
+  showLoading.value = false;
   curr_game.value = data;
   navigateTo('/play');
 };
@@ -64,6 +67,8 @@ const newGame = async (opponent_id?: string, playlist_id?: string) => {
 <template>
   <div class="bg-gradient-to-b from-indigo-500 to-purple-500">
 
+    <HomeLoader v-show="showLoading"/>
+
     <RegistrationModal v-if="userError" :on-register="async ()=> { userError = null; await fetchUser(); }"/>
 
     <StartGameModal v-show="showModal" @close-modal="showModal = false" @friend-playlist-chosen="newGame"/>

From cda210af4d0917524b35beb6f60b37257cf0959e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 21 Dec 2024 13:45:22 +0100
Subject: [PATCH 218/221] removed localhost

---
 components/profile/UserModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index f314364..9ad073a 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -67,7 +67,7 @@ async function handleFriendship(action: FriendshipAction) {
 };
 
 async function getFriendInformation() {
-    return await $fetch<GetUserResponse>('http://localhost:3000/api/v1/user/' + props.friendId)
+    return await $fetch<GetUserResponse>('/api/v1/user/' + props.friendId)
 }
 
 </script>

From bfb3bdce23a81effca939c0ca34dbf4fc780c94b Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 22 Dec 2024 00:44:56 +0100
Subject: [PATCH 219/221] changed interval for refreshing playlists

---
 components/playlists/UserSpotifyPlaylistsView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/playlists/UserSpotifyPlaylistsView.vue b/components/playlists/UserSpotifyPlaylistsView.vue
index 3afba80..3f73eac 100644
--- a/components/playlists/UserSpotifyPlaylistsView.vue
+++ b/components/playlists/UserSpotifyPlaylistsView.vue
@@ -12,7 +12,7 @@ onMounted(async () => {
     userPlaylists.value = await getUserPlaylists();
     intervalId.value = await setInterval(() => {
         getUserPlaylists();
-  }, 5000); // 5 seconds
+  }, 10000); // 10 seconds
 });
 
 onBeforeUnmount(() => {

From 3c66019636766f1961c0074959a91abfb7af3608 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 22 Dec 2024 01:40:16 +0100
Subject: [PATCH 220/221] added totalgames

---
 components/profile/ProfileInformation.vue | 11 ++++++++---
 composables/useUser.ts                    | 20 +++++++++++++++++++-
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 47bde48..50a1159 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
 
 const session = useSupabaseSession()
-const { user, loading, error, fetchUser } = useUser()
+const { user, loading, error, fetchUser, fetchTotalGames } = useUser()
+const { fetchGames } = useGame()
+
+const totalGames = useState<string | null>('userTotalGames', () => null)
 
 onMounted(async () => {
   if (session.value) {
-    await fetchUser()
+    await fetchUser();
+    await fetchGames();
+    await fetchTotalGames();
   }
 })
 
@@ -33,7 +38,7 @@ const formatDate = (dateString: string) => {
 
       <div class="grid grid-cols-2 gap-2">
         <div class="bg-gray-200 h-8 rounded-3xl bg-yellow-500 px-2 flex items-center">
-          Games played
+          {{ totalGames }}
         </div>
         <div class="bg-gray-200 h-8 rounded-3xl bg-yellow-500 px-2 flex items-center">
           <Icon name="mdi:fire" class="text-2xl mr-2 text-red-600" />
diff --git a/composables/useUser.ts b/composables/useUser.ts
index 8fa5ef1..5a27f23 100644
--- a/composables/useUser.ts
+++ b/composables/useUser.ts
@@ -2,6 +2,8 @@ import type {GetUserResponse} from "@/types/api/users";
 
 export const useUser = () => {
     const user = useState<GetUserResponse | null>('user', () => null)
+    const totalGames = useState<number>('userTotalGames', () => 0)
+    const games = useState<string | null>('games', () => null)
     const loading = useState<boolean>('userLoading', () => false)
     const error = useState<string | null>('userError', () => null)
 
@@ -21,11 +23,27 @@ export const useUser = () => {
         }
     }
 
+    const fetchTotalGames = async () => {
+        try {
+            totalGames.value = 0;
+            games.value.past.forEach(item => {
+                if (item.players[0].id === user.value?.id || item.players[1].id === user.value?.id) {
+                    totalGames.value++;
+                }
+            });
+        } catch (err) {
+            error.value = 'An error occurred';
+            console.error('Error fetching user', err)
+        }
+    }
+
     return {
         user,
+        totalGames,
         loading,
         error,
-        fetchUser
+        fetchUser,
+        fetchTotalGames
     }
 }
 

From 2854b30c5c24225f0d5184c2c935cce9424cef43 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 22 Dec 2024 01:43:40 +0100
Subject: [PATCH 221/221] added icon

---
 components/profile/ProfileInformation.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 50a1159..3137f4b 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -38,7 +38,8 @@ const formatDate = (dateString: string) => {
 
       <div class="grid grid-cols-2 gap-2">
         <div class="bg-gray-200 h-8 rounded-3xl bg-yellow-500 px-2 flex items-center">
-          {{ totalGames }}
+          <Icon name="mdi:controller" class="text-2xl mr-2 text-red-600" />
+          {{ totalGames }} Games
         </div>
         <div class="bg-gray-200 h-8 rounded-3xl bg-yellow-500 px-2 flex items-center">
           <Icon name="mdi:fire" class="text-2xl mr-2 text-red-600" />