From b3074523210b53b4b11203770936bda291cc3bf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Garnier?= <Noe.GARNIER@etu.uca.fr>
Date: Fri, 9 Dec 2022 14:11:28 +0100
Subject: [PATCH] refonte enigme solo

---
 WEB/Config/Config.php                         |   1 +
 WEB/Controller/UserController.php             |   3 +
 WEB/Model/UserModel.php                       |  10 +
 WEB/Model/scripted.db                         | Bin 53248 -> 53248 bytes
 WEB/View/src/JS/chouette.js                   |  26 +-
 .../src/pages/Enigme/CesarEncrypt copy.html   | 102 +++++++
 WEB/View/src/pages/Enigme/CesarEncrypt.html   | 273 ++++++++++++------
 WEB/View/src/pages/Enigme/Chouette.html       |   4 +-
 8 files changed, 312 insertions(+), 107 deletions(-)
 create mode 100644 WEB/View/src/pages/Enigme/CesarEncrypt copy.html

diff --git a/WEB/Config/Config.php b/WEB/Config/Config.php
index 3ce8574e..a19620de 100644
--- a/WEB/Config/Config.php
+++ b/WEB/Config/Config.php
@@ -30,6 +30,7 @@ $vues['next'] = 'View/src/pages/FirstTests/FirstTest';
 // Enigme
 $vues['enigme'] = 'View/src/pages/Enigme/Palindrome.html';
 $vues['chouette'] = 'View/src/pages/Enigme/Chouette.html';
+$vues['cesarEncrypt'] = 'View/src/pages/Enigme/CesarEncrypt.html';
 
 //Error
 $vues['erreur'] = 'View/src/pages/Erreur.php';
diff --git a/WEB/Controller/UserController.php b/WEB/Controller/UserController.php
index 7331bc7c..8b040bc7 100644
--- a/WEB/Controller/UserController.php
+++ b/WEB/Controller/UserController.php
@@ -29,6 +29,9 @@ class UserController
                 case "goToChouette" :
                     $model->goToChouette();
                     break;
+                case "goToCesarEncrypt":
+                    $model->goToCesarEncrypt();
+                    break;
                 case "goToQueue":
                     $model->goToQueue();
                     break;
diff --git a/WEB/Model/UserModel.php b/WEB/Model/UserModel.php
index 1d91e25b..ed20225b 100644
--- a/WEB/Model/UserModel.php
+++ b/WEB/Model/UserModel.php
@@ -61,6 +61,16 @@ class UserModel
             require($rep . $vues['erreur']);
         }
     }
+    public function goToCesarEncrypt()
+    {
+        global $rep, $vues, $error;
+        try {
+            require($rep . $vues['cesarEncrypt']);
+        } catch (Exception $e) {
+            $error = "404";
+            require($rep . $vues['erreur']);
+        }
+    }
 
     public function goToTest()
     {
diff --git a/WEB/Model/scripted.db b/WEB/Model/scripted.db
index c43c9bfd2247ed178e2823ba43deaee0aeafb040..5cfd9cb783163a4b794df4276d0454110f0d1a24 100644
GIT binary patch
delta 173
zcmZozz}&Ead4e=!>O>i5#?*}oOZd5%`577b*YZd6Gj0|X_{<j-!OW&B*~rR~Qd*Fo
zSK^SKo0yrSmz<vq;j0)`su&um82Y<~hJ={8JEmGVCzlq4<s~IKJL;vCdiy0B2ATU?
zCK;3mTUI(3hk7Jih8U)m`9%gLmrjnBUkSACBm@6R{`dU%HVZ23<`)%V)@4Muih1)r
HeWe8e(ycb}

delta 56
zcmZozz}&Ead4e=!%0wAw#*~c-OZYjM_@f#4*YZbi7F6)(pByc}5-4(yf&V@Kz0HCK
Mm-si|(^pym0Oz?9I{*Lx

diff --git a/WEB/View/src/JS/chouette.js b/WEB/View/src/JS/chouette.js
index ee951e5b..a023c69f 100644
--- a/WEB/View/src/JS/chouette.js
+++ b/WEB/View/src/JS/chouette.js
@@ -4,23 +4,23 @@ async function submit(){
   var test = editor.getValue()+`\n
 import random as r
 def chouetteVerif(valeur): 
-    res=list() 
-    for i in range(1, 7): 
-        for j in range(i, 7): 
-            for k in range(j, 7): 
-                if (i+j+k) == valeur: 
-                    res.append([i, j, k]) 
-    return res 
+  res=list() 
+  for i in range(1, 7): 
+    for j in range(i, 7): 
+      for k in range(j, 7): 
+        if (i+j+k) == valeur: 
+          res.append([i, j, k]) 
+  return res 
 
 def test_chouette(n):
   chouette(1)
-   listTest=[]
-   for i in range(0,n):
+  listTest=[]
+  for i in range(0,n):
     listTest.append(r.randint(3,18))
-   for i in listTest:
-       if(chouette(i)!=chouetteVerif(i)):
-           return False
-   return True
+  for i in listTest:
+    if(chouette(i)!=chouetteVerif(i)):
+      return False
+  return True
 
 print(test_chouette(5))
   `;
diff --git a/WEB/View/src/pages/Enigme/CesarEncrypt copy.html b/WEB/View/src/pages/Enigme/CesarEncrypt copy.html
new file mode 100644
index 00000000..d943e819
--- /dev/null
+++ b/WEB/View/src/pages/Enigme/CesarEncrypt copy.html	
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Code César</title>
+  <link rel="stylesheet" href="../../CSS/Enigme.css"/>
+  <link rel="stylesheet" href="../../CSS/Home.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <style>
+    html{
+      background-image: url(../../../assets/img/Background4.jpg);
+    }
+  </style>
+</head>
+<body>
+  <div class="enigme">
+    <div class="titre_pre">
+      <div class="retour">
+          <a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
+      </div>
+      <div class="sign">
+        <h1>
+            <span class="fast-flicker">c</span>
+            <span>es</span>
+            <span class="flicker">a</span>
+            <span>r</span>
+        </h1>
+      </div><br>
+    </div> 
+    <h2>Consigne</h2><br>
+	    <p class="enonce">
+            Écrire une fonction Encrypt qui prend en argument un message et une clé et qui retourne le message crypté avec le code César.(les espace ne seront pas encodé.)
+	    </p><br><br>
+    <h2>Rappel</h2><br>
+    <p class="rappel">Le code César (ou chiffre de César ) est un chiffrement par substitution, 
+        <br>où chaque lettre est remplacée par une autre lettre se situant un peu plus loin dans l'alphabet . 
+        <br>Par exemple A avec une clé 2 devient C.
+    </p><br><br>
+    <h2>Exemple</h2><br>
+    <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
+    <p>'fbehu',3&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;cyber</p><br><br>
+    <h2>Aide</h2><br>
+    <p>
+        La fonction ord(char) de python permet de retourner l’Unicode (standard d’encodage de caractères) d'un caractère. Par exemple, ord('a') retourné '97' et ord('b’) retourne 98.
+    </p>
+  </div>
+  <div class='ace' id='editor'>def Encrypt(text, key):
+    result = ""
+    for i in range(len(text)):
+        char = text[i]
+        if(char==" "):
+            result+=" "
+        elif (char.isupper()):
+            result += chr((ord(char) + key-65) % 26 + 65)
+        else:
+            result += chr((ord(char) + key - 97) % 26 + 97)
+    return result</div>
+  <div class='compiler_class'>
+    <textarea id='console' readonly rows="30" cols="100"></textarea>
+    <div class="buttons">
+      <div>
+        <a onclick="run_init()" class="btn">
+          <span class="noAnimation">Run</span>
+        </a>
+        <a href="#m1-o" onclick="submit()" class="btn">
+          <span class="noAnimation">Submit</span>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-container" id="m1-o" style="--m-background: transparent;">
+    <div class="modal">
+      <div id="containerResult">
+        <h1 id="result"></h1>
+      </div>
+      <div class="buttons">
+        <div id="top">
+          <a href="#" class="btn">
+            <span class="noAnimation">x</span>
+          </a>
+        </div>
+        <div id="bottom">
+          <a href="CesarDecrypt.html" class="btn" id="fleche">
+            <span class="noAnimation">Next</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  
+
+  
+  <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+  <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../../JS/base.js"></script>
+  <script src="../../JS/cesarEncrypt.js"></script>
+</body>
+</html>
diff --git a/WEB/View/src/pages/Enigme/CesarEncrypt.html b/WEB/View/src/pages/Enigme/CesarEncrypt.html
index d943e819..8f7f7278 100644
--- a/WEB/View/src/pages/Enigme/CesarEncrypt.html
+++ b/WEB/View/src/pages/Enigme/CesarEncrypt.html
@@ -1,102 +1,191 @@
 <!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Code César</title>
-  <link rel="stylesheet" href="../../CSS/Enigme.css"/>
-  <link rel="stylesheet" href="../../CSS/Home.css">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <style>
-    html{
-      background-image: url(../../../assets/img/Background4.jpg);
-    }
-  </style>
-</head>
-<body>
-  <div class="enigme">
-    <div class="titre_pre">
-      <div class="retour">
-          <a class="material-icons" id="home" href="../Home.html" style="font-size:36px;color:white;">home</a>
-      </div>
-      <div class="sign">
-        <h1>
-            <span class="fast-flicker">c</span>
-            <span>es</span>
-            <span class="flicker">a</span>
-            <span>r</span>
-        </h1>
-      </div><br>
-    </div> 
-    <h2>Consigne</h2><br>
-	    <p class="enonce">
-            Écrire une fonction Encrypt qui prend en argument un message et une clé et qui retourne le message crypté avec le code César.(les espace ne seront pas encodé.)
-	    </p><br><br>
-    <h2>Rappel</h2><br>
-    <p class="rappel">Le code César (ou chiffre de César ) est un chiffrement par substitution, 
-        <br>où chaque lettre est remplacée par une autre lettre se situant un peu plus loin dans l'alphabet . 
-        <br>Par exemple A avec une clé 2 devient C.
-    </p><br><br>
-    <h2>Exemple</h2><br>
-    <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
-    <p>'fbehu',3&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;cyber</p><br><br>
-    <h2>Aide</h2><br>
-    <p>
-        La fonction ord(char) de python permet de retourner l’Unicode (standard d’encodage de caractères) d'un caractère. Par exemple, ord('a') retourné '97' et ord('b’) retourne 98.
-    </p>
-  </div>
-  <div class='ace' id='editor'>def Encrypt(text, key):
-    result = ""
-    for i in range(len(text)):
-        char = text[i]
-        if(char==" "):
-            result+=" "
-        elif (char.isupper()):
-            result += chr((ord(char) + key-65) % 26 + 65)
-        else:
-            result += chr((ord(char) + key - 97) % 26 + 97)
-    return result</div>
-  <div class='compiler_class'>
-    <textarea id='console' readonly rows="30" cols="100"></textarea>
-    <div class="buttons">
-      <div>
-        <a onclick="run_init()" class="btn">
-          <span class="noAnimation">Run</span>
-        </a>
-        <a href="#m1-o" onclick="submit()" class="btn">
-          <span class="noAnimation">Submit</span>
-        </a>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Code Cesar</title>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
+      integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
+      integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link rel="stylesheet" href="View/src/CSS/Enigme.css" />
+  </head>
+  <body>
+    <div class="container-fluid px-5">
+      <!-- First Row -->
+      <div class="row py-4">
+        <div class="col-9 d-flex align-items-center px-0">
+          <a
+            class="material-icons pl-0"
+            id="home"
+            href="index.php?action=goToHome"
+            style="font-size: 40px; color: white"
+            >home</a
+          >
+        </div>
+        <button
+          style="background-color: transparent; border: none"
+          onclick="displayHelp()"
+          class="col-3 d-flex align-items-center"
+        >
+          <div class="col-10 text-right px-3">
+            <p style="font-size: 14px; color: white"><b>Besoin d'aide ?</b></p>
+          </div>
+          <div class="col-2 text-right">
+            <img
+              src="View/assets/img/Foxy.png"
+              alt="Logo"
+              class="rounded-circle moving-fox"
+              style="border: 1px solid #44fff6; width: 60px; height: 60px"
+            />
+          </div>
+        </button>
       </div>
+      <!-- End First Row -->
+
+      <!-- Second Row -->
+      <div class="row">
+        <!-- First Column -->
+        <div
+          class="col-3 rounded p-3"
+          style="background-color: #222831; min-height: 80vh; height: auto"
+        >
+          <h2 class="text-left py-3" style="color: #44fff6; font-weight: 500">
+            Code Cesar
+          </h2>
+          <p>
+            Écrire une fonction <b style="color : violet">Encrypt</b> qui prend en argument un message et une clé 
+            et qui retourne le message crypté avec le code <b style="color: violet;">César</b>.(les espace ne seront pas encodé.)
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Rappel</h3>
+          <p>
+            Le code César (ou chiffre de César ) est un chiffrement par substitution, 
+            <br>où chaque lettre est remplacée par une autre lettre se situant un peu plus loin dans l'alphabet . 
+            <br>Par exemple A avec une clé 2 devient C.
+          </p>
+          <h3 class="text-left pb-3 pt-5" style="color: #44fff6">Exemple</h3>
+          <p>Entrée :&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Sortie :</p>
+          <p>'fbehu',3&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;cyber</p><br><br>
+          <h3
+            class="text-left pb-3 pt-5 help"
+            style="color: #44fff6; display: none"
+          >
+            Aide
+          </h3>
+          <p style="display: none" class="help">
+            La fonction <b style="color: violet;">ord(char)</b> de python permet de retourner l'<b style="color: red">Unicode</b> (standard d’encodage de caractères) d'un caractère. 
+            Par exemple, <b style="color: violet;">or('a')</b>  retourné '<b style="color: green;">97</b>' et <b style="color: violet;">ord('b'))</b>  retourne '<b style="color: green;">98</b>'.
+          </p>
+        </div>
+        <!-- End First Column -->
+
+        <!-- Second Column -->
+        <div class="col-5 pr-0">
+          <div class="ace rounded" id="editor">def estPalindrome(var):
     </div>
-  </div>
+        </div>
+        <!-- End Second Column -->
 
-  <div class="modal-container" id="m1-o" style="--m-background: transparent;">
-    <div class="modal">
-      <div id="containerResult">
-        <h1 id="result"></h1>
-      </div>
-      <div class="buttons">
-        <div id="top">
-          <a href="#" class="btn">
-            <span class="noAnimation">x</span>
-          </a>
+        <!-- Third Column -->
+        <div class="col-4">
+          <textarea
+            id="console"
+            readonly
+            style="width: 100%; min-height: 65vh; height: auto"
+            class="p-3 rounded"
+          ></textarea>
+
+          <div class="row pt-5 text-center" style="cursor: pointer">
+            <div class="col-6">
+              <a onclick="run_init()" class="btn">
+                <span>Run</span>
+              </a>
+            </div>
+            <div class="col-6">
+              <button
+                onclick="submit()"
+                class="btn"
+                data-toggle="modal"
+                data-target="#modal"
+              >
+                <span>Submit</span>
+              </button>
+            </div>
+          </div>
         </div>
-        <div id="bottom">
-          <a href="CesarDecrypt.html" class="btn" id="fleche">
-            <span class="noAnimation">Next</span>
-          </a>
+        <!-- End Third Column -->
+      </div>
+      <!-- End Second Row -->
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="modal"
+      tabindex="-1"
+      role="dialog"
+      aria-labelledby="exampleModalCenterTitle"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h2
+              class="modal-title"
+              id="exampleModalLongTitle"
+              style="color: black"
+            >
+              Results
+            </h2>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5 id="result" style="color: black"></h5>
+          </div>
+          <div class="modal-footer">
+            <a href="index.php?action=goToChouette" class="btn" style="display: none" id="next">
+              <span>NEXT</span>
+            </a>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  
-  
+    <!-- End Modal -->
 
-  
-  <script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
-  <script src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js" type="text/javascript" charset="utf-8"></script>
-  <script src="../../JS/base.js"></script>
-  <script src="../../JS/cesarEncrypt.js"></script>
-</body>
+    <script
+      src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script
+      src="https://raw.githack.com/pythonpad/brython-runner/master/lib/brython-runner.bundle.js"
+      type="text/javascript"
+      charset="utf-8"
+    ></script>
+    <script src="View/src/JS/base.js"></script>
+    <script src="View/src/JS/cesarEncrypt.js"></script>
+  </body>
 </html>
diff --git a/WEB/View/src/pages/Enigme/Chouette.html b/WEB/View/src/pages/Enigme/Chouette.html
index 1ec15cd7..df5f8b1c 100644
--- a/WEB/View/src/pages/Enigme/Chouette.html
+++ b/WEB/View/src/pages/Enigme/Chouette.html
@@ -168,7 +168,7 @@
             <h5 id="result" style="color: black"></h5>
           </div>
           <div class="modal-footer">
-            <a href="index.php?action=goToChouette" class="btn" style="display: none" id="next">
+            <a href="index.php?action=goToCesarEncrypt" class="btn" style="display: none" id="next">
               <span>NEXT</span>
             </a>
           </div>
@@ -188,6 +188,6 @@
       charset="utf-8"
     ></script>
     <script src="View/src/JS/base.js"></script>
-    <script src="View/src/JS/palindrome.js"></script>
+    <script src="View/src/JS/chouette.js"></script>
   </body>
 </html>