Said : Last updates ...

IPreoject-CLientSide/main.py

@@ -112,9 +112,9 @@ def apitest():
 #     reqParms = request
 #     return render_template('test.html', param=reqParms)
     x = request.get_json(silent=True)
-    print(json.loads(request.data.decode("utf-8")))
+   # print(json.loads(request.data.decode("utf-8")))
     # log the user out
-    return render_template('test.html', X = x)
+    return x
 
 
 

IPreoject-CLientSide/static/js/new-g.js

@@ -62,21 +62,15 @@ var httpRequest;
    // document.getElementById('clickme').onclick = 
 
 
-// var card1 = document.getElementById('clickme');
-// var card2 = document.getElementById('card2');
-// var card3 = document.getElementById('card3');
-// var card4 = document.getElementById('card4');
 
 
 
-var card1 = document.getElementById('clickme');
-var card2 = document.getElementById('card1');
-var card3 = document.getElementById('card2');
-var card4 = document.getElementById('card');
 
 
-const URL = 'http://192.168.37.69:50001/cards'
+const URL = 'http://192.168.37.69:50001/route/'
-var xhr = new XMLHttpRequest();
+
+
+var count = 0;
             
 function clickEvent(e) {
     // e = Mouse click event.
@@ -86,61 +80,74 @@ function clickEvent(e) {
 
     // localStorage.setItem('xPosition', x);
     // localStorage.setItem('yPosition', y);
-     console.log(card4);
+    
 
+    console.log("OK");
+    httpRequest = new XMLHttpRequest();
 
-    //console.log("OK");
+    if(!httpRequest) {
-    //httpRequest = new XMLHttpRequest();
+        alert('Giving Up! Cannot send an XMLHTTO request.');
+    }
+    
+    // httpRequest.withCredentials = true;
+    httpRequest.open('POST', 'http://192.168.37.69:50001/pixels/'+count);
+  
+        
+    var card1 = document.getElementById('card1');
+    var card2 = document.getElementById('card2');
+    
+    console.log("OK");
+    var data = {};
+    data.X = x;
+    data.Y = y;
+    console.log(data)
+    var res = JSON.stringify(data); 
+    console.log("OK");
+    
+    httpRequest.send(res);
+    console.log("OK");
 
-    // if(!httpRequest) {
+    httpRequest.onload = function() {//Call a function when the state changes.
+        console.log('-------------')
+        if(httpRequest.status == 200) {
+            if(this.responseText == "OK") {
+
+                  count++;
+                  score++;
+                  elScore.textContent = ' '+ score;      
+                  card1.src = URL + count;
+                  card2. src = URL + (count+1);
+                  
+            } else if(this.responseText == "FINI") {
+                ress = confirm("This part is finished! YOU SCORE IS: " + score + " | Do you want to spot it again?");
+                if(ress){
+                    window.location.href = "http://127.0.0.1:5000/rules";
+                }
+                else{
+                    window.location.href = "http://127.0.0.1:5000/";
+                } 
+            } 
+        }
+    } 
+    //console.log(JSON.stringify(data)) 
+    // var xhr = new XMLHttpRequest();
+
+    // if(!xhr) {
     //     alert('Giving Up! Cannot send an XMLHTTO request.');
     // }
+     
+    // xhr.open('POST', 'http://192.168.37.69:50001/pools');
+    // xhr.send();
+
+
+    // console.log(xhr.response);
+
+
 
-    //httpRequest.open('POST', 'http://127.0.0.1:5000/apitest');
-    //console.log("OK");
-    //var data = JSON.stringify({X: x});
-    //console.log("OK");
-    //httpRequest.send(data);
-    //console.log("OK");
-    //console.log(data) 
     
     console.log("Left? : " + x + " ; Top? : " + y + ".");
     
 
-    if( x >= 100 && x <= 157 && y >= 79 && y <= 160  ){
-
-            score++;
-            elScore.textContent = ' '+ score;
-            // ress = confirm("GOOD You win :) DO YOU WANT TO PLAY AGAIN ?");
-      
-            // if(ress){
-        
-            //     sec = localStorage.getItem('globalTime');
-            // }
-            // else{
-            //     window.location.href = "http://127.0.0.1:5000/";
-            // } 
-
-                        
-            // xhr.onreadystatechange = function() {
-            //     if (xhr.readyState == XMLHttpRequest.DONE) {
-
-            //         json = JSON.parse(xhr.response);
-            //         var encodedData = btoa(json["la_carte"]);
-            //         var image = new Image();
-            //         image.src = 'data:image/png;base64,'+encodedData;
-
-            //        // alert(encodedData);
-            //     }
-            // }
-            // xhr.open('GET', URL, true);
-            // xhr.send(null);
-
-            card2.src = card1.src;
-            card1.style.display = "none";
-            card3.style.display = "block";
-           
-    }  
 }
 
 function restartGame() {
@@ -149,24 +156,6 @@ function restartGame() {
 
 
 
-function clickEvent2(e) {
-  
-    var rect = e.target.getBoundingClientRect();
-    var x = e.clientX - rect.left; 
-    var y = e.clientY - rect.top;  
-
-    console.log("Left? : " + x + " ; Top? : " + y + ".");
-
-    if( x >= 74 && x <= 198 && y >= 71 && y <= 196  ){
-            score++;
-            elScore.textContent = ' '+ score;
-
-            card2.src = card3.src;
-            card3.style.display = "none";
-            card4.style.display = "block";
-            
-    }
-}
 
 
 

IPreoject-CLientSide/templates/new-game.html

@@ -35,9 +35,7 @@
             <h4 style="position: absolute; color: white; top: -15px; left: 32%; width: 100%;">Click on the common object here</h4>
             <!-- <img src="../static/images/card11.png" alt="simpl    console.log(typeof(image));
                     document.getElementById('test').appendChild(image)e card" id="clickme" style="cursor: pointer;  margin-top: 10px;" onclick="clickEvent(event)"> -->
-            <img src="../static/images/temp/card1.jpg" alt="simple card" id="clickme" style="cursor: pointer;  margin-top: 10px;" onclick="clickEvent(event)">
+            <img src="../static/images/temp/card1.jpg" alt="simple card" id="card1" style="cursor: pointer;  margin-top: 10px;" onclick="clickEvent(event)">
-            <img src="../static/images/card11.png" alt="simple card" id="card2" style="cursor: pointer;  margin-top: 10px; display: none;" onclick="clickEvent2(event)">
-            <img src="../static/images/card22.png" alt="simple card" id="card" class="card-spe" style="cursor: pointer;  margin-top: 10px; display: none;">
         
         </ul>
 
@@ -45,7 +43,7 @@
 
         <ul class="deck2" style="justify-content: center; display: flex; position: relative;">
             <h4 style="position: absolute; color: white; top: -8px; left: 42%; width: 100%;">Central Card</h4>
-            <img src="../static/images/temp/card2.jpg" alt="simple card" id="card1" style="cursor: pointer;  margin-top: 10px;">
+            <img src="../static/images/temp/card2.jpg" alt="simple card" id="card2" style="cursor: pointer;  margin-top: 10px;">
         </ul>
 
     </div>
@@ -61,7 +59,7 @@
         </div>
     </div>
 
-    <script type="text/javascript" src="../static/js/new-g.js"></script>
+    <script type="text/javascript" src="../static/js/new-g.js?n=1"></script>
   
 </body>