From cb8389cf35bad9491c79d2ca997a82e653e752f6 Mon Sep 17 00:00:00 2001
From: Jan-Philipp <kenste@outlook.de>
Date: Sun, 7 Apr 2024 22:50:50 +0200
Subject: [PATCH] feat(#262): add new relic modal when clicking on empty relic
 slot in character preview

---
 src/components/CharacterPreview.jsx | 30 +++++++++++++++++++++++------
 src/components/RelicPreview.jsx     | 26 +++++++++++++++++--------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/components/CharacterPreview.jsx b/src/components/CharacterPreview.jsx
index 60ebeebe..083541e4 100644
--- a/src/components/CharacterPreview.jsx
+++ b/src/components/CharacterPreview.jsx
@@ -38,6 +38,7 @@ export function CharacterPreview(props) {
   const setCharacterTabBlur = window.store((s) => s.setCharacterTabBlur)
   const [selectedRelic, setSelectedRelic] = useState()
   const [editModalOpen, setEditModalOpen] = useState(false)
+  const [addModalOpen, setAddModalOpen] = useState(false)
   const [editPortraitModalOpen, setEditPortraitModalOpen] = useState(false)
   const [customPortrait, setCustomPortrait] = useState(null) // <null | CustomImageConfig>
 
@@ -50,6 +51,16 @@ export function CharacterPreview(props) {
     setSelectedRelic(updatedRelic)
   }
 
+  function onAddOk(relic) {
+    DB.setRelic(relic)
+    setRelicRows(DB.getRelics())
+    SaveState.save()
+
+    setSelectedRelic(relic)
+
+    Message.success('Successfully added relic')
+  }
+
   function onEditPortraitOk(portraitPayload) {
     const { type, ...portrait } = portraitPayload
     switch (type) {
@@ -151,6 +162,7 @@ export function CharacterPreview(props) {
   return (
     <Flex style={{ display: character ? 'flex' : 'none', height: parentH, backgroundColor: backgroundColor }} id={props.id}>
       <RelicModal selectedRelic={selectedRelic} type="edit" onOk={onEditOk} setOpen={setEditModalOpen} open={editModalOpen} />
+      <RelicModal selectedRelic={selectedRelic} type="edit" onOk={onAddOk} setOpen={setAddModalOpen} open={addModalOpen} />
 
       {!isBuilds
       && (
@@ -303,7 +315,8 @@ export function CharacterPreview(props) {
           <RelicPreview
             setEditModalOpen={setEditModalOpen}
             setSelectedRelic={setSelectedRelic}
-            relic={displayRelics.Head}
+            setAddModelOpen={setAddModalOpen}
+            relic={{...displayRelics.Head, part: Constants.Parts.Head}}
             source={props.source}
             characterId={characterId}
             score={scoredRelics.find((x) => x.part == Constants.Parts.Head)}
@@ -311,7 +324,8 @@ export function CharacterPreview(props) {
           <RelicPreview
             setEditModalOpen={setEditModalOpen}
             setSelectedRelic={setSelectedRelic}
-            relic={displayRelics.Body}
+            setAddModelOpen={setAddModalOpen}
+            relic={{...displayRelics.Body, part: Constants.Parts.Body}}
             source={props.source}
             characterId={characterId}
             score={scoredRelics.find((x) => x.part == Constants.Parts.Body)}
@@ -319,7 +333,8 @@ export function CharacterPreview(props) {
           <RelicPreview
             setEditModalOpen={setEditModalOpen}
             setSelectedRelic={setSelectedRelic}
-            relic={displayRelics.PlanarSphere}
+            setAddModelOpen={setAddModalOpen}
+            relic={{...displayRelics.PlanarSphere, part: Constants.Parts.PlanarSphere}}
             source={props.source}
             characterId={characterId}
             score={scoredRelics.find((x) => x.part == Constants.Parts.PlanarSphere)}
@@ -330,7 +345,8 @@ export function CharacterPreview(props) {
           <RelicPreview
             setEditModalOpen={setEditModalOpen}
             setSelectedRelic={setSelectedRelic}
-            relic={displayRelics.Hands}
+            setAddModelOpen={setAddModalOpen}
+            relic={{...displayRelics.Hands, part: Constants.Parts.Hands}}
             source={props.source}
             characterId={characterId}
             score={scoredRelics.find((x) => x.part == Constants.Parts.Hands)}
@@ -338,7 +354,8 @@ export function CharacterPreview(props) {
           <RelicPreview
             setEditModalOpen={setEditModalOpen}
             setSelectedRelic={setSelectedRelic}
-            relic={displayRelics.Feet}
+            setAddModelOpen={setAddModalOpen}
+            relic={{...displayRelics.Feet, part: Constants.Parts.Feet}}
             source={props.source}
             characterId={characterId}
             score={scoredRelics.find((x) => x.part == Constants.Parts.Feet)}
@@ -346,7 +363,8 @@ export function CharacterPreview(props) {
           <RelicPreview
             setEditModalOpen={setEditModalOpen}
             setSelectedRelic={setSelectedRelic}
-            relic={displayRelics.LinkRope}
+            setAddModelOpen={setAddModalOpen}
+            relic={{...displayRelics.LinkRope, part: Constants.Parts.LinkRope}}
             source={props.source}
             characterId={characterId}
             score={scoredRelics.find((x) => x.part == Constants.Parts.LinkRope)}
diff --git a/src/components/RelicPreview.jsx b/src/components/RelicPreview.jsx
index 7a2c1d27..a026207e 100644
--- a/src/components/RelicPreview.jsx
+++ b/src/components/RelicPreview.jsx
@@ -9,11 +9,12 @@ import { GenerateStat } from 'components/relicPreview/GenerateStat'
 
 const RelicPreview = ({
   relic,
-  // characterId = undefined, // CharacterPreview by way of RelicScorerTab
+  characterId = undefined,
   score,
   source = '',
   setSelectedRelic = () => { },
   setEditModalOpen = () => { },
+  setAddModelOpen = () => { },
 }) => {
   relic = {
     enhance: 0,
@@ -26,23 +27,32 @@ const RelicPreview = ({
     ...relic,
   }
 
-  const { enhance, part, set, substats, main, equippedBy } = relic
+  const { enhance, part, set, substats, main, equippedBy, id } = relic
   const relicSrc = set ? Assets.getSetImage(set, part) : Assets.getBlank()
   const equippedBySrc = equippedBy ? Assets.getCharacterAvatarById(equippedBy) : Assets.getBlank()
   const scored = relic !== undefined && score !== undefined
 
-  const relicClicked = () => {
-    if (!relic || !relic.part || !relic.set || source == 'scorer' || source == 'builds') return
+  const cardClicked = () => {
+    if (!id && !characterId) return
 
-    setSelectedRelic(relic)
-    setEditModalOpen(true)
+    if (characterId) {
+      console.log(`Add new relic for characterId=${characterId}.`)
+      relic.equippedBy = characterId
+      relic.enhance = 15
+      relic.grade = 5
+      setSelectedRelic(relic)
+      setAddModelOpen(true)
+    } else {
+      setSelectedRelic(relic)
+      setEditModalOpen(true)
+    }
   }
 
   return (
     <Card
       size="small"
       hoverable={source != 'scorer' && source != 'builds'}
-      onClick={relicClicked}
+      onClick={cardClicked}
       style={{ width: 200, height: 280 }}
     /*
      * onMouseEnter={() => setHovered(true)}
@@ -61,7 +71,7 @@ const RelicPreview = ({
               {Renderer.renderGrade(relic)}
               <Flex style={{ width: 30 }} justify="space-around">
                 <RelicStatText>
-                  {part != undefined ? `+${enhance}` : ''}
+                  {id != undefined ? `+${enhance}` : ''}
                 </RelicStatText>
               </Flex>
             </Flex>