From f8f617c97fcb2df3dbefc9527d974151e367cb60 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Mon, 18 Sep 2017 16:52:11 +0200
Subject: Implement basic experiment mode with timeline

The timeline doesn't trigger anything yet, but the visual element is in place and connected.
---
 .../timeline/TimelineControlsComponent.js          | 33 ++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/components/timeline/TimelineControlsComponent.js

(limited to 'src/components/timeline/TimelineControlsComponent.js')

diff --git a/src/components/timeline/TimelineControlsComponent.js b/src/components/timeline/TimelineControlsComponent.js
new file mode 100644
index 00000000..3f37c3bc
--- /dev/null
+++ b/src/components/timeline/TimelineControlsComponent.js
@@ -0,0 +1,33 @@
+import React from "react";
+import PlayButtonContainer from "../../containers/timeline/PlayButtonContainer";
+
+function getXPercentage(tick, maxTick) {
+    if (maxTick === 0) {
+        return "0%";
+    } else if (tick > maxTick) {
+        return "100%";
+    }
+
+    return (tick / maxTick) + "%";
+}
+
+const TimelineControlsComponent = ({currentTick, lastSimulatedTick, sectionTicks}) => (
+    <div className="timeline-controls">
+        <PlayButtonContainer/>
+        <div className="timeline">
+            <div
+                className="time-marker"
+                style={{left: getXPercentage(currentTick, lastSimulatedTick)}}
+            />
+            {sectionTicks.map(sectionTick => (
+                <div
+                    key={sectionTick}
+                    className="section-marker"
+                    style={{left: getXPercentage(sectionTick, lastSimulatedTick)}}
+                />
+            ))}
+        </div>
+    </div>
+);
+
+export default TimelineControlsComponent;
-- 
cgit v1.2.3