From cf84f4f66cf779a11fefaef3efcbddb14151ab38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= Date: Tue, 4 Jul 2023 23:39:31 +0200 Subject: [PATCH] ios fixes, settings for ios and desktop --- my-app/src/App.tsx | 14 ++++--- .../src/Components/Buttons/AddLifeButton.tsx | 17 ++++++++ .../Components/Buttons/CommanderDamageBar.tsx | 14 ++++++- .../src/Components/Buttons/ExtraCounter.tsx | 11 ++++++ .../src/Components/Buttons/SettingsButton.tsx | 33 ++++++++++++++++ .../Components/Buttons/SubtractLifeButton.tsx | 5 +++ .../LifeCounter/LifeCounter.style.ts | 7 +++- .../Components/LifeCounter/LifeCounter.tsx | 6 +++ my-app/src/Icons/PoisonIcon.tsx | 4 +- my-app/src/Icons/SettingsIcon.tsx | 39 +++++++++++++++++++ 10 files changed, 141 insertions(+), 9 deletions(-) create mode 100644 my-app/src/Components/Buttons/SettingsButton.tsx create mode 100644 my-app/src/Icons/SettingsIcon.tsx diff --git a/my-app/src/App.tsx b/my-app/src/App.tsx index 9d31f55..7e4f91c 100644 --- a/my-app/src/App.tsx +++ b/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); diff --git a/my-app/src/Components/Buttons/AddLifeButton.tsx b/my-app/src/Components/Buttons/AddLifeButton.tsx index d82b02b..16073c4 100644 --- a/my-app/src/Components/Buttons/AddLifeButton.tsx +++ b/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) => { e.preventDefault(); }} + onTouchStart={(e: React.TouchEvent) => { + e.preventDefault(); + }} + onTouchEnd={(e: React.TouchEvent) => { + e.preventDefault(); + }} + onTouchMove={(e: React.TouchEvent) => { + e.preventDefault(); + }} + onTouchCancel={(e: React.TouchEvent) => { + e.preventDefault(); + }} align="right" > + diff --git a/my-app/src/Components/Buttons/CommanderDamageBar.tsx b/my-app/src/Components/Buttons/CommanderDamageBar.tsx index 6b7b9ae..ff5f11e 100644 --- a/my-app/src/Components/Buttons/CommanderDamageBar.tsx +++ b/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` diff --git a/my-app/src/Components/Buttons/ExtraCounter.tsx b/my-app/src/Components/Buttons/ExtraCounter.tsx index 8bc826a..bbc5593 100644 --- a/my-app/src/Components/Buttons/ExtraCounter.tsx +++ b/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 = { diff --git a/my-app/src/Components/Buttons/SettingsButton.tsx b/my-app/src/Components/Buttons/SettingsButton.tsx new file mode 100644 index 0000000..5cb19c0 --- /dev/null +++ b/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 ( + + + + ); +}; + +export default SettingsButton; diff --git a/my-app/src/Components/Buttons/SubtractLifeButton.tsx b/my-app/src/Components/Buttons/SubtractLifeButton.tsx index 44f7e16..445ba53 100644 --- a/my-app/src/Components/Buttons/SubtractLifeButton.tsx +++ b/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 = { diff --git a/my-app/src/Components/LifeCounter/LifeCounter.style.ts b/my-app/src/Components/LifeCounter/LifeCounter.style.ts index d754fce..fc77a37 100644 --- a/my-app/src/Components/LifeCounter/LifeCounter.style.ts +++ b/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` diff --git a/my-app/src/Components/LifeCounter/LifeCounter.tsx b/my-app/src/Components/LifeCounter/LifeCounter.tsx index ffdf365..b3b3fd7 100644 --- a/my-app/src/Components/LifeCounter/LifeCounter.tsx +++ b/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} /> + { + setShowPlayerMenu(!showPlayerMenu); + }} + /> { +const PoisonIcon = ({ color, size }: IconProps) => { return (
{ ); }; -export default PhyrexianIcon; +export default PoisonIcon; diff --git a/my-app/src/Icons/SettingsIcon.tsx b/my-app/src/Icons/SettingsIcon.tsx new file mode 100644 index 0000000..57edda7 --- /dev/null +++ b/my-app/src/Icons/SettingsIcon.tsx @@ -0,0 +1,39 @@ +import { IconProps } from '../Types/Icon'; + +const SettingsIcon = ({ color, size }: IconProps) => { + return ( +
+ + + + + +
+ ); +}; + +export default SettingsIcon;