Making Casual Mode Responsive In Mobile and Tablet View

inj-krish19 · Sep 1, 2024 · 9ca0baa · 9ca0baa
1 parent 30320b8
commit 9ca0baa
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 19 deletions.
diff --git a/Casual Mode.html b/Casual Mode.html
@@ -51,11 +51,6 @@ <h1 id="errorMessage">This Game Is Not Supported In Portrait Screen</h1>
         <p id="scoreAllTime">Best Score : </p>
     </div>
 
-    <!--    NOT USED HERE   -->
-    <div class="messageBoard">
-        <p id="messageDistance"></p>
-    </div>
-
     <div class="alertBox" id="alertBox">
         <h1 id="result"></h1>
         <h3 id="praise"></h3>

diff --git a/css/Casual Mode.css b/css/Casual Mode.css
@@ -342,7 +342,7 @@
 
 }
 
-@media screen and (min-width : 750px) and (max-width : 1000px) {
+/*@media screen and (min-width : 750px) and (max-width : 1000px) {
     .Controller {
         margin: -20% 0% 0% 105%;
     }
@@ -386,27 +386,27 @@
         margin: 0% 0% 0% 75%;
     }
 
-}
+}*/
 
-@media screen and (min-width : 350px) and (max-width : 550px) and (min-height : 250px) {
+@media screen and (min-width : 350px) and (max-width : 1000px) and (min-height : 250px) {
     .Controller {
-        margin: -25% 0% 0% 150%;
+        margin: -300px 0 0 1100px;
     }
 
-    .toolBox {
-        margin: -50% 0% 0% 25%;
+    .menuBar {
+        margin: -550px 0 0 50px;
     }
 
-    .scoreBoard {
-        margin: -60% 0% 0% 150%;
+    .toolBox {
+        margin: -200px 0 0 100px;
     }
 
-    .messageBoard {
-        margin: -60% 0% 0% 150%;
+    .scoreBoard {
+        margin: 0px 0 0 1100px;
     }
 
     .alertBox {
-        margin: -50% 0% 0% 115%;
+        margin: -450px 0 0 700px;
     }
 
 }
diff --git a/js/Casual Mode.js b/js/Casual Mode.js
@@ -956,13 +956,12 @@ function stopVideo() {
     document.querySelector(".pedals").style.display = "block";
     document.querySelector(".menuBar").style.display = "block";
     document.querySelector(".scoreBoard").style.display = "block";
-    document.querySelector(".messageBoard").style.display = "block";
     makeCountDown();
 }
 
 
 var aboutVideo = document.getElementById('casualModeVideo');
-aboutVideo.onended = function () {
+aboutVideo.onended = () => { stopVideo(); }/* function () {
     aboutVideo.pause();
     document.getElementById("casualModeVideo").style.display = "none";
     document.querySelector(".skip").style.display = "none";
@@ -976,7 +975,7 @@ aboutVideo.onended = function () {
     document.querySelector(".scoreBoard").style.display = "block";
     document.querySelector(".messageBoard").style.display = "block";
     makeCountDown();
-}
+} */
 
 if (parseInt(sessionStorage.casualModeVideoStatus) != 1) {
     sessionStorage.casualModeVideoStatus = 1;