feat(editor2): remember modified skill levels

Author: guansss

src/components/editor2/editor-state.ts

@@ -5,7 +5,7 @@ import {
   getDefaultStore,
   useAtom,
 } from 'jotai'
-import { atomWithStorage, splitAtom } from 'jotai/utils'
+import { atomFamily, atomWithStorage, splitAtom } from 'jotai/utils'
 import { noop } from 'lodash-es'
 import { useMemo } from 'react'
 import { SetRequired, Simplify } from 'type-fest'
@@ -237,6 +237,11 @@ const editorVisibleEntityErrorsAtom = atom((get) =>
   get(editorErrorsVisibleAtom) ? get(editorEntityErrorsAtom) : undefined,
 )
 
+// this atom will cause some memory leak but generally not a big deal
+const skillLevelOverridesAtom = atomFamily((id: string) =>
+  atom<Record<number, number>>({}),
+)
+
 export const editorAtoms = {
   editor: editorAtom,
   operation: operationAtom,
@@ -260,13 +265,39 @@ export const editorAtoms = {
   activeActionIdAtom: atom<string | undefined>(undefined),
   sourceEditorIsOpen: atom(false),
   selectorPanelMode: atom<'operator' | 'map'>('operator'),
+  // this atom will cause some memory leak as it does not clean up until the editor is reset,
+  // but generally it's not a big deal
+  skillLevelOverrides: skillLevelOverridesAtom,
 
   // validation
   globalErrors: editorGlobalErrorsAtom,
   entityErrors: editorEntityErrorsAtom,
   errorsVisible: editorErrorsVisibleAtom,
   visibleGlobalErrors: editorVisibleGlobalErrorsAtom,
   visibleEntityErrors: editorVisibleEntityErrorsAtom,
+
+  reset: atom(
+    null,
+    (get, set, editorState: EditorState = defaultEditorState) => {
+      set(editorAtom, editorState)
+      set(editorGlobalErrorsAtom, [])
+      set(editorEntityErrorsAtom, {})
+
+      skillLevelOverridesAtom.setShouldRemove(() => true)
+      skillLevelOverridesAtom.setShouldRemove(null)
+      const setSkillLevel = (operator: EditorOperator) => {
+        if (operator.skill && operator.requirements?.skillLevel) {
+          set(skillLevelOverridesAtom(operator.id), {
+            [operator.skill]: operator.requirements.skillLevel,
+          })
+        }
+      }
+      editorState.operation.opers.forEach(setSkillLevel)
+      editorState.operation.groups.forEach((group) =>
+        group.opers.forEach(setSkillLevel),
+      )
+    },
+  ),
 }
 
 export const historyAtom = createHistoryAtom(

src/components/editor2/operator/OperatorItem.tsx

@@ -10,7 +10,7 @@ import {
 import { Popover2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
-import { useSetAtom } from 'jotai'
+import { useAtom, useSetAtom } from 'jotai'
 import { clamp } from 'lodash-es'
 import { FC, memo } from 'react'
 
@@ -34,7 +34,7 @@ import { SortableItemProps } from '../../dnd'
 import { DetailedSelect } from '../../editor/DetailedSelect'
 import { NumericInput2 } from '../../editor/NumericInput2'
 import { OperatorAvatar } from '../../editor/operator/EditorOperator'
-import { EditorOperator, useEdit } from '../editor-state'
+import { EditorOperator, editorAtoms, useEdit } from '../editor-state'
 import { editorFavOperatorsAtom } from '../reconciliation'
 
 interface OperatorItemProps extends Partial<SortableItemProps> {
@@ -64,17 +64,16 @@ export const OperatorItem: FC<OperatorItemProps> = memo(
   }) => {
     const t = useTranslation()
     const edit = useEdit()
+    const [skillLevels, setSkillLevels] = useAtom(
+      editorAtoms.skillLevelOverrides(operator.id),
+    )
     const setFavOperators = useSetAtom(editorFavOperatorsAtom)
     const info = OPERATORS.find(({ name }) => name === operator.name)
     const skillCount = info ? getSkillCount(info) : 3
     const requirements = withDefaultRequirements(
       operator.requirements,
       info?.rarity,
     )
-    const detailedSkills = Array.from({ length: skillCount }, (_, index) => ({
-      available: index <= requirements.elite,
-      defaultLevel: getDefaultRequirements(info?.rarity).skillLevel,
-    }))
     const controlsEnabled = !onOverlay && !isDragging && !isSorting
 
     return (
@@ -307,13 +306,16 @@ export const OperatorItem: FC<OperatorItemProps> = memo(
 
         <ul className="w-8 grid grid-rows-4 gap-1 ml-1 mt-1">
           {controlsEnabled &&
-            detailedSkills.map(({ defaultLevel, available }, index) => {
+            Array.from({ length: skillCount }, (_, index) => {
+              const available = index <= requirements.elite
               const skillNumber = index + 1
               const selected = operator.skill === skillNumber
+              const maxSkillLevel = requirements.elite === 2 ? 10 : 7
               const skillLevel = selected
                 ? requirements.skillLevel
-                : defaultLevel
-              const maxLevel = requirements.elite === 2 ? 10 : 7
+                : skillLevels[skillNumber] ??
+                  getDefaultRequirements(info?.rarity).skillLevel
+
               return (
                 <li
                   key={index}
@@ -343,7 +345,15 @@ export const OperatorItem: FC<OperatorItemProps> = memo(
                     onFocus={() => {
                       if (operator.skill !== skillNumber) {
                         edit(() => {
-                          onChange?.({ ...operator, skill: skillNumber })
+                          onChange?.({
+                            ...operator,
+                            skill: skillNumber,
+                            requirements: {
+                              ...operator.requirements,
+                              // override with the current skill level
+                              skillLevel,
+                            },
+                          })
                           return {
                             action: 'set-operator-skill',
                             desc: i18n.actions.editor2.set_operator_skill,
@@ -362,8 +372,12 @@ export const OperatorItem: FC<OperatorItemProps> = memo(
                         if (newLevel === 0) {
                           newLevel = 10
                         }
-                        newLevel = clamp(newLevel, 1, maxLevel)
+                        newLevel = clamp(newLevel, 1, maxSkillLevel)
 
+                        setSkillLevels((prev) => ({
+                          ...prev,
+                          [skillNumber]: newLevel,
+                        }))
                         onChange?.({
                           ...operator,
                           requirements: {
@@ -381,15 +395,20 @@ export const OperatorItem: FC<OperatorItemProps> = memo(
                     onWheelFocused={(e) => {
                       e.preventDefault()
                       edit(() => {
+                        const newLevel = clamp(
+                          requirements.skillLevel + (e.deltaY > 0 ? -1 : 1),
+                          1,
+                          maxSkillLevel,
+                        )
+                        setSkillLevels((prev) => ({
+                          ...prev,
+                          [skillNumber]: newLevel,
+                        }))
                         onChange?.({
                           ...operator,
                           requirements: {
                             ...operator.requirements,
-                            skillLevel: clamp(
-                              requirements.skillLevel + (e.deltaY > 0 ? -1 : 1),
-                              1,
-                              maxLevel,
-                            ),
+                            skillLevel: newLevel,
                           },
                         })
                         return {

src/pages/editor.tsx

@@ -39,7 +39,7 @@ export const EditorPage = withSuspensable(() => {
     revalidateOnReconnect: false,
   }).data
   const t = useTranslation()
-  const setEditorState = useSetAtom(editorAtoms.editor)
+  const resetEditor = useSetAtom(editorAtoms.reset)
 
   if (process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -48,7 +48,7 @@ export const EditorPage = withSuspensable(() => {
 
   useLayoutEffect(() => {
     if (apiOperation) {
-      setEditorState({
+      resetEditor({
         operation: toEditorOperation(
           operationLooseSchema.parse(JSON.parse(apiOperation.content)),
         ),
@@ -60,9 +60,9 @@ export const EditorPage = withSuspensable(() => {
         },
       })
     } else {
-      setEditorState(defaultEditorState)
+      resetEditor(defaultEditorState)
     }
-  }, [apiOperation, setEditorState])
+  }, [apiOperation, resetEditor])
 
   const handleSubmit = useAtomCallback(
     useCallback(