responsive tentative

5 years ago · 51c9d6814b
parent 9da455d750
commit 51c9d6814b
3 changed files with 67 additions and 1 deletions
--- a/site/js/func.js
+++ b/site/js/func.js
@ -156,3 +156,12 @@ function calculNombreSwitch(){
 }


+
+function resize(){
+  console.log(window.innerWidth);
+  stage.scale({ x: 1, y: 1 });
+  stage.draw();
+  console.log(stage);
+}
+
+
--- a/site/vues/jeu.html
+++ b/site/vues/jeu.html
@ -63,6 +63,7 @@
  </div>
  <div id="play-container"></div>
  <script>
+    var mobile = false;
    var switchs = [], lineCount = [], logiques = [],lines = [], endLines = [],end, switchsInfo= [], switchsInfoCopy = [],lineRemove = [];

    var niveauActuel = localStorage.getItem("niveau");
@ -76,6 +77,7 @@
    let container = document.getElementById('play-container');
    container.style.height = innerHeight /100*80 + "px";
    var width = container.offsetWidth;
+    var height = container.offsetHeight;

    

@ -85,7 +87,7 @@
      x: 20,
      y: 1000,*/
      width: width,
-      height: window.innerHeight,
+      height: height,
    });
    stage.add(layer);

@ -102,6 +104,35 @@
          modal.style.display = "none";
        }
      }
+
+      fitStageIntoParentContainer();
+
+      function fitStageIntoParentContainer() {
+        if(window.innerWidth < window.innerHeight && mobile == false){
+          stage.rotate(90);
+          stage.x(stage.getX() + stage.height());
+          stage.draw();
+          mobile=true;
+        }else if(mobile){
+          stage.rotate(0);
+          stage.draw();
+          mobile=true;
+        }
+        var container = document.querySelector('#play-container');
+
+        
+
+        // now we need to fit stage into parent
+        var containerWidth = container.offsetWidth;
+        // to do this we need to scale the stage
+        var scale = containerWidth / width;
+
+        stage.width(width * scale);
+        stage.height(height * scale);
+        stage.scale({ x: scale, y: scale });
+        stage.draw();
+      }
+      window.addEventListener('resize', fitStageIntoParentContainer);
      </script>
 </body>
 </html>
--- a/site/vues/test.html
+++ b/site/vues/test.html
@ -0,0 +1,26 @@
+<html>
+<head>
+
+<title>onresize test</title>
+
+</head>
+
+<body>
+<p>Resize the browser window to fire the resize event.</p>
+
+<p>Window height: <span id="height"></span></p>
+<p>Window width: <span id="width"></span></p>
+
+<script type="text/javascript">
+  var heightOutput = document.querySelector('#height');
+  var widthOutput = document.querySelector('#width');
+
+  function resize() { 
+    heightOutput.textContent = window.innerHeight;
+    widthOutput.textContent = window.innerWidth;
+  }
+
+  window.onresize = resize;
+</script>
+</body>
+</html>