responsive

site/vue/css/style.css

@@ -24,6 +24,11 @@ body {
     font-size: 8vh;
 }
 
+#play_container{
+    display: flex;
+    height: 100%;
+}
+
 #menu-selection {
     position: absolute;
     left: 0;
@@ -245,6 +250,8 @@ hr{
 }
 #playPage{
     display: none;
+    flex-direction: column;
+    height: 50%;
 }
 .border{
     border-radius: 15px;
@@ -271,4 +278,22 @@ hr{
 .fa-star{
     font-size: 10vh;
     cursor: default;
+}
+
+@media screen and (max-width:900px){
+    .fa {
+        font-size: 1em;
+    }
+    #titleGame{
+        font-size: 2em;
+        margin-top:35%;
+    }
+    .far {
+        font-size:5em;
+        margin: 0;
+
+    }
+    #setting_int{
+        font-size: 0.6em;
+    }
 }

site/vue/js/const.js

@@ -41,4 +41,11 @@ var liveColonneNumber = [];
 
 var niveauActuel = 1;
 
-var isTuto = true;
+var isTuto = true;
+
+//window
+
+var windowWidth = 0;
+var windowHeight = 0;
+
+var mobile = false;

site/vue/js/func.js

@@ -1,8 +1,9 @@
 
-function openModal(modal) {
-    var modal = document.getElementById(modal);
+function openModal(modalId) {
+    var modal = document.getElementById(modalId);
     modal.style.display = "block";
 
+
 }
 function closeModal(modal) {
     var modal = document.getElementById(modal);
@@ -37,7 +38,7 @@ function dysFont() {
 function setColor(color) {
     if (color == "black") {
         var backgroundToChange = document.querySelectorAll(".background");
-        backgroundToChange.forEach(function(element){
+        backgroundToChange.forEach(function (element) {
             element.style.backgroundColor = blackColor;
         });
         document.body.style.color = whiteColor;
@@ -46,14 +47,14 @@ function setColor(color) {
         hr.forEach(function (item) {
             item.setAttribute("style", "border : 3px solid " + whiteColor);
         });
-        document.querySelectorAll(".border").forEach(function(element){
+        document.querySelectorAll(".border").forEach(function (element) {
             element.style.border = "5px solid" + whiteColor;
         });
 
     } else {
         document.body.style.color = blackColor;
         var backgroundToChange = document.querySelectorAll(".background");
-        backgroundToChange.forEach(function(element){
+        backgroundToChange.forEach(function (element) {
             element.style.backgroundColor = whiteColor;
         });
         document.getElementById("setting_int").style.color = blackColor;
@@ -61,7 +62,7 @@ function setColor(color) {
         hr.forEach(function (item) {
             item.setAttribute("style", "border : 3px solid " + blackColor);
         });
-        document.querySelectorAll(".border").forEach(function(element){
+        document.querySelectorAll(".border").forEach(function (element) {
             element.style.border = "5px solid" + blackColor;
         });
     }
@@ -126,7 +127,7 @@ function changeLineColor(idLine) {
     var colorline = line.stroke() == colorLineActive ? colorLineInnactive : colorLineActive;
     line.stroke(colorline);
 }
-function changeLineColorInput(idLine,color) {
+function changeLineColorInput(idLine, color) {
     let line = stage.findOne("#" + idLine);
     console.log("changer");
     line.stroke(color);
@@ -248,7 +249,7 @@ function checkEnd() {
     }
 }
 
-function nextLevel(){
+function nextLevel() {
     niveauActuel++;
     timeTot = timeTot + timer.getTimeValues().seconds;
     launchGameOne();
@@ -299,24 +300,24 @@ document.querySelector("#active_line_picker").addEventListener("input", activeLi
 document.querySelector("#inactive_line_picker").addEventListener("input", inactiveLineInput, false);
 document.querySelector("#inactive_end_picker").addEventListener("input", inactiveEndInput, false);
 
-function changeAllSwitchColorActive(color){
-    switchsInfoCopy.forEach(function(element){
-        var switche = stage.findOne("#"+element.id);
-        if(switche.fill() == colorSwitchActiveBackground){
+function changeAllSwitchColorActive(color) {
+    switchsInfoCopy.forEach(function (element) {
+        var switche = stage.findOne("#" + element.id);
+        if (switche.fill() == colorSwitchActiveBackground) {
             switche.fill(color);
         }
     });
     colorSwitchActiveBackground = color;
     layer.draw();
 }
-function changeEndColorInActive(color){
+function changeEndColorInActive(color) {
     stage.findOne("#end").fill(color);
     layer.draw();
 }
-function changeAllSwitchColorInActive(color){
-    switchsInfoCopy.forEach(function(element){
-        var switche = stage.findOne("#"+element.id);
-        if(switche.fill() == colorSwitchInnactiveBackground){
+function changeAllSwitchColorInActive(color) {
+    switchsInfoCopy.forEach(function (element) {
+        var switche = stage.findOne("#" + element.id);
+        if (switche.fill() == colorSwitchInnactiveBackground) {
             switche.fill(color);
         }
     });
@@ -324,48 +325,48 @@ function changeAllSwitchColorInActive(color){
     layer.draw();
 }
 
-function changeAllLineColorActive(color){
+function changeAllLineColorActive(color) {
     var line1 = stage.findOne("#line2");
     var line2 = stage.findOne("#line3");
     var line3 = stage.findOne("#line4");
-    if(line1.stroke() === colorLineActive){
+    if (line1.stroke() === colorLineActive) {
         line1.stroke(color);
     }
-    if(line2.stroke() === colorLineActive){
+    if (line2.stroke() === colorLineActive) {
         line2.stroke(color);
     }
-    if(line3.stroke() === colorLineActive){
+    if (line3.stroke() === colorLineActive) {
         line3.stroke(color);
     }
     colorLineActive = color;
     layer.draw();
 }
-function changeAllLineColorInActive(color){
+function changeAllLineColorInActive(color) {
     var line1 = stage.findOne("#line2");
     var line2 = stage.findOne("#line3");
     var line3 = stage.findOne("#line4");
-    if(line1.stroke() === colorLineInnactive){
+    if (line1.stroke() === colorLineInnactive) {
         line1.stroke(color);
     }
-    if(line2.stroke() === colorLineInnactive){
+    if (line2.stroke() === colorLineInnactive) {
         line2.stroke(color);
     }
-    if(line3.stroke() === colorLineInnactive){
+    if (line3.stroke() === colorLineInnactive) {
         line3.stroke(color);
     }
     colorLineInnactive = color;
     layer.draw();
 }
 
-function play(){
+function play() {
     niveauActuel = 1;
     document.querySelector("#mainPage").style.display = 'none';
-    document.querySelector("#playPage").style.display = 'block';
+    document.querySelector("#playPage").style.display = 'flex';
     timeTot = 0;
     launchGameOne();
 }
 
-function launchGameOne(){
+function launchGameOne() {
     document.querySelector(".niveau").innerHTML = niveauActuel;
     timer.stop();
     timer.reset();
@@ -373,14 +374,14 @@ function launchGameOne(){
     gameOne();
 }
 
-function clearArray(arr){
-    while(arr.length > 0) {
+function clearArray(arr) {
+    while (arr.length > 0) {
         arr.pop();
     }
-    return arr.splice(0,arr.length);
+    return arr.splice(0, arr.length);
 }
 
-function closeGame(){
+function closeGame() {
     timer.stop();
     document.querySelector("#mainPage").style.display = 'block';
     document.querySelector("#playPage").style.display = 'none';
@@ -388,10 +389,10 @@ function closeGame(){
     tutoCreateLayer();
 }
 var rotated = false;
-function flip(){
-    document.querySelectorAll(".fa").forEach(function(element){
+function flip() {
+    document.querySelectorAll(".fa").forEach(function (element) {
         deg = rotated ? 0 : 360;
-        element.style.transform = 'rotate('+deg+'deg)'; 
+        element.style.transform = 'rotate(' + deg + 'deg)';
     });
     rotated = !rotated;
 }

site/vue/js/init.js

@@ -1,7 +1,7 @@
 function initAllSwitch() {
   switchs.forEach(function (element) {
     let switche = stage.findOne("#" + element);
-    switche.on('click', function () {
+    switche.on('click touchstart', function () {
       
       let colorrect = switche.fill() == colorSwitchInnactiveBackground ? colorSwitchActiveBackground : colorSwitchInnactiveBackground;
       switche.fill(colorrect);
@@ -10,7 +10,7 @@ function initAllSwitch() {
       layer.draw();
       checkEnd(); 
     });
-    switche.on('mouseover', function () {
+    switche.on('mousedown', function () {
       document.body.style.cursor = "pointer";
     });
     switche.on('mouseout', function () {

site/vue/js/main.js

@@ -20,6 +20,7 @@ tutoCreateLayer();
 function tutoCreateLayer() {
     isTuto = true;
     width = window.innerWidth - window.innerWidth / 100 * 30;
+    height = window.innerHeight /2.5;
     stage = new Konva.Stage({
         container: 'setting_container',
         width: width,
@@ -64,6 +65,8 @@ function gameOne() {
 }
 
 function createGameOne(niveau){
+    windowWidth = window.innerWidth;
+    windowHeight = window.innerHeight ;
     var numberColonne1 = 2;
     var numberColonne2 = 1;
     var isEtNonAllowed = false;
@@ -110,6 +113,7 @@ function createGameOne(niveau){
             break;
 
     }
+    timeEnd = 500;
     isTuto = false;
     stage = new Konva.Stage({
         container: 'play_container',
@@ -168,6 +172,28 @@ function createGameOne(niveau){
     initAllSwitch();
     createEnd();
     initEnd();
+    
+    console.log(layer.scaleX());
 
     checkAllSortieLogique();
+}
+
+window.addEventListener('resize', changeStage);
+
+
+function changeStage(){
+    if(window.innerWidth <= 900){
+        console.log("mobile");
+        if(!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);
+    }
+    
+    stage.draw();
 }