diff --git a/src/__tests__/views/__snapshots__/planets.js.snap b/src/__tests__/views/__snapshots__/planets.js.snap index 6983676..93ceef6 100644 --- a/src/__tests__/views/__snapshots__/planets.js.snap +++ b/src/__tests__/views/__snapshots__/planets.js.snap @@ -5,7 +5,7 @@ exports[` Should render the component. 1`] = `

Should render the component. 1`] = `

Should render the component. 1`] = ` /> +
+ + ETA: 8 minutes 20 seconds +
Items: @@ -749,7 +757,7 @@ exports[` Should render the component. 1`] = `

Should render the component. 1`] = ` /> +
+ + ETA: 16 minutes 40 seconds +
Items: diff --git a/src/components/PlanetDisplay.js b/src/components/PlanetDisplay.js index d2e2b0d..f830415 100644 --- a/src/components/PlanetDisplay.js +++ b/src/components/PlanetDisplay.js @@ -1,19 +1,22 @@ import React from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' -import { Box, Button, Heading } from 'grommet' +import { Box, Button, Heading, Text } from 'grommet' import { Target } from 'grommet-icons' import { setShipTraveling, setDestination, setETA } from '../redux/actions/ship' import ItemDisplay from './ItemDisplay' -import { createETA } from '../util' +import { createETA, createDiffDuration } from '../util' const PlanetDisplay = ({ handleShipTravel, planet, ship }) => { const { isHomePlanet, items, location, name } = planet const shipLocationValue = ship.location.value + const eta = createETA({ value: planet.location }, ship) + const diffDuration = createDiffDuration(eta) + return (
- + {isHomePlanet ? name + ' - Home Planet' : name} @@ -26,6 +29,12 @@ const PlanetDisplay = ({ handleShipTravel, planet, ship }) => { plain /> )} + {shipLocationValue !== location && !ship.isShipTraveling && ( + + ETA: {diffDuration.minutes()} minutes {diffDuration.seconds()}{' '} + seconds + + )} Items: {items.map(item => ( diff --git a/src/components/TravelTimer.js b/src/components/TravelTimer.js index 5a169af..4236344 100644 --- a/src/components/TravelTimer.js +++ b/src/components/TravelTimer.js @@ -9,7 +9,7 @@ import { setDestination, setShipTraveling } from '../redux/actions/ship' -import moment from 'moment' +import { createDiffDuration } from '../util' const TravelTimer = ({ handleTimerStopped, ship }) => { const [timeLeft, setTimeLeft] = useState(null) @@ -17,11 +17,7 @@ const TravelTimer = ({ handleTimerStopped, ship }) => { const timerLogic = () => { if (ship.isShipTraveling) { const travelTimer = setInterval(() => { - const now = moment() - now.millisecond(0) - const differenceMill = moment(ship.destination.eta, 'x').diff(now) - - const diffDuration = moment.duration({ milliseconds: differenceMill }) + const diffDuration = createDiffDuration(ship.destination.eta) diffDuration.subtract(1, 'second') diff --git a/src/util.js b/src/util.js index 735d3ee..fac9be0 100644 --- a/src/util.js +++ b/src/util.js @@ -98,6 +98,14 @@ export const createETA = (destination, ship) => { return eta } +export const createDiffDuration = eta => { + const now = moment() + now.millisecond(0) + const differenceMill = moment(eta, 'x').diff(now) + + return moment.duration({ milliseconds: differenceMill }) +} + export const generateContracts = () => { const contracts = []