Merge branch 'beatgammit-fix-web-example' into v2

jcelliott · Aug 28, 2015 · ea0bd70 · ea0bd70
2 parents bc2ee68 + 9e50598
commit ea0bd70
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 34 deletions.
diff --git a/examples/web/example.js b/examples/web/example.js
@@ -3,54 +3,67 @@
 
 	var conn,
 		session,
+		renderer,
 		stage,
-		layer,
 		colo,
 		channel = 'my.turnpike.chat';
 
 	function drawCircle(x, y, color) {
-		var circ = new Kinetic.Circle({
-			x: x,
-			y: y,
-			radius: 0,
-			fill: color,
-		});
+		var g = new PIXI.Graphics(),
+			fields = {
+				radius: 0,
+				opacity: 1,
+			};
 
-		layer.add(circ);
-		circ.tween = new Kinetic.Tween({
-			node: circ,
-			radius: 75,
-			opacity: 0,
-			easing: Kinetic.Easings.EaseIn,
-			duration: 1,
-			onFinish: function () {
-				circ.remove();
-			}
-		});
-		circ.tween.play();
+		console.log("X:", x, "Y:", y);
+		stage.addChild(g);
+
+		function handleChange() {
+			// console.log("Radius:", fields.radius, "Opacity:", fields.opacity);
+			g.clear();
+			g.beginFill(color, fields.opacity);
+			g.drawCircle(x, y, fields.radius);
+			g.endFill();
+		}
+
+		function remove() {
+			stage.removeChild(g);
+		}
+
+		createjs.Tween.get(fields).to({radius: 100, opacity: 0}, 1500).addEventListener('change', handleChange).call(remove);
 	}
 
 	function randColor() {
-		return 'rgb(' + Math.random() + ',' + Math.random() + ',' + Math.random() + ')';
+		return (Math.random()*255 << 16) | (Math.random()*255 << 8) | (Math.random()*255);
+	}
+
+	function draw() {
+		renderer.render(stage);
+		window.requestAnimationFrame(draw);
 	}
 
-	function initKinectic() {
+	function initDrawing() {
 		colo = randColor();
 
-		stage = new Kinetic.Stage({
-			container: 'container',
-			width: window.innerWidth,
-			height: window.innerHeight,
-		});
+		stage = new PIXI.Container();
+		stage.interactive = true;
+		stage.buttonMode = true;
+		renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
+		document.body.appendChild(renderer.view);
 
-		layer = new Kinetic.Layer();
-		stage.add(layer);
+		stage.hitArea = new PIXI.Rectangle(0, 0, window.innerWidth, window.innerHeight);
 
-		// add click and tap handlers
-		stage.on('contentClick', function () {
-			var mousePos = stage.getPointerPosition();
+		function eventHandler(e) {
+			var mousePos = e.data.global;
 			session.publish(channel, [mousePos.x, mousePos.y, colo]);
-		});
+			drawCircle(mousePos.x, mousePos.y, colo)
+		}
+
+		// add click and tap handlers
+		stage.on('mousedown', eventHandler);
+		stage.on('touchstart', eventHandler);
+
+		window.requestAnimationFrame(draw);
 	}
 
 	function initAutobahn() {
@@ -73,7 +86,7 @@
 
 	function init() {
 		initAutobahn();
-		initKinectic();
+		initDrawing();
 	}
 
 	window.addEventListener('load', init);

diff --git a/examples/web/index.html b/examples/web/index.html
@@ -2,7 +2,8 @@
 <head>
 	<title>Example</title>
 	<script src="https://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.js" type="text/javascript"></script>
-	<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js" type="text/javascript"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js" type="text/javascript"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/tweenjs/0.6.0/tweenjs.min.js"></script> 
 	<script src="example.js"></script>
 	<style type="text/css">
 		body {