1 files changed, 49 insertions, 0 deletions
diff --git a/frontend/src/components/app/timeline/TimelineControlsComponent.js b/frontend/src/components/app/timeline/TimelineControlsComponent.js
new file mode 100644
index 00000000..f3d55154
--- /dev/null
+++ b/frontend/src/components/app/timeline/TimelineControlsComponent.js
@@ -0,0 +1,49 @@
+import React from "react";
+import PlayButtonContainer from "../../../containers/app/timeline/PlayButtonContainer";
+import { convertTickToPercentage } from "../../../util/timeline";
+
+class TimelineControlsComponent extends React.Component {
+  onTimelineClick(e) {
+    const percentage = e.nativeEvent.offsetX / this.timeline.clientWidth;
+    const tick = Math.floor(percentage * (this.props.lastSimulatedTick + 1));
+    this.props.goToTick(tick);
+  }
+
+  render() {
+    return (
+      <div className="timeline-controls">
+        <PlayButtonContainer />
+        <div
+          className="timeline"
+          ref={timeline => (this.timeline = timeline)}
+          onClick={this.onTimelineClick.bind(this)}
+        >
+          <div
+            className="time-marker"
+            style={{
+              left: convertTickToPercentage(
+                this.props.currentTick,
+                this.props.lastSimulatedTick
+              )
+            }}
+          />
+          {this.props.sectionTicks.map(sectionTick => (
+            <div
+              key={sectionTick}
+              className="section-marker"
+              style={{
+                left: convertTickToPercentage(
+                  sectionTick,
+                  this.props.lastSimulatedTick
+                )
+              }}
+              title="Topology changes at this tick"
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default TimelineControlsComponent;