From 890db11772809114b4c3780ad5e53505af2a47fa Mon Sep 17 00:00:00 2001
From: augustin64 <augustin.lucas64@gmail.com>
Date: Sat, 14 May 2022 18:19:00 +0200
Subject: [PATCH] Add partial mobile support

---
 src/webserver/static/script.js | 45 +++++++++++++++++++++++++---------
 src/webserver/static/style.css | 24 +++++++++++++++++-
 2 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/webserver/static/script.js b/src/webserver/static/script.js
index 6cf2e39..f5f781f 100644
--- a/src/webserver/static/script.js
+++ b/src/webserver/static/script.js
@@ -13,12 +13,24 @@ var mouseX;
 var mouseY;
 var mouseDown = 0;
 
+const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+var canvasSize;
+
 function init() {
+    if (vw <= 1024) {
+        canvasSize = vw * 0.95;
+    } else {
+        canvasSize = 280;
+    }
+
     canvas = document.getElementById('digit-canvas');
     ctx = canvas.getContext('2d');
     
     ctx.fillStyle = "black";
     // Créer une zone de dessin
+    canvas.width = canvasSize;
+    canvas.height = canvasSize;
+
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
     if(ctx)
@@ -133,19 +145,20 @@ function sendJSON(data,callback){
 
 
 function getPrediction() {
-    let totalWidth = 280;
-    let totalHeight = 280;
+    let imageSize = 28;
+    let totalWidth = canvasSize;
+    let totalHeight = canvasSize;
     let curWidth = 0;
     let curHeight = 0;
-    let stepSize = 10;
+    let stepSize = totalWidth / imageSize;
 
     let tableau = [];
     let tmp_tableau = [];
 
-    while (curHeight < totalHeight) {
+    while (curHeight < totalHeight && tableau.length < imageSize) {
         curWidth = 0;
         tmp_tableau = [];
-        while (curWidth < totalWidth) {
+        while (curWidth < totalWidth  && tmp_tableau.length < imageSize) {
             data = ctx.getImageData(curWidth, curHeight, stepSize, stepSize);
             size = data.width * data.height;
             density = 0;
@@ -171,14 +184,22 @@ function getPrediction() {
         if (data["status"] != 200) {
             document.getElementById("result").innerHTML = "500 Internal Server Error";
         } else {
-            let resultat = document.getElementById("result");
-            resultat.innerHTML = "Résultat:";
-            let dict = {};
-            let i = 0;
-            data["data"].map((e) => { dict[e] = i; i++; });
-            let res = Object.keys(dict).sort().reverse();
+            let result = document.getElementById("result");
+            result.innerHTML = "Résultat:";
+            var elements = [];
+
+            for (let i=0; i < data["data"].length; i++) elements.push([data["data"][i], i]);
+            
+            elements.sort(function(a, b) {
+                a = a[1];
+                b = b[1];
+            
+                return a < b ? -1 : (a > b ? 1 : 0);
+            });
+
+            let res = elements.sort().reverse();
             for (let j=0; j < res.length; j++) {
-                resultat.innerHTML += "<br/>"+dict[res[j]]+" : "+res[j];
+                result  .innerHTML += "<br/>"+res[j][1]+" : "+res[j][0];
             }
         }
     })
diff --git a/src/webserver/static/style.css b/src/webserver/static/style.css
index 4794e71..c43788a 100644
--- a/src/webserver/static/style.css
+++ b/src/webserver/static/style.css
@@ -1,4 +1,26 @@
+body {
+    flex-direction: row;
+    display: flex;
+    overflow: hidden;
+    position: fixed;
+}
+
 #digit-canvas {
     border: 2px solid #e0e0e0;
     border-radius: 5px;
-}
\ No newline at end of file
+}
+
+#result {
+    margin: 3%;
+}
+
+/* For mobile devices */
+@media (max-width: 1024px) {
+    body {
+        display: inline;
+    }
+    #digit-canvas {
+        width: 95vw;
+        height: 95vw;
+    }
+}