fix: language not synced for some text

AlvISsReimu · Nov 1, 2024 · d857b3f · d857b3f
1 parent faa346b
commit d857b3f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/front-end/src/components/quartzTable.tsx b/packages/front-end/src/components/quartzTable.tsx
@@ -18,7 +18,7 @@ import {
 } from '@mui/material'
 import { ALL_QUARTZ } from '@shared/constants/quartz'
 import { ElementType } from '@shared/enums/elementType'
-import { useContext, useEffect, useRef } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { globalContext } from '../contexts/globalContext'
 
 import { ExpandMore } from '@mui/icons-material'
@@ -62,24 +62,15 @@ export const QuartzTable = (props: {
   const [quartzTableExpanded, setQuartzTableExpanded] =
     useSingletonLocalStorage('quartzTableExpanded', true)
   const { t } = useTranslation()
-  const optionLabels = useRef(_loadOptionLabels())
+  const [optionLabels, setOptionLabels] = useState(_loadOptionLabels())
   const theme = useTheme()
   const textColor = theme.palette.text.primary
   const customOrange = theme.palette.colors.customOrange
 
   useEffect(() => {
-    optionLabels.current = _loadOptionLabels()
+    setOptionLabels(_loadOptionLabels())
   }, [gc.language])
 
-  const getOptionLabel = (value: number) => {
-    if (value === -1) {
-      return optionLabels.current.disabled
-    } else if (value === 0) {
-      return optionLabels.current.enabled
-    }
-    return value
-  }
-
   const updateQuartzState = (ev: SelectChangeEvent, id: number) => {
     const copy = [...props.data]
     copy[id] = parseInt(ev.target.value)
@@ -192,7 +183,15 @@ export const QuartzTable = (props: {
                                 }}
                               >
                                 <Typography>
-                                  {getOptionLabel(index - 1)}
+                                  {
+                                    optionLabels[
+                                      index < 1
+                                        ? 'disabled'
+                                        : index > 1
+                                          ? 'weighted'
+                                          : 'enabled'
+                                    ]
+                                  }
                                 </Typography>
                                 {index === 0 && (
                                   <ClearIcon

diff --git a/packages/front-end/src/components/result.tsx b/packages/front-end/src/components/result.tsx
@@ -103,7 +103,24 @@ export const Result = (props: {
                         }}
                       >
                         {quartzId === -1 ? (
-                          <span>⎯</span>
+                          <span
+                            style={{
+                              padding: '0 4px',
+                              backgroundColor: limitedSlots[index]?.includes(
+                                ind,
+                              )
+                                ? colorMap[
+                                    getQuartzById(quartzId)
+                                      .elementType as keyof typeof colorMap
+                                  ]
+                                : 'unset',
+                              color: limitedSlots[index]?.includes(ind)
+                                ? 'white'
+                                : 'unset',
+                            }}
+                          >
+                            ⎯
+                          </span>
                         ) : (
                           <>
                             <span