Add wish counter

This commit is contained in:
I Made Setia Baruna 2020-10-27 05:39:26 +07:00
parent 3bf67bebce
commit 54d80a553e
6 changed files with 144 additions and 4 deletions

View file

@ -0,0 +1,8 @@
<script>
export let className;
</script>
<button
class={`text-white border-2 border-white border-opacity-25 rounded-xl px-4 py-2 transition duration-100
hover:border-primary focus:outline-none focus:border-primary ${className}`}
on:click><slot /></button>

View file

@ -52,8 +52,8 @@
href="/characters" />
<SidebarItem
on:clicked={close}
active={segment === 'artifacts'}
image="/images/artifacts.png"
label="Artifact"
href="/artifacts" />
active={segment === 'wish'}
image="/images/wish.png"
label="Wish Counter"
href="/wish" />
</div>

View file

@ -0,0 +1,116 @@
<script>
import { mdiStar } from '@mdi/js';
import { onMount } from 'svelte';
import Button from '../../components/Button.svelte';
import Icon from '../../components/Icon.svelte';
export let name = '';
let total = 0;
let legendary = 0;
let rare = 0;
$: id = `wish-counter-${name.toLowerCase().replace(/ /g, '-')}`;
onMount(() => {
readLocalData();
});
function readLocalData() {
const data = localStorage.getItem(id);
if (data !== null) {
const counterData = JSON.parse(data);
total = counterData.total;
legendary = counterData.legendary;
rare = counterData.rare;
}
}
function saveData() {
const data = JSON.stringify({
total,
legendary,
rare,
});
localStorage.setItem(id, data);
}
function add(val) {
if (total + val < 0) return;
total += val;
rare += val;
if (rare >= 10) {
rare = 0;
} else if (rare < 0) {
rare = 9;
}
legendary += val;
if (legendary >= 90) {
legendary = 0;
rare = 0;
} else if (legendary < 0) {
legendary = 89;
}
saveData();
}
function getLegendary() {
total += 1;
legendary = 0;
rare = 0;
saveData();
}
function getRare() {
total += 1;
rare = 0;
saveData();
}
</script>
<div class="bg-item rounded-xl p-4 inline-flex flex-col w-full">
<h2 class="font-display font-bold text-2xl text-white mb-2">{name}</h2>
<div class="flex flex-col w-full">
<div class="bg-background rounded-xl p-4 flex flex-row items-center justify-center mb-2">
<span class="text-gray-200 whitespace-no-wrap flex-1">Lifetime Pulls</span>
<span class="font-black text-3xl text-white ml-4">{total}</span>
</div>
<div class="bg-background rounded-xl p-4 flex flex-row items-center justify-center mb-2">
<span class="text-gray-200 whitespace-no-wrap flex-1">
5
<Icon path={mdiStar} size={0.75} className="mb-1" />
Pity
<br /><span class="text-gray-600">Guaranteed at 90</span>
</span>
<span class="font-black text-3xl text-legendary-from ml-4">{legendary}</span>
</div>
<div class="bg-background rounded-xl p-4 flex flex-row items-center justify-center">
<span class="text-gray-200 whitespace-no-wrap flex-1">
4
<Icon path={mdiStar} size={0.75} className="mb-1" />
Pity
<br /><span class="text-gray-600">Guaranteed at 10</span>
</span>
<span class="font-black text-3xl text-rare-from ml-4">{rare}</span>
</div>
<div class="flex gap-2 mt-2">
<Button on:click={getLegendary} className="flex-1">
Get 5
<Icon path={mdiStar} size={0.75} className="mb-1" />
</Button>
<Button on:click={getRare} className="flex-1">
Get 4
<Icon path={mdiStar} size={0.75} className="mb-1" />
</Button>
</div>
<div class="flex gap-2 mt-2">
<Button on:click={() => add(1)} className="flex-1">+1</Button>
<Button on:click={() => add(10)} className="flex-1">+10</Button>
<Button on:click={() => add(-1)} className="flex-1">-1</Button>
</div>
</div>
</div>

View file

@ -0,0 +1,15 @@
<script>
import Counter from './_counter.svelte';
</script>
<svelte:head>
<title>Wish Counter - Paimon.moe</title>
</svelte:head>
<div class="pt-20 lg:ml-64 lg:pt-8 p-8">
<h1 class="font-display font-black text-5xl text-white mb-2">Wish Counter</h1>
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 max-w-screen-xl">
<Counter name="Promotional Character" />
<Counter name="Promotional Weapon" />
<Counter name="Standard" />
</div>
</div>

BIN
static/images/wish.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View file

@ -20,6 +20,7 @@ module.exports = {
'background-secondary': '#25294A',
item: '#2D325A',
primary: '#4E7CFF',
button: '#394076',
rare: {
from: '#AD76B0',
to: '#665680',