constant roller, better fullscreen (#118)

sitemap.json

@@ -276,6 +276,11 @@
           "route": "hourglass",
           "template": "template_hourglass.html"
         },
+        {
+          "title": "constant rolls",
+          "route": "constantrolls",
+          "template": "template_constant_rolls.html"
+        },
         {
           "title": "jaxbox",
           "route": "jaxbox",

templates/index.css

@@ -318,6 +318,16 @@ code {
     align-content: center
 }
 
+#hourglass-header {
+    width: 100%;
+}
+
+#fullscreen-btn {
+    margin-left: auto;
+    width: fit-content;
+    cursor: pointer;
+}
+
 #hourglass-form {
     width: fit-content;
     margin: 10px auto;
@@ -335,7 +345,7 @@ code {
 
 .timedisplay {
     min-width: 200px;
-    font-size: 100px;
+    font-size: 200px;
     margin-bottom: -20px;
 }
 
@@ -344,6 +354,42 @@ code {
     padding-bottom: 10px;
 }
 
+#constantrolls-dice {
+    display: grid;
+}
+
+@media (min-width: 350px) {
+  #constantrolls-dice { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (min-width: 500px) {
+  #constantrolls-dice { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (min-width: 650px) {
+  #constantrolls-dice { grid-template-columns: repeat(4, 1fr); }
+}
+
+@media (min-width: 800px) {
+  #constantrolls-dice { grid-template-columns: repeat(5, 1fr); }
+}
+
+.constantrolls-tile {
+    display: flex;
+    flex-direction: column;
+    width: 150px;
+    flex: 1;
+}
+.constantrolls-result {
+    font-size: 100px;
+    align-self: center;
+}
+.constantrolls-label {
+    font-size: 20px;
+    align-self: center;
+}
+
+/* generics */
 .v-spacer {
     height: 100%;
 }
@@ -368,3 +414,7 @@ code {
     background: var(--light-bg);
     color: var(--bg);
 }
+
+.notes {
+    font-size: 15px;
+}

templates/template_constant_rolls.html

@@ -0,0 +1,107 @@
+{% with title="purajit | tools" %}
+{% include './header.html' %}
+{% endwith %}
+<div class="page-content hourglass">
+  <div id="hourglass-header"><div id="fullscreen-btn" title="fullscreen">⛶</div></div>
+  <h1 class="writing-title">Constant roller</h1>
+  <div id="constantrolls-dice">
+    <div class="constantrolls-tile">
+      <div id="constantrolls-d2" class="constantrolls-result"></div>
+      <div class="constantrolls-label">d2</div>
+    </div>
+    <div class="constantrolls-tile">
+      <div id="constantrolls-d4" class="constantrolls-result"></div>
+      <div class="constantrolls-label">d4</div>
+    </div>
+    <div class="constantrolls-tile">
+      <div id="constantrolls-d6" class="constantrolls-result"></div>
+      <div class="constantrolls-label">d6</div>
+    </div>
+    <div class="constantrolls-tile">
+      <div id="constantrolls-d8" class="constantrolls-result"></div>
+      <div class="constantrolls-label">d8</div>
+    </div>
+    <div class="constantrolls-tile">
+      <div id="constantrolls-d10" class="constantrolls-result"></div>
+      <div class="constantrolls-label">d10</div>
+    </div>
+    <div class="constantrolls-tile">
+      <div id="constantrolls-d12" class="constantrolls-result"></div>
+      <div class="constantrolls-label">d12</div>
+    </div>
+    <div class="constantrolls-tile">
+      <div id="constantrolls-d14" class="constantrolls-result"></div>
+      <div class="constantrolls-label">d14</div>
+    </div>
+    <div class="constantrolls-tile">
+      <div id="constantrolls-d16" class="constantrolls-result"></div>
+      <div class="constantrolls-label">d16</div>
+    </div>
+    <div class="constantrolls-tile">
+      <div id="constantrolls-d20" class="constantrolls-result"></div>
+      <div class="constantrolls-label">d20</div>
+    </div>
+    <div class="constantrolls-tile">
+      <div id="constantrolls-d100" class="constantrolls-result"></div>
+      <div class="constantrolls-label">d100</div>
+    </div>
+  </div>
+  <br/><div class="notes">Hit spacebar to stop rolling</div>
+</div>
+{% include './footer.html' %}
+
+<script>
+function enterAppMode() {
+     if (document.fullscreenElement) {
+         document.exitFullscreen();
+     } else {
+         const div = document.getElementsByClassName("page-content")[0];
+         div.requestFullscreen();
+     }
+ };
+
+
+  function roll(die) {
+    return Math.floor(Math.random() * die) + 1;
+  }
+  function startRolling() {
+    return setInterval(function() {
+      document.getElementById("constantrolls-d2").textContent = roll(2);
+      document.getElementById("constantrolls-d4").textContent = roll(4);
+      document.getElementById("constantrolls-d6").textContent = roll(6);
+      document.getElementById("constantrolls-d8").textContent = roll(8);
+      document.getElementById("constantrolls-d10").textContent = roll(10);
+      document.getElementById("constantrolls-d12").textContent = roll(12);
+      document.getElementById("constantrolls-d14").textContent = roll(14);
+      document.getElementById("constantrolls-d16").textContent = roll(16);
+      document.getElementById("constantrolls-d20").textContent = roll(20);
+      document.getElementById("constantrolls-d100").textContent = roll(100);
+    }, 10);
+  }
+
+  document.getElementById("fullscreen-btn").onclick = function(e) {
+    e.preventDefault();
+    enterAppMode();
+  }
+  let timer = startRolling();
+  document.onkeydown = function(e) {
+    if (e.key == " " ||
+        e.code == "Space" ||
+        e.keyCode == 32
+       ) {
+      e.preventDefault();
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+
+  document.onkeyup = function(e) {
+    if (e.key == " " ||
+        e.code == "Space" ||
+        e.keyCode == 32
+       ) {
+      e.preventDefault();
+      timer = startRolling();
+    }
+  }
+</script>

templates/template_hourglass.html

@@ -4,6 +4,7 @@
 <audio id="hourglass-beep" src="{{ static_url }}/sounds/timer-beep.mp3" preload="auto"></audio>
 <audio id="hourglass-end" src="{{ static_url }}/sounds/timer-end.mp3" preload="auto"></audio>
 <div class="page-content hourglass">
+    <div id="hourglass-header"><div id="fullscreen-btn" title="fullscreen">⛶</div></div>
     <div id="hourglass-display" class="table no-borders">
         <div class="table-row non-alternating">
             <div class="table-column timedisplay" id="hourglass-timeleft"></div>
@@ -92,17 +93,22 @@
  }
 
  window.onload = function() {
-     document.body.onkeyup = function(e) {
+     window.onkeydown = function(e) {
          if (e.key == " " || e.code == "Space" || e.keyCode == 32) {
              e.preventDefault();
              primaryAction();
          }
      }
+
      document.getElementById("hg-control").textContent = "Start";
      document.getElementById("hourglass-timerequested").value = 180;
      document.getElementById("hourglass-timeleft").textContent = 180;
      document.getElementById("hourglass-timeelapsed").textContent = 0;
 
+     document.getElementById("fullscreen-btn").onclick = function(e) {
+         e.preventDefault();
+         enterAppMode();
+     }
      document.getElementById("hourglass-display").onclick = function(e) {
          e.preventDefault();
          primaryAction();