Modal stat roller

app/assets/stylesheets/colors.css

@@ -6,6 +6,7 @@
   --header-text-color: #fff;
   --header-height: 200px;
 
+  --shadow-color: #999;
   --secondary-text-color: #777;
 
   --inset-bg-color: #eee;

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;
+}

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;
+}

app/assets/stylesheets/notifications.css

@@ -1,10 +1,12 @@
 #table-notifications {
+  z-index: 1000;
   position: fixed;
   width: 60em;
   max-width: 80%;
   top: 1em; left: 0;
   transform: translate(calc(50vw - 50%));
   li {
+    box-shadow: 5px 5px 15px var(--shadow-color);
     background-color: var(--notification-bg-color);
     list-style-type: none;
     padding: .5em;

app/assets/stylesheets/tables.css

@@ -23,7 +23,7 @@
     }
     a:link.active, a:visited.active {
       display: inline-block;
-  z-index: 1000;
+      z-index: 500;
       border-bottom: none;
     }
   }

app/controllers/dice_rolls_controller.rb

@@ -7,9 +7,11 @@ class DiceRollsController < ApplicationController
     rollable = dice_roll_params[:rollable_type].constantize.find(dice_roll_params[:rollable_id])
     return head :bad_request if rollable.roll_command.blank?
 
+    roller = DiceRoller.new(rollable.roll_command, stat: rollable)
     @table.dice_rolls.create!(
       rollable:,
-      result: DiceRoller.new(rollable.roll_command, stat: rollable).roll,
+      result: roller.roll,
+      dice: roller.dice,
     )
     head :ok
   end

app/controllers/sessions_controller.rb

@@ -15,7 +15,7 @@ class SessionsController < ApplicationController
       session[:user_id] = Current.user.id
       flash[:notice] = t(".success", name: Current.user.first_name)
       redirect_to :root
-    elsif !Current.user.verified?
+    elsif Current.user && !Current.user.verified?
       flash[:alert] = t(".not_verified")
       render :new, status: :unprocessable_entity
     else

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
 

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

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 = ""
+  }
+}

app/models/dice_roll.rb

@@ -14,6 +14,15 @@ class DiceRoll < ApplicationRecord
   end
 
   def display_text
-    "#{rollable.character.name} rolled #{rollable.name}: <strong>#{result}</strong>".html_safe
+    text = <<~TEXT
+      #{rollable.character.name} rolled #{rollable.name}:
+      <strong>#{result}</strong>
+      (#{dice_text})
+    TEXT
+    text.html_safe
+  end
+
+  def dice_text
+    dice.map { |d| "D#{d[0]}: #{d[1]}" }.join(", ")
   end
 end

app/models/stat.rb

@@ -15,8 +15,9 @@ class Stat < ApplicationRecord
   validate :validate_roll_command
 
   def roll(table)
-    result = DiceRoller.new(roll_command, stat: self).roll
+    roller = DiceRoller.new(roll_command, stat: self)
-    dice_rolls.create(result:, table:)
+    result = roller.roll
+    dice_rolls.create(result: roller.roll, table:, dice: roller.dice)
     result
   end
 

app/services/dice_roller.rb

@@ -1,9 +1,13 @@
 # frozen_string_literal: true
 
 class DiceRoller
+  attr_reader :dice
+  attr_reader :result
+
   def initialize(roll_command, stat: nil)
     @roll_command = roll_command
     @stat = stat&.value
+    @dice = []
   end
 
   def roll
@@ -59,7 +63,9 @@ class DiceRoller
 
       result = 0
       dice_number.times do
-        result += rand(1..die_type.to_i)
+        roll = rand(1..die_type.to_i)
+        result += roll
+        dice << [ die_type, result ]
       end
       result
     end

app/views/layouts/application.html.erb

@@ -13,6 +13,7 @@
   </head>
 
   <body>
+    <%= turbo_frame_tag :modal %>
     <header>
       <%= yield(:header_content) if content_for?(:header_content) %>
       <h1><%= link_to t("site_name"), root_path %></h1>

app/views/stats/_stat.html.erb

@@ -12,16 +12,12 @@
   <h6><%= stat.name %></h6>
   <% 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 %>
-      <div class="stat-value" data-action="click->dice-roll#rollDice"><%= stat.value %></div>
-    <% end %>
   <% else %>
-    <div class="stat-value"><%= stat.value %></div>
+    <%= link_to stat, data: { turbo_frame: :modal } do %>
+      <div class="stat-value"><%= stat.value %></div>
+    <% end %>
   <% end %>
 </div>

app/views/stats/show.html.erb

@@ -0,0 +1,16 @@
+<%= turbo_frame_tag :modal do %>
+  <div class="feature-box stat">
+    <%= icon_link_to "fa-close", table_character_character_sheet_sections_path(@stat.character.table, @stat.character),
+          class: "icon-link" %>
+    <h2><%= @stat.name %></h2>
+    <%= 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 %>
+  </div>
+<% end %>

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

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

db/migrate/20240619190424_add_parts_to_dice_rolls.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddPartsToDiceRolls < ActiveRecord::Migration[7.1]
+  def change
+    add_column :dice_rolls, :dice, :jsonb, null: false, default: {}
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.1].define(version: 2024_06_17_151532) do
+ActiveRecord::Schema[7.1].define(version: 2024_06_19_190424) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
 
@@ -103,6 +103,7 @@ ActiveRecord::Schema[7.1].define(version: 2024_06_17_151532) do
     t.integer "result", null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.jsonb "dice", default: {}, null: false
     t.index ["rollable_type", "rollable_id"], name: "index_dice_rolls_on_rollable"
     t.index ["table_id"], name: "index_dice_rolls_on_table_id"
   end

test/fixtures/characters.yml

@@ -1,5 +1,5 @@
 nardren:
   name: Nardren Rockseeker
-  table: dnd_table
+  table: table
   game_system: dnd
   user: trevor

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

todo.md

@@ -1,4 +1,3 @@
-- set up email in prod
 - request invite
 - don't move down/up top/bottom features
 - auto save text fields