Add friendship level calculator

src/data/friendshipExp.js

@@ -0,0 +1,105 @@
+export const friendshipExp = [1000, 1550, 2050, 2600, 3175, 3750, 4350, 4975, 5650];
+
+export const commissionExp = [
+  25,
+  25,
+  25,
+  25,
+  30,
+  30,
+  30,
+  30,
+  30,
+  35,
+  35,
+  35,
+  35,
+  35,
+  35,
+  35,
+  35,
+  35,
+  35,
+  40,
+  40,
+  40,
+  40,
+  40,
+  45,
+  45,
+  45,
+  45,
+  45,
+  50,
+  50,
+  50,
+  50,
+  50,
+  50,
+  50,
+  50,
+  50,
+  50,
+  55,
+  55,
+  55,
+  55,
+  55,
+  60,
+  60,
+  60,
+  60,
+  60,
+];
+
+export const commissionBonusExp = [
+  45,
+  45,
+  45,
+  45,
+  55,
+  55,
+  55,
+  55,
+  55,
+  55,
+  55,
+  55,
+  55,
+  65,
+  65,
+  65,
+  65,
+  65,
+  70,
+  70,
+  70,
+  70,
+  70,
+  75,
+  75,
+  75,
+  75,
+  75,
+  75,
+  85,
+  85,
+  85,
+  85,
+  85,
+  85,
+  85,
+  85,
+  85,
+  85,
+  95,
+  95,
+  95,
+  95,
+  95,
+  100,
+  100,
+  100,
+  100,
+  100,
+];

src/locales/en.json

@@ -371,6 +371,7 @@
     "titleWeapon": "Weapon Calculator",
     "titleCharacter": "Character Calculator",
     "titleResin": "Resin Calculator",
+    "titleFriendship": "Friendship Exp Calculator",
     "goto": "Go To {where}",
     "howToUse": "How to Use",
     "guide": {
@@ -450,6 +451,17 @@
       "hours": "hours",
       "minutes": "minutes",
       "seconds": "seconds"
+    },
+    "friendship": {
+      "currentLevel": "Current Friendship Level",
+      "currentExp": "Current Exp Bar (Drag the Bar)",
+      "randomEventFarm": "How many Random Event you farm everyday?",
+      "calculate": "Calculate",
+      "based": "Based on AR:{ar}",
+      "change": "(change on settings)",
+      "result": "To reach Friendship level 10 if you complete all daily commission and use 180 resin everyday",
+      "resultSerenitea": "If you also place the character in the Serenitea Pot (Max Adeptal Energy)",
+      "resultDay": "{result} Days"
     }
   },
   "items": {

src/locales/id.json

@@ -413,6 +413,17 @@
       "hours": "jam",
       "minutes": "menit",
       "seconds": "detik"
+    },
+    "friendship": {
+      "currentLevel": "Friendship Level Sekarang",
+      "currentExp": "Exp Bar Sekarang (Drag Bar-nya)",
+      "randomEventFarm": "Berapa banyak Random Event yang kamu farm tiap hari?",
+      "calculate": "Hitung",
+      "based": "Berdasarkan AR:{ar}",
+      "change": "(ganti di settings)",
+      "result": "Untuk mencapai Friendship level 10 jika kamu menyelesaikan semua daily commission dan menggunakan 180 resin tiap hari",
+      "resultSerenitea": "Jika kamu juga menaruh karakternya di Serenitea Pot (Adeptal Energy Max)",
+      "resultDay": "{result} Hari"
     }
   },
   "items": {

src/routes/calculator/_friendship.svelte

@@ -0,0 +1,126 @@
+<script>
+  import { fade } from 'svelte/transition';
+  import { t } from 'svelte-i18n';
+  import Select from '../../components/Select.svelte';
+  import Button from '../../components/Button.svelte';
+  import { commissionBonusExp, commissionExp, friendshipExp } from '../../data/friendshipExp';
+  import { ar } from '../../stores/server';
+  import Icon from '../../components/Icon.svelte';
+  import { mdiMinus, mdiPlus } from '@mdi/js';
+
+  let selectOptions = [...new Array(9)].map((e, i) => ({ label: i + 1, value: i + 1 }));
+  let level = null;
+  let randomEvent = 0;
+  let canCalculate = false;
+  let currentExp = 20;
+  let changed = true;
+  let result = 0;
+  let resultSerenitea = 0;
+
+  function calculate() {
+    let expNeeded = friendshipExp.slice(level.value - 1).reduce((prev, cur) => prev + cur, 0);
+    expNeeded -= (currentExp / 100) * friendshipExp[level.value - 1];
+
+    const currentAR = $ar;
+
+    const commisExpDaily = commissionExp[currentAR - 12] * 4 + commissionBonusExp[currentAR - 12];
+    const dailyResinExp = currentAR >= 35 ? 180 : 135;
+    const randomEventExp = randomEvent * 10;
+
+    const total = commisExpDaily + dailyResinExp + randomEventExp;
+
+    console.log(expNeeded, commisExpDaily, dailyResinExp, randomEventExp, total);
+    result = Math.ceil(expNeeded / total);
+    resultSerenitea = Math.ceil(expNeeded / (total + 5 * 24));
+    changed = false;
+  }
+
+  function changeRandomEvent(count) {
+    randomEvent += count;
+    if (randomEvent < 0) randomEvent = 0;
+    if (randomEvent > 10) randomEvent = 10;
+    changed = true;
+  }
+
+  function onChange() {
+    changed = true;
+  }
+
+  $: canCalculate = level !== null;
+</script>
+
+<div class="bg-item rounded-xl p-4">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+    <div>
+      <Select
+        options={selectOptions}
+        on:change={onChange}
+        bind:selected={level}
+        placeholder={$t('calculator.friendship.currentLevel')}
+      />
+      <p class="text-white mt-4 text-center">{$t('calculator.friendship.currentExp')} - {currentExp}%</p>
+      <input
+        type="range"
+        min={0}
+        max={100}
+        class="slider"
+        style="background: linear-gradient(to right, #b3a2f8 0%, #b3a2f8 {currentExp}%, #202442 {currentExp}%, #202442 100%);"
+        on:change={onChange}
+        bind:value={currentExp}
+      />
+      <p class="text-white mt-4 text-center">{$t('calculator.friendship.randomEventFarm')}</p>
+      <div class="flex justify-center">
+        <Button on:click={() => changeRandomEvent(-1)}><Icon path={mdiMinus} /></Button>
+        <p class="mx-2 bg-background rounded-xl text-bold text-white py-4 w-16 text-center">{randomEvent}</p>
+        <Button on:click={() => changeRandomEvent(1)}><Icon path={mdiPlus} /></Button>
+      </div>
+    </div>
+    <div class="md:col-span-2 xl:col-span-1">
+      <Button disabled={!canCalculate} className="block w-full md:w-auto" on:click={calculate}>
+        {$t('calculator.friendship.calculate')}
+      </Button>
+      {#if !changed}
+        <div transition:fade={{ duration: 100 }} class="bg-background rounded-xl p-4 mt-2 block xl:inline-block">
+          <p class="block text-center text-gray-400">{$t('calculator.friendship.based', { values: { ar: $ar } })}</p>
+          <table class="text-gray-200">
+            <tr>
+              <td class="text-xl font-bold text-primary whitespace-no-wrap pr-4 border-b border-gray-700 pb-1">
+                {$t('calculator.friendship.resultDay', { values: { result } })}
+              </td>
+              <td class="border-b border-gray-700 pb-1">{$t('calculator.friendship.result')}</td>
+            </tr>
+            <tr>
+              <td class="text-xl font-bold text-primary whitespace-no-wrap pr-4 pt-1">
+                {$t('calculator.friendship.resultDay', { values: { result: resultSerenitea } })}
+              </td>
+              <td class="pt-1">{$t('calculator.friendship.resultSerenitea')}</td>
+            </tr>
+          </table>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .slider {
+    @apply w-full h-4 rounded-xl;
+    -webkit-appearance: none;
+    appearance: none;
+    outline: none;
+  }
+
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 1px;
+    background: #b3a2f8;
+  }
+
+  .slider::-moz-range-thumb {
+    width: 0px;
+    background: #b3a2f8;
+  }
+  /* .slider:focus {
+    -webkit-appearance: none;
+  } */
+</style>

src/routes/calculator/index.svelte

@@ -8,6 +8,7 @@
   import CharacterCalculator from './_character.svelte';
   import LevelUpTable from './_characterTable.svelte';
   import ResinCalculator from './_resin.svelte';
+  import FriendshipCalculator from './_friendship.svelte';
   import ResinTable from './_resinTable.svelte';
   import Button from '../../components/Button.svelte';
   import Icon from '../../components/Icon.svelte';
@@ -113,6 +114,21 @@
     </h1>
   </div>
   <ResinCalculator />
+  <div
+    id="friendship"
+    class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
+  >
+    <Button on:click={() => findPos('character')}>
+      <Icon size={0.8} path={mdiArrowUp} />
+      {$t('calculator.goto', { values: { where: $t('calculator.titleCharacter') } })}
+    </Button>
+    <h1
+      class="font-display font-black text-center mt-2 md:mt-0 md:mr-2 xl:mr-8 text-3xl lg:text-left lg:text-5xl text-white"
+    >
+      {$t('calculator.titleFriendship')}
+    </h1>
+  </div>
+  <FriendshipCalculator />
   <div class="mt-8 space-y-4 grid md:grid-cols-2 md:gap-4 md:space-y-0">
     <LevelUpTable />
     <ResinTable />