From 175d7c6199b1ddfb79d3706947edb23d726abaf5 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Wed, 22 Jan 2025 22:36:08 +0100
Subject: [PATCH] Added overlay on portrait screens to force switching to
 landscape

(Needs better styling/design)
---
 src/assets/scss/main.scss             | 6 ++++++
 src/components/screens/Characters.vue | 3 +++
 src/components/screens/Game.vue       | 3 +++
 3 files changed, 12 insertions(+)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 6254f42..512fa3b 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -31,6 +31,12 @@ body {
     @apply outline-offset-2;
     @apply rounded-sm;
   }
+
+  @media only screen and (orientation:portrait) and (max-width: 768px) {
+    .portrait-mode-notice {
+      @apply block;
+    }
+  }
 }
 
 h1,
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index f82ba79..4362ff0 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="relative max-lg:h-dvh flex flex-row-reverse">
+    <div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center">
+      <span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span>
+    </div>
     <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
     <div class="bg-[url('/assets/login/login-bg.png')] opacity-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center grayscale"></div>
     <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[35dvh] lg:h-dvh relative"></div>
diff --git a/src/components/screens/Game.vue b/src/components/screens/Game.vue
index 4f9dc94..a0d5e95 100644
--- a/src/components/screens/Game.vue
+++ b/src/components/screens/Game.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="flex justify-center items-center h-dvh relative">
+    <div class="portrait-mode-notice hidden absolute h-[calc(100%_-_80px)] w-[calc(100%_-_80px)] left-0 top-0 bg-gray z-50 p-10 text-center">
+      <span class="text-lg">Noxious is not compatible with portrait mode on smaller screens. Please switch to landscape mode to play.</span>
+    </div>
     <Game :config="gameConfig" @create="createGame">
       <Scene name="main" @preload="preloadScene" @create="createScene">
         <Menu />