Merge branch 'feat/profile-view' into feat/friend-system

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>
+

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">
+        <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>

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" :user-turn="true"/>
+            <HomeUsersUserBox name="test2" :user-turn="true"/>
+            <HomeUsersUserBox name="test3" :user-turn="true"/>
+        </div>
+    </div>
+</template>

components/home/Users/UserBox.vue

@@ -0,0 +1,26 @@
+<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 :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-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>

components/profile/Friendlist.vue

@@ -0,0 +1,41 @@
+<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" :name="item.friend_id" :user-turn="false"
+                class="shrink-0 w-[calc(33.33%-1rem)]" />
+        </div>
+
+
+    </div>
+</template>

components/profile/ProfileInformation.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+</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>
+        </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>

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>

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>

layouts/HeaderFooterView.vue

@@ -0,0 +1,35 @@
+<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">
+
+      <!-- Header -->
+      <div class="basis-24 border rounded-b-3xl">
+        <div class="flex justify-around items-center h-full">
+          <slot name="header"/>
+        </div>
+      </div>
+
+      <!-- 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>

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">
 
     <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>

layouts/default.vue

@@ -1,5 +1,7 @@
 <template>
-  <div>
-    <slot/>
+  <div class="flex justify-center">
+    <div class="w-screen">
+      <slot/>
+    </div>
   </div>
 </template>

pages/index.vue

@@ -1,15 +1,34 @@
 <script setup lang="ts">
+import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
 
-useSeoMeta({
-  title: "BeatBuzzer",
-  description: "A fun music quiz game"
-})
-
-const session = useSupabaseSession()
 </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">
+    <HeaderFooterView>
+      <template #header>
+        <div>
+          1A
+        </div>
+        <div>
+          2B
+        </div>
+        <div>
+          3C
+        </div>
+      </template>
+      <template #content>
+        <div class="flex flex-col h-full p-3">
+          <HomeTurnsUser/>
+          <HomeTurnsOpponent/>
+          <HomeControlsGameButtons/>
+        </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>

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>

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>

types/api/user.friends.ts

@@ -1,6 +1,5 @@
 // ----- Internal Types -----
 import type * as url from "node:url";
-
 export interface FriendError {
     message: string
 }