Add how to use calculator

src/components/CalculatorHowToModal.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { mdiHelpCircle, mdiInformation, mdiInformationVariant } from '@mdi/js';
+  import Icon from './Icon.svelte';
+</script>
+
+<div>
+  <div class="flex items-center mb-4">
+    <span class="text-gray-400 mr-2">
+      <Icon path={mdiInformation} />
+    </span>
+    <h1 class="font-display text-gray-400 text-lg">Click the picture to maximize</h1>
+  </div>
+  <div class="bg-background p-2 rounded-xl mb-2">
+    <h1 class="font-display text-white text-lg">How to use the Weapon Calculator</h1>
+    <a href="/images/calculator-weapon.png" target="__blank">
+      <img src="/images/calculator-weapon.png" alt="how to use calculator weapon" />
+    </a>
+  </div>
+  <div class="bg-background p-2 rounded-xl mb-2 mt-8">
+    <h1 class="font-display text-white text-lg">How to use the Character Calculator</h1>
+    <a href="/images/calculator-character.png" target="__blank">
+      <img src="/images/calculator-character.png" alt="how to use calculator character" />
+    </a>
+  </div>
+</div>

src/routes/calculator/index.svelte

@@ -1,14 +1,29 @@
 <script>
-  import { mdiArrowDown, mdiArrowUp } from '@mdi/js';
+  import { getContext } from 'svelte';
+  import { mdiArrowDown, mdiArrowUp, mdiHelpCircle } from '@mdi/js';
 
   import WeaponCalculator from './_weapon.svelte';
   import CharacterCalculator from './_character.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;
 
+  function openHowTo() {
+    openModal(
+      HowToModal,
+      {},
+      {
+        closeButton: false,
+        styleWindow: { background: '#25294A', width: '1280px' },
+      },
+    );
+  }
+
   export function scroll(type) {
     const elementPosition =
       type === 'character' ? characterCalc.getBoundingClientRect().top : weaponCalc.getBoundingClientRect().top;
@@ -25,7 +40,13 @@
 <svelte:head>
   <title>Calculator - Paimon.moe</title>
 </svelte:head>
-<div class="pt-20 lg:ml-64 lg:pt-8 p-4 md:p-8">
+<div class="pt-20 lg:ml-64 lg:pt-8 p-8">
+  <div class="flex justify-center md:justify-start mb-4">
+    <Button on:click={openHowTo}>
+      <Icon size={0.8} path={mdiHelpCircle} />
+      How To Use
+    </Button>
+  </div>
   <div
     class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mb-2"
     bind:this={weaponCalc}>

src/routes/todo.svelte

@@ -1,6 +1,6 @@
 <script>
   import { getContext, onMount, tick } from 'svelte';
-  import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiLoading, mdiPlus } from '@mdi/js';
+  import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiLoading } from '@mdi/js';
   import { todos, loading } from '../stores/todo';
   import { itemList } from '../data/itemList';
   import Masonry from 'svelte-masonry/Masonry.svelte';