Modal stat roller
This commit is contained in:
parent
2f0e1b90b4
commit
810ebcbed3
|
@ -45,3 +45,9 @@ form.stat-form, form.counter-form {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.feature-box form.stat-form {
|
||||||
|
display: block;
|
||||||
|
margin: 1em auto;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
|
@ -98,3 +98,53 @@ header nav {
|
||||||
hr {
|
hr {
|
||||||
width: 100%;
|
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;
|
||||||
|
}
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
class StatsController < ApplicationController
|
class StatsController < ApplicationController
|
||||||
before_action :set_section, only: [ :new, :create ]
|
before_action :set_section, only: [ :new, :create ]
|
||||||
before_action :set_character, 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
|
def new
|
||||||
@stat = @section.stats.new
|
@stat = @section.stats.new
|
||||||
|
@ -18,8 +18,11 @@ class StatsController < ApplicationController
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def show
|
||||||
|
end
|
||||||
|
|
||||||
def update
|
def update
|
||||||
@editable = true
|
@editable = ActiveModel::Type::Boolean.new.cast(params[:editable])
|
||||||
@stat.update(stat_params)
|
@stat.update(stat_params)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
|
|
@ -9,8 +9,8 @@ module ApplicationHelper
|
||||||
end
|
end
|
||||||
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
|
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
|
||||||
end
|
end
|
||||||
|
|
|
@ -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 = ""
|
||||||
|
}
|
||||||
|
}
|
|
@ -13,6 +13,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<%= turbo_frame_tag :modal %>
|
||||||
<header>
|
<header>
|
||||||
<%= yield(:header_content) if content_for?(:header_content) %>
|
<%= yield(:header_content) if content_for?(:header_content) %>
|
||||||
<h1><%= link_to t("site_name"), root_path %></h1>
|
<h1><%= link_to t("site_name"), root_path %></h1>
|
||||||
|
|
|
@ -12,16 +12,12 @@
|
||||||
<h6><%= stat.name %></h6>
|
<h6><%= stat.name %></h6>
|
||||||
<% if @editable %>
|
<% if @editable %>
|
||||||
<%= form_with model: stat, class: "stat-form", data: { controller: "auto-update" } do |f| %>
|
<%= form_with model: stat, class: "stat-form", data: { controller: "auto-update" } do |f| %>
|
||||||
|
<%= hidden_field_tag :editable, value: true %>
|
||||||
<%= f.number_field :value %>
|
<%= f.number_field :value %>
|
||||||
<% end %>
|
<% 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 %>
|
<% else %>
|
||||||
|
<%= link_to stat, data: { turbo_frame: :modal } do %>
|
||||||
<div class="stat-value"><%= stat.value %></div>
|
<div class="stat-value"><%= stat.value %></div>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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 %>
|
|
@ -145,6 +145,8 @@ en:
|
||||||
log_out: Log out
|
log_out: Log out
|
||||||
success: "You have signed out."
|
success: "You have signed out."
|
||||||
stats:
|
stats:
|
||||||
|
show:
|
||||||
|
roll: Roll!
|
||||||
stat:
|
stat:
|
||||||
down: Move down
|
down: Move down
|
||||||
up: Move up
|
up: Move up
|
||||||
|
|
|
@ -30,7 +30,7 @@ Rails.application.routes.draw do
|
||||||
resources :character_sheet_sections, only: [ :index, :new, :create ]
|
resources :character_sheet_sections, only: [ :index, :new, :create ]
|
||||||
end
|
end
|
||||||
resources :counters, only: [ :update, :destroy ]
|
resources :counters, only: [ :update, :destroy ]
|
||||||
resources :stats, only: [ :update, :destroy ]
|
resources :stats, only: [ :show, :update, :destroy ]
|
||||||
resources :table_invites, only: [ :index, :edit, :update ]
|
resources :table_invites, only: [ :index, :edit, :update ]
|
||||||
resources :tables do
|
resources :tables do
|
||||||
resources :characters, only: [] do
|
resources :characters, only: [] do
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
nardren:
|
nardren:
|
||||||
name: Nardren Rockseeker
|
name: Nardren Rockseeker
|
||||||
table: dnd_table
|
table: table
|
||||||
game_system: dnd
|
game_system: dnd
|
||||||
user: trevor
|
user: trevor
|
||||||
|
|
|
@ -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
|
Loading…
Reference in New Issue