diff --git a/package.json b/package.json index 12dd0ef6..9bc703c4 100644 --- a/package.json +++ b/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" } } diff --git a/src/locales/en.json b/src/locales/en.json index e3f36dc5..b170a960 100644 --- a/src/locales/en.json +++ b/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": { diff --git a/src/locales/id.json b/src/locales/id.json index 999b3dad..92e9f9b3 100644 --- a/src/locales/id.json +++ b/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": { diff --git a/src/routes/calculator/_resin.svelte b/src/routes/calculator/_resin.svelte index a0eb1e8f..d519e142 100644 --- a/src/routes/calculator/_resin.svelte +++ b/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 @@ {$t('calculator.resin.fullTime')}: - - {new Intl.DateTimeFormat($t('calculator.resin.timeFormat'), dateTimeOptions).format(fullTime)} - + + {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')}` : ''}) + + diff --git a/src/routes/calculator/_resinTable.svelte b/src/routes/calculator/_resinTable.svelte new file mode 100644 index 00000000..563acc46 --- /dev/null +++ b/src/routes/calculator/_resinTable.svelte @@ -0,0 +1,61 @@ + + +
+
+
+ + + + + + {#each rows as _, i} + + + + + {/each} +
{$t('calculator.resinTable.quantity')}{$t('calculator.resinTable.time')}
{step[0]}{step[i + 1]} + {originalResin.label} + +
+
+
+
+ + diff --git a/src/routes/calculator/index.svelte b/src/routes/calculator/index.svelte index 30c4a40e..e2b5bc96 100644 --- a/src/routes/calculator/index.svelte +++ b/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 @@ -
- +
+ + +
diff --git a/yarn.lock b/yarn.lock index 15786df2..5f64e6da 100644 --- a/yarn.lock +++ b/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"