add resin section

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": {

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": {

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>

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>

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