Remove necessary package

package.json

@@ -39,11 +39,9 @@
     "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/routes/calculator/_resin.svelte

@@ -1,12 +1,18 @@
 <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';
-  import Countdown from 'svelte-countdown';
 
   let changed = true;
   let currentResin = '';
@@ -14,9 +20,17 @@
   let maxResin = 160;
   let millisecondsToWait;
   let fullTime = null;
+  let relativeTime = null;
   let missingResin = 160;
   let resinTypeOutput = '';
-  let resinOutput = '';
+  let resinOutput = {
+    resin: 0,
+    condensed: {
+      resin: 0,
+      condensedResin: 0,
+    },
+  };
+  let currentTime = dayjs();
 
   let originalResin = {
     id: 'original_resin',
@@ -25,25 +39,41 @@
     value: 8,
   };
 
+  let condensedResin = {
+    id: 'condensed_resin',
+    label: 'Condensed Resin',
+    value: 40,
+  };
+
   // 8 minute per resin * 60 seconds * 1000 millisec
   let minutePerResin = originalResin.value * 60 * 1000;
 
-  let dateTimeOptions = {
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
-    weekday: 'long',
-  };
-
   $: 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;
-    resinOutput = resinTypeOutput === 'maxResin' ? missingResin : desiredResin;
+    resinOutput =
+      resinTypeOutput === 'maxResin'
+        ? { resin: missingResin, condensed: calculateCondensedResin(missingResin) }
+        : { resin: desiredResin, condensed: calculateCondensedResin(desiredResin) };
     millisecondsToWait = resinTypeOutput === 'maxResin' ? missingResin * minutePerResin : desiredResin * minutePerResin;
-    fullTime = new Date($time.getTime() + millisecondsToWait);
+    fullTime = dayjs(currentTime.valueOf() + millisecondsToWait);
     changed = false;
   }
 
@@ -51,6 +81,16 @@
     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">
@@ -78,10 +118,12 @@
         placeholder={$t('calculator.resin.inputDesireResin')}
       />
       <p class="text-white text-center">
-        {$t('calculator.resin.currentTime')}: {new Intl.DateTimeFormat(
+        {$t('calculator.resin.currentTime')}:
-          $t('calculator.resin.timeFormat'),
+        {#if $t('calculator.resin.timeFormat') === 'en'}
-          dateTimeOptions,
+          {currentTime.locale('en').format('dddd HH:mm:ss')}
-        ).format($time)}
+        {:else}
+          {currentTime.locale('id').format('dddd HH:mm:ss')}
+        {/if}
       </p>
     </div>
     <div class="md:col-span-2 xl:col-span-2">
@@ -90,38 +132,34 @@
       >
       {#if !changed}
         <div transition:fade={{ duration: 100 }} class="bg-background rounded-xl p-4 mt-2 block xl:inline-block">
-          <tr>
+          <table class="table w-full">
-            <td class="text-right border-b border-gray-700 py-1">
+            <tr>
-              <span class="text-white mr-2 whitespace-no-wrap"
+              <td />
-                >{resinOutput}
+              <td class="text-red-400">
-                <Icon size={0.5} path={mdiClose} /></span
+                {$t('calculator.resin.fullTime')}:
-              >
+                {#if $t('calculator.resin.timeFormat') === 'en'}
-            </td>
+                  {fullTime.locale('en').format('dddd HH:mm:ss')} ({fullTime.locale('en').fromNow()})
-            <td class="border-b border-gray-700 py-1">
+                {:else}
-              <span class="text-white">
+                  {fullTime.locale('id').format('dddd HH:mm:ss')} ({fullTime.locale('id').fromNow()})
-                <span class="w-6 inline-block">
+                {/if}
-                  <img class="h-6 inline-block mr-1" src={originalResin.image} alt={originalResin.label} />
+              </td>
-                </span>
+            </tr>
-                {originalResin.label}
+          </table>
-              </span>
-            </td>
-          </tr>
-          <tr>
-            <td />
-            <td class="text-red-400 py-1">
-              {$t('calculator.resin.fullTime')}:
-              <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>
       {/if}
     </div>
   </div>
 </div>
+
+<style>
+  td {
+    @apply py-1;
+    @apply border-b;
+    @apply border-gray-700;
+  }
+  tr:last-child {
+    td {
+      @apply border-b-0;
+    }
+  }
+</style>

src/routes/calculator/_resinTable.svelte

@@ -1,8 +1,13 @@
 <script>
-  import { t } from 'svelte-i18n';
   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';
-  import Time from 'svelte-time';
+
+  dayjs.extend(relativeTime);
 
   const step = [0, 15, 30, 45, 60, 75, 90, 105, 120, 145, 160];
   const stepTime = [];
@@ -41,9 +46,16 @@
               <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 -->
+              {#if $t('calculator.resin.timeFormat') === 'en'}
-              <Time relative timestamp={new Date(stepTime[i + 1])} /></td
+                {dayjs(new Date(stepTime[i + 1]))
-            >
+                  .locale('en')
+                  .fromNow()}
+              {:else}
+                {dayjs(new Date(stepTime[i + 1]))
+                  .locale('id')
+                  .fromNow()}
+              {/if}
+            </td>
           </tr>
         {/each}
       </table>

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

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.10.4, dayjs@^1.8.25, dayjs@^1.9.4:
+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,13 +2460,6 @@ 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"
@@ -2493,13 +2486,6 @@ 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"