chore: coupons counter on profile page

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

Hide file tree

Showing 2 changed files with 37 additions and 17 deletions.
diff --git a/src/routes/[lang]/(website)/coupon/+page.svelte b/src/routes/[lang]/(website)/coupon/+page.svelte
@@ -20,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' />
@@ -38,7 +36,7 @@
         <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>
         <div>
@@ -141,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.svelte b/src/routes/[lang]/(website)/p/[userName]/+page.svelte
@@ -5,12 +5,21 @@
   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.pageProfile.userName}</h1>
+  <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'>
@@ -59,11 +68,35 @@
         max-width: 64em;
     }
 
+    .hero .header-block {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.75em;
+    }
+
     .hero .profile-lvl {
       color: var(--color-common);
     }
 
-    h1 {
+    .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;
     }