Timer progress bar

4 files changed, 34 insertions, 25 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d793a17..2bc97dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ hearth amenities, etc that are being added unless they warrant explicit mention
 - Current activity, timer, results, and conditions (boons & banes) are now always visible. Most are located in a new box
   above the chat, while the results output is now in a new box below the main box.
   - When performing a beastslay activity, current and max wounds will be displayed as well.
+- A progress bar beneath the timer.
 - Spicework has been implemented. You can now craft food and drugs in your hearth, once you build a spicebench.
   A character can only have one food condition and one drink condition at a time. If a second food or drink condition
   is gained, the old one is lost. There is no limit to the number of drug conditions a character can have at once.
diff --git a/app/javascript/controllers/timer_controller.js b/app/javascript/controllers/timer_controller.js
index e85e7ca..b13188a 100644
--- a/app/javascript/controllers/timer_controller.js
+++ b/app/javascript/controllers/timer_controller.js
@@ -1,47 +1,43 @@
-import { Controller } from "stimulus";
+import {Controller} from "stimulus";
 import Rails from "@rails/ujs";
 
 export default class extends Controller {
-  static targets = [ "timer" ];
+  static targets = [ "timer", "progressBar" ];
 
   static values = {
-    counter: Number,
+    timeRemaining: Number,
+    activityDuration: Number,
     postUrl: String,
   }
 
   connect() {
     if (!this.timerInterval) this.startUpdating();
-    this.timerTarget.textContent = this.counterValue;
-    this.postFailures = 0;
+    this.timerTarget.textContent = Math.ceil(this.timeRemainingValue);
   }
 
   startUpdating() {
     let controller = this;
     controller.timerInterval = setInterval(() => {
-      if (controller.postFailures >= 5) {
-        alert("An error occurred. Please submit a bug report, explaining what you were doing when it occurred.");
-        clearInterval(controller.timerInterval);
-        return;
-      }
 
-      if (controller.counterValue > 0) controller.counterValue--;
+      if (controller.timeRemainingValue > 0) {
+        controller.timeRemainingValue = controller.timeRemainingValue - 0.01;
+      }
 
-      if (controller.counterValue > 0) {
-        controller.timerTarget.textContent = controller.counterValue.toString();
+      if (controller.timeRemainingValue > 0) {
+        controller.timerTarget.textContent = Math.ceil(controller.timeRemainingValue).toString();
+        controller.progressBarTarget.style.width = `${(1 - (controller.timeRemainingValue / controller.activityDurationValue)) * 100}%`;
       } else {
+        clearInterval(controller.timerInterval);
+        controller.timerInterval = null;
         Rails.ajax({
           type: "POST",
           url: controller.postUrlValue,
           success: () => {
-            clearInterval(controller.timerInterval);
-            controller.timerInterval = null;
-            controller.postFailures = 0;
           },
           error: () => {
-            controller.postFailures++;
           },
         });
       }
-    }, 1000);
+    }, 10);
   }
 }
diff --git a/app/models/character.rb b/app/models/character.rb
index 1169672..8a72ccd 100644
--- a/app/models/character.rb
+++ b/app/models/character.rb
@@ -187,12 +187,12 @@ class Character < ApplicationRecord
   end
 
   def activity_time_remaining
-    time = duration_of_activity - (Time.now - self.activity_started_at)
+    time = activity_duration - (Time.now - self.activity_started_at)
     time -= rested_duration_to_spend_on_activity if self.rested_duration > 0
     time
   end
 
-  def duration_of_activity
+  def activity_duration
     return nil unless self.activity
     duration_data = self.activity.whatnot[:duration]
     duration = duration_data[:base]
@@ -209,9 +209,13 @@ class Character < ApplicationRecord
     [duration, duration_data[:minimum] || 10].max
   end
 
+  def percentage_of_activity_completed
+    (1 - (activity_time_remaining / activity_duration)) * 100
+  end
+
   def rested_duration_to_spend_on_activity
     return nil unless self.activity
-    [(duration_of_activity / 2).floor, self.rested_duration].min
+    [(activity_duration / 2).floor, self.rested_duration].min
   end
 
   def can_do_activity?(activity, ignore_cost: false, ignore_requirements: false)
diff --git a/app/views/application/_timer.html.erb b/app/views/application/_timer.html.erb
index 46b1134..f301ffc 100644
--- a/app/views/application/_timer.html.erb
+++ b/app/views/application/_timer.html.erb
@@ -1,12 +1,20 @@
 <% if current_char.activity %>
   <h2 class="text-lg text-display text-center"><%= current_char.activity.name %></h2>
   <div data-controller="timer"
-       data-timer-counter-value="<%= current_char.activity_time_remaining.ceil %>"
-       data-timer-post-url-value="<%= finish_activity_url %>"
-       class="text-center">
-    <span data-timer-target="timer" class="text-3xl"></span>
+       data-timer-time-remaining-value="<%= current_char.activity_time_remaining %>"
+       data-timer-activity-duration-value="<%= current_char.activity_duration %>"
+       data-timer-post-url-value="<%= finish_activity_url %>">
+    <div class="text-center">
+      <span data-timer-target="timer" class="text-3xl"></span>
+    </div>
+    <div class="border border-gray-800 h-4">
+      <div data-timer-target="progressBar" class="bg-gray-600 h-full"
+           style="width: <%= current_char.percentage_of_activity_completed %>%">
+      </div>
+    </div>
   </div>
 
+
   <% most_recent_cs = current_char.character_skills.order(:updated_at).last %>
   <div class="text-center text-sm">
     <div class="text-xs"><%= most_recent_cs.skill.name %> level <%= most_recent_cs.level %></div>