From 5229ad12c969169be752bfdd2ef341cd2d52fa6e Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Mon, 1 Jul 2024 15:36:22 +0200
Subject: [PATCH] feat: new profile level system (#189)

* chore: more localizations

* feat: new profile level system

* chore: coupons counter on profile page
---
 package.json                                  |   2 +-
 src/lib/components/Footer.svelte              |   9 +-
 src/lib/components/Locale.svelte              |   1 -
 src/lib/components/Profile.svelte             |  11 +-
 src/lib/styles/styles.css                     |  16 ++-
 src/lib/translations/en.ts                    |  12 +-
 src/lib/translations/ru.ts                    |  12 +-
 .../[lang]/(website)/coupon/+page.svelte      |  24 +---
 .../(website)/p/[userName]/+page.server.ts    |   2 +-
 .../(website)/p/[userName]/+page.svelte       | 125 +++++++++++++++++-
 yarn.lock                                     |   8 +-
 11 files changed, 178 insertions(+), 44 deletions(-)

diff --git a/package.json b/package.json
index fc43f0b5..b0cda40b 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@hmbanan666/chat-game-api": "^0.1.10",
+    "@hmbanan666/chat-game-api": "^0.1.11",
     "@paralleldrive/cuid2": "^2.2.2",
     "@radix-ui/colors": "^3.0.0",
     "@twurple/api": "^7.1.0",
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 41dba172..b890c7cf 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,11 +1,14 @@
 <script>
   import { config } from '$lib/config'
+  import { page } from '$app/stores'
+
+  const t = $page.data.t
 </script>
 
 <footer>
   <ul>
     <li>
-      <a href={config.githubRepoUrl} target='_blank'>Код на GitHub</a>
+      <a href={config.githubRepoUrl} target='_blank'>{t.footer.github}</a>
     </li>
     <li>
       <a href={config.discordServerInviteUrl} target='_blank'>Discord</a>
@@ -14,11 +17,11 @@
       <a href={config.twitch.url} target='_blank'>Twitch</a>
     </li>
     <li>
-      <a href={config.donateUrl} target='_blank'>Донат</a>
+      <a href={config.donateUrl} target='_blank'>{t.footer.donate}</a>
     </li>
   </ul>
 
-  <p>Создается с трепетом и ❤️</p>
+  <p>{t.footer.text}</p>
 </footer>
 
 <style>
diff --git a/src/lib/components/Locale.svelte b/src/lib/components/Locale.svelte
index 0c5dc776..b2e1031a 100644
--- a/src/lib/components/Locale.svelte
+++ b/src/lib/components/Locale.svelte
@@ -52,7 +52,6 @@
 
   .select-lang {
     padding: 0.25em 0.35em 0.25em 0.25em;
-    background-color: var(--color-background-2);
     display: flex;
     flex-direction: row;
     align-items: center;
diff --git a/src/lib/components/Profile.svelte b/src/lib/components/Profile.svelte
index 1f9946b8..f13ac03c 100644
--- a/src/lib/components/Profile.svelte
+++ b/src/lib/components/Profile.svelte
@@ -3,6 +3,8 @@
   import twitchIcon from '$lib/assets/website/icons/twitch/112.png'
   import { config } from '$lib/config'
 
+  const t = $page.data.t
+
   const url = new URL('https://id.twitch.tv/oauth2/authorize')
   url.searchParams.set('client_id', config.twitch.clientId)
   url.searchParams.set('redirect_uri', config.signInRedirectUrl)
@@ -42,9 +44,9 @@
     </button>
     {#if menuOpened}
       <div class='dropdown-menu position-left'>
-        <a href='/{$page.data.locale}/p/{$page.data.profile.userName}'>Профиль</a>
-        <a href='/{$page.data.locale}/play'>Играть</a>
-        <button onclick={handleSignOut}>Выйти</button>
+        <a href='/{$page.data.locale}/p/{$page.data.profile.userName}'>{t.profile.link}</a>
+        <a href='/{$page.data.locale}/play'>{t.profile.play}</a>
+        <button onclick={handleSignOut}>{t.profile.signOut}</button>
       </div>
     {/if}
   {:else}
@@ -77,8 +79,7 @@
         padding: 4px;
         width: 58px;
         height: 58px;
-        background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
-        border: 2px solid var(--color-border);
+        background-color: var(--color-background-2);
         transition: all 0.2s;
     }
 
diff --git a/src/lib/styles/styles.css b/src/lib/styles/styles.css
index 9e96ca2e..9dd7a419 100644
--- a/src/lib/styles/styles.css
+++ b/src/lib/styles/styles.css
@@ -10,7 +10,7 @@
     --color-border-2: #E1DCCF;
     --color-bg-accent-1: #56468B;
     --color-bg-accent-2: #6F5F58;
-    --color-common: #FFF7ED;
+    --color-common: #BBBBBB;
     --color-uncommon: #33B074;
     --color-rare: #0090FF;
     --color-epic: #7D66D9;
@@ -129,6 +129,12 @@ button:focus:not(:focus-visible) {
 }
 
 .dropdown-menu {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25em;
+    width: max-content;
+    max-width: 320px;
     position: absolute;
     bottom: -0.25em;
     transform: translateY(100%);
@@ -136,15 +142,15 @@ button:focus:not(:focus-visible) {
     background-color: var(--color-background-2);
   }
 
-  .dropdown-menu button:not(:last-child), .dropdown-menu a:not(:last-child) {
-    margin-bottom: 0.25em;
-  }
-
   .dropdown-menu a {
     color: inherit;
     text-decoration: none;
   }
 
+  .dropdown-menu button {
+    text-align: left;
+  }
+
   .dropdown-menu button:hover, .dropdown-menu a:hover {
     color: var(--color-accent-1);
   }
diff --git a/src/lib/translations/en.ts b/src/lib/translations/en.ts
index 87ee78d8..c3a9d568 100644
--- a/src/lib/translations/en.ts
+++ b/src/lib/translations/en.ts
@@ -2,7 +2,11 @@ export type Dictionary = typeof en
 
 export const en = {
   about: undefined,
-  character: undefined,
+  profile: {
+    link: 'My profile',
+    play: 'Play',
+    signOut: 'Sign out',
+  },
   error: {
     404: 'Page not found.',
     500: 'Server internal error.',
@@ -17,5 +21,9 @@ export const en = {
       coupon: 'Coupon',
     },
   },
-  home: undefined,
+  footer: {
+    text: 'Created with thrill and ❤️',
+    github: 'Source on GitHub',
+    donate: 'Donate',
+  },
 }
diff --git a/src/lib/translations/ru.ts b/src/lib/translations/ru.ts
index 857419dc..92c4cee1 100644
--- a/src/lib/translations/ru.ts
+++ b/src/lib/translations/ru.ts
@@ -2,7 +2,11 @@ import type { Dictionary } from '$lib/translations/en'
 
 export const ru = {
   about: undefined,
-  character: undefined,
+  profile: {
+    link: 'Мой профиль',
+    play: 'Играть',
+    signOut: 'Выйти',
+  },
   error: {
     404: 'Страница не найдена.',
     500: 'Произошла ошибка на сервере.',
@@ -17,5 +21,9 @@ export const ru = {
       coupon: 'Купон',
     },
   },
-  home: undefined,
+  footer: {
+    text: 'Создается с трепетом и ❤️',
+    github: 'Код на GitHub',
+    donate: 'Донат',
+  },
 } satisfies Dictionary
diff --git a/src/routes/[lang]/(website)/coupon/+page.svelte b/src/routes/[lang]/(website)/coupon/+page.svelte
index eeb64266..e57c536b 100644
--- a/src/routes/[lang]/(website)/coupon/+page.svelte
+++ b/src/routes/[lang]/(website)/coupon/+page.svelte
@@ -5,6 +5,7 @@
   import couponSmall from '$lib/assets/website/coupon-64.png'
   import unit from '$lib/assets/website/unit-64.png'
   import { config } from '$lib/config'
+  import { page } from '$app/stores'
 
   export let data
 
@@ -19,9 +20,7 @@
 </svelte:head>
 
 <section class='hero'>
-  <h1>
-    Купон
-  </h1>
+  <h1>Купон</h1>
   <h2>Уже встречался <a href={config.twitch.url} target='_blank'>на стриме?</a></h2>
 
   <img src={couponHuge} alt='banana coupon' class='mt-4' />
@@ -29,7 +28,7 @@
 
 <section class='latest-coupons'>
   <h2 class='title'>Последние активации</h2>
-  <p class='desc'>На стриме периодически появляются сообщения с инструкциями.</p>
+  <p class='desc'>На стриме периодически появляются сообщения с инструкцией, как получить купон.</p>
 
   <div class='block'>
     {#each data.latestCoupons as coupon}
@@ -37,10 +36,12 @@
         <div>
           <img src={unit} alt="" />
           <div class='coupon'>
-            <div class='coupons-counter'>{coupon.profile.coupons}</div> <img src={couponSmall} alt="" width='32' height='32' />
+            <img src={couponSmall} alt="" width='48' height='48' />
           </div>
         </div>
-        <p>{coupon.profile.userName}</p>
+        <div>
+          <a href='/{$page.data.locale}/p/{coupon.profile.userName}'>{coupon.profile.userName}</a>
+        </div>
         <time>{timeAgo.format(new Date(coupon.createdAt))}</time>
       </div>
     {/each}
@@ -138,17 +139,6 @@
         display: inline;
     }
 
-    .latest-coupons .block .card .coupons-counter {
-        position: absolute;
-        bottom: 10px;
-        right: 8px;
-        color: #fff;
-        font-weight: 700;
-        font-size: 0.8rem;
-        background: var(--color-bg-accent-2);
-        padding: 0 0.2em;
-    }
-
     .game-info {
       padding-top: 2em;
       padding-bottom: 4em;
diff --git a/src/routes/[lang]/(website)/p/[userName]/+page.server.ts b/src/routes/[lang]/(website)/p/[userName]/+page.server.ts
index 54fcf717..85c36b10 100644
--- a/src/routes/[lang]/(website)/p/[userName]/+page.server.ts
+++ b/src/routes/[lang]/(website)/p/[userName]/+page.server.ts
@@ -8,6 +8,6 @@ export async function load({ params }) {
   }
 
   return {
-    profile,
+    pageProfile: profile,
   }
 }
diff --git a/src/routes/[lang]/(website)/p/[userName]/+page.svelte b/src/routes/[lang]/(website)/p/[userName]/+page.svelte
index 218e5732..76eecfd4 100644
--- a/src/routes/[lang]/(website)/p/[userName]/+page.svelte
+++ b/src/routes/[lang]/(website)/p/[userName]/+page.svelte
@@ -1,10 +1,64 @@
 <script lang='ts'>
+  import BookCopy from 'lucide-svelte/icons/book-copy'
+  import FileQuestion from 'lucide-svelte/icons/file-question'
+  import Trophy from 'lucide-svelte/icons/trophy'
+  import Handshake from 'lucide-svelte/icons/handshake'
+  import unitAvatar from '$lib/assets/website/unit-512.png'
+  import { pluralizationRu } from '$lib/utils/locale'
+  import couponSmall from '$lib/assets/website/coupon-64.png'
+
   export let data
 </script>
 
 <section class='hero'>
-  <h1>{data.profile.userName}</h1>
-  <h2>Профиль игрока</h2>
+  <div class='header-block'>
+    <h1>{data.pageProfile.userName}</h1>
+
+    {#if data.pageProfile.coupons > 0}
+      <div class='coupon'>
+        <div class='coupons-counter'>{data.pageProfile.coupons}</div> <img src={couponSmall} alt="" width='48' height='48' />
+      </div>
+    {/if}
+  </div>
+  <h2>Профиль игрока <span class='profile-lvl'>{data.pageProfile.level} уровня</span></h2>
+
+  <div class='unit-avatar'>
+    <img src={unitAvatar} alt="" />
+  </div>
+</section>
+
+<section class='titles-block'>
+  <div>
+    <div class='icon'>
+      <BookCopy size='48' />
+    </div>
+    <p>Рассказчик</p>
+    <div class='points'>{data.pageProfile.storytellerPoints} {pluralizationRu(data.pageProfile.storytellerPoints, ['очко', 'очка', 'очков'])}</div>
+  </div>
+
+  <div>
+    <div class='icon'>
+      <FileQuestion size='48' />
+    </div>
+    <p>Создатель квестов</p>
+    <div class='points'>{data.pageProfile.questCreatorPoints} {pluralizationRu(data.pageProfile.questCreatorPoints, ['очко', 'очка', 'очков'])}</div>
+  </div>
+
+  <div>
+    <div class='icon'>
+      <Trophy size='48' />
+    </div>
+    <p>Охотник за трофеями</p>
+    <div class='points'>{data.pageProfile.trophyHunterPoints} {pluralizationRu(data.pageProfile.trophyHunterPoints, ['очко', 'очка', 'очков'])}</div>
+  </div>
+
+  <div>
+    <div class='icon'>
+      <Handshake size='48' />
+    </div>
+    <p>Меценат</p>
+    <div class='points'>{data.pageProfile.patronPoints} {pluralizationRu(data.pageProfile.patronPoints, ['очко', 'очка', 'очков'])}</div>
+  </div>
 </section>
 
 <style>
@@ -14,7 +68,35 @@
         max-width: 64em;
     }
 
-    h1 {
+    .hero .header-block {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.75em;
+    }
+
+    .hero .profile-lvl {
+      color: var(--color-common);
+    }
+
+    .hero .coupon {
+        position: relative;
+        display: inline-block;
+    }
+
+    .hero .coupons-counter {
+        position: absolute;
+        top: 6px;
+        left: 3px;
+        color: #fff;
+        font-weight: 700;
+        font-size: 0.8rem;
+        background: var(--color-text);
+        padding: 0 0.4em;
+        border-radius: 50%;
+    }
+
+    .hero h1 {
         margin-bottom: 0.25em;
     }
 
@@ -24,4 +106,41 @@
         margin: 0 auto;
         max-width: 42em;
     }
+
+    .unit-avatar {
+        width: 16em;
+        height: 16em;
+        margin: 2em auto 0;
+        background-image: url($lib/assets/website/background-green.webp);
+        border: 4px solid var(--color-border);
+    }
+
+    .unit-avatar img {
+        padding: 2em;
+        width: 100%;
+        height: auto;
+    }
+
+    .titles-block {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        grid-gap: 1em;
+        margin-top: 1em;
+    }
+
+    @media (min-width: 768px) {
+        .titles-block {
+            grid-template-columns: repeat(4, 1fr);
+        }
+    }
+
+    .titles-block .icon {
+      color: var(--color-border)
+    }
+
+    .titles-block .points {
+      color: var(--color-common);
+      margin-top: 0.25em;
+      font-size: 0.8rem;
+    }
 </style>
diff --git a/yarn.lock b/yarn.lock
index 97c7f3f1..d9fa2a0a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -528,10 +528,10 @@
   resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
   integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
 
-"@hmbanan666/chat-game-api@^0.1.10":
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/@hmbanan666/chat-game-api/-/chat-game-api-0.1.10.tgz#e705817c6f2b05d69eba60b8a421cabb01acbde6"
-  integrity sha512-NzC1SdBKQ2EZwQtlWPTdTaZR7ouJza8O1uGbQ2xAytWrFVObAYVWmjsi8vUGmURV/qnRJMukjvUN5z3uvvYcCw==
+"@hmbanan666/chat-game-api@^0.1.11":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@hmbanan666/chat-game-api/-/chat-game-api-0.1.11.tgz#d36688183ad7a5eed608207b25f7d9dba3e394bb"
+  integrity sha512-UM62ByzVA86Tz/qApoAV9+sGWyXym4xNz/h2zdC310Gk+r8gi8eT2DeFCT3fi96zbpzXMGID4/n4xhEalHnfNw==
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"