12422152220

Committed 19 Dec 2024 10:57PM UTC coverage: 52.396% (-13.2%) from 65.587%

Build # 12422152220

Build Type

Pull #11

github

Committed by

web-flow

Commit Message

Merge e0cd6a508 into 4f9f087f0

Pull Request Pull Request #11: Build units

Run Details

204 of 768 branches covered (26.56%)

Branch coverage included in aggregate %.

363 of 886 new or added lines in 84 files covered. (40.97%)

10 existing lines in 7 files now uncovered.

1414 of 2320 relevant lines covered (60.95%)

3.83 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/frontend/src/components/unit-requirements/UnitRequirements.tsx

import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import CircularProgress from '@mui/material/CircularProgress'
import Paper from '@mui/material/Paper'
import Box from '@mui/material/Box'
import Stack from '@mui/material/Stack'
import Tooltip from '@mui/material/Tooltip'
import Typography from '@mui/material/Typography'
import Divider from '@mui/material/Divider'
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
import Accordion from '@mui/material/Accordion'
import AccordionSummary from '@mui/material/AccordionSummary'
import AccordionDetails from '@mui/material/AccordionDetails'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import MilitaryTechIcon from '@mui/icons-material/MilitaryTech'
import WarningRoundedIcon from '@mui/icons-material/WarningRounded'

import { CheckUnitRequirementsType } from 'game-engine/src/engine/units/checkUnitRequirements'

import { useTranslations } from '../../store/TranslationContext'
import { useTheme } from '../../store/ThemeContext'

type UnitRequirementsProps = {
  unitName: string
  unitRequirements: CheckUnitRequirementsType
}

// TODO: ADD TRANSLATIONS 2

function UnitRequirements({ unitRequirements, unitName }: UnitRequirementsProps) {
  const { translate } = useTranslations()
  const { theme } = useTheme()

  const { isUnitAvailable, requirements } = unitRequirements

  const color = isUnitAvailable ? 'success' : 'warning'

  return (
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />} id={`unit-requirements-${unitName}`}>
        <Stack direction={'row'} gap={0.5} alignItems={'center'}>
          {isUnitAvailable ? (
            <CheckCircleIcon color={color} />
          ) : (
            <WarningRoundedIcon color={color} />
          )}
          <Typography fontSize={13} color={color}>
            {isUnitAvailable ? 'Unit available' : 'Unit not available'}
          </Typography>
        </Stack>
      </AccordionSummary>

      <Divider />

      <AccordionDetails sx={{ paddingBottom: 1.2 }}>
        <Box flexGrow={1}>
          <List disablePadding sx={{ display: 'flex', flexDirection: 'column', gap: 0.2 }}>
            {requirements.map(({ research, playerResearchLevel, level }) => {
              const isResearchCompleted = playerResearchLevel >= level
              const color = isResearchCompleted ? 'success' : 'info'
              const progress = isResearchCompleted ? 100 : (playerResearchLevel / level) * 100

              // TODO: add onclick to redirect to researches ???

              return (
                <ListItem disablePadding key={research.name}>
                  <Tooltip
                    title={
                      isResearchCompleted
                        ? translate('UNIT_REQUISITE_COMPLETED_TOOLTIP', level, research.name)
                        : translate(
                            'UNIT_REQUISITE_TOOLTIP',
                            playerResearchLevel,
                            level,
                            research.name
                          )
                    }
                    arrow
                  >
                    <Paper
                      variant="outlined"
                      sx={{
                        padding: 1
                      }}
                    >
                      <Stack direction={'row'} alignItems={'center'} alignContent={'center'}>
                        <Box position={'relative'} height={28}>
                          <Box
                            position={'absolute'}
                            top={0}
                            left={0}
                            color={theme.palette.grey[400]}
                          >
                            <CircularProgress
                              size="28px"
                              variant="determinate"
                              value={100}
                              thickness={4}
                              color={'inherit'}
                            />
                          </Box>

                          <Box color={theme.palette.info.dark}>
                            <CircularProgress
                              size="28px"
                              variant="determinate"
                              value={progress || 10}
                              thickness={4}
                              color={isResearchCompleted ? 'success' : 'inherit'}
                            />
                          </Box>

                          <Box
                            position={'absolute'}
                            sx={{ transform: 'translate(-50%, -50%)' }}
                            left={'50%'}
                            top={'50%'}
                          >
                            <Typography fontSize={14} color={color} fontWeight={500}>
                              {level}
                            </Typography>
                          </Box>
                        </Box>

                        <Stack
                          direction={'row'}
                          gap={0.5}
                          alignItems={'center'}
                          alignContent={'center'}
                        >
                          <MilitaryTechIcon color={color} />

                          <Typography fontSize={12} color={color}>
                            {translate(research.name)}
                          </Typography>
                        </Stack>
                      </Stack>
                    </Paper>
                  </Tooltip>
                </ListItem>
              )
            })}
          </List>
        </Box>
      </AccordionDetails>
    </Accordion>
  )
}

export default UnitRequirements

1	import List from '@mui/material/List'
2	import ListItem from '@mui/material/ListItem'
3	import CircularProgress from '@mui/material/CircularProgress'
4	import Paper from '@mui/material/Paper'
5	import Box from '@mui/material/Box'
6	import Stack from '@mui/material/Stack'
7	import Tooltip from '@mui/material/Tooltip'
8	import Typography from '@mui/material/Typography'
9	import Divider from '@mui/material/Divider'
10	import CheckCircleIcon from '@mui/icons-material/CheckCircle'
11	import Accordion from '@mui/material/Accordion'
12	import AccordionSummary from '@mui/material/AccordionSummary'
13	import AccordionDetails from '@mui/material/AccordionDetails'
14	import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
15	import MilitaryTechIcon from '@mui/icons-material/MilitaryTech'
16	import WarningRoundedIcon from '@mui/icons-material/WarningRounded'
17
18	import { CheckUnitRequirementsType } from 'game-engine/src/engine/units/checkUnitRequirements'
19
20	import { useTranslations } from '../../store/TranslationContext'
21	import { useTheme } from '../../store/ThemeContext'
22
23	type UnitRequirementsProps = {
24	unitName: string
25	unitRequirements: CheckUnitRequirementsType
26	}
27
28	// TODO: ADD TRANSLATIONS 2
29
30	function UnitRequirements({ unitRequirements, unitName }: UnitRequirementsProps) {
NEW 31	const { translate } = useTranslations()	×
NEW 32	const { theme } = useTheme()	×
33
NEW 34	const { isUnitAvailable, requirements } = unitRequirements	×
35
NEW 36	const color = isUnitAvailable ? 'success' : 'warning'	×
37
NEW 38	return (	×
39	<Accordion>
40	<AccordionSummary expandIcon={<ExpandMoreIcon />} id={`unit-requirements-${unitName}`}>
41	<Stack direction={'row'} gap={0.5} alignItems={'center'}>
42	{isUnitAvailable ? (	×
43	<CheckCircleIcon color={color} />
44	) : (
45	<WarningRoundedIcon color={color} />
46	)}
47	<Typography fontSize={13} color={color}>
48	{isUnitAvailable ? 'Unit available' : 'Unit not available'}	×
49	</Typography>
50	</Stack>
51	</AccordionSummary>
52
53	<Divider />
54
55	<AccordionDetails sx={{ paddingBottom: 1.2 }}>
56	<Box flexGrow={1}>
57	<List disablePadding sx={{ display: 'flex', flexDirection: 'column', gap: 0.2 }}>
58	{requirements.map(({ research, playerResearchLevel, level }) => {
NEW 59	const isResearchCompleted = playerResearchLevel >= level	×
NEW 60	const color = isResearchCompleted ? 'success' : 'info'	×
NEW 61	const progress = isResearchCompleted ? 100 : (playerResearchLevel / level) * 100	×
62
63	// TODO: add onclick to redirect to researches ???
64
NEW 65	return (	×
66	<ListItem disablePadding key={research.name}>
67	<Tooltip
68	title={
69	isResearchCompleted	×
70	? translate('UNIT_REQUISITE_COMPLETED_TOOLTIP', level, research.name)
71	: translate(
72	'UNIT_REQUISITE_TOOLTIP',
73	playerResearchLevel,
74	level,
75	research.name
76	)
77	}
78	arrow
79	>
80	<Paper
81	variant="outlined"
82	sx={{
83	padding: 1
84	}}
85	>
86	<Stack direction={'row'} alignItems={'center'} alignContent={'center'}>
87	<Box position={'relative'} height={28}>
88	<Box
89	position={'absolute'}
90	top={0}
91	left={0}
92	color={theme.palette.grey[400]}
93	>
94	<CircularProgress
95	size="28px"
96	variant="determinate"
97	value={100}
98	thickness={4}
99	color={'inherit'}
100	/>
101	</Box>
102
103	<Box color={theme.palette.info.dark}>
104	<CircularProgress
105	size="28px"
106	variant="determinate"
107	value={progress \|\| 10}	×
108	thickness={4}
109	color={isResearchCompleted ? 'success' : 'inherit'}	×
110	/>
111	</Box>
112
113	<Box
114	position={'absolute'}
115	sx={{ transform: 'translate(-50%, -50%)' }}
116	left={'50%'}
117	top={'50%'}
118	>
119	<Typography fontSize={14} color={color} fontWeight={500}>
120	{level}
121	</Typography>
122	</Box>
123	</Box>
124
125	<Stack
126	direction={'row'}
127	gap={0.5}
128	alignItems={'center'}
129	alignContent={'center'}
130	>
131	<MilitaryTechIcon color={color} />
132
133	<Typography fontSize={12} color={color}>
134	{translate(research.name)}
135	</Typography>
136	</Stack>
137	</Stack>
138	</Paper>
139	</Tooltip>
140	</ListItem>
141	)
142	})}
143	</List>
144	</Box>
145	</AccordionDetails>
146	</Accordion>
147	)
148	}
149
150	export default UnitRequirements

DaniSomoza / galactic-commander / 12422152220

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous