From 6bf172bf474cf974542ba4104edb056b09455803 Mon Sep 17 00:00:00 2001
From: Ryan McGrath <ryan@venodesigns.net>
Date: Sun, 10 Jul 2011 04:01:14 -0400
Subject: [PATCH] Demo cleanup/enhance

---
 css/demo.css |  35 +++++++++++++--
 index.html   | 122 +++++++++++++++++++++++++++++----------------------
 2 files changed, 100 insertions(+), 57 deletions(-)

diff --git a/css/demo.css b/css/demo.css
index 3194363..76f668b 100644
--- a/css/demo.css
+++ b/css/demo.css
@@ -18,8 +18,35 @@ blockquote, q { quotes: "" ""; }
 
 html {
     color: #333;
-	font: normal 30px/34px helvetica, arial, sans-serif;
+	font: normal 24px/28px helvetica, arial, sans-serif;
 	padding: 0px;
-	text-align: center;
-    background: #f9f9f9;
-}
\ No newline at end of file
+    background: #fff;
+	overflow: hidden !important;
+}
+
+body { overflow: hidden !important; padding: 20px; }
+
+h1 { background-color: #42a2cc; color: #f9f9f9; font-size: 50px; padding: 10px; }
+
+a, a:visited { 
+	background-color: #42a2cc; 
+	color: #f9f9f9; 
+	padding: 3px 5px; 
+	text-decoration: none; 
+	display: inline-block;
+}
+
+a:hover { background-color: #147ba8; }
+
+p {
+	padding: 10px;
+	margin-bottom: 10px;
+}
+
+/*	"Players". ;) */
+.player { position: absolute; top: 740; width: 46px; height: 46px; border: 2px solid #010101; padding: 10px; }
+.player span { background-color: #f9f9f9; padding: 5px; font-weight: bold; }
+#player_1 { background-color: #ef1419; color: #ef1419; left: 500px; }
+#player_2 { background-color: #13c32c; color: #13c32c; left: 580px; }
+#player_3 { background-color: #e6d01a; color: #e6d01a; left: 660px; }
+#player_4 { background-color: #af0bb1; color: #af0bb1; left: 740px; }
\ No newline at end of file
diff --git a/index.html b/index.html
index 325207e..246265d 100644
--- a/index.html
+++ b/index.html
@@ -14,9 +14,9 @@
 	</p>
 	
 	<p>
-		This demo is really simple, and works best with two Wii remotes (Wiimotes). Hold either Wiimote #1 or #2 horizontal (sideways), and use
-		the directional pad to move the box floating in the bottom right corner around. Wiimote #1 will turn the box red and fill it with a "1",
-		and Wiimote #2 will turn the box green and fill it with a "2". Have fun! 
+		This demo is really simple, and works best with all Wii remotes (Wiimotes). Hold a Wiimote horizontal (sideways), and use
+		the directional pad to move a box floating in the bottom right corner around. Wiimote #1 is red, #2 is green, #3 is yellow, #4 is purple. 
+		Have fun! 
 	</p>
 	
 	<p>
@@ -29,69 +29,85 @@
 		- Ryan McGrath
 	</p>
 	
-    <div id="x" style="border: 5px solid #010101; position: absolute; top: 300px; left: 300px; width: 100px; height: 100px; padding: 10px; color: #010101;">x</div>
+	<div id="player_1" class="player">1</div>
+	<div id="player_2" class="player">2</div>
+	<div id="player_3" class="player">3</div>
+	<div id="player_4" class="player">4</div>
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
     <script src="js/wii.js"></script>
     <script>
         var wiimote = new Wii.Remote(1, {horizontal: true}),
             wiimote2 = new Wii.Remote(2, {horizontal: true}),
-            x = $("#x");
-
-        wiimote2.when('pressed_up', function() { 
-            x.html('2').css({
-                'background-color': 'green',
-                'top': parseInt(x[0].style.top) - 50
-            }); 
-        }); 
-        
-        wiimote2.when('pressed_down', function() { 
-            x.html('2').css({
-                'background-color': 'green',
-                'top': parseInt(x[0].style.top) + 50
-            });
-        });
-        
-        wiimote2.when('pressed_right', function() {
-            x.html('2').css({
-                'background-color': 'green',
-                'left': parseInt(x[0].style.left) + 50
-            });
-		});
-
-        wiimote2.when('pressed_left', function() {
-            x.html('2').css({
-                'background-color': 'green',
-                'left': parseInt(x[0].style.left) - 50
-            });
-        });
-
-        wiimote.when('pressed_up', function() { 
-            x.html('1').css({
-                'background-color': 'red',
-                'top': parseInt(x[0].style.top) - 50
-            }); 
-        }); 
+			wiimote3 = new Wii.Remote(3, {horizontal: true}),
+			wiimote4 = new Wii.Remote(4, {horizontal: true}),
+            p1 = $('#player_1'),
+			p2 = $('#player_2'),
+			p3 = $('#player_3'),
+			p4 = $('#player_4');
 
         wiimote.when('pressed_down', function() { 
-            x.html('1').css({
-                'background-color': 'red',
-                'top': parseInt(x[0].style.top) + 50
-            });
+            p1.css({'top': parseInt(x[0].style.top) + 50});
         });
 
         wiimote.when('pressed_right', function() {
-            x.html('1').css({
-                'background-color': 'red',
-                'left': parseInt(x[0].style.left) + 50
-            });
+        	p1.css({'left': parseInt(x[0].style.left) + 50});
+		});
+
+        wiimote.when('pressed_left', function() {
+			p1.css({'left': parseInt(x[0].style.left) - 50});
         });
 
-        wiimote.when('pressed_left', function() { 
-            x.html('1').css({
-                'background-color': 'red',
-                'left': parseInt(x[0].style.left) - 50
-            });
+        wiimote.when('pressed_up', function() { 
+            p1.css({'top': parseInt(x[0].style.top) - 50}); 
+        });
+        
+        wiimote2.when('pressed_down', function() { 
+            p2.css({'top': parseInt(x[0].style.top) + 50});
+        });
+        
+        wiimote2.when('pressed_right', function() {
+        	p2.css({'left': parseInt(x[0].style.left) + 50});
+		});
+
+        wiimote2.when('pressed_left', function() {
+			p2.css({'left': parseInt(x[0].style.left) - 50});
+        });
+
+        wiimote2.when('pressed_up', function() { 
+            p2.css({'top': parseInt(x[0].style.top) - 50}); 
+        }); 
+
+        wiimote3.when('pressed_down', function() { 
+            p3.css({'top': parseInt(x[0].style.top) + 50});
+        });
+        
+        wiimote3.when('pressed_right', function() {
+        	p3.css({'left': parseInt(x[0].style.left) + 50});
+		});
+
+        wiimote3.when('pressed_left', function() {
+			p3.css({'left': parseInt(x[0].style.left) - 50});
+        });
+
+        wiimote3.when('pressed_up', function() { 
+            p3.css({'top': parseInt(x[0].style.top) - 50}); 
+        });
+
+        wiimote4.when('pressed_down', function() { 
+            p4.css({'top': parseInt(x[0].style.top) + 50});
+        });
+        
+        wiimote4.when('pressed_right', function() {
+        	p4.css({'left': parseInt(x[0].style.left) + 50});
+		});
+
+        wiimote4.when('pressed_left', function() {
+			p4.css({'left': parseInt(x[0].style.left) - 50});
+        });
+
+        wiimote4.when('pressed_up', function() { 
+            p4.css({'top': parseInt(x[0].style.top) - 50}); 
         });
 
         Wii.listen();