feat: FlappyBird_Game - test

css/flappy.css

@@ -240,7 +240,6 @@ body {
             justify-content: center;
             overflow: hidden;
             padding: 70px;
-            background-color: red; /*retirar*/
         }
 
         [wm-flappy]{
@@ -301,7 +300,6 @@ body {
         .conteudo{
             justify-content: center;
             font-size: 1.6rem;
-            background-color: #fee500;/*retirar*/
         }
         #fade{
             height: 100%;

css/orientation.css

@@ -0,0 +1,59 @@
+.conteudo{
+    justify-content: center;
+    overflow: hidden;
+    padding: 70px;
+    background-color: aliceblue;
+}
+
+[wm-flappy]{
+    min-width: 90vh;
+    min-height: 75vw;
+}
+
+.sol{
+    width: 20rem;
+}
+
+.passaro{
+    width: 4rem;
+}
+
+
+.barreira .borda{
+    height: 2rem;
+    width: 8.7rem;
+    border: .1rem solid #304605
+}
+
+.barreira .corpo{
+    height: 10rem;
+    width: 7.4rem;
+    border-left:  .1rem solid #304605;
+    border-right: .1rem solid #304605;
+} 
+
+.progresso{
+    font-size: 5rem;
+}
+
+
+
+#fade{
+    max-width: 100vh;
+    height: 100vw;
+    transform-origin: top left;
+    transform: rotate(90deg) translateY(-100%);
+}
+
+.modal{
+    max-height: 60%;
+    transform: translate(-50%, -40%);
+    font-size: 1.2rem;
+}
+#modal-replay{
+    min-width: 300px;
+}
+
+.title{
+    display: none;
+}

js/orientation.js

@@ -2,6 +2,8 @@
 const flappyContainer = document.querySelector('[wm-flappy]')
 const titleContainer = document.querySelector('.title')
 const modalContainer = document.querySelector('#fade')
+const conteudo = document.querySelector('.conteudo')
+// const conteudo = document.querySelector('.conteudo')
 
 const screenWidth  = document.documentElement.clientWidth 
 const screenHeight = document.documentElement.clientHeight
@@ -10,16 +12,18 @@ const screenHeight = document.documentElement.clientHeight
 console.log(flappyContainer, titleContainer, modalContainer)
 function adjustScreen(){
     if(window.innerHeight > window.innerWidth){
-        flappyContainer.style.transform = `rotate(90deg)`
-        // titleContainer.style.display = `none`
-        modalContainer.style.transform = `rotate(90deg)`
 
+        const styleTag = document.createElement('link')
+        styleTag.setAttribute('href', './css/orientation.css')
+        styleTag.setAttribute('rel', 'stylesheet') 
+        document.head.appendChild(styleTag)
+
+        flappyContainer.style.transform = `rotate(90deg)`
         flappyContainer.style.width  = `${screenHeight}px` 
         flappyContainer.style.height = `${screenWidth}px`
         modalContainer.style.width  = `${screenHeight}px` 
         modalContainer.style.height = `${screenWidth}px`
 
-        console.log(screenHeight, screenWidth)
     }else{
         flappyContainer.style.transform = `rotate(0deg)`
         // titleContainer.style.diplay = `contents`