Times of day, and a primitive clock in the header

7 files changed, 79 insertions, 5 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58fdf3f..e28aaf3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@ All notable changes to this project will be documented in this file.
 ### General
 - Characters now have a location. Correspondingly, the "Locations" menu option and view has been replaced
   by a "Look" menu and view.
+- The planes of Esoterra now have times of day. The time of day is the same across all planes. There are two day/night
+  cycles per real life day, each with 1 hour of firstlight, 5 hours of day, 1 hour of twilight, and 5 hours of night.
+  A game clock has been added to the the header which displays the approximate game time and time of day. This clock
+  is currently very primitive in nature: it simply loads the current time and then updates itself every 20 seconds.
+  This means that it can be up to 19 seconds behind. The clock will be improved on in the future.
   
 ### Skills
 - A new skill, Aetherweave, has been added.
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>
diff --git a/config/routes.rb b/config/routes.rb
index ce39562..9c8b646 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -12,6 +12,7 @@ Rails.application.routes.draw do
   end
 
   get :look, to: "look#look"
+  get :clock, to: "clock#clock"
 
   resources :chat_messages, only: [:index, :create] do
     collection do