Add Resin Table and countdown in Resin Calculator

package.json

@@ -39,9 +39,11 @@
     "rollup-plugin-terser": "^7.0.0",
     "sapper": "^0.28.0",
     "svelte": "^3.17.3",
+    "svelte-countdown": "^1.0.0",
     "svelte-i18n": "^3.3.6",
     "svelte-preprocess": "^4.5.1",
     "svelte-simple-modal": "^0.6.1",
+    "svelte-time": "^0.3.0",
     "tailwindcss": "^1.9.5"
   }
 }

src/locales/en.json

@@ -205,6 +205,10 @@
       "wasted": "Wasted EXP",
       "mora": "Mora Cost"
     },
+    "resinTable": {
+      "quantity": "Quantity",
+      "time": "Time To Wait"
+    },
     "resin": {
       "currentResin": "Current Resin",
       "desiredResin": "Desired Resin",
@@ -214,7 +218,10 @@
       "timeFormat": "en",
       "calculate": "Calculate",
       "currentTime": "Current Time",
-      "fullTime": "Will be replenished at"
+      "fullTime": "Will be replenished at",
+      "hours": "hours",
+      "minutes": "minutes",
+      "seconds": "seconds"
     }
   },
   "items": {

src/locales/id.json

@@ -205,6 +205,10 @@
       "wasted": "Exp Terbuang",
       "mora": "Jumlah Mora"
     },
+    "resinTable": {
+      "quantity": "Jumlah",
+      "time": "Waktu Menunggu"
+    },
     "resin": {
       "currentResin": "Resin Saat Ini",
       "desiredResin": "Resin Yang Diinginkan",
@@ -214,7 +218,10 @@
       "timeFormat": "id",
       "calculate": "Hitung",
       "currentTime": "Waktu Sekarang",
-      "fullTime": "Akan terisi pada"
+      "fullTime": "Akan terisi pada",
+      "hours": "jam",
+      "minutes": "menit",
+      "seconds": "detik"
     }
   },
   "items": {

src/routes/calculator/_resin.svelte

@@ -6,6 +6,7 @@
   import Icon from '../../components/Icon.svelte';
   import Input from '../../components/Input.svelte';
   import { time } from '../../stores/time';
+  import Countdown from 'svelte-countdown';
 
   let changed = true;
   let currentResin = '';
@@ -109,9 +110,14 @@
             <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
+              <Countdown from={new Date(fullTime)} dateFormat="YYYY-MM-DD H:m:s" let:remaining>
+                <span class="font-bold">
+                  {new Intl.DateTimeFormat($t('calculator.resin.timeFormat'), dateTimeOptions).format(fullTime)}
+                  ({remaining.hours != 0 ? `${remaining.hours} ${$t('calculator.resin.hours')}` : ''}
+                  {remaining.minutes != 0 ? `${remaining.minutes} ${$t('calculator.resin.minutes')}` : ''}
+                  {remaining.seconds != 0 ? `${remaining.seconds} ${$t('calculator.resin.seconds')}` : ''})
+                </span>
+              </Countdown></td
             >
           </tr>
         </div>

src/routes/calculator/_resinTable.svelte

@@ -0,0 +1,61 @@
+<script>
+  import { t } from 'svelte-i18n';
+  import { mdiArrowRight } from '@mdi/js';
+  import Icon from '../../components/Icon.svelte';
+  import Time from 'svelte-time';
+
+  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">
+              <!-- components not supporting locale yet -->
+              <Time relative timestamp={new Date(stepTime[i + 1])} /></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,
@@ -120,6 +117,8 @@
     </h1>
   </div>
   <ResinCalculator />
-  <div class="mt-8" />
-  <LevelUpTable />
+  <div class="mt-8 space-y-4 grid md:grid-cols-2 md:gap-4 md:space-y-0">
+    <LevelUpTable />
+    <ResinTable />
+  </div>
 </div>

yarn.lock

@@ -1314,7 +1314,7 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-dayjs@^1.9.4:
+dayjs@^1.10.4, dayjs@^1.8.25, dayjs@^1.9.4:
   version "1.10.4"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
   integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
@@ -2460,6 +2460,13 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte-countdown@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svelte-countdown/-/svelte-countdown-1.0.0.tgz#8551e6ee2279211f08b8e8e426c5380394fae598"
+  integrity sha512-RuaRjnWPrH7xuwPQwb9b+Ek4mtv3knMTytEqOY2mha152edwDfejjSL+/HvtCbIyuAXPOndaut46dIoeAlPh4A==
+  dependencies:
+    dayjs "^1.8.25"
+
 svelte-i18n@^3.3.6:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/svelte-i18n/-/svelte-i18n-3.3.6.tgz#5d2a9f598b6e4999964afafad023c7f2f42c2e1f"
@@ -2486,6 +2493,13 @@ svelte-simple-modal@^0.6.1:
   resolved "https://registry.yarnpkg.com/svelte-simple-modal/-/svelte-simple-modal-0.6.1.tgz#5e984f384dda16bc50f00846314dc140ad89864b"
   integrity sha512-GJGYj+jymzuar105fwkZ73dtcSFCordpbHqt53iE1N1GdqhvEmSs24idRzyIcO7TrTD/V/287X1icFXp88RQHQ==
 
+svelte-time@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/svelte-time/-/svelte-time-0.3.0.tgz#64e90c4c2c9ac5966ef6e4732d32803bdc8c6fe8"
+  integrity sha512-9IpXTo6zo0oPe7cCuXZMQZrwfqh+nzR/gSyK7DRmjed6HB0zxUjUfwDmJ6roFSZ3bft6cFSx5vrlkdjz0psh1Q==
+  dependencies:
+    dayjs "^1.10.4"
+
 svelte@^3.17.3:
   version "3.31.2"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.31.2.tgz#d2ddf6cacbb95e4cc3796207510b660a25586324"