diff --git a/src/Components/LifeCounter/LifeCounter.tsx b/src/Components/LifeCounter/LifeCounter.tsx index 848a8b4..ffc15a9 100644 --- a/src/Components/LifeCounter/LifeCounter.tsx +++ b/src/Components/LifeCounter/LifeCounter.tsx @@ -190,7 +190,7 @@ export const LoseGameButton = styled.button<{ rotation: Rotation }>` top: 12vmin; right: 6vmax; background-color: #43434380; - border-radius: 15px; + border-radius: 8px; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; user-select: none; @@ -299,14 +299,14 @@ const LifeCounter = ({ const fontSize = player.settings.rotation === Rotation.SideFlipped || player.settings.rotation === Rotation.Side - ? `${size}vmax` - : `${size}vmin`; + ? `clamp(6rem, ${size}vmax, 10rem)` + : `clamp(6rem, ${size}vmin, 10rem)`; const strokeWidth = player.settings.rotation === Rotation.SideFlipped || player.settings.rotation === Rotation.Side - ? `${size / 20}vmax` - : `${size / 20}vmin`; + ? `clamp(0.4rem, ${size / 20}vmax, 12rem)` + : `clamp(0.4rem, ${size / 20}vmin, 12rem)`; return ( diff --git a/src/Components/PlayerMenu/PlayerMenu.tsx b/src/Components/PlayerMenu/PlayerMenu.tsx index 4436953..9e193f3 100644 --- a/src/Components/PlayerMenu/PlayerMenu.tsx +++ b/src/Components/PlayerMenu/PlayerMenu.tsx @@ -3,6 +3,7 @@ import Settings from './Settings'; import styled from 'styled-components'; import { css } from 'styled-components'; import { Rotation } from '../../Types/Player'; +import { Button } from '@mui/material'; const PlayerMenuWrapper = styled.div<{ rotation: Rotation; @@ -29,15 +30,17 @@ const PlayerMenuWrapper = styled.div<{ }}; `; -const CloseButton = styled.button<{ +const CloseButton = styled.div<{ rotation: Rotation; }>` position: absolute; top: 5%; right: 5%; + border: none; + outline: none; cursor: pointer; - user-select: none; - color: black; + background-color: transparent; + ${(props) => { if (props.rotation === Rotation.Side) { return css` @@ -79,8 +82,17 @@ const PlayerMenu = ({ return ( - - X + + ` display: flex; + position: relative; flex-direction: row; justify-content: space-evenly; align-items: center; @@ -29,11 +30,6 @@ const SettingsContainer = styled.div<{ flex-direction: column-reverse; height: 100%; width: 100%; - /* padding-top: 36px; */ - `; - } else { - return css` - /* padding-top: 36px; */ `; } }} @@ -41,9 +37,9 @@ const SettingsContainer = styled.div<{ const TogglesSection = styled.div<{ rotation: Rotation }>` display: flex; + position: absolute; flex-direction: row; justify-content: space-evenly; - flex-wrap: wrap; gap: 0.5rem; ${(props) => { @@ -59,18 +55,22 @@ const TogglesSection = styled.div<{ rotation: Rotation }>` `; const ButtonsSections = styled.div<{ rotation: Rotation }>` + position: absolute; display: flex; - flex-direction: column; - justify-content: space-evenly; - flex-wrap: wrap; gap: 1rem; + bottom: 16px; ${(props) => { - if ( - props.rotation === Rotation.SideFlipped || - props.rotation === Rotation.Side - ) { + if (props.rotation === Rotation.Side) { return css` + bottom: auto; + right: -6rem; + rotate: ${props.rotation - 180}deg; + `; + } else if (props.rotation === Rotation.SideFlipped) { + return css` + bottom: auto; + left: -6rem; rotate: ${props.rotation - 180}deg; `; } @@ -111,12 +111,6 @@ const ColorPicker = styled.input<{ }} `; -const Button = styled.button` - cursor: pointer; - user-select: none; - color: #000000; -`; - const CheckboxContainer = styled.div<{ rotation: Rotation }>` ${(props) => { if ( @@ -269,11 +263,41 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => { /> - - - - + +