From be85a2f03e9dc3575286b6ffe637fa6c0af6c51a Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Tue, 12 Sep 2023 21:14:41 -0400
Subject: [PATCH] Status Update

I'm still alive!
---
 src/components/BaseButton.vue           |  5 +++--
 src/components/CardBoxGameStat.vue      |  2 +-
 src/components/Cards/CardBoxArcade.vue  |  2 +-
 src/components/Cards/CardBoxNews.vue    |  2 +-
 src/components/Menus/AsideMenuLayer.vue |  2 +-
 src/components/NavBar.vue               |  4 ++--
 src/components/NavBarItem.vue           |  4 ++--
 src/components/Tables/TableScores.vue   |  9 ++++++++-
 src/components/UserAvatar.vue           |  6 +++---
 src/constants/greetings.json            | 15 +++++++++++++++
 src/layouts/LayoutAuthenticated.vue     |  2 +-
 src/views/Auth/LoginView.vue            |  9 +++++++--
 src/views/Game/NetworkScores.vue        |  3 +++
 13 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 107f7b4..3ab96e1 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -94,10 +94,11 @@ const componentClass = computed(() => {
     "focus:outline-none",
     "transition-colors",
     "focus:ring",
-    "duration-150",
+    "duration-50",
     "border",
+    "hover:scale-[1.02] hover:shadow-xl",
     props.disabled ? "cursor-not-allowed" : "cursor-pointer",
-    props.roundedFull ? "rounded-full" : "rounded",
+    props.roundedFull ? "rounded-lg" : "rounded",
     getButtonColor(props.color, props.outline, !props.disabled, props.active),
   ];
 
diff --git a/src/components/CardBoxGameStat.vue b/src/components/CardBoxGameStat.vue
index 5bf17b9..b2fb308 100644
--- a/src/components/CardBoxGameStat.vue
+++ b/src/components/CardBoxGameStat.vue
@@ -62,7 +62,7 @@ const cardStyle = `
 
 <template>
   <button
-    class="flex rounded-2xl hover:outline outline-blue-500/50 hover:bg-slate-500 hover:dark:bg-slate-950 transition-all duration-50"
+    class="flex rounded-2xl hover:scale-[1.01] hover:shadow-xl hover:outline outline-blue-500/50 hover:bg-slate-500 hover:dark:bg-slate-950 transition-all duration-10"
     :style="cardStyle"
     @click="loadGamePage()"
   >
diff --git a/src/components/Cards/CardBoxArcade.vue b/src/components/Cards/CardBoxArcade.vue
index c065584..eb7bec4 100644
--- a/src/components/Cards/CardBoxArcade.vue
+++ b/src/components/Cards/CardBoxArcade.vue
@@ -35,7 +35,7 @@ const areaData = getArea(arcadeData.area);
   <button class="text-left h-full" @click="openArcadeView">
     <CardBox class="mb-2 h-full" :style="getCardStyle()" has-table>
       <div
-        class="outline outline-slate-800/75 hover:outline hover:outline-blue-500/50 hover:bg-slate-500 hover:dark:bg-slate-950/90 bg-white dark:bg-slate-900/90 rounded-xl p-4 h-full w-full transition-all duration-50"
+        class="outline outline-slate-800/75 hover:scale-[1.01] hover:shadow-xl hover:outline hover:outline-blue-500/50 hover:bg-slate-500 hover:dark:bg-slate-950/90 bg-white dark:bg-slate-900/90 rounded-xl p-4 h-full w-full transition-all duration-10"
       >
         <h1 class="text-xl font-bold">{{ arcadeData.name }}</h1>
         <p class="text-lg">
diff --git a/src/components/Cards/CardBoxNews.vue b/src/components/Cards/CardBoxNews.vue
index 0614214..4ddf8b0 100644
--- a/src/components/Cards/CardBoxNews.vue
+++ b/src/components/Cards/CardBoxNews.vue
@@ -47,7 +47,7 @@ function openNewsView() {
   <button class="text-left" @click="openNewsView">
     <CardBox class="mb-2" :style="getCardStyle(props.cover)" has-table>
       <div
-        class="outline outline-green-900/50 hover:outline hover:outline-blue-500/50 hover:bg-slate-500 hover:dark:bg-slate-950/90 bg-white dark:bg-slate-900/90 rounded-xl p-4 h-full w-full transition-all duration-50"
+        class="outline outline-green-900/50 hover:scale-[1.01] hover:shadow-xl hover:outline hover:outline-blue-500/50 hover:bg-slate-500 hover:dark:bg-slate-950/90 bg-white dark:bg-slate-900/90 rounded-xl p-4 h-full w-full transition-all duration-10"
       >
         <p class="text-sm font-bold">Unread</p>
         <p class="text-sm">{{ props.date }}</p>
diff --git a/src/components/Menus/AsideMenuLayer.vue b/src/components/Menus/AsideMenuLayer.vue
index 93ec0cd..cc37e50 100644
--- a/src/components/Menus/AsideMenuLayer.vue
+++ b/src/components/Menus/AsideMenuLayer.vue
@@ -40,7 +40,7 @@ const asideLgCloseClick = (event) => {
   >
     <div
       :class="styleStore.asideStyle"
-      class="rounded-r-2xl md:rounded-none flex-1 flex flex-col pt-2 overflow-hidden dark:bg-slate-900"
+      class="rounded-br-2xl md:rounded-none flex-1 flex flex-col pt-2 overflow-hidden dark:bg-slate-900"
     >
       <div class="dark:bg-slate-900 space-y-4 my-2 pb-4 border-b-2">
         <div class="flex items-center space-x-3 mx-2">
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index a477495..8523eb1 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -24,7 +24,7 @@ const isMenuNavBarActive = ref(false);
 
 <template>
   <nav
-    class="top-0 inset-x-0 fixed bg-gray-50 h-14 z-30 transition-position w-screen lg:w-auto dark:bg-slate-800"
+    class="top-0 inset-x-0 fixed bg-gray-50 h-14 z-30 transition-position w-screen lg:w-auto dark:bg-slate-900"
   >
     <div class="flex lg:items-stretch" :class="containerMaxW">
       <div class="flex flex-1 items-stretch h-14">
@@ -41,7 +41,7 @@ const isMenuNavBarActive = ref(false);
         </NavBarItemPlain>
       </div>
       <div
-        class="max-h-screen-menu overflow-y-auto lg:overflow-visible absolute w-screen top-14 left-0 bg-gray-50 shadow-lg lg:w-auto lg:flex lg:static lg:shadow-none dark:bg-slate-800"
+        class="max-h-screen-menu overflow-y-auto lg:overflow-visible absolute w-screen top-14 left-0 bg-gray-50 shadow-lg lg:w-auto lg:flex lg:static lg:shadow-none dark:bg-slate-900"
         :class="[isMenuNavBarActive ? 'block' : 'hidden']"
       >
         <NavBarMenuList :menu="menu" @menu-click="menuClick" />
diff --git a/src/components/NavBarItem.vue b/src/components/NavBarItem.vue
index 552a38f..29387f9 100644
--- a/src/components/NavBarItem.vue
+++ b/src/components/NavBarItem.vue
@@ -102,7 +102,7 @@ onBeforeUnmount(() => {
     <div
       class="flex items-center"
       :class="{
-        'bg-gray-100 dark:bg-slate-800 lg:bg-transparent lg:dark:bg-transparent p-3 lg:p-0':
+        'bg-gray-100 dark:bg-slate-900 lg:bg-transparent lg:dark:bg-transparent p-3 lg:p-0':
           item.menu,
       }"
     >
@@ -124,7 +124,7 @@ onBeforeUnmount(() => {
     </div>
     <div
       v-if="item.menu"
-      class="text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-lg lg:shadow-lg lg:dark:bg-slate-800 dark:border-slate-700"
+      class="text-sm border-b border-gray-100 lg:border lg:bg-white lg:absolute lg:top-full lg:left-0 lg:min-w-full lg:z-20 lg:rounded-lg lg:shadow-lg lg:dark:bg-slate-900 opacity-100 dark:border-slate-700"
       :class="{ 'lg:hidden': !isDropdownActive }"
     >
       <NavBarMenuList :menu="item.menu" @menu-click="menuClickDropdown" />
diff --git a/src/components/Tables/TableScores.vue b/src/components/Tables/TableScores.vue
index 05794bd..e1cf00b 100644
--- a/src/components/Tables/TableScores.vue
+++ b/src/components/Tables/TableScores.vue
@@ -41,7 +41,14 @@ const currentPage = reactive(0);
         :key="score.id"
         class="border-b-[12px] lg:border-b-0"
       >
-        <td v-if="!isPersonal" data-label="Player">{{ score.player }}</td>
+        <td v-if="!isPersonal" data-label="Player">
+          <a
+            class="grid grid-cols-1 hover:underline decoration-blue-700"
+            :href="`/#/games/${game}/profiles/${score.playerId}`"
+          >
+            {{ score.player }}
+          </a>
+        </td>
 
         <td data-label="Timestamp">{{ score.timestamp }}</td>
 
diff --git a/src/components/UserAvatar.vue b/src/components/UserAvatar.vue
index b0694ad..f380776 100644
--- a/src/components/UserAvatar.vue
+++ b/src/components/UserAvatar.vue
@@ -28,10 +28,10 @@ const username = computed(() => props.username);
         class="w-full h-auto bg-gray-100 dark:bg-slate-800 rounded-full overflow-hidden"
       />
       <img
-        src="/assets/border/trans.png"
+        src="/assets/border/pride.png"
         alt="border"
-        class="absolute inset-0 w-full h-full overflow-hidden"
-        style="object-fit: fill; transform: scale(1.02)"
+        class="absolute inset-0 w-full h-full overflow-hidden scale-[1.02]"
+        style="object-fit: fill"
       />
     </div>
     <slot />
diff --git a/src/constants/greetings.json b/src/constants/greetings.json
index ef5735a..5d02daf 100644
--- a/src/constants/greetings.json
+++ b/src/constants/greetings.json
@@ -133,5 +133,20 @@
         "author": "sierrathebluejay",
         "header": "Wild <username> appeared!",
         "comment": "They're super effective!"
+    },
+    {
+        "author": "48productions",
+        "header": "Showers are sexy, <username>",
+        "comment": "Take one today."
+    },
+    {
+        "author": "48productions",
+        "header": "Have some fun with Miku, <username>!",
+        "comment": ""
+    },
+    {
+        "author": "Trmazi",
+        "header": "<username> is the DJ of this gig!",
+        "comment": "Are you good, or are you cool?"
     }
 ]
\ No newline at end of file
diff --git a/src/layouts/LayoutAuthenticated.vue b/src/layouts/LayoutAuthenticated.vue
index f24fa05..a566aa0 100644
--- a/src/layouts/LayoutAuthenticated.vue
+++ b/src/layouts/LayoutAuthenticated.vue
@@ -53,7 +53,7 @@ const menuClick = (event, item) => {
     <LoadingModal :active="false" is-save />
     <div
       :class="[layoutAsidePadding, { 'ml-60 lg:ml-0': isAsideMobileExpanded }]"
-      class="pt-14 min-h-screen w-screen lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100"
+      class="pt-14 min-h-screen w-screen lg:w-auto bg-gradient-to-b from-slate-900 from-5% via-slate-800 via-10% to-slate-800 to-85% dark:text-slate-100"
     >
       <NavBar
         :menu="menuNavBar"
diff --git a/src/views/Auth/LoginView.vue b/src/views/Auth/LoginView.vue
index 65009da..0f7c25b 100644
--- a/src/views/Auth/LoginView.vue
+++ b/src/views/Auth/LoginView.vue
@@ -13,6 +13,7 @@ const form = reactive({
   login: "john.doe",
   pass: "highly-secure-password-fYjUw-",
   remember: true,
+  spinin: false,
 });
 
 const router = useRouter();
@@ -27,6 +28,7 @@ const submit = () => {
     <div class="flex md:min-h-screen md:items-center md:justify-center">
       <CardBox
         class="w-full md:w-auto rounded-none md:rounded-xl md:drop-shadow-xl"
+        :class="form.spinin ? 'animate-spin' : 'animate-none'"
         has-table
         is-auth
       >
@@ -36,9 +38,12 @@ const submit = () => {
           <div class="flex flex-col items-center text-wrap h-full md:mt-5">
             <img src="/favicon.png" class="rounded-full shadow-lg mb-2" />
             <h1 class="text-xl"><samp>PhaseII</samp></h1>
-            <p class="text-sm text-gray-700 dark:text-white/75">
+            <button
+              class="text-sm text-gray-700 dark:text-white/75"
+              @click="form.spinin = !form.spinin"
+            >
               Spinnin' since 2021
-            </p>
+            </button>
             <hr class="border-r-1 my-1 w-full" />
             <p class="text-lg relative bottom-0">Please log in.</p>
           </div>
diff --git a/src/views/Game/NetworkScores.vue b/src/views/Game/NetworkScores.vue
index 5b3049c..a52fe3e 100644
--- a/src/views/Game/NetworkScores.vue
+++ b/src/views/Game/NetworkScores.vue
@@ -30,6 +30,7 @@ const scores = [
   {
     id: 1,
     player: "TRMAZI",
+    playerId: 1,
     timestamp: "2023.05.30 12:00:39 AM",
     isHighScore: false,
     song: {
@@ -50,6 +51,7 @@ const scores = [
   {
     id: 1,
     player: "BARRU",
+    playerId: 2,
     timestamp: "2023.05.30 12:00:39 AM",
     isHighScore: false,
     song: {
@@ -70,6 +72,7 @@ const scores = [
   {
     id: 1,
     player: "HO",
+    playerId: 3,
     timestamp: "2023.05.30 12:00:39 AM",
     isHighScore: false,
     song: {