btn dashboard new window

2 years ago · a113854bd0
parent 16d0209313
commit a113854bd0
4 changed files with 163 additions and 147 deletions
--- a/View/src/CSS/Enigme.css
+++ b/View/src/CSS/Enigme.css
@ -31,10 +31,20 @@ ul {

 a{
  color: white;
+  cursor: pointer;
  text-decoration: none !important;
  font-family: Equinox, sans-serif;
 }

+a:hover{
+  color: #44fff6;
+  transition: all 0.4s ease-in-out;
+  -webkit-transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
+  -ms-transition: all 0.4s ease-in-out;
+  -o-transition: all 0.4s ease-in-out;
+}
+
 /***** Text CSS *****/

 p{
@ -80,7 +90,7 @@ h1, h2, h3, h4, h5, h6 {

 .btn{
  position: relative;
-  width: 120px;
+  width: 130px;
  height: 60px;
  background: transparent;
 }
--- a/View/src/JS/baseMulti.js
+++ b/View/src/JS/baseMulti.js
@ -1,131 +1,135 @@
 function run() {
-    const terminal = document.getElementById("console");
-    const runner = new BrythonRunner({
-      stdout: {
-        write(content) {
-          terminal.innerHTML += content;
-          terminal.scrollTop = terminal.scrollHeight;
-        },
-        flush() {},
+  const terminal = document.getElementById("console");
+  const runner = new BrythonRunner({
+    stdout: {
+      write(content) {
+        terminal.innerHTML += content;
+        terminal.scrollTop = terminal.scrollHeight;
      },
-      stderr: {
-        write(content) {
-          terminal.innerHTML += content;
-          terminal.scrollTop = terminal.scrollHeight;
-        },
-        flush() {},
+      flush() {},
+    },
+    stderr: {
+      write(content) {
+        terminal.innerHTML += content;
+        terminal.scrollTop = terminal.scrollHeight;
      },
-      stdin: {
-        async readline() {
-          terminal.innerHTML += "\n";
-          terminal.scrollTop = terminal.scrollHeight;
-          var userInput = prompt();
-          return userInput;
-        },
-        flush() {},
+      flush() {},
+    },
+    stdin: {
+      async readline() {
+        terminal.innerHTML += "\n";
+        terminal.scrollTop = terminal.scrollHeight;
+        var userInput = prompt();
+        return userInput;
      },
-    });
-    var code = editor.getValue();
-    runner.runCode(code);
-    setTimeout(() => {
-      runner.stopRunning();
-    }, 10 * 1000);
-  }
+      flush() {},
+    },
+  });
+  var code = editor.getValue();
+  runner.runCode(code);
+  setTimeout(() => {
+    runner.stopRunning();
+  }, 10 * 1000);
+}

-  function run_init() {
-    if (document.getElementById("console") != "") {
-      document.getElementById("console").innerHTML = "";
-    }
-    run();
+function run_init() {
+  if (document.getElementById("console") != "") {
+    document.getElementById("console").innerHTML = "";
  }
+  run();
+}

-  var editor = ace.edit("editor");
-  editor.container.style.opacity = 0.85;
-  editor.setTheme("ace/theme/vibrant_ink");
-  editor.getSession().setMode("ace/mode/python");
-  editor.setFontSize("16px");
-  editor.setOptions({
-    enableLiveAutocompletion: true,
-    copyWithEmptySelection: true,
-    showGutter: true,
-    useWrapMode: true, // wrap text to view
-    indentedSoftWrap: false,
-  });
+var editor = ace.edit("editor");
+editor.container.style.opacity = 0.85;
+editor.setTheme("ace/theme/vibrant_ink");
+editor.getSession().setMode("ace/mode/python");
+editor.setFontSize("16px");
+editor.setOptions({
+  enableLiveAutocompletion: true,
+  copyWithEmptySelection: true,
+  showGutter: true,
+  useWrapMode: true, // wrap text to view
+  indentedSoftWrap: false,
+});

-  //Function that execute given code and return the result in a given element by id
+//Function that execute given code and return the result in a given element by id

-  function exec(code, id) {
-    const terminal = document.getElementById("console");
-    terminal.innerHTML = "";
-    const runner = new BrythonRunner({
-      stdout: {
-        write(content) {
-          if (id == "code") {
-            retourCode = content;
-          }
-          if (id == "solution") {
-            retourSolution = content;
-          }
-        },
-        flush() {},
+function exec(code, id) {
+  const terminal = document.getElementById("console");
+  terminal.innerHTML = "";
+  const runner = new BrythonRunner({
+    stdout: {
+      write(content) {
+        if (id == "code") {
+          retourCode = content;
+        }
+        if (id == "solution") {
+          retourSolution = content;
+        }
      },
-      stderr: {
-        write(content) {
-          if (id == "solution") {
-            retourSolution = "ERROR";
-          }
-          terminal.innerHTML += content;
-          terminal.scrollTop = terminal.scrollHeight;
-        },
-        flush() {},
+      flush() {},
+    },
+    stderr: {
+      write(content) {
+        if (id == "solution") {
+          retourSolution = "ERROR";
+        }
+        terminal.innerHTML += content;
+        terminal.scrollTop = terminal.scrollHeight;
      },
-      stdin: {
-        async readline() {
-          terminal.innerHTML += "\n";
-          terminal.scrollTop = terminal.scrollHeight;
-          var userInput = prompt();
-          return userInput;
-        },
-        flush() {},
+      flush() {},
+    },
+    stdin: {
+      async readline() {
+        terminal.innerHTML += "\n";
+        terminal.scrollTop = terminal.scrollHeight;
+        var userInput = prompt();
+        return userInput;
      },
-    });
-    runner.runCode(code);
-    setTimeout(() => {
-      runner.stopRunning();
-    }, 10 * 1000);
-  }
+      flush() {},
+    },
+  });
+  runner.runCode(code);
+  setTimeout(() => {
+    runner.stopRunning();
+  }, 10 * 1000);
+}

-  /**
-   * It checks if the code in the editor as the same result as the solution.
-   */
-  function check() {
-    if (retourSolution == "ERROR") {
-      result.innerHTML = "Il semblerait qu'il y a une erreur dans ton code :/";
-    } else if (retourSolution == retourCode) {
-      result.innerHTML = "Bien joué";
-      document.getElementById("next").style.display = "flex";
-    } else {
-      result.innerHTML = "Mauvaise réponse";
-    }
+/**
+ * It checks if the code in the editor as the same result as the solution.
+ */
+function check() {
+  if (retourSolution == "ERROR") {
+    result.innerHTML = "Il semblerait qu'il y a une erreur dans ton code :/";
+  } else if (retourSolution == retourCode) {
+    result.innerHTML = "Bien joué";
+    document.getElementById("next").style.display = "flex";
+  } else {
+    result.innerHTML = "Mauvaise réponse";
  }
+}

+/**
+ * If the help is displayed, hide it. Otherwise, display it.
+ */
+function displayHelp() {
+  var help = document.getElementsByClassName("help");

-  
-  /**
-   * If the help is displayed, hide it. Otherwise, display it.
-   */
-  function displayHelp() {
-    var help = document.getElementsByClassName("help");
-  
-    if (help[0].style.display == "block") {
-      for (var i = 0; i < help.length; i++) {
-        help[i].style.display = "none";
-      }
-      return;
-    }
-  
+  if (help[0].style.display == "block") {
    for (var i = 0; i < help.length; i++) {
-      help[i].style.display = "block";
+      help[i].style.display = "none";
    }
+    return;
+  }
+
+  for (var i = 0; i < help.length; i++) {
+    help[i].style.display = "block";
  }
+}

+/**
+ * It opens a new window with the name dashboard.html and the size of 1000x450.
+ */
+function dashboard() {
+  window.open("dashboard.html", "", "width=1000, height=450");
+}
--- a/View/src/pages/Multijoueur/Partie.html
+++ b/View/src/pages/Multijoueur/Partie.html
@ -26,34 +26,23 @@
    <!-- First Row -->
    <div class="row py-4 d-flex justify-content-between user-select-none">
      <div class="col d-flex align-items-center px-0">
-        <a class="material-icons pl-0" id="home" href="index.php?action=goToHome"
+        <a class="material-icons pl-0" id="home" href="index.php?action=quitGame"
          style="font-size: 40px; color: white">home</a>
      </div>
+      
      <div class="col-4 d-flex align-items-center justify-content-center px-0">
-        <button>Next</button>
+        <a class="px-3 py-2"><b>Passer l'énigme</b></a>
      </div>
-      <!-- <div class="col-1 d-flex align-items-center justify-content-end px-0">
-        <a class="material-icons pl-0" id="backArrow" 
-          href="index.php?action=goToEnigme&ordre=<?php 
-          if ($enigme->getOrdre() == 1) 
-            { 
-              echo $enigme->getOrdre(); 
-            } 
-          else 
-            { 
-              echo $enigme->getOrdre() - 1; 
-            }?>"
-          style="font-size: 40px; color: white">< &nbsp;</a>
+
+      <div class="col-4 d-flex align-items-center justify-content-center px-0">
+        <p>Temps restant : </p>
+        <div id="countdown"></div>
      </div>
-      <div class="col-1 d-flex align-items-center px-0">
-        <a class="material-icons pl-0" id="nextArrow" 
-          href="index.php?action=goToEnigme&ordre=<?php echo $enigme->getOrdre() + 1; ?>"
-          style="font-size: 40px; color: white">&nbsp; ></a>
-      </div> -->
      <button style="background-color: transparent; border: none; outline: none;" onclick="displayHelp()"
        class="col d-flex align-items-center">
-        <div class="col text-right px-2">
-          <p class="" style="font-size: 14px; color: white"><b>Besoin d'aide ?</b></p>
+        <div class="col"></div>
+        <div class="col-3 d-flex justify-content-end px-2" style="width:fit-content">
+          <p class="mr-3" style="font-size: 16px; font-family: Equinox; color: white;"><b>Besoin d'aide ?</b></p>
        </div>
        <div class="col-1 text-right">
          <img src="View/assets/img/Foxy.png" alt="Logo" class="rounded-circle moving-fox"
@ -117,16 +106,21 @@
          class="p-3 rounded"></textarea>

        <div class="row pt-5 text-center" style="cursor: pointer">
-          <div class="col-6">
+          <div class="col-4">
            <a onclick="run_init()" class="btn">
              <span>Run</span>
            </a>
          </div>
-          <div class="col-6">
+          <div class="col-4">
            <button onclick="submit()" class="btn" data-toggle="modal" data-target="#modal">
              <span>Submit</span>
            </button>
          </div>
+          <div class="col-4">
+            <a onclick="dashboard()" class="btn">
+              <span>Dashboard</span>
+            </a>
+          </div>
        </div>
      </div>
      <!-- End Third Column -->
@ -152,7 +146,9 @@
        </div>
        <div class="modal-footer">
          <a
-          href="index.php?action=enigmeMultiEnded&index=' . $index .'"
+          <?php
+          echo 'href="index.php?action=enigmeMultiEnded&index=' . $index .'"';
+          ?>
          class="btn" style="display: none" id="next"
          >
            <span>NEXT</span>
@ -167,7 +163,8 @@
    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/baseMulti.js"></script>
+    <script src="../../JS/baseMulti.js">
+    </script>
 </body>

 </html>
--- a/View/src/pages/Multijoueur/Partie.php
+++ b/View/src/pages/Multijoueur/Partie.php
@ -112,16 +112,21 @@
          class="p-3 rounded"></textarea>

        <div class="row pt-5 text-center" style="cursor: pointer">
-          <div class="col-6">
+          <div class="col-4">
            <a onclick="run_init()" class="btn">
              <span>Run</span>
            </a>
          </div>
-          <div class="col-6">
+          <div class="col-4">
            <button onclick="submit()" class="btn" data-toggle="modal" data-target="#modal">
              <span>Submit</span>
            </button>
          </div>
+          <div class="col-4">
+            <a onclick="dashboard()" class="btn">
+              <span>Dashboard</span>
+            </a>
+          </div>
        </div>
      </div>
      <!-- End Third Column -->