From 3671e5c7fc7e4ad5ed0bf3fd0a7ef5209d7f6824 Mon Sep 17 00:00:00 2001
From: Tyler Hallada <tyler@hallada.net>
Date: Sun, 11 Jan 2015 15:13:07 -0500
Subject: [PATCH] Complete options panel

---
 _data/magic.yml  |  1 +
 css/main.css     | 49 ++++++++++++++++++++++++++++++++++++++++++++++++
 js/magic.js      | 10 ++++++++--
 magic/index.html | 11 +++++++++--
 4 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/_data/magic.yml b/_data/magic.yml
index 1741e63..d336a87 100644
--- a/_data/magic.yml
+++ b/_data/magic.yml
@@ -7,3 +7,4 @@ minDuration: 50
 splineLength: 15
 maxAngleChange: 180
 minAngleChange: 90
+randomColored: true
diff --git a/css/main.css b/css/main.css
index 6c88606..a2e6397 100755
--- a/css/main.css
+++ b/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;
+}
diff --git a/js/magic.js b/js/magic.js
index f7971af..fa91f54 100644
--- a/js/magic.js
+++ b/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 color = this.pickRandomColor();
-    var colorString = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
+    var colorString = "rgb(10,10,10)";
+    if (this.randomColored) {
+        var color = this.pickRandomColor();
+        colorString = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
+    }
 
     // Create new spell (branch)
     this.spells.push({
diff --git a/magic/index.html b/magic/index.html
index 58974f1..937cad7 100644
--- a/magic/index.html
+++ b/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>