initial static assets

2013-06-16 00:00:11 -07:00 · 2013-06-16 00:00:11 -07:00 · 3c0128b9b9
parent 3f71a9c845
commit 3c0128b9b9
5 changed files with 130 additions and 0 deletions
--- a/static/css/style.css
+++ 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;
+}
--- a/static/html/index.html
+++ b/static/html/index.html
@ -0,0 +1,20 @@
+<html>
+    <head>
+        <title>game</title>
+        <link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
+        <script type="text/JavaScript" src="/static/js/jquery.js"></script>
+        <script type="text/JavaScript" src="/static/js/common.js"></script>
+        <script type="text/JavaScript" src="/static/js/keyboard.js"></script>
+        <script type="text/JavaScript" src="/static/js/game.js"></script>
+    </head>
+    <body>
+        <div id="login">
+            <span class="title">username: </span>
+            <input class="console" type="text" value="" name ="input" id="login-input" autofocus />
+        </div>
+        <div id="game">
+            <div id="myname"></div>
+            <div class="console" id="console"></div>
+        </div>
+    </body>
+</html>
--- a/static/js/common.js
+++ 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;
+}
--- a/static/js/game.js
+++ 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);
+    }
+};
--- a/static/js/keyboard.js
+++ 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");
+    }
+}