Complete options panel

_data/magic.yml

@@ -7,3 +7,4 @@ minDuration: 50
 splineLength: 15
 maxAngleChange: 180
 minAngleChange: 90
+randomColored: true

css/main.css

@@ -432,3 +432,52 @@ a.no-decoration:hover {
   color: #444;
   text-decoration: none;
 }
+
+/*****************************************************************************/
+/*
+/* Magic
+/*
+/*****************************************************************************/
+
+div.options-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  padding: 10px;
+  width: 100%;
+  z-index: 10;
+  height: auto;
+  background-color: rgba(140,120,100,0.75);
+  color: white;
+}
+
+div.controls-tab {
+  position: relative;
+}
+
+div.controls {
+  position: absolute;
+  top: -2.6rem;
+  right: 1rem;
+  height: 2rem;
+  padding-right: 5px;
+  padding-left: 5px;
+  background-color: rgba(140,120,100,0.75);
+}
+
+div.controls button {
+  padding: 0.25rem;
+  margin-top: 0.25rem;
+  background-color: rgb(100, 100, 100);
+  border: 1px grey solid;
+  color: white;
+  font-size: small;
+}
+
+div.options-panel form {
+  text-align: center
+}
+
+div.options-panel form label {
+  display: block;
+}

js/magic.js

@@ -31,6 +31,9 @@ var Magic = function (options) {
     // Average length of new spline (branch)
     this.splineLength = options.splineLength || 15;
 
+    // Whether new spells are cast with a new random color
+    this.randomColored = options.randomColored || true;
+
     this.paused = false;
 
     // Save this query here now that the page is loaded
@@ -174,8 +177,11 @@ Magic.prototype.cast = function(x, y, angle, chain) {
         angle = Math.random() * 360;
     }
 
+    var colorString = "rgb(10,10,10)";
+    if (this.randomColored) {
         var color = this.pickRandomColor();
-    var colorString = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
+        colorString = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
+    }
 
     // Create new spell (branch)
     this.spells.push({

magic/index.html

@@ -81,18 +81,25 @@ title: Tyler Hallada
       </div>
     </div>
     <div class="row clearfix">
-      <div class="column half">
+      <div class="column third">
         <form oninput="output.value=minAngleChange.value;updateMagic('minAngleChange', parseInt(minAngleChange.value))">
           <label for="minAngleChange">Min Angle</label>
           <input type="range" min=0 max=360 value={{site.data.magic.minAngleChange}} id="minAngleChange" step=1>
           <output name="output" for="minAngleChange">{{site.data.magic.minAngleChange}}</output>
         </form>
       </div>
-      <div class="column half">
+      <div class="column third">
         <form oninput="output.value=maxAngleChange.value;updateMagic('maxAngleChange', parseInt(maxAngleChange.value))">
           <label for="maxAngleChange">Max Angle</label>
           <input type="range" min=0 max=360 value={{site.data.magic.maxAngleChange}} id="maxAngleChange" step=1>
           <output name="output" for="maxAngleChange">{{site.data.magic.maxAngleChange}}</output>
         </form>
       </div>
+      <div class="column third">
+        <form onchange="output.value=randomColored.checked;updateMagic('randomColored', randomColored.checked)">
+          <label for="randomColored">Randomly Colored</label>
+          <input type="checkbox" {% if site.data.magic.randomColored %}checked{% endif %} id="randomColored">
+          <output name="output" for="randomColored">{{site.data.magic.randomColored}}</output>
+        </form>
+      </div>
 </div>