Status Update

I'm still alive!

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),
   ];
 

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

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

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>

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

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

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

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>
 

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

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?"
     }
 ]

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"

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>

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: {