Merge pull request #13 from fadhluu/resinCalculator

Add resin calculator

src/locales/en.json

@@ -150,6 +150,7 @@
   "calculator": {
     "titleWeapon": "Weapon Calculator",
     "titleCharacter": "Character Calculator",
+    "titleResin": "Resin Calculator",
     "goto": "Go To",
     "howToUse": "How to Use",
     "guide": {
@@ -202,6 +203,13 @@
       "items": "Items",
       "wasted": "Wasted EXP",
       "mora": "Mora Cost"
+    },
+    "resin": {
+      "inputCurrentResin": "Input Current Resin...",
+      "timeFormat": "en",
+      "calculate": "Calculate",
+      "currentTime": "Current Time",
+      "fullTime": "Resin Will Be Replenished At"
     }
   },
   "items": {

src/locales/id.json

@@ -148,8 +148,9 @@
     }
   },
   "calculator": {
-    "titleWeapon": "Kalulator Senjata",
+    "titleWeapon": "Kalkulator Senjata",
     "titleCharacter": "Kalkulator Karakter",
+    "titleResin": "Kalkulator Resin",
     "goto": "Ke",
     "howToUse": "Cara Penggunaan",
     "guide": {
@@ -202,6 +203,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": {

src/routes/calculator/_resin.svelte

@@ -0,0 +1,102 @@
+<script>
+  import { mdiClose } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
+  import Button from '../../components/Button.svelte';
+  import Icon from '../../components/Icon.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;
+  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 = originalResin.value * 60 * 1000;
+
+  let dateTimeOptions = {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    weekday: 'long',
+  };
+
+  $: canCalculate = currentResin !== '' && currentResin >= 0 && currentResin < 160;
+
+  function calculate() {
+    missingResin = maxResin - currentResin;
+    millisecondsToWait = missingResin * 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-1 lg:grid-cols-1 xl:grid-cols-3 gap-4">
+    <!-- input -->
+    <div class="md:col-span-1 xl:col-span-1">
+      <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>
+    </div>
+    <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 xl: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')}:
+              <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>
+      {/if}
+    </div>
+  </div>
+</div>

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';
@@ -15,6 +16,7 @@
 
   let weaponCalc;
   let characterCalc;
+  let resinCalc;
 
   function openHowTo() {
     openModal(
@@ -27,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>
 
@@ -59,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"
     >
@@ -75,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"
     >
@@ -90,6 +104,22 @@
     </h1>
   </div>
   <CharacterCalculator />
+  <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"
+    >
+      {$t('calculator.titleResin')}
+    </h1>
+  </div>
+  <ResinCalculator />
   <div class="mt-8" />
   <LevelUpTable />
 </div>

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);
+  };
+});