ekt: improve sample card player a bit

dist/ekt/card_player.html

@@ -53,7 +53,7 @@
     }
 
     function connect(){
-        socket = new WebSocket("ws://127.0.0.1:3594/y3io");
+        socket = new WebSocket("ws://127.0.0.1:3497/y3io");
 
         socket.onopen = function(e) {
             document.getElementById("status").innerText = "Connected. Loading information...";
@@ -132,66 +132,24 @@
         });
     }
 
-    var mydragg = function() {
-      return {
-        move: function(divid, xpos, ypos) {
-          divid.style.left = xpos + 'px';
-          divid.style.top = ypos + 'px';
-        },
-        startMoving: function(divid, container, evt) {
-          evt = evt || window.event;
-          var posX = evt.clientX,
-            posY = evt.clientY,
-            divTop = divid.style.top,
-            divLeft = divid.style.left,
-            eWi = parseInt(divid.style.width),
-            eHe = parseInt(divid.style.height),
-            cWi = parseInt(document.getElementById(container).style.width),
-            cHe = parseInt(document.getElementById(container).style.height);
-          document.getElementById(container).style.cursor = 'move';
-          divTop = divTop.replace('px', '');
-          divLeft = divLeft.replace('px', '');
-          var diffX = posX - divLeft,
-            diffY = posY - divTop;
-          document.onmousemove = function(evt) {
-            evt = evt || window.event;
-            var posX = evt.clientX,
-              posY = evt.clientY,
-              aX = posX - diffX,
-              aY = posY - diffY;
-            if (aX < 0) aX = 0;
-            if (aY < 0) aY = 0;
-            if (aX + eWi > cWi) aX = cWi - eWi;
-            if (aY + eHe > cHe) aY = cHe - eHe;
-            mydragg.move(divid, aX, aY);
-          }
-        },
-        stopMoving: function(container) {
-          var a = document.createElement('script');
-          document.getElementById(container).style.cursor = 'default';
-          document.onmousemove = function() {}
-        },
-      }
-    }();
-
     function spawn_card(i){
         if (state != 3){
             return;
         }
 
-        document.getElementById("playfield").innerHTML += "<img class='card' src='data:image/bmp;base64, "+cards[i].image+"' onclick='spawn_card("+current_card_fetch+");' onmousedown='mydragg.startMoving(this,\"playfield\",event);' onmouseup='mydragg.stopMoving(\"playfield\");update_pos("+i+", event);' />";
+        document.getElementById("playfield").innerHTML += "<img class='card' src='data:image/bmp;base64, "+cards[i].image+"' onmousedown='startMoving(event, this, "+i+");' />";
     }
 
-    function update_pos(i, event){
+    function update_pos(i, x, y){
         if (state != 3){
             return;
         }
 
-        var panelHeight = 1232;
+        var panelHeight = 832;
         var panelWidth = 1160;
 
-        cards[i].x = panelWidth - event.clientY;
-        cards[i].y = panelHeight - event.clientX;
+        cards[i].x = panelHeight - y;
+        cards[i].y = panelWidth - x;
         cards[i].rotation = 0;
 
 
@@ -215,6 +173,43 @@
         });
     }
 </script>
+<script>
+    var mousePosition;
+    var offset = [-75,-75];
+    var div;
+    var current_card = -1;
+    var isDown = false;
+
+    function startMoving(e, el, card){
+        div = el;
+        isDown = true;
+        current_card = card;
+        offset = [
+            div.offsetLeft - e.clientX,
+            div.offsetTop - e.clientY
+        ];
+    }
+
+    document.addEventListener('mouseup', function() {
+        isDown = false;
+        current_card = -1;
+    }, true);
+
+    document.addEventListener('mousemove', function(event) {
+        event.preventDefault();
+        if (isDown) {
+            mousePosition = {
+
+                x : event.clientX,
+                y : event.clientY
+
+            };
+            div.style.left = (mousePosition.x + offset[0]) + 'px';
+            div.style.top  = (mousePosition.y + offset[1]) + 'px';
+            update_pos(current_card, event.clientX, event.clientY);
+        }
+    }, true);
+</script>
 <body onload="connect();">
     <div id="playfield" class="playfield">