Said : Try other method..

IPreoject-CLientSide/main.py

@@ -66,25 +66,41 @@ def stringToRGB(base64_string):
 
 
 
-API_CARD = "http://192.168.37.69:50001/cards"
+API_CARD = "http://192.168.37.69:50001/time"
 
 @app.route("/new-game", methods=['POST', 'GET'])
 def getCards():
         res = requests.get(API_CARD).json()
-        card = res.get('la_carte') # our port
+        card1 = res.get('first_card') # our port
-        cards_array = np.array(json.loads(card))
+        card2 = res.get('second_card') 
-        img = Image.fromarray(np.uint8(cards_array))
+
-        pil_img = serve_pil_image(img)
+        card1_array = np.array(json.loads(card1))
-        print(type(pil_img))
+        card2_array = np.array(json.loads(card2))
-        pil_img.direct_passthrough = False 
+
-        print(type(pil_img.data))
+        img1 = Image.fromarray(np.uint8(card1_array))
-        imageStream = io.BytesIO(pil_img.data)
+        img2 = Image.fromarray(np.uint8(card2_array))
-        imageFile = Image.open(imageStream)
+
-        print(type(imageFile))
+        pil_img1 = serve_pil_image(img1)
+        pil_img2 = serve_pil_image(img2)
+    
+        pil_img1.direct_passthrough = False 
+        pil_img2.direct_passthrough = False 
+
+        print(type(pil_img1.data))
+
+        imageStream1 = io.BytesIO(pil_img1.data)
+        imageFile1 = Image.open(imageStream1)
+
+        imageStream2 = io.BytesIO(pil_img2.data)
+        imageFile2 = Image.open(imageStream2)
+
         buffer = io.BytesIO()
-        imageFile.save(buffer, format='JPEG')
+        imageFile1.save(buffer, format='JPEG')
-        print(type(imageFile))
+        imageFile2.save(buffer, format='JPEG')
-        card = imageFile.save("./static/images/temp/card1.jpg")
+     
+        imageFile1.save("./static/images/temp/card1.jpg")
+        imageFile2.save("./static/images/temp/card2.jpg")
+
         return render_template('new-game.html')
         
 

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

@@ -21,7 +21,7 @@ function tick(){
             sec = 0;
             min = 0;
             hrs = 0; 
-            ress = confirm("This part is finished! YOU SCORE IS:" + score + "Do you want to spot it again?");
+            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";
             }
@@ -70,10 +70,13 @@ var httpRequest;
 
 
 var card1 = document.getElementById('clickme');
-var card2 = document.getElementById('card2');
+var card2 = document.getElementById('card1');
-var card3 = document.getElementById('card3');
+var card3 = document.getElementById('card2');
-var card4 = document.getElementById('card4');
+var card4 = document.getElementById('card');
 
+
+const URL = 'http://192.168.37.69:50001/cards'
+var xhr = new XMLHttpRequest();
             
 function clickEvent(e) {
     // e = Mouse click event.
@@ -83,54 +86,61 @@ function clickEvent(e) {
 
     // localStorage.setItem('xPosition', x);
     // localStorage.setItem('yPosition', y);
-     
+     console.log(card4);
 
 
     //console.log("OK");
-    httpRequest = new XMLHttpRequest();
+    //httpRequest = new XMLHttpRequest();
 
-    if(!httpRequest) {
+    // if(!httpRequest) {
-        alert('Giving Up! Cannot send an XMLHTTO request.');
+    //     alert('Giving Up! Cannot send an XMLHTTO request.');
-    }
+    // }
 
-    httpRequest.open('POST', 'http://127.0.0.1:5000/apitest');
+    //httpRequest.open('POST', 'http://127.0.0.1:5000/apitest');
     //console.log("OK");
-    var data = JSON.stringify({X: x});
+    //var data = JSON.stringify({X: x});
     //console.log("OK");
-    httpRequest.send(data);
+    //httpRequest.send(data);
     //console.log("OK");
     //console.log(data) 
     
     console.log("Left? : " + x + " ; Top? : " + y + ".");
     
 
-    if( x >= 161 && x <= 219 && y >= 50 && y <= 67  ){
+    if( x >= 100 && x <= 157 && y >= 79 && y <= 160  ){
 
             score++;
-            elScore.textContent = score;
+            elScore.textContent = ' '+ score;
-            ress = confirm("GOOD You win :) DO YOU WANT TO PLAY AGAIN ?");
+            // ress = confirm("GOOD You win :) DO YOU WANT TO PLAY AGAIN ?");
       
-            if(ress){
+            // 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";
            
-
-                card1.style.display = "none";
-                card2.style.display = "block";
-                card3.style.display = "none";
-                card4.style.display = "block";
-                sec = localStorage.getItem('globalTime');
-            }
-            else{
-                window.location.href = "http://127.0.0.1:5000/";
-            } 
     }  
-
-    // var xhr = new XMLHttpRequest();
-    // xhr.open("POST", yourUrl, true);
-    // xhr.setRequestHeader('Content-Type', 'application/json');
-    // xhr.send(JSON.stringify({
-    //     x: x,
-    //     y: y
-    // }))
 }
 
 function restartGame() {
@@ -145,28 +155,17 @@ function clickEvent2(e) {
     var x = e.clientX - rect.left; 
     var y = e.clientY - rect.top;  
 
-    httpRequest = new XMLHttpRequest();
-
-    if(!httpRequest) {
-        alert('Giving Up! Cannot send an XMLHTTO request.');
-    }
-    httpRequest.open('POST', 'http://127.0.0.1:5000/apitest');
-    var data = JSON.stringify({X: x});
-    httpRequest.send(data);
     console.log("Left? : " + x + " ; Top? : " + y + ".");
-    if( x >= 126 && x <= 218 && y >= 26 && y <= 276  ){
-            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/";
-            } 
-    }  
 
+    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

@@ -25,7 +25,7 @@
                     <i class="fa fa-star gold-star"></i>
                 </li>
             </ul>
-            <span class="moves">Score :</span><span id="score"> 0</span> 
+            <span class="moves">Score : </span><span id="score"> 0</span> 
             <div class="restart">
                 <i class="fa fa-repeat" onclick="restartGame()"></i> Restart game
             </div>
@@ -33,20 +33,19 @@
         <div id="basicUsage" style="text-align: center;"><i style="display: inline-block; margin-right: 6px;" class="fa fa-clock-o"></i><h5 style="display: inline-block;" ><time></time></h5></div>
         <ul class="deck1" style="justify-content: center; display: flex; position: relative;">
             <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="simple card" id="clickme" style="cursor: pointer;  margin-top: 10px;" onclick="clickEvent(event)"> -->
+            <!-- <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/card1.png" alt="simple card" id="clickme" 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/card3.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;">
-            <!-- <img src="../static/images/icon.png" alt="simple card" class="gcard diapo" onclick="boutons(-1)"> -->
+        
         </ul>
 
         <hr style="border: #44464778 dashed 1px; width: 80%; margin: 19px 0 9px;">
 
         <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/card22.png" alt="simple card" id="clickme" style="cursor: pointer;  margin-top: 10px;" onclick="clickEvent(event)">
+            <img src="../static/images/temp/card2.jpg" alt="simple card" id="card1" style="cursor: pointer;  margin-top: 10px;">
-            <!-- <img src="../static/images/card2.png" id="card3" alt="simple card" style="margin-top: 10px;">
-            <img src="../static/images/card1.png" alt="simple card" id="card4" style="cursor: pointer;  margin-top: 10px; display: none;" onclick="clickEvent(event)"> -->
         </ul>
 
     </div>