Add Resin Table and countdown in Resin Calculator
fadhlu
parent
5041cc7a2c
commit
8b2c1eb504
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
16
yarn.lock
16
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue