feat: trophies page (#190)

* chore: more localizations

* feat: new profile level system

* chore: coupons counter on profile page

* feat: trophies page

package.json

@@ -32,7 +32,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@hmbanan666/chat-game-api": "^0.1.11",
+    "@hmbanan666/chat-game-api": "^0.1.13",
     "@paralleldrive/cuid2": "^2.2.2",
     "@radix-ui/colors": "^3.0.0",
     "@twurple/api": "^7.1.0",

src/lib/components/Header.svelte

@@ -26,7 +26,7 @@
     <Locale />
   </div>
 
-  {#if innerWidth < 768}
+  {#if innerWidth < 920}
     <MenuSmartphone bind:sidebar={open} />
   {:else}
     <MenuDesktop />

src/lib/components/MenuDesktop.svelte

@@ -20,6 +20,9 @@
     <li aria-current={$page.url.pathname === `/${locale}/coupon` ? 'page' : undefined}>
       <a href='/{locale}/coupon'>{t.header.menu.coupon}</a>
     </li>
+    <li aria-current={$page.url.pathname === `/${locale}/trophy` ? 'page' : undefined}>
+      <a href='/{locale}/trophy'>{t.header.menu.trophy}</a>
+    </li>
   </ul>
 </nav>
 

src/lib/components/MenuSmartphone.svelte

@@ -28,6 +28,9 @@
       <li aria-current={$page.url.pathname === `/${locale}/coupon` ? 'page' : undefined}>
         <a href='/{locale}/coupon' onclick={closeSidebar}>{t.header.menu.coupon}</a>
       </li>
+      <li aria-current={$page.url.pathname === `/${locale}/trophy` ? 'page' : undefined}>
+        <a href='/{locale}/trophy' onclick={closeSidebar}>{t.header.menu.trophy}</a>
+      </li>
     </ul>
   </nav>
 </aside>

src/lib/styles/styles.css

@@ -140,6 +140,7 @@ button:focus:not(:focus-visible) {
     transform: translateY(100%);
     padding: 0.5em;
     background-color: var(--color-background-2);
+    z-index: 5;
   }
 
   .dropdown-menu a {

src/lib/translations/en.ts

@@ -19,6 +19,7 @@ export const en = {
       about: 'About',
       characters: 'Characters',
       coupon: 'Coupon',
+      trophy: 'Trophies',
     },
   },
   footer: {

src/lib/translations/ru.ts

@@ -19,6 +19,7 @@ export const ru = {
       about: 'Об игре',
       characters: 'Персонажи',
       coupon: 'Купон',
+      trophy: 'Трофеи',
     },
   },
   footer: {

src/routes/[lang]/(website)/coupon/+page.svelte

@@ -9,6 +9,8 @@
 
   export let data
 
+  const latestCoupons = data.latestCoupons.slice(0, 6)
+
   TimeAgo.addLocale(ru)
 
   const timeAgo = new TimeAgo('ru-RU')
@@ -31,7 +33,7 @@
   <p class='desc'>На стриме периодически появляются сообщения с инструкцией, как получить купон.</p>
 
   <div class='block'>
-    {#each data.latestCoupons as coupon}
+    {#each latestCoupons as coupon}
       <div class='card'>
         <div>
           <img src={unit} alt="" />
@@ -113,17 +115,22 @@
     }
 
     .latest-coupons .block {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 1em;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.5em;
     }
 
-    @media (max-width: 620px) {
+    @media (min-width: 768px) {
         .latest-coupons .block {
-            flex-direction: column;
+          grid-template-columns: repeat(4, 1fr);
         }
-  }
+    }
+
+    @media (min-width: 1200px) {
+        .latest-coupons .block {
+          grid-template-columns: repeat(6, 1fr);
+        }
+    }
 
     .latest-coupons .block .card {
       border: 2px solid var(--color-border-2);

src/routes/[lang]/(website)/p/[userName]/+page.server.ts

@@ -7,7 +7,13 @@ export async function load({ params }) {
     error(404, 'Not found')
   }
 
+  let trophies = await api.trophy.getProfileProgressList(profile.id)
+  if (!trophies || trophies instanceof Error) {
+    trophies = []
+  }
+
   return {
     pageProfile: profile,
+    trophies,
   }
 }

src/routes/[lang]/(website)/p/[userName]/+page.svelte

@@ -3,11 +3,17 @@
   import FileQuestion from 'lucide-svelte/icons/file-question'
   import Trophy from 'lucide-svelte/icons/trophy'
   import Handshake from 'lucide-svelte/icons/handshake'
+  import TimeAgo from 'javascript-time-ago'
+  import ru from 'javascript-time-ago/locale/ru'
   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
+
+  TimeAgo.addLocale(ru)
+
+  const timeAgo = new TimeAgo('ru-RU')
 </script>
 
 <section class='hero'>
@@ -61,6 +67,27 @@
   </div>
 </section>
 
+<section class='trophies'>
+  {#each data.trophies as progress}
+    <div class='trophy-block'>
+      <div class='info'>
+        <p class='name'>{progress.trophy.name}</p>
+        <p class='description'>{progress.trophy.description}</p>
+        <p class='date'>{progress.status === 'COMPLETED' ? `Получен ${timeAgo.format(new Date(progress.completedAt))}` : 'Еще не получен'}</p>
+      </div>
+      <div class='completion'>
+        <div class='trophy' data-completed={progress.status === 'COMPLETED'}>
+          <Trophy size='64' />
+        </div>
+        <div>
+          <p class='points'>{progress.trophy.points}</p>
+          <p>Очков</p>
+        </div>
+      </div>
+    </div>
+  {/each}
+</section>
+
 <style>
     .hero {
         padding-top: 4em;
@@ -143,4 +170,60 @@
       margin-top: 0.25em;
       font-size: 0.8rem;
     }
+
+  .trophy-block {
+      background-color: #FFEFD6;
+      border: 2px solid var(--color-border);
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      margin-bottom: 0.5em;
+    }
+
+    .trophy-block .info {
+      position: relative;
+      padding: 0.5em 1em;
+    }
+
+    .trophy-block .info .name {
+      font-weight: 600;
+      font-size: 1.1rem;
+      opacity: 0.8;
+    }
+
+    .trophy-block .info .description {
+      font-size: 0.9rem;
+    }
+
+    .trophy-block .info .date {
+      font-size: 0.9rem;
+      margin-top: 0.5em;
+      opacity: 0.8;
+    }
+
+    .trophy-block .completion {
+      position: relative;
+      padding: 0.5em 1em;
+      color: #A07553;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5em;
+    }
+
+    .trophy-block .completion .points {
+      font-size: 1.5rem;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .trophy-block .completion .trophy {
+      opacity: 0.3;
+      color: #AD7F58;
+    }
+
+    .trophy-block .completion .trophy[data-completed=true] {
+      opacity: 1;
+    }
 </style>

src/routes/[lang]/(website)/trophy/+page.server.ts

@@ -0,0 +1,12 @@
+import { api } from '$lib/server/api'
+
+export async function load() {
+  let trophies = await api.trophy.getList()
+  if (!trophies || trophies instanceof Error) {
+    trophies = []
+  }
+
+  return {
+    trophies,
+  }
+}

src/routes/[lang]/(website)/trophy/+page.svelte

@@ -0,0 +1,95 @@
+<script>
+  import Trophy from 'lucide-svelte/icons/trophy'
+
+  export let data
+</script>
+
+<section class='hero'>
+  <h1>Трофеи</h1>
+  <h2>Столько всего можно сделать...</h2>
+</section>
+
+<section class='trophies'>
+  {#each data.trophies as trophy}
+    <div class='trophy-block'>
+      <div class='info'>
+        <p class='name'>{trophy.name}</p>
+        <p class='description'>{trophy.description}</p>
+      </div>
+      <div class='completion'>
+        <div class='trophy'>
+          <Trophy size='64' />
+        </div>
+        <div>
+          <p class='points'>{trophy.points}</p>
+          <p>Очков</p>
+        </div>
+      </div>
+    </div>
+  {/each}
+</section>
+
+<style>
+    .hero {
+        padding-top: 4em;
+        padding-bottom: 4em;
+        max-width: 64em;
+    }
+
+    .hero h1 {
+        margin-bottom: 0.25em;
+    }
+
+    section {
+        text-align: center;
+        padding: 2em 1em;
+        margin: 0 auto;
+        max-width: 42em;
+    }
+
+.trophy-block {
+      background-color: #FFEFD6;
+      border: 2px solid var(--color-border);
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      margin-bottom: 0.5em;
+    }
+
+    .trophy-block .info {
+      position: relative;
+      padding: 0.5em 1em;
+    }
+
+    .trophy-block .info .name {
+      font-weight: 600;
+      font-size: 1.1rem;
+      opacity: 0.8;
+    }
+
+    .trophy-block .info .description {
+      font-size: 0.9rem;
+    }
+
+    .trophy-block .completion {
+      position: relative;
+      padding: 0.5em 1em;
+      color: #A07553;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5em;
+    }
+
+    .trophy-block .completion .points {
+      font-size: 1.5rem;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .trophy-block .completion .trophy {
+      opacity: 0.3;
+      color: #AD7F58;
+    }
+</style>

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.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==
+"@hmbanan666/chat-game-api@^0.1.13":
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/@hmbanan666/chat-game-api/-/chat-game-api-0.1.13.tgz#8552c79bc73aef9fb2b6bb8eb468c6e383f9916b"
+  integrity sha512-SwjB2g3TQVqIsuNTP12gC+XCc8V0BAqvRt6LCmVKlemyn0JxFGcAT9WKaNSG/hCHXe1ZuMb1bSwG/Lq9v1rnqw==
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"