Merge pull request #16 from fadhluu/resinCalculator

Add desired resin input field

src/locales/en.json

@@ -205,12 +205,23 @@
       "wasted": "Wasted EXP",
       "mora": "Mora Cost"
     },
+    "resinTable": {
+      "quantity": "Quantity",
+      "time": "Time To Wait"
+    },
     "resin": {
-      "inputCurrentResin": "Input Current Resin...",
+      "currentResin": "Current Resin",
+      "desiredResin": "Desired Resin",
+      "or": "or",
+      "inputCurrentResin": "Input current resin...",
+      "inputDesireResin": "Input how many resin you want to wait...",
       "timeFormat": "en",
       "calculate": "Calculate",
       "currentTime": "Current Time",
-      "fullTime": "Resin Will Be Replenished At"
+      "fullTime": "Will be replenished at",
+      "hours": "hours",
+      "minutes": "minutes",
+      "seconds": "seconds"
     }
   },
   "items": {

src/locales/id.json

@@ -205,12 +205,23 @@
       "wasted": "Exp Terbuang",
       "mora": "Jumlah Mora"
     },
+    "resinTable": {
+      "quantity": "Jumlah",
+      "time": "Waktu Menunggu"
+    },
     "resin": {
-      "inputCurrentResin": "Masukkan Jumlah Resin Sekarang...",
+      "currentResin": "Resin Saat Ini",
+      "desiredResin": "Resin Yang Diinginkan",
+      "or": "atau",
+      "inputCurrentResin": "Masukkan jumlah resin sekarang...",
+      "inputDesireResin": "Masukkan jumlah resin yang diinginkan...",
       "timeFormat": "id",
       "calculate": "Hitung",
       "currentTime": "Waktu Sekarang",
-      "fullTime": "Resin Akan Penuh Pada"
+      "fullTime": "Akan terisi pada",
+      "hours": "jam",
+      "minutes": "menit",
+      "seconds": "detik"
     }
   },
   "items": {

src/routes/calculator/_resin.svelte

@@ -1,18 +1,36 @@
 <script>
   import { mdiClose } from '@mdi/js';
+  import dayjs from 'dayjs';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
+  import { onMount } from 'svelte';
+  import rTime from 'dayjs/plugin/relativeTime';
+  import 'dayjs/locale/en';
+  import 'dayjs/locale/id';
+
+  dayjs.extend(rTime);
+
   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 changed = true;
   let currentResin = '';
+  let desiredResin = '';
   let maxResin = 160;
   let millisecondsToWait;
   let fullTime = null;
+  let relativeTime = null;
   let missingResin = 160;
+  let resinTypeOutput = '';
+  let resinOutput = {
+    resin: 0,
+    condensed: {
+      resin: 0,
+      condensedResin: 0,
+    },
+  };
+  let currentTime = dayjs();
 
   let originalResin = {
     id: 'original_resin',
@@ -21,59 +39,123 @@
     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',
+  let condensedResin = {
+    id: 'condensed_resin',
+    image: '/images/condensed_resin.png',
+    label: 'Condensed Resin',
+    value: 40,
   };
 
-  $: canCalculate = currentResin !== '' && currentResin >= 0 && currentResin < 160;
+  // 8 minute per resin * 60 seconds * 1000 millisec
+  let minutePerResin = originalResin.value * 60 * 1000;
+
+  $: isCurrentResin = currentResin >= 0 && currentResin < 160 && currentResin !== '';
+  $: isDesiredResin = desiredResin <= 160 && desiredResin >= 1 && desiredResin !== '';
+  $: canCalculate = isCurrentResin || isDesiredResin;
+
+  function calculateCondensedResin(nResin) {
+    if (condensedResin.value % nResin == 0) {
+      return {
+        resin: 0,
+        condensedResin: Math.floor(nResin / condensedResin.value),
+      };
+    } else {
+      return {
+        resin: nResin % condensedResin.value,
+        condensedResin: Math.floor(nResin / condensedResin.value),
+      };
+    }
+  }
 
   function calculate() {
     missingResin = maxResin - currentResin;
-    millisecondsToWait = missingResin * minutePerResin;
-    fullTime = new Date($time.getTime() + millisecondsToWait);
+    resinOutput =
+      resinTypeOutput === 'maxResin'
+        ? { resin: missingResin, condensed: calculateCondensedResin(missingResin) }
+        : { resin: desiredResin, condensed: calculateCondensedResin(desiredResin) };
+    millisecondsToWait = resinTypeOutput === 'maxResin' ? missingResin * minutePerResin : desiredResin * minutePerResin;
+    fullTime = dayjs(currentTime.valueOf() + millisecondsToWait);
+    changed = false;
   }
 
-  function onChange() {
+  function onChange(type) {
     changed = true;
+    resinTypeOutput = type;
   }
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      currentTime = dayjs().add(0, 'minute');
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
 </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">
+    <div class="md:col-span-1 xl:col-span-1 space-y-2">
+      <p class="text-center text-white">
+        {$t('calculator.resin.currentResin')}
+      </p>
       <Input
-        className="mb-2"
-        on:change={onChange}
+        on:change={() => onChange('maxResin')}
         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 class="text-center text-white">{$t('calculator.resin.or')} {$t('calculator.resin.desiredResin')}</p>
+      <Input
+        on:change={() => onChange('desiredResin')}
+        type="number"
+        min={1}
+        max={160}
+        bind:value={desiredResin}
+        placeholder={$t('calculator.resin.inputDesireResin')}
+      />
+      <p class="text-white text-center">
+        {$t('calculator.resin.currentTime')}:
+        {#if $t('calculator.resin.timeFormat') === 'en'}
+          {currentTime.locale('en').format('dddd HH:mm:ss')}
+        {:else}
+          {currentTime.locale('id').format('dddd HH:mm:ss')}
+        {/if}
       </p>
     </div>
-    <div class="md:col-span-2 xl:col-span-2">
+    <div class="md:col-span-1 xl:col-span-2">
       <Button disabled={!canCalculate} className="block w-full md:w-auto" on:click={calculate}
         >{$t('calculator.resin.calculate')}</Button
       >
-      {#if fullTime}
+      {#if !changed}
         <div transition:fade={{ duration: 100 }} class="bg-background rounded-xl p-4 mt-2 block xl:inline-block">
+          <table class="w-full">
             <tr>
               <td class="text-right border-b border-gray-700 py-1">
                 <span class="text-white mr-2 whitespace-no-wrap"
-                >{missingResin}
+                  >{resinOutput.resin}
+                  <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>
+            {#if resinOutput.condensed.condensedResin !== 0}
+              <tr><td colspan="2" class="text-white text-center pt-2">{$t('calculator.resin.or')}</td></tr>
+              <tr>
+                <td class="text-right border-b border-gray-700 py-1">
+                  <span class="text-white mr-2 whitespace-no-wrap"
+                    >{resinOutput.condensed.resin}
                     <Icon size={0.5} path={mdiClose} /></span
                   >
                 </td>
@@ -87,14 +169,33 @@
                 </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
+                <td class="text-right border-b border-gray-700 py-1">
+                  <span class="text-white mr-2 whitespace-no-wrap"
+                    >{resinOutput.condensed.condensedResin}
+                    <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={condensedResin.image} alt={condensedResin.label} />
+                    </span>
+                    {condensedResin.label}
+                  </span>
+                </td>
               </tr>
+            {/if}
+            <tr>
+              <td class="text-red-400" colspan="2">
+                {$t('calculator.resin.fullTime')}:
+                {#if $t('calculator.resin.timeFormat') === 'en'}
+                  {fullTime.locale('en').format('dddd HH:mm:ss')} ({fullTime.locale('en').fromNow()})
+                {:else}
+                  {fullTime.locale('id').format('dddd HH:mm:ss')} ({fullTime.locale('id').fromNow()})
+                {/if}
+              </td>
+            </tr>
+          </table>
         </div>
       {/if}
     </div>

src/routes/calculator/_resinTable.svelte

@@ -0,0 +1,73 @@
+<script>
+  import { mdiArrowRight } from '@mdi/js';
+  import dayjs from 'dayjs';
+  import 'dayjs/locale/en';
+  import 'dayjs/locale/id';
+  import relativeTime from 'dayjs/plugin/relativeTime';
+  import { t } from 'svelte-i18n';
+  import Icon from '../../components/Icon.svelte';
+
+  dayjs.extend(relativeTime);
+
+  const step = [0, 15, 30, 45, 60, 75, 90, 105, 120, 145, 160];
+  const stepTime = [];
+
+  let originalResin = {
+    id: 'original_resin',
+    image: '/images/resin.png',
+    label: 'Original Resin',
+    value: 8,
+  };
+
+  function counTimeRelative() {
+    step.map((s) => {
+      const time = originalResin.value * s * 60 * 1000;
+      stepTime.push(new Date().getTime() + time);
+    });
+  }
+
+  const rows = Array.from(Array(step.length - 1).keys());
+
+  counTimeRelative();
+</script>
+
+<div class="block overflow-x-auto whitespace-no-wrap pb-1">
+  <div class="table w-full">
+    <div class="bg-item rounded-xl p-4 w-full">
+      <table class="w-full">
+        <tr>
+          <th class="px-2 font-display text-gray-400">{$t('calculator.resinTable.quantity')}</th>
+          <th class="px-2 font-display text-gray-400 align-bottom">{$t('calculator.resinTable.time')}</th>
+        </tr>
+        {#each rows as _, i}
+          <tr>
+            <td class="pl-2 text-white text-center"
+              >{step[0]}<Icon className="mb-1 text-gray-400" path={mdiArrowRight} size={0.7} />{step[i + 1]}
+              <img src={originalResin.image} alt={originalResin.label} class="h-6 w-6 inline" /></td
+            >
+            <td class="pr-2 text-white text-center">
+              {#if $t('calculator.resin.timeFormat') === 'en'}
+                {dayjs(new Date(stepTime[i + 1]))
+                  .locale('en')
+                  .fromNow()}
+              {:else}
+                {dayjs(new Date(stepTime[i + 1]))
+                  .locale('id')
+                  .fromNow()}
+              {/if}
+            </td>
+          </tr>
+        {/each}
+      </table>
+    </div>
+  </div>
+</div>
+
+<style>
+  td,
+  th {
+    @apply py-1;
+    @apply border-b;
+    @apply border-gray-700;
+  }
+</style>

src/routes/calculator/index.svelte

@@ -8,16 +8,13 @@
   import CharacterCalculator from './_character.svelte';
   import LevelUpTable from './_characterTable.svelte';
   import ResinCalculator from './_resin.svelte';
+  import ResinTable from './_resinTable.svelte';
   import Button from '../../components/Button.svelte';
   import Icon from '../../components/Icon.svelte';
   import HowToModal from '../../components/CalculatorHowToModal.svelte';
 
   const { open: openModal } = getContext('simple-modal');
 
-  let weaponCalc;
-  let characterCalc;
-  let resinCalc;
-
   function openHowTo() {
     openModal(
       HowToModal,
@@ -92,7 +89,7 @@
       {$t('calculator.goto')}
       {$t('calculator.titleWeapon')}
     </Button>
-    <Button className="md:mb-0 md:ml-4 mb-4" on:click={() => findPos('resin')}>
+    <Button className="md:mt-0 md:mr-4 mt-4" on:click={() => findPos('resin')}>
       <Icon size={0.8} path={mdiArrowDown} />
       {$t('calculator.goto')}
       {$t('calculator.titleResin')}
@@ -120,6 +117,8 @@
     </h1>
   </div>
   <ResinCalculator />
-  <div class="mt-8" />
+  <div class="mt-8 space-y-4 grid md:grid-cols-2 md:gap-4 md:space-y-0">
     <LevelUpTable />
+    <ResinTable />
+  </div>
 </div>

src/stores/time.js

@@ -1,11 +0,0 @@
-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);
-  };
-});