zenhob/app.js

## app.js
var fs   = require("fs"),
    sys  = require("sys"),
    path = require("path");

exports.MIME_TYPES = {
    ".txt"      : "text/plain",
    ".html"     : "text/html",
    ".css"      : "text/css",
    ".js"       : "application/x-javascript",
    ".manifest" : "text/cache-manifest"
  }

// WARNING: You can access any file on the host with a properly crafted URL.
// FIXME: goto WARNING
exports.public_path = function (loc) {
  return function (back) {
    return function (head) {
      pathname = path.join(loc, head.url.capture[0] + head.url.capture[2])
      back({
        'headers': {'content-type': exports.MIME_TYPES[head.url.capture[2]]},
        'body'   : fs.readFileSync(pathname)
      })()
    }
  }
}

// middleware is not a great name. shrug?
exports.middleware = function (fn) {
  return function (down, up) {
    return function (req) {
      fn(req)
      return up(down)(req)
    }
  }
}

exports.logger = exports.middleware(function (req) {
  sys.puts("[" + new Date().toString() + "] " + req.method + "  " + req.url.href)
})

## canvas.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Canvas fun</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="client.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      gad = new GadClient(document.getElementById('fun_times'));
      gad.start()
    });
  </script>
</head>
<body>
<canvas id="fun_times" width="800" height="500">
You need a web browser that supports the canvas element.
</canvas>
</body>
</html>

## client.js
function GadClient(canvas) {
  var client = this;
  this.canvas = canvas;
  this.ctx = this.context();
  this.hero = [30,240];
  this.hero_vector = [0,0];
  $(document).keypress(function (event) {
    client.processKey(event.keyCode);
    return true;
  })
}

GadClient.prototype.processKey = function (keyCode) {
  if (keyCode == 112)      // p
    this.hero_vector = [0,0];    // pause
  else if (keyCode == 104)      // h
    this.hero_vector[0] -= 1;    // left
  else if (keyCode == 107) // k
    this.hero_vector[1] -= 1;    // up
  else if (keyCode == 106) // j
    this.hero_vector[1] += 1;    // down
  else if (keyCode == 108) // l
    this.hero_vector[0] += 1;    // right
}

GadClient.prototype.context = function () {
  var elem = this.canvas;
  if (elem && elem.getContext) {
    return elem.getContext('2d');
  } else {
    throw 'no context';
  }
}

GadClient.prototype.start = function () {
  var client = this;
  setInterval(function () { client.draw() }, 50);
}

GadClient.prototype.draw = function () {
  this.canvas.width = this.canvas.width;
  this.hero[0] += this.hero_vector[0]
  this.hero[1] += this.hero_vector[1]
  this.ctx.fillRect(this.hero[0], this.hero[1], 20, 20);
}

## server.js
var
  http = require("http"),
  sys  = require("sys"),
  fs   = require("fs"),
  fab  = require("./vendor/fab"),
  gad  = require("./app");

var app = fab()
  (fab.listener)
  (gad.logger)
  ('/public', /(\/(\w+))+(\.\w+)/, gad.public_path('./public'))
  ('/', 'hi world')
();

http.createServer(app).listen(0xFAB)

require("repl").start("> ")
	var fs = require("fs"),
	sys = require("sys"),
	path = require("path");

	exports.MIME_TYPES = {
	".txt" : "text/plain",
	".html" : "text/html",
	".css" : "text/css",
	".js" : "application/x-javascript",
	".manifest" : "text/cache-manifest"
	}

	// WARNING: You can access any file on the host with a properly crafted URL.
	// FIXME: goto WARNING
	exports.public_path = function (loc) {
	return function (back) {
	return function (head) {
	pathname = path.join(loc, head.url.capture[0] + head.url.capture[2])
	back({
	'headers': {'content-type': exports.MIME_TYPES[head.url.capture[2]]},
	'body' : fs.readFileSync(pathname)
	})()
	}
	}
	}

	// middleware is not a great name. shrug?
	exports.middleware = function (fn) {
	return function (down, up) {
	return function (req) {
	fn(req)
	return up(down)(req)
	}
	}
	}

	exports.logger = exports.middleware(function (req) {
	sys.puts("[" + new Date().toString() + "] " + req.method + " " + req.url.href)
	})
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Canvas fun</title>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="client.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
	gad = new GadClient(document.getElementById('fun_times'));
	gad.start()
	});
	</script>
	</head>
	<body>
	<canvas id="fun_times" width="800" height="500">
	You need a web browser that supports the canvas element.
	</canvas>
	</body>
	</html>
	function GadClient(canvas) {
	var client = this;
	this.canvas = canvas;
	this.ctx = this.context();
	this.hero = [30,240];
	this.hero_vector = [0,0];
	$(document).keypress(function (event) {
	client.processKey(event.keyCode);
	return true;
	})
	}

	GadClient.prototype.processKey = function (keyCode) {
	if (keyCode == 112) // p
	this.hero_vector = [0,0]; // pause
	else if (keyCode == 104) // h
	this.hero_vector[0] -= 1; // left
	else if (keyCode == 107) // k
	this.hero_vector[1] -= 1; // up
	else if (keyCode == 106) // j
	this.hero_vector[1] += 1; // down
	else if (keyCode == 108) // l
	this.hero_vector[0] += 1; // right
	}

	GadClient.prototype.context = function () {
	var elem = this.canvas;
	if (elem && elem.getContext) {
	return elem.getContext('2d');
	} else {
	throw 'no context';
	}
	}

	GadClient.prototype.start = function () {
	var client = this;
	setInterval(function () { client.draw() }, 50);
	}

	GadClient.prototype.draw = function () {
	this.canvas.width = this.canvas.width;
	this.hero[0] += this.hero_vector[0]
	this.hero[1] += this.hero_vector[1]
	this.ctx.fillRect(this.hero[0], this.hero[1], 20, 20);
	}
	var
	http = require("http"),
	sys = require("sys"),
	fs = require("fs"),
	fab = require("./vendor/fab"),
	gad = require("./app");

	var app = fab()
	(fab.listener)
	(gad.logger)
	('/public', /(\/(\w+))+(\.\w+)/, gad.public_path('./public'))
	('/', 'hi world')
	();

	http.createServer(app).listen(0xFAB)

	require("repl").start("> ")