From 26cca688135258669916bc07422a9c0c2c6ae64e Mon Sep 17 00:00:00 2001
From: Wesley Welisten <106595542+welisten@users.noreply.github.com>
Date: Wed, 27 Dec 2023 01:04:06 -0300
Subject: [PATCH] feat: FlappyBird_Game - test

---
 css/flappy.css      |  2 --
 css/orientation.css | 59 +++++++++++++++++++++++++++++++++++++++++++++
 js/orientation.js   | 12 ++++++---
 3 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 css/orientation.css

diff --git a/css/flappy.css b/css/flappy.css
index b3a7731..c06468b 100644
--- a/css/flappy.css
+++ b/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%;
diff --git a/css/orientation.css b/css/orientation.css
new file mode 100644
index 0000000..26731a5
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/js/orientation.js b/js/orientation.js
index 1a6c010..816bef2 100644
--- a/js/orientation.js
+++ b/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`