Updated editor to support unactivated stats

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,59 @@ 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,
 }: {
   index: number
   artifact: ICachedArtifact | undefined
-  setSubstat: (index: number, substat: ISubstat) => void
+  setSubstat: (
+    index: number,
+    substat: ISubstat,
+    isUnactivatedSubstat: boolean
+  ) => void
 }) {
   const { t } = useTranslation('artifact')
-  const { mainStatKey = '', rarity = 5 } = artifact ?? {}
+  const [isUnactivatedSubstat, setIsUnactivatedSubstat] = useState(false)
+  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),
@@ -89,6 +113,24 @@ export function SubstatInput({
     [key, rarity]
   )
 
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsUnactivatedSubstat(event.target.checked)
+    setSubstat(index, { key: key, value: 0 }, event.target.checked)
+  }
+
+  useEffect(() => {
+    if (level >= 4) {
+      setIsUnactivatedSubstat(false)
+    }
+
+    if (
+      artifact?.unactivatedSubstats?.length &&
+      artifact.unactivatedSubstats[0].key
+    ) {
+      setIsUnactivatedSubstat(true)
+    }
+  }, [artifact?.unactivatedSubstats, level])
+
   return (
     <CardThemed bgt="light">
       <Box sx={{ display: 'flex', height: '2.5em' }}>
@@ -108,7 +150,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 +164,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 +194,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 +219,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 +243,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 +270,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 +287,24 @@ export function SubstatInput({
                   </Typography>
                 ))}
             </Grid>
+            <Grid item flexGrow={1}>
+              {index === 3 ? (
+                <FormControlLabel
+                  label={t('editor.unactivated')}
+                  control={
+                    <Checkbox
+                      checked={isUnactivatedSubstat}
+                      onChange={handleChange}
+                      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,14 @@ function artifactReducer(
         const oldIndex = substat.key
           ? state!.substats.findIndex((current) => current.key === substat.key)
           : -1
+
+        if (
+          state!.unactivatedSubstats?.length &&
+          state!.unactivatedSubstats[0].key
+        ) {
+          state!.unactivatedSubstats = []
+        }
+
         if (oldIndex === -1 || oldIndex === index)
           state!.substats[index] = substat
         // Already in used, swap the items instead
@@ -124,6 +142,39 @@ function artifactReducer(
           ]
         return { ...state! }
       }
+      case 'unactivatedSubstat': {
+        if (state?.unactivatedSubstats) {
+          const { substat } = action
+
+          let activeSubstat = null
+
+          if (state!.substats[3].key) {
+            activeSubstat = state!.substats[3]
+            state!.substats[3] = { key: '', value: 0 }
+          } else {
+            activeSubstat = substat
+          }
+
+          const oldIndex = substat.key
+            ? state!.unactivatedSubstats.findIndex(
+                (current) => current.key === substat.key
+              )
+            : -1
+          if (oldIndex === -1 || oldIndex === 0)
+            state!.unactivatedSubstats[0] = activeSubstat
+          // Already in used, swap the items instead
+          else
+            [
+              state!.unactivatedSubstats[0],
+              state!.unactivatedSubstats[oldIndex],
+            ] = [
+              state!.unactivatedSubstats[oldIndex],
+              state!.unactivatedSubstats[0],
+            ]
+        }
+        console.log(state!.substats, 'subers')
+        return { ...state! }
+      }
       case 'overwrite':
         return action.artifact
       case 'update':
@@ -304,8 +355,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]
   )