Times of day, and a primitive clock in the header

5 files changed, 73 insertions, 5 deletions

diff --git a/app/controllers/clock_controller.rb b/app/controllers/clock_controller.rb
new file mode 100644
index 0000000..13ae5e2
--- /dev/null
+++ b/app/controllers/clock_controller.rb
@@ -0,0 +1,5 @@
+class ClockController < ApplicationController
+  def clock
+    render partial: "clock"
+  end
+end
diff --git a/app/javascript/controllers/clock_controller.js b/app/javascript/controllers/clock_controller.js
new file mode 100644
index 0000000..53a1014
--- /dev/null
+++ b/app/javascript/controllers/clock_controller.js
@@ -0,0 +1,29 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = [ "clock" ];
+
+  static values = {
+    time: String,
+  }
+
+  connect() {
+    this.load();
+    let controller = this;
+    this.clockInterval = setInterval(function() {
+      controller.load();
+    }, 20 * 1000);
+  }
+
+  disconnect() {
+    clearInterval(this.clockInterval);
+  }
+
+  load() {
+    fetch(`/clock`)
+      .then(response => response.text())
+      .then(html => {
+        this.clockTarget.innerHTML = html;
+      });
+  }
+}
diff --git a/app/lib/world.rb b/app/lib/world.rb
new file mode 100644
index 0000000..f767419
--- /dev/null
+++ b/app/lib/world.rb
@@ -0,0 +1,14 @@
+class World
+  def self.time_of_day
+    hour = Time.current.hour
+    if [2, 14].include? hour
+      :firstlight
+    elsif (hour >= 3 && hour < 8) || (hour >= 15 && hour < 20)
+      :day
+    elsif [8, 20].include? hour
+      :twilight
+    else
+      :night
+    end
+  end
+end
diff --git a/app/views/application/_header.html.erb b/app/views/application/_header.html.erb
index 38bfcf4..af15262 100644
--- a/app/views/application/_header.html.erb
+++ b/app/views/application/_header.html.erb
@@ -1,10 +1,6 @@
 <header class="flex flex-shrink items-center justify-between px-4 py-1 bg-gray-800 text-display">
-  <div class="header-title text-2xl">
+  <div class="header-title text-2xl flex items-center space-x-4">
     <%= link_to "Esoterra", home_index_path, class: "no-underline" %>
-  </div>
-  <div id="header_center" data-turbolinks-permanent>
-  </div>
-  <div>
     <ul class="flex flex-row text-sm">
       <% if user_signed_in? %>
         <li class="mr-3">
@@ -26,4 +22,11 @@
       <% end %>
     </ul>
   </div>
+  <div id="header_center" data-turbolinks-permanent>
+  </div>
+  <div>
+    <div data-controller="clock" data-clock-time-value="<%= Time.current %>"
+         data-clock-target="clock"
+         class="text-sm"></div>
+  </div>
 </header>
diff --git a/app/views/clock/_clock.html.erb b/app/views/clock/_clock.html.erb
new file mode 100644
index 0000000..a47ebb1
--- /dev/null
+++ b/app/views/clock/_clock.html.erb
@@ -0,0 +1,17 @@
+<% time_of_day_classes = case World.time_of_day
+                         when :firstlight
+                           "text-transparent bg-clip-text bg-gradient-to-b from-blue-500 to-yellow-500"
+                         when :day
+                           "text-yellow-500"
+                         when :twilight
+                           "text-transparent bg-clip-text bg-gradient-to-b from-purple-500 to-yellow-500"
+                         when :night
+                           "text-purple-500"
+                         else # Should never happen
+                           "text-gray-500"
+                         end
+
+%>
+
+<%= Time.current.strftime("%H:%M") %>
+<span class="font-bold <%= time_of_day_classes %>"><%= World.time_of_day.to_s.capitalize %></span>