From dd96b2323bdbc30cb25beb1ee5e923ff5d12d18e Mon Sep 17 00:00:00 2001
From: fadhlu <fadhlurahman.i@gmail.com>
Date: Wed, 17 Mar 2021 01:57:40 +0700
Subject: [PATCH 1/6] add resin section

---
 src/locales/en.json                 |  8 ++++
 src/locales/id.json                 |  8 ++++
 src/routes/calculator/_resin.svelte | 68 +++++++++++++++++++++++++++++
 src/routes/calculator/index.svelte  |  8 ++++
 src/stores/time.js                  | 11 +++++
 5 files changed, 103 insertions(+)
 create mode 100644 src/routes/calculator/_resin.svelte
 create mode 100644 src/stores/time.js

diff --git a/src/locales/en.json b/src/locales/en.json
index 40682bc0..5a19ac50 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -132,6 +132,7 @@
   "calculator": {
     "titleWeapon": "Weapon Calculator",
     "titleCharacter": "Character Calculator",
+    "titleResin": "Resin Calculator",
     "goto": "Go To",
     "howToUse": "How to Use",
     "guide": {
@@ -184,6 +185,13 @@
       "items": "Items",
       "wasted": "Wasted Exp",
       "mora": "Mora Cost"
+    },
+    "resin": {
+      "inputCurrentResin": "Input Current Resin...",
+      "timeFormat": "en",
+      "calculate": "Calculate",
+      "currentTime": "Current Time",
+      "fullTime": "Your Resin Will Replenished After"
     }
   },
   "items": {
diff --git a/src/locales/id.json b/src/locales/id.json
index 342101eb..8312dbd4 100644
--- a/src/locales/id.json
+++ b/src/locales/id.json
@@ -132,6 +132,7 @@
   "calculator": {
     "titleWeapon": "Kalulator Senjata",
     "titleCharacter": "Kalkulator Karakter",
+    "titleResin": "Kalkulator Resin",
     "goto": "Ke",
     "howToUse": "Cara Penggunaan",
     "guide": {
@@ -184,6 +185,13 @@
       "items": "Items",
       "wasted": "Exp Terbuang",
       "mora": "Jumlah Mora"
+    },
+    "resin": {
+      "inputCurrentResin": "Masukkan Jumlah Resin Sekarang...",
+      "timeFormat": "id",
+      "calculate": "Hitung",
+      "currentTime": "Waktu Sekarang",
+      "fullTime": "Resin Akan Penuh Pada"
     }
   },
   "items": {
diff --git a/src/routes/calculator/_resin.svelte b/src/routes/calculator/_resin.svelte
new file mode 100644
index 00000000..64951e2d
--- /dev/null
+++ b/src/routes/calculator/_resin.svelte
@@ -0,0 +1,68 @@
+<script>
+  import { t } from 'svelte-i18n';
+  import Button from '../../components/Button.svelte';
+  import Input from '../../components/Input.svelte';
+  import { time } from '../../stores/time';
+
+  let changed = false;
+  let currentResin;
+  let maxResin = 160;
+  let millisecondsToWait;
+  let fullTime = null;
+
+  // 8 menit per resin * 60 seconds * 1000 millisec
+  let minutePerResin = 8 * 60 * 1000;
+
+  let dateTimeOptions = {
+    hour12: true,
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+    weekday: 'long',
+  };
+
+  function calculate() {
+    millisecondsToWait = (maxResin - currentResin) * minutePerResin;
+    fullTime = new Date($time.getTime() + millisecondsToWait);
+  }
+
+  function onChange() {
+    changed = true;
+  }
+</script>
+
+<div class="bg-item rounded-xl p-4">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+    <!-- input -->
+    <div>
+      <Input
+        className="mb-2"
+        on:change={onChange}
+        type="number"
+        min={0}
+        max={160}
+        bind:value={currentResin}
+        placeholder={$t('calculator.resin.inputCurrentResin')}
+      />
+      <p class="text-white text-center mt-3 mb-2">
+        {$t('calculator.resin.currentTime')}: {new Intl.DateTimeFormat(
+          $t('calculator.resin.timeFormat'),
+          dateTimeOptions,
+        ).format($time)}
+      </p>
+      {#if fullTime}
+        <p class="text-white text-center mt-3 mb-2">
+          {$t('calculator.resin.fullTime')} : {new Intl.DateTimeFormat(
+            $t('calculator.resin.timeFormat'),
+            dateTimeOptions,
+          ).format(fullTime)}
+        </p>
+      {/if}
+    </div>
+    <div class="md:col-span-2 xl:col-span-1">
+      <Button disabled={!currentResin} className="block w-full md:w-auto" on:click={calculate}
+        >{$t('calculator.resin.calculate')}</Button
+      >
+    </div>
+  </div>
+</div>
diff --git a/src/routes/calculator/index.svelte b/src/routes/calculator/index.svelte
index 3fe9ad0e..be55f08f 100644
--- a/src/routes/calculator/index.svelte
+++ b/src/routes/calculator/index.svelte
@@ -7,6 +7,7 @@
   import WeaponCalculator from './_weapon.svelte';
   import CharacterCalculator from './_character.svelte';
   import LevelUpTable from './_characterTable.svelte';
+  import ResinCalculator from './_resin.svelte';
   import Button from '../../components/Button.svelte';
   import Icon from '../../components/Icon.svelte';
   import HowToModal from '../../components/CalculatorHowToModal.svelte';
@@ -91,5 +92,12 @@
   </div>
   <CharacterCalculator />
   <div class="mt-8" />
+  <h1
+    class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
+  >
+    {$t('calculator.titleResin')}
+  </h1>
+  <ResinCalculator />
+  <div class="mt-8" />
   <LevelUpTable />
 </div>
diff --git a/src/stores/time.js b/src/stores/time.js
new file mode 100644
index 00000000..c131bcec
--- /dev/null
+++ b/src/stores/time.js
@@ -0,0 +1,11 @@
+import { readable } from 'svelte/store';
+
+export const time = readable(new Date(), function start(set) {
+  const interval = setInterval(() => {
+    set(new Date());
+  }, 1000);
+
+  return function stop() {
+    clearInterval(interval);
+  };
+});

From cbf73f857fd38fe4e83779393b082da77d4bae65 Mon Sep 17 00:00:00 2001
From: fadhlu <fadhlurahman.i@gmail.com>
Date: Wed, 17 Mar 2021 02:25:50 +0700
Subject: [PATCH 2/6] Update result placement

---
 src/routes/calculator/_resin.svelte | 56 +++++++++++++++++++++++------
 1 file changed, 45 insertions(+), 11 deletions(-)

diff --git a/src/routes/calculator/_resin.svelte b/src/routes/calculator/_resin.svelte
index 64951e2d..079c86e3 100644
--- a/src/routes/calculator/_resin.svelte
+++ b/src/routes/calculator/_resin.svelte
@@ -1,17 +1,29 @@
 <script>
   import { t } from 'svelte-i18n';
+  import { time } from '../../stores/time';
+  import { fade } from 'svelte/transition';
+  import { mdiStar, mdiClose, mdiInformationOutline, mdiCheckCircleOutline } from '@mdi/js';
+
   import Button from '../../components/Button.svelte';
   import Input from '../../components/Input.svelte';
-  import { time } from '../../stores/time';
+  import Icon from '../../components/Icon.svelte';
 
   let changed = false;
   let currentResin;
   let maxResin = 160;
   let millisecondsToWait;
   let fullTime = null;
+  let missingResin = 160;
+
+  let originalResin = {
+    id: 'original_resin',
+    image: '/images/resin.png',
+    label: 'Original Resin',
+    value: 8,
+  };
 
   // 8 menit per resin * 60 seconds * 1000 millisec
-  let minutePerResin = 8 * 60 * 1000;
+  let minutePerResin = originalResin.value * 60 * 1000;
 
   let dateTimeOptions = {
     hour12: true,
@@ -22,7 +34,8 @@
   };
 
   function calculate() {
-    millisecondsToWait = (maxResin - currentResin) * minutePerResin;
+    missingResin = maxResin - currentResin;
+    millisecondsToWait = missingResin * minutePerResin;
     fullTime = new Date($time.getTime() + millisecondsToWait);
   }
 
@@ -50,19 +63,40 @@
           dateTimeOptions,
         ).format($time)}
       </p>
-      {#if fullTime}
-        <p class="text-white text-center mt-3 mb-2">
-          {$t('calculator.resin.fullTime')} : {new Intl.DateTimeFormat(
-            $t('calculator.resin.timeFormat'),
-            dateTimeOptions,
-          ).format(fullTime)}
-        </p>
-      {/if}
     </div>
     <div class="md:col-span-2 xl:col-span-1">
       <Button disabled={!currentResin} className="block w-full md:w-auto" on:click={calculate}
         >{$t('calculator.resin.calculate')}</Button
       >
+      {#if fullTime}
+        <div transition:fade={{ duration: 100 }} class="bg-background rounded-xl p-4 mt-2 block md:inline-block">
+          <tr>
+            <td class="text-right border-b border-gray-700 py-1">
+              <span class="text-white mr-2 whitespace-no-wrap"
+                >{missingResin}
+                <Icon size={0.5} path={mdiClose} /></span
+              >
+            </td>
+            <td class="border-b border-gray-700 py-1">
+              <span class="text-white">
+                <span class="w-6 inline-block">
+                  <img class="h-6 inline-block mr-1" src={originalResin.image} alt={originalResin.label} />
+                </span>
+                {originalResin.label}
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td />
+            <td class="text-red-400 py-1">
+              {$t('calculator.resin.fullTime')}: {new Intl.DateTimeFormat(
+                $t('calculator.resin.timeFormat'),
+                dateTimeOptions,
+              ).format(fullTime)}</td
+            >
+          </tr>
+        </div>
+      {/if}
     </div>
   </div>
 </div>

From 8d09e56bec9a7e6a1ec21454c0da70a4aa89d5d7 Mon Sep 17 00:00:00 2001
From: fadhlu <fadhlurahman.i@gmail.com>
Date: Wed, 17 Mar 2021 02:31:18 +0700
Subject: [PATCH 3/6] Fix typo

---
 src/locales/id.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/locales/id.json b/src/locales/id.json
index 8312dbd4..31e79a16 100644
--- a/src/locales/id.json
+++ b/src/locales/id.json
@@ -130,7 +130,7 @@
     }
   },
   "calculator": {
-    "titleWeapon": "Kalulator Senjata",
+    "titleWeapon": "Kalkulator Senjata",
     "titleCharacter": "Kalkulator Karakter",
     "titleResin": "Kalkulator Resin",
     "goto": "Ke",

From b5a73c6e4806ca6733227188b53524f2c4a6fc7f Mon Sep 17 00:00:00 2001
From: fadhlu <fadhlurahman.i@gmail.com>
Date: Wed, 17 Mar 2021 03:24:02 +0700
Subject: [PATCH 4/6] Add margin

---
 src/routes/calculator/index.svelte | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/routes/calculator/index.svelte b/src/routes/calculator/index.svelte
index be55f08f..be019bed 100644
--- a/src/routes/calculator/index.svelte
+++ b/src/routes/calculator/index.svelte
@@ -91,12 +91,13 @@
     </h1>
   </div>
   <CharacterCalculator />
-  <div class="mt-8" />
-  <h1
-    class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
-  >
-    {$t('calculator.titleResin')}
-  </h1>
+  <div class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2">
+    <h1
+      class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
+    >
+      {$t('calculator.titleResin')}
+    </h1>
+  </div>
   <ResinCalculator />
   <div class="mt-8" />
   <LevelUpTable />

From 46f586a803fbd856dba4daf7942cc05c1247cb88 Mon Sep 17 00:00:00 2001
From: fadhlu <fadhlurahman.i@gmail.com>
Date: Wed, 17 Mar 2021 12:04:01 +0700
Subject: [PATCH 5/6] Change sroll method to findPos

---
 src/routes/calculator/index.svelte | 49 +++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/routes/calculator/index.svelte b/src/routes/calculator/index.svelte
index be019bed..62645bc0 100644
--- a/src/routes/calculator/index.svelte
+++ b/src/routes/calculator/index.svelte
@@ -16,6 +16,7 @@
 
   let weaponCalc;
   let characterCalc;
+  let resinCalc;
 
   function openHowTo() {
     openModal(
@@ -28,16 +29,22 @@
     );
   }
 
-  export function scroll(type) {
-    const elementPosition =
-      type === 'character' ? characterCalc.getBoundingClientRect().top : weaponCalc.getBoundingClientRect().top;
-    const headerOffset = 80;
-    const offsetPosition = elementPosition - headerOffset;
+  export function findPos(id) {
+    let node = document.getElementById(id);
+    let curtop = 0;
+    let curtopscroll = 0;
+    let headerOffset = 40;
+    if (node.offsetParent) {
+      do {
+        curtop += node.offsetTop;
+        curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
+      } while ((node = node.offsetParent));
 
-    window.scrollTo({
-      top: offsetPosition,
-      behavior: 'smooth',
-    });
+      window.scrollTo({
+        top: curtop - curtopscroll - headerOffset,
+        behavior: 'smooth',
+      });
+    }
   }
 </script>
 
@@ -60,14 +67,15 @@
     </Button>
   </div>
   <div
+    id="weapon"
     class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mb-2"
-    bind:this={weaponCalc}
   >
-    <Button on:click={() => scroll('character')}>
+    <Button on:click={() => findPos('character')}>
       <Icon size={0.8} path={mdiArrowDown} />
       {$t('calculator.goto')}
       {$t('calculator.titleCharacter')}
     </Button>
+
     <h1
       class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
     >
@@ -76,14 +84,19 @@
   </div>
   <WeaponCalculator />
   <div
+    id="character"
     class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
-    bind:this={characterCalc}
   >
-    <Button on:click={() => scroll('weapon')}>
+    <Button on:click={() => findPos('weapon')}>
       <Icon size={0.8} path={mdiArrowUp} />
       {$t('calculator.goto')}
       {$t('calculator.titleWeapon')}
     </Button>
+    <Button className="md:mb-0 md:ml-4 mb-4" on:click={() => findPos('resin')}>
+      <Icon size={0.8} path={mdiArrowDown} />
+      {$t('calculator.goto')}
+      {$t('calculator.titleResin')}
+    </Button>
     <h1
       class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
     >
@@ -91,7 +104,15 @@
     </h1>
   </div>
   <CharacterCalculator />
-  <div class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2">
+  <div
+    id="resin"
+    class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
+  >
+    <Button on:click={() => findPos('character')}>
+      <Icon size={0.8} path={mdiArrowUp} />
+      {$t('calculator.goto')}
+      {$t('calculator.titleCharacter')}
+    </Button>
     <h1
       class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
     >

From 024608ecb73055255ca8821168402316f37dd3b6 Mon Sep 17 00:00:00 2001
From: fadhlu <fadhlurahman.i@gmail.com>
Date: Wed, 17 Mar 2021 13:05:28 +0700
Subject: [PATCH 6/6] Update grid layout

---
 src/locales/en.json                 |  2 +-
 src/routes/calculator/_resin.svelte | 34 ++++++++++++++---------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 5a19ac50..be7936da 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -191,7 +191,7 @@
       "timeFormat": "en",
       "calculate": "Calculate",
       "currentTime": "Current Time",
-      "fullTime": "Your Resin Will Replenished After"
+      "fullTime": "Resin Will Be Replenished At"
     }
   },
   "items": {
diff --git a/src/routes/calculator/_resin.svelte b/src/routes/calculator/_resin.svelte
index 079c86e3..fddf1bb3 100644
--- a/src/routes/calculator/_resin.svelte
+++ b/src/routes/calculator/_resin.svelte
@@ -1,15 +1,14 @@
 <script>
+  import { mdiClose } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import { time } from '../../stores/time';
   import { fade } from 'svelte/transition';
-  import { mdiStar, mdiClose, mdiInformationOutline, mdiCheckCircleOutline } from '@mdi/js';
-
   import Button from '../../components/Button.svelte';
-  import Input from '../../components/Input.svelte';
   import Icon from '../../components/Icon.svelte';
+  import Input from '../../components/Input.svelte';
+  import { time } from '../../stores/time';
 
   let changed = false;
-  let currentResin;
+  let currentResin = '';
   let maxResin = 160;
   let millisecondsToWait;
   let fullTime = null;
@@ -26,13 +25,14 @@
   let minutePerResin = originalResin.value * 60 * 1000;
 
   let dateTimeOptions = {
-    hour12: true,
     hour: 'numeric',
-    minute: '2-digit',
-    second: '2-digit',
+    minute: 'numeric',
+    second: 'numeric',
     weekday: 'long',
   };
 
+  $: canCalculate = currentResin !== '' && currentResin >= 0 && currentResin < 160;
+
   function calculate() {
     missingResin = maxResin - currentResin;
     millisecondsToWait = missingResin * minutePerResin;
@@ -45,9 +45,9 @@
 </script>
 
 <div class="bg-item rounded-xl p-4">
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+  <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-3 gap-4">
     <!-- input -->
-    <div>
+    <div class="md:col-span-1 xl:col-span-1">
       <Input
         className="mb-2"
         on:change={onChange}
@@ -64,12 +64,12 @@
         ).format($time)}
       </p>
     </div>
-    <div class="md:col-span-2 xl:col-span-1">
-      <Button disabled={!currentResin} className="block w-full md:w-auto" on:click={calculate}
+    <div class="md:col-span-2 xl:col-span-2">
+      <Button disabled={!canCalculate} className="block w-full md:w-auto" on:click={calculate}
         >{$t('calculator.resin.calculate')}</Button
       >
       {#if fullTime}
-        <div transition:fade={{ duration: 100 }} class="bg-background rounded-xl p-4 mt-2 block md:inline-block">
+        <div transition:fade={{ duration: 100 }} class="bg-background rounded-xl p-4 mt-2 block xl:inline-block">
           <tr>
             <td class="text-right border-b border-gray-700 py-1">
               <span class="text-white mr-2 whitespace-no-wrap"
@@ -89,10 +89,10 @@
           <tr>
             <td />
             <td class="text-red-400 py-1">
-              {$t('calculator.resin.fullTime')}: {new Intl.DateTimeFormat(
-                $t('calculator.resin.timeFormat'),
-                dateTimeOptions,
-              ).format(fullTime)}</td
+              {$t('calculator.resin.fullTime')}:
+              <span class="bg-red-400 rounded-lg mt-2 font-bold text-sm text-white p-1">
+                {new Intl.DateTimeFormat($t('calculator.resin.timeFormat'), dateTimeOptions).format(fullTime)}
+              </span></td
             >
           </tr>
         </div>