formatting, update text, ux

index.html

@@ -3,7 +3,7 @@
 <meta charset="UTF-8">
 <title>Role Playing Game Dices</title>
 <meta name="application-name" content="Role Playing Game Dices">
-<meta name="application-version" content="v0.2.0">
+<meta name="application-version" content="v0.2.1">
 
 <meta name="viewport" content="width=device-width,initial-scale=1">
 
@@ -80,7 +80,7 @@
                     <input type="text" id="inputText" placeholder="1D6+1 + 2W4">
                 </div>
                 <div class="actions">
-                    <button onclick="addDicesText()"><img src="./assets/plus.svg"> Add Dices</button>
+                    <button onclick="addDicesText()"><img src="./assets/plus.svg"> New Dices</button>
                     <button onclick="rollText()"><img src="./assets/roll.svg"> Roll</button>
                 </div>
 
@@ -104,7 +104,7 @@
                     <input type="color" id="inputColor">
                 </div>
                 <div class="actions">
-                    <button onclick="addDiceForm()"><img src="./assets/plus.svg"> Add Dice</button>
+                    <button onclick="addDiceForm()"><img src="./assets/plus.svg"> New Dice</button>
                     <button onclick="rollForm()"><img src="./assets/roll.svg"> Roll</button>
                 </div>
             </div>

script.js

@@ -97,7 +97,10 @@ function renderDice(dice, index) {
 
         if (dices.filter((dice) => dice.selected).length) {
             document.getElementById('roll-button').classList.remove("disabled");
+            document.getElementById('roll-add-button').classList.add("disabled");
+            if (dices.filter((dice) => dice.selected).length > 1) {
                 document.getElementById('roll-add-button').classList.remove("disabled");
+            }
         } else {
             document.getElementById('roll-button').classList.add("disabled");
             document.getElementById('roll-add-button').classList.add("disabled");
@@ -143,7 +146,10 @@ function renderDices() {
 
     if (dices.filter((dice) => dice.selected).length) {
         document.getElementById('roll-button').classList.remove("disabled");
+        document.getElementById('roll-add-button').classList.add("disabled");
+        if (dices.filter((dice) => dice.selected).length > 1) {
             document.getElementById('roll-add-button').classList.remove("disabled");
+        }
     } else {
         document.getElementById('roll-button').classList.add("disabled");
         document.getElementById('roll-add-button').classList.add("disabled");

style.css

@@ -264,7 +264,8 @@ body {
     display: grid;
     grid-template-columns: repeat(4, auto);
     width: 100%;
-    margin-top: 2em;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
     row-gap: 0.3em;
     column-gap: 0.3em;
 }

sw.js

@@ -1,4 +1,4 @@
-const rpgDicesVersion = "rpg-dices-v0.2.0"
+const rpgDicesVersion = "rpg-dices-v0.2.1"
 const assets = [
     "/",
     "/index.html",