Add artifact piece main stat character view

src/data/build.js

@@ -1135,7 +1135,7 @@ export const builds = {
         ],
         mainStats: {
           sands: ['ATK%', 'Energy Recharge'],
-          goblet: ['Electro Damage'],
+          goblet: ['Electro DMG'],
           circlet: ['Crit Rate', 'DMG'],
         },
         subStats: ['Energy Recharge', 'Crit Rate / DMG', 'ATK%', 'Elemental Mastery', 'Flat ATK'],
@@ -2050,7 +2050,7 @@ export const builds = {
           ['echoes_of_an_offering'],
         ],
         mainStats: {
-          sands: ['Attack'],
+          sands: ['ATK%'],
           goblet: ['Hydro DMG'],
           circlet: ['Crit Rate', 'DMG'],
         },
@@ -2106,9 +2106,9 @@ export const builds = {
           ['emblem_of_severed_fate', 'tenacity_of_the_millelith', 'heart_of_depth', 'noblesse_oblige'],
         ],
         mainStats: {
-          sands: ['Sands: Energy Recharge', 'HP%'],
-          goblet: ['Goblet: Hydro DMG', 'HP%'],
-          circlet: ['Circlet: Crit Rate', 'Crit DMG', 'HP%'],
+          sands: ['Energy Recharge', 'HP%'],
+          goblet: ['Hydro DMG', 'HP%'],
+          circlet: ['Crit Rate', 'Crit DMG', 'HP%'],
         },
         subStats: ['Energy Recharge', 'HP / Crit Rate / Crit DMG', 'Flat HP'],
         talent: ['Burst', 'Skill', 'Normal Attacks'],
@@ -3145,7 +3145,7 @@ export const builds = {
         ],
         mainStats: {
           sands: ['ATK%', 'Energy Recharge', 'Elemental Mastery'],
-          goblet: ['Anemo Damage', 'Elemental Mastery'],
+          goblet: ['Anemo DMG', 'Elemental Mastery'],
           circlet: ['Crit Rate', 'DMG', 'Elemental Mastery'],
         },
         subStats: ['Crit Rate / DMG', 'ATK%', 'Energy Recharge', 'Elemental Mastery', 'Flat ATK'],
@@ -3493,7 +3493,7 @@ export const builds = {
         mainStats: {
           sands: ['Energy Recharge'],
           goblet: ['Geo DMG', 'DEF%'],
-          circlet: ['Crit Rate', 'DEF%', 'Healing Bonus*'],
+          circlet: ['Crit Rate', 'DEF%', 'Healing Bonus'],
         },
         subStats: ['Energy Recharge', 'DEF%', 'Crit Rate'],
         talent: ['Skill'],

src/locales/en.json

@@ -934,7 +934,9 @@
     "sands": "SANDS",
     "goblet": "GOBLET",
     "circlet": "CIRCLET",
-    "choose2": "Choose 2"
+    "choose2": "Choose 2",
+    "pieceStat": "Character that maybe use this {piece} piece with main stat:",
+    "pieceInfo": "Click the artifact image to see recommended character main stat"
   },
   "fishing": {
     "title": "Fishing Book",

src/routes/artifacts/[id].svelte

@@ -5,6 +5,12 @@
   function getCharacter(artifactId) {
     const collection2 = {};
     const collection4 = {};
+    const collectionPiece = {
+      sands: {},
+      goblet: {},
+      circlet: {},
+    };
+
     const chars = Object.entries(builds);
     for (const [charId, char] of chars) {
       const roles = Object.entries(char.roles);
@@ -25,6 +31,8 @@
                 ].includes(artifactId);
               } else if (e === '+20%_energy_recharge') {
                 return ['emblem_of_severed_fate', 'the_exile', 'scholar'].includes(artifactId);
+              } else if (e === '+25%_physical_dmg') {
+                return ['bloodstained_chivalry', 'pale_flame'].includes(artifactId);
               }
 
               return e === artifactId;
@@ -32,6 +40,15 @@
           ) {
             if (artifact.length === 1) found4 = true;
             else found2 = true;
+
+            for (const piece of ['sands', 'goblet', 'circlet']) {
+              for (const stat of role.mainStats[piece]) {
+                let statName = stat;
+                if (stat === 'DMG') statName = 'Crit DMG';
+                if (collectionPiece[piece][statName] === undefined) collectionPiece[piece][statName] = {};
+                collectionPiece[piece][statName][charId] = true;
+              }
+            }
           }
         }
 
@@ -62,6 +79,7 @@
     return {
       two: Object.values(collection2).sort((a, b) => a.id.localeCompare(b.id)),
       four: Object.values(collection4).sort((a, b) => a.id.localeCompare(b.id)),
+      pieces: collectionPiece,
     };
   }
 
@@ -75,12 +93,15 @@
 </script>
 
 <script>
-  import { onMount } from 'svelte';
+  import { getContext, onMount } from 'svelte';
   import { mdiChevronRight, mdiCircle, mdiStar } from '@mdi/js';
   import { locale, t } from 'svelte-i18n';
   import Icon from '../../components/Icon.svelte';
   import { domains } from '../../data/domain.js';
   import { characters } from '../../data/characters';
+  import PieceModal from './_pieceModal.svelte';
+
+  const { open: openModal } = getContext('simple-modal');
 
   const rarityList = {
     1: 'text-white',
@@ -90,10 +111,12 @@
     5: 'text-legendary-from',
   };
 
+  const pieces = ['flower', 'plume', 'sands', 'goblet', 'circlet'];
+
   export let id;
   export let artifact;
   export let recommendedCharacter;
-  // console.log(recommendedCharacter);
+  // console.log(recommendedCharacter.pieces);
   let images = [];
 
   async function changeLocale(locale) {
@@ -101,6 +124,28 @@
     artifact = _data.default[id];
   }
 
+  function openPieceModal(i) {
+    if (i < 2) return;
+
+    const piece = pieces[i];
+    const current = Object.entries(recommendedCharacter.pieces[piece]).map((e) => [
+      e[0],
+      Object.keys(e[1]).sort((a, b) => a.localeCompare(b)),
+    ]);
+
+    openModal(
+      PieceModal,
+      {
+        pieces: current,
+        name: piece,
+      },
+      {
+        closeButton: false,
+        styleWindow: { background: '#25294A', width: '816px' },
+      },
+    );
+  }
+
   onMount(async () => {
     locale.subscribe((val) => {
       changeLocale(val);
@@ -132,9 +177,12 @@
         <p class="text-base text-white font-semibold mt-1">{$t(`artifact.artifact`)}</p>
       </div>
     </div>
-    <div class="px-4 pt-4 flex flex-wrap space-x-2">
-      {#each images as image}
-        <img src="/images/artifacts/{image}" alt={id} class="w-24 h-24" />
+    <p class="pt-1 pl-4 text-gray-400">※ {$t('artifact.pieceInfo')}</p>
+    <div class="px-4 pt-4 flex flex-wrap space-x-2 justify-center">
+      {#each images as image, i}
+        <div class={i > 1 ? 'hover:bg-background rounded-xl cursor-pointer' : ''} on:click={() => openPieceModal(i)}>
+          <img src="/images/artifacts/{image}" alt={id} class="w-24 h-24" />
+        </div>
       {/each}
     </div>
     <div class="px-4 pt-4 flex flex-col space-y-2 max-w-xl w-full">

src/routes/artifacts/_pieceModal.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { t } from 'svelte-i18n';
+
+  export let pieces;
+  export let name;
+</script>
+
+<div>
+  <p class="text-white font-bold mb-4 text-lg">
+    {$t('artifact.pieceStat', { values: { piece: $t(`artifact.${name}`) } })}
+  </p>
+  {#each pieces as piece}
+    <p class="text-white font-bold bg-background px-4 py-1 rounded-xl mb-1">
+      {piece[0]}
+    </p>
+    <div class="flex flex-wrap mb-2">
+      {#each piece[1] as char}
+        <a href="/characters/{char}">
+          <img src="/images/characters/{char}.png" class="mb-2 mr-2 w-12 h-12 rounded-full" alt="char" />
+        </a>
+      {/each}
+    </div>
+  {/each}
+</div>