optimized mobile landscape

Izy266 · Jan 31, 2024 · 80a0691 · 80a0691
1 parent 05a5666
commit 80a0691
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 24 deletions.
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -318,9 +318,12 @@ button p {
     justify-content: space-between;
 }
 
-body.game {
+.game {
     background-color: rgb(19, 233, 108);
     background-image: url('../img/felt.png');
+    display:grid;
+    grid-template-rows: 50px 1fr 220px;
+    justify-items: space-between;
 }
 
 .game .header {
@@ -425,10 +428,6 @@ body.game {
     font-size: clamp(24px, 7vw, 38px);
 }
 
-#com_cards .card_front div p {
-    font-size: clamp(36px, 10.5vw, 58px);
-}
-
 .card {
     height: clamp(69px, 5.7vw, 110px);
     width: clamp(48px, 4vw, 77px);
@@ -444,9 +443,8 @@ body.game {
 }
 
 .card_front div p {
-    font-family: 'Times New Roman', Times, serif;
-    font-size: clamp(36px, 3vw, 58px);
-    margin-bottom: 37%;
+    font-family: 'Noto Serif JP';
+    margin: 37% 15%;
 }
 
 .card_front {
@@ -758,10 +756,6 @@ body.game {
     font-size: clamp(19px, 6vw, 32px);
 }
 
-#best_hand .card_front div p {
-    font-size: clamp(30px, 9vw, 47px);
-}
-
 #best_hand .card_front {
     justify-content: center;
     align-items: center;
@@ -951,13 +945,14 @@ body.game {
     .footer_button_container {
         display: flex;
         height: 100%;
+        width: 40px;
         justify-content: center;
         align-items: center;
     }
 
     .footer_button {
         height: 100%;
-        width: 40px;
+        width: 100%;
         background-color: transparent;
         background-size: 25px 25px;
         background-repeat: no-repeat;

diff --git a/static/js/game.js b/static/js/game.js
@@ -503,40 +503,43 @@ document.addEventListener('DOMContentLoaded', () => {
     const chatInput = document.getElementById('chat_input');
     const chatBox = document.getElementById('chat_box');
     const gameLogBox = document.getElementById('game_log_box');
+    const bestHandButtonContainer = document.getElementById('best_hand_button_container');
+    const chatButtonContainer = document.getElementById('chat_button_container');
+    const gameLogButtonContainer = document.getElementById('game_log_button_container');
     const bestHandButton = document.getElementById('best_hand_button');
     const chatButton = document.getElementById('chat_button');
     const gameLogButton = document.getElementById('game_log_button');
     const bestHand = document.getElementById('best_hand');
     const chat = document.getElementById('chat');
     const gameLog = document.getElementById('game_log');
 
-    bestHandButton.style.backgroundColor = 'rgb(0, 0, 0, 0.2)';
+    bestHandButtonContainer.style.backgroundColor = 'rgb(0, 0, 0, 0.2)';
 
     bestHandButton.addEventListener("click", () => {
         bestHand.style.setProperty('--show', 'grid');
         chat.style.setProperty('--show', 'none');
         gameLog.style.setProperty('--show', 'none');
-        bestHandButton.style.backgroundColor = 'rgb(0, 0, 0, 0.2)';
-        chatButton.style.backgroundColor = 'rgb(0, 0, 0, 0)';
-        gameLogButton.style.backgroundColor = 'rgb(0, 0, 0, 0)';
+        bestHandButtonContainer.style.backgroundColor = 'rgb(0, 0, 0, 0.2)';
+        chatButtonContainer.style.backgroundColor = 'rgb(0, 0, 0, 0)';
+        gameLogButtonContainer.style.backgroundColor = 'rgb(0, 0, 0, 0)';
     });
 
     chatButton.addEventListener("click", () => {
         bestHand.style.setProperty('--show', 'none');
         chat.style.setProperty('--show', 'grid');        
         gameLog.style.setProperty('--show', 'none');
-        bestHandButton.style.backgroundColor = 'rgb(0, 0, 0, 0)';
-        chatButton.style.backgroundColor = 'rgb(0, 0, 0, 0.2)';
-        gameLogButton.style.backgroundColor = 'rgb(0, 0, 0, 0)';
+        bestHandButtonContainer.style.backgroundColor = 'rgb(0, 0, 0, 0)';
+        chatButtonContainer.style.backgroundColor = 'rgb(0, 0, 0, 0.2)';
+        gameLogButtonContainer.style.backgroundColor = 'rgb(0, 0, 0, 0)';
     });
 
     gameLogButton.addEventListener("click", () => {
         bestHand.style.setProperty('--show', 'none');
         chat.style.setProperty('--show', 'none');        
         gameLog.style.setProperty('--show', 'grid');
-        bestHandButton.style.backgroundColor = 'rgb(0, 0, 0, 0)';
-        chatButton.style.backgroundColor = 'rgb(0, 0, 0, 0)';
-        gameLogButton.style.backgroundColor = 'rgb(0, 0, 0, 0.2)';
+        bestHandButtonContainer.style.backgroundColor = 'rgb(0, 0, 0, 0)';
+        chatButtonContainer.style.backgroundColor = 'rgb(0, 0, 0, 0)';
+        gameLogButtonContainer.style.backgroundColor = 'rgb(0, 0, 0, 0.2)';
     });
 
     chatInput.addEventListener('keydown', e => {

diff --git a/templates/game.html b/templates/game.html
@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
-        href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,700;0,800;1,400;1,700&family=Inter:wght@400;500;600;800&family=Jost:wght@700;900&family=Oswald:wght@200;300;400&display=swap"
+        href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,700;0,800;1,400;1,700&family=Inter:wght@400;500;600;800&family=Jost:wght@700;900&family=Noto+Serif+JP&family=Oswald:wght@200;300;400&display=swap"
         rel="stylesheet">
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.1/socket.io.min.js"></script>