From 21b7928dce918d0971c26b374cbb8f9ed10fd1ec Mon Sep 17 00:00:00 2001
From: Made Baruna <made.setia@gmail.com>
Date: Fri, 1 Jul 2022 22:45:45 +0700
Subject: [PATCH] Add locale on character and weapon dropdown

---
 src/components/CharacterSelect.svelte | 120 +++++++++++++-------------
 src/components/WeaponSelect.svelte    | 117 +++++++++++++------------
 src/locales/en.json                   |   5 +-
 src/routes/wish/[id].svelte           |  12 ++-
 src/routes/wish/_summaryItem.svelte   |  12 ++-
 5 files changed, 145 insertions(+), 121 deletions(-)

diff --git a/src/components/CharacterSelect.svelte b/src/components/CharacterSelect.svelte
index c15613a5..b0d4f50a 100644
--- a/src/components/CharacterSelect.svelte
+++ b/src/components/CharacterSelect.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { t } from 'svelte-i18n';
   import { createEventDispatcher } from 'svelte';
   import VirtualList from './VirtualList.svelte';
   import { fade } from 'svelte/transition';
@@ -104,6 +105,67 @@
   $: iconClasses = focused ? 'transform rotate-180' : '';
 </script>
 
+<svelte:window on:click={onWindowClick} on:keydown={onKeyDown} />
+
+<div class="select-none relative" bind:this={container}>
+  <div
+    class={`flex w-full relative items-center px-4 bg-background rounded-2xl h-14 focus-within:outline-none 
+      focus-within:border-primary border-2 border-transparent ease-in duration-100 ${classes}`}
+    on:click={toggleOptions}
+  >
+    {#if !nothingSelected}
+      <img class="w-6 h-6 mr-2" src={`/images/characters/${selected.id}.png`} alt={selected.name} />
+    {/if}
+    <input
+      bind:this={input}
+      class={`bg-transparent focus:outline-none h-full max-w-full ${nothingSelected ? 'text-gray-500' : 'text-white'}`}
+      {placeholder}
+      value={nothingSelected || focused ? search : label}
+      on:input={onInput}
+    />
+    {#if selected}
+      <div class="absolute right-0 mr-4 cursor-pointer" on:click|stopPropagation={() => select(null)}>
+        <Icon path={mdiCloseCircle} color="white" className={`${iconClasses}`} />
+      </div>
+    {:else}
+      <Icon
+        path={mdiChevronDown}
+        color="white"
+        className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`}
+      />
+    {/if}
+  </div>
+  {#if focused}
+    <div
+      transition:fade={{ duration: 100 }}
+      class="options bg-item rounded-2xl absolute mt-2 pl-2 w-full min-h-full z-50 flex flex-col text-white shadow-xl border border-background"
+    >
+      {#if filteredCharacter.length}
+        <VirtualList
+          itemHeight={48}
+          height={`${maxItemRow * 48 + 16}px`}
+          items={filteredCharacter}
+          let:item={[id, character]}
+          let:index
+        >
+          <span
+            on:click={() => select(character)}
+            on:mouseenter={() => onHover(index)}
+            class={`p-3 rounded-xl cursor-pointer flex mr-2
+            ${index === 0 ? 'mt-2' : ''}
+            ${index === characters.length ? 'mb-2' : ''}
+            ${!nothingSelected && selected.id === id ? 'text-primary font-semibold' : ''}
+            ${hoveredIndex === index ? 'hovered' : ''}`}
+          >
+            <img class="w-6 h-6 mr-2" src={`/images/characters/${id}.png`} alt={character.name} />
+            <span class="flex-1">{$t(character.name)}</span>
+          </span>
+        </VirtualList>
+      {:else}<span class="p-3 rounded-xl cursor-pointer flex mr-2 my-2"> Character not found </span>{/if}
+    </div>
+  {/if}
+</div>
+
 <style>
   .hovered {
     @apply text-white !important;
@@ -115,61 +177,3 @@
     overflow-y: auto;
   }
 </style>
-
-<svelte:window on:click={onWindowClick} on:keydown={onKeyDown} />
-
-<div class="select-none relative" bind:this={container}>
-  <div
-    class={`flex w-full relative items-center px-4 bg-background rounded-2xl h-14 focus-within:outline-none 
-      focus-within:border-primary border-2 border-transparent ease-in duration-100 ${classes}`}
-    on:click={toggleOptions}>
-    {#if !nothingSelected}
-      <img class="w-6 h-6 mr-2" src={`/images/characters/${selected.id}.png`} alt={selected.name} />
-    {/if}
-    <input
-      bind:this={input}
-      class={`bg-transparent focus:outline-none h-full max-w-full ${nothingSelected ? 'text-gray-500' : 'text-white'}`}
-      {placeholder}
-      value={nothingSelected || focused ? search : label}
-      on:input={onInput} />
-    {#if selected}
-      <div class="absolute right-0 mr-4 cursor-pointer" on:click|stopPropagation={() => select(null)}>
-        <Icon
-          path={mdiCloseCircle}
-          color="white"
-          className={`${iconClasses}`} />
-      </div>
-    {:else}
-      <Icon
-        path={mdiChevronDown}
-        color="white"
-        className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`} />
-    {/if}
-  </div>
-  {#if focused}
-    <div
-      transition:fade={{ duration: 100 }}
-      class="options bg-item rounded-2xl absolute mt-2 pl-2 w-full min-h-full z-50 flex flex-col text-white shadow-xl border border-background">
-      {#if filteredCharacter.length}
-        <VirtualList
-          itemHeight={48}
-          height={`${maxItemRow * 48 + 16}px`}
-          items={filteredCharacter}
-          let:item={[id, character]}
-          let:index>
-          <span
-            on:click={() => select(character)}
-            on:mouseenter={() => onHover(index)}
-            class={`p-3 rounded-xl cursor-pointer flex mr-2
-            ${index === 0 ? 'mt-2' : ''}
-            ${index === characters.length ? 'mb-2' : ''}
-            ${!nothingSelected && selected.id === id ? 'text-primary font-semibold' : ''}
-            ${hoveredIndex === index ? 'hovered' : ''}`}>
-            <img class="w-6 h-6 mr-2" src={`/images/characters/${id}.png`} alt={character.name} />
-            <span class="flex-1">{character.name}</span>
-          </span>
-        </VirtualList>
-      {:else}<span class="p-3 rounded-xl cursor-pointer flex mr-2 my-2"> Character not found </span>{/if}
-    </div>
-  {/if}
-</div>
diff --git a/src/components/WeaponSelect.svelte b/src/components/WeaponSelect.svelte
index e7161dfe..28fa8367 100644
--- a/src/components/WeaponSelect.svelte
+++ b/src/components/WeaponSelect.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { t } from 'svelte-i18n';
   import { createEventDispatcher } from 'svelte';
   import VirtualList from './VirtualList.svelte';
   import { fade } from 'svelte/transition';
@@ -106,6 +107,67 @@
   $: iconClasses = focused ? 'transform rotate-180' : '';
 </script>
 
+<svelte:window on:click={onWindowClick} on:keydown={onKeyDown} />
+
+<div class="select-none relative" bind:this={container}>
+  <div
+    class={`flex w-full relative items-center px-4 bg-background rounded-2xl h-14 focus-within:outline-none 
+      focus-within:border-primary border-2 border-transparent ease-in duration-100 ${classes}`}
+    on:click={toggleOptions}
+  >
+    {#if !nothingSelected}
+      <img class="w-6 h-6 mr-2" src={`/images/weapons/${selected.id}.png`} alt={selected.name} />
+    {/if}
+    <input
+      bind:this={input}
+      class={`bg-transparent focus:outline-none h-full max-w-full ${nothingSelected ? 'text-gray-500' : 'text-white'}`}
+      {placeholder}
+      value={nothingSelected || focused ? search : label}
+      on:input={onInput}
+    />
+    {#if selected}
+      <div class="absolute right-0 mr-4 cursor-pointer" on:click|stopPropagation={() => select(null)}>
+        <Icon path={mdiCloseCircle} color="white" className={`${iconClasses}`} />
+      </div>
+    {:else}
+      <Icon
+        path={mdiChevronDown}
+        color="white"
+        className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`}
+      />
+    {/if}
+  </div>
+  {#if focused}
+    <div
+      transition:fade={{ duration: 100 }}
+      class="options bg-item rounded-2xl absolute mt-2 pl-2 w-full min-h-full z-50 flex flex-col text-white shadow-xl border border-background"
+    >
+      {#if filteredWeapons.length}
+        <VirtualList
+          itemHeight={48}
+          height={`${maxItemRow * 48 + 16}px`}
+          items={filteredWeapons}
+          let:item={[id, weapon]}
+          let:index
+        >
+          <span
+            on:click={() => select(weapon)}
+            on:mouseenter={() => onHover(index)}
+            class={`p-3 rounded-xl cursor-pointer flex mr-2
+            ${index === 0 ? 'mt-2' : ''}
+            ${index === weapons.length ? 'mb-2' : ''}
+            ${!nothingSelected && selected.id === id ? 'text-primary font-semibold' : ''}
+            ${hoveredIndex === index ? 'hovered' : ''}`}
+          >
+            <img class="w-6 h-6 mr-2" src={`/images/weapons/${id}.png`} alt={weapon.name} />
+            <span class="flex-1">{$t(weapon.name)}</span>
+          </span>
+        </VirtualList>
+      {:else}<span class="p-3 rounded-xl cursor-pointer flex mr-2 my-2"> Weapon not found </span>{/if}
+    </div>
+  {/if}
+</div>
+
 <style>
   .hovered {
     @apply text-white !important;
@@ -117,58 +179,3 @@
     overflow-y: auto;
   }
 </style>
-
-<svelte:window on:click={onWindowClick} on:keydown={onKeyDown} />
-
-<div class="select-none relative" bind:this={container}>
-  <div
-    class={`flex w-full relative items-center px-4 bg-background rounded-2xl h-14 focus-within:outline-none 
-      focus-within:border-primary border-2 border-transparent ease-in duration-100 ${classes}`}
-    on:click={toggleOptions}>
-    {#if !nothingSelected}
-      <img class="w-6 h-6 mr-2" src={`/images/weapons/${selected.id}.png`} alt={selected.name} />
-    {/if}
-    <input
-      bind:this={input}
-      class={`bg-transparent focus:outline-none h-full max-w-full ${nothingSelected ? 'text-gray-500' : 'text-white'}`}
-      {placeholder}
-      value={nothingSelected || focused ? search : label}
-      on:input={onInput} />
-    {#if selected}
-      <div class="absolute right-0 mr-4 cursor-pointer" on:click|stopPropagation={() => select(null)}>
-        <Icon path={mdiCloseCircle} color="white" className={`${iconClasses}`} />
-      </div>
-    {:else}
-      <Icon
-        path={mdiChevronDown}
-        color="white"
-        className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`} />
-    {/if}
-  </div>
-  {#if focused}
-    <div
-      transition:fade={{ duration: 100 }}
-      class="options bg-item rounded-2xl absolute mt-2 pl-2 w-full min-h-full z-50 flex flex-col text-white shadow-xl border border-background">
-      {#if filteredWeapons.length}
-        <VirtualList
-          itemHeight={48}
-          height={`${maxItemRow * 48 + 16}px`}
-          items={filteredWeapons}
-          let:item={[id, weapon]}
-          let:index>
-          <span
-            on:click={() => select(weapon)}
-            on:mouseenter={() => onHover(index)}
-            class={`p-3 rounded-xl cursor-pointer flex mr-2
-            ${index === 0 ? 'mt-2' : ''}
-            ${index === weapons.length ? 'mb-2' : ''}
-            ${!nothingSelected && selected.id === id ? 'text-primary font-semibold' : ''}
-            ${hoveredIndex === index ? 'hovered' : ''}`}>
-            <img class="w-6 h-6 mr-2" src={`/images/weapons/${id}.png`} alt={weapon.name} />
-            <span class="flex-1">{weapon.name}</span>
-          </span>
-        </VirtualList>
-      {:else}<span class="p-3 rounded-xl cursor-pointer flex mr-2 my-2"> Weapon not found </span>{/if}
-    </div>
-  {/if}
-</div>
diff --git a/src/locales/en.json b/src/locales/en.json
index fe99efce..005cbadc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -445,7 +445,8 @@
       "percent": "Percent",
       "pityAverage": "Pity AVG",
       "character": "Character",
-      "weapon": "Weapon"
+      "weapon": "Weapon",
+      "winRateOff": "Win 50:50"
     },
     "note": [
       "Wish history is not updated automatically, please import again to update your history!",
@@ -939,4 +940,4 @@
     "dataSynced": "Data has been synced!",
     "driveError": "Drive sync not available right now 😔"
   }
-}
+}
\ No newline at end of file
diff --git a/src/routes/wish/[id].svelte b/src/routes/wish/[id].svelte
index 035a4d23..124cb428 100644
--- a/src/routes/wish/[id].svelte
+++ b/src/routes/wish/[id].svelte
@@ -673,9 +673,12 @@
             class="bg-background px-4 py-2 rounded-xl flex flex-col items-center justify-center mr-4"
             style="height: 200px;"
           >
-            <p class="text-gray-400 font-body">Total</p>
+            <p class="text-gray-400 font-body">{$t('wish.summary.total')}</p>
             <p class="text-gray-400 font-body text-xl font-bold">{total}</p>
-            <p class="text-gray-400 font-body mt-2 flex items-center">5<Icon size={0.7} path={mdiStar} /> Pity</p>
+            <p class="text-gray-400 font-body mt-2 flex items-center">
+              5<Icon size={0.7} path={mdiStar} />
+              {$t('wish.detail.pity')}
+            </p>
             <p class="text-legendary-from font-body text-xl font-bold flex items-center">
               {legendary}
               {#if nextRateUp}
@@ -685,7 +688,10 @@
                 </span>
               {/if}
             </p>
-            <p class="text-gray-400 font-body mt-2 flex items-center">4<Icon size={0.7} path={mdiStar} /> Pity</p>
+            <p class="text-gray-400 font-body mt-2 flex items-center">
+              4<Icon size={0.7} path={mdiStar} />
+              {$t('wish.detail.pity')}
+            </p>
             <p class="text-rare-from font-body text-xl font-bold">{rare}</p>
           </div>
           <div class="bg-background rounded-xl inline-block mb-4 p-2 pie-chart mr-4">
diff --git a/src/routes/wish/_summaryItem.svelte b/src/routes/wish/_summaryItem.svelte
index d9677e85..9defc128 100644
--- a/src/routes/wish/_summaryItem.svelte
+++ b/src/routes/wish/_summaryItem.svelte
@@ -77,7 +77,9 @@
       </td>
     </tr>
     <tr>
-      <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700"> └ {$t('wish.summary.character')} </td>
+      <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700">
+        └ {$t('wish.summary.character')}
+      </td>
       <td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
         {numberFormat.format(avg.rare.character.total)}
       </td>
@@ -89,7 +91,9 @@
       </td>
     </tr>
     <tr>
-      <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700"> └ {$t('wish.summary.weapon')} </td>
+      <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700">
+        └ {$t('wish.summary.weapon')}
+      </td>
       <td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
         {numberFormat.format(avg.rare.weapon.total)}
       </td>
@@ -102,7 +106,9 @@
     </tr>
     {#if avg.rare.rateOff !== undefined}
       <tr>
-        <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700"> └ Win 50:50 </td>
+        <td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700">
+          └ {$t('wish.summary.winRateOff')}
+        </td>
         <td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
           {numberFormat.format(avg.rare.rateOff.total)}
         </td>