Implement basic experiment mode with timeline

The timeline doesn't trigger anything yet, but the visual element is in place and connected.

9 files changed, 186 insertions, 7 deletions

diff --git a/src/components/map/groups/RackGroup.js b/src/components/map/groups/RackGroup.js
index 648c74d7..a34a5543 100644
--- a/src/components/map/groups/RackGroup.js
+++ b/src/components/map/groups/RackGroup.js
@@ -9,7 +9,7 @@ import TileObject from "../elements/TileObject";
 
 const RackGroup = ({tile, inSimulation, rackLoad}) => {
     let color = RACK_BACKGROUND_COLOR;
-    if (inSimulation) {
+    if (inSimulation && rackLoad) {
         color = convertLoadToSimulationColor(rackLoad);
     }
 
diff --git a/src/components/map/groups/TileGroup.js b/src/components/map/groups/TileGroup.js
index 3de712d1..c7991507 100644
--- a/src/components/map/groups/TileGroup.js
+++ b/src/components/map/groups/TileGroup.js
@@ -20,7 +20,7 @@ const TileGroup = ({tile, newTile, inSimulation, roomLoad, onClick}) => {
     let color = ROOM_DEFAULT_COLOR;
     if (newTile) {
         color = ROOM_IN_CONSTRUCTION_COLOR;
-    } else if (inSimulation) {
+    } else if (inSimulation && roomLoad) {
         color = convertLoadToSimulationColor(roomLoad);
     }
 
diff --git a/src/components/navigation/AppNavbar.js b/src/components/navigation/AppNavbar.js
index 94eaa7fa..4f669723 100644
--- a/src/components/navigation/AppNavbar.js
+++ b/src/components/navigation/AppNavbar.js
@@ -11,10 +11,10 @@ const AppNavbar = ({simulationId, inSimulation}) => (
             <NavItem route={"/simulations/" + simulationId}>
                 <Link
                     className="nav-link"
-                    title="Build"
+                    title="Construction"
                     to={"/simulations/" + simulationId}>
                     <FontAwesome name="industry" className="mr-1"/>
-                    Build
+                    Construction
                 </Link>
             </NavItem> :
             undefined
@@ -23,10 +23,10 @@ const AppNavbar = ({simulationId, inSimulation}) => (
             <NavItem route={"/simulations/" + simulationId + "/experiments"}>
                 <Link
                     className="nav-link"
-                    title="Simulate"
+                    title="Experiments"
                     to={"/simulations/" + simulationId + "/experiments"}>
                     <FontAwesome name="play" className="mr-1"/>
-                    Simulate
+                    Experiments
                 </Link>
             </NavItem> :
             undefined
diff --git a/src/components/sidebars/topology/rack/MachineComponent.js b/src/components/sidebars/topology/rack/MachineComponent.js
index b6e9791d..c9211115 100644
--- a/src/components/sidebars/topology/rack/MachineComponent.js
+++ b/src/components/sidebars/topology/rack/MachineComponent.js
@@ -15,7 +15,7 @@ const UnitIcon = ({id, type}) => (
 
 const MachineComponent = ({position, machine, inSimulation, machineLoad, onClick}) => {
     let color = "white";
-    if (inSimulation) {
+    if (inSimulation && machineLoad) {
         color = convertLoadToSimulationColor(machineLoad);
     }
     const hasNoUnits = machine.cpuIds.length + machine.gpuIds.length + machine.memoryIds.length
diff --git a/src/components/timeline/PlayButtonComponent.js b/src/components/timeline/PlayButtonComponent.js
new file mode 100644
index 00000000..6ec70cc3
--- /dev/null
+++ b/src/components/timeline/PlayButtonComponent.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const PlayButtonComponent = ({isPlaying, onPlay, onPause}) => (
+    <div className="play-btn" onClick={() => isPlaying ? onPause() : onPlay()}>
+        {isPlaying ?
+            <span className="fa fa-pause"/> :
+            <span className="fa fa-play"/>
+        }
+    </div>
+);
+
+export default PlayButtonComponent;
diff --git a/src/components/timeline/Timeline.js b/src/components/timeline/Timeline.js
new file mode 100644
index 00000000..a2a858eb
--- /dev/null
+++ b/src/components/timeline/Timeline.js
@@ -0,0 +1,15 @@
+import React from "react";
+import TimelineControlsContainer from "../../containers/timeline/TimelineControlsContainer";
+import TimelineLabelsContainer from "../../containers/timeline/TimelineLabelsContainer";
+import "./Timeline.css";
+
+const Timeline = ({currentTick, lastSimulatedTick}) => (
+    <div className="timeline-bar">
+        <div className="timeline-container">
+            <TimelineLabelsContainer/>
+            <TimelineControlsContainer/>
+        </div>
+    </div>
+);
+
+export default Timeline;
diff --git a/src/components/timeline/Timeline.sass b/src/components/timeline/Timeline.sass
new file mode 100644
index 00000000..eed3174e
--- /dev/null
+++ b/src/components/timeline/Timeline.sass
@@ -0,0 +1,108 @@
+@import ../../style-globals/_variables.sass
+@import ../../style-globals/_mixins.sass
+
+$container-size: 500px
+$play-btn-size: 40px
+$border-width: 1px
+$timeline-border: $border-width solid $gray-semi-dark
+
+.timeline-bar
+  display: block
+  position: absolute
+  left: 0
+  bottom: 20px
+  width: 100%
+  text-align: center
+  z-index: 2000
+
+.timeline-container
+  display: inline-block
+  margin: 0 auto
+  text-align: left
+
+  width: $container-size
+
+.timeline-labels
+  display: block
+  height: 25px
+  line-height: 25px
+
+  div
+    display: inline-block
+
+  .start-time-label
+    margin-left: $play-btn-size - $border-width
+    padding-left: 4px
+
+  .end-time-label
+    padding-right: 4px
+    float: right
+
+.timeline-controls
+  display: flex
+  border: $timeline-border
+  overflow: hidden
+
+  +border-radius($standard-border-radius)
+
+  .play-btn
+    width: $play-btn-size
+    height: $play-btn-size + $border-width
+    line-height: $play-btn-size + $border-width
+    text-align: center
+    float: left
+    margin-top: -$border-width
+
+    font-size: 16pt
+    background: #333
+    color: #eee
+
+    +transition(background, $transition-length)
+    +user-select
+    +clickable
+
+  .play-btn:hover
+    background: #656565
+
+  .play-btn:active
+    background: #000
+
+  .timeline
+    position: relative
+    flex: 1
+    height: $play-btn-size
+    line-height: $play-btn-size
+    float: right
+
+    background: $blue-light
+
+    z-index: 500
+
+    div
+      +transition(all, $transition-length)
+
+    .time-marker
+      position: absolute
+      top: 0
+      left: 0
+
+      width: 6px
+      height: 100%
+
+      background: $blue-very-dark
+
+      +border-radius(2px)
+
+      z-index: 503
+
+    .section-marker
+      position: absolute
+      top: 0
+      left: 0
+
+      width: 3px
+      height: 100%
+
+      background: #222222
+
+      z-index: 504
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;
diff --git a/src/components/timeline/TimelineLabelsComponent.js b/src/components/timeline/TimelineLabelsComponent.js
new file mode 100644
index 00000000..1f6053a1
--- /dev/null
+++ b/src/components/timeline/TimelineLabelsComponent.js
@@ -0,0 +1,11 @@
+import React from "react";
+import {convertSecondsToFormattedTime} from "../../util/date-time";
+
+const TimelineLabelsComponent = ({currentTick, lastSimulatedTick}) => (
+    <div className="timeline-labels">
+        <div className="start-time-label">{convertSecondsToFormattedTime(currentTick)}</div>
+        <div className="end-time-label">{convertSecondsToFormattedTime(lastSimulatedTick)}</div>
+    </div>
+);
+
+export default TimelineLabelsComponent;