From 108c996a0a042eec8954ff0349b9f85b3a075ee8 Mon Sep 17 00:00:00 2001
From: Simon Pirkelmann <simon.pirkelmann@gmail.com>
Date: Fri, 11 Sep 2020 22:49:56 +0200
Subject: [PATCH] implemented jquery communication with the server to submit
 commands and wait for them to be processed

---
 templates/drag_example.html | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)
diff --git a/templates/drag_example.html b/templates/drag_example.html
index a29df27..363c724 100644
--- a/templates/drag_example.html
+++ b/templates/drag_example.html
@@ -12,7 +12,7 @@
 
 </head>
 <body>
-<h1>Welcome Player {{ player_id }}</h1>
+<h1>Hallo Spieler {{ player_id + 1 }}</h1>
 <!-- container -->
 <div class="container">
 
@@ -28,12 +28,42 @@
 
 </div><!-- container -->
 
+<input id="btnSubmit" type="submit" value="Click Me" />
+
+
+<div class="container notification" hidden>
+        Bitte warten, bis alle Spieler ihre Aktion gewählt haben...
+</div>
+
 <script>
     $(document).ready(function () {
 
+        var please_wait = $(".notification").hide();
+
     var box = $(".box");
     var mainCanvas = $(".main-canvas");
 
+    $("#btnSubmit").click(function () {
+           //alert("button");
+            for (i = 0; i < 5; i++) {
+                var c = document.getElementsByClassName("box card" + String(i));
+                $(c).hide();
+            }
+
+            $(please_wait).show();
+
+            $.post("/send_cmds", "", function (data) {
+                console.log(data);
+                $(please_wait).hide();
+
+                for (i = 0; i < 5; i++) {
+                    var c = document.getElementsByClassName("box card" + String(i));
+                    $(c).show();
+                }
+            });
+
+        });
+
     box.draggable({
         containment: mainCanvas,
         helper: "clone",
@@ -67,7 +97,8 @@
             //console.log(dragPos);
             //console.log(dropPos);
 
-            console.log($(cmds));
+            //console.log($(cmds));
+            // notify server that cards have been swapped
             $.post(url='/', {drag: ui.draggable.attr('name'), drop: $(this).attr('name')});
 
             draggable.css({
