Add controls to screen

templates/index.html

@@ -50,6 +50,16 @@
             border-radius: 12px;
             padding: 8px;
         }
+
+        .controls {
+            width: 1024px;
+            margin: 0 auto;
+        }
+
+        .pill {
+            border: 1px solid #000000;
+            border-radius: 8px;
+        }
     </style>
 </head>
 
@@ -62,6 +72,12 @@
         {{ end }}
     </div>
     <canvas id="canvas" width="1024" height="400"></canvas>
+    <div class="controls">
+        <span class="pill">h move left</span>
+        <span class="pill">l move right</span>
+        <span class="pill">j crouch</span>
+        <span class="pill">k jump</span>
+    </div>
     <div class="chat">
         <input type="text" id="msg" placeholder="Type in a message to chat" />
         <button type="button" id="send">Send</button>

todo.md

@@ -0,0 +1,10 @@
+- move down to 1 container
+- enter to send chat message
+- show name plate
+- fix sending empty messages
+- focus chat on 't'
+- show controls on the page
+- hit points
+- death
+- weapons from channel point
+- - https://dev.twitch.tv/docs/eventsub/