Modal stat roller
This commit is contained in:
parent
2f0e1b90b4
commit
810ebcbed3
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
||||
<body>
|
||||
<%= turbo_frame_tag :modal %>
|
||||
<header>
|
||||
<%= yield(:header_content) if content_for?(:header_content) %>
|
||||
<h1><%= link_to t("site_name"), root_path %></h1>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
success: "You have signed out."
|
||||
stats:
|
||||
show:
|
||||
roll: Roll!
|
||||
stat:
|
||||
down: Move down
|
||||
up: Move up
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
nardren:
|
||||
name: Nardren Rockseeker
|
||||
table: dnd_table
|
||||
table: table
|
||||
game_system: dnd
|
||||
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