Allow updating of stats on sheet

app/assets/stylesheets/colors.css

@@ -1,4 +1,5 @@
 :root {
+  --text-color: #000;
   --background-color: #333;
   --main-background-color:
   --header-color: #15345b;

app/assets/stylesheets/forms.css

@@ -40,3 +40,17 @@ form, fieldset {
     background-color: var(--input-background);
   }
 }
+
+form.stat-form {
+  display: flex;
+  flex-direction: column;
+
+  input:disabled {
+    color: var(--text-color);
+    background-color: var(--input-background);
+  }
+
+  input[type=number]:disabled {
+    -moz-appearance: textfield;
+  }
+}

app/controllers/stats_controller.rb

@@ -3,6 +3,7 @@
 class StatsController < ApplicationController
   before_action :set_section, only: [ :new, :create ]
   before_action :set_character, only: [ :new, :create ]
+  before_action :set_stat, only: [ :update, :destroy ]
 
   def new
     @stat = @section.stats.new
@@ -15,10 +16,13 @@ class StatsController < ApplicationController
     end
   end
 
+  def update
+    @stat.update(stat_params)
+  end
+
   def destroy
-    stat = Current.user.stats.find(params[:id])
-    @id = helpers.dom_id(stat)
-    stat.destroy
+    @id = helpers.dom_id(@stat)
+    @stat.destroy
   end
 
   private
@@ -30,6 +34,10 @@ class StatsController < ApplicationController
       @section = Current.user.character_sheet_sections.find(params[:character_sheet_section_id])
     end
 
+    def set_stat
+      @stat = Current.user.stats.find(params[:id])
+    end
+
     def stat_params
       params.require(:stat).permit(
         :name,

app/javascript/controllers/stat_update_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    updateUrl: String,
+  }
+
+  connect() {
+    this.element.addEventListener("change", this.#updateValue.bind(this))
+  }
+
+  #updateValue() {
+    this.element.requestSubmit()
+  }
+}

app/views/stats/_stat.html.erb

@@ -1,7 +1,11 @@
 <div class="stat" id="<%= dom_id(stat) %>">
   <% if @editable %>
-    <%= link_to(t(".delete"), stat, data: { turbo_method: :delete, turbo_confirm: t(".confirm_delete", name: stat.name) }) %>
+    <%= link_to(t(".delete"), stat,
+                 data: { turbo_method: :delete, turbo_confirm: t(".confirm_delete", name: stat.name) }) %>
   <% end %>
   <h6><%= stat.name %></h6>
-  <input type="number" value="<%= stat.value %>" step="1">
+  <%= form_with model: stat, class: "stat-form",
+                data: { controller: "stat-update", stat_update_update_url_value: stat_path(stat) } do |f| %>
+    <%= f.number_field :value, disabled: !@editable %>
+  <% end %>
 </div>

app/views/stats/update.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace dom_id(@stat) do %>
+  <%= render @stat %>
+<% end %>

config/routes.rb

@@ -21,7 +21,7 @@ Rails.application.routes.draw do
   resources :characters do
     resources :character_sheet_sections, only: [ :index, :new, :create ]
   end
-  resources :stats, only: [ :destroy ]
+  resources :stats, only: [ :update, :destroy ]
   resources :table_invites, only: [ :index, :edit, :update ]
   resources :tables do
     resources :table_invites, only: [ :new, :create ]