5 files changed, 88 insertions, 20 deletions
diff --git a/public/css/drawdrawdraw.css b/public/css/drawdrawdraw.css
index ddb9061..eb632dc 100644
--- a/public/css/drawdrawdraw.css
+++ b/public/css/drawdrawdraw.css
@@ -26,6 +26,12 @@ body {
 	background: #ddd;
 }
 
+nav {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
 .curtain {
 	position: absolute;
 	top: 0;
diff --git a/public/index.html b/public/index.html
index 7e4a7ac..943650b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,9 +9,10 @@
 <script type="text/javascript" src="/js/underscore-min.js"></script>
 <script type="text/javascript" src="/js/canvasquery.min.js"></script>
 <script type="text/javascript" src="/js/util.js"></script>
-<script type="text/javascript" src="/js/auth.js"></script>
+<script type="text/javascript" src="/js/point.js"></script>
 <script type="text/javascript" src="/js/color.js"></script>
 <script type="text/javascript" src="/js/draw.js"></script>
+<script type="text/javascript" src="/js/auth.js"></script>
 <script type="text/javascript" src="/js/chat.js"></script>
 <script type="text/javascript" src="/js/roster.js"></script>
 <script type="text/javascript" src="/js/game.js"></script>
@@ -63,6 +64,12 @@
 	<div id="state">
 		<div id="current-state">IDLE</div>
 	</div>
+
+	<nav>
+		other stuff:
+		<a href="/palette.html">palette</a>
+		<a href="/canvas.html">canvas</a>
+	</nav>
 	
 </body>
 </html>
diff --git a/public/js/draw.js b/public/js/draw.js
index 9116f78..b15416b 100644
--- a/public/js/draw.js
+++ b/public/js/draw.js
@@ -95,19 +95,3 @@ function Brush (b) {
 	$("#drawing").append(canvas);
 }
 
-function Point(e, offset) {
-	this.x = e.pageX - offset.left;
-	this.y = e.pageY - offset.top;
-}
-Point.prototype.add = function(p) {
-	this.x += p.x;
-	this.y += p.y;
-}
-Point.prototype.subtract = function(p) {
-	this.x -= p.x;
-	this.y -= p.y;
-}
-Point.prototype.quantize = function(x, y) {
-	this.x = Math.floor( this.x / x ) * x;
-	this.y = Math.floor( this.y / y ) * y;
-}
diff --git a/public/js/point.js b/public/js/point.js
new file mode 100644
index 0000000..525392b
--- /dev/null
+++ b/public/js/point.js
@@ -0,0 +1,60 @@
+function Point(e, offset) {
+	if (typeof e == "number" && typeof offset == "number") {
+		this.x = e;
+		this.y = offset;
+	}
+	else if (! e) {
+		this.x = 0;
+		this.y = 0;
+	}
+	else if ('x' in e && 'y' in e) {
+		this.x = e.x;
+		this.y = e.y;
+	}
+	else if ('pageX' in e && 'pageX' in e) {
+		this.x = e.pageX;
+		this.y = e.pageY;
+	}
+	if (typeof offset == "object") {
+		this.subtract({
+			x: offset.left,
+			y: offset.top
+		});
+	}
+}
+Point.prototype.add = function(p) {
+	this.x += p.x;
+	this.y += p.y;
+	return this;
+}
+Point.prototype.subtract = function(p) {
+	this.x -= p.x;
+	this.y -= p.y;
+	return this;
+}
+Point.prototype.quantize = function(x, y) {
+	this.x = Math.floor( this.x / x ) * x;
+	this.y = Math.floor( this.y / y ) * y;
+	return this;
+}
+Point.prototype.scale = function(x, y) {
+	this.x *= x;
+	this.y *= y;
+	return this;
+}
+Point.prototype.floor = function(){
+	this.x = Math.floor(this.x);
+	this.y = Math.floor(this.y);
+	return this;
+}
+Point.prototype.ceil = function(){
+	this.x = Math.ceil(this.x);
+	this.y = Math.ceil(this.y);
+	return this;
+}
+Point.prototype.round = function(){
+	this.x = Math.round(this.x);
+	this.y = Math.round(this.y);
+	return this;
+}
+
diff --git a/public/palette.html b/public/palette.html
index fa37455..8c377b0 100644
--- a/public/palette.html
+++ b/public/palette.html
@@ -4,7 +4,7 @@
 <title>Palette Test</title>
 <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="/js/canvasquery.js"></script>
-<script type="text/javascript" src="/js/draw.js"></script>
+<script type="text/javascript" src="/js/point.js"></script>
 <script type="text/javascript" src="/js/color.js"></script>
 <script type="text/javascript" src="/js/util.js"></script>
 </head>
@@ -12,6 +12,7 @@
 <img src="/img/palette.gif" id="palette">
 </body>
 <script type="text/javascript">
+
 $("#palette").load(function(){
 	console.log("hello");
 	var offset = $("#palette").offset();
@@ -20,13 +21,16 @@ $("#palette").load(function(){
 	var pattern, mask;
 	var color = new Color( 0, 0, 0 );
 
-	$("body").append(palette.canvas);
+	// $("body").append(palette.canvas);
 
 	$("#palette").click(function(e){
 		// they are all 8x8
 		// the first one starts at (15, 5), next one is 16 pixels down or to the right
 		// there are 16 rows and 6 columns, so 92 patterns total
 		var point = new Point(e, offset);
+		click(point);
+	});
+	var click = function(point) {
 		point.subtract({ x: 15, y: 5 });
 		point.quantize( 18, 16 );
 		point.add({ x: 15, y: 5 });
@@ -36,7 +40,13 @@ $("#palette").load(function(){
 		pattern.applyMask(mask);
 		patternURI = pattern.clone().blend( color.toString(), "screen", 1.0 ).canvas.toDataURL("image/png");
 		document.body.style.backgroundImage = 'url(' + patternURI + ')';
-	});
+	}
+
+	var random = function(){
+		var point = new Point(paletteImg.width, paletteImg.height).scale( Math.random(), Math.random() ).floor();
+		click(point);
+	}
+	random();
 
 	for (var i in colors) {
 		var swatch = colors[i].swatch();
@@ -48,6 +58,7 @@ $("#palette").load(function(){
 			document.body.style.backgroundImage = 'url(' + patternURI + ')';
 		}
 	}
+
 });
 </script>
 </html>