feat: new profile level system

chat-game · Jul 1, 2024 · 23383a0 · 23383a0
1 parent 107efb5
commit 23383a0
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 11 deletions.
diff --git 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/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;

diff --git 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
 
@@ -29,7 +30,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}
@@ -40,7 +41,9 @@
             <div class='coupons-counter'>{coupon.profile.coupons}</div> <img src={couponSmall} alt="" width='32' height='32' />
           </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}

diff --git 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
@@ -1,10 +1,55 @@
 <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'
+
   export let data
 </script>
 
 <section class='hero'>
-  <h1>{data.profile.userName}</h1>
-  <h2>Профиль игрока</h2>
+  <h1>{data.pageProfile.userName}</h1>
+  <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,6 +59,10 @@
         max-width: 64em;
     }
 
+    .hero .profile-lvl {
+      color: var(--color-common);
+    }
+
     h1 {
         margin-bottom: 0.25em;
     }
@@ -24,4 +73,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
@@ -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"