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