From caa5e3f0a3c14f1a6c89782111ceccdbb5ed7223 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= <thevikeo@gmail.com>
Date: Thu, 6 Jul 2023 08:16:00 +0200
Subject: [PATCH] no full screen button

---
 my-app/src/App.css                            |  2 +-
 my-app/src/App.tsx                            | 53 +------------------
 .../Components/Buttons/CommanderDamageBar.tsx |  2 +-
 .../src/Components/Buttons/ExtraCounter.tsx   |  2 +-
 .../src/Components/Buttons/SettingsButton.tsx |  4 +-
 .../src/Components/Counters/Counters.style.ts |  8 +--
 .../LifeCounter/LifeCounter.style.ts          |  2 +-
 .../Components/LifeCounter/LifeCounter.tsx    | 10 ++--
 .../Components/PlayerMenu/PlayerMenu.style.ts |  6 +--
 my-app/src/Icons/PartnerTaxIcon.tsx           |  2 +-
 my-app/src/index.css                          |  3 ++
 11 files changed, 24 insertions(+), 70 deletions(-)

diff --git a/my-app/src/App.css b/my-app/src/App.css
index 74b5e05..e0d4f70 100644
--- a/my-app/src/App.css
+++ b/my-app/src/App.css
@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 100vmin;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/my-app/src/App.tsx b/my-app/src/App.tsx
index 7e4f91c..599436b 100644
--- a/my-app/src/App.tsx
+++ b/my-app/src/App.tsx
@@ -5,52 +5,14 @@ import styled from 'styled-components';
 import { Player } from './Types/Player';
 
 const MainWrapper = styled.div`
-  width: 100vw;
-  height: 100vh;
+  width: 100vmax;
+  height: 100vmin;
   overflow: hidden;
   min-width: 254px;
 `;
 
-const FullScreenButtonContainer = styled.div`
-  display: none;
-
-  @media (orientation: portrait) {
-    display: block;
-    height: 80px;
-    width: 80vw;
-    margin: auto;
-    position: relative;
-  }
-`;
-
-const FullscreenButton = styled.button`
-  display: none;
-  @media (orientation: portrait) {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-`;
-
-const TitleText = styled.h1`
-  display: none;
-  font-size: 2rem;
-  font-weight: 600;
-  margin: 0;
-  text-align: center;
-  user-select: none;
-  padding: 5rem 1rem 2rem 1rem;
-
-  @media (orientation: portrait) {
-    display: block;
-  }
-`;
-
 const CountersWrapper = styled.div`
   display: flex;
-  @media (orientation: portrait) {
-    display: none;
-  }
 `;
 
 const initialPlayers: Player[] = [
@@ -137,17 +99,6 @@ function App() {
 
   return (
     <MainWrapper>
-      <TitleText>
-        You need to be in landscape mode to use this app.
-        <hr />
-        Pressing the fullscreen button is also very recommended.
-      </TitleText>
-      <FullScreenButtonContainer>
-        <FullscreenButton onClick={handleFullscreen}>
-          Toggle Fullscreen
-        </FullscreenButton>
-      </FullScreenButtonContainer>
-
       <CountersWrapper>
         <Counters players={players} onPlayerChange={handlePlayerChange} />
       </CountersWrapper>
diff --git a/my-app/src/Components/Buttons/CommanderDamageBar.tsx b/my-app/src/Components/Buttons/CommanderDamageBar.tsx
index ff5f11e..ead6546 100644
--- a/my-app/src/Components/Buttons/CommanderDamageBar.tsx
+++ b/my-app/src/Components/Buttons/CommanderDamageBar.tsx
@@ -20,7 +20,7 @@ const CommanderDamageButton = styled.button<{ backgroundColor?: string }>`
   display: flex;
   flex-grow: 1;
   border: none;
-  height: 10vh;
+  height: 10vmin;
   outline: none;
   cursor: pointer;
   background-color: ${(props) => props.backgroundColor || 'antiquewhite'};
diff --git a/my-app/src/Components/Buttons/ExtraCounter.tsx b/my-app/src/Components/Buttons/ExtraCounter.tsx
index bbc5593..1f85b99 100644
--- a/my-app/src/Components/Buttons/ExtraCounter.tsx
+++ b/my-app/src/Components/Buttons/ExtraCounter.tsx
@@ -21,7 +21,7 @@ export const CenteredText = styled.div`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 5vh;
+  font-size: 5vmin;
   font-weight: bold;
   text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff,
     1px 1px 0 #ffffff;
diff --git a/my-app/src/Components/Buttons/SettingsButton.tsx b/my-app/src/Components/Buttons/SettingsButton.tsx
index 5cb19c0..364cc41 100644
--- a/my-app/src/Components/Buttons/SettingsButton.tsx
+++ b/my-app/src/Components/Buttons/SettingsButton.tsx
@@ -7,7 +7,7 @@ export const StyledExtraCounterButton = styled.button`
   border: none;
   outline: none;
   cursor: pointer;
-  margin-bottom: -5vh;
+  margin-bottom: -5vmin;
   top: 8px;
   background-color: transparent;
   user-select: none;
@@ -25,7 +25,7 @@ type SettingsButtonProps = {
 const SettingsButton = ({ onClick }: SettingsButtonProps) => {
   return (
     <StyledExtraCounterButton onClick={onClick}>
-      <SettingsIcon size="4vh" />
+      <SettingsIcon size="4vmin" />
     </StyledExtraCounterButton>
   );
 };
diff --git a/my-app/src/Components/Counters/Counters.style.ts b/my-app/src/Components/Counters/Counters.style.ts
index 6e0f878..01028bb 100644
--- a/my-app/src/Components/Counters/Counters.style.ts
+++ b/my-app/src/Components/Counters/Counters.style.ts
@@ -20,16 +20,16 @@ export const CountersGrid = styled.div`
 
 export const GridItemContainer = styled.div`
   display: flex;
-  width: calc(50vw - 2px);
-  height: calc(50vh - 2px);
+  width: calc(50vmax - 2px);
+  height: calc(50vmin - 2px);
   justify-content: center;
   align-items: center;
 `;
 
 export const GridItemContainerFlipped = styled.div`
   display: flex;
-  width: calc(50vw - 2px);
-  height: calc(50vh - 2px);
+  width: calc(50vmax - 2px);
+  height: calc(50vmin - 2px);
   justify-content: center;
   align-items: center;
   transform: rotate(180deg);
diff --git a/my-app/src/Components/LifeCounter/LifeCounter.style.ts b/my-app/src/Components/LifeCounter/LifeCounter.style.ts
index fc77a37..c132763 100644
--- a/my-app/src/Components/LifeCounter/LifeCounter.style.ts
+++ b/my-app/src/Components/LifeCounter/LifeCounter.style.ts
@@ -33,7 +33,7 @@ export const LifeCounterText = styled.p`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 30vh;
+  font-size: 30vmin;
   text-align: center;
   text-size-adjust: auto;
   margin: 0;
diff --git a/my-app/src/Components/LifeCounter/LifeCounter.tsx b/my-app/src/Components/LifeCounter/LifeCounter.tsx
index b3b3fd7..6a48229 100644
--- a/my-app/src/Components/LifeCounter/LifeCounter.tsx
+++ b/my-app/src/Components/LifeCounter/LifeCounter.tsx
@@ -68,19 +68,19 @@ const LifeCounter = ({
         </S.LifeCountainer>
         <S.ExtraCountersGrid>
           {player.settings.useCommanderDamage && (
-            <ExtraCounter Icon={<CommanderTaxIcon size="8vh" />} />
+            <ExtraCounter Icon={<CommanderTaxIcon size="8vmin" />} />
           )}
           {Boolean(
             player.settings.useCommanderDamage && player.settings.usePartner
-          ) && <ExtraCounter Icon={<PartnerTaxIcon size="8vh" />} />}
+          ) && <ExtraCounter Icon={<PartnerTaxIcon size="8vmin" />} />}
           {player.settings.usePoison && (
-            <ExtraCounter Icon={<PoisonIcon size="8vh" />} />
+            <ExtraCounter Icon={<PoisonIcon size="8vmin" />} />
           )}
           {player.settings.useEnergy && (
-            <ExtraCounter Icon={<EnergyIcon size="8vh" />} />
+            <ExtraCounter Icon={<EnergyIcon size="8vmin" />} />
           )}
           {player.settings.useExperience && (
-            <ExtraCounter Icon={<ExperienceIcon size="8vh" />} />
+            <ExtraCounter Icon={<ExperienceIcon size="8vmin" />} />
           )}
         </S.ExtraCountersGrid>
       </S.LifeCounterContentContainer>
diff --git a/my-app/src/Components/PlayerMenu/PlayerMenu.style.ts b/my-app/src/Components/PlayerMenu/PlayerMenu.style.ts
index 1956197..33d454f 100644
--- a/my-app/src/Components/PlayerMenu/PlayerMenu.style.ts
+++ b/my-app/src/Components/PlayerMenu/PlayerMenu.style.ts
@@ -26,12 +26,12 @@ export const Label = styled.label`
   justify-content: space-evenly;
   align-items: center;
   color: #ffffff;
-  font-size: 2vh;
+  font-size: 2vmin;
 `;
 
 export const Input = styled.input`
-  width: 5vh;
-  height: 5vh;
+  width: 5vmin;
+  height: 5vmin;
   border: none;
   outline: none;
   cursor: pointer;
diff --git a/my-app/src/Icons/PartnerTaxIcon.tsx b/my-app/src/Icons/PartnerTaxIcon.tsx
index df37e2d..d6e5af2 100644
--- a/my-app/src/Icons/PartnerTaxIcon.tsx
+++ b/my-app/src/Icons/PartnerTaxIcon.tsx
@@ -6,7 +6,7 @@ const PartnerTaxIcon = ({ size, color }: IconProps) => {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 325 325"
-        width={'12vh'}
+        width={'12vmin'}
         height={`calc(${size} - 0px)`}
         fill={color || 'black'}
         fillOpacity="0.5"
diff --git a/my-app/src/index.css b/my-app/src/index.css
index ec2585e..12d7abe 100644
--- a/my-app/src/index.css
+++ b/my-app/src/index.css
@@ -5,6 +5,9 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  @media (orientation: portrait) {
+    transform: rotate(90deg);
+  }
 }
 
 code {