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 = () => {