Add new banner to wish tally

2021-04-06 20:11:50 +08:00 · 2021-04-06 20:11:50 +08:00 · e0a5abdd11
parent 6d8d232522
commit e0a5abdd11
8 changed files with 133 additions and 52 deletions
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -14,9 +14,12 @@
    "welcome": "Welcome to Paimon.moe! 👋",
    "message": "Your best Genshin Impact companion! Help you plan what to farm with ascension calculator, also track your progress with todo and wish counter.",
    "banner": {
-      "featured": "Venti",
+      "featured": [
+        "Rosaria",
+        "Tartaglia"
+      ],
      "summoned": "Summoned",
-      "percentage": "from all 5",
+      "percentage": "from all",
      "avg": "Pity average",
      "subtitle": "Calculated from data submitted by paimon.moe users",
      "detail": "Global With Tally"
@ -249,7 +252,9 @@
      "subtitle": "Global average pity from paimon.moe users submission",
      "update": "Updated",
      "summoned": "Summoned",
-      "fromFiveStar": "from all 5*",
+      "fromFiveStar": "from all 5★",
+      "fromFourStar": "from all 4★",
+      "show": "Show",
      "name": "Name",
      "total": "Total",
      "wishTotal": "Wish Total",
--- a/src/locales/id.json
+++ b/src/locales/id.json
@ -14,9 +14,12 @@
    "welcome": "Selamat Datang di Paimon.moe! 👋",
    "message": "Your best Genshin Impact companion! Membantu kamu merencanakan apa yang harus di farm dengan kalkulator ascension, juga catat progress mu dengan todo dan wish counter.",
    "banner": {
-      "featured": "Venti",
+      "featured": [
+        "Rosaria",
+        "Tartaglia"
+      ],
      "summoned": "Pulang",
-      "percentage": "dari semua 5",
+      "percentage": "dari semua",
      "avg": "Pity rata-rata",
      "subtitle": "Dihitung dari data yang dikirim oleh pengguna paimon.moe",
      "detail": "Perhitungan Wish Pity Global"
@ -249,7 +252,9 @@
      "subtitle": "Rata-rata pity dari kiriman pengguna paimon.moe",
      "update": "Diupdate",
      "summoned": "Pulang",
-      "fromFiveStar": "dari semua 5*",
+      "fromFiveStar": "dari semua 5★",
+      "fromFourStar": "dari semua 4★",
+      "show": "Tampilkan",
      "name": "Nama",
      "total": "Total",
      "wishTotal": "Total Wish",
@ -427,19 +432,35 @@
    "collect": [
      {
        "title": "Url yang dikunjungi di paimon.moe, referer, browser, sistem operasi, tipe device, negara visitor",
-        "content": ["Paimon.moe menggunakan", "plausible.io", "(analitik yang ramah privasi) sehingga kami bisa melihat apa saja fitur yang digunakan orang-orang, dan kami bisa memprioritaskan fitur apa yang perlu ditambahkan atau ditingkatkan."]
+        "content": [
+          "Paimon.moe menggunakan",
+          "plausible.io",
+          "(analitik yang ramah privasi) sehingga kami bisa melihat apa saja fitur yang digunakan orang-orang, dan kami bisa memprioritaskan fitur apa yang perlu ditambahkan atau ditingkatkan."
+        ]
      },
      {
        "title": "Error dari website paimon.moe",
-        "content": ["Paimon.moe akan mengirim data error yang terjadi di website ini ke", "sentry.io", "sehingga kami bisa mencari tau apa yang salah dan memperbaikinya."]
+        "content": [
+          "Paimon.moe akan mengirim data error yang terjadi di website ini ke",
+          "sentry.io",
+          "sehingga kami bisa mencari tau apa yang salah dan memperbaikinya."
+        ]
      },
      {
        "title": "Wish Pity",
-        "content": ["Paimon.moe akan menyimpan perhitungan pity 4*, perhitungan pity 5*, dan informasi wish 5* (yaitu waktu wish, nama item, angka pity) jika kamu mencentang 'Kirim pity untuk perhitungan pity global' di Auto Import Wish atau secara manual mensubmit di menu bantuan dan pengaturan. Paimon.moe akan menyatukan data-datanya kemudian menghitung pity rata-rata tiap banner dari pengguna paimon.moe. Kamu bisa mengecek nya di", "wish tally"]
+        "content": [
+          "Paimon.moe akan menyimpan perhitungan pity 4*, perhitungan pity 5*, dan informasi wish 5* (yaitu waktu wish, nama item, angka pity) jika kamu mencentang 'Kirim pity untuk perhitungan pity global' di Auto Import Wish atau secara manual mensubmit di menu bantuan dan pengaturan. Paimon.moe akan menyatukan data-datanya kemudian menghitung pity rata-rata tiap banner dari pengguna paimon.moe. Kamu bisa mengecek nya di",
+          "wish tally"
+        ]
      }
    ],
    "subtitleNotCollect": "Apa yang paimon.moe TIDAK kumpulkan",
-    "notCollect": ["Paimon.moe tidak menyimpan password, uid, username, email, temporary keys, atau feedback url. Jika kamu tertarik, projek nya open source dan kamu bisa mengecek kode nya di", "paimon-moe-api Github", "dan", "paimon-moe Github"]
+    "notCollect": [
+      "Paimon.moe tidak menyimpan password, uid, username, email, temporary keys, atau feedback url. Jika kamu tertarik, projek nya open source dan kamu bisa mengecek kode nya di",
+      "paimon-moe-api Github",
+      "dan",
+      "paimon-moe Github"
+    ]
  },
  "sync": {
    "message": "Data yang tersimpan pada browser ini tidak sama dengan yang tersimpan pada Google Drive!",
@ -490,4 +511,4 @@
    "hoyolab": "Reminder Hoyolab Daily Check-In",
    "comingsoon": "Coming Soon!"
  }
-}
+}
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@ -14,9 +14,12 @@
    "welcome": "Добро пожаловать на Paimon.moe! 👋",
    "message": "Твой лучший компаньон в Genshin Impact! Поможет тебе распланировать что фармить в калькуляторе возвышения, а также отслеживать свой прогресс с помощью счетчика молитв и cписка дел",
    "banner": {
-      "featured": "Венти",
+      "featured": [
+        "Rosaria",
+        "Tartaglia"
+      ],
      "summoned": "Призывов",
-      "percentage": "из всех 5",
+      "percentage": "из всех",
      "avg": "Среднее число молитв",
      "subtitle": "Рассчитано по информации от пользователей paimon.moe",
      "detail": "Глобальная статистика молитв"
@ -248,7 +251,9 @@
      "subtitle": "Глобальная статистика по гарантам среди пользователей paimon.moe",
      "update": "Обновлено",
      "summoned": "призвано",
-      "fromFiveStar": "из всех 5*",
+      "fromFiveStar": "из всех 5★",
+      "fromFourStar": "из всех 4★",
+      "show": "Шоу",
      "name": "Имя",
      "total": "Всего",
      "wishTotal": "Всего молитв",
--- a/src/routes/_index/banner.svelte
+++ b/src/routes/_index/banner.svelte
@ -12,13 +12,24 @@

  const dispatch = createEventDispatcher();

-  export let featured;
-  export let bannerId;
+  const featured = {
+    rosaria: {
+      rarity: 'rare',
+      count: 0,
+      average: '...',
+      percentage: '...',
+    },
+    tartaglia: {
+      rarity: 'legendary',
+      count: 0,
+      average: '...',
+      percentage: '...',
+    },
+  };
+  const bannerId = 300011;
+  const image = 'childerosaria.png';

  let loading = true;
-  let featuredPull = 0;
-  let percentage = '...';
-  let average = '...';

  async function getData() {
    const url = new URL(`${__paimon.env.API_HOST}/wish`);
@ -33,10 +44,15 @@

      const data = await res.json();

-      const item = data.list.find((e) => e.name === featured);
-      featuredPull = item.count;
-      percentage = numberFormat.format((item.count / data.total.legendary) * 100);
-      average = numberFormat.format(data.pityAverage.legendary);
+      for (const e of data.list) {
+        if (featured[e.name]) {
+          featured[e.name].count = e.count;
+          featured[e.name].percentage = numberFormat.format((e.count / data.total[featured[e.name].rarity]) * 100);
+          featured[e.name].average = numberFormat.format(data.pityAverage[featured[e.name].rarity]);
+        }
+      }
+
+      console.log(featured);

      loading = false;
    } catch (err) {
@ -53,32 +69,41 @@

 <div class="bg-item rounded-xl p-4 flex flex-col">
  <div class="relative">
-    <img src="/images/home/venti.png" alt="venti" style="min-height: 150px;" />
-    <div
-      class="flex text-white items-center absolute bottom-0 pb-1"
-      style="background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 27%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0) 100%);"
-    >
-      <h3 class="text-4xl ml-4 font-black leading-10" style="margin-top: 8px;">
-        {#if loading}
-          <Icon path={mdiLoading} spin />
-        {:else}
-          {featuredPull}
-        {/if}
-      </h3>
-      <div class="flex flex-col ml-2 pr-2">
-        <p class="font-semibold">{$t('home.banner.featured')}</p>
-        <p class="text-gray-200 leading-3">{$t('home.banner.summoned')}</p>
-      </div>
+    <img src="/images/home/{image}" alt="banner" style="min-height: 150px;" />
+    <div class="flex flex-wrap text-white items-center absolute bottom-0 w-full">
+      {#each Object.entries(featured) as [_, item], i}
+        <div
+          class="flex flex-col pt-2"
+          style="background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 27%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0) 100%); 
+          {i ===
+          0
+            ? 'margin-right: 20%;'
+            : ''}"
+        >
+          <h3 class="text-3xl ml-4 font-black leading-6">
+            {#if loading}
+              <Icon path={mdiLoading} spin size={0.8} />
+            {:else}
+              {item.count}
+            {/if}
+          </h3>
+          <p class="ml-4 font-sm leading-2">{$t(`home.banner.featured.${i}`)}</p>
+        </div>
+      {/each}
    </div>
  </div>
-  <div class="flex flex-wrap items-start pl-2 mt-1">
-    <p class="text-white mr-4">
-      <span class="font-semibold">{percentage}%</span>
-      {$t('home.banner.percentage')}<Icon className="mb-1" path={mdiStar} size={0.8} />
-    </p>
-    <p class="text-white">{$t('home.banner.avg')} <span class="font-semibold">{average}</span></p>
-  </div>
-  <p class="text-gray-400 pl-2">※ {$t('home.banner.subtitle')}</p>
+  <div class="h-1" />
+  {#each Object.entries(featured) as [_, item], i}
+    <div class="flex flex-wrap items-start pl-2">
+      <p class="text-white mr-4 leading-4">
+        <span class="font-semibold">{item.percentage}%</span>
+        {$t('home.banner.percentage')}
+        {item.rarity === 'legendary' ? '5' : '4'}★
+      </p>
+      <p class="text-white leading-4">{$t('home.banner.avg')} <span class="font-semibold">{item.average}</span></p>
+    </div>
+  {/each}
+  <p class="text-gray-400 pl-2 mt-1">※ {$t('home.banner.subtitle')}</p>
  <a
    href="/wish/tally"
    class="flex justify-end items-center self-end lg:self-start text-white mt-4 bg-background-secondary rounded-xl py-2 px-4
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@ -42,7 +42,7 @@
    <Welcome on:done={onDone} />
    <Wish on:done={onDone} />
    <Reminder on:done={onDone} />
-    <Banner on:done={onDone} featured="venti" bannerId={300010} />
+    <Banner on:done={onDone} />
    <Event on:done={onDone} />
    <Item on:done={onDone} />
    <Discord on:done={onDone} />
--- a/src/routes/wish/tally/_item.svelte
+++ b/src/routes/wish/tally/_item.svelte
@ -134,7 +134,10 @@
        if (item) {
          featuredValues[i] = {
            total: item.count,
-            percentage: (item.count / data.total.legendary) * 100,
+            percentage:
+              (item.count /
+                (type === 'character' && id !== 200001 && i === 1 ? data.total.rare : data.total.legendary)) *
+              100,
          };
        }
      }
@ -308,7 +311,11 @@
                      {type === 'character' ? characters[feat].name : weaponList[feat].name}
                      <span class="text-gray-400">{$t('wish.tally.summoned')}</span>
                    </p>
-                    <p class="text-gray-400">{numberFormat.format(featuredValues[i].percentage)}% {$t('wish.tally.fromFiveStar')}</p>
+                    <p class="text-gray-400">
+                      {numberFormat.format(featuredValues[i].percentage)}% {$t(
+                        type === 'character' && i === 1 ? 'wish.tally.fromFourStar' : 'wish.tally.fromFiveStar',
+                      )}
+                    </p>
                  </td>
                </tr>
              {/each}
--- a/src/routes/wish/tally/index.svelte
+++ b/src/routes/wish/tally/index.svelte
@ -1,7 +1,14 @@
 <script>
  import { t } from 'svelte-i18n';
+import Button from '../../../components/Button.svelte';
  import { banners } from '../../../data/banners';
  import Item from './_item.svelte';
+
+  let showOld = false;
+
+  function showOldTally() {
+    showOld = true;
+  }
 </script>

 <svelte:head>
@ -23,11 +30,22 @@
    </p>

    <div class="px-4 md:px-8">
+      <Item type="character" banner={banners.characters[10]} id={300011} featured={['tartaglia', 'rosaria']} />
+      <Item
+        type="weapon"
+        banner={banners.weapons[9]}
+        id={400010}
+        featured={['skyward_harp', 'lost_prayer_to_the_sacred_winds']}
+      />
      <Item type="character" banner={banners.characters[9]} id={300010} featured={['venti']} />
      <Item type="weapon" banner={banners.weapons[8]} id={400009} featured={['elegy_for_the_end', 'skyward_blade']} />
      <Item type="character" banner={banners.standard[0]} id={200001} />
-      <Item type="character" banner={banners.characters[8]} id={300009} featured={['hu_tao']} />
-      <Item type="weapon" banner={banners.weapons[7]} id={400008} featured={['wolfs_gravestone', 'staff_of_homa']} />
+      {#if showOld}
+        <Item type="character" banner={banners.characters[8]} id={300009} featured={['hu_tao']} />
+        <Item type="weapon" banner={banners.weapons[7]} id={400008} featured={['wolfs_gravestone', 'staff_of_homa']} />
+      {:else}
+        <Button on:click={showOldTally}>{$t('wish.tally.show')} {banners.characters[8].name} & {banners.weapons[7].name}</Button>
+      {/if}
    </div>
  </div>
 </div>
--- a/static/images/home/childerosaria.png
+++ b/static/images/home/childerosaria.png