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>