chore: all forms reworked (#240)

* chore: feed * chore: all forms reworked * chore: a href fixes
chat-game · Aug 29, 2024 · 79f4745 · 79f4745
1 parent bd83405
commit 79f4745
Show file tree

Hide file tree

Showing 21 changed files with 554 additions and 143 deletions.
diff --git a/apps/website/app/app.vue b/apps/website/app/app.vue
@@ -1,10 +1,39 @@
 <template>
-  <ActiveStreamBanner />
-  <MainHeader />
-  <main>
-    <nuxt-page />
-  </main>
-  <MainFooter />
+  <div class="app" :class="{ overflow: !isFeedOpened }">
+    <div class="content">
+      <ActiveStreamBanner />
+      <MainHeader />
+      <main>
+        <nuxt-page />
+      </main>
+      <MainFooter />
+    </div>
+
+    <MainFeed v-if="loggedIn" />
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { isFeedOpened } = useApp()
+const { loggedIn } = useUserSession()
+</script>
+
+<style scoped>
+  .app {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    min-height: 100vh;
+
+    &.overflow {
+      overflow: hidden;
+    }
+
+    .content {
+      position: relative;
+      flex-grow: 1;
+      flex-basis: 0;
+      width: 80vw;
+    }
+  }
+</style>
diff --git a/apps/website/app/components/MainFeed.vue b/apps/website/app/components/MainFeed.vue
@@ -0,0 +1,184 @@
+<template>
+  <aside :class="{ opened: isFeedOpened }">
+    <div class="inner-block">
+      <div class="top-block">
+        <div class="profile-block">
+          <a :href="localePath(`/p/${profile?.userName}`)" class="name">
+            {{ profile?.userName }}
+          </a>
+
+          <div class="currency-block">
+            <div v-if="profile && profile?.mana > 0" class="currency">
+              <div class="counter">
+                {{ profile.mana }}
+              </div>
+              <img src="~/assets/img/icons/mana/64.png" alt="" width="36" height="36">
+            </div>
+
+            <div v-if="profile && profile?.coins > 0" class="currency">
+              <div class="counter">
+                {{ profile.coins }}
+              </div>
+              <img src="~/assets/img/icons/coin/64.png" alt="" width="36" height="36">
+            </div>
+
+            <div v-if="profile && profile?.coupons > 0" class="currency">
+              <div class="counter">
+                {{ profile.coupons }}
+              </div>
+              <img src="~/assets/img/icons/coupon/64.png" alt="" width="36" height="36">
+            </div>
+          </div>
+          <button class="sign-out" @click="clear">
+            Выйти
+          </button>
+        </div>
+
+        <button class="close" @click="() => isFeedOpened = false">
+          <X :size="38" />
+        </button>
+      </div>
+
+      <div class="feed">
+        <div class="block-title">
+          Последние события
+        </div>
+
+        <TransactionBlock v-for="transaction in transactions" :key="transaction.id" :transaction="transaction" />
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { X } from 'lucide-vue-next'
+
+const { isFeedOpened } = useApp()
+const localePath = useLocalePath()
+const { user, clear } = useUserSession()
+const { data: profile } = await useFetch(`/api/profile/userName/${user.value?.userName}`)
+const { data: transactions } = await useFetch('/api/transaction')
+</script>
+
+<style scoped>
+  aside {
+    background-color: var(--orange-1);
+    position: relative;
+    width: 0;
+    visibility: hidden;
+    display: block;
+    transition: 0.2s all;
+
+    &.opened {
+      visibility: visible;
+      width: 24em;
+      border-left: 0.15em solid var(--brown-4);
+    }
+
+    @media (max-width: 1024px) {
+      & {
+        display: none;
+      }
+    }
+
+    .inner-block {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5em;
+
+      .top-block {
+        position: sticky;
+        top: 0;
+        padding: 1em 1em;
+        display: flex;
+        flex-direction: row;
+        align-items: start;
+        gap: 0.5em;
+        background-color: var(--orange-1);
+
+        .close {
+          transition: 0.2s all;
+          color: var(--brown-9);
+
+          &:hover {
+            scale: 1.2;
+            color: var(--brown-8);
+          }
+        }
+
+        .profile-block {
+          background-color: var(--brown-3);
+          color: var(--brown-11);
+          flex-grow: 1;
+          padding: 0.5em 0.75em;
+          border-radius: 0.5em;
+          border-left: 0.15em solid var(--brown-5);
+          border-bottom: 0.15em solid var(--brown-5);
+
+          .name {
+            width: 100%;
+            display: block;
+            color: inherit;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 1.3rem;
+            margin-bottom: 0.25em;
+            transition: 0.2s all;
+
+            &:hover {
+              text-decoration: none;
+              color: var(--green-9);
+            }
+          }
+
+          .sign-out {
+            font-weight: 600;
+            transition: 0.2s all;
+
+            &:hover {
+              color: var(--green-9);
+            }
+          }
+
+          .currency-block {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-items: center;
+            gap: 0.5em;
+            margin-bottom: 0.75em;
+
+            .currency {
+              position: relative;
+              display: inline-block;
+
+              & .counter {
+                position: absolute;
+                bottom: -4px;
+                left: 50%;
+                transform: translateX(-50%);
+                color: var(--brown-2);
+                font-weight: 700;
+                font-size: 0.8rem;
+                background: var(--brown-10);
+                padding: 0 0.4em;
+                border-radius: 6px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .block-title {
+    color: var(--brown-10);
+  }
+
+  .feed {
+    padding: 0 1em 1em;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+  }
+</style>
diff --git a/apps/website/app/components/MainLogo.vue b/apps/website/app/components/MainLogo.vue
@@ -1,6 +1,6 @@
 <template>
   <ClientOnly>
-    <div v-if="$route.path === '/'" class="logo" :style="{ backgroundImage: randomCharUrl }" />
+    <div v-if="$route.path === localePath('/')" class="logo" :style="{ backgroundImage: randomCharUrl }" />
     <NuxtLink v-else :to="localePath('/')">
       <div class="logo shake" :style="{ backgroundImage: randomCharUrl }" />
     </NuxtLink>

diff --git a/apps/website/app/components/MenuProfile.vue b/apps/website/app/components/MenuProfile.vue
@@ -13,11 +13,10 @@
 
 <script setup lang="ts">
 const { isFeedOpened } = useApp()
-const { loggedIn, user, clear } = useUserSession()
+const { loggedIn, user } = useUserSession()
 
 function handleMenuClick() {
   isFeedOpened.value = !isFeedOpened.value
-  clear()
 }
 </script>
 
@@ -51,7 +50,14 @@ function handleMenuClick() {
   transition: all 0.2s;
 
   &:hover {
-    opacity: 0.8;
+    animation-name: skewRandom;
+    animation-duration: 0.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+    animation-direction: alternate-reverse;
+    transform-origin: 50% 50%;
+    scale: 1.1;
+    opacity: 0.9;
   }
 
   img {
@@ -60,4 +66,19 @@ function handleMenuClick() {
     border-radius: 50%;
   }
 }
+
+@keyframes skewRandom {
+  0% {
+    transform: skewX(0);
+  }
+  50% {
+    transform: skewX(-3deg);
+  }
+  75% {
+    transform: skewX(3deg);
+  }
+  100% {
+    transform: skewX(0);
+  }
+}
 </style>
diff --git a/apps/website/app/components/TransactionBlock.vue b/apps/website/app/components/TransactionBlock.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="item">
+    <div class="name">
+      <NuxtLink :to="localePath(`/p/${transaction.profile.userName}`)">
+        {{ transaction.profile.userName }}
+      </NuxtLink>
+    </div>
+    <div class="type">
+      {{ formatType(transaction.type, transaction.amount) }}
+    </div>
+
+    <time>{{ useLocaleTimeAgo(new Date(transaction.createdAt)) }}</time>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TransactionWithProfile } from '@chat-game/types'
+
+defineProps<{
+  transaction: TransactionWithProfile
+}>()
+const localePath = useLocalePath()
+
+function formatType(type: TransactionWithProfile['type'], amount: number) {
+  switch (type) {
+    case 'COIN_FROM_LVL_UP':
+      return 'Получил(а) +1 Монету за новый уровень Персонажа'
+    case 'CHARACTER_UNLOCK':
+      return 'Разблокировал(а) нового Персонажа'
+    case 'COINS_FROM_COUPON':
+      return 'Получил(а) 2 монеты за Купон'
+    case 'POINTS_FROM_LEVEL_UP':
+      return 'Получил(а) 5 очков "Коллекционера" за новый уровень Персонажа'
+    case 'POINTS_FROM_CHARACTER_UNLOCK':
+      return `Получил(а) ${amount} очков "Коллекционера" за разблокировку Персонажа`
+  }
+}
+</script>
+
+<style scoped>
+  .item {
+    padding: 0.5em;
+    background-color: var(--brown-2);
+    color: var(--brown-11);
+    border-radius: 0.5em;
+    border: 0.15em solid var(--brown-4);
+
+    .name {
+      font-size: 1.1rem;
+      font-weight: 600;
+      margin-bottom: 0.15em;
+
+      a {
+        color: var(--brown-11);
+        transition: 0.2s all;
+
+        &:hover {
+          color: var(--green-9);
+          text-decoration: none;
+        }
+      }
+    }
+
+    .type {
+      font-size: 0.8rem;
+      margin-bottom: 0.25em;
+    }
+
+    time {
+      font-size: 0.8rem;
+      color: var(--brown-9)
+    }
+  }
+</style>