merged with dev

Author: joshua0308

package-lock.json

@@ -19,7 +19,7 @@ class Tree {
   }
 
   // deep copies only the state of each component and creates a new tree
-  getCopy(copy = new Tree('root', true, 'root')) {
+  getCopy(copy = new Tree('root', true)) {
     // copy state of children
     copy.children = this.children.map(child => new Tree(child.component.state, true, child.component.constructor.name));
 

package/tree.js

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import Slider from 'rc-slider';
 import Tooltip from 'rc-tooltip';
 
-import 'rc-slider/assets/index.css';
-import 'rc-tooltip/assets/bootstrap.css';
 
 const { Handle } = Slider;
 
@@ -32,7 +30,6 @@ class mainSlider extends Component {
 
   render() {
     return (
-      <div>
         <Slider
           min={0}
           max={this.props.snapshotLength - 1}
@@ -44,7 +41,6 @@ class mainSlider extends Component {
           }}
           handle={handle}
         />
-      </div>
     );
   }
 }

src/app/components/Slider.jsx renamed to src/app/components/MainSlider.jsx

@@ -17,6 +17,9 @@ class MainContainer extends Component {
     this.handleSendSnapshot = this.handleSendSnapshot.bind(this);
     this.handleJumpSnapshot = this.handleJumpSnapshot.bind(this);
     this.emptySnapshot = this.emptySnapshot.bind(this);
+    this.moveBackward = this.moveBackward.bind(this);
+    this.moveForward = this.moveForward.bind(this);
+    this.playForward = this.playForward.bind(this);
   }
 
   componentDidMount() {
@@ -41,14 +44,43 @@ class MainContainer extends Component {
     this.setState({ port });
   }
 
+  moveBackward() {
+    const { snapshots, snapshotIndex } = this.state;
+    if (snapshots.length > 0 && snapshotIndex > 0) {
+      const newIndex = snapshotIndex - 1;
+      this.handleJumpSnapshot(newIndex);
+      this.setState({ snapshotIndex: newIndex });
+    }
+  }
+
+  moveForward() {
+    const { snapshots, snapshotIndex } = this.state;
+    if (snapshotIndex < snapshots.length - 1) {
+      const newIndex = snapshotIndex + 1;
+      this.handleJumpSnapshot(newIndex);
+      this.setState({ snapshotIndex: newIndex });
+    }
+  }
+
+  playForward() {
+    var play = setInterval(() => {
+      const { snapshots, snapshotIndex } = this.state;
+      if (snapshotIndex < snapshots.length - 1) {
+        const newIndex = snapshotIndex + 1;
+        this.handleJumpSnapshot(newIndex);
+        this.setState({ snapshotIndex: newIndex });
+      } else clearInterval(play);
+    }, 1000)
+    play();
+  }
+
   emptySnapshot() {
     const { port } = this.state;
     this.setState({ snapshots: [], snapshotIndex: 0 });
     port.postMessage({ action: 'emptySnap' });
   }
 
-  // change the snapshot index
-  // this will change the state shown in the state container but won't change the DOM
+  // change the snapshot index, this will change the state shown in the state container but won't change the DOM
   handleChangeSnapshot(snapshotIndex) {
     // snapshotIndex
     // --> 1. affects the action that is highlighted
@@ -105,13 +137,16 @@ class MainContainer extends Component {
             emptySnapshot={this.emptySnapshot}
           />
           <StateContainer snapshot={snapshots[snapshotIndex]} />
+          <TravelContainer
+            snapshotsLength={snapshots.length}
+            handleChangeSnapshot={this.handleChangeSnapshot}
+            handleJumpSnapshot={this.handleJumpSnapshot}
+            snapshotIndex={snapshotIndex}
+            moveBackward={this.moveBackward}
+            moveForward={this.moveForward}
+            playForward={this.playForward}
+          />
         </div>
-        <TravelContainer
-          snapshotsLength={snapshots.length}
-          handleChangeSnapshot={this.handleChangeSnapshot}
-          handleJumpSnapshot={this.handleJumpSnapshot}
-          snapshotIndex={snapshotIndex}
-        />
       </div>
     );
   }

src/app/containers/MainContainer.jsx

@@ -1,26 +1,37 @@
+<<<<<<< HEAD
 import React, { Component } from 'react';
 
 import Slider from '../components/Slider';
+=======
+import React from 'react';
+import MainSlider from '../components/MainSlider'
+>>>>>>> dev
 
-class TravelContainer extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div>
-        <div className="travel-container">TravelContainer</div>
-        <Slider
-          className="travel-slider"
-          snapshotLength={this.props.snapshotsLength}
-          handleChangeSnapshot={this.props.handleChangeSnapshot}
-          handleJumpSnapshot={this.props.handleJumpSnapshot}
-          snapshotIndex={this.props.snapshotIndex}
-        />
-        {`travelContainer snapshotIndex ${this.props.snapshotIndex}`}
-      </div>
-    );
-  }
-}
+const TravelContainer = ({
+  playForward,
+  moveBackward,
+  moveForward,
+  snapshotsLength,
+  handleChangeSnapshot,
+  handleJumpSnapshot,
+  snapshotIndex,
+}) => (
+  <div className="travel-container">
+    <div className="play-button" onClick={playForward}>
+      play
+    </div>
+    <MainSlider
+      snapshotLength={snapshotsLength}
+      handleChangeSnapshot={handleChangeSnapshot}
+      snapshotIndex={snapshotIndex}
+      handleJumpSnapshot={handleJumpSnapshot}
+    />
+    <div className="backward-button" onClick={moveBackward}>
+      {'<'}
+    </div>
+    <div className="forward-button" onClick={moveForward}>
+      {'>'}
+    </div>
+  </div>
+);
 export default TravelContainer;

src/app/containers/TravelContainer.jsx

@@ -1,7 +1,7 @@
 .action-component {
   padding: 5px 10px;
-  display: flex;
-  justify-content: space-around;
+  display: grid;
+  grid-template-columns: 5fr 1fr;
   align-items: center;
   height: 20px;
   background-color: $brand-color;
@@ -18,5 +18,8 @@
 
 .action-component button {
   position: relative;
-  right: 0px;
+}
+
+.action-component:hover .jump-button {
+  visibility: visible;
 }

src/app/styles/components/_actionComponent.scss

@@ -6,6 +6,7 @@
 .jump-button {
   @extend %button-shared;
   width: 50px;
+  visibility: hidden;
 }
 
 .jump-button:hover {
@@ -16,6 +17,24 @@
   background-color: $highlight-color;
 }
 
+.play-button {
+  @extend %button-shared;
+  width: 60px;
+  margin: 10px;
+}
+
+.backward-button {
+  @extend %button-shared;
+  width: 30px;
+  margin: 7px;
+}
+
+.forward-button {
+  @extend %button-shared;
+  width: 30px;
+  margin: 7px;
+}
+
 %button-shared {
   display: flex;
   justify-content: center;