✨ Switched to ETA for travel

src/__tests__/components/TravelTimer.test.js

@@ -7,6 +7,7 @@ const customState = {
   ship: {
     ...defaultState.ship,
     destination: {
+      eta: '10000',
       name: 'Test Planet 2',
       value: 50
     },

src/__tests__/components/__snapshots__/TravelTimer.test.js.snap

@@ -10,9 +10,6 @@ exports[`<TravelTimer /> Should render the <TravelTimer /> component. 1`] = `
     >
       Travel Timer
     </h3>
-    <span>
-      8 minutes 20 seconds
-    </span>
   </div>
 </DocumentFragment>
 `;

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={<Target />}
-            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')))
   }
 })
 

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 ? (
     <Box>
       <Heading level="3">Travel Timer</Heading>
-      <span>
-        {minutes} minutes {seconds} seconds
-      </span>
+      {timeLeft && (
+        <span>
+          {timeLeft.minutes()} minutes {timeLeft.seconds()} seconds
+        </span>
+      )}
     </Box>
   ) : 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()
-      })
-    )
   }
 })
 

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: {

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,

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