Added advanced controls. Closes #2.

onyxfish · Mar 28, 2011 · 0bf9ffc · 0bf9ffc
1 parent d97be19
commit 0bf9ffc
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 10 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -27,20 +27,44 @@ html, body {
     margin-top: 20px;
 }
 
-#dice-controls .die {
-    width: 16%;
+#dice-controls .wrapper {
+    width: 13%;
+    float: left;
+    margin-left: 4px;
+}
+
+#dice-controls .wrapper:first-child {
+    margin-left: 0;
+}
+
+#dice-controls .wrapper .die {
+    width: 100%;
+}
+
+#dice-controls .wrapper .dec, #dice-controls .wrapper .inc {
+    width: 49%;
+    display: none;
+}
+
+#dice-controls #dn {
+    font-weight: bold;
+}
+
+#toggle-advanced {
+    width: 960px;
+    margin: 0 auto;
 }
 
 #rolling {
     margin: 0 auto;
-    margin-top: 120px;
+    margin-top: 100px;
     font-size: 48px;
     text-align: center;
 }
 
 #results {
     margin: 0 auto;
-    margin-top: 120px;
+    margin-top: 100px;
 }
 
 #results .roll {

diff --git a/assets/js/roll.js b/assets/js/roll.js
@@ -1,4 +1,28 @@
 var DICE = ['d4', 'd6', 'd8', 'd10', 'd12', 'd20'];
+var COUNTS = {'d4': 1, 'd6': 1, 'd8': 1, 'd10': 1, 'd12': 1, 'd20': 1}
+
+function show_advanced_controls() {
+    $("#dice-controls .wrapper .inc, #dice-controls .wrapper .dec").show();
+    $("#toggle-advanced").hide();
+}
+
+function increment_die_count(die) {
+    COUNTS[die] += 1;
+
+    $("button#" + die).text(COUNTS[die] + die);
+}
+
+function decrement_die_count(die) {
+    if (COUNTS[die] > 0) {
+        COUNTS[die] -= 1;
+    }
+
+    $("button#" + die).text(COUNTS[die] + die);
+}
+
+function get_die_count(die) {
+    return COUNTS[die];
+}
 
 function roll(dice) {
     $("#results").hide();

diff --git a/templates/home.html b/templates/home.html
@@ -2,12 +2,43 @@
 
 {% block content %}
 <div id="dice-controls">
-    <button id="d4" class="die" onclick="roll({'d4':1});">1d4</button>
-    <button id="d6" class="die" onclick="roll({'d6':1});">1d6</button>
-    <button id="d8" class="die" onclick="roll({'d8':1});">1d8</button>
-    <button id="d10" class="die" onclick="roll({'d10':1});">1d10</button>
-    <button id="d12" class="die" onclick="roll({'d12':1});">1d12</button>
-    <button id="d20" class="die" onclick="roll({'d20':1});">1d20</button>
+    <div class="wrapper">
+        <button id="d4" class="die" onclick="roll({'d4':get_die_count('d4')});">1d4</button><br />
+        <button class="dec" onclick="decrement_die_count('d4');">-</button>
+        <button class="inc" onclick="increment_die_count('d4');">+</button>
+    </div>
+    <div class="wrapper">
+        <button id="d6" class="die" onclick="roll({'d6':get_die_count('d6')});">1d6</button><br />
+        <button class="dec" onclick="decrement_die_count('d6');">-</button>
+        <button class="inc" onclick="increment_die_count('d6');">+</button>
+    </div>
+    <div class="wrapper">
+        <button id="d8" class="die" onclick="roll({'d8':get_die_count('d8')});">1d8</button><br />
+        <button class="dec" onclick="decrement_die_count('d8');">-</button>
+        <button class="inc" onclick="increment_die_count('d8');">+</button>
+    </div>
+    <div class="wrapper">
+        <button id="d10" class="die" onclick="roll({'d10':get_die_count('d10')});">1d10</button><br />
+        <button class="dec" onclick="decrement_die_count('d10');">-</button>
+        <button class="inc" onclick="increment_die_count('d10');">+</button>
+    </div>
+    <div class="wrapper">
+        <button id="d12" class="die" onclick="roll({'d12':get_die_count('d12')});">1d12</button><br />
+        <button class="dec" onclick="decrement_die_count('d12');">-</button>
+        <button class="inc" onclick="increment_die_count('d12');">+</button>
+    </div>
+    <div class="wrapper">
+        <button id="d20" class="die" onclick="roll({'d20':get_die_count('d20')});">1d20</button><br />
+        <button class="dec" onclick="decrement_die_count('d20');">-</button>
+        <button class="inc" onclick="increment_die_count('d20');">+</button>
+    </div>
+    <div class="wrapper">
+        <button id="dn" class="die" onclick="roll(COUNTS);">Roll all!</button><br />
+    </div>
+    <div style="clear:both;"></div>
+</div>
+<div id="toggle-advanced">
+    <a href="javascript:show_advanced_controls();">Show advanced controls</a>
 </div>
 <div id="rolling" style="display:none;">
     ...