Show roll commands

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;

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: ")";
+}

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 %>

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: