Fix ui display

frzyc · Jan 1, 2024 · 17629ee · 17629ee
1 parent 6f740bb
commit 17629ee
Showing 1 changed file with 61 additions and 19 deletions.
diff --git a/apps/sr-frontend/src/app/Character.tsx b/apps/sr-frontend/src/app/Character.tsx
@@ -7,8 +7,18 @@ import {
   useCharacterReducer,
 } from '@genshin-optimizer/sr-ui'
 import { CardThemed } from '@genshin-optimizer/ui-common'
-import { Box, CardContent, Stack, TextField, Typography } from '@mui/material'
-import { Container } from '@mui/system'
+import { ExpandMore } from '@mui/icons-material'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  CardContent,
+  Container,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material'
 
 export default function Character() {
   const { characterKey } = useCharacterContext()
@@ -44,24 +54,56 @@ export default function Character() {
                 })
               }
             />
-            {(
-              [
-                ['ATK', 'atk'],
-                ['DEF', 'def'],
-                ['HP', 'hp'],
-                ['SPD', 'spd'],
-              ] as const
-            ).map(([txt, skey]) => (
-              <Typography key={skey}>
-                {txt}: {calc?.compute(member0.final[skey]).val}
-              </Typography>
-            ))}
-          </Stack>
-          <Stack>
-            {calc
-              ?.listFormulas(member0.listing.formulas)
-              .map((read) => calc.compute(read).val)}
+            <Accordion>
+              <AccordionSummary expandIcon={<ExpandMore />}>
+                Basic stats for all chars
+              </AccordionSummary>
+              <AccordionDetails>
+                {(
+                  [
+                    ['ATK', 'atk'],
+                    ['DEF', 'def'],
+                    ['HP', 'hp'],
+                    ['SPD', 'spd'],
+                  ] as const
+                ).map(([txt, skey]) => (
+                  <Typography key={skey}>
+                    {txt}: {calc?.compute(member0.final[skey]).val}
+                  </Typography>
+                ))}
+              </AccordionDetails>
+            </Accordion>
           </Stack>
+          <Accordion>
+            <AccordionSummary expandIcon={<ExpandMore />}>
+              All target values, if sheet is created
+            </AccordionSummary>
+            <AccordionDetails>
+              <Stack>
+                {calc?.listFormulas(member0.listing.formulas).map((read) => {
+                  const computed = calc.compute(read)
+                  const name = read.tag.name || read.tag.q
+                  return (
+                    <Box>
+                      <Typography key={name}>
+                        {name}: {computed.val}
+                      </Typography>
+                      <Accordion>
+                        <AccordionSummary expandIcon={<ExpandMore />}>
+                          meta for {name}
+                        </AccordionSummary>
+                        <AccordionDetails>
+                          <Typography component="pre">
+                            {JSON.stringify(computed.meta, undefined, 2)}
+                          </Typography>{' '}
+                        </AccordionDetails>
+                      </Accordion>
+                    </Box>
+                  )
+                })}
+              </Stack>
+            </AccordionDetails>
+          </Accordion>
         </CardContent>
       </CardThemed>
     </Container>