Update characters

src/data/build.js

@@ -2717,6 +2717,28 @@ export const builds = {
       },
     },
   },
+  sangonomiya_kokomi: {
+    roles: {
+      SUPPORT: {
+        recommended: true,
+        weapons: [
+          {
+            id: 'everlasting_moonglow',
+          },
+        ],
+        artifacts: [['heart_of_depth']],
+        mainStats: {
+          sands: 'TBD',
+          goblet: 'TBD',
+          circlet: 'TBD',
+        },
+        subStats: ['TBD', 'TBD', 'TBD', 'TBD'],
+        talent: ['TBD', 'TBD', 'TBD'],
+        tip: '',
+        note: 'WORK IN PROGRESS',
+      },
+    },
+  },
   amber: {
     roles: {
       DPS: {

src/data/characters.js

@@ -1992,6 +1992,77 @@ export const characters = {
       boss: itemList.shadow_of_the_warrior,
     },
   },
+  sangonomiya_kokomi: {
+    name: 'Sangonomiya Kokomi',
+    id: 'sangonomiya_kokomi',
+    rarity: 5,
+    element: elements.hydro,
+    weapon: weapons.catalyst,
+    sex: 'female',
+    nation: 'inazuma',
+    ascension: [
+      {
+        items: [
+          { item: itemList.varunada_lazurite_sliver, amount: 1 },
+          { item: itemList.none, amount: null },
+          { item: itemList.sango_pearl, amount: 3 },
+          { item: itemList.spectral_husk, amount: 3 },
+        ],
+        mora: 20000,
+      },
+      {
+        items: [
+          { item: itemList.varunada_lazurite_fragment, amount: 3 },
+          { item: itemList.dew_of_repudiation, amount: 2 },
+          { item: itemList.sango_pearl, amount: 10 },
+          { item: itemList.spectral_husk, amount: 15 },
+        ],
+        mora: 40000,
+      },
+      {
+        items: [
+          { item: itemList.varunada_lazurite_fragment, amount: 6 },
+          { item: itemList.dew_of_repudiation, amount: 4 },
+          { item: itemList.sango_pearl, amount: 20 },
+          { item: itemList.spectral_heart, amount: 12 },
+        ],
+        mora: 60000,
+      },
+      {
+        items: [
+          { item: itemList.varunada_lazurite_chunk, amount: 3 },
+          { item: itemList.dew_of_repudiation, amount: 8 },
+          { item: itemList.sango_pearl, amount: 30 },
+          { item: itemList.spectral_heart, amount: 18 },
+        ],
+        mora: 80000,
+      },
+      {
+        items: [
+          { item: itemList.varunada_lazurite_chunk, amount: 6 },
+          { item: itemList.dew_of_repudiation, amount: 12 },
+          { item: itemList.sango_pearl, amount: 45 },
+          { item: itemList.spectral_nucleus, amount: 12 },
+        ],
+        mora: 100000,
+      },
+      {
+        items: [
+          { item: itemList.varunada_lazurite_gemstone, amount: 6 },
+          { item: itemList.dew_of_repudiation, amount: 20 },
+          { item: itemList.sango_pearl, amount: 60 },
+          { item: itemList.spectral_nucleus, amount: 24 },
+        ],
+        mora: 120000,
+      },
+    ],
+    stats: { hp: 13471, atk: 234, def: 657 },
+    material: {
+      book: [itemList.teachings_of_transience, itemList.guide_to_transience, itemList.philosophies_of_transience],
+      material: [itemList.spectral_husk, itemList.spectral_heart, itemList.spectral_nucleus],
+      boss: itemList.hellfire_butterfly,
+    },
+  },
   sayu: {
     name: 'Sayu',
     id: 'sayu',

src/data/itemList.js

@@ -816,4 +816,8 @@ export const itemList = {
   spectral_husk: { id: 'spectral_husk', name: 'Spectral Husk' },
   spectral_heart: { id: 'spectral_heart', name: 'Spectral Heart' },
   spectral_nucleus: { id: 'spectral_nucleus', name: 'Spectral Nucleus' },
+
+  sango_pearl: { id: 'sango_pearl', name: 'Sango Pearl' },
+  dew_of_repudiation: { id: 'dew_of_repudiation', name: 'Dew of Repudiation', rarity: 5 },
+  hellfire_butterfly: { id: 'hellfire_butterfly', name: 'Hellfire Butterfly', rarity: 5 },
 };

src/routes/characters/[id].svelte

@@ -29,6 +29,7 @@
   import PassiveSkillCard from './_passiveSkillCard.svelte';
   import { weaponList } from '../../data/weaponList';
   import artifacts from '../../data/artifacts/en.json';
+  import weapons from '../../data/weapons/en.json';
 
   const rarityColor = {
     1: 'text-white',
@@ -191,7 +192,9 @@
     />
     <div class="flex flex-col items-start mt-4 xl:mt-0 side-detail pt-4 xl:pt-0">
       <div class="flex items-center px-4 md:px-8">
-        <h1 class="font-display font-black text-4xl md:text-5xl text-white mr-4 z-0">{character.name}</h1>
+        <h1 class="font-display font-black text-4xl leading-10 md:leading-normal md:text-5xl text-white mr-4 z-0">
+          {character.name}
+        </h1>
         <img
           class="h-10 mr-4 z-10 object-contain"
           src="/images/elements/{character.element.id}.png"
@@ -373,6 +376,10 @@
         {build.recommended ? '👍' : ''}
       </h3>
       <p class="whitespace-pre-wrap text-gray-200">{build.note}</p>
+      {#if build.tip !== ''}
+        <h4 class="font-black font-display text-lg mt-4">ABILITY TIP</h4>
+        <p class="whitespace-pre-wrap text-gray-200">{build.tip}</p>
+      {/if}
       <div class="flex mt-2 -mx-4 flex-wrap">
         <div class="mx-4 mt-4">
           <h4 class="font-black font-display text-lg">MAIN STATS</h4>
@@ -422,7 +429,18 @@
         <div class="mt-4 mx-4 -mb-1">
           <h4 class="font-black font-display text-lg">WEAPONS</h4>
           {#each build.weapons as weapon, i}
-            <a class="flex mb-1" href="/weapons/{weapon.id}">
+            <a class="popup flex mb-1" href="/weapons/{weapon.id}">
+              <div class="popup-container">
+                <div class="bg-gray-300 text-gray-900 p-2 rounded-md mb-1 shadow-2xl">
+                  <p class="font-bold text-primary text-sm">
+                    {weapons[weapon.id].skill.name}
+                  </p>
+                  <p class="text-gray-900 text-sm break-words" style="filter: brightness(0);">
+                    {@html weapons[weapon.id].skill.description}
+                  </p>
+                </div>
+              </div>
+
               <div class="flex items-center bg-background rounded-md p-1 mr-1">
                 <p class="w-6 text-center mr-1" style="padding-top: 2px;">{i + 1}</p>
                 <Icon className={rarityColor[weaponList[weapon.id].rarity]} path={mdiStar} size={0.8} />