Display costs and requirements for selected activity in select fields via Stimulus + fetch

5 files changed, 38 insertions, 9 deletions

diff --git a/app/controllers/activities_controller.rb b/app/controllers/activities_controller.rb
index 2f9e9a5..d4ecc65 100644
--- a/app/controllers/activities_controller.rb
+++ b/app/controllers/activities_controller.rb
@@ -11,4 +11,9 @@ class ActivitiesController < ApplicationController
     @activity = Activity.find(params[:id])
     start_activity(@activity)
   end
+
+  def costs_and_requirements
+    @activity = Activity.find(params[:id])
+    render partial: "activities/costs_and_requirements"
+  end
 end
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index fc38d15..607fe6e 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -21,10 +21,8 @@ class ApplicationController < ActionController::Base
       if current_char.start_activity(activity, queued_actions: queued_actions)
         redirect_to character_path(current_char)
       else
-        message = "You can't do that."
-        message += " (requires #{activity.requirements&.join(", ")})" if activity.requirements.any?
-        message += " (costs #{activity.costs&.join(", ")})" if activity.costs.any?
-        flash[:alert] = message
+        message = "You can't do that. Check the costs and requirements."
+        flash[:alert] = message.strip
         redirect_back(fallback_location: character_path(current_char))
       end
     end
diff --git a/app/javascript/controllers/activity_select_controller.js b/app/javascript/controllers/activity_select_controller.js
new file mode 100644
index 0000000..2acfcdd
--- /dev/null
+++ b/app/javascript/controllers/activity_select_controller.js
@@ -0,0 +1,17 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = [ "select", "output" ];
+
+  connect() {
+    this.load();
+  }
+
+  load() {
+    fetch(`/activities/${this.selectTarget.value}/costs_and_requirements`)
+      .then(response => response.text())
+      .then(html => {
+        this.outputTarget.innerHTML = html;
+      });
+  }
+}
diff --git a/app/views/activities/_costs_and_requirements.html.erb b/app/views/activities/_costs_and_requirements.html.erb
new file mode 100644
index 0000000..6ae66bb
--- /dev/null
+++ b/app/views/activities/_costs_and_requirements.html.erb
@@ -0,0 +1,5 @@
+<div class="text-sm border border-2 border-gray-700 rounded p-2 w-full">
+  <%= @text %>
+  <p>Costs:<strong> <%= @activity.costs&.join(", ") || "None" %></strong> </p>
+  <p>Requires:<strong> <%= @activity.requirements&.join(", ") || "None" %></strong> </p>
+</div>
diff --git a/app/views/characters/hearth/index.html.erb b/app/views/characters/hearth/index.html.erb
index ee5b07d..1ad2726 100644
--- a/app/views/characters/hearth/index.html.erb
+++ b/app/views/characters/hearth/index.html.erb
@@ -15,11 +15,15 @@
           <p class="mb-2">Level <%= built_amenity.level %></p>
           <p class="mb-2"><%= ha.description %></p>
           <% if @amenity_activities[ha.gid.to_sym] %>
-            <%= form_with url: start_activity_path, method: :post do |f| %>
-              <%= f.select :id, @amenity_activities[ha.gid.to_sym].sort_by { |a| a.name }.map { |a| [a.name, a.id] } %>
-              <%= f.number_field :actions, value: 1, size: 5, min: 1, max: 2_000_000_000 %>
-              <%= f.submit "Go" %>
-            <% end %>
+            <div data-controller="activity-select">
+              <%= form_with url: start_activity_path, method: :post do |f| %>
+                <%= f.select :id, @amenity_activities[ha.gid.to_sym].sort_by { |a| a.name }.map { |a| [a.name, a.id] },
+                             {}, { data: { activity_select_target: "select", action: "activity-select#load" } } %>
+                <%= f.number_field :actions, value: 1, size: 5, min: 1, max: 2_000_000_000 %>
+                <%= f.submit "Go" %>
+              <% end %>
+              <div data-activity-select-target="output" class="my-1"></div>
+            </div>
           <% end %>
           <% if built_amenity.usable? %>
             <% if built_amenity.on_cooldown? %>