Said : Fixing some issues..

IPreoject-CLientSide/main.py

@@ -1,7 +1,17 @@
-from flask import Flask, render_template, jsonify, Response, request
+import ast
+from flask import Flask, render_template, jsonify, Response, request, send_file
 import time
 import requests
 import json
+from PIL import Image
+from ast import literal_eval
+import ast
+from io import StringIO, BytesIO
+import numpy as np
+import io
+import cv2
+import base64
+
 
 app = Flask(__name__) 
 
@@ -12,13 +22,7 @@ def index():
 @app.route("/choose-game", methods=['POST', 'GET'])
 def choose_game():
     forward_message = "Moving Forward"
-    # Get game's modes ....
+   
-    # r = requests.get('//API-TO-GAME-SERVER')
-    # json_response = json.dumps(r.json())
-    # rspone = Response(json_response, content_type='application/json; charset=utf-8')
-    # response.headers.add('content-length', len(json_response))
-    # response.status_code = 200
-    # TO-DO : somthings with res ...
     
 
     return render_template('menu.html', forward_message=forward_message)
@@ -35,27 +39,56 @@ def rules():
 
 
 
-@app.route("/new-game", methods=['POST', 'GET'])
-def new_game():
-    return render_template('new-game.html') 
 
 @app.route("/join-game", methods=['POST', 'GET'])
 def join_game():
     return None
      # TO-DO
 
-API_URL1 = "http://192.168.37.69:50000"
     
-#GET PORTS :------------------------------------------------------
+
+API_URL1 = "http://192.168.37.69:50000"
 
 API_URL2 = "http://192.168.37.69:50000/port"
 
-# @app.route("/test", methods=['GET'])
+
-# def test():
+#------------------------------------------ Cards -----------------------------------------
-#     res = requests.get(API_URL2)
+def serve_pil_image(pil_img):
-#     port = res.json()
+    img_io = BytesIO()
-#     return 'Our port is :' + str(port.get('numport')) # our port
+    pil_img.save(img_io, 'JPEG', quality=70)
-#    # return port
+    img_io.seek(0)
+    return send_file(img_io, mimetype='image/jpeg')
+
+def stringToRGB(base64_string):
+    imgdata = base64.b64decode(str(base64_string))
+    image = Image.open(io.BytesIO(imgdata))
+    return cv2.cvtColor(np.array(image), cv2.COLOR_BGR2RGB)
+
+
+
+API_CARD = "http://192.168.37.69:50001/cards"
+
+@app.route("/new-game", methods=['POST', 'GET'])
+def getCards():
+        res = requests.get(API_CARD).json()
+        card = res.get('la_carte') # our port
+        cards_array = np.array(json.loads(card))
+        img = Image.fromarray(np.uint8(cards_array))
+        pil_img = serve_pil_image(img)
+        print(type(pil_img))
+        pil_img.direct_passthrough = False 
+        print(type(pil_img.data))
+        imageStream = io.BytesIO(pil_img.data)
+        imageFile = Image.open(imageStream)
+        print(type(imageFile))
+        buffer = io.BytesIO()
+        imageFile.save(buffer, format='JPEG')
+        print(type(imageFile))
+        card = imageFile.save("./static/images/temp/card1.jpg")
+        return render_template('new-game.html')
+        
+
+
 
 
 @app.route("/apitest", methods=['POST', 'GET'])
@@ -67,50 +100,12 @@ def apitest():
     # log the user out
     return render_template('test.html', X = x)
 
-# port = 0
 
-# def getPort():
-#     res = requests.get(API_URL2)
-#     port = res.json()
-#     return port.get('numport') # our port
-
-# port = getPort()
-
-# PORT = requests.get(API_URL2)
-
-
-
-
-
-# @app.route("/some-url", methods=['GET'])
-# def get_data():
-#     res = requests.get("http://my-api.com")
-#     return res.content
-
-
-#TEST Here ...
 
 @app.route("/getPixels", methods=['GET'])
 def getPixels():
     return render_template('test.html')
 
-# TODO : Req to Discovery service > CardManager
-# Get All cards > store
-# Send cards to the view
-# Manipulate each card
-# Implement the logic <> IA ):
-
-
-
-#TO-DO :
-   # WAIT CARDS 
-   # SEND UR RESPONSE
-   # SCORE ++ OR --
-   # IF SCORE
-   # Get the timer
-   # Show it
-   #  
-
 
 
 if __name__ == "__main__":

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

@@ -167,13 +167,6 @@ function clickEvent2(e) {
             } 
     }  
 
-    // var xhr = new XMLHttpRequest();
-    // xhr.open("POST", yourUrl, true);
-    // xhr.setRequestHeader('Content-Type', 'application/json');
-    // xhr.send(JSON.stringify({
-    //     x: x,
-    //     y: y
-    // }))
 }
 
 

IPreoject-CLientSide/static/js/test.js

@@ -1,4 +0,0 @@
-output = 4;
-function so() {
-    return output;
-}

IPreoject-CLientSide/templates/main.html

@@ -37,9 +37,9 @@
             <img class="my-5 explanations__img" src="" alt="Rule 1 ..." style="width:50%">
             <p class="explanations">Choose the time of the part..</p>
             <img class="my-5 explanations__img" src="" alt="Rule 2 ..." style="width:50%">
-            <p class="explanations">Click on the top card to detect the commun object with the bottom card..</p>
+            <p class="explanations">Click on the top card to detect the common object with the bottom card..</p>
             <img class="my-5 explanations__img" src="" alt="Rule 3 ..." style="width:50%">
-            <p class="explanations">------------------</p>
+            <p class="explanations">Accept the challenge to start the game, good luck to Spot it :)</p>
         </div>
     </div>
 

IPreoject-CLientSide/templates/new-game.html

@@ -33,7 +33,8 @@
         <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="simple 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/card3.png" alt="simple card" id="card2" style="cursor: pointer;  margin-top: 10px; display: none;" onclick="clickEvent2(event)"> -->
             <!-- <img src="../static/images/icon.png" alt="simple card" class="gcard diapo" onclick="boutons(-1)"> -->

IPreoject-CLientSide/templates/rules.html

@@ -92,7 +92,7 @@
             <p class="explanations" style="color: rgb(83, 83, 87);"><i class="fa fa-gavel" aria-hidden="true"></i> Rule 1 : Choose the necessary time to play the part ..</p>
             <!-- <img class="my-5 explanations__img" src="" alt="" style="width:50%"> -->
             <p class="explanations" style="color: rgb(83, 83, 87);"><i class="fa fa-gavel" aria-hidden="true"></i> Rule 2 : Click on the top card to detect the common object with the bottom card..</p>
-            <p class="explanations" style="color: rgb(83, 83, 87);"><i class="fa fa-gavel" aria-hidden="true"></i> Rule 3 : Accept the challenge to start the game, the goog luck to Spot it :)</p>
+            <p class="explanations" style="color: rgb(83, 83, 87);"><i class="fa fa-gavel" aria-hidden="true"></i> Rule 3 : Accept the challenge to start the game, good luck to Spot it :)</p>
             <img class="my-5 explanations__img" src="" alt="" style="width:30%">
         </div>
         <h3 style="color: rgb(37, 37, 37);">  Choose the time to solve it :)</h3> 

IPreoject-CLientSide/templates/test.html

@@ -1,104 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>Cards's Game</title>
-    
-     <style>
-           
-     </style>
-</head>
-<body>
-    
-    <canvas id="canvas" width="150" height="150"></canvas>
-    <div id="status"></div><br>
-    <div id="color" style="width:30px;height:30px;"></div>
-    <p>
-        ---- POSITION and COLOR ----
-    </p>
-
-
-<p>
-    {{X}}
-</p>
-   
-
-    <script>
-        var canvas = document.getElementById("canvas");
-
-        function getElementPosition(obj) {
-            var curleft = 0, curtop = 0;
-            if (obj.offsetParent) {
-                do {
-                    curleft += obj.offsetLeft;
-                    curtop += obj.offsetTop;
-                } while (obj = obj.offsetParent);
-                return { x: curleft, y: curtop };
-            }
-            return undefined;
-        }
-
-        function getEventLocation(element,event){
-                var pos = getElementPosition(element);
-            
-            return {
-                    x: (event.pageX - pos.x),
-                y: (event.pageY - pos.y)
-            };
-        }
-
-        function rgbToHex(r, g, b) {
-            if (r > 255 || g > 255 || b > 255)
-                throw "Invalid color component";
-            return ((r << 16) | (g << 8) | b).toString(16);
-        }
-
-        function drawImageFromWebUrl(sourceurl){
-            var img = new Image();
-
-            img.addEventListener("load", function () {
-                // The image can be drawn from any source
-                canvas.getContext("2d").drawImage(img, 0, 0, img.width,    img.height, 0, 0, canvas.width, canvas.height);
-                
-            });
-
-            img.setAttribute("src", sourceurl);
-        }
-        // Draw a base64 image because this is a fiddle, and if we try with an image from URL we'll get tainted canvas error
-        // Read more about here : http://ourcodeworld.com/articles/read/182/the-canvas-has-been-tainted-by-cross-origin-data-and-tainted-canvases-may-not-be-exported
-        drawImageFromWebUrl("../static/images/test.jpg");
-
-        canvas.addEventListener("mousemove",function(e){
-            var eventLocation = getEventLocation(this,e);
-            var coord = "x=" + eventLocation.x + ", y=" + eventLocation.y;
-            
-            // Get the data of the pixel according to the location generate by the getEventLocation function
-            var context = this.getContext('2d');
-            var pixelData = context.getImageData(eventLocation.x, eventLocation.y, 1, 1).data; 
-
-            // If transparency on the image
-            if((pixelData[0] == 0) && (pixelData[1] == 0) && (pixelData[2] == 0) && (pixelData[3] == 0)){
-                        coord += " (Transparent color detected, cannot be converted to HEX)";
-            }
-            
-            var hex = "#" + ("000000" + rgbToHex(pixelData[0], pixelData[1], pixelData[2])).slice(-6);
-            
-            // Draw the color and coordinates.
-            document.getElementById("status").innerHTML = coord;
-            document.getElementById("color").style.backgroundColor = hex;
-        },false);
-
-
-
-        document.getElementById('logout').onclick = function logout() {
-        let token = localStorage.getItem('globalTime')
-
-    // use your favourite AJAX lib to send the token to the server as e.g. JSON
-
-    // redirect user to e.g. landing page of app if logout successul, show error otherwise
-                }
-
-    </script>
-</body>
-
-</html>

IPreoject-CLientSide/utils/test.py

@@ -1,20 +0,0 @@
-# import js2py
-
-# js = """../static/js/test.js""" 
-
-# context = js2py.EvalJs()
-# context.execute(js)
-# print(context.output)
-import execjs
-
-
-print(execjs.eval("'red yellow blue'.split(' ')"))
-
-ctx = execjs.compile("""
-     function add(x, y) {
-           return x + y;
-        }
-
-""")
-
-print(ctx.call("add", 1, 2))