From 25949b23448f37c70afcbcfd27ed7bb4b9c30945 Mon Sep 17 00:00:00 2001
From: Made Baruna <made.setia@gmail.com>
Date: Sun, 26 Sep 2021 00:19:48 +0700
Subject: [PATCH] Update weapon stat numbering format

---
 src/helper.js                     |  7 ++++++
 src/locales/en.json               |  1 +
 src/routes/characters/[id].svelte | 36 ++++++++++++++++++++++---------
 src/routes/weapons/[id].svelte    | 14 +++++++++---
 src/routes/weapons/index.svelte   | 14 ++++++++----
 5 files changed, 55 insertions(+), 17 deletions(-)
 create mode 100644 src/helper.js

diff --git a/src/helper.js b/src/helper.js
new file mode 100644
index 00000000..9f7b2205
--- /dev/null
+++ b/src/helper.js
@@ -0,0 +1,7 @@
+export function formatStat(value, type) {
+  if (type !== 'em') {
+    return `${Math.round(value * 100 * 10) / 10}%`;
+  }
+
+  return Math.round(value);
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index b2b6b276..494a83f3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -109,6 +109,7 @@
     "geoDamageBonus": "Geo DMG Bonus",
     "sortBy": "Sort by...",
     "talentBook": "Talent Book",
+    "bossItem": "Boss",
     "ascensionMaterial": "Ascension Materials",
     "talentStats": "Talent Stats",
     "build": "Build",
diff --git a/src/routes/characters/[id].svelte b/src/routes/characters/[id].svelte
index 05d7a249..ac8a885d 100644
--- a/src/routes/characters/[id].svelte
+++ b/src/routes/characters/[id].svelte
@@ -31,6 +31,7 @@
   import artifacts from '../../data/artifacts/en.json';
   import weapons from '../../data/weapons/en.json';
   import Ad from '../../components/Ad.svelte';
+  import { formatStat } from '../../helper';
 
   const rarityColor = {
     1: 'text-white',
@@ -94,6 +95,7 @@
   const bookId = character.material.book[0].id;
   const book = itemGroup[bookId];
   const materials = character.ascension[1].items;
+  const bossItem = character.material.boss;
 
   let chars = {};
   let constellationCount = -1;
@@ -253,13 +255,28 @@
         </div>
         <p class="text-gray-200 px-4 md:px-8">{data.description}</p>
         <div class="flex flex-col md:flex-row mt-4 space-y-4 md:space-y-0 md:space-x-4 px-4 md:px-8">
-          <div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
-            <p>{$t('characters.talentBook')}</p>
-            <div class="flex items-center mt-2">
-              <div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
-                <img src="/images/items/{bookId}.png" alt={book.name} class="h-full max-w-full object-contain" />
+          <div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4 flex">
+            <div class="mr-4">
+              <p>{$t('characters.talentBook')}</p>
+              <div class="flex items-center mt-2">
+                <div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
+                  <img src="/images/items/{bookId}.png" alt={book.name} class="h-full max-w-full object-contain" />
+                </div>
+                <p class="mb-1 font-semibold">{book.name}</p>
+              </div>
+            </div>
+            <div>
+              <p>{$t('characters.bossItem')}</p>
+              <div class="flex items-center mt-2">
+                <div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
+                  <img
+                    src="/images/items/{bossItem.id}.png"
+                    alt={bossItem.name}
+                    title={bossItem.name}
+                    class="h-full max-w-full object-contain"
+                  />
+                </div>
               </div>
-              <p class="mb-1 font-semibold">{book.name}</p>
             </div>
           </div>
           <div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
@@ -454,10 +471,7 @@
                           {$t(`weapon.${weapons[weapon.id].secondary.name}`)}
                         </p>
                         <p class="text-gray-900 text-sm">
-                          {Math.round(
-                            weapons[weapon.id].secondary.stats[96] *
-                              (weapons[weapon.id].secondary.name === 'em' ? 1 : 100),
-                          )}{weapons[weapon.id].secondary.name === 'em' ? '' : '%'}
+                          {formatStat(weapons[weapon.id].secondary.stats[96], weapons[weapon.id].secondary.name)}
                         </p>
                       </div>
                     {/if}
@@ -572,6 +586,7 @@
     {$t('characters.source')}
   </a>
   <Ad class="ml-8 mt-4 mb-2" type="desktop" variant="lb" id="1" />
+  <Ad type="desktop" variant="lb" id="2" />
   <div class="flex flex-col mt-4 text-white px-4 md:px-8 max-w-screen-xl" bind:this={talentDiv}>
     <a href="/characters/{id}/#talents" class="font-black font-display text-2xl mt-4">
       {$t('characters.talents')}
@@ -588,6 +603,7 @@
   </div>
   <Ad class="ml-8 mt-4 mb-2" type="desktop" variant="lb" id="3" />
   <Ad class="flex justify-center mt-4 mb-2" type="mobile" variant="mpu" id="1" />
+  <Ad type="mobile" variant="lb" id="1" />
   <div class="flex flex-col text-white px-4 md:px-8 max-w-screen-xl" id="constellations" bind:this={constellationDiv}>
     <a href="/characters/{id}/#constellations" class="font-black font-display text-2xl mt-4">
       {$t('characters.constellations')}
diff --git a/src/routes/weapons/[id].svelte b/src/routes/weapons/[id].svelte
index daafc2d9..7a754d09 100644
--- a/src/routes/weapons/[id].svelte
+++ b/src/routes/weapons/[id].svelte
@@ -51,6 +51,8 @@
   import Icon from '../../components/Icon.svelte';
   import { onMount } from 'svelte';
   import { characters } from '../../data/characters';
+  import { formatStat } from '../../helper';
+  import Ad from '../../components/Ad.svelte';
 
   const rarity = {
     1: 'text-white',
@@ -107,6 +109,7 @@
           <p class="skill-description text-white">{@html weapon.skill.description}</p>
         </div>
       {/if}
+      <Ad type="mobile" variant="mpu" id="1" class="flex justify-center mt-4" />
       {#if recommendedCharacter.length > 0}
         <div class="mt-4 max-w-screen-lg">
           <h3 class="font-display font-bold text-2xl text-white">
@@ -134,7 +137,7 @@
         </div>
       {/if}
 
-      <div class="mt-4 block overflow-x-auto whitespace-no-wrap md:w-auto">
+      <div class="mt-4 flex overflow-x-auto whitespace-no-wrap 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">
@@ -163,7 +166,7 @@
                   <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">
-                      {Math.round(weapon.secondary.stats[index] * multiplier)}{suffix}
+                      {formatStat(weapon.secondary.stats[index], weapon.secondary.name)}
                     </td>
                   {/if}
                 </tr>
@@ -171,10 +174,15 @@
             </table>
           </div>
         </div>
+        <div class="hidden lg:block">
+          <Ad type="desktop" variant="mpu" id="1" class="ml-8" />
+        </div>
       </div>
     </div>
-    <img class="w-64 h-64 ml-4 max-w-full" src="/images/weapons/{id}.png" alt={weapon.name} />
+    <img class="h-64 w-auto ml-4 max-w-full" src="/images/weapons/{id}.png" alt={weapon.name} />
   </div>
+  <Ad type="desktop" variant="lb" id="2" />
+  <Ad type="mobile" variant="lb" id="1" />
 </div>
 
 <style>
diff --git a/src/routes/weapons/index.svelte b/src/routes/weapons/index.svelte
index a39cbf23..cd27c9d1 100644
--- a/src/routes/weapons/index.svelte
+++ b/src/routes/weapons/index.svelte
@@ -9,6 +9,8 @@
   import { onMount } from 'svelte';
   import { locale, t } from 'svelte-i18n';
   import TableHeader from '../../components/Table/TableHeader.svelte';
+  import { formatStat } from '../../helper';
+  import Ad from '../../components/Ad.svelte';
 
   export let data;
   let weaponList = [];
@@ -42,9 +44,10 @@
         rarity: weapon.rarity,
         atk: weapon.atk[weapon.atk.length - 1].toFixed(0),
         secondary: weapon.secondary.name
-          ? `${$t(`weapon.${weapon.secondary.name}`)} ${(
-              weapon.secondary.stats[weapon.secondary.stats.length - 1] * (weapon.secondary.name === 'em' ? 1 : 100)
-            ).toFixed(0)}${weapon.secondary.name === 'em' ? '' : '%'}`
+          ? `${$t(`weapon.${weapon.secondary.name}`)} ${formatStat(
+              weapon.secondary.stats[weapon.secondary.stats.length - 1],
+              weapon.secondary.name,
+            )}`
           : '-',
       });
     }
@@ -112,7 +115,8 @@
   <p class="text-gray-400 px-4 md:px-8 font-medium pb-4" style="margin-top: -1rem;">
     ※ {$t('weapon.subtitle')}
   </p>
-  <div class="block overflow-x-auto whitespace-no-wrap pb-8">
+  <div class="block overflow-x-auto whitespace-no-wrap pb-8 relative">
+    <Ad type="desktop" variant="mpu" id="1" class="absolute top-0" style="right: 50px;" />
     <div class="px-4 md:px-8 table max-w-full">
       <table class="w-full block p-4 bg-item rounded-xl">
         <thead>
@@ -160,4 +164,6 @@
       </table>
     </div>
   </div>
+  <Ad type="desktop" variant="lb" id="2" />
+  <Ad type="mobile" variant="lb" id="1" />
 </div>