From 54d80a553ec98a2309e92f0854917a43ddf2ab7b Mon Sep 17 00:00:00 2001
From: I Made Setia Baruna <setia.baruna@sprintasia.co.id>
Date: Tue, 27 Oct 2020 05:39:26 +0700
Subject: [PATCH] Add wish counter

---
 src/components/Button.svelte          |   8 ++
 src/components/Sidebar/Sidebar.svelte |   8 +-
 src/routes/wish/_counter.svelte       | 116 ++++++++++++++++++++++++++
 src/routes/wish/index.svelte          |  15 ++++
 static/images/wish.png                | Bin 0 -> 2287 bytes
 tailwind.config.js                    |   1 +
 6 files changed, 144 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Button.svelte
 create mode 100644 src/routes/wish/_counter.svelte
 create mode 100644 src/routes/wish/index.svelte
 create mode 100644 static/images/wish.png

diff --git a/src/components/Button.svelte b/src/components/Button.svelte
new file mode 100644
index 00000000..f2cb7600
--- /dev/null
+++ b/src/components/Button.svelte
@@ -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>
diff --git a/src/components/Sidebar/Sidebar.svelte b/src/components/Sidebar/Sidebar.svelte
index edce7946..47d39bc0 100644
--- a/src/components/Sidebar/Sidebar.svelte
+++ b/src/components/Sidebar/Sidebar.svelte
@@ -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>
diff --git a/src/routes/wish/_counter.svelte b/src/routes/wish/_counter.svelte
new file mode 100644
index 00000000..026c6ca3
--- /dev/null
+++ b/src/routes/wish/_counter.svelte
@@ -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>
diff --git a/src/routes/wish/index.svelte b/src/routes/wish/index.svelte
new file mode 100644
index 00000000..af5ea998
--- /dev/null
+++ b/src/routes/wish/index.svelte
@@ -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>
diff --git a/static/images/wish.png b/static/images/wish.png
new file mode 100644
index 0000000000000000000000000000000000000000..7636068af19abf01e58789979ac31a18283b8f13
GIT binary patch
literal 2287
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
JPDHLkV1k3%F+czS

literal 0
HcmV?d00001

diff --git a/tailwind.config.js b/tailwind.config.js
index 6c4f5562..911f2939 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,7 @@ module.exports = {
         'background-secondary': '#25294A',
         item: '#2D325A',
         primary: '#4E7CFF',
+        button: '#394076',
         rare: {
           from: '#AD76B0',
           to: '#665680',