From 7ad8029abfe27e3337318d5014df8c1b465873a9 Mon Sep 17 00:00:00 2001
From: kts <kts@exoss.net>
Date: Sun, 17 Mar 2013 21:45:08 -0700
Subject: [PATCH] Added the Events system, created proper Graphics.Display
 backends and made them selectable on start, created Graphics.Drawable stubs,
 tidied up and messied up some of them codes

---
 CBDL.js          |  97 +++++++++++++++++++++++++----
 CBDL_graphics.js | 155 +++++++++++++++++++++++++++++++++++++++--------
 cbdl.html        | 129 +++++++++++++++++++++++++++++++--------
 3 files changed, 320 insertions(+), 61 deletions(-)

diff --git a/CBDL.js b/CBDL.js
index 6130156..ab244c3 100644
--- a/CBDL.js
+++ b/CBDL.js
@@ -8,7 +8,6 @@ CBDL.version = 0.1;
 
 // TODO: completely redo requires & library includes. At the moment, it is broken and disallows multiple Apps from starting if they both require libraries.
 
-
 CBDL.dump = function() {
 	console.log("CBDL version "+CBDL.version);
 }
@@ -422,15 +421,89 @@ CBDL.loadInclude = function(include) {
 	*/
 }
 
-/* Event object which is used to poll a variety of events, as defined through
- * the passed event_masks bitmask, or by calling Event's addEvent method.
- */
-CBDL.Event = function(event_masks) {
-	this.pollEvents = function() {
-		if (event_pool.isEmpty()) {
-			return -1;
-		} else {
-			return event_pool.getNext();
-		}
+/*
+===============================================================================
+CBDL.Event(event_masks)
+
+	Object that can be instantized to monitor a variety of event types, either
+through the passed event_masks bitmask, or by calling the Event Object's
+addEvent method.
+
+Remake:
+	Given that the JavaScript Event model uses string values for identifying
+event types(event.type), it makes little sense to use a bitmask for managing
+multiple event types. This is somewhat sad, as bitmasks are certainly more
+efficient than strings (and doing string comparisons).
+
+TODO: Do a performance test of straight Event string comparison vs. an
+associative array comparison. e.g.:
+	if (event.type == 'mousemove')	{
+		console.log('yea');
 	}
-}
+
+	// bit comparison
+	if (events[event.type] == MOUSEMOVE) {
+
+	}
+
+===============================================================================
+*/
+CBDL.Event = CBDL.Event || function(event_types, context) {
+	context = (typeof context !== 'undefined' ? context : window);
+	this.event_pool = new CBDL.Event.EventPool;
+	for (event_type in event_types) {
+		console.log(context);
+		CBDL.addEvent(context, event_types[event_type], (function(scope) {
+			return function(event) {
+				scope.handleEvent(event);
+			}
+		})(this));
+	}
+};
+
+CBDL.Event.prototype.handleEvent = function(event) {
+	this.event_pool.push(event);
+};
+
+CBDL.Event.prototype.pollEvent = function() {
+	if (this.event_pool.isEmpty()) {
+		return false;
+	} else {
+		return this.event_pool.getNext();
+	}
+};
+
+CBDL.Event.EventPool = CBDL.Event.EventPool || function() {};
+
+CBDL.Event.EventPool.prototype.events = [];
+
+CBDL.Event.EventPool.prototype.isEmpty = function() {
+	if (this.events.length <= 0) {
+		return true;
+	}
+	return false;
+};
+
+CBDL.Event.EventPool.prototype.getNext = function() {
+	if (this.events.length > 0) {
+		return this.events.shift();
+	}
+	return -1;
+};
+
+CBDL.Event.EventPool.prototype.push = function(event) {
+	this.events.push(event);
+};
+
+// CROSS-BROWSER GLUE
+CBDL.addEvent = (typeof window.attachEvent !== 'undefined' ?
+	function(target, event_type, callback, bubble) {
+		var bubble = (typeof bubble === 'undefined' ? true : bubble);
+		target.attachEvent('on'+event_type, callback);
+	}
+:
+	function(target, event_type, callback, bubble) {
+		var bubble = (typeof bubble === 'undefined' ? true : bubble);
+		target.addEventListener(event_type, callback, bubble);
+	}
+);
diff --git a/CBDL_graphics.js b/CBDL_graphics.js
index da49165..57ddd3e 100644
--- a/CBDL_graphics.js
+++ b/CBDL_graphics.js
@@ -3,16 +3,15 @@ CBDL.include("excanvas.js");
  * 
  * 
  * */
-CBDL.Graphics = CBDL.Graphics || {};
-CBDL.Graphics.version = 0.1;
-
-CBDL.Graphics.DisplayType = {DIV: 0x00, CANVAS_2D:0x01}; 
-CBDL.Graphics.backends = {DIV: 0x00, CANVAS_2D:0x01}; 
-
+CBDL.Graphics = CBDL.Graphics || {
+	version: 0.1,
+	BACKEND: {DIV: 0x00, CANVAS_2D:0x01},
+	VM: {SCALE: 0x01}
+};
 /*
 ===============================================================================
 
-CBDL.Graphics.DisplaySkeleton
+CBDL.Graphics.BaseDisplay
 
 	Basic Display skeleton from which all Display backends should be derived
 from. It is through the backend detection that the Display backend, being named
@@ -22,16 +21,37 @@ bulk.
 
 ===============================================================================
 */
-CBDL.Graphics.DisplaySkeleton = function(video_mode, target_element) {
+CBDL.Graphics.BaseDisplay = function(video_mode, target_element) {
+	this.video_mode = video_mode;
+	this.target_element = target_element;
 };
 
-CBDL.Graphics.DisplaySkeleton.prototype.Init = function() {
+CBDL.Graphics.BaseDisplay.prototype.Init = function() {
 
 };
-CBDL.Graphics.DisplaySkeleton.prototype.Fill = function(red, green, blue) {
+CBDL.Graphics.BaseDisplay.prototype.Fill = function(red, green, blue) {
 
 };
 
+CBDL.Graphics.BaseDisplay.prototype.Drawable = function() {
+	console.log("BaseDrawable");
+};
+
+CBDL.Graphics.getBackend = function() {
+	var supports = [];
+	try { var element = document.createElement("div"); }
+	catch (err) { element = null; }
+	if (element != null) {
+		supports.push(CBDL.Graphics.BACKEND.DIV);
+	}
+	try { var element = document.createElement("canvas"); }
+	catch (err) { element = null; }
+	if (element != null) {
+		supports.push(CBDL.Graphics.BACKEND.CANVAS_2D);
+	}
+	return supports[supports.length-1];
+};
+
 /*
 ===============================================================================
 
@@ -48,7 +68,104 @@ Usage:
 
 ===============================================================================
 */
-CBDL.Graphics.Display = function(video_mode, target_element) {
+
+CBDL.Graphics.Display = function(target_element, video_mode, backend) {
+	backend = (typeof backend !== 'undefined' ? backend : CBDL.Graphics.getBackend());
+	target_element = (typeof target_element !== 'undefined' ? target_element : document.body);
+	switch (backend) {
+		case CBDL.Graphics.BACKEND.CANVAS_2D:
+			return (new CBDL.Graphics.Canvas2dDisplay(target_element, video_mode));
+			break;
+		case CBDL.Graphics.BACKEND.DIV:
+			return (new CBDL.Graphics.DivDisplay(target_element, video_mode));
+			break;
+	}
+};
+
+CBDL.Graphics.Canvas2dDisplay = function(target_element, video_mode) {
+	this.video_mode = video_mode;
+	this.target_element = target_element;
+	this.type = 'Canvas2dDisplay';
+}; CBDL.extend(CBDL.Graphics.BaseDisplay, CBDL.Graphics.Canvas2dDisplay);
+
+CBDL.Graphics.Canvas2dDisplay.prototype.Init = function() {
+	this.element = document.createElement("canvas");
+	this.element.style.width = this.video_mode.width;
+	this.element.style.height = this.video_mode.height;
+	this.element_context = this.element.getContext("2d");
+	this.target_element.appendChild(this.element);
+};
+
+CBDL.Graphics.Canvas2dDisplay.prototype.Fill = function(red, green, blue) {
+	var hex_value = ((1 << 24) + (red << 16) + (green << 8) + blue);
+	var hex_string = hex_value.toString(16).substr(1);  
+	this.element_context.fillStyle = "#"+hex_string;
+	this.element_context.fillRect(0, 0, this.video_mode.width, this.video_mode.height);
+};
+
+CBDL.Graphics.Canvas2dDisplay.prototype.Drawable = function(v_position, v_scale, v_rotation, color) {
+	return (new CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_(this, v_position, v_scale, v_rotation, color));
+};
+
+CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_ = function(display, v_position, v_scale, v_rotation, color) {
+	this.display = display;
+	this.position = v_position;
+	this.scale = v_scale;
+	this.rotation = v_rotation;
+	this.color = color;
+
+	console.log("created");
+};
+
+CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_.prototype.setX = function(x) {
+	this.x = x;
+};
+
+CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_.prototype.setY = function(y) {
+	this.y = y;
+};
+
+CBDL.Graphics.Canvas2dDisplay.prototype._Drawable_.prototype.testFunc = function() {
+	console.log("augh");
+};
+
+/*
+===============================================================================
+
+CBDL.Graphics.DivDisplay
+
+The div element based backend. This is the least capable backend of all default
+backends, supporting only the most basic drawing operations, not including
+rotation, shearing, or other such operations.
+
+===============================================================================
+*/
+
+CBDL.Graphics.DivDisplay = function(target_element, video_mode) {
+	this.target_element = target_element;
+	this.video_mode = video_mode;
+	this.type = 'DivDisplay';
+}; CBDL.extend(CBDL.Graphics.BaseDisplay, CBDL.Graphics.DivDisplay);
+
+CBDL.Graphics.DivDisplay.prototype.Init = function() {
+	this.element = document.createElement("div");
+	this.element.style.width = this.video_mode.width;
+	this.element.style.height = this.video_mode.height;
+	this.target_element.appendChild(this.element);
+};
+
+CBDL.Graphics.DivDisplay.prototype.Fill = function(red, green, blue) {
+	var hex_value = ((1 << 24) + (red << 16) + (green << 8) + blue);
+	var hex_string = hex_value.toString(16).substr(1);  
+	this.element.style.backgroundColor = "#"+hex_string;
+};
+
+CBDL.Graphics.DivDisplay.prototype.Drawable = function() {
+	this.lol = "lol";
+	console.log("buh");
+};
+
+CBDL.Graphics.Dispray = function(video_mode, target_element) {
 	var _context = CBDL.Graphics;
 	this.context = null;
 	this.init = function() {
@@ -106,10 +223,11 @@ defining the width and height of the Display.
 
 ===============================================================================
 */
-CBDL.Graphics.VideoMode = function(width, height) {
+CBDL.Graphics.VideoMode = function(width, height, flags) {
 	this.width = width;
 	this.height = height;
-}
+	this.flags = flags;
+};
 
 /*
 ===============================================================================
@@ -138,14 +256,3 @@ CBDL.Graphics.Drawable = function(position, scale, rotation) {
 
 	}
 }
-
-/*
-===============================================================================
-
-===============================================================================
-*/
-CBDL._Graphics_ = function() {};
-CBDL._Graphics_.prototype.VideoMode = function(width, height) {
-	this.width = width;
-	this.height = height;
-};
diff --git a/cbdl.html b/cbdl.html
index e963259..0e4fdd1 100644
--- a/cbdl.html
+++ b/cbdl.html
@@ -2,55 +2,134 @@
 <head>
 <script type="text/javascript" src="CBDL.js"></script>
 <script type="text/javascript">
-myApp = function() {
-	this.name = "myApp";
-	this.requires = ["CBDL_graphics.js"];
-	var main_display; // private member
-	var main_loop; // private member
+myBenchmark = function() {
+	var events;
 
-
-	this.Main = function() { // override parent's Main
-		main_display = new CBDL.Graphics.Display(new CBDL.Graphics.VideoMode(800, 600));
-		(main_loop = new CBDL.Loop(this, this.Loop)).start();
+	this.Main = function() {
+		var results = 0;
+		events = new CBDL.Event();
+		console.log("first test, 50 iterations of 1000:");
+		for(var i=0;i<50;i++) {
+			results += this.firstTest();
+		}
+		console.log("results: "+(results/50));
+		console.log("second test, 50 iterations of 1000:");
+		results = 0;
+		for(var i=0;i<50;i++) {
+			results += this.secondTest();
+		}
+		console.log("results: "+(results/50));
 	};
 
-	this.Loop = function(delta) { // our custom Loop member :)
-		main_display.Fill(0xFF, 0xF0, 0xF0);
-		console.log("l: "+this.name);
-		return(1000);
+	this.firstTest = function() {
+		var time_start = new Date().getTime();
+		for(var i=0;i<1000;i++) {
+			var object = {};
+			object.type = "test";
+			events.event_pool.push(object);
+		}
+		while(event = events.pollEvent()) {
+			if (object.type == "test") {
+				// just a test
+			} else if (object.type == "mousemove") {
+				// doot doot
+			} else if (object.type == "keypress") {
+				//la la
+			}
+		}
+		var time_end = new Date().getTime();
+		return(time_end-time_start);
 	};
 
-}; CBDL.extend(CBDL.App, myApp); // Don't forget this line! sets up prototypal inheritance
+	TEST = 0x01;
+	MOUSEMOVE = 0x02;
+	KEYPRESS = 0x03;
+
+	this.events_list = {
+		"test": TEST,
+		"mousemove": MOUSEMOVE,
+		"keypress": KEYPRESS
+	};
+
+	this.secondTest = function() {
+		var time_start = new Date().getTime();
+		for(var i=0;i<1000;i++) {
+			var object = {};
+			object.type = "test";
+			events.event_pool.push(object);
+		}
+		while(event = events.pollEvent()) {
+			switch(this.events_list[object.type]) {
+				case TEST:
+					// something
+					break;
+				case MOUSEMOVE:
+					// something else
+					break;
+				case KEYPRESS:
+					// doop doop
+					break;
+			}
+		}
+		var time_end = new Date().getTime();
+		return(time_end-time_start);
+	};
+}; CBDL.extend(CBDL.App, myBenchmark);
 
 myApp2 = function() {
 	this.name = "myApp2";
-	var main_display; // private member
+	this.requires = ["CBDL_graphics.js"];
+	var display; // private member
 	var main_loop; // private member
+	var events;
+	var event;
 
-	this.Main = function() { // override parent's Main
-	//	main_display = new CBDL.Graphics.Display(new CBDL.Graphics.VideoMode(1000, 240));
-		(main_loop = new CBDL.Loop(this, this.Loop)).start();
+	this.Main = function() {
+		display = new CBDL.Graphics.Display(document.body, new CBDL.Graphics.VideoMode(320, 240, CBDL.Graphics.VM_SCALE), CBDL.Graphics.BACKEND.CANVAS_2D);
+		display.Init();
+		display.Fill(0x00, 0x00, 0x00);
+
+		var drawable = new display.Drawable();
+	console.log(drawable.testFunc);
+		drawable.testFunc();
+
+		events = new CBDL.Event(["keydown", "keyup", "focus", "blur"]);
+
+		(main_loop = new CBDL.Loop(this, onLoop)).start();
 	};
 
-	this.Loop = function(delta) { // our custom Loop member :)
-		//main_display.Fill(0xFF, 0xF0, 0xF0);
-		console.log("l: "+this.name);
+	function onLoop(delta) {
+		while(event = events.pollEvent()) {
+			if (event.type == "blur") {
+				onBlur();
+			} else if (event.type == "focus") {
+				onFocus();
+			} else if (event.type == "keydown") {
+				console.log("keydown: "+event.keyCode);
+			} else if (event.type == "keyup") {
+				console.log("keyup: "+event.keyCode);
+			}
+		}
 		return(10);
 	};
 
-}; CBDL.extend(CBDL.App, myApp2); // Don't forget this line! sets up prototypal inheritance
+	function onFocus() {
+		display.Fill(0x00, 0x00, 0x00);
+	};
 
+	function onBlur() {
+		display.Fill(0x4F, 0x4F, 0x4F);
+	};
 
+}; CBDL.extend(CBDL.App, myApp2);
 
 init = function() {
 	var app_2 = new myApp2();
 	app_2.Go();
-	var app = new myApp();
-	app.Go();
 }
+CBDL.addEvent(window, 'load', init);
 </script>
 </head>
 <body>
-<button onclick="init()">init()</button>
 </body>
 </html>