From 104a0f9957cd5f448f4909d56761c380a4cad848 Mon Sep 17 00:00:00 2001
From: Jonathan Bernard <jdbernard@gmail.com>
Date: Fri, 12 Dec 2014 05:01:43 -0600
Subject: [PATCH] Continued working on a UI redesign.

---
 snake/arrow.svg           | 141 ++++++++++++++++++++++++++++++++++++++
 snake/snake-redesign.html | 129 ++++++++++++++++++++++++++++++----
 snake/snake.scss          | 100 +++++++++++++++++++++++++--
 3 files changed, 351 insertions(+), 19 deletions(-)
 create mode 100644 snake/arrow.svg

diff --git a/snake/arrow.svg b/snake/arrow.svg
new file mode 100644
index 0000000..353572e
--- /dev/null
+++ b/snake/arrow.svg
@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100"
+   height="100"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="arrow.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.83"
+     inkscape:cx="61.871531"
+     inkscape:cy="32.299483"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-global="false"
+     guidetolerance="20"
+     inkscape:window-width="1360"
+     inkscape:window-height="716"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1">
+    <sodipodi:guide
+       orientation="1,0"
+       position="10,11.696429"
+       id="guide2987" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="20,11.026786"
+       id="guide2989" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="30,8.75"
+       id="guide2991" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="40,9.3191965"
+       id="guide2993" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="50,8.8169643"
+       id="guide2995" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="60,9.5535715"
+       id="guide2997" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="70,9.4754465"
+       id="guide2999" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="80,10.602679"
+       id="guide3001" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="90,10.279018"
+       id="guide3003" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="87.175781,10"
+       id="guide3005" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="87.269531,20"
+       id="guide3007" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="87.28125,30"
+       id="guide3009" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="87.085938,40"
+       id="guide3011" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="87.136719,50"
+       id="guide3013" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="87.324219,60"
+       id="guide3015" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="87.347656,70"
+       id="guide3017" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="87.273438,80"
+       id="guide3019" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="87.167969,90"
+       id="guide3021" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-952.3609)">
+    <path
+       style="fill:#ffffff;stroke:none"
+       d="m 0,40 10,0 0,-10 10,0 0,-10 10,0 0,-10 10,0 0,-10 20,0 0,10 10,0 0,10 10,0 0,10 10,0 0,10 10,0 0,10 -30,0 0,50 -40,0 0,-50 -30,0 z"
+       id="path3873"
+       inkscape:connector-curvature="0"
+       transform="translate(0,952.3609)"
+       sodipodi:nodetypes="ccccccccccccccccccccccccc" />
+  </g>
+</svg>
diff --git a/snake/snake-redesign.html b/snake/snake-redesign.html
index bf1d9d2..0aaac85 100644
--- a/snake/snake-redesign.html
+++ b/snake/snake-redesign.html
@@ -1,28 +1,133 @@
 <!doctype html>
 <html>
     <head>
+        <meta charset=utf-8>
         <link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
         <link href="snake.css" type="text/css" rel="stylesheet">
+        <script src="snake.js" type="application/javascript"></script> 
     </head>
     <body>
         <div class=corner></div><div class=corner></div><div class=corner></div><div class=corner></div>
         <div id=container>
             <div class=corner></div><div class=corner></div><div class=corner></div><div class=corner></div>
-            <header><h1>SNAKE</h1></header>
-            <section id=description>
-                Play SNAKE! You are the <span style="color: #88F">BLUE</span>
+            <header><h1>SNAKE</h1></header><!--
+
+         --><section id=description>
+                <h4>Play SNAKE!</h4>
+                <p>You are the <span style="color: #88F">BLUE</span>
                 snake. Eat the <span style="color: green">GREEN</span> food to
                 grow longer! But be careful! Don't run into the walls or
-                yourself!
-            <section>
-            <section id=levelSelect>
-            </section>
-            <section id=gameContainer>
-            </section>
-            <section id=controls>
-            </section>
-            <section id=editorControls>
+                yourself!</p>
+            </section><!--
+
+         --><section id=levelSelect>
+                <h4>Level Select</h4>
+                <h5>Beginner</h5>
+                <ol>
+                    <li levelNum=0 class=selected>Hello Snake!</li>
+                    <li levelNum=1>Room to Grow</li>
+                    <li levelNum=2>North and South</li>
+                    <li levelNum=3>4 Small Rooms</li>
+                    <li levelNum=4>Polka Dots</li>
+                    <li levelNum=5>Toaster Face</li>
+                    <li levelNum=6>Wierd Walls</li>
+                    <li levelNum=7>Maze 1</li>
+                    <li levelNum=8>Spiral</li>
+                    <li levelNum=9>Feast and Famine</li>
+                    <li levelNum=10>Maze 2</li>
+                </ol>
+                <h5>Classic Nibbles</h5>
+            </section><!--
+
+         --><section id=gameContainer>
+                <canvas id=snakeCanvas tabIndex=1></canvas>
+            </section><!--
+
+         --><section id=controls>
+                <h4>Controls</h4>
+                <ul><li><img src="arrow.svg" class="arrow up">
+                        <img src="arrow.svg" class="arrow down">
+                        <img src="arrow.svg" class="arrow left">
+                        <img src="arrow.svg" class="arrow right">: Move </li>
+                    <li>ENTER: (Re)start.</li>
+                    <li>PAUSE: (Un)Pause</li>
+                </ul>
+            </section><!--
+
+         --><section id=options>
+            <h4>Options</h4>
+            <button>Level Editor
+                <div class=corner></div><div class=corner></div>
+                <div class=corner></div><div class=corner></div></button>
+            </section><!--
+
+         --><section id=editorControls>
+                <label>Speed</label><input type=text id=speed>
+                <label>Rows</label><input type=text id=rows>
+                <label>Columns</label><input type=text id=cols>
+                <input type=checkbox id=hasGoal><label>Winning Score</label><!--
+                 --><input type=text id=targetScore>
+                <label>Growth</label><input type=text id=growthFactor>
+                <label>Growth Increase</label><!--
+                 --><input type=text id=growthFactorIncrease>
             </section>
         </div>
+        <div class=debug-aspect>
+            <span class=wide-only>wide</span>
+            <span class=landscape-only>landscape</span>
+            <span class=even-only>even</span>
+            <span class=portrait-only>portrait</span>
+            <span class=tall-only>tall</span>
+        </div>
+        <div class=debug-size>
+            <span class=small-only>small</span>
+            <span class=medium-only>medium</span>
+            <span class=large-only>large</span>
+            <span class=ultralarge-only>ultralarge</span>
+        </div>
+
+        <script type="application/javascript">
+            var canvas = document.getElementById("snakeCanvas");
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+
+            var loadLevel = function(event) {
+                var levelEl = event.target;
+                document.querySelector("#levelSelect li.selected").className = "";
+                levelEl.className = "selected";
+                var levelNum = parseInt(levelEl.getAttribute("levelNum"));
+                Snake.initialize(levelData[levelNum]); };
+
+            var levelData = [
+                // Level 1: Hello Snake!
+                {"board":[1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,2,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1],"rows":10,"cols":10,"fps":2},
+                // Level 2: Room to Grow
+                {"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,2,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":16,"cols":16,"fps":3},
+                // Level 3: North and South
+                {"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,2,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
+                // Level 4: Four Small Rooms
+                {"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,2,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,1,1,0,1,1,1,1,1,1,1,0,1,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
+                // Level 5: Polka Dots
+                {"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,0,0,0,0,2,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,0,3,0,1,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,1,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
+                // Level 6: Toaster Face
+                {"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,0,0,0,0,0,1,1,1,0,0,1,0,1,0,0,0,1,0,1,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,0,0,1,0,0,0,0,0,1,0,0,1,1,1,0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,1,0,0,1,2,0,0,0,0,1,0,0,1,1,1,0,0,1,1,1,0,0,0,1,1,1,0,0,1,1,0,0,0,1,0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0,0,1,0,0,0,0,0,1,1,1,0,0,1,0,1,1,1,1,1,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,1,0,0,1,0,0,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
+                // Level 7: Wierd Walls
+                {"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,2,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,1,1,1,1,1,1,1,0,1,1,0,1,0,1,0,0,0,0,0,0,0,0,0,1,1,0,1,0,1,0,1,0,0,0,1,1,1,0,1,1,0,1,0,1,0,1,0,1,0,0,0,0,0,1,1,0,1,0,1,0,1,0,1,0,1,0,0,0,1,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,1,0,0,0,1,0,1,0,1,0,1,0,1,0,1,1,0,0,0,0,0,1,0,1,0,1,0,1,0,1,1,0,1,1,1,0,0,0,1,0,1,0,1,0,1,1,0,0,0,0,0,0,0,0,0,1,0,1,0,1,1,0,1,1,1,1,1,1,1,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
+                // Level 8: Maze 1
+                {"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,1,1,1,1,0,1,0,1,1,0,1,0,1,1,0,0,0,0,0,0,1,0,0,0,0,1,0,1,1,0,1,1,0,1,1,1,1,1,0,1,1,0,1,1,0,1,2,0,0,0,0,0,0,0,0,1,0,1,1,0,1,0,1,1,1,0,1,1,1,0,1,0,1,1,0,1,0,0,1,0,0,0,0,1,0,0,0,1,1,0,1,1,0,1,0,1,1,0,0,0,1,0,1,1,0,0,0,0,0,0,1,1,0,1,0,0,0,1,1,0,1,1,1,1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,1,1,1,1,1,0,0,1,1,0,1,1,1,0,1,1,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0,0,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
+                // Level 9: Spiral
+                {"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,0,0,1,1,0,1,1,1,1,1,1,1,1,0,1,0,0,1,1,0,1,0,0,0,0,0,0,1,0,1,0,0,1,1,0,1,0,1,1,1,1,0,1,0,1,0,0,1,1,0,1,0,1,3,0,1,0,1,0,1,0,0,1,1,0,1,0,1,0,0,0,0,1,0,1,0,0,1,1,0,1,0,1,0,0,0,0,0,0,1,0,0,1,1,0,1,0,1,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
+                // Level 10: Feast and Famine
+                {"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,2,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,0,3,0,3,0,3,1,1,0,0,0,0,0,0,1,0,0,3,0,3,0,1,1,0,0,0,0,0,0,1,0,3,0,3,0,3,1,1,0,0,0,0,0,0,1,0,0,3,0,3,0,1,1,0,0,0,0,0,0,0,0,3,0,3,0,3,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":15,"cols":15,"fps":3},
+                // Level 11: Maze 2
+                {"board":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0,0,0,1,0,0,0,1,0,1,1,0,1,0,1,0,1,0,0,0,1,0,1,0,0,0,1,1,0,1,0,0,1,1,0,1,1,1,0,1,1,1,0,1,1,0,1,1,0,1,1,0,0,0,1,0,0,1,0,0,1,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,1,1,1,0,0,0,1,0,0,1,1,1,0,0,0,1,0,0,1,1,0,1,0,0,1,0,0,0,0,1,1,1,1,1,0,1,1,0,0,1,0,0,0,1,1,0,1,0,0,0,0,0,1,1,1,0,1,1,1,1,1,1,0,1,0,1,1,1,1,1,1,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,1,1,0,1,1,1,1,0,0,0,0,1,1,1,1,1,0,1,1,0,1,0,0,0,1,1,1,1,0,0,0,1,0,0,1,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"rows":17,"cols":17,"fps":3}];
+
+            // Add listeners for each of the level list items.
+            var levelLis = document.querySelectorAll("#levelSelect li");
+            for (var i = 0; i < levelLis.length; ++i) {
+                levelLis[i].addEventListener("click", loadLevel); }
+
+            loadLevel({target: document.querySelector("#levelSelect li.selected")});
+        </script>
     </body>
 </html>
diff --git a/snake/snake.scss b/snake/snake.scss
index a7c3ced..9205e40 100644
--- a/snake/snake.scss
+++ b/snake/snake.scss
@@ -24,6 +24,10 @@ html {
     font-family: "Press Start 2P";
 }
 
+ol > li { margin-left: 4em; }
+#levelSelect > h5 { margin-left: 0.5rem; }
+ul { list-style: none; }
+
 .corner {
     border-style: solid;
     position: absolute;
@@ -72,7 +76,37 @@ body {
             
         header {
             text-align: center;
-            & > h1 { padding-top: 0.5rem; } } } }
+            & > h1 { padding-top: 0.5rem; } }
+            
+        section { transition: 1s; }
+        section p, section ol, section ul { margin-left: 0.5rem; }
+        section#editorControls { display: none; } }
+
+        section#levelSelect {
+            overflow: auto;
+
+            ol {
+                font-size: 80%;
+
+                li {
+                    cursor: pointer;
+                    &.selected { color: $accent2; } } } }
+
+        section#controls {
+            li { margin-top: 0.5rem; }
+
+            .arrow {
+                width: 1rem; height: 1rem;
+
+                &.right { transform: rotate(90deg); }
+                &.down { transform: rotate(180deg); }
+                &.left { transform: rotate(270deg); } } } }
+
+h2, h3, h4 {
+    color: $accent1;
+    text-decoration: underline; }
+
+h5 { color: $accent1; }
 
 button {
     background-color: $out;
@@ -110,25 +144,49 @@ button {
 
 @include forAspect(wide) {
     body {
-        width: 73rem;
+        margin-top: 2rem; 
+
         height: 37rem;
-        margin-top: 4rem; 
+        width: 73rem;
         
         #container { 
             height: 35rem;
             width: 71rem;
             
-            section { margin: 0.5rem; }
+            section {
+                display: inline-block;
+                vertical-align: top; }
             
-            section#description, section#levelSelect, section#controls {
-                width: 18rem; } } }
+            section#gameContainer {
+                width: 30rem;
+                margin-left: 20rem;
+                margin-right: 20rem; }
+
+            #snakeCanvas {
+                width: 30rem;
+                height: 30rem; }
+
+            section#description, section#levelSelect, section#controls,
+            section#options {
+                position: absolute;
+                width: 19rem; }
+                
+            section#description { left: 0.5rem; }
+            section#levelSelect { right: 0.5rem; }
+            section#controls { left: 0.5rem; top: 13.5rem; }
+            section#options { left: 0.5rem; top: 20rem; }
+            
+            section#levelSelect { height: 29rem; }
+            section#levelSelect h5 { margin-top: 1rem; } } }
+
+    
 }
 
 @include forAspect(landscape) {
     body {
         width: 73rem;
         height: 37rem;
-        margin-top: 4rem; 
+        margin-top: 2rem; 
         
         #container { 
             height: 35rem;
@@ -147,6 +205,34 @@ button {
         margin-right: auto; }
 }
 
+
+.debug-size, .debug-aspect {
+    position: fixed;
+    background: #333;
+    color: #CCC; }
+
+.debug-aspect {
+    left: 0;
+    bottom: 0; }
+
+.debug-size {
+    right: 0;
+    bottom: 0; }
+
+.small-only, .medium-only, .large-only, .ultralarge-only, .wide-only,
+.landscape-only, .even-only, .portrait-only, .tall-only {
+    display: none; }
+
+@include forSize(small) { .small-only { display: inline; } }
+@include forSize(medium) { .medium-only { display: inline; } }
+@include forSize(large) { .large-only { display: inline; } }
+@include forAspect(ultraLarge) { .ultralarge-only { display: inline; } }
+@include forAspect(wide) { .wide-only { display: inline; } }
+@include forAspect(landscape) { .landscape-only { display: inline; } }
+@include forAspect(even) { .even-only { display: inline; } }
+@include forAspect(portrait) { .portrait-only { display: inline; } }
+@include forAspect(tall) { .tall-only { display: inline; } }
+
 /* @include forSize(medium) {
     html { font-size: 80%; }
     body {