Highlight similar legs in the timeline.

diff --git a/lib/timeline.php b/lib/timeline.php
index a845dd0..ddeeff7 100644 (file)
--- a/lib/timeline.php
+++ b/lib/timeline.php
@@ -27,6 +27,7 @@
     $q->joinWith('Lap.Entry');
     $q->joinWith('Entry.Ship');
     $q->joinWith('Ship.Competitor');
+    $q->joinWith('Ship.Hull');
     $q->where('Entry.RaceId=?', $race_id);
     $legs = $q->orderByArrival()->orderBy('Lap.LapNumber')->orderByStationOrder()->orderBy('Competitor.CmdrName')->orderBy('Entry.Id')->find();
 
@@ -71,12 +72,34 @@
         $ship_name = $ship->getName();
         $competitor = $ship->getCompetitor();
         $cmdr_name = $competitor->getCmdrName();
+        $hull = $ship->getHull();
+        $hull_name = $hull->getName();
+
+        $style_cmdr = "cmdr" . $competitor->getId();
+        $style_entry = "entry$entry_id";
+        $style_hull = "hull" . $hull->getId();
+        $style_ship = "ship" . $ship->getId();
+        $style_lap = "lap$lap_number";
+        $style_order = "order$station_order";
+        $style_station = "station$station_id";
+        $style_system = "system" . $system->getId();
+        $classes = array(
+          "leg",
+          $style_cmdr,
+          $style_entry,
+          $style_hull,
+          $style_lap,
+          $style_order,
+          $style_ship,
+          $style_station,
+          $style_system
+        );
 
         $verb = ($station_order > 1) ? "arrived at" : "left";
-        echo "<p>";
-        echo "$delta: CMDR <strong>$cmdr_name</strong> flying <strong>$ship_name</strong> from $start_time $verb $nth station ";
-        if ($allotted_time) echo "of lap $lap_number, ";
-        echo "<em>$station_name</em> $type in <strong>$system_name</strong> at $arrival";
+        echo "<p class=\"" . implode(' ', $classes) . "\">";
+        echo "$delta: CMDR <strong><span class=\"$style_cmdr\">$cmdr_name</span></strong> flying <span class=\"$style_hull\">$hull_name</span> <strong><span class=\"$style_ship\">$ship_name</span></strong> from $start_time $verb <span class=\"$style_order\">$nth</span> station ";
+        if ($allotted_time) echo "of lap <span class=\"$style_lap\">$lap_number</span>, ";
+        echo "<em><span class=\"$style_station\">$station_name</span></em> $type in <strong><span class=\"$style_system\">$system_name</span></strong> at $arrival";
         if ($station_id == $finish_line && $station_number > 1 && is_numeric($hull_end)) echo " with $hull_end% hull remaining";
         else if ($station_id == $start_line && is_numeric($hull_start)) echo " with $hull_start% hull";
         echo "</p>";

diff --git a/style.css b/style.css
index 800c061..2eb50b7 100644 (file)
--- a/style.css
+++ b/style.css
@@ -13,3 +13,4 @@ table.raikogram tr:first-child th { padding-left: 1em; padding-right: 1em; }
 #systems { overflow-x: auto; }
 #stations { overflow-x: auto; }
 #waypoints { overflow-x: auto; }
+p.leg { background-color: transparent; }

diff --git a/timeline.js b/timeline.js
new file mode 100644 (file)
index 0000000..3bd2766
--- /dev/null
+++ b/timeline.js
@@ -0,0 +1,37 @@
+/* Set the background for a leg element. */
+function leg_background(classes, colour) {
+  var changed = false;
+  for (c of classes) {
+    for (element of document.getElementsByClassName(c)) {
+      if (! element.classList.contains('leg')) continue;
+      element.style.backgroundColor = colour;
+      changed = true;
+    }
+  }
+  return changed;
+}
+
+/* Hover over an element. */
+function enter(event) {
+  if (leg_background(event.target.classList, 'rgba(255, 100, 24, 0.4)')) {
+    event.target.style.textDecoration = 'underline';
+  }
+}
+
+/* Mouse out of an element. */
+function leave(event) {
+  if (leg_background(event.target.classList, 'inherit')) {
+    event.target.style.textDecoration = 'inherit';
+  }
+}
+
+/* Document onload. */
+function loaded() {
+  for (span of document.getElementsByTagName('span')) {
+    if (! span.classList.length) continue;
+    span.addEventListener('mouseenter', enter, true);
+    span.addEventListener('mouseleave', leave, true);
+  }
+}
+
+document.onload = loaded();