diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..df6234d
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,28 @@
+body {
+ background-color: #333;
+ color: #52bdce;
+ margin:50px 0px; padding:0px;
+ text-align:center;
+}
+
+.short {
+ height: 20px;
+}
+
+.console {
+ color: #ff6;
+ background-color: #222;
+ border: 1px solid #52bdce;
+ font-family: Courier;
+ font-size: 15px;
+}
+
+.title {
+ color: #ff6;
+}
+
+.content {
+ width: 400px;
+ margin:0px auto;
+ text-align:left;
+}
diff --git a/static/html/index.html b/static/html/index.html
new file mode 100644
index 0000000..65b70a1
--- /dev/null
+++ b/static/html/index.html
@@ -0,0 +1,20 @@
+
+
+ game
+
+
+
+
+
+
+
+
+ username:
+
+
+
+
+
diff --git a/static/js/common.js b/static/js/common.js
new file mode 100644
index 0000000..0cbb86b
--- /dev/null
+++ b/static/js/common.js
@@ -0,0 +1,5 @@
+function wsuri(path) {
+ var loc = window.location;
+ new_uri = "ws://" + loc.host + "/ws" + path;
+ return new_uri;
+}
diff --git a/static/js/game.js b/static/js/game.js
new file mode 100644
index 0000000..ff3920e
--- /dev/null
+++ b/static/js/game.js
@@ -0,0 +1,39 @@
+var conn;
+var me = {
+ "position": {
+ "x": 0,
+ "y": 0,
+ }
+};
+
+$(function() {
+ $("#game").hide();
+ $("#login-input").keypress(function (event) {
+ if (event.which == 13) {
+ me.name = $("#login-input").val();
+ $("#myname").text(me.name);
+ $("#game").toggle();
+ $("#login").toggle();
+ connect();
+ document.onkeydown = handleKeys;
+ }
+ });
+});
+
+function connect() {
+ console.log("connecting");
+ conn = new WebSocket(wsuri("/game/"));
+ conn.onclose = function(event) {
+ console.log("closed");
+ $("#console").text("connection lost");
+ }
+ conn.onmessage = function(event) {
+ var obj = JSON.parse(event.data);
+ $("#console").text(JSON.stringify(obj));
+ console.log(JSON.stringify(obj));
+ }
+ conn.onopen = function(event) {
+ console.log("got open event");
+ conn.send(me.name);
+ }
+};
diff --git a/static/js/keyboard.js b/static/js/keyboard.js
new file mode 100644
index 0000000..994004c
--- /dev/null
+++ b/static/js/keyboard.js
@@ -0,0 +1,38 @@
+function handleKeys(event) {
+ var keyCode;
+ if(event == null){
+ keyCode = window.event.keyCode;
+ }
+ else{
+ keyCode = event.keyCode;
+ }
+
+ // up
+ if (keyCode == 38 || keyCode == 87 || keyCode == 75) {
+ console.log("up");
+ me.position.y += 1;
+ conn.send(JSON.stringify(me.position));
+ }
+ // down
+ else if(keyCode == 40 || keyCode == 83 || keyCode == 74) {
+ console.log("down");
+ me.position.y -= 1;
+ conn.send(JSON.stringify(me.position));
+ }
+ // right
+ else if(keyCode == 39 || keyCode == 68 || keyCode == 76) {
+ console.log("right");
+ me.position.x += 1;
+ conn.send(JSON.stringify(me.position));
+ }
+ // left
+ else if(keyCode == 37 || keyCode == 65 || keyCode == 72) {
+ console.log("left");
+ me.position.x -= 1;
+ conn.send(JSON.stringify(me.position));
+ }
+
+ else if( keyCode == 27) {
+ console.log("escape");
+ }
+}