feat: coupon page (#186)

* feat: coupon page

* feat: timeago with ru support

package.json

@@ -32,12 +32,13 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@hmbanan666/chat-game-api": "^0.1.8",
+    "@hmbanan666/chat-game-api": "^0.1.10",
     "@paralleldrive/cuid2": "^2.2.2",
     "@radix-ui/colors": "^3.0.0",
     "@twurple/api": "^7.1.0",
     "@twurple/auth": "^7.1.0",
     "howler": "^2.2.4",
+    "javascript-time-ago": "^2.5.10",
     "jsonwebtoken": "^9.0.2",
     "lucide-svelte": "^0.396.0",
     "pixi.js": "^8.2.0",
@@ -52,6 +53,7 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@testing-library/svelte": "^5.1.0",
     "@types/howler": "^2.2.11",
+    "@types/javascript-time-ago": "^2.0.8",
     "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "^20.14.8",
     "@vitest/coverage-v8": "^1.6.0",

src/lib/components/Header.svelte

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

src/lib/styles/styles.css

@@ -6,6 +6,7 @@
     --color-twitch: #8E4EC6;
     --color-background: #FFF7ED;
     --color-border: #DCBC9F;
+    --color-border-2: #E1DCCF;
     --color-bg-accent-1: #56468B;
     --color-bg-accent-2: #6F5F58;
     --color-common: #FFF7ED;

src/lib/translations/en.ts

@@ -14,6 +14,7 @@ export const en = {
       home: 'Home',
       about: 'About',
       characters: 'Characters',
+      coupon: 'Coupon',
     },
   },
   home: undefined,

src/lib/translations/ru.ts

@@ -14,6 +14,7 @@ export const ru = {
       home: 'Главная',
       about: 'Об игре',
       characters: 'Персонажи',
+      coupon: 'Купон',
     },
   },
   home: undefined,

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

@@ -54,7 +54,7 @@
 <section>
   <h3 class='mb-2'>Благодарности</h3>
   <p>Спасибо моим зрителям: <b>sava5621</b> за вкусные шавухи, <b>BezSovesty</b> за помощь на
-  старте, <b>flack_zombi</b> за упорство в рубке деревьев, <b>PeregonStream</b> за крутые рейды.
+  старте, <b>flack_zombi</b> за упорство в рубке деревьев, <b>hywax</b> за open-source вклад, <b>PeregonStream</b> и <b>siberiacancode</b> за крутые рейды.
   Спасибо <b>tozikab_</b>, <b>6alt1ca</b>, <b>derailon</b>, <b>sloghniy</b>, <b>MaN0ol</b>, <b>dO_Oy</b>, <b>VombatDrago</b>,
     <b>sleeplessness8</b>.
     <br>Вы все крутые!</p>

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

@@ -1,5 +1,6 @@
 <script lang='ts'>
   import unitAvatar from '$lib/assets/website/unit-512.png'
+  import userAvatar from '$lib/assets/website/unit-64.png'
   import { page } from '$app/stores'
 
   export let data
@@ -8,6 +9,9 @@
 <section class='hero'>
   <h1>{data.character.name}</h1>
   <h2>Игровой персонаж, созданный <a href='/{$page.data.locale}/p/valentina8177'>valentina8177</a></h2>
+  <div class='rights-block'>
+    Сейчас под управлением <a href='/{$page.data.locale}/p/hmbanan666'>hmbanan666</a>
+  </div>
 
   <div class='unit-avatar'>
     <img src={unitAvatar} alt="" />
@@ -45,31 +49,19 @@
 </section>
 
 <section>
-  <div class='rights-block'>
-    Сейчас управляет: Никто
-  </div>
   <div class='feed'>
     <div class='post'>
-      <p>Пример поста 3</p>
-      <div class='info'>
-        <div class='date'>8 часов назад</div>
-        <div class='interactions'></div>
-      </div>
-    </div>
-
-    <div class='post'>
-      <p>Пример поста 2</p>
-      <div class='info'>
-        <div class='date'>2 дня назад</div>
-        <div class='interactions'></div>
-      </div>
-    </div>
-
-    <div class='post'>
-      <p>Пример поста 1</p>
-      <div class='info'>
-        <div class='date'>6 дней назад</div>
-        <div class='interactions'></div>
+      <img src={userAvatar} alt="" class='avatar' />
+      <div class='content'>
+        <div class='info'>
+          <div class='desc'><em>hmbanan666</em> добавил новую заметку</div>
+          <time datetime={new Date().toISOString()}>8 часов назад</time>
+        </div>
+        <div class='message'>
+          Вот была история... Альварес помог королю вылечиться от неизвестного заболевания при помощи особого печенья. Рецепт прост:
+          - выбрать особое печенье
+          - использовать особое печенье
+        </div>
       </div>
     </div>
   </div>
@@ -94,9 +86,8 @@
     }
 
     .rights-block {
-        display: flex;
+        display: block;
         margin: 1em auto;
-        justify-content: center;
     }
 
     .unit-avatar {
@@ -212,18 +203,65 @@
     }
 
     .post {
-        border: 2px solid var(--color-border);
-        padding: 1em 1em;
+        display: flex;
+        position: relative;
         text-align: left;
+        margin-bottom: 1em;
     }
 
-    .post .info {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 0.3em;
+    .post::before {
+        background-color: var(--color-border);
+        bottom: -32px;
+        content: "";
+        left: calc(28px - 1px);
+        position: absolute;
+        top: -32px;
+        width: 2px;
+    }
+
+    .post:first-child:before {
+        top: 48px;
+    }
+
+    .post:last-child:before {
+        visibility: hidden;
+    }
+
+    .post .avatar {
+      height: 48px;
+      width: 48px;
+      background-color: #EAE6DB;
+      padding: 0.2em;
+      margin-right: 1em;
+      position: relative;
+      flex-shrink: 0;
+      z-index: 1;
     }
 
-    .post .info .date {
+    .post .content {
+      flex-grow: 1;
+    }
+
+    .post .content .info .desc {
+      line-height: 1.1;
+    }
+
+    .post .content .info .desc em {
+        font-style: normal;
+        font-weight: 600;
+    }
+
+    .post .content .info time {
         font-size: 0.8rem;
+        color: var(--color-bg-accent-2);
+    }
+
+    .post .content .message {
+      border: 2px solid var(--color-border-2);
+        padding: 0.5em 1em;
+        margin-top: 0.85em;
+        unicode-bidi: embed;
+        white-space: pre-wrap;
+        word-wrap: break-word;
     }
 </style>

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

@@ -0,0 +1,14 @@
+import { api } from '$lib/server/api'
+
+export async function load() {
+  const latestCoupons = await api.coupon.getLatestList()
+  if (latestCoupons instanceof Error) {
+    return {
+      latestCoupons: [],
+    }
+  }
+
+  return {
+    latestCoupons,
+  }
+}