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;
@@ -272,3 +279,21 @@ hr{
     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

@@ -42,3 +42,10 @@ var liveColonneNumber = [];
 var niveauActuel = 1;
 
 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) {
+function openModal(modalId) {
-    var modal = document.getElementById(modal);
+    var modal = document.getElementById(modalId);
     modal.style.display = "block";
 
+
 }
 function closeModal(modal) {
     var modal = document.getElementById(modal);
@@ -360,7 +361,7 @@ function changeAllLineColorInActive(color){
 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();
 }

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',
@@ -169,5 +173,27 @@ function createGameOne(niveau){
     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();
+}