1 files changed, 39 insertions, 0 deletions
diff --git a/src/components/app/timeline/TimelineControlsComponent.js b/src/components/app/timeline/TimelineControlsComponent.js
new file mode 100644
index 00000000..72fc4a60
--- /dev/null
+++ b/src/components/app/timeline/TimelineControlsComponent.js
@@ -0,0 +1,39 @@
+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;