Added simple control constructor

uxebu · May 10, 2011 · 8e556eb · 8e556eb
1 parent 3f9a336
commit 8e556eb
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 25 deletions.
diff --git a/src/game.html b/src/game.html
@@ -23,6 +23,10 @@
 				position: absolute;
 			}
 
+				#controls button {
+					position: relative;
+				}
+
 			#right {
 				width: 60px;
 				height: 60px;
@@ -40,16 +44,20 @@
 				bottom: 10px;
 				left: 10px;
 			}
-			#launch {
+			#startButton,
+			#stopButton {
 				position: absolute;
-				top: 100px;
-				left: 60px;
+				margin: 10px auto;
 				background: white;
 				width: 200px;
 				height: 50px;
 				z-index: 100;
 
 			}
+
+			#stopButton {
+				display: none;
+			}
 		</style>
 
 	</head>
@@ -59,18 +67,24 @@
 			<button id="left"></button>
 			<button id="right"></button>
 		</div>
-		<button id="launch">Start</button>
+		<div id="controls"></div>
 	</body>
-	<script src="socket.io.min.js"></script>
+	<!--<script src="socket.io.min.js"></script>-->
+	<script src="lib/lib.js"></script>
+	<script src="lib/delegate.js"></script>
 	<script src="js/app.js"></script>
 	<script>
 		var ngn = new engine(document.getElementById('canvas'));
-		var buttonStart = document.getElementById('launch');
+		var controls = new controls(document.getElementById('controls'));
+
+		// Wiring
+		controls.delegate(ngn, {
+			'start': 'start',
+			'stop': 'stop'
+		});
 
-		buttonStart.addEventListener('touchstart', function(){
-//		buttonStart.addEventListener('click', function(){
-			buttonStart.style.display = 'none';
-			ngn.launch();
+		ngn.delegate(controls, {
+			'over': 'stop'
 		});
 	</script>
 </html>
diff --git a/src/js/app.js b/src/js/app.js
@@ -1,7 +1,15 @@
 !function(global){
+	var mobile = true;
+
+	var CLICK = mobile ? 'touchstart' : 'click';
+	var KEY_DOWN = mobile ? 'touchstart' : 'keydown';
+	var KEY_UP = mobile ? 'touchend' : 'keyup';
+
 	var engine = global.engine = function(canvas){
 		if (!canvas){ return; }
 
+		mixin(this, delegate());
+
 		this.canvas = canvas;
 		this.ctx = this.canvas.getContext('2d');
 		this.players = {
@@ -109,13 +117,11 @@
 		},
 		handleEvent: function(e){
 			e.preventDefault();
-//			var charCode = e.keyCode;
-			var charCode = e.target.id;
+			var charCode = e.target.id || e.keyCode;
 			var user, km;
 			(km = this.keyMap[charCode]) && (user = this.keyMap[charCode].id);
 			if (user) {
-//				this.players[user].angle = km.angle - (e.type === 'keyup' ? km.angle : 0);
-				this.players[user].angle = km.angle - (e.type === 'touchend' ? km.angle : 0);
+				this.players[user].angle = km.angle - (e.type === KEY_UP ? km.angle : 0);
 			}
 		},
 		drawPlayer: function(user){
@@ -132,18 +138,13 @@
 			this.clear();
 
 			this.running = false;
+			this.emit('over');
 		},
 		initPlayer: function(){
 			for (var player in this.players){
 				this.drawPlayer(this.players[player]);
 			}
 		},
-		launch: function(){
-			if (!this.init){ return; };
-			this.running = true;
-			this.initPlayer();
-			this.render();
-		},
 		orientate: function(user, angle){
 				var angle = angle * (Math.PI / 120);
 				var _ix = user.ix;
@@ -157,6 +158,16 @@
 
 				return [x, y, ix, iy];
 		},
+		start: function(){
+			if (!this.init){ return; };
+			this.running = true;
+			this.initPlayer();
+			this.render();
+		},
+		stop: function(){
+			this.clear();
+			this.running = false;
+		},
 		transform: function(user){
 			var ixy = this.orientate(user, user.angle);
 
@@ -186,13 +197,48 @@
 			}, 1000 / 40);
 		},
 		registerKeyEvents: function(){
-			var that = this;
+			document.body.addEventListener(KEY_DOWN, this);
+			document.body.addEventListener(KEY_UP, this);
+		}
+	};
+
+	var controls = global.controls = function(domNode){
+		this.domNode = domNode;
 
-			document.body.addEventListener('touchstart', this);
-			document.body.addEventListener('touchend', this);
+		mixin(this, delegate());
 
-//			document.body.addEventListener('keydown', this);
-//			document.body.addEventListener('keyup', this);
+		this.init();
+	};
+
+	controls.prototype = {
+		createButton: function(name, label, callb){
+			var button = this[name] = document.createElement('button');
+			button.id = name;
+			button.innerHTML = label;
+			button.addEventListener(CLICK, function(){
+				callb();
+			});
+			this.domNode.appendChild(button);
+		},
+		init: function(){
+			var that = this;
+			this.createButton('startButton', 'Start', function(){
+				that.start();
+			});
+
+			this.createButton('stopButton', 'Stop', function(){
+				that.stop();
+			});
+		},
+		start: function(){
+			this.stopButton.style.display = '';
+			this.startButton.style.display = 'none';
+			this.emit('start');
+		},
+		stop: function(){
+			this.stopButton.style.display = 'none';
+			this.startButton.style.display = '';
+			this.emit('stop');
 		}
 	};
 }(this);