Orientation Info (#6)

* Add orientation info * amend some text
shaunanoordin · Jan 31, 2022 · 10212f3 · 10212f3
1 parent d809892
commit 10212f3
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 44 deletions.
diff --git a/app/main.css b/app/main.css
diff --git a/app/main.css.map b/app/main.css.map
diff --git a/app/main.js b/app/main.js
diff --git a/index.html b/index.html
@@ -37,48 +37,7 @@ <h1>Chinese New Year 2022 - Year of the Tiger</h1>
       <div id="banner">
         <img id="card" src="assets/cny2022.png">
       </div>
-      <ul id="levels-list">
-        <li>
-          <button>Level 1</button>
-          <span>Score: 0</span>
-        </li>
-        <li>
-          <button>Level 2</button>
-          <span>New level</span>
-        </li>
-        <li>
-          <button>Level 3</button>
-          <span>New level</span>
-        </li>
-        <li>
-          <button>Level 4</button>
-          <span>New level</span>
-        </li>
-        <li>
-          <button>Level 5</button>
-          <span>New level</span>
-        </li>
-        <li>
-          <button>Level 6</button>
-          <span>New level</span>
-        </li>
-        <li>
-          <button>Level 7</button>
-          <span>New level</span>
-        </li>
-        <li>
-          <button>Level 8</button>
-          <span>New level</span>
-        </li>
-        <li>
-          <button>Level 9</button>
-          <span>New level</span>
-        </li>
-        <li>
-          <button>Level 10</button>
-          <span>New level</span>
-        </li>
-      </ul>
+      <ul id="levels-list"></ul>
     </div>
   </div>
   <button id="button-home" class="ui-button"><img src="./assets/icon-menu-white.svg" alt="Home Menu"></button>
@@ -88,6 +47,10 @@ <h1>Chinese New Year 2022 - Year of the Tiger</h1>
 <footer>
   <div><a href="https://shaunanoordin.com" target="_blank">shaunanoordin.com</a> / 2022 / <a href="https://github.com/shaunanoordin/cny2022/" target="_blank">source code on Github</a></div>
 </footer>
+<div id="orientation-info">
+  <span>This game is best played in <b>landscape view</b> and in <b>full screen mode</b></span>
+  <button id="orientation-close">Close</button>
+</div>
 </div><!--/#app-->
 </body>
 </html>
diff --git a/src/avo/avo.js b/src/avo/avo.js
@@ -31,6 +31,8 @@ export default class AvO {
       buttonHome: document.getElementById('button-home'),
       buttonFullscreen: document.getElementById('button-fullscreen'),
       buttonReload: document.getElementById('button-reload'),
+      orientationInfo: document.getElementById('orientation-info'),
+      orientationClose: document.getElementById('orientation-close'),
     }
 
     this.homeMenu = false
@@ -399,6 +401,7 @@ export default class AvO {
     this.html.buttonHome.addEventListener('click', this.buttonHome_onClick.bind(this))
     this.html.buttonFullscreen.addEventListener('click', this.buttonFullscreen_onClick.bind(this))
     this.html.buttonReload.addEventListener('click', this.buttonReload_onClick.bind(this))
+    this.html.orientationClose.addEventListener('click', this.orientationClose_onClick.bind(this))
 
     this.html.main.addEventListener('keydown', this.onKeyDown.bind(this))
     this.html.main.addEventListener('keyup', this.onKeyUp.bind(this))
@@ -434,6 +437,14 @@ export default class AvO {
     this.html.interactionMenu.style.height = `${canvasBounds.height}px`
     this.html.interactionMenu.style.top = `${canvasBounds.top - mainDivBounds.top}px`
     this.html.interactionMenu.style.left = `${canvasBounds.left}px`
+
+    // Show or hide the orientation info
+    const width = mainDivBounds?.width || 1
+    const height = mainDivBounds?.height || 1
+    const screenRatio = width / height
+    this.html.orientationInfo.className = (screenRatio < 1)
+      ? 'portrait'
+      : ''
   }
 
   setHomeMenu (homeMenu) {
@@ -579,6 +590,10 @@ export default class AvO {
     this.levels.reload()
   }
 
+  orientationClose_onClick () {
+    this.html.orientationInfo.style.visibility = 'hidden'
+  }
+
   /*
   Section: Gameplay
   ----------------------------------------------------------------------------

diff --git a/src/main.scss b/src/main.scss
@@ -82,6 +82,39 @@ table {
   }
 }
 
+#app > #orientation-info {
+  position: fixed;
+  bottom: 2em;
+  left: 5%;
+  width: 90%;
+  padding: 1em;
+  background: $light;
+  color: $dark;
+  border: 2px solid $dark;
+  display: none;
+
+  &.portrait {
+    display: block;
+  }
+
+  > button {
+    cursor: pointer;
+    color: #fff;
+    background: #c44;
+    border: 2px solid #ccc;
+    border-radius: 1rem;
+    box-shadow: 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.5);
+
+    &:hover {
+      border: 2px solid #fff;
+    }
+
+    &:active {
+      border: 2px solid #888;
+    }
+  }
+}
+
 #app > main {
   background: $dark url("../assets/simple-bg.png");
   display: flex;