🔀 Merge pull request #165 from alexlee-dev/feature/dissapearing-planets

🙈 Dissapearing Planets

cypress/integration/Map-spec.js

@@ -65,4 +65,16 @@ describe('Map', () => {
     cy.contains('TRAVEL').click()
     // ! Assert that the new planet is traveled to
   })
+
+  it("Should hide all 'g' components after traveling to the chosen planet.", () => {
+    const destinationPlanet = mockState.world.planets.find(
+      planet => planet.name !== mockState.ship.location.name
+    )
+    cy.contains(destinationPlanet.name).click()
+    cy.get('#travel-button').click()
+    cy.wait(1000)
+    cy.get('#map-root > svg')
+      .children()
+      .should('have.length', 0)
+  })
 })

src/components/TravelPrompt.js

@@ -10,6 +10,7 @@ import {
 } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { instantTravel } from '../redux/actions/ship'
+import { hidePlanets } from '../util/map'
 
 const TravelPrompt = ({ destination, handleTravel, open, setOpen }) => {
   const handleClose = () => setOpen(false)
@@ -27,6 +28,7 @@ const TravelPrompt = ({ destination, handleTravel, open, setOpen }) => {
           Cancel
         </Button>
         <Button
+          id="travel-button"
           onClick={() => handleTravel(destination, setOpen)}
           color="primary"
         >
@@ -48,6 +50,7 @@ const mapStateToProps = () => ({})
 
 const mapDispatchToProps = dispatch => ({
   handleTravel: (destination, setOpen) => {
+    hidePlanets()
     dispatch(instantTravel(destination))
     setOpen(false)
   }

src/util/map.js

@@ -205,3 +205,16 @@ export const getHeight = selector =>
   d3.select(selector).property('clientHeight')
 
 export const getWidth = selector => d3.select(selector).property('clientWidth')
+
+export const hidePlanets = () => {
+  let value = 1.0
+  const interval = setInterval(() => {
+    console.log({ value })
+    if (value <= 0) {
+      clearInterval(interval)
+      d3.selectAll('g').remove()
+    }
+    d3.selectAll('g').style('opacity', value - 0.05)
+    value -= 0.05
+  }, 100)
+}