diff --git a/src/__tests__/components/TravelTimer.test.js b/src/__tests__/components/TravelTimer.test.js index f529e91..6b4d6c6 100644 --- a/src/__tests__/components/TravelTimer.test.js +++ b/src/__tests__/components/TravelTimer.test.js @@ -7,6 +7,7 @@ const customState = { ship: { ...defaultState.ship, destination: { + eta: '10000', name: 'Test Planet 2', value: 50 }, diff --git a/src/__tests__/components/__snapshots__/TravelTimer.test.js.snap b/src/__tests__/components/__snapshots__/TravelTimer.test.js.snap index 4f3fdef..70bd621 100644 --- a/src/__tests__/components/__snapshots__/TravelTimer.test.js.snap +++ b/src/__tests__/components/__snapshots__/TravelTimer.test.js.snap @@ -10,9 +10,6 @@ exports[` Should render the component. 1`] = ` > Travel Timer - - 8 minutes 20 seconds - `; diff --git a/src/components/PlanetDisplay.js b/src/components/PlanetDisplay.js index a00a626..d2e2b0d 100644 --- a/src/components/PlanetDisplay.js +++ b/src/components/PlanetDisplay.js @@ -3,8 +3,9 @@ import PropTypes from 'prop-types' import { connect } from 'react-redux' import { Box, Button, Heading } from 'grommet' import { Target } from 'grommet-icons' -import { setShipTraveling, setDestination } from '../redux/actions/ship' +import { setShipTraveling, setDestination, setETA } from '../redux/actions/ship' import ItemDisplay from './ItemDisplay' +import { createETA } from '../util' const PlanetDisplay = ({ handleShipTravel, planet, ship }) => { const { isHomePlanet, items, location, name } = planet @@ -21,7 +22,7 @@ const PlanetDisplay = ({ handleShipTravel, planet, ship }) => { data-testid={`travel-button-${name}`} hoverIndicator icon={} - onClick={() => handleShipTravel({ name, value: location })} + onClick={() => handleShipTravel({ name, value: location }, ship)} plain /> )} @@ -43,11 +44,14 @@ PlanetDisplay.propTypes = { const mapStateToProps = ({ ship }) => ({ ship }) const mapDispatchToProps = dispatch => ({ - handleShipTravel: destination => { + handleShipTravel: (destination, ship) => { // * set isShipTraveling to true dispatch(setShipTraveling(true)) // * set destination dispatch(setDestination(destination)) + // * set ETA + const eta = createETA(destination, ship) + dispatch(setETA(eta.format('x'))) } }) diff --git a/src/components/TravelTimer.js b/src/components/TravelTimer.js index 352d17b..5a169af 100644 --- a/src/components/TravelTimer.js +++ b/src/components/TravelTimer.js @@ -1,47 +1,36 @@ import React, { useEffect, useState } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' -import { createTravelDuration } from '../util' import { Box, Heading } from 'grommet' import { addCash } from '../redux/actions/user' import { removeCargo, setShipLocation, setDestination, - setShipTraveling, - setTravelDuration + setShipTraveling } from '../redux/actions/ship' import moment from 'moment' -const TravelTimer = ({ handleSetTravelDuration, handleTimerStopped, ship }) => { - const [minutes, setMinutes] = useState(0) - const [seconds, setSeconds] = useState(0) +const TravelTimer = ({ handleTimerStopped, ship }) => { + const [timeLeft, setTimeLeft] = useState(null) const timerLogic = () => { if (ship.isShipTraveling) { - let timerDuration - if (ship.travelDuration) { - // * There is already a travel durataion, use it - timerDuration = moment.duration({ - minutes: ship.travelDuration.minutes, - seconds: ship.travelDuration.seconds - }) - } else { - timerDuration = createTravelDuration(ship.destination, ship) - } - setMinutes(timerDuration.minutes()) - setSeconds(timerDuration.seconds()) - const travelTimer = setInterval(() => { - timerDuration.subtract(1, 'second') - setMinutes(timerDuration.minutes()) - setSeconds(timerDuration.seconds()) - handleSetTravelDuration(timerDuration) + const now = moment() + now.millisecond(0) + const differenceMill = moment(ship.destination.eta, 'x').diff(now) + + const diffDuration = moment.duration({ milliseconds: differenceMill }) + + diffDuration.subtract(1, 'second') - if (timerDuration.asMilliseconds() === 0) { + if (diffDuration.asMilliseconds() === 0) { clearInterval(travelTimer) handleTimerStopped(ship) } + + setTimeLeft(diffDuration) }, 1000) } } @@ -51,15 +40,16 @@ const TravelTimer = ({ handleSetTravelDuration, handleTimerStopped, ship }) => { return ship.isShipTraveling ? ( Travel Timer - - {minutes} minutes {seconds} seconds - + {timeLeft && ( + + {timeLeft.minutes()} minutes {timeLeft.seconds()} seconds + + )} ) : null } TravelTimer.propTypes = { - handleSetTravelDuration: PropTypes.func.isRequired, handleTimerStopped: PropTypes.func.isRequired, ship: PropTypes.object.isRequired } @@ -87,14 +77,6 @@ const mapDispatchToProps = dispatch => ({ ) dispatch(setDestination(null)) dispatch(setShipTraveling(false)) - }, - handleSetTravelDuration: travelDuration => { - dispatch( - setTravelDuration({ - minutes: travelDuration.minutes(), - seconds: travelDuration.seconds() - }) - ) } }) diff --git a/src/redux/actions/ship.js b/src/redux/actions/ship.js index e244a0a..79a461a 100644 --- a/src/redux/actions/ship.js +++ b/src/redux/actions/ship.js @@ -1,9 +1,9 @@ // * ACTION TYPES const REMOVE_CARGO = 'REMOVE_CARGO' const SET_DESTINATION = 'SET_DESTINATION' +const SET_ETA = 'SET_ETA' const SET_SHIP_LOCATION = 'SET_SHIP_LOCATION' const SET_SHIP_TRAVELING = 'SET_SHIP_TRAVELING' -const SET_TRAVEL_DURATION = 'SET_TRAVEL_DURATION' const STORE_CARGO = 'STORE_CARGO' // * ACTION GENERATORS @@ -19,6 +19,11 @@ export const setDestination = destination => ({ payload: { destination } }) +export const setETA = eta => ({ + type: SET_ETA, + payload: { eta } +}) + export const setShipLocation = location => ({ type: SET_SHIP_LOCATION, payload: { location } @@ -29,11 +34,6 @@ export const setShipTraveling = isShipTraveling => ({ payload: { isShipTraveling } }) -export const setTravelDuration = travelDuration => ({ - type: SET_TRAVEL_DURATION, - payload: { travelDuration } -}) - export const storeCargo = (item, quantity) => ({ type: STORE_CARGO, payload: { diff --git a/src/redux/reducers/ship.js b/src/redux/reducers/ship.js index c71fc6c..67bb947 100644 --- a/src/redux/reducers/ship.js +++ b/src/redux/reducers/ship.js @@ -8,8 +8,7 @@ const shipDefaultState = { location: { name: null, value: null - }, - travelDuration: null + } } export default (state = shipDefaultState, action) => { @@ -28,6 +27,11 @@ export default (state = shipDefaultState, action) => { } case 'SET_DESTINATION': return { ...state, destination: action.payload.destination } + case 'SET_ETA': + return { + ...state, + destination: { ...state.destination, eta: action.payload.eta } + } case 'SET_SHIP_LOCATION': return { ...state, diff --git a/src/util.js b/src/util.js index 4a0c94e..735d3ee 100644 --- a/src/util.js +++ b/src/util.js @@ -88,11 +88,14 @@ export const createDuration = () => { return moment.duration({ minutes: minutesLeft, seconds: secondsLeft }) } -export const createTravelDuration = (destination, ship) => { +export const createETA = (destination, ship) => { const distance = Math.abs(destination.value - ship.location.value) const seconds = distance * 10 + const eta = moment() + eta.add(seconds, 'seconds') + eta.millisecond(0) - return moment.duration({ seconds }) + return eta } export const generateContracts = () => {