feat(#262): add new relic modal when clicking on empty relic slot in … (

#269) * feat(#262): add new relic modal when clicking on empty relic slot in character preview * fix(RelicPreview): do not show RelicModal in RelicScorerTab * fix(RelicPreview): correctly edit relic when clicking on a relic
fribbels · Apr 8, 2024 · 67bd12d · 67bd12d
1 parent 0e7447f
commit 67bd12d
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 14 deletions.
diff --git 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,23 +315,26 @@ 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)}
           />
           <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)}
           />
           <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,23 +345,26 @@ 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)}
           />
           <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)}
           />
           <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
@@ -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) || source === 'scorer' || source === 'builds') return
 
-    setSelectedRelic(relic)
-    setEditModalOpen(true)
+    if (!id) {
+      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>