diff --git a/src/Components/Buttons/LoseButton.tsx b/src/Components/Buttons/LoseButton.tsx index 22efb4a..8a2f039 100644 --- a/src/Components/Buttons/LoseButton.tsx +++ b/src/Components/Buttons/LoseButton.tsx @@ -4,13 +4,11 @@ import { Rotation } from '../../Types/Player'; import { RotationDivProps } from './CommanderDamage'; const LoseButton = twc.div((props) => [ - 'absolute flex-grow border-none outline-none cursor-pointer bg-interface-loseButton-background rounded-lg select-none z-[1] webkit-user-select-none', + 'absolute flex-grow border-none outline-none cursor-pointer bg-interface-loseButton-background rounded-lg select-none z-[1] webkit-user-select-none py-2 px-4 ', - props.$rotation === Rotation.SideFlipped - ? `right-auto top-[15%] left-[27%]` - : props.$rotation === Rotation.Side - ? `right-auto top-[15%] left-[27%]` - : 'right-[15%] top-1/4', + props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side + ? `left-[19%]` + : 'top-[21%]', ]); type LoseButtonProps = { @@ -24,6 +22,8 @@ export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => { ? rotation : rotation === Rotation.Side ? rotation - 180 + : rotation === Rotation.Flipped + ? rotation - 180 : rotation; return ( @@ -33,7 +33,7 @@ export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => { aria-label={`Lose Game`} style={{ rotate: `${calcRotation}deg` }} > - + ); }; diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index e0b82d5..38c5286 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -6,7 +6,6 @@ import { usePlayers } from '../../Hooks/usePlayers'; import { Player, Rotation } from '../../Types/Player'; import { RotationDivProps } from '../Buttons/CommanderDamage'; import { LoseGameButton } from '../Buttons/LoseButton'; -import SettingsButton from '../Buttons/SettingsButton'; import CommanderDamageBar from '../Counters/CommanderDamageBar'; import ExtraCountersBar from '../Counters/ExtraCountersBar'; import PlayerMenu from '../Player/PlayerMenu'; @@ -25,7 +24,7 @@ const LifeCounterWrapper = twc.div((props) => [ const StartingPlayerNoticeWrapper = twc.div`z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-primary-main`; const PlayerLostWrapper = twc.div((props) => [ - 'z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-lifeCounter-lostWrapper', + 'z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-lifeCounter-lostWrapper opacity-75', props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side ? `rotate-[${props.$rotation - 90}deg]` : '', @@ -72,15 +71,23 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { const [showPlayerMenu, setShowPlayerMenu] = useState(false); const [recentDifference, setRecentDifference] = useState(0); const [differenceKey, setDifferenceKey] = useState(Date.now()); + const [isLandscape, setIsLandscape] = useState(false); - const rotationAngle = player.isSide + const calcRot = player.isSide ? player.settings.rotation - 180 : player.settings.rotation; + const rotationAngle = isLandscape ? calcRot : calcRot + 90; + const handlers = useSwipeable({ - onSwipedDown: (eventData) => { - console.log(`User Swiped on player ${player.index}`, eventData); - setShowPlayerMenu(!showPlayerMenu); + trackMouse: true, + onSwipedDown: () => { + console.log(`User DOWN Swiped on player ${player.index}`); + setShowPlayerMenu(true); + }, + onSwipedUp: () => { + console.log(`User UP Swiped on player ${player.index}`); + setShowPlayerMenu(false); }, swipeDuration: 500, @@ -93,8 +100,22 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { setRecentDifference(0); }, 3_000); - return () => clearTimeout(timer); - }, [recentDifference]); + const resizeObserver = new ResizeObserver(() => { + if (document.body.clientWidth > document.body.clientHeight) + setIsLandscape(true); + else setIsLandscape(false); + return; + }); + + resizeObserver.observe(document.body); + + return () => { + clearTimeout(timer); + // Cleanup: disconnect the ResizeObserver when the component unmounts. + resizeObserver.disconnect(); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [recentDifference, document.body.clientHeight, document.body.clientWidth]); useEffect(() => { if (player.showStartingPlayer) { @@ -167,12 +188,6 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => { key={player.index} handleLifeChange={handleLifeChange} /> - { - setShowPlayerMenu(!showPlayerMenu); - }} - rotation={player.settings.rotation} - /> {playerCanLose(player) && ( { handleLifeChange={handleLifeChange} /> - {showPlayerMenu && ( - - )} + + ); diff --git a/src/Components/Player/PlayerMenu.tsx b/src/Components/Player/PlayerMenu.tsx index c2e3330..909d7ad 100644 --- a/src/Components/Player/PlayerMenu.tsx +++ b/src/Components/Player/PlayerMenu.tsx @@ -6,7 +6,6 @@ import { useGlobalSettings } from '../../Hooks/useGlobalSettings'; import { usePlayers } from '../../Hooks/usePlayers'; import { useSafeRotate } from '../../Hooks/useSafeRotate'; import { - Cross, Energy, Exit, Experience, @@ -17,10 +16,7 @@ import { ResetGame, } from '../../Icons/generated'; import { Player, Rotation } from '../../Types/Player'; -import { - RotationButtonProps, - RotationDivProps, -} from '../Buttons/CommanderDamage'; +import { RotationDivProps } from '../Buttons/CommanderDamage'; const CheckboxContainer = twc.div``; @@ -35,6 +31,7 @@ const PlayerMenuWrapper = twc.div` justify-center z-[2] webkit-user-select-none + transition-all `; const BetterRowContainer = twc.div` @@ -85,21 +82,17 @@ const SettingsContainer = twc.div((props) => [ : 'flex-row', ]); -const CloseButton = twc.button((props) => [ - 'absolute border-none outline-none cursor-pointer bg-transparent z-[99]', - props.$rotation === Rotation.Side - ? `top-[5%] right-auto left-[5%]` - : props.$rotation === Rotation.SideFlipped - ? 'top-auto left-auto bottom-[5%] right-[5%]' - : 'top-[15%] right-[5%]', -]); - type PlayerMenuProps = { player: Player; setShowPlayerMenu: (showPlayerMenu: boolean) => void; + isShown: boolean; }; -const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => { +const PlayerMenu = ({ + player, + setShowPlayerMenu, + isShown, +}: PlayerMenuProps) => { const settingsContainerRef = useRef(null); const dialogRef = useRef(null); @@ -156,33 +149,10 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => { //TODO: Fix hacky solution to rotation for SideFlipped style={{ rotate: - player.settings.rotation === Rotation.SideFlipped ? '180deg' : '', + player.settings.rotation === Rotation.SideFlipped ? `180deg` : '', + translate: isShown ? '' : player.isSide ? `-100%` : `0 -100%`, }} > - - - - {

Reset Game?

diff --git a/src/Hooks/useOrientation.ts b/src/Hooks/useOrientation.ts new file mode 100644 index 0000000..a634879 --- /dev/null +++ b/src/Hooks/useOrientation.ts @@ -0,0 +1,53 @@ +import { useEffect, useState } from 'react'; + +export interface OrientationState { + angle: number; + type: string; +} + +const defaultState: OrientationState = { + angle: 0, + type: 'landscape-primary', +}; + +export default function useOrientation( + initialState: OrientationState = defaultState +) { + const [state, setState] = useState(initialState); + const [isLandscape, setIsLandscape] = useState(false); + + useEffect(() => { + const screen = window.screen; + let mounted = true; + + const onChange = () => { + if (mounted) { + const { orientation } = screen; + console.log(orientation); + + if (orientation) { + const { angle, type } = orientation; + setState({ angle, type }); + if (type.includes('landscape')) { + setIsLandscape(true); + } else if (type.includes('portrait')) { + setIsLandscape(false); + } + } else if (window.orientation !== undefined) { + setState({ + angle: + typeof window.orientation === 'number' ? window.orientation : 0, + type: '', + }); + } + } + }; + onChange(); + + return () => { + mounted = false; + }; + }, [isLandscape]); + + return { state, isLandscape }; +} diff --git a/tailwind.config.ts b/tailwind.config.ts index af30f8b..714d343 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -67,7 +67,7 @@ export default { }, lifeCounter: { text: 'rgba(0, 0, 0, 0.4)', - lostWrapper: '#00000070', + lostWrapper: '#000000', }, interface: { loseButton: {