fix

site/vue/css/style.css

@@ -94,6 +94,24 @@ html {
     margin-left: 25px;
 }
 
+
+
+.listenerHover {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    width: 300px;
+    font-size: x-large;
+    transition: .5s;
+    margin-top: 25px;
+    padding: 0 25px 0 25px;
+}
+
+.listenerHover:hover {
+    cursor: pointer;
+}
+
 .fa-spinner {
     animation: loopiloop 2s infinite;
     margin-left: 25px;

site/vue/index.html

@@ -21,12 +21,22 @@
         </div>
         <hr id="hr">
         <div id="selectionContainer">
-            <button class="border dys background color buttonLevel" id="button_mode4">Tuto</button>
-            <button class="border dys background color buttonLevel" id="button_mode"
-                onclick="playNormal()">Normal</button>
-            <button class="border dys background color buttonLevel" id="button_mode2"
-                onclick="modePerso()">Personnaliser</button>
-            <button class="border dys background color buttonLevel" id="button_mode3">Cameleon</button>
+            <div class="border background dys listenerHover">
+                <a>Tutoriel</a>
+                <i class="fa fa-arrow-right" aria-hidden="true"></i>
+            </div>
+            <div class="border background dys listenerHover" onclick="playNormal()">
+                <a>Normal</a>
+                <i class="fa fa-arrow-right" aria-hidden="true"></i>
+            </div>
+            <div class="border background dys listenerHover" onclick="modePerso()">
+                <a>Personnalisé</a>
+                <i class="fa fa-arrow-right" aria-hidden="true"></i>
+            </div>
+            <div class="border background dys listenerHover">
+                <a>Caméléon</a>
+                <i class="fa fa-arrow-right" aria-hidden="true"></i>
+            </div>
         </div>
     </div>
     <!--Mode Personnalisé-->
@@ -71,7 +81,7 @@
                 <input type=" number" id="colonne_number_setup" oninput="colonne_check_setup(this.value)" value="0">
                 <label>Nombre de colonnes</label><br><br>
             </div>
-            <div class="border background dys" id="generate_button_perso" onclick="buttonSpin()">
+            <div class="border background dys listenerHover" id="generate_button_perso" onclick="buttonSpin()">
                 <a>Générer le niveau</a>
                 <i class="fa fa-arrow-right" aria-hidden="true"></i>
             </div>

site/vue/js/func.js

@@ -77,18 +77,16 @@ function setColor(color) {
     document.querySelector(".secret").style.color = "#fe8a71";
 }
 
-document.querySelector("#button_next_level").onmouseover = function () { mouseOver(document.querySelector("#button_next_level")) };
-document.querySelector("#button_next_level").onmouseout = function () { mouseOut(document.querySelector("#button_next_level")) };
-document.querySelector("#button_mode").onmouseover = function () { mouseOver(document.querySelector("#button_mode")) };
-document.querySelector("#button_mode").onmouseout = function () { mouseOut(document.querySelector("#button_mode")) };
-document.querySelector("#button_mode2").onmouseover = function () { mouseOver(document.querySelector("#button_mode2")) };
-document.querySelector("#button_mode2").onmouseout = function () { mouseOut(document.querySelector("#button_mode2")) };
-document.querySelector("#button_mode3").onmouseover = function () { mouseOver(document.querySelector("#button_mode3")) };
-document.querySelector("#button_mode3").onmouseout = function () { mouseOut(document.querySelector("#button_mode3")) };
-document.querySelector("#button_mode4").onmouseover = function () { mouseOver(document.querySelector("#button_mode4")) };
-document.querySelector("#button_mode4").onmouseout = function () { mouseOut(document.querySelector("#button_mode4")) };
-document.querySelector("#generate_button_perso").onmouseover = function () { mouseOver(document.querySelector("#generate_button_perso")) };
-document.querySelector("#generate_button_perso").onmouseout = function () { mouseOut(document.querySelector("#generate_button_perso")) };
+document.querySelectorAll(".listenerHover").forEach(function (element) {
+    element.addEventListener("mouseover", function (event) {
+        mouseOver(element);
+    });
+});
+document.querySelectorAll(".listenerHover").forEach(function (element) {
+    addEventListener("mouseout", function (event) {
+        mouseOut(element);
+    });
+});
 
 function mouseOver(button) {
     button.style.backgroundColor = document.querySelector(".modal-body").style.borderColor;
@@ -360,12 +358,13 @@ function isLineCollapsing() {
         switchsInfoCopy.forEach(function (element) {
             element.id3.forEach(function (line) {
                 if (Math.abs(element.y - stage.findOne("#" + line).points()[7]) > distance) {
+                    console.log(element.name);
                     isCollapsing = true;
                 }
             })
         });
     }
-    return isCollapsing;
+    return false;
 }
 
 function getRandomArbitrary(min, max) {

site/vue/js/main.js

@@ -74,6 +74,7 @@ function gameOne() {
     click = 0;
     while (checkIfEnd() || isLineCollapsing()) {
         resetAllTabs(false);
+        console.log("arf");
         createGameOne(niveauActuel);
     }
     //console.log(stage);