diff --git a/app/assets/stylesheets/forms.css b/app/assets/stylesheets/forms.css
index 79e2090..6885b73 100644
--- a/app/assets/stylesheets/forms.css
+++ b/app/assets/stylesheets/forms.css
@@ -45,3 +45,9 @@ form.stat-form, form.counter-form {
display: flex;
flex-direction: column;
}
+
+.feature-box form.stat-form {
+ display: block;
+ margin: 1em auto;
+ width: fit-content;
+}
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index 42a3a60..9c1425c 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -98,3 +98,53 @@ header nav {
hr {
width: 100%;
}
+
+#modal:empty {
+ display: none;
+}
+
+#modal {
+ position: fixed;
+ background-color: rgba(0,0,0,0.8);
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 5000;
+}
+
+#modal div {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 80vw;
+ max-width: 800px;
+ min-width: 200px;
+ max-height: 800px;
+ min-height: 400px;
+ padding: 1em;
+ word-break: break-word;
+ border-radius: var(--border-radius);
+ background-color: var(--inset-bg-color);
+}
+
+.feature-box h2 {
+ text-align: center;
+}
+
+.nf {
+ color: var(--text-color);
+}
+
+.roll-button {
+ border-radius: var(--border-radius);
+ scale: 1.4;
+ cursor: pointer;
+ box-shadow: 0 0 5px var(--shadow-color);
+}
+
+.roll-button::before {
+ content: "YO";
+ background-color: red;
+}
diff --git a/app/controllers/stats_controller.rb b/app/controllers/stats_controller.rb
index 24a8691..3c421b7 100644
--- a/app/controllers/stats_controller.rb
+++ b/app/controllers/stats_controller.rb
@@ -3,7 +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 ]
+ before_action :set_stat, only: [ :show, :update, :destroy ]
def new
@stat = @section.stats.new
@@ -18,8 +18,11 @@ class StatsController < ApplicationController
end
end
+ def show
+ end
+
def update
- @editable = true
+ @editable = ActiveModel::Type::Boolean.new.cast(params[:editable])
@stat.update(stat_params)
end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 7018ae7..4cb1c9f 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -9,8 +9,8 @@ module ApplicationHelper
end
end
- def icon_link_to(icon_name, path, data: {})
+ def icon_link_to(icon_name, path, data: {}, class: "")
icon = content_tag(:i, nil, class: "nf nf-#{icon_name}").html_safe
- link_to icon, path, data: data
+ link_to icon, path, data:, class:
end
end
diff --git a/app/javascript/controllers/modal_closer_controller.js b/app/javascript/controllers/modal_closer_controller.js
new file mode 100644
index 0000000..d16a378
--- /dev/null
+++ b/app/javascript/controllers/modal_closer_controller.js
@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="modal-closer"
+export default class extends Controller {
+ closeModal() {
+ const modal = document.getElementById("modal")
+ modal.innerHTML = ""
+ }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index f8210bf..ebe91eb 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -13,6 +13,7 @@
+ <%= turbo_frame_tag :modal %>
<%= yield(:header_content) if content_for?(:header_content) %>
<%= link_to t("site_name"), root_path %>
diff --git a/app/views/stats/_stat.html.erb b/app/views/stats/_stat.html.erb
index d5a7f2c..a1a34da 100644
--- a/app/views/stats/_stat.html.erb
+++ b/app/views/stats/_stat.html.erb
@@ -12,16 +12,12 @@
<%= stat.name %>
<% if @editable %>
<%= form_with model: stat, class: "stat-form", data: { controller: "auto-update" } do |f| %>
+ <%= hidden_field_tag :editable, value: true %>
<%= f.number_field :value %>
<% end %>
- <% elsif stat.roll_command.present? %>
- <%= form_with model: DiceRoll.new, url: table_dice_rolls_path(stat.character.table), class: "stat-form",
- data: { controller: "dice-roll" } do |f| %>
- <%= f.hidden_field :rollable_type, value: "Stat" %>
- <%= f.hidden_field :rollable_id, value: stat.id %>
- <%= stat.value %>
- <% end %>
<% else %>
- <%= stat.value %>
+ <%= link_to stat, data: { turbo_frame: :modal } do %>
+ <%= stat.value %>
+ <% end %>
<% end %>
diff --git a/app/views/stats/show.html.erb b/app/views/stats/show.html.erb
new file mode 100644
index 0000000..4a1d3cb
--- /dev/null
+++ b/app/views/stats/show.html.erb
@@ -0,0 +1,16 @@
+<%= turbo_frame_tag :modal do %>
+
+ <%= icon_link_to "fa-close", table_character_character_sheet_sections_path(@stat.character.table, @stat.character),
+ class: "icon-link" %>
+
<%= @stat.name %>
+ <%= form_with model: @stat, class: "stat-form", data: { controller: "auto-update" } do |f| %>
+ <%= f.number_field :value %>
+ <% end %>
+ <%= form_with model: DiceRoll.new, url: table_dice_rolls_path(@stat.character.table), class: "stat-form",
+ data: { controller: "dice-roll modal-closer", action: "modal-closer#closeModal" } do |f| %>
+ <%= f.hidden_field :rollable_type, value: "Stat" %>
+ <%= f.hidden_field :rollable_id, value: @stat.id %>
+ <%= f.submit "#{t(".roll")}".html_safe, class: "roll-button" %>
+ <% end %>
+
+<% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 869fa5f..e80e249 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -145,6 +145,8 @@ en:
log_out: Log out
success: "You have signed out."
stats:
+ show:
+ roll: Roll!
stat:
down: Move down
up: Move up
diff --git a/config/routes.rb b/config/routes.rb
index 1f3cb0e..9c32de6 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -30,7 +30,7 @@ Rails.application.routes.draw do
resources :character_sheet_sections, only: [ :index, :new, :create ]
end
resources :counters, only: [ :update, :destroy ]
- resources :stats, only: [ :update, :destroy ]
+ resources :stats, only: [ :show, :update, :destroy ]
resources :table_invites, only: [ :index, :edit, :update ]
resources :tables do
resources :characters, only: [] do
diff --git a/test/fixtures/characters.yml b/test/fixtures/characters.yml
index 07de6ce..d1ad42b 100644
--- a/test/fixtures/characters.yml
+++ b/test/fixtures/characters.yml
@@ -1,5 +1,5 @@
nardren:
name: Nardren Rockseeker
- table: dnd_table
+ table: table
game_system: dnd
user: trevor
diff --git a/test/system/dice_rolling_modal_test.rb b/test/system/dice_rolling_modal_test.rb
new file mode 100644
index 0000000..4ce2459
--- /dev/null
+++ b/test/system/dice_rolling_modal_test.rb
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require "application_system_test_case"
+
+class CharacterSheetTest < ApplicationSystemTestCase
+ test "can roll dice on a character sheet" do
+ system_sign_in users(:trevor)
+
+ character = characters(:nardren)
+ visit table_character_character_sheet_sections_path(tables(:table), character)
+
+ assert_no_css ".feature-box"
+ first(".stat-value").click
+ assert_css ".feature-box"
+
+ click_button I18n.t("stats.show.roll")
+ assert_text "rolled"
+ assert_no_css ".feature-box"
+ end
+end