mirror of
https://github.com/Vikeo/LifeTrinket.git
synced 2025-11-19 01:08:00 +00:00
abstract safe rotate
This commit is contained in:
Viktor Rådberg
@@ -15,8 +15,9 @@ import {
|
|||||||
Cross,
|
Cross,
|
||||||
ResetGame,
|
ResetGame,
|
||||||
} from '../../Icons/generated';
|
} from '../../Icons/generated';
|
||||||
import { useEffect, useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { Spacer } from '../Misc/Spacer';
|
import { Spacer } from '../Misc/Spacer';
|
||||||
|
import { useSafeRotate } from '../../Hooks/useSafeRotate';
|
||||||
|
|
||||||
const SettingsContainer = styled.div<{
|
const SettingsContainer = styled.div<{
|
||||||
$rotation: Rotation;
|
$rotation: Rotation;
|
||||||
@@ -71,8 +72,8 @@ const TogglesSection = styled.div`
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
const ButtonsSections = styled.div`
|
const ButtonsSections = styled.div`
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
max-width: 100%;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 3% 3%;
|
padding: 3% 3%;
|
||||||
@@ -85,7 +86,6 @@ const ColorPicker = styled.input`
|
|||||||
left: 5%;
|
left: 5%;
|
||||||
height: 8vmax;
|
height: 8vmax;
|
||||||
width: 8vmax;
|
width: 8vmax;
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -173,30 +173,14 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
|
|||||||
const settingsContainerRef = useRef<HTMLDivElement | null>(null);
|
const settingsContainerRef = useRef<HTMLDivElement | null>(null);
|
||||||
const dialogRef = useRef<HTMLDialogElement | null>(null);
|
const dialogRef = useRef<HTMLDialogElement | null>(null);
|
||||||
|
|
||||||
const isSide =
|
const { isSide } = useSafeRotate({
|
||||||
player.settings.rotation === Rotation.Side ||
|
rotation: player.settings.rotation,
|
||||||
player.settings.rotation === Rotation.SideFlipped;
|
containerRef: settingsContainerRef,
|
||||||
|
});
|
||||||
useEffect(() => {
|
|
||||||
if (!settingsContainerRef.current) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isSide) {
|
|
||||||
//set height to 100% of the width of the parent
|
|
||||||
settingsContainerRef.current.style.height = `${settingsContainerRef.current.parentElement?.clientWidth}px`;
|
|
||||||
|
|
||||||
//set width to 100% of the height of the parent
|
|
||||||
settingsContainerRef.current.style.width = `${settingsContainerRef.current.parentElement?.clientHeight}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [settingsContainerRef]);
|
|
||||||
|
|
||||||
const handleOnClick = () => {
|
const handleOnClick = () => {
|
||||||
setShowPlayerMenu(false);
|
setShowPlayerMenu(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
|
const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
|
||||||
const { updatePlayer, resetCurrentGame } = usePlayers();
|
const { updatePlayer, resetCurrentGame } = usePlayers();
|
||||||
|
|
||||||
@@ -231,242 +215,240 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
|
|||||||
const closeButtonSize = isSide ? '6vmin' : '3vmax';
|
const closeButtonSize = isSide ? '6vmin' : '3vmax';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<PlayerMenuWrapper $rotation={player.settings.rotation}>
|
||||||
<PlayerMenuWrapper $rotation={player.settings.rotation}>
|
<CloseButton $rotation={player.settings.rotation}>
|
||||||
<CloseButton $rotation={player.settings.rotation}>
|
<Button
|
||||||
<Button
|
variant="text"
|
||||||
variant="text"
|
onClick={handleOnClick}
|
||||||
onClick={handleOnClick}
|
style={{
|
||||||
style={{
|
margin: 0,
|
||||||
margin: 0,
|
padding: 0,
|
||||||
padding: 0,
|
height: closeButtonSize,
|
||||||
height: closeButtonSize,
|
width: closeButtonSize,
|
||||||
width: closeButtonSize,
|
}}
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Cross size={closeButtonSize} />
|
|
||||||
</Button>
|
|
||||||
</CloseButton>
|
|
||||||
<SettingsContainer
|
|
||||||
$rotation={player.settings.rotation}
|
|
||||||
ref={settingsContainerRef}
|
|
||||||
>
|
>
|
||||||
<ColorPicker
|
<Cross size={closeButtonSize} />
|
||||||
type="color"
|
</Button>
|
||||||
value={player.color}
|
</CloseButton>
|
||||||
onChange={handleColorChange}
|
<SettingsContainer
|
||||||
role="button"
|
$rotation={player.settings.rotation}
|
||||||
aria-label="Color picker"
|
ref={settingsContainerRef}
|
||||||
/>
|
>
|
||||||
<BetterRowContainer>
|
<ColorPicker
|
||||||
<TogglesSection>
|
type="color"
|
||||||
{player.settings.useCommanderDamage && (
|
value={player.color}
|
||||||
<CheckboxContainer $rotation={player.settings.rotation}>
|
onChange={handleColorChange}
|
||||||
<Checkbox
|
role="button"
|
||||||
name="usePartner"
|
aria-label="Color picker"
|
||||||
checked={player.settings.usePartner}
|
/>
|
||||||
icon={
|
<BetterRowContainer>
|
||||||
<PartnerTax
|
<TogglesSection>
|
||||||
size={extraCountersSize}
|
{player.settings.useCommanderDamage && (
|
||||||
color="black"
|
<CheckboxContainer $rotation={player.settings.rotation}>
|
||||||
stroke="white"
|
<Checkbox
|
||||||
strokeWidth="30"
|
name="usePartner"
|
||||||
/>
|
checked={player.settings.usePartner}
|
||||||
}
|
icon={
|
||||||
checkedIcon={
|
<PartnerTax
|
||||||
<PartnerTax
|
size={extraCountersSize}
|
||||||
size={extraCountersSize}
|
color="black"
|
||||||
color={player.color}
|
stroke="white"
|
||||||
stroke="white"
|
strokeWidth="30"
|
||||||
strokeWidth="30"
|
/>
|
||||||
/>
|
}
|
||||||
}
|
checkedIcon={
|
||||||
onChange={handleSettingsChange}
|
<PartnerTax
|
||||||
role="checkbox"
|
size={extraCountersSize}
|
||||||
aria-checked={player.settings.usePartner}
|
color={player.color}
|
||||||
aria-label="Partner"
|
stroke="white"
|
||||||
|
strokeWidth="30"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
onChange={handleSettingsChange}
|
||||||
|
role="checkbox"
|
||||||
|
aria-checked={player.settings.usePartner}
|
||||||
|
aria-label="Partner"
|
||||||
|
/>
|
||||||
|
</CheckboxContainer>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<CheckboxContainer $rotation={player.settings.rotation}>
|
||||||
|
<Checkbox
|
||||||
|
name="usePoison"
|
||||||
|
checked={player.settings.usePoison}
|
||||||
|
icon={
|
||||||
|
<Poison
|
||||||
|
size={extraCountersSize}
|
||||||
|
color="black"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="30"
|
||||||
/>
|
/>
|
||||||
</CheckboxContainer>
|
}
|
||||||
)}
|
checkedIcon={
|
||||||
|
<Poison
|
||||||
<CheckboxContainer $rotation={player.settings.rotation}>
|
size={extraCountersSize}
|
||||||
<Checkbox
|
color={player.color}
|
||||||
name="usePoison"
|
stroke="white"
|
||||||
checked={player.settings.usePoison}
|
strokeWidth="30"
|
||||||
icon={
|
/>
|
||||||
<Poison
|
}
|
||||||
size={extraCountersSize}
|
onChange={handleSettingsChange}
|
||||||
color="black"
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="30"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<Poison
|
|
||||||
size={extraCountersSize}
|
|
||||||
color={player.color}
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="30"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
onChange={handleSettingsChange}
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={player.settings.usePoison}
|
|
||||||
aria-label="Poison"
|
|
||||||
/>
|
|
||||||
</CheckboxContainer>
|
|
||||||
|
|
||||||
<CheckboxContainer $rotation={player.settings.rotation}>
|
|
||||||
<Checkbox
|
|
||||||
name="useEnergy"
|
|
||||||
checked={player.settings.useEnergy}
|
|
||||||
icon={
|
|
||||||
<Energy
|
|
||||||
size={extraCountersSize}
|
|
||||||
color="black"
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="15"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<Energy
|
|
||||||
size={extraCountersSize}
|
|
||||||
color={player.color}
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="15"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
onChange={handleSettingsChange}
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={player.settings.useEnergy}
|
|
||||||
aria-label="Energy"
|
|
||||||
/>
|
|
||||||
</CheckboxContainer>
|
|
||||||
|
|
||||||
<CheckboxContainer $rotation={player.settings.rotation}>
|
|
||||||
<Checkbox
|
|
||||||
name="useExperience"
|
|
||||||
checked={player.settings.useExperience}
|
|
||||||
icon={
|
|
||||||
<Experience
|
|
||||||
size={extraCountersSize}
|
|
||||||
color="black"
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="15"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<Experience
|
|
||||||
size={extraCountersSize}
|
|
||||||
color={player.color}
|
|
||||||
stroke="white"
|
|
||||||
strokeWidth="15"
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
onChange={handleSettingsChange}
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={player.settings.useExperience}
|
|
||||||
aria-label="Experience"
|
|
||||||
/>
|
|
||||||
</CheckboxContainer>
|
|
||||||
</TogglesSection>
|
|
||||||
<Spacer height="1rem" />
|
|
||||||
<ButtonsSections>
|
|
||||||
<Button
|
|
||||||
variant="text"
|
|
||||||
style={{
|
|
||||||
cursor: 'pointer',
|
|
||||||
userSelect: 'none',
|
|
||||||
}}
|
|
||||||
onClick={goToStart}
|
|
||||||
aria-label="Back to start"
|
|
||||||
>
|
|
||||||
<Exit size={iconSize} style={{ rotate: '180deg' }} />
|
|
||||||
</Button>
|
|
||||||
<CheckboxContainer $rotation={player.settings.rotation}>
|
|
||||||
<Checkbox
|
|
||||||
name="fullscreen"
|
|
||||||
checked={document.fullscreenElement ? true : false}
|
|
||||||
icon={
|
|
||||||
<FullscreenOff
|
|
||||||
size={iconSize}
|
|
||||||
color={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={<FullscreenOn size={iconSize} />}
|
|
||||||
onChange={toggleFullscreen}
|
|
||||||
role="checkbox"
|
|
||||||
aria-checked={document.fullscreenElement ? true : false}
|
|
||||||
aria-label="Fullscreen"
|
|
||||||
/>
|
|
||||||
</CheckboxContainer>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant={wakeLock.active ? 'contained' : 'outlined'}
|
|
||||||
style={{
|
|
||||||
cursor: 'pointer',
|
|
||||||
userSelect: 'none',
|
|
||||||
fontSize: buttonFontSize,
|
|
||||||
padding: '0 4px 0 4px',
|
|
||||||
}}
|
|
||||||
onClick={wakeLock.toggleWakeLock}
|
|
||||||
role="checkbox"
|
role="checkbox"
|
||||||
aria-checked={wakeLock.active}
|
aria-checked={player.settings.usePoison}
|
||||||
aria-label="Keep awake"
|
aria-label="Poison"
|
||||||
>
|
/>
|
||||||
Keep Awake
|
</CheckboxContainer>
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
<CheckboxContainer $rotation={player.settings.rotation}>
|
||||||
style={{
|
<Checkbox
|
||||||
cursor: 'pointer',
|
name="useEnergy"
|
||||||
userSelect: 'none',
|
checked={player.settings.useEnergy}
|
||||||
fontSize: buttonFontSize,
|
icon={
|
||||||
padding: '4px',
|
<Energy
|
||||||
}}
|
size={extraCountersSize}
|
||||||
onClick={() => dialogRef.current?.show()}
|
color="black"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="15"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
checkedIcon={
|
||||||
|
<Energy
|
||||||
|
size={extraCountersSize}
|
||||||
|
color={player.color}
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="15"
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
onChange={handleSettingsChange}
|
||||||
role="checkbox"
|
role="checkbox"
|
||||||
aria-checked={wakeLock.active}
|
aria-checked={player.settings.useEnergy}
|
||||||
aria-label="Reset Game"
|
aria-label="Energy"
|
||||||
>
|
/>
|
||||||
<ResetGame size={iconSize} />
|
</CheckboxContainer>
|
||||||
</Button>
|
|
||||||
</ButtonsSections>
|
<CheckboxContainer $rotation={player.settings.rotation}>
|
||||||
</BetterRowContainer>
|
<Checkbox
|
||||||
<dialog
|
name="useExperience"
|
||||||
ref={dialogRef}
|
checked={player.settings.useExperience}
|
||||||
style={{
|
icon={
|
||||||
zIndex: 9999,
|
<Experience
|
||||||
background: theme.palette.background.default,
|
size={extraCountersSize}
|
||||||
color: theme.palette.text.primary,
|
color="black"
|
||||||
borderRadius: '1rem',
|
stroke="white"
|
||||||
border: 'none',
|
strokeWidth="15"
|
||||||
position: 'absolute',
|
/>
|
||||||
top: '10%',
|
}
|
||||||
}}
|
checkedIcon={
|
||||||
>
|
<Experience
|
||||||
<h1>Reset Game?</h1>
|
size={extraCountersSize}
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
|
color={player.color}
|
||||||
<Button
|
stroke="white"
|
||||||
variant="contained"
|
strokeWidth="15"
|
||||||
onClick={() => dialogRef.current?.close()}
|
/>
|
||||||
>
|
}
|
||||||
No
|
onChange={handleSettingsChange}
|
||||||
</Button>
|
role="checkbox"
|
||||||
<Button
|
aria-checked={player.settings.useExperience}
|
||||||
variant="contained"
|
aria-label="Experience"
|
||||||
onClick={() => {
|
/>
|
||||||
handleResetGame();
|
</CheckboxContainer>
|
||||||
dialogRef.current?.close();
|
</TogglesSection>
|
||||||
}}
|
<Spacer height="1rem" />
|
||||||
>
|
<ButtonsSections>
|
||||||
Yes
|
<Button
|
||||||
</Button>
|
variant="text"
|
||||||
</div>
|
style={{
|
||||||
</dialog>
|
cursor: 'pointer',
|
||||||
</SettingsContainer>
|
userSelect: 'none',
|
||||||
</PlayerMenuWrapper>
|
}}
|
||||||
</>
|
onClick={goToStart}
|
||||||
|
aria-label="Back to start"
|
||||||
|
>
|
||||||
|
<Exit size={iconSize} style={{ rotate: '180deg' }} />
|
||||||
|
</Button>
|
||||||
|
<CheckboxContainer $rotation={player.settings.rotation}>
|
||||||
|
<Checkbox
|
||||||
|
name="fullscreen"
|
||||||
|
checked={document.fullscreenElement ? true : false}
|
||||||
|
icon={
|
||||||
|
<FullscreenOff
|
||||||
|
size={iconSize}
|
||||||
|
color={theme.palette.primary.main}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
checkedIcon={<FullscreenOn size={iconSize} />}
|
||||||
|
onChange={toggleFullscreen}
|
||||||
|
role="checkbox"
|
||||||
|
aria-checked={document.fullscreenElement ? true : false}
|
||||||
|
aria-label="Fullscreen"
|
||||||
|
/>
|
||||||
|
</CheckboxContainer>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant={wakeLock.active ? 'contained' : 'outlined'}
|
||||||
|
style={{
|
||||||
|
cursor: 'pointer',
|
||||||
|
userSelect: 'none',
|
||||||
|
fontSize: buttonFontSize,
|
||||||
|
padding: '0 4px 0 4px',
|
||||||
|
}}
|
||||||
|
onClick={wakeLock.toggleWakeLock}
|
||||||
|
role="checkbox"
|
||||||
|
aria-checked={wakeLock.active}
|
||||||
|
aria-label="Keep awake"
|
||||||
|
>
|
||||||
|
Keep Awake
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
style={{
|
||||||
|
cursor: 'pointer',
|
||||||
|
userSelect: 'none',
|
||||||
|
fontSize: buttonFontSize,
|
||||||
|
padding: '4px',
|
||||||
|
}}
|
||||||
|
onClick={() => dialogRef.current?.show()}
|
||||||
|
role="checkbox"
|
||||||
|
aria-checked={wakeLock.active}
|
||||||
|
aria-label="Reset Game"
|
||||||
|
>
|
||||||
|
<ResetGame size={iconSize} />
|
||||||
|
</Button>
|
||||||
|
</ButtonsSections>
|
||||||
|
</BetterRowContainer>
|
||||||
|
<dialog
|
||||||
|
ref={dialogRef}
|
||||||
|
style={{
|
||||||
|
zIndex: 9999,
|
||||||
|
background: theme.palette.background.default,
|
||||||
|
color: theme.palette.text.primary,
|
||||||
|
borderRadius: '1rem',
|
||||||
|
border: 'none',
|
||||||
|
position: 'absolute',
|
||||||
|
top: '10%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h1>Reset Game?</h1>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => dialogRef.current?.close()}
|
||||||
|
>
|
||||||
|
No
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
onClick={() => {
|
||||||
|
handleResetGame();
|
||||||
|
dialogRef.current?.close();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Yes
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
</SettingsContainer>
|
||||||
|
</PlayerMenuWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
53
src/Hooks/useSafeRotate.ts
Normal file
53
src/Hooks/useSafeRotate.ts
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
import { Rotation } from '../Types/Player';
|
||||||
|
|
||||||
|
type useSafeRotateProps = {
|
||||||
|
rotation: Rotation;
|
||||||
|
containerRef: React.MutableRefObject<HTMLDivElement | null>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useSafeRotate = ({
|
||||||
|
rotation,
|
||||||
|
containerRef,
|
||||||
|
}: useSafeRotateProps) => {
|
||||||
|
const isSide =
|
||||||
|
rotation === Rotation.Side || rotation === Rotation.SideFlipped;
|
||||||
|
|
||||||
|
const calculateSize = (container: HTMLDivElement) => {
|
||||||
|
if (isSide) {
|
||||||
|
//set height to 100% of the width of the parent
|
||||||
|
container.style.height = `${container.parentElement?.clientWidth}px`;
|
||||||
|
|
||||||
|
//set width to 100% of the height of the parent
|
||||||
|
container.style.width = `${container.parentElement?.clientHeight}px`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!containerRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const container = containerRef.current;
|
||||||
|
|
||||||
|
const resizeObserver = new ResizeObserver(() => {
|
||||||
|
calculateSize(container);
|
||||||
|
console.log('resize by observer');
|
||||||
|
return;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initially calculate size
|
||||||
|
calculateSize(container);
|
||||||
|
|
||||||
|
resizeObserver.observe(container.parentElement as Element);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
// Cleanup: disconnect the ResizeObserver when the component unmounts.
|
||||||
|
resizeObserver.disconnect();
|
||||||
|
};
|
||||||
|
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [containerRef]);
|
||||||
|
|
||||||
|
return { isSide };
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user