Update weapon detail page

src/components/Tooltip.svelte

@@ -31,4 +31,8 @@
     @apply p-2 absolute rounded-xl bg-gray-400 border border-gray-800;
     @apply text-sm text-background z-10;
   }
+
+  i {
+    font-style: normal;
+  }
 </style>

src/data/weaponList.js

@@ -7089,7 +7089,7 @@ export const weaponList = {
     atk: 42,
     secondary: 'Energy Recharge',
     type: weapons.polearm,
-    source: 'wish',
+    source: 'fishing trade',
     ascension: [
       {
         items: [

src/helper.js

@@ -5,3 +5,8 @@ export function formatStat(value, type) {
 
   return Math.round(value);
 }
+
+export const numberFormat = Intl.NumberFormat('en', {
+  maximumFractionDigits: 1,
+  minimumFractionDigits: 0,
+});

src/routes/weapons/[id].svelte

@@ -38,21 +38,23 @@
   export async function load({ params }) {
     const { id } = params;
     const weapon = data[id];
-    const materials = weaponList[id].ascension[0].items;
+    const ascensions = weaponList[id].ascension;
+    const source = weaponList[id].source;
     const recommendedCharacter = getCharacter(id);
 
-    return { props: { id, weapon, materials, recommendedCharacter } };
+    return { props: { id, weapon, recommendedCharacter, source, ascensions } };
   }
 </script>
 
 <script>
-  import { mdiCircle, mdiStar } from '@mdi/js';
+  import { mdiCircle, mdiClose, mdiStar } from '@mdi/js';
   import { locale, t } from 'svelte-i18n';
   import Icon from '../../components/Icon.svelte';
   import { onMount } from 'svelte';
   import { characters } from '../../data/characters';
-  import { formatStat } from '../../helper';
+  import { formatStat, numberFormat } from '../../helper';
   import Ad from '../../components/Ad.svelte';
+  import Tooltip from '../../components/Tooltip.svelte';
 
   const rarity = {
     1: 'text-white',
@@ -63,7 +65,7 @@
   };
 
   /* prettier-ignore */
-  const showedIndex = [1, 6, 11, 16, 20, 21, 26, 31, 36, 41, 42, 47, 52, 53, 58, 63, 64, 69, 74, 75, 80, 85, 86, 91, 96];
+  let showedIndex = [1, 6, 11, 16, 20, 21, 26, 31, 36, 41, 42, 47, 52, 53, 58, 63, 64, 69, 74, 75, 80, 85, 86, 91, 96];
   const level = [1, 5, 10, 15, 20, 20, 25, 30, 35, 40, 40, 45, 50, 50, 55, 60, 60, 65, 70, 70, 75, 80, 80, 85, 90];
   const ascen = [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 2, 2, 2, 3, 3, 3, 4, 4, 4, 5, 5, 5, 6, 6, 6];
   const ascenSpan = [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3];
@@ -71,7 +73,12 @@
   export let id;
   export let weapon;
   export let recommendedCharacter;
-  // export let materials;
+  export let source;
+  export let ascensions;
+
+  if (weapon.rarity < 3) {
+    showedIndex = [1, 6, 11, 16, 20, 21, 26, 31, 36, 41, 42, 47, 52, 53, 58, 63, 64, 69, 74];
+  }
 
   async function changeLocale(locale) {
     const _data = await import(`../../data/weapons/${locale}.json`);
@@ -83,17 +90,14 @@
       changeLocale(val);
     });
   });
-
-  $: multiplier = weapon.secondary.name === 'em' ? 1 : 100;
-  $: suffix = weapon.secondary.name === 'em' ? '' : '%';
 </script>
 
 <svelte:head>
   <title>{weapon.name} - Paimon.moe</title>
 </svelte:head>
-<div class="lg:ml-64 pt-20 lg:pt-8 max-w-screen-xl md:pl-4">
+<div class="lg:ml-64 pt-20 lg:pt-8 max-w-screen-xl">
   <div class="flex flex-col-reverse xl:flex-row items-start">
-    <div class="px-4">
+    <div class="px-4 md:px-8">
       <h1 class="font-display font-black text-4xl md:text-5xl text-white">{weapon.name}</h1>
       <div class="{rarity[weapon.rarity]} text-2xl flex items-center z-0 -mt-2 md:-mt-4">
         {#each [...new Array(weapon.rarity)] as _}
@@ -101,6 +105,8 @@
         {/each}
         <Icon path={mdiCircle} size={0.4} className="mx-2 mt-1" color="white" />
         <p class="text-base text-white font-semibold mt-1">{$t(`weapon.${weapon.type}`)}</p>
+        <Icon path={mdiCircle} size={0.4} className="mx-2 mt-1" color="white" />
+        <p class="text-base text-white font-semibold mt-1 capitalize">{source}</p>
       </div>
       <p class="text-gray-200">{@html weapon.description.replace(/\\n/g, '<br/>')}</p>
       {#if weapon.skill.name}
@@ -136,57 +142,71 @@
           </div>
         </div>
       {/if}
-
-      <div class="mt-4 flex overflow-x-auto whitespace-nowrap md:w-auto">
-        <div style="width: min-content;">
-          <div class="table max-w-full rounded-xl border border-gray-200 border-opacity-25">
-            <table class="text-gray-200 w-full">
-              <tr>
-                <td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2">
-                  {$t('weapon.asc')}
-                </td>
-                <td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2">
-                  {$t('weapon.lvl')}
-                </td>
-                <td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2">
-                  {$t('weapon.baseAtk')}
-                </td>
-                {#if weapon.secondary.name}
-                  <td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2">
-                    {$t(`weapon.${weapon.secondary.name}`)}
-                  </td>
-                {/if}
-              </tr>
-              {#each showedIndex as index, i}
-                <tr>
-                  {#if [0, 5, 10, 13, 16, 19, 22].includes(i)}
-                    <td rowspan={ascenSpan[i]} class="text-center border-t border-gray-700 px-2">{ascen[i]}</td>
-                  {/if}
-                  <td class="text-center border-t border-gray-700 px-2">{level[i]}</td>
-                  <td class="text-center border-t border-gray-700 px-2">{Math.round(weapon.atk[index])}</td>
-                  {#if weapon.secondary.stats}
-                    <td class="text-center border-t border-gray-700 px-2">
-                      {formatStat(weapon.secondary.stats[index], weapon.secondary.name)}
-                    </td>
-                  {/if}
-                </tr>
-              {/each}
-            </table>
-          </div>
-        </div>
-        <div class="hidden lg:block">
-          <Ad type="desktop" variant="mpu" id="1" class="ml-8" />
-        </div>
-      </div>
     </div>
     <img class="h-64 w-auto ml-4 max-w-full" src="/images/weapons/{id}.png" alt={weapon.name} />
   </div>
+  <div class="mt-4 block overflow-x-auto whitespace-nowrap w-screen md:w-auto px-4 md:px-8">
+    <div class="table max-w-full rounded-xl border border-gray-200 border-opacity-25">
+      <table class="text-gray-200 w-full">
+        <tr>
+          <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
+            {$t('weapon.asc')}
+          </td>
+          <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
+            {$t('weapon.lvl')}
+          </td>
+          <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
+            {$t('weapon.baseAtk')}
+          </td>
+          {#if weapon.secondary.name}
+            <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
+              {$t(`weapon.${weapon.secondary.name}`)}
+            </td>
+          {/if}
+          <td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2">
+            {$t('weapon.ascensionMaterial')}
+          </td>
+        </tr>
+        {#each showedIndex as index, i}
+          <tr>
+            {#if [0, 5, 10, 13, 16, 19, 22].includes(i)}
+              <td rowspan={ascenSpan[i]} class="text-center border-t border-r border-gray-700 px-2">{ascen[i]}</td>
+            {/if}
+            <td class="text-center border-t border-r border-gray-700 px-2">{level[i]}</td>
+            <td class="text-center border-t border-r border-gray-700 px-2">{Math.round(weapon.atk[index])}</td>
+            {#if weapon.secondary.stats}
+              <td class="text-center border-t border-r border-gray-700 px-2">
+                {formatStat(weapon.secondary.stats[index], weapon.secondary.name)}
+              </td>
+            {/if}
+            {#if [0, 5, 10, 13, 16, 19, 22].includes(i)}
+              <td rowspan={ascenSpan[i]} class="text-center border-t border-gray-700 pl-2">
+                <span class="w-max inline-block">
+                  {#if ascen[i] > 0}
+                    {#each ascensions[ascen[i - 1]].items as obj}
+                      <Tooltip title={$t(obj.item.name)}>
+                        <span class="mr-2 bg-background rounded-xl">
+                          <img src="/images/items/{obj.item.id}.png" alt={obj.item} class="inline w-8 h-8" />
+                          <Icon size={0.5} path={mdiClose} /><span>{obj.amount}</span>
+                        </span>
+                      </Tooltip>
+                    {/each}
+                    <span class="pt-2 block">
+                      <img src="/images/mora.png" alt="mora" class="inline w-6 h-6" />
+                      <span>{numberFormat.format(ascensions[ascen[i - 1]].mora)}</span>
+                    </span>
+                  {/if}
+                </span>
+              </td>
+            {/if}
+          </tr>
+        {/each}
+      </table>
+    </div>
+    <div class="hidden lg:block">
+      <Ad type="desktop" variant="mpu" id="1" class="ml-8" />
+    </div>
+  </div>
   <Ad type="desktop" variant="lb" id="2" />
   <Ad type="mobile" variant="lb" id="1" />
 </div>
-
-<style lang="postcss">
-  td:not(:last-child) {
-    @apply border-r;
-  }
-</style>

src/routes/weapons/index.svelte

@@ -139,14 +139,16 @@
             <a href="/weapons/{weapon.id}" style="display: contents;">
               <tr class="cursor-pointer hover:bg-background">
                 <td class="border-gray-700 border-t py-1 text-center h-12">
-                  <img
-                    src="/images/weapons/{weapon.id}.png"
-                    alt={weapon.type}
-                    class="h-full w-auto inline"
-                    width="39"
-                    height="39"
-                    loading="lazy"
-                  />
+                  <span class="inline-block weapon">
+                    <img
+                      src="/images/weapons/{weapon.id}.png"
+                      alt={weapon.type}
+                      class="h-full w-auto inline"
+                      width="39"
+                      height="39"
+                      loading="lazy"
+                    />
+                  </span>
                 </td>
                 <td class="border-gray-700 border-t py-1 pl-4 pr-2">
                   {weapon.name}
@@ -171,3 +173,10 @@
   <Ad type="desktop" variant="lb" id="2" />
   <Ad type="mobile" variant="lb" id="1" />
 </div>
+
+<style lang="postcss">
+  .weapon {
+    width: 39px;
+    height: 39px;
+  }
+</style>

src/service-worker.js

@@ -7,7 +7,7 @@ const IMAGE_CACHE = `cacheimg${IMAGE_CACHE_VER}`;
 
 const IMAGE_URL = `${self.location.origin}/images/`;
 
-const changelog = ['Update timeline', 'Update locales'];
+const changelog = ['Update timeline', 'Update locales', 'Adjust weapon detail page'];
 
 const channel = new BroadcastChannel('paimonmoe-sw');