[fleets] Explore planets

README.md

@@ -48,24 +48,82 @@ yarn coverage
 
 ## Roadmap
 
-- [ ] **First version of the frontend**: Register (create + validate email), login, create player, select race, and create research task. Track planet resources and active researches. Show player bonus in the UI
-- [ ] **game-api microservice, game-engine & frontend**: Players can build units (ships, troops, defenses & heroes) (research required to unlock units) specials & units from special planets???
-- [ ] **game-api microservice, game-engine & frontend**: Players can deploy fleets (only deploy spaceship units)
-- [ ] **game-api microservice, game-engine & frontend**: Players activate specials
-- [ ] **game-api & frontend**: Add CDN to store assets like images (profile pics, unit img, race img, research img, specials img, planets img...) update user profile pic flow
-- [ ] **frontend && Content**: Add translate support in frontend
-- [ ] **Content**: Add all races, units, specials, heroes, special planets ???
-- [ ] **Content**: Players
+- [ ] **Authentication flows**: Create Users and update user flows.
+  - [ ] Register User
+  - [ ] Validate User (email verification)
+  - [ ] Login User
+  - [ ] Auto Refresh session token
+  - [ ] Change Password
+  - [ ] Forgot Password
+  - [ ] Delete User
+  - [ ] Change User email
+  - [ ] Change User data
+- [ ] **Create Players**: Player Creation flow.
+  - [ ] Select player universe.
+  - [ ] Select race.
+  - [ ] Show player dashboard.
+  - [ ] Universes as a code.
+  - [ ] Races as a code.
+  - [ ] Units as a code.
+- [ ] **Build Units**: Players build units:
+  - [ ] Build race Troops
+  - [ ] Build race Spaceships
+  - [ ] Build race Defenses
+  - [ ] Build race Heroes
+  - [ ] Build special Units
+  - [ ] Build special Heroes
+- [ ] **Fleets**: Players can crate fleets:
+  - [ ] Explore planet fleets (create explore reports)
+  - [ ] Establish planetary base fleets
+  - [ ] Deploy units fleets (move units and resources) => see all visible fleets in real time in the planet
+  - [ ] collect resources fleets
+  - [ ] transport resources/troops/star fighters fleets
+  - [ ] attack planet fleets
+  - [ ] conquer planet fleets
+  - [ ] counter-attack planet fleets
+  - [ ] pirate attack fleets
+- [ ] **Battles**: Players can crate fleets:
+  - [ ] Battle reports
+  - [ ] Implement battles
+  - [ ] Capture units feature
+- [ ] **Extra frontend features**: Frontend sections:
+  - [ ] schedule tasks feature
+  - [ ] notifications feature
+  - [ ] favorite planets feature
+  - [ ] snackbars feature
+  - [ ] messages in game feature (add a chat?)
+  - [ ] Game alerts in game feature (example: news, maintenance, bugs etc)
+  - [ ] Exploration reports feature
+  - [ ] Battle reports feature
+  - [ ] Points section
+  - [ ] Player Task section
+- [ ] **Active Specials**: Players enable/disable specials
+  - [ ] race Specials (researches?)
+  - [ ] heroe Specials
+  - [ ] planet Specials
+- [ ] **CDN for images and assets**: Add CDN to store assets like images (player profile pics ???)
+- [x] **translations**: Add translate support in the Frontend:
+  - [ ] spanish translations
+  - [ ] english translations
+  - [ ] galician translations
+  - [ ] french translations
+  - [ ] italian translations
+  - [ ] german translations
+- [ ] **Content**: all content via game migrations
+  - [ ] Races
+  - [ ] Units
+  - [ ] Heroes
+  - [ ] Specials
+  - [ ] Planets
+  - [ ] Special Planets
+  - [ ] Special Units
 - [x] **Auth microservice**: Create users, validate email, retrieve user info, and create user sessions (JWT)
-- [ ] **Pending Auth microservice endpoints**: Change password, forgot password, reset password, update user data and delete account
-- [x] **Auth microservice**: Add unit tests with jest
-- [x] **Github actions**: Add Github actions (test, coverage reports with coveralls)
-- [ ] **Pending Github actions**: Add Sonar action
-- [x] **game-api**: Add migration support
-- [x] **game-engine**: Create Universe (define races, planets)
-- [x] **game-api microservice**: Create a player (select race & select universe & principal planet)
-- [x] **game-engine**: Define task types & processing scheduler
-- [x] **game-api microservice**: Players can create tasks
-- [ ] **first release**: Release system & dev & prod environments (GitHub actions).
-- [ ] **preview PR branches**: (Github actions)
+- [ ] **Github actions**: Add Github actions
+  - [ ] Linter Action
+  - [ ] Test Action
+  - [ ] Coverage Action
+  - [ ] Sonar Action
+  - [ ] Deploy test branch Action
+- [x] **Tests**: Add unit tests with jest
+- [ ] **First release**: Release system & dev & prod environments (GitHub actions).
 - [ ] **Badges**: Add badges in the README.md

packages/frontend/src/components/active-units-build/ActiveUnitsBuild.tsx

@@ -54,7 +54,7 @@ function ActiveUnitsBuild({ activeBuild, activeBuildCountdown }: ActiveUnitsBuil
 
   return (
     <Paper variant="outlined">
-      <UnitCard disableBorder unit={unit} amount={activeBuild.amount}>
+      <UnitCard disableBorder unit={unit} amount={activeBuild.amount} isAvailable>
         {/* unit build countdown */}
         <Box position={'absolute'} left={0} bottom={0} padding={1}>
           <Paper variant="outlined">

packages/frontend/src/components/build-units-queue/BuildUnitsQueue.tsx

@@ -108,7 +108,7 @@ function QueueItem({ unit, amount, player, index }: QueueItemProps) {
         onMouseEnter={() => setShowRemoveButton(true)}
         onMouseLeave={() => setShowRemoveButton(false)}
       >
-        <UnitCard showNameLabel={false} unit={unit} amount={amount} height={128} width={128}>
+        <UnitCard showNameLabel={false} unit={unit} amount={amount} height={128} width={128} isAvailable>
           <>
             {/* Countdown */}
             <Box position={'absolute'} top={20} sx={{ transform: 'translate(0, -50%)' }}>

packages/frontend/src/components/defenses-label/DefensesLabel.tsx

@@ -58,15 +58,15 @@ function getDefensesInThePlanet(player?: PlayerType, selectedPlanet?: PlanetType
     return 0
   }
 
-  const planetFleets = player.fleets.find(
-    (fleet) => isPlanetCoordinates(fleet.planet, selectedPlanet.coordinates) && !fleet.travel
+  const unitsInThePlanet = player.units.find(({ planet }) =>
+    isPlanetCoordinates(planet, selectedPlanet.coordinates)
   )
 
-  if (!planetFleets) {
+  if (!unitsInThePlanet) {
     return 0
   }
 
-  return planetFleets.units.reduce((defenses, { unit, amount }) => {
+  return unitsInThePlanet.units.reduce((defenses, { unit, amount }) => {
     if (unit.type === 'DEFENSE') {
       return defenses + amount
     }

packages/frontend/src/components/dialogs/BuildUnitsDialog.tsx

@@ -24,7 +24,6 @@ import FortIcon from '@mui/icons-material/Fort'
 import { UnitType, UnitTypes } from 'game-api-microservice/src/types/Unit'
 import isHeroAlreadyBuild from 'game-engine/src/engine/units/isHeroAlreadyBuild'
 import computedBonus from 'game-engine/src/engine/bonus/computedBonus'
-import getAmountOfPlayerUnitsInThePlanet from 'game-engine/src/engine/units/getAmountOfPlayerUnitsInThePlanet'
 import calculateMaxPlayerEnergy from 'game-engine/src/engine/units/calculateMaxPlayerEnergy'
 import calculateCurrentPlayerEnergy from 'game-engine/src/engine/units/calculateCurrentPlayerEnergy'
 import calculateCurrentPlayerPopulation from 'game-engine/src/engine/units/calculateCurrentPlayerPopulation'
@@ -38,14 +37,14 @@ import { useTranslations } from '../../store/TranslationContext'
 import formatTimer from '../../utils/formatTimer'
 import formatNumber from '../../utils/formatNumber'
 import millisToSeconds from '../../utils/millisToSeconds'
-import Image from '../image/Image'
 import UnitStats from '../unit-stats/UnitStats'
 import { usePlayerResources } from '../../store/PlayerResourcesContext'
 import formatCoordinatesLabel from '../../utils/formatPlanetCoordinates'
 import { useTheme } from '../../store/ThemeContext'
 import UnitRequirements from '../unit-requirements/UnitRequirements'
 import UnitBonus from '../unit-bonus/UnitBonus'
-import getImage from '../../utils/getImage'
+import UnitCard from '../unit-card/UnitCard'
+import { useFleet } from '../../store/FleetContext'
 
 type BuildUnitDialogProps = {
   unitToBuild: UnitType
@@ -81,13 +80,19 @@ function BuildUnitsDialog({ unitToBuild, isOpen, setUnitToBuild }: BuildUnitDial
     activeBuildDefenses
   } = useBuildUnits()
 
+  const { unitsInThePlanet } = useFleet()
+
   const UnitIconComponent = unitIcon[unitToBuild.type]
 
   const resourceCost = amount * unitToBuild.resourceCost
-  const currentPopulation = calculateCurrentPlayerPopulation(player!)
+  const currentPopulation = player
+    ? calculateCurrentPlayerPopulation(player, player.units, player.fleets)
+    : 0
   const predictedPopulation = currentPopulation + amount
   const maxPlayerPopulation = calculateMaxPlayerPopulation(player!)
-  const currentEnergy = calculateCurrentPlayerEnergy(player!)
+  const currentEnergy = player
+    ? calculateCurrentPlayerEnergy(player, player.units, player.fleets)
+    : 0
   const predictedEnergy = currentEnergy + unitToBuild.energyCost * amount
   const maxPlayerEnergy = calculateMaxPlayerEnergy(player!)
 
@@ -131,11 +136,8 @@ function BuildUnitsDialog({ unitToBuild, isOpen, setUnitToBuild }: BuildUnitDial
   const buildUnitBonus = computedBonus(player!.perks, buildUnitsPerk[unitToBuild.type])
   const buildUnitDuration = millisToSeconds(unitToBuild.buildBaseTime * (100 / buildUnitBonus))
 
-  const troopsInThisPlanet = getAmountOfPlayerUnitsInThePlanet(
-    player!,
-    selectedPlanet!,
-    unitToBuild
-  )
+  const amountOfUnitsInThePlanet =
+    unitsInThePlanet.find(({ unit }) => unit.name === unit.name)?.amount || 0
 
   const error = getErrorLabel({
     isValidAmount,
@@ -169,73 +171,15 @@ function BuildUnitsDialog({ unitToBuild, isOpen, setUnitToBuild }: BuildUnitDial
       </IconButton>
 
       <DialogContent dividers>
-        <Paper sx={{ padding: 1 }}>
-          <Stack direction={'row'} justifyContent={'center'}>
-            <Box sx={{ position: 'relative' }}>
-              <Paper variant="outlined">
-                <Stack justifyContent="center" alignItems="center">
-                  <Image
-                    src={getImage(unitToBuild.name)}
-                    alt={translate(unitToBuild.name)}
-                    height={'230px'}
-                    width={'230px'}
-                    border
-                  />
-
-                  {/* Unit name */}
-                  <Box
-                    position={'absolute'}
-                    top={20}
-                    padding={1}
-                    maxWidth={'230px'}
-                    sx={{ transform: 'translate(0, -50%)' }}
-                  >
-                    <Paper variant="outlined">
-                      <Paper variant="outlined">
-                        <Stack
-                          direction={'row'}
-                          gap={0.5}
-                          padding={0.4}
-                          paddingLeft={0.6}
-                          paddingRight={0.8}
-                          alignItems={'center'}
-                        >
-                          {unitToBuild.isHero && <StarsIcon fontSize="small" color="info" />}
-                          <Typography variant="body1" fontSize={13}>
-                            {translate(unitToBuild.name)}
-                          </Typography>
-                        </Stack>
-                      </Paper>
-                    </Paper>
-                  </Box>
-
-                  {/* Amount of units in this planet */}
-                  <Box position={'absolute'} right={0} bottom={0} padding={1}>
-                    <Paper variant="outlined">
-                      <Tooltip
-                        title={translate(
-                          'GAME_BUILD_UNITS_PAGE_AMOUNT_OF_UNITS_IN_PLANET_TOOLTIP',
-                          formatNumber(troopsInThisPlanet, true)
-                        )}
-                        arrow
-                      >
-                        <Stack
-                          direction={'row'}
-                          gap={0.5}
-                          padding={0.4}
-                          paddingLeft={0.6}
-                          paddingRight={0.8}
-                          alignItems={'center'}
-                        >
-                          <GroupIcon fontSize="small" />
-                          <Typography fontSize={12}> {formatNumber(troopsInThisPlanet)}</Typography>
-                        </Stack>
-                      </Tooltip>
-                    </Paper>
-                  </Box>
-                </Stack>
-              </Paper>
-            </Box>
+        <Paper>
+          <Stack padding={1} direction={'row'} justifyContent={'center'}>
+            <UnitCard
+              height={230}
+              width={230}
+              unit={unitToBuild}
+              amount={amountOfUnitsInThePlanet}
+              isAvailable
+            />
           </Stack>
         </Paper>
 
@@ -263,6 +207,7 @@ function BuildUnitsDialog({ unitToBuild, isOpen, setUnitToBuild }: BuildUnitDial
         </Paper>
 
         {/* TODO: ADD TOOLTIP */}
+        {/* TODO: ADD 25% button... */}
 
         <Box minHeight={120} marginTop={1}>
           <Paper sx={{ padding: 1 }}>
@@ -274,7 +219,7 @@ function BuildUnitsDialog({ unitToBuild, isOpen, setUnitToBuild }: BuildUnitDial
                     helperText={showErrorLabel ? error : ''}
                     disabled={unitToBuild.isHero}
                     fullWidth
-                    placeholder="type the amount"
+                    placeholder="type an amount"
                     error={showErrorLabel}
                     value={amount || ''}
                     onChange={(event) => {
@@ -351,8 +296,11 @@ function BuildUnitsDialog({ unitToBuild, isOpen, setUnitToBuild }: BuildUnitDial
                           textAlign="center"
                           color={isValidPopulation ? 'textPrimary' : 'error'}
                         >
-                          {calculateCurrentPlayerPopulation(player!) +
-                            (unitToBuild.type === 'TROOP' ? amount : 0)}{' '}
+                          {calculateCurrentPlayerPopulation(
+                            player!,
+                            player!.units,
+                            player!.fleets
+                          ) + (unitToBuild.type === 'TROOP' ? amount : 0)}{' '}
                           / {formatNumber(calculateMaxPlayerPopulation(player!))}
                         </Typography>
                       </Stack>
@@ -377,7 +325,8 @@ function BuildUnitsDialog({ unitToBuild, isOpen, setUnitToBuild }: BuildUnitDial
                           textAlign="center"
                           color={isValidEnergy ? 'textPrimary' : 'error'}
                         >
-                          {calculateCurrentPlayerEnergy(player!) + amount * unitToBuild.energyCost}{' '}
+                          {calculateCurrentPlayerEnergy(player!, player!.units, player!.fleets) +
+                            amount * unitToBuild.energyCost}{' '}
                           /{formatNumber(calculateMaxPlayerEnergy(player!))}
                         </Typography>
                       </Stack>
@@ -471,9 +420,7 @@ function BuildUnitsDialog({ unitToBuild, isOpen, setUnitToBuild }: BuildUnitDial
         ) : (
           <Tooltip title={'Add units to planet queue'} arrow>
             <Button
-              disabled={
-                isLoading || !!error || isHeroAlreadyBuild(unitToBuild, player?.fleets || [])
-              }
+              disabled={isLoading || !!error || isHeroAlreadyBuild(unitToBuild, player!.units)}
               autoFocus
               onClick={performStartBuildUnits}
             >

packages/frontend/src/components/energy-label/EnergyLabel.tsx

@@ -23,7 +23,7 @@ function EnergyLabel() {
           player
             ? translate(
                 'GAME_PLAYER_STATS_ENERGY_TOOLTIP',
-                calculateCurrentPlayerEnergy(player),
+                calculateCurrentPlayerEnergy(player, player.units, player.fleets),
                 formatNumber(calculateMaxPlayerEnergy(player), true)
               )
             : ''
@@ -42,7 +42,7 @@ function EnergyLabel() {
             textAlign="center"
           >
             {player ? (
-              `${formatNumber(calculateCurrentPlayerEnergy(player), true)} / ${formatNumber(
+              `${formatNumber(calculateCurrentPlayerEnergy(player, player.units, player.fleets), true)} / ${formatNumber(
                 calculateMaxPlayerEnergy(player),
                 true
               )}`