12728621970

Committed 11 Jan 2025 11:55PM UTC coverage: 47.963% (-4.1%) from 52.086%

Build # 12728621970

Build Type

Pull #12

github

Committed by

web-flow

Commit Message

Merge e784abf9e into a8e301a23

Pull Request Pull Request #12: [fleets] Explore planets

Run Details

214 of 913 branches covered (23.44%)

Branch coverage included in aggregate %.

154 of 505 new or added lines in 55 files covered. (30.5%)

10 existing lines in 9 files now uncovered.

1564 of 2794 relevant lines covered (55.98%)

3.46 hits per line

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

0.0

/packages/frontend/src/pages/game/GameGalaxiesPage.tsx

import { useCallback, useEffect, useState } from 'react'
import Paper from '@mui/material/Paper'
import Stack from '@mui/material/Stack'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import TravelExploreIcon from '@mui/icons-material/TravelExplore'
import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'
import PublicIcon from '@mui/icons-material/Public'
import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded'
import NavigateBeforeRoundedIcon from '@mui/icons-material/NavigateBeforeRounded'

import { PlanetType } from 'game-api-microservice/src/types/Planet'
import { PlanetCoordinatesType } from 'game-api-microservice/src/types/Planet'

import { usePlayer } from '../../store/PlayerContext'
import Loader from '../../components/loader/Loader'
import formatCoordinatesLabel from '../../utils/formatPlanetCoordinates'
import { getGalaxy } from '../../endpoints/game/galaxyEndpoints'
import { useGameInfo } from '../../store/GameInfoContext'
import { useTranslations } from '../../store/TranslationContext'
import { useFleet } from '../../store/FleetContext'
import Fleet from '../../components/fleet/Fleet'
import PlanetCard from '../../components/planet-card/PlanetCard'

function GameGalaxiesPage() {
  const { translate } = useTranslations()
  const { player, isPlayerLoading, selectedPlanet } = usePlayer()
  const { explorePlanetFleet, unitsInThePlanet, fleetsInThePlanet } = useFleet()
  const { selectedUniverse } = useGameInfo()

  const universeName = selectedUniverse?.name

  const [galaxy, setGalaxy] = useState(selectedPlanet?.coordinates.galaxy)
  const [sector, setSector] = useState(selectedPlanet?.coordinates.sector)
  const [system, setSystem] = useState(selectedPlanet?.coordinates.system)

  const [planets, setPlanets] = useState<PlanetType[]>([])

  useEffect(() => {
    if (selectedPlanet) {
      setGalaxy((galaxy) => galaxy || selectedPlanet.coordinates.galaxy)
      setSector((sector) => sector || selectedPlanet.coordinates.sector)
      setSystem((system) => system || selectedPlanet.coordinates.system)
    }
  }, [selectedPlanet])

  const refreshPlanets = useCallback(async () => {
    if (universeName && galaxy && sector && system) {
      const {
        data: { planets }
      } = await getGalaxy(galaxy, sector, system, universeName)

      setPlanets(planets)
    }
  }, [galaxy, sector, system, universeName])

  useEffect(() => {
    refreshPlanets()
  }, [refreshPlanets])

  // TODO: onFinish a fleet refresh planets

  if (!player || isPlayerLoading || !selectedPlanet) {
    return <Loader isLoading />
  }

  const probeUnit = unitsInThePlanet.find(({ unit }) => unit.subtype === 'PROBE')?.unit
  // TODO: ADD amount of fleets available to check if its disabled or not

  async function fastExplorePlanetFleet(toPlanetCoordinates: PlanetCoordinatesType) {
    // TODO: add loading state
    if (probeUnit && selectedPlanet) {
      const exploreFleet = [{ unitName: probeUnit.name, amount: 1 }]
      await explorePlanetFleet(exploreFleet, selectedPlanet.coordinates, toPlanetCoordinates)
    }
  }

  return (
    <Stack gap={1} padding={1}>
      {/* TODO: ALL fleets, update this to only use new fleets */}
      <Stack gap={1}>
        {fleetsInThePlanet.map((planetFleet, index) => {
          return <Fleet key={index} fleet={planetFleet} onFinishFleet={refreshPlanets} />
        })}
      </Stack>

      {/* TODO: Planet Coordinates selector */}
      <Paper variant="outlined">
        <Box padding={1}>
          <Stack direction={'row'} gap={3} padding={1}>
            {/* Galaxy selector */}
            <Stack gap={1} justifyContent={'center'}>
              <Stack direction={'row'} gap={0.5} justifyContent={'center'} alignItems={'center'}>
                <Tooltip title={translate('PREVIOUS_GALAXY_SELECTOR')}>
                  <IconButton
                    size="small"
                    disabled={!probeUnit}
                    onClick={() => setGalaxy((galaxy) => galaxy! - 1)}
                  >
                    <NavigateBeforeRoundedIcon />
                  </IconButton>
                </Tooltip>
                <Paper variant="outlined">
                  <Typography
                    variant="body1"
                    textAlign={'center'}
                    padding={1}
                    paddingLeft={2}
                    paddingRight={2}
                  >
                    {galaxy}
                  </Typography>
                </Paper>
                <Tooltip title={translate('NEXT_GALAXY_SELECTOR')}>
                  <IconButton
                    size="small"
                    disabled={!probeUnit}
                    onClick={() => setGalaxy((galaxy) => galaxy! + 1)}
                  >
                    <NavigateNextRoundedIcon />
                  </IconButton>
                </Tooltip>
              </Stack>

              <Typography variant="body1" textAlign={'center'}>
                Galaxy
              </Typography>
            </Stack>

            {/* Sector selector */}
            <Stack gap={1} justifyContent={'center'}>
              <Stack direction={'row'} gap={0.5} justifyContent={'center'} alignItems={'center'}>
                <Tooltip title={translate('PREVIOUS_SECTOR_SELECTOR')}>
                  <IconButton
                    size="small"
                    disabled={!probeUnit}
                    onClick={() => setSector((sector) => sector! - 1)}
                  >
                    <NavigateBeforeRoundedIcon />
                  </IconButton>
                </Tooltip>
                <Paper variant="outlined">
                  <Typography
                    variant="body1"
                    textAlign={'center'}
                    padding={1}
                    paddingLeft={2}
                    paddingRight={2}
                  >
                    {sector}
                  </Typography>
                </Paper>
                <Tooltip title={translate('NEXT_SECTOR_SELECTOR')}>
                  <IconButton
                    size="small"
                    disabled={!probeUnit}
                    onClick={() => setSector((sector) => sector! + 1)}
                  >
                    <NavigateNextRoundedIcon />
                  </IconButton>
                </Tooltip>
              </Stack>

              <Typography variant="body1" textAlign={'center'}>
                Sector
              </Typography>
            </Stack>

            {/* System selector */}
            <Stack gap={1} justifyContent={'center'}>
              <Stack direction={'row'} gap={0.5} justifyContent={'center'} alignItems={'center'}>
                <Tooltip title={translate('PREVIOUS_SYSTEM_SELECTOR')}>
                  <IconButton
                    size="small"
                    disabled={!probeUnit}
                    onClick={() => setSystem((system) => system! - 1)}
                  >
                    <NavigateBeforeRoundedIcon />
                  </IconButton>
                </Tooltip>
                <Paper variant="outlined">
                  <Typography
                    variant="body1"
                    textAlign={'center'}
                    padding={1}
                    paddingLeft={2}
                    paddingRight={2}
                  >
                    {system}
                  </Typography>
                </Paper>
                <Tooltip title={translate('NEXT_SYSTEM_SELECTOR')}>
                  <IconButton
                    size="small"
                    disabled={!probeUnit}
                    onClick={() => setSystem((system) => system! + 1)}
                  >
                    <NavigateNextRoundedIcon />
                  </IconButton>
                </Tooltip>
              </Stack>

              <Typography variant="body1" textAlign={'center'}>
                System
              </Typography>
            </Stack>

            {/* TODO: SHOW SPY PROBES AVAILABLE IN THE PLANET!! */}
          </Stack>
        </Box>
      </Paper>

      <Stack direction={'row'} flexWrap={'wrap'} justifyContent={'center'} gap={1}>
        {planets.map((planet) => {
          const planetLabel = formatCoordinatesLabel(planet.coordinates)

          return (
            <Box key={planetLabel}>
              <Paper variant={'outlined'}>
                <Stack justifyContent="center" alignItems="center">
                  <PlanetCard planet={planet} disableBorder>
                    {/* Fleet action buttons */}
                    <Box position={'absolute'} right={0} bottom={0} padding={1}>
                      <Paper variant="outlined">
                        <Stack
                          direction={'row'}
                          padding={0.2}
                          justifyContent={'flex-start'}
                          alignItems={'center'}
                        >
                          {/* fleet button */}
                          {/* TODO: disable button if no units are present */}
                          {/* TODO: disable button if max number of active player fleets */}
                          {/* TODO: disable button if it is the selected planet ?? */}
                          {/* TODO: redirect to create new fleet page */}
                          <Tooltip title="send fleet">
                            <IconButton aria-label="spy planet" size="small">
                              <RocketLaunchIcon fontSize="inherit" />
                            </IconButton>
                          </Tooltip>

                          {/* Planet Colony fast button */}
                          {/* TODO: disable button if no troops and ships are present */}
                          {/* TODO: disable button if max number of colonies */}
                          {/* TODO: disable button if it is a unexplored planet and has an owner ?? */}
                          {/* TODO: disable button if users clicks on it! */}
                          <Tooltip title="Colony planet">
                            <IconButton
                              aria-label="colony planet"
                              size="small"
                              // disabled={!probeUnit}
                              // onClick={() => fastExplorePlanetFleet(planet.coordinates)}
                            >
                              <PublicIcon fontSize="inherit" />
                            </IconButton>
                          </Tooltip>

                          {/* Explore Planet fast button */}
                          {/* TODO: disable button if no probes are present */}
                          {/* TODO: disable button if max number of active player fleets */}
                          {/* TODO: disable button if it is the selected planet ?? */}
                          {/* TODO: disable button if users clicks on it! */}
                          <Tooltip title={translate('spy/explore planet')}>
                            <IconButton
                              aria-label="spy planet"
                              size="small"
                              disabled={!probeUnit}
                              onClick={() => fastExplorePlanetFleet(planet.coordinates)}
                            >
                              <TravelExploreIcon fontSize="inherit" />
                            </IconButton>
                          </Tooltip>
                        </Stack>
                      </Paper>
                    </Box>
                  </PlanetCard>
                </Stack>
              </Paper>
            </Box>
          )
        })}
      </Stack>
    </Stack>
  )
}

export default GameGalaxiesPage

1	import { useCallback, useEffect, useState } from 'react'
2	import Paper from '@mui/material/Paper'
3	import Stack from '@mui/material/Stack'
4	import Box from '@mui/material/Box'
5	import Typography from '@mui/material/Typography'
6	import IconButton from '@mui/material/IconButton'
7	import Tooltip from '@mui/material/Tooltip'
8	import TravelExploreIcon from '@mui/icons-material/TravelExplore'
9	import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'
10	import PublicIcon from '@mui/icons-material/Public'
11	import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded'
12	import NavigateBeforeRoundedIcon from '@mui/icons-material/NavigateBeforeRounded'
13
14	import { PlanetType } from 'game-api-microservice/src/types/Planet'
15	import { PlanetCoordinatesType } from 'game-api-microservice/src/types/Planet'
16
17	import { usePlayer } from '../../store/PlayerContext'
18	import Loader from '../../components/loader/Loader'
19	import formatCoordinatesLabel from '../../utils/formatPlanetCoordinates'
20	import { getGalaxy } from '../../endpoints/game/galaxyEndpoints'
21	import { useGameInfo } from '../../store/GameInfoContext'
22	import { useTranslations } from '../../store/TranslationContext'
23	import { useFleet } from '../../store/FleetContext'
24	import Fleet from '../../components/fleet/Fleet'
25	import PlanetCard from '../../components/planet-card/PlanetCard'
26
27	function GameGalaxiesPage() {
NEW 28	const { translate } = useTranslations()	×
NEW 29	const { player, isPlayerLoading, selectedPlanet } = usePlayer()	×
NEW 30	const { explorePlanetFleet, unitsInThePlanet, fleetsInThePlanet } = useFleet()	×
NEW 31	const { selectedUniverse } = useGameInfo()	×
32
NEW 33	const universeName = selectedUniverse?.name	×
34
NEW 35	const [galaxy, setGalaxy] = useState(selectedPlanet?.coordinates.galaxy)	×
NEW 36	const [sector, setSector] = useState(selectedPlanet?.coordinates.sector)	×
NEW 37	const [system, setSystem] = useState(selectedPlanet?.coordinates.system)	×
38
NEW 39	const [planets, setPlanets] = useState<PlanetType[]>([])	×
40
NEW 41	useEffect(() => {	×
NEW 42	if (selectedPlanet) {	×
NEW 43	setGalaxy((galaxy) => galaxy \|\| selectedPlanet.coordinates.galaxy)	×
NEW 44	setSector((sector) => sector \|\| selectedPlanet.coordinates.sector)	×
NEW 45	setSystem((system) => system \|\| selectedPlanet.coordinates.system)	×
46	}
47	}, [selectedPlanet])
48
NEW 49	const refreshPlanets = useCallback(async () => {	×
NEW 50	if (universeName && galaxy && sector && system) {	×
51	const {
52	data: { planets }
NEW 53	} = await getGalaxy(galaxy, sector, system, universeName)	×
54
NEW 55	setPlanets(planets)	×
56	}
57	}, [galaxy, sector, system, universeName])
58
NEW 59	useEffect(() => {	×
NEW 60	refreshPlanets()	×
61	}, [refreshPlanets])
62
63	// TODO: onFinish a fleet refresh planets
64
NEW 65	if (!player \|\| isPlayerLoading \|\| !selectedPlanet) {	×
NEW 66	return <Loader isLoading />	×
67	}
68
NEW 69	const probeUnit = unitsInThePlanet.find(({ unit }) => unit.subtype === 'PROBE')?.unit	×
70	// TODO: ADD amount of fleets available to check if its disabled or not
71
72	async function fastExplorePlanetFleet(toPlanetCoordinates: PlanetCoordinatesType) {
73	// TODO: add loading state
NEW 74	if (probeUnit && selectedPlanet) {	×
NEW 75	const exploreFleet = [{ unitName: probeUnit.name, amount: 1 }]	×
NEW 76	await explorePlanetFleet(exploreFleet, selectedPlanet.coordinates, toPlanetCoordinates)	×
77	}
78	}
79
UNCOV 80	return (	×
81	<Stack gap={1} padding={1}>
82	{/* TODO: ALL fleets, update this to only use new fleets */}
83	<Stack gap={1}>
84	{fleetsInThePlanet.map((planetFleet, index) => {
NEW 85	return <Fleet key={index} fleet={planetFleet} onFinishFleet={refreshPlanets} />	×
86	})}
87	</Stack>
88
89	{/* TODO: Planet Coordinates selector */}
90	<Paper variant="outlined">
91	<Box padding={1}>
92	<Stack direction={'row'} gap={3} padding={1}>
93	{/* Galaxy selector */}
94	<Stack gap={1} justifyContent={'center'}>
95	<Stack direction={'row'} gap={0.5} justifyContent={'center'} alignItems={'center'}>
96	<Tooltip title={translate('PREVIOUS_GALAXY_SELECTOR')}>
97	<IconButton
98	size="small"
99	disabled={!probeUnit}
NEW 100	onClick={() => setGalaxy((galaxy) => galaxy! - 1)}	×
101	>
102	<NavigateBeforeRoundedIcon />
103	</IconButton>
104	</Tooltip>
105	<Paper variant="outlined">
106	<Typography
107	variant="body1"
108	textAlign={'center'}
109	padding={1}
110	paddingLeft={2}
111	paddingRight={2}
112	>
113	{galaxy}
114	</Typography>
115	</Paper>
116	<Tooltip title={translate('NEXT_GALAXY_SELECTOR')}>
117	<IconButton
118	size="small"
119	disabled={!probeUnit}
NEW 120	onClick={() => setGalaxy((galaxy) => galaxy! + 1)}	×
121	>
122	<NavigateNextRoundedIcon />
123	</IconButton>
124	</Tooltip>
125	</Stack>
126
127	<Typography variant="body1" textAlign={'center'}>
128	Galaxy
129	</Typography>
130	</Stack>
131
132	{/* Sector selector */}
133	<Stack gap={1} justifyContent={'center'}>
134	<Stack direction={'row'} gap={0.5} justifyContent={'center'} alignItems={'center'}>
135	<Tooltip title={translate('PREVIOUS_SECTOR_SELECTOR')}>
136	<IconButton
137	size="small"
138	disabled={!probeUnit}
NEW 139	onClick={() => setSector((sector) => sector! - 1)}	×
140	>
141	<NavigateBeforeRoundedIcon />
142	</IconButton>
143	</Tooltip>
144	<Paper variant="outlined">
145	<Typography
146	variant="body1"
147	textAlign={'center'}
148	padding={1}
149	paddingLeft={2}
150	paddingRight={2}
151	>
152	{sector}
153	</Typography>
154	</Paper>
155	<Tooltip title={translate('NEXT_SECTOR_SELECTOR')}>
156	<IconButton
157	size="small"
158	disabled={!probeUnit}
NEW 159	onClick={() => setSector((sector) => sector! + 1)}	×
160	>
161	<NavigateNextRoundedIcon />
162	</IconButton>
163	</Tooltip>
164	</Stack>
165
166	<Typography variant="body1" textAlign={'center'}>
167	Sector
168	</Typography>
169	</Stack>
170
171	{/* System selector */}
172	<Stack gap={1} justifyContent={'center'}>
173	<Stack direction={'row'} gap={0.5} justifyContent={'center'} alignItems={'center'}>
174	<Tooltip title={translate('PREVIOUS_SYSTEM_SELECTOR')}>
175	<IconButton
176	size="small"
177	disabled={!probeUnit}
NEW 178	onClick={() => setSystem((system) => system! - 1)}	×
179	>
180	<NavigateBeforeRoundedIcon />
181	</IconButton>
182	</Tooltip>
183	<Paper variant="outlined">
184	<Typography
185	variant="body1"
186	textAlign={'center'}
187	padding={1}
188	paddingLeft={2}
189	paddingRight={2}
190	>
191	{system}
192	</Typography>
193	</Paper>
194	<Tooltip title={translate('NEXT_SYSTEM_SELECTOR')}>
195	<IconButton
196	size="small"
197	disabled={!probeUnit}
NEW 198	onClick={() => setSystem((system) => system! + 1)}	×
199	>
200	<NavigateNextRoundedIcon />
201	</IconButton>
202	</Tooltip>
203	</Stack>
204
205	<Typography variant="body1" textAlign={'center'}>
206	System
207	</Typography>
208	</Stack>
209
210	{/* TODO: SHOW SPY PROBES AVAILABLE IN THE PLANET!! */}
211	</Stack>
212	</Box>
213	</Paper>
214
215	<Stack direction={'row'} flexWrap={'wrap'} justifyContent={'center'} gap={1}>
216	{planets.map((planet) => {
NEW 217	const planetLabel = formatCoordinatesLabel(planet.coordinates)	×
218
NEW 219	return (	×
220	<Box key={planetLabel}>
221	<Paper variant={'outlined'}>
222	<Stack justifyContent="center" alignItems="center">
223	<PlanetCard planet={planet} disableBorder>
224	{/* Fleet action buttons */}
225	<Box position={'absolute'} right={0} bottom={0} padding={1}>
226	<Paper variant="outlined">
227	<Stack
228	direction={'row'}
229	padding={0.2}
230	justifyContent={'flex-start'}
231	alignItems={'center'}
232	>
233	{/* fleet button */}
234	{/* TODO: disable button if no units are present */}
235	{/* TODO: disable button if max number of active player fleets */}
236	{/* TODO: disable button if it is the selected planet ?? */}
237	{/* TODO: redirect to create new fleet page */}
238	<Tooltip title="send fleet">
239	<IconButton aria-label="spy planet" size="small">
240	<RocketLaunchIcon fontSize="inherit" />
241	</IconButton>
242	</Tooltip>
243
244	{/* Planet Colony fast button */}
245	{/* TODO: disable button if no troops and ships are present */}
246	{/* TODO: disable button if max number of colonies */}
247	{/* TODO: disable button if it is a unexplored planet and has an owner ?? */}
248	{/* TODO: disable button if users clicks on it! */}
249	<Tooltip title="Colony planet">
250	<IconButton
251	aria-label="colony planet"
252	size="small"
253	// disabled={!probeUnit}
254	// onClick={() => fastExplorePlanetFleet(planet.coordinates)}
255	>
256	<PublicIcon fontSize="inherit" />
257	</IconButton>
258	</Tooltip>
259
260	{/* Explore Planet fast button */}
261	{/* TODO: disable button if no probes are present */}
262	{/* TODO: disable button if max number of active player fleets */}
263	{/* TODO: disable button if it is the selected planet ?? */}
264	{/* TODO: disable button if users clicks on it! */}
265	<Tooltip title={translate('spy/explore planet')}>
266	<IconButton
267	aria-label="spy planet"
268	size="small"
269	disabled={!probeUnit}
NEW 270	onClick={() => fastExplorePlanetFleet(planet.coordinates)}	×
271	>
272	<TravelExploreIcon fontSize="inherit" />
273	</IconButton>
274	</Tooltip>
275	</Stack>
276	</Paper>
277	</Box>
278	</PlanetCard>
279	</Stack>
280	</Paper>
281	</Box>
282	)
283	})}
284	</Stack>
285	</Stack>
286	)
287	}
288
289	export default GameGalaxiesPage

DaniSomoza / galactic-commander / 12728621970

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