From e4a896a37588e43bdfe976d03e5a6a279181284e Mon Sep 17 00:00:00 2001
From: Trevor Vallender <trevor@tsvallender.co.uk>
Date: Thu, 27 Jun 2024 09:33:46 +0100
Subject: [PATCH] Show roll commands

---
 app/assets/stylesheets/forms.css  |  5 +++++
 app/assets/stylesheets/layout.css | 14 +++++++++++++-
 app/views/stats/show.html.erb     |  5 ++++-
 config/locales/en.yml             |  2 +-
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/forms.css b/app/assets/stylesheets/forms.css
index 16706ca..2e9620c 100644
--- a/app/assets/stylesheets/forms.css
+++ b/app/assets/stylesheets/forms.css
@@ -67,7 +67,12 @@ form.stat-form {
 }
 
 .inline {
+  display: flex;
   padding: .5em;
+  align-items: center;
+  label {
+    min-width: fit-content;
+  }
   input {
     padding: .2em;
     height: auto;
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index f1db3ca..b8e6d40 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -143,7 +143,19 @@ hr {
 
 .roll-button {
   border-radius: var(--border-radius);
-  scale: 1.4;
+  margin: .5em;
   cursor: pointer;
   box-shadow: 0 0 5px var(--shadow-color);
 }
+
+.roll-command-display {
+  min-width: fit-content;
+  font-size: .8em;
+}
+
+.roll-command-display:before {
+  content: "(";
+}
+.roll-command-display:after {
+  content: ")";
+}
diff --git a/app/views/stats/show.html.erb b/app/views/stats/show.html.erb
index a98f7ef..7fd3db4 100644
--- a/app/views/stats/show.html.erb
+++ b/app/views/stats/show.html.erb
@@ -17,14 +17,17 @@
         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 %>
+        <div class="inline">
         <%= f.submit "#{t(".roll")}".html_safe, class: "roll-button" %>
+        <div class="roll-command-display"><%= @stat.roll_command %></div>
+        </div>
       <% end %>
       <% @stat.dice_roll_types.each do |dice_roll_type| %>
         <%= 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: "DiceRollType" %>
           <%= f.hidden_field :rollable_id, value: dice_roll_type.id %>
-          <%= f.submit "#{t(".roll_type", name: dice_roll_type.name)}".html_safe, class: "roll-button" %>
+          <%= f.submit "#{t(".roll_type_html", name: dice_roll_type.name, command: dice_roll_type.roll_command)}".html_safe, class: "roll-button" %>
         <% end %>
       <% end %>
     <% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index cddf393..9e26ec3 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -140,7 +140,7 @@ en:
   stats:
     show:
       roll: Roll!
-      roll_type: Roll %{name}!
+      roll_type_html: Roll %{name}! <br> <small>%{command}</small>
       min_allowed: Min
       max_allowed: Max
     stat: