feat: timeago with ru support

chat-game · Jun 28, 2024 · 970d85a · 970d85a
1 parent 919697e
commit 970d85a
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "@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",

diff --git a/src/routes/[lang]/(website)/coupon/+page.server.ts b/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,
+  }
+}
diff --git a/src/routes/[lang]/(website)/coupon/+page.svelte b/src/routes/[lang]/(website)/coupon/+page.svelte
@@ -1,6 +1,16 @@
 <script>
-  import coupon from '$lib/assets/website/coupon-256.png'
+  import TimeAgo from 'javascript-time-ago'
+  import ru from 'javascript-time-ago/locale/ru'
+  import couponHuge from '$lib/assets/website/coupon-256.png'
+  import couponSmall from '$lib/assets/website/coupon-64.png'
+  import unit from '$lib/assets/website/unit-64.png'
   import { config } from '$lib/config'
+
+  export let data
+
+  TimeAgo.addLocale(ru)
+
+  const timeAgo = new TimeAgo('ru-RU')
 </script>
 
 <svelte:head>
@@ -14,7 +24,27 @@
   </h1>
   <h2>Уже встречался <a href={config.twitch.url} target='_blank'>на стриме?</a></h2>
 
-  <img src={coupon} alt='banana coupon' class='mt-4' />
+  <img src={couponHuge} alt='banana coupon' class='mt-4' />
+</section>
+
+<section class='latest-coupons'>
+  <h2 class='title'>Последние активации</h2>
+  <p class='desc'>На стриме периодически появляются сообщения с инструкциями.</p>
+
+  <div class='block'>
+    {#each data.latestCoupons as coupon}
+      <div class='card'>
+        <div>
+          <img src={unit} alt="" />
+          <div class='coupon'>
+            <div class='coupons-counter'>{coupon.profile.coupons}</div> <img src={couponSmall} alt="" width='32' height='32' />
+          </div>
+        </div>
+        <p>{coupon.profile.userName}</p>
+        <time>{timeAgo.format(new Date(coupon.createdAt))}</time>
+      </div>
+    {/each}
+  </div>
 </section>
 
 <section class='game-info'>
@@ -67,6 +97,50 @@
       max-width: 64em;
     }
 
+    .latest-coupons {
+    padding-top: 2em;
+      padding-bottom: 4em;
+      max-width: 64em;
+    }
+
+    .latest-coupons .title {
+        margin-bottom: 0.25em;
+    }
+
+    .latest-coupons .desc {
+        margin-bottom: 1em;
+    }
+
+    .latest-coupons .block {
+        display: flex;
+        gap: 1em;
+    }
+
+    .latest-coupons .block .card {
+      border: 2px solid var(--color-border-2);
+      padding: 1em;
+    }
+
+    .latest-coupons .block .card time {
+        font-size: 0.8rem;
+    }
+
+    .latest-coupons .block .card .coupon {
+        position: relative;
+        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/yarn.lock b/yarn.lock
@@ -998,6 +998,11 @@
   resolved "https://registry.yarnpkg.com/@types/howler/-/howler-2.2.11.tgz#a75c4ab5666aee5fcfbd5de15d35dbaaa3d3f070"
   integrity sha512-7aBoUL6RbSIrqKnpEgfa1wSNUBK06mn08siP2QI0zYk7MXfEJAaORc4tohamQYqCqVESoDyRWSdQn2BOKWj2Qw==
 
+"@types/javascript-time-ago@^2.0.8":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@types/javascript-time-ago/-/javascript-time-ago-2.0.8.tgz#e778029ce2e348edfec8671f557a0e892878d2cb"
+  integrity sha512-X77q3xUzWVn0qohgurKE1G5NiXZjee8VbLqaukW/HXVkz7bdCFJgOPQ3JVB4IkrDhMS4CviFTmpZuNVg0i2QFA==
+
 "@types/json-schema@*":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
@@ -3537,6 +3542,13 @@ jackspeak@^3.1.2:
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
+javascript-time-ago@^2.5.10:
+  version "2.5.10"
+  resolved "https://registry.yarnpkg.com/javascript-time-ago/-/javascript-time-ago-2.5.10.tgz#f1c188496203a1aa37318276703a2ebd2941c1b1"
+  integrity sha512-EUxp4BP74QH8xiYHyeSHopx1XhMMJ9qEX4rcBdFtpVWmKRdzpxbNzz2GSbuekZr5wt0rmLehuyp0PE34EAJT9g==
+  dependencies:
+    relative-time-format "^1.1.6"
+
 jiti@^1.19.1, jiti@^1.21.6:
   version "1.21.6"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
@@ -4701,6 +4713,11 @@ regjsparser@^0.10.0:
   dependencies:
     jsesc "~0.5.0"
 
+relative-time-format@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/relative-time-format/-/relative-time-format-1.1.6.tgz#724a5fbc3794b8e0471b6b61419af2ce699eb9f1"
+  integrity sha512-aCv3juQw4hT1/P/OrVltKWLlp15eW1GRcwP1XdxHrPdZE9MtgqFpegjnTjLhi2m2WI9MT/hQQtE+tjEWG1hgkQ==
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"