Updated editor to support unactivated stats (#3087)

* Updated editor to support unactivated stats

* Allow substat to stay selected when clicking checkbox

* Fix type error

* Fix issue when changing substats

* Resolve issues with swap overlap and stats losing values

* Fix edit mode

Author: failchon

libs/gi/localization/assets/locales/en/artifact.json

@@ -42,7 +42,8 @@
       "alert": "NOTE: Artifact Scanning currently only works for <strong>ENGLISH</strong> artifacts.",
       "section1": "<0>Using screenshots can dramatically decrease the amount of time you manually input in stats on the Genshin Optimizer.</0><1>Where to snip the screenshot.</1><2>In game, Open your bag, and navigate to the artifacts tab. Select the artifact you want to scan with Genshin Optimizer. <2>Only artifact from this screen can be scanned.</2></2><3>Single artifact</3><4>To take a screenshot, in Windows, the shortcut is <2>Alt + Print Screen</2>. Once you selected the region, the image is automatically included in your clipboard.</4><5>Multiple artifacts</5><6>To take advantage of batch uploads, you can use a tool like <2>PicPick</2> to create a macro to easily to screenshot multiple artifacts at once.</6><7>What to include in the screenshot.</7><8>The full genshin window, or at least a region that covers the artifact card.</8>",
       "section2": "<0>Adding Screenshot to Genshin Optimizer</0><1>At this point, you should have the artifact screenshot either saved to your harddrive, or in your clipboard.</1><2>You can click on the box next to \"Browse\" to browse the files in your harddrive for multiple screenshots.</2><3>For single screenshots from the snippets, just press <2>Ctrl + V</2> to paste from your clipboard.</3><4>You should be able to see a Preview of your artifact snippet, and after waiting a few seconds, the artifact set and the substats will be filled in in the <1>Artifact Editor</1>.</4><5>Finishing the Artifact</5><6>Unfortunately, computer vision is not 100%. There will always be cases where something is not scanned properly. You should always double check the scanned artifact values! Once the artifact has been filled, Click on <2>Add Artifact</2> to finish editing the artifact.</6>"
-    }
+    },
+    "unactivated": "Unactivated"
   },
   "slot": "Slot",
   "setEffectNum": "{{setNum}}-Set",

libs/gi/ui/src/components/artifact/editor/SubstatInput.tsx

@@ -23,35 +23,62 @@ import {
   Box,
   Button,
   ButtonGroup,
+  FormControlLabel,
   Grid,
   ListItemIcon,
   ListItemText,
   MenuItem,
   Slider,
   Typography,
 } from '@mui/material'
+import Checkbox from '@mui/material/Checkbox'
 import { useEffect, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { PercentBadge } from '../../PercentBadge'
 import { ArtifactStatWithUnit } from '../ArtifactStatKeyDisplay'
 import type { RollColorKey } from '../util'
+
+function getCorrectSubstats(
+  artifact: ICachedArtifact | undefined,
+  isUnactivatedSubstat: boolean,
+  substatIndex: number
+) {
+  if (
+    artifact?.unactivatedSubstats &&
+    substatIndex === 3 &&
+    isUnactivatedSubstat
+  ) {
+    return artifact.unactivatedSubstats[0]
+  } else {
+    return artifact?.substats[substatIndex]
+  }
+}
+
 export function SubstatInput({
   index,
   artifact,
   setSubstat,
+  onChange,
+  isUnactivatedSubstat,
 }: {
   index: number
   artifact: ICachedArtifact | undefined
-  setSubstat: (index: number, substat: ISubstat) => void
+  setSubstat: (
+    index: number,
+    substat: ISubstat,
+    isUnactivatedSubstat: boolean
+  ) => void
+  onChange: (index: number, substat: ISubstat, isChecked: boolean) => void
+  isUnactivatedSubstat: boolean
 }) {
   const { t } = useTranslation('artifact')
-  const { mainStatKey = '', rarity = 5 } = artifact ?? {}
+  const { mainStatKey = '', rarity = 5, level = 0 } = artifact ?? {}
   const {
     key = '',
     value = 0,
     rolls = [],
     efficiency = 0,
-  } = artifact?.substats[index] ?? {}
+  } = getCorrectSubstats(artifact, isUnactivatedSubstat, index) ?? {}
 
   const accurateValue = rolls.reduce((a, b) => a + b, 0)
   const unit = getUnitStr(key),
@@ -108,7 +135,9 @@ export function SubstatInput({
           >
             {key && (
               <MenuItem
-                onClick={() => setSubstat(index, { key: '', value: 0 })}
+                onClick={() =>
+                  setSubstat(index, { key: '', value: 0 }, isUnactivatedSubstat)
+                }
               >
                 {t('editor.substat.noSubstat')}
               </MenuItem>
@@ -120,7 +149,13 @@ export function SubstatInput({
                   key={k}
                   selected={key === k}
                   disabled={key === k}
-                  onClick={() => setSubstat(index, { key: k, value: 0 })}
+                  onClick={() =>
+                    setSubstat(
+                      index,
+                      { key: k, value: 0 },
+                      isUnactivatedSubstat
+                    )
+                  }
                 >
                   <ListItemIcon>
                     <StatIcon statKey={k} />
@@ -144,8 +179,14 @@ export function SubstatInput({
             float={unit === '%'}
             placeholder={t('editor.substat.selectSub')}
             value={key ? value : 0}
-            onChange={(value) => setSubstat(index, { key, value: value ?? 0 })}
-            disabled={!key}
+            onChange={(value) =>
+              setSubstat(
+                index,
+                { key, value: value ?? 0 },
+                isUnactivatedSubstat
+              )
+            }
+            disabled={!key || (isUnactivatedSubstat && index === 3)}
             error={!!error}
             inputProps={{
               sx: { textAlign: 'right' },
@@ -163,9 +204,17 @@ export function SubstatInput({
               <Button
                 key={i}
                 color={`roll${clamp(rollOffset + i, 1, 6)}` as any}
-                disabled={(value && !rollNum) || allowedRolls <= 0}
+                disabled={
+                  (value && !rollNum) ||
+                  allowedRolls <= 0 ||
+                  (isUnactivatedSubstat && rollNum > 0 && index === 3)
+                }
                 onClick={() =>
-                  setSubstat(index, { key, value: parseFloat(newValue) })
+                  setSubstat(
+                    index,
+                    { key, value: parseFloat(newValue) },
+                    isUnactivatedSubstat
+                  )
                 }
               >
                 {newValue}
@@ -179,9 +228,13 @@ export function SubstatInput({
           value={value}
           marks={marks}
           setValue={(v) =>
-            setSubstat(index, { key, value: (v as number) ?? 0 })
+            setSubstat(
+              index,
+              { key, value: (v as number) ?? 0 },
+              isUnactivatedSubstat
+            )
           }
-          disabled={!key}
+          disabled={!key || (isUnactivatedSubstat && index === 3)}
         />
       </Box>
       <Box sx={{ px: 1, pb: 1 }}>
@@ -202,7 +255,7 @@ export function SubstatInput({
                   : t('editor.substat.noRoll')}
               </SqBadge>
             </Grid>
-            <Grid item flexGrow={1}>
+            <Grid item>
               {!!rolls.length &&
                 [...rolls].sort().map((val, i) => (
                   <Typography
@@ -219,6 +272,30 @@ export function SubstatInput({
                   </Typography>
                 ))}
             </Grid>
+            <Grid item flexGrow={1}>
+              {index === 3 ? (
+                <FormControlLabel
+                  label={t('editor.unactivated')}
+                  control={
+                    <Checkbox
+                      checked={isUnactivatedSubstat}
+                      onChange={(e) =>
+                        onChange(
+                          index,
+                          { key: key, value: value },
+                          e.target.checked
+                        )
+                      }
+                      sx={{ padding: 0 }}
+                      disabled={!artifact || level > 0}
+                    ></Checkbox>
+                  }
+                  sx={{ ml: 1 }}
+                />
+              ) : (
+                ''
+              )}
+            </Grid>
             <Grid item xs="auto" flexShrink={1}>
               <Typography>
                 <Trans

libs/gi/ui/src/components/artifact/editor/index.tsx

@@ -98,9 +98,19 @@ import { UploadExplainationModal } from './UploadExplainationModal'
 const allSubstatFilter = new Set(allSubstatKeys)
 type ResetMessage = { type: 'reset' }
 type SubstatMessage = { type: 'substat'; index: number; substat: ISubstat }
+type UnactivatedSubstatMessage = {
+  type: 'unactivatedSubstat'
+  index: number
+  substat: ISubstat
+}
 type OverwriteMessage = { type: 'overwrite'; artifact: IArtifact }
 type UpdateMessage = { type: 'update'; artifact: Partial<IArtifact> }
-type Message = ResetMessage | SubstatMessage | OverwriteMessage | UpdateMessage
+type Message =
+  | ResetMessage
+  | SubstatMessage
+  | OverwriteMessage
+  | UpdateMessage
+  | UnactivatedSubstatMessage
 function artifactReducer(
   state: IArtifact | undefined,
   action: Message
@@ -114,6 +124,7 @@ function artifactReducer(
         const oldIndex = substat.key
           ? state!.substats.findIndex((current) => current.key === substat.key)
           : -1
+
         if (oldIndex === -1 || oldIndex === index)
           state!.substats[index] = substat
         // Already in used, swap the items instead
@@ -122,6 +133,79 @@ function artifactReducer(
             state!.substats[oldIndex],
             state!.substats[index],
           ]
+
+        // Reset unactivated substat data if it exists
+        if (
+          state!.unactivatedSubstats?.length &&
+          state!.unactivatedSubstats[0].key
+        ) {
+          state!.unactivatedSubstats = []
+        }
+        return { ...state! }
+      }
+      case 'unactivatedSubstat': {
+        if (!state?.unactivatedSubstats) {
+          return { ...state! }
+        }
+
+        const { index, substat } = action
+        const findSubstatIndex = (
+          substats: typeof state.substats,
+          key: string
+        ) => substats.findIndex((current) => current.key === key)
+        const oldActivatedIndex = substat.key
+          ? findSubstatIndex(state.substats, substat.key)
+          : -1
+        const unactivatedIndex = substat.key
+          ? findSubstatIndex(state.unactivatedSubstats, substat.key)
+          : -1
+        const oldUnactivatedIndex =
+          unactivatedIndex !== -1 ? unactivatedIndex + 3 : -1
+        const activeSubstat = state.substats[3].key
+          ? state.substats[3]
+          : substat
+
+        // Allow swapping of substats between unactivated and activated
+        if (index === 3) {
+          // check if unactivated stat needs to swap with activated stat
+          if (oldUnactivatedIndex === -1 || oldUnactivatedIndex === index) {
+            if (
+              oldActivatedIndex !== -1 &&
+              oldUnactivatedIndex !== oldActivatedIndex
+            ) {
+              const tempStat = state!.unactivatedSubstats[0]
+              state!.unactivatedSubstats[0] = state!.substats[oldActivatedIndex]
+              state!.substats[oldActivatedIndex] = tempStat
+            } else {
+              state!.unactivatedSubstats[0] = activeSubstat
+            }
+          }
+        } else {
+          // check if activated stat needs to swap with unactivated stat
+          if (oldActivatedIndex === -1 || oldActivatedIndex === index) {
+            if (
+              oldUnactivatedIndex !== -1 &&
+              oldUnactivatedIndex !== oldActivatedIndex
+            ) {
+              const tempStat = state!.substats[index]
+              state!.substats[index] = state!.unactivatedSubstats[0]
+              state!.unactivatedSubstats[0] = tempStat
+            } else {
+              state!.substats[index] = activeSubstat
+            }
+          } else {
+            // swap between activated stats
+            const tempStat = state!.substats[index]
+            state!.substats[index] = state!.substats[oldActivatedIndex]
+            state!.substats[oldActivatedIndex] = tempStat
+          }
+        }
+
+        // Reset activated substat
+        if (state.substats[3].key) {
+          state.substats[3] = { key: '', value: 0 }
+        }
+
         return { ...state! }
       }
       case 'overwrite':
@@ -172,6 +256,7 @@ export function ArtifactEditor({
   )
   const queue = queueRef.current
   const { t } = useTranslation('artifact')
+  const [isUnactivatedSubstat, setIsUnactivatedSubstat] = useState(false)
 
   const database = useDatabase()
 
@@ -246,6 +331,7 @@ export function ArtifactEditor({
   const artStat = artifact && getArtSetStat(artifact.setKey)
   const reset = useCallback(() => {
     cancelEdit?.()
+    setIsUnactivatedSubstat(false)
     artifactDispatch({ type: 'reset' })
     setScannedData(undefined)
   }, [cancelEdit, artifactDispatch])
@@ -304,8 +390,9 @@ export function ArtifactEditor({
     [artifact, artStat, artifactDispatch, fixedSlotKey]
   )
   const setSubstat = useCallback(
-    (index: number, substat: ISubstat) => {
-      artifactDispatch({ type: 'substat', index, substat })
+    (index: number, substat: ISubstat, isUnactivatedSubstat: boolean) => {
+      const type = isUnactivatedSubstat ? 'unactivatedSubstat' : 'substat'
+      artifactDispatch({ type: type, index, substat })
     },
     [artifactDispatch]
   )
@@ -425,6 +512,25 @@ export function ArtifactEditor({
     }
   }, [queue])
 
+  const handleChange = (
+    index: number,
+    substat: ISubstat,
+    isChecked: boolean
+  ) => {
+    setIsUnactivatedSubstat(isChecked)
+    setSubstat(index, substat, isChecked)
+  }
+
+  useEffect(() => {
+    if (level >= 4) {
+      setIsUnactivatedSubstat(false)
+    }
+
+    if (artifactIdToEdit && artifact?.unactivatedSubstats?.[0]?.key) {
+      setIsUnactivatedSubstat(true)
+    }
+  }, [artifact?.unactivatedSubstats, artifactIdToEdit, level])
+
   const removeId = (artifactIdToEdit !== 'new' && artifactIdToEdit) || old?.id
   return (
     <ModalWrapper open={show} onClose={onClose} data-testid="artifact-editor">
@@ -730,6 +836,8 @@ export function ArtifactEditor({
                   index={index}
                   artifact={cArtifact}
                   setSubstat={setSubstat}
+                  onChange={handleChange}
+                  isUnactivatedSubstat={isUnactivatedSubstat}
                 />
               ))}
               {texts && (