Better handling of touchscreens

diff --git a/trivabble.js b/trivabble.js
index 2ab37b3273c8122cd47b5da1281003ffe7b22b56..7e04edaf87af487c66a722d73fe37dc969b6a7c4 100644 (file)
--- a/trivabble.js
+++ b/trivabble.js
@@ -49,6 +49,7 @@
     let audioNotification;
     let audioChat;
     let chatMessages;
+    let chatTextarea;
     let helpBag;
     let helpClear;
 
@@ -355,8 +356,8 @@ let tile;
     }
 
     function dragTileBegin(e) {
-        e.preventDefault();
-        loadAudio();
+        preventDefault(e);
+
         if (blockMove) {
             return;
         }
@@ -366,6 +367,8 @@ let tile;
             return;
         }
 
+        loadAudio();
+
         movingTile = e.currentTarget;
 
         tileInitMouseCoords = e;
@@ -435,6 +438,7 @@ let tile;
 
     function preventDefault(e) {
         e.preventDefault();
+        e.stopPropagation();
         return false;
     }
 
@@ -448,6 +452,7 @@ let tile;
         mouseDown(tile, dragTileBegin);
 
         tile.addEventListener("contextmenu", preventDefault);
+        tile.addEventListener("touchstart", preventDefault);
         tile.addEventListener("touchmove", preventDefault);
 
         setLetter(tile, letter, highlight);
@@ -1003,13 +1008,15 @@ let tile;
         }
     }
 
-    function bagClicked() {
-        loadAudio();
+    function bagClicked(e) {
+        preventDefault(e);
 
         if (blockMove) {
             return;
         }
 
+        loadAudio();
+
         if (!pollingReady) {
             showConnectionLost();
             return;
@@ -1059,28 +1066,25 @@ let tile;
         chatMessages.style.width = chatMessages.offsetWidth + "px";
 
         const btn = document.getElementById("chat-btn");
-        const ta = document.getElementById("chat-ta");
 
-        ta.onmouseup = function () {
-            chatMessages.style.width = ta.offsetWidth + "px";
+        chatTextarea.onmouseup = function () {
+            chatMessages.style.width = chatTextarea.offsetWidth + "px";
         };
 
         btn.onclick = function () {
             loadAudio();
-            sendCmds([
-                {
-                    cmd: "msg",
-                    msg: ta.value
-                }
-            ]);
+            sendCmds([{
+                cmd: "msg",
+                msg: chatTextarea.value
+            }]);
 
-            ta.value = "";
+            chatTextarea.value = "";
         };
 
-        ta.onkeydown = function (e) {
+        chatTextarea.onkeydown = function (e) {
             if (e.keyCode === 13) {
-                e.preventDefault();
-                e.stopPropagation();
+                preventDefault(e);
+                chatTextarea.focus();
                 btn.onclick();
             }
         };
@@ -1177,6 +1181,7 @@ let tile;
         name          = document.getElementById("name");
         bag           = document.getElementById("bag");
         chatMessages  = document.getElementById("chat-messages");
+        chatTextarea  = document.getElementById("chat-ta");
         helpBag       = document.getElementById("help-bag");
         helpClear     = document.getElementById("help-clear");
         participantPlaceholder = document.getElementById("participants-placeholder");