keyboard, stones demo

8 files changed, 257 insertions, 5 deletions

diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js
index 1063d80..24a66a5 100644
--- a/assets/javascripts/rectangles/_env.js
+++ b/assets/javascripts/rectangles/_env.js
@@ -34,11 +34,16 @@ environment.init = function(){
 		rect: new rect(400,200, 700,400),
 		height: 400,
 	}))
-
+	
 	builder.init()
 	clipper.init()
 	window.scene && scene.update()
 	environment.update()
+
+	if (window.location.href.match(/stone/)) {
+		$(".face").css("background","url(http://i.asdf.us/im/4a/_1398144847_frankhats.gif)")
+		$("#map").hide()
+	}
 }
 environment.update = function(t){
 	if (window.scene && scene.camera) {
diff --git a/assets/javascripts/rectangles/map/_map.js b/assets/javascripts/rectangles/map/_map.js
index 20db8fc..2815b89 100644
--- a/assets/javascripts/rectangles/map/_map.js
+++ b/assets/javascripts/rectangles/map/_map.js
@@ -5,6 +5,7 @@ window.ctx = window.w = window.h = null;
 
 var map = new function(){
 	var base = this
+	base.el = document.querySelector("#map")
 	base.dimensions = new vec2(500,500)
 	base.bounds = new vec2(500,500)
 	base.center = new vec2(0,0)
@@ -26,5 +27,9 @@ var map = new function(){
 	base.update = function(){
 		base.draw.animate()
 	}
+	
+	base.toggle = function(){
+		$(base.el).toggle()
+	}
 
 }
diff --git a/assets/javascripts/rectangles/map/draw.js b/assets/javascripts/rectangles/map/draw.js
index 518c160..cfa99d4 100644
--- a/assets/javascripts/rectangles/map/draw.js
+++ b/assets/javascripts/rectangles/map/draw.js
@@ -8,7 +8,7 @@ map.draw = new function(){
 		map.draw.clear_canvas()
 		map.draw.ruler()
 
-		ctx.translate( map.bounds.a * 1/2,  map.bounds.b * 1/2)
+		ctx.translate( map.bounds.a * 1/2, map.bounds.b * 1/2)
 		ctx.scale( map.zoom, map.zoom )
 		ctx.translate( map.center.a,  map.center.b)
 		ctx.scale( -1, 1 )
diff --git a/assets/javascripts/rectangles/map/ui.js b/assets/javascripts/rectangles/map/ui.js
index 129ec90..10496e3 100644
--- a/assets/javascripts/rectangles/map/ui.js
+++ b/assets/javascripts/rectangles/map/ui.js
@@ -2,12 +2,11 @@
 map.ui = new function(){
 
 	var base = this
-	base.el = document.querySelector("#map")
 
 	base.creating = base.dragging = false
 
 	base.mouse = new mouse({
-		el: base.el,
+		el: map.el,
 		down: down,
 		move: move,
 		drag: drag,
@@ -16,7 +15,7 @@ map.ui = new function(){
 	})
 
 	base.wheel = new wheel({
-		el: base.el,
+		el: map.el,
 		update: mousewheel,
 	})
 	
diff --git a/assets/javascripts/rectangles/util/keys.js b/assets/javascripts/rectangles/util/keys.js
new file mode 100644
index 0000000..7c437a1
--- /dev/null
+++ b/assets/javascripts/rectangles/util/keys.js
@@ -0,0 +1,154 @@
+var keys = (function(){
+	var base = new function(){}
+	base.tube = new Tube ()
+
+	$(window).keydown(function(e){
+		var key = KEY_NAMES[e.keyCode];
+		switch (key) {
+			case undefined:
+				break;
+			default:
+				console.log(key)
+				break;
+		}
+	})
+	var KEYMAP = {
+		STRG: 17,
+		CTRL: 17,
+		CTRLRIGHT: 18,
+		CTRLR: 18,
+		SHIFT: 16,
+		RETURN: 13,
+		ENTER: 13,
+		BACKSPACE: 8,
+		BCKSP:8,
+		ALT: 18,
+		ALTR: 17,
+		ALTRIGHT: 17,
+		SPACE: 32,
+		WIN: 91,
+		MAC: 91,
+		FN: null,
+		UP: 38,
+		DOWN: 40,
+		LEFT: 37,
+		RIGHT: 39,
+		ESC: 27,
+		DEL: 46,
+		F1: 112,
+		F2: 113,
+		F3: 114,
+		F4: 115,
+		F5: 116,
+		F6: 117,
+		F7: 118,
+		F8: 119,
+		F9: 120,
+		F10: 121,
+		F11: 122,
+		F12: 123
+	},
+	KEYCODES = {
+		'backspace' : '8',
+		'tab' : '9',
+		'enter' : '13',
+		'shift' : '16',
+		'ctrl' : '17',
+		'alt' : '18',
+		'pause_break' : '19',
+		'caps_lock' : '20',
+		'escape' : '27',
+		'page_up' : '33',
+		'page down' : '34',
+		'end' : '35',
+		'home' : '36',
+		'left_arrow' : '37',
+		'up_arrow' : '38',
+		'right_arrow' : '39',
+		'down_arrow' : '40',
+		'insert' : '45',
+		'delete' : '46',
+		'0' : '48',
+		'1' : '49',
+		'2' : '50',
+		'3' : '51',
+		'4' : '52',
+		'5' : '53',
+		'6' : '54',
+		'7' : '55',
+		'8' : '56',
+		'9' : '57',
+		'a' : '65',
+		'b' : '66',
+		'c' : '67',
+		'd' : '68',
+		'e' : '69',
+		'f' : '70',
+		'g' : '71',
+		'h' : '72',
+		'i' : '73',
+		'j' : '74',
+		'k' : '75',
+		'l' : '76',
+		'm' : '77',
+		'n' : '78',
+		'o' : '79',
+		'p' : '80',
+		'q' : '81',
+		'r' : '82',
+		's' : '83',
+		't' : '84',
+		'u' : '85',
+		'v' : '86',
+		'w' : '87',
+		'x' : '88',
+		'y' : '89',
+		'z' : '90',
+		'left_window key' : '91',
+		'right_window key' : '92',
+		'select_key' : '93',
+		'numpad 0' : '96',
+		'numpad 1' : '97',
+		'numpad 2' : '98',
+		'numpad 3' : '99',
+		'numpad 4' : '100',
+		'numpad 5' : '101',
+		'numpad 6' : '102',
+		'numpad 7' : '103',
+		'numpad 8' : '104',
+		'numpad 9' : '105',
+		'multiply' : '106',
+		'add' : '107',
+		'subtract' : '109',
+		'decimal point' : '110',
+		'divide' : '111',
+		'f1' : '112',
+		'f2' : '113',
+		'f3' : '114',
+		'f4' : '115',
+		'f5' : '116',
+		'f6' : '117',
+		'f7' : '118',
+		'f8' : '119',
+		'f9' : '120',
+		'f10' : '121',
+		'f11' : '122',
+		'f12' : '123',
+		'num_lock' : '144',
+		'scroll_lock' : '145',
+		'semi_colon' : '186',
+		'equal_sign' : '187',
+		'comma' : '188',
+		'dash' : '189',
+		'period' : '190',
+		'forward_slash' : '191',
+		'grave_accent' : '192',
+		'open_bracket' : '219',
+		'backslash' : '220',
+		'closebracket' : '221',
+		'single_quote' : '222'
+	}
+	var KEY_NAMES = invert_hash(KEYCODES)
+	
+	return base
+})()
\ No newline at end of file
diff --git a/assets/javascripts/util.js b/assets/javascripts/util.js
index c56131d..8a0e5ba 100644
--- a/assets/javascripts/util.js
+++ b/assets/javascripts/util.js
@@ -148,3 +148,10 @@ function smarten(a) {
   a = a.replace(/--/g, "\u2014");                           // em-dashes
   return a
 };
+
+function invert_hash (h) {
+	var k = {}
+	for (var i in h) { if (h.hasOwnProperty(i)) k[h[i]] = i }
+	return k
+}
+
diff --git a/rectangles-stone.html b/rectangles-stone.html
new file mode 100644
index 0000000..e43592f
--- /dev/null
+++ b/rectangles-stone.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+<head>
+	<link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css">
+<style type="text/css">
+body { background: #fff; }
+body > div {
+	float: left;
+}
+#info {
+	padding: 30px;
+}
+#hud {
+	position: absolute;
+	top:0;left:0;
+	z-index: 10;
+}
+.face {
+	background-color: #fff;
+}
+.front { background-color: #ddd; }
+.back  { background-color: #bbb; }
+.left  { background-color: #aaa; }
+.right { background-color: #888; }
+#map canvas {
+	border-bottom: 2px solid #ddd;
+	border-right: 2px solid #ddd;
+}
+</style>
+</head>
+<body>
+	<div id="bg"></div>
+	<div id="scene"></div>
+
+	<div id="hud">
+		<div id="map" style="display: block">
+		</div>
+
+		<div id="info">
+			<select id="palette">
+				<option>colors</option>
+				<option>redblue</option>
+				<option>gray</option>
+				<option selected>alpha</option>
+			</select>
+			<div id="intersects"></div>
+		</div>
+	</div>
+
+</body>
+<script src="assets/javascripts/vendor/jquery.min.js"></script>
+<script type="text/javascript" src="assets/javascripts/vendor/tube.js"></script>
+<script type="text/javascript" src="assets/javascripts/vendor/loader.js"></script>
+<script type="text/javascript" src="assets/javascripts/vendor/polyfill.js"></script>
+<script type="text/javascript" src="assets/javascripts/util.js"></script>
+
+<script type="text/javascript" src="assets/javascripts/rectangles/_env.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/colors.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/debug.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/sort.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/wheel.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/mouse.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/keys.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/tree.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/room.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/rect.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/models/vec2.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/engine/builder.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/engine/clipper.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/_map.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/ui.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/draw.js"></script>
+
+<script src="assets/javascripts/mx/mx.js"></script>
+<script src="assets/javascripts/mx/mx.quaternion.js"></script>
+<script src="assets/javascripts/mx/extensions/mx.scene.js"></script>
+<script src="assets/javascripts/mx/extensions/mx.movements.js"></script>
+<script src="assets/javascripts/mx/primitives/mx.scaleBox.js"></script>
+<script src="assets/javascripts/app.js"></script>
+
+</html>
diff --git a/rectangles.html b/rectangles.html
index 535e366..e43592f 100644
--- a/rectangles.html
+++ b/rectangles.html
@@ -60,6 +60,7 @@ body > div {
 <script type="text/javascript" src="assets/javascripts/rectangles/util/sort.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/util/wheel.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/util/mouse.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/util/keys.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/models/tree.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/models/room.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/models/rect.js"></script>