responsiv

site/vue/js/class.js

@@ -136,7 +136,6 @@ class GameData {
 
     calculNombreSwitch();
     switchCreator(numberOfSwitch);
-    console.log(stage);
     createAllLinkSwitch();
 
     initAllSwitch();

site/vue/js/createElement.js

@@ -136,7 +136,6 @@ function createEnd() {
     }
   }
   function createLogique(x, y, id, type) {
-    console.log(layer);
     var imageObj = new Image();
     imageObj.onload = function () {
       var et = new Konva.Image({

site/vue/js/func.js

@@ -129,7 +129,6 @@ function changeLineColor(idLine) {
 }
 function changeLineColorInput(idLine, color) {
     let line = stage.findOne("#" + idLine);
-    console.log("changer");
     line.stroke(color);
 }
 function changeLineColorBlack(idLine) {
@@ -272,10 +271,8 @@ function calculNombreSwitch() {
 
 
 function resize() {
-    console.log(window.innerWidth);
     stage.scale({ x: 1, y: 1 });
     stage.draw();
-    console.log(stage);
 }
 
 function activeSwitchInput(event) {
@@ -370,7 +367,7 @@ function launchGameOne() {
     document.querySelector(".niveau").innerHTML = niveauActuel;
     timer.stop();
     timer.reset();
-    resetAllTabs();
+    resetAllTabs(false);
     gameOne();
 }
 
@@ -385,7 +382,7 @@ function closeGame() {
     timer.stop();
     document.querySelector("#mainPage").style.display = 'block';
     document.querySelector("#playPage").style.display = 'none';
-    resetAllTabs();
+    resetAllTabs(false);
     tutoCreateLayer();
 }
 var rotated = false;

site/vue/js/main.js

@@ -45,17 +45,24 @@ function tutoCreateLayer() {
     initEnd();
 }
 
-function resetAllTabs() {
+function resetAllTabs(save) {
-    switchs = [], lineCount = [], logiques = [], lines = [], endLines = [], end, switchsInfo = [], switchsInfoCopy = [], lineRemove = [];
+    if (!save) {
-    width = window.innerWidth - window.innerWidth / 100 * 10;
+        logiques = [];
-    height = window.innerHeight / 1.5;
+
-    timeEnd = 5;
+        numberPerColonne = [];
+        liveColonneNumber = [];
+        timeEnd = 5;
+        switchsInfoCopy = [];
+
+        numberOfSwitch = 0;
+
+        colonneTot = 0;
+    }
 
-    numberOfSwitch = 0;
+    switchs = [], lineCount = [], lines = [], endLines = [], end, switchsInfo = [], lineRemove = [];
 
-    colonneTot = 0;
+    width = (window.innerWidth - window.innerWidth / 100 * 10);
-    numberPerColonne = [];
+    height = window.innerHeight / 1.5;
-    liveColonneNumber = [];
 
     layer.destroyChildren();
 }
@@ -180,9 +187,9 @@ function createGameOne(niveau) {
                 logiqueCount++;
                 let type = null;
                 let x = 1;
-                if(isOuAllowed) x++;
+                if (isOuAllowed) x++;
-                if(isEtNonAllowed) x++;
+                if (isEtNonAllowed) x++;
-                if(isOuNonAllowed) x++;
+                if (isOuNonAllowed) x++;
                 let numberRandom = getRandomArbitrary(0, x);
                 switch (numberRandom) {
                     case 0:
@@ -220,20 +227,72 @@ function createGameOne(niveau) {
 
 }
 
+window.addEventListener('resize', changeCanvas);
 window.addEventListener('resize', changeStage);
 
+var rtime;
+var timeout = false;
+function changeCanvas() {
+    rtime = new Date();
+    if (timeout === false) {
+        timeout = true;
+        setTimeout(resizeend, 200);
+    }
+}
+
+function saveStage() {
+    resetAllTabs(true);
+    stage = new Konva.Stage({
+        container: 'play_container',
+        width: width,
+        height: height,
+    });
+    stage.add(layer);
+    logique2 = logiques;
+    logiques = [];
+    var logiqueCount = 0;
+    for (let i = 0; i < colonneTot; i++) {
+        liveColonneNumber[i] = [];
+    }
+    for (let i = 0; i < colonneTot; i++) {
+        for (let j = 0; j < numberPerColonne[i]; j++) {
+            insertLogiqueColonne("logique" + logiqueCount, logique2[logiqueCount].type, i);
+            logiqueCount++;
+        }
+    }
+    logiques.forEach(function (element) {
+        createLinkAuto(element.name);
+    });
+    calculNombreSwitch();
+    switchCreator(numberOfSwitch);
+    createAllLinkSwitch();
+
+    initAllSwitch();
+    createEnd();
+    initEnd();
+
+    checkAllSortieLogique();
+}
+
+function resizeend() {
+    if (new Date() - rtime < 200) {
+        setTimeout(resizeend, 200);
+    } else {
+        timeout = false;
+        saveStage();
+    }
+}
 
 function changeStage() {
     if (window.innerWidth <= 900) {
-        console.log("mobile");
         if (!mobile) {
+            console.log("mobile");
             stage.rotate(90);
             stage.x(stage.getX() + stage.height());
             mobile = true;
         }
     } else {
         stage.scaleX(window.innerWidth / windowWidth);
-        console.log(document.querySelector("#play_container").offsetHeight);
         stage.scaleY(window.innerHeight / windowHeight);
     }
 

site/vue/todo.todo

@@ -3,9 +3,9 @@ alt+d to set done
 
 Responsive :
     ☐ enlever les borders au format mobile
-    ☐ Faire en sorte que le canvas se réajuste
+    ✔ Faire en sorte que le canvas se réajuste @done(20-06-17 22:02)
-        `Piste`
+        `Piste`e canvas soit plus grand de base et le redimensionner par la suite (produit en croix pour simplement le repositionner => taille de base *4/5 puis on redivise)
-            Faire en sorte que le canvas soit plus grand de base et le redimensionner par la suite (produit en croix pour simplement le repositionner => taille de base *4/5 puis on redivise)
+            Faire en sorte que l
     Suite :
         ☐ Changer de direction lorsqu'on atteint un certain format
             `Piste`
@@ -27,6 +27,7 @@ Jeu :
 
 UI/UX :
     ☐ Trouver une police d'écriture bien pour le jeu
+    ☐ Changer la bar de temps pour que ce soit fluide
     ☐ Corriger les fautes d'orthographes
     ☐ Faire la traduction en anglais