ios fixes, settings for ios and desktop

my-app/src/App.tsx

@@ -5,8 +5,8 @@ import styled from 'styled-components';
 import { Player } from './Types/Player';
 
 const MainWrapper = styled.div`
-  width: 100dvw;
-  height: 100dvh;
+  width: 100vw;
+  height: 100vh;
   overflow: hidden;
   min-width: 254px;
 `;
@@ -115,10 +115,14 @@ function App() {
   const handleFullscreen = () => {
     const element = document.documentElement;
 
-    if (isFullscreen) {
-      document.exitFullscreen();
+    if (!isFullscreen) {
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      }
     } else {
-      element.requestFullscreen();
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
     }
 
     setIsFullscreen(!isFullscreen);

my-app/src/Components/Buttons/AddLifeButton.tsx

@@ -14,6 +14,11 @@ export const StyledLifeCounterButton = styled.button<{ align?: string }>`
   padding: 0 28px;
   text-align: ${(props) => props.align || 'center'};
   user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 `;
 
 type AddLifeButtonProps = {
@@ -62,6 +67,18 @@ const AddLifeButton = ({ lifeTotal, setLifeTotal }: AddLifeButtonProps) => {
       onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         e.preventDefault();
       }}
+      onTouchStart={(e: React.TouchEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+      }}
+      onTouchEnd={(e: React.TouchEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+      }}
+      onTouchMove={(e: React.TouchEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+      }}
+      onTouchCancel={(e: React.TouchEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+      }}
       align="right"
     >
       &#43;

my-app/src/Components/Buttons/CommanderDamageBar.tsx

@@ -24,6 +24,13 @@ const CommanderDamageButton = styled.button<{ backgroundColor?: string }>`
   outline: none;
   cursor: pointer;
   background-color: ${(props) => props.backgroundColor || 'antiquewhite'};
+  margin: 0;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 `;
 
 const CommanderDamageButtonText = styled.p`
@@ -35,10 +42,15 @@ const CommanderDamageButtonText = styled.p`
   font-variant-numeric: tabular-nums;
   pointer-events: none;
   width: 2rem;
-  user-select: none;
   text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff,
     1px 1px 0 #ffffff;
   color: #000000;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 `;
 
 const VerticalSeperator = styled.div`

my-app/src/Components/Buttons/ExtraCounter.tsx

@@ -9,6 +9,11 @@ export const StyledExtraCounterButton = styled.button`
   cursor: pointer;
   background-color: transparent;
   user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 `;
 
 export const CenteredText = styled.div`
@@ -21,6 +26,12 @@ export const CenteredText = styled.div`
   text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff,
     1px 1px 0 #ffffff;
   color: #000000;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 `;
 
 type ExtraCounterProps = {

my-app/src/Components/Buttons/SettingsButton.tsx

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import SettingsIcon from '../../Icons/SettingsIcon';
+
+export const StyledExtraCounterButton = styled.button`
+  position: relative;
+  flex-grow: 1;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  margin-bottom: -5vh;
+  top: 8px;
+  background-color: transparent;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+`;
+
+type SettingsButtonProps = {
+  onClick: () => void;
+};
+
+const SettingsButton = ({ onClick }: SettingsButtonProps) => {
+  return (
+    <StyledExtraCounterButton onClick={onClick}>
+      <SettingsIcon size="4vh" />
+    </StyledExtraCounterButton>
+  );
+};
+
+export default SettingsButton;

my-app/src/Components/Buttons/SubtractLifeButton.tsx

@@ -14,6 +14,11 @@ export const StyledLifeCounterButton = styled.button<{ align?: string }>`
   padding: 0 28px;
   text-align: ${(props) => props.align || 'center'};
   user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 `;
 
 type SubtractLifeButtonProps = {

my-app/src/Components/LifeCounter/LifeCounter.style.ts

@@ -41,10 +41,15 @@ export const LifeCounterText = styled.p`
   width: 100%;
   font-variant-numeric: tabular-nums;
   pointer-events: none;
-  user-select: none;
   text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff,
     1px 1px 0 #ffffff;
   color: #000000;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 `;
 
 export const ExtraCountersGrid = styled.div`

my-app/src/Components/LifeCounter/LifeCounter.tsx

@@ -13,6 +13,7 @@ import EnergyIcon from '../../Icons/EnergyIcon';
 import ExperienceIcon from '../../Icons/ExperienceIcon';
 import PoisonIcon from '../../Icons/PoisonIcon';
 import PartnerTaxIcon from '../../Icons/PartnerTaxIcon';
+import SettingsButton from '../Buttons/SettingsButton';
 
 type LifeCounterProps = {
   player: Player;
@@ -49,6 +50,11 @@ const LifeCounter = ({
           setLifeTotal={handleLifeChange}
           opponents={opponents}
         />
+        <SettingsButton
+          onClick={() => {
+            setShowPlayerMenu(!showPlayerMenu);
+          }}
+        />
         <S.LifeCountainer>
           <SubtractLifeButton
             lifeTotal={player.lifeTotal}

my-app/src/Icons/PoisonIcon.tsx

@@ -1,6 +1,6 @@
 import { IconProps } from '../Types/Icon';
 
-const PhyrexianIcon = ({ color, size }: IconProps) => {
+const PoisonIcon = ({ color, size }: IconProps) => {
   return (
     <div style={{ position: 'relative', display: 'inline-block' }}>
       <svg
@@ -18,4 +18,4 @@ const PhyrexianIcon = ({ color, size }: IconProps) => {
   );
 };
 
-export default PhyrexianIcon;
+export default PoisonIcon;

my-app/src/Icons/SettingsIcon.tsx

@@ -0,0 +1,39 @@
+import { IconProps } from '../Types/Icon';
+
+const SettingsIcon = ({ color, size }: IconProps) => {
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlSpace="preserve"
+        viewBox="0 0 182.000000 182.000000"
+        width={size}
+        height={size}
+        fill={color || 'black'}
+        fillOpacity="0.3"
+      >
+        <g transform="translate(0.000000,182.000000) scale(0.100000,-0.100000)">
+          <path
+            d="M807 1810 c-46 -14 -94 -57 -116 -103 -16 -34 -21 -62 -21 -128 l0
+-85 -57 54 c-131 122 -232 122 -350 1 -114 -118 -111 -221 11 -339 l57 -55
+-101 -6 c-90 -5 -104 -8 -142 -35 -23 -16 -52 -49 -66 -74 -21 -40 -23 -55
+-20 -140 4 -111 24 -154 90 -198 35 -22 53 -27 134 -30 l94 -4 -52 -57 c-116
+-127 -118 -224 -5 -340 57 -58 115 -90 163 -91 70 0 97 13 169 82 l73 68 4
+-99 c3 -86 7 -103 30 -138 15 -22 44 -51 65 -64 34 -21 50 -24 143 -24 93 0
+109 3 143 24 21 13 50 41 65 63 23 35 27 53 30 135 l4 95 42 -40 c73 -69 111
+-92 164 -99 70 -8 117 11 186 76 127 121 129 222 5 347 l-61 62 99 4 c89 3
+102 6 142 33 62 42 85 91 89 192 5 107 -24 177 -90 219 -38 25 -55 29 -142 32
+l-98 4 61 62 c122 124 122 224 0 343 -116 112 -205 112 -334 -2 l-63 -55 -4
+94 c-3 81 -8 99 -30 134 -44 66 -87 86 -193 89 -49 1 -103 -2 -118 -7z m244
+-599 c59 -30 121 -92 150 -149 21 -40 24 -61 24 -147 0 -85 -3 -107 -23 -145
+-32 -61 -87 -116 -147 -148 -45 -24 -61 -27 -150 -27 -89 0 -105 3 -150 27
+-60 32 -115 87 -147 148 -31 60 -37 186 -13 259 27 83 121 174 206 200 60 18
+199 8 250 -18z"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+export default SettingsIcon;