Front end

src/app/components/App.jsx

@@ -37,16 +37,17 @@ class App extends Component {
 
     this.state = {
       data: [],
-      isPlaying: true,
-      isRecording: true,
+      isPlaying: false,
+      isRecording: false,
     };
-
     this.port = null;
+    this.isPlayingIndex = 0;
     this.addActionToView = this.addActionToView.bind(this);
     this.toTheFuture = this.toTheFuture.bind(this);
     this.toThePast = this.toThePast.bind(this);
     this.setIsPlaying = this.setIsPlaying.bind(this);
     this.setIsRecording = this.setIsRecording.bind(this);
+    this.actionInPlay = this.actionInPlay.bind(this);
   }
 
   componentDidMount() {
@@ -70,28 +71,53 @@ class App extends Component {
 
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
+    if (this.isPlayingIndex === this.state.data.length - 1) {
+      this.isPlayingIndex = 0;
+    }
+
     let { isPlaying } = this.state;
     isPlaying = !isPlaying;
     this.setState({ isPlaying });
+
+    if (isPlaying) {
+      this.actionInPlay();
+    }
   }
 
   // functionality to change 'record' button to 'pause'
   setIsRecording() {
+    console.log('setIsRecording:', this.state.isRecording)
     this.setState(state => ({
       isRecording: !state.isRecording,
     }));
   }
 
+  actionInPlay() {
+    this.isPlayingIndex++;
+
+    const { id, action, state } = this.state.data[this.isPlayingIndex];
+    setTimeout(() => {
+      this.setState((prev, props) => {
+        return { ...prev, id, action, state }
+      });
+      if (this.state.isPlaying && this.isPlayingIndex < this.state.data.length - 1) {
+        this.actionInPlay();
+      } else {
+        this.setState({ isPlaying: false });
+      }
+    }, 1000);
+  }
+
   // function to select an event from the data
   // and set state with all required info
   addActionToView(e) {
     const { data } = this.state;
     const actionToView = data.filter(action => e.target.id === String(action.id));
     const {
-      action, id, payload, state,
+      action, id, state,
     } = actionToView[0];
     this.setState({
-      action, id, payload, state,
+      action, id, state,
     });
   }
 
@@ -118,7 +144,6 @@ class App extends Component {
     const {
       action,
       id,
-      payload,
       state,
       data,
       setIsPlaying,
@@ -134,22 +159,22 @@ class App extends Component {
           left={
             (
               <Events
-                data={data}
+                data={data} 
                 addAction={this.addActionToView}
                 toTheFuture={this.toTheFuture}
                 toThePast={this.toThePast}
                 isPlaying={isPlaying}
                 isRecording={isRecording}
                 setIsPlaying={this.setIsPlaying}
                 setIsRecording={this.setIsRecording}
+                activeEventId={id}
               />
             )}
           right={
             (
               <Details
                 action={action}
                 id={id}
-                payload={payload}
                 actionState={state}
               />
             )}

src/app/components/EventCards/EventCreator.jsx

@@ -4,11 +4,14 @@ import { EventCard, EventTimeDiv } from '../../styles/Events.jsx';
 
 export default function EventCreator(props) {
   // renders individual action
-  const { action, id, addAction, actionTime } = props;
+  const {
+    action, id, addAction, actionTime, selectedEvent,
+  } = props;
   return (
-    <EventCard id={id} onClick={addAction}>
-      &#x2630; {action}
-      <EventTimeDiv>{actionTime || '00:00:01'}</EventTimeDiv>
+    <EventCard id={id} onClick={addAction} selectedEvent={selectedEvent}>
+      &#x2630;
+      {action}
+      <EventTimeDiv selectedEvent={selectedEvent}>{actionTime || '00:00:01'}</EventTimeDiv>
     </EventCard>
 
   );

src/app/components/EventCards/EventsDisplay.jsx

@@ -7,17 +7,18 @@ import EventCreator from './EventCreator.jsx';
 import { EventsWrapper } from '../../styles/Events.jsx';
 
 export default function Events(props) {
+  const { data, activeEventId } = props;
   return (
     <EventsWrapper>
-      {props.data.map((e, i) => (
+      {data.map((e, i) => (
         <EventCreator
+          selectedEvent={activeEventId === e.id ? 'true' : 'false'}
           action={e.action.type}
           key={i}
           id={e.id}
           addAction={props.addAction}
         />
       ))}
-      {/* time travel doesn't work yet */}
     </EventsWrapper>
   );
 }

src/app/components/EventCards/TimeTravel.jsx

@@ -17,8 +17,8 @@ export default function TimeTavel(props) {
   return (
     <>
       <TimeTravelContainer>
-        <EventTimeDiv onClick={setIsRecording}>{isRecording ? 'RECORD' : 'PAUSE'}</EventTimeDiv>
-        <EventTimeDiv onClick={setIsPlaying}>{isPlaying ? 'PLAY' : 'STOP' }</EventTimeDiv>
+        <EventTimeDiv onClick={setIsRecording}>{isRecording ? 'PAUSE' : 'RECORD'}</EventTimeDiv>
+        <EventTimeDiv onClick={setIsPlaying}>{isPlaying ? 'STOP' : 'PLAY' }</EventTimeDiv>
       </TimeTravelContainer>
       <TimeTravelContainer>
         <EventTimeDiv onClick={toThePast}>PREVIOUS</EventTimeDiv>

src/app/container/Events.jsx

@@ -13,6 +13,7 @@ class Events extends Component {
 
   render() {
     const {
+      activeEventId,
       addAction,
       data,
       toTheFuture,
@@ -21,13 +22,15 @@ class Events extends Component {
       isPlaying,
       setIsRecording,
       isRecording,
+      isPlayingIndex,
     } = this.props;
     return (
       <>
         <EventsNav />
         <EventsDisplay
           data={data}
           addAction={addAction}
+          activeEventId={activeEventId}
         />
         <TimeTravel
           toTheFuture={toTheFuture}

src/app/index.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>styleish</title>
+  <title>React Rewind</title>
 </head>
 
 <body>

src/app/styles/Events.jsx

@@ -10,6 +10,7 @@ export const EventsWrapper = styled.div`
 
 // events actions bar
 export const EventCard = styled.div`
+  background-color: ${props => props.selectedEvent === 'false' ? 'none' : "#484C54"};
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -21,16 +22,18 @@ export const EventCard = styled.div`
   cursor: pointer;
 
   &:hover {
-    color: #4F5A65;
+    color: ${props => props.selectedEvent === 'false' ? '#4F5A65' : "white"};
     border-bottom: 1px solid #4F5A65;
   }
 `;
 
+
+
 export const EventTimeDiv = styled.div`
   width: 25%;
   text-align: center;
-  background-color: #484C54;
-  color: #BCBCBB;
+  background-color: ${props => props.selectedEvent === 'false' ? '#484C54' : "#3C444F"};
+  color: ${props => props.selectedEvent === 'false' ? 'white' : "white"};
   border-radius: 5px;
 `;
 

src/app/styles/Nav.jsx

@@ -41,7 +41,7 @@ export const Buttons = styled.div`
     &.active {
     color: white;
     background-color: #4F5A65;
-    /* border-bottom: 3px solid white; */
+    /* border-bottom: 3px solid hotpink; */
     }
   }