Add chat form ; Fixed size to board so window can be resized ; Add board coordinates

Jerome Simeon · Jerome Simeon · commit 471ae0748a08 · 2017-01-25T15:28:30.000-05:00
diff --git a/chessground/base.css b/chessground/base.css
@@ -86,11 +86,12 @@ piece.ghost {
   opacity: 0.3;
 }
 .cg-board-wrap coords {
-  position: absolute;
+    font-weight: bold;
+    position: absolute;
   display: flex;
   pointer-events: none;
-  opacity: 0.8;
-  font-size: 9px;
+  opacity: 1;
+  font-size: 12px;
 }
 .cg-board-wrap coords.ranks {
   right: -15px;
diff --git a/index.html b/index.html
@@ -14,7 +14,16 @@
   <body>
 
     <div id="container">
-      <div id="board" class="chessground blue merida"></div>
+      <div id="board" style="width: 400px" class="chessground blue merida"></div>
+    <p>
+    <br/>
+    <form>
+      <fieldset>
+        <legend>chessbot</legend>
+      <textarea id = "chessbot"
+                rows = "1"
+                cols = "80" /></textarea>
+      </fieldset>
     </div>
 
     <script>
@@ -24,7 +33,7 @@
       }
 
       let ground = Chessground(document.getElementById("board"), {
-        coordinates: false,
+        coordinates: true,
         movable: {
           free: true,
           color: "both"
@@ -58,7 +67,25 @@
 
       setInterval(() => {
         konsole.log(getMask())
-      }, 1000)
+      }, 250)
+
+      // Send a chat text
+      function getUtteranceMsg(utterance) {
+          let s = "TEXT ";
+	  s = s + utterance;
+	  return s;
+      }
+      function sendBot() {
+	  var utterance = document.getElementById("chessbot").value;
+	  // Clear
+	  konsole.log(getUtteranceMsg(utterance))
+      }
+      document.getElementById("chessbot").addEventListener("keydown", function(e){
+	  if(e.keyCode == 13){sendBot(); clearBot();}
+      });
+      function clearBot() {
+	  document.getElementById("chessbot").value = "";
+      }
     </script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -1,6 +1,6 @@
 * {
   margin: 0;
-  padding: 0;
+  padding: 10;
 }
 
 html {
@@ -16,15 +16,14 @@ body {
 }
 
 #container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+    display:table;
+    height:800px;
+    width:100%;
   justify-content: center;
 }
 
 #board {
   margin: auto;
-  width: 90vmin;
-  height: 90vmin;
+  width: 400px;
+  height: 400px;
 }
