add controls to screen

templates/index.html

@@ -11,7 +11,7 @@
         }
 
         canvas {
-            margin: 0 auto;
+            margin: 0 auto 10px;
             width: 1024px;
             display: block;
             border: 1px solid #000;
@@ -19,7 +19,7 @@
 
         .chat {
             width: 1024px;
-            margin: 20px auto 0;
+            margin: 0 auto;
             border: 1px solid #000;
             padding: 8px;
             box-sizing: border-box;
@@ -53,12 +53,17 @@
 
         .controls {
             width: 1024px;
+            height: 30px;
             margin: 0 auto;
+            font-size: 12px;
+            text-align: right;
         }
 
         .pill {
             border: 1px solid #000000;
             border-radius: 8px;
+            padding: 5px;
+
         }
     </style>
 </head>
@@ -73,10 +78,12 @@
     </div>
     <canvas id="canvas" width="1024" height="400"></canvas>
     <div class="controls">
-        <span class="pill">h move left</span>
+        <span class="pill">h - move left</span>
-        <span class="pill">l move right</span>
+        <span class="pill">l - move right</span>
-        <span class="pill">j crouch</span>
+        <span class="pill">j - crouch</span>
-        <span class="pill">k jump</span>
+        <span class="pill">k - jump</span>
+        <span class="pill">e - attack</span>
+
     </div>
     <div class="chat">
         <input type="text" id="msg" placeholder="Type in a message to chat" />