finish up tailwind

This commit is contained in:
Viktor Rådberg
2024-01-13 14:50:36 +01:00
parent 3cd982c643
commit 4f231ba6f4
19 changed files with 274 additions and 581 deletions

View File

@@ -7,9 +7,9 @@ const LoseButton = twc.div<RotationDivProps>((props) => [
'absolute flex-grow border-none outline-none cursor-pointer bg-interface-loseButton-background rounded-lg select-none z-[1] webkit-user-select-none',
props.$rotation === Rotation.SideFlipped
? `right-auto top-[15%] left-[27%] rotate-[${props.$rotation}deg]`
? `right-auto top-[15%] left-[27%]`
: props.$rotation === Rotation.Side
? `right-auto top-[15%] left-[27%] rotate-[${props.$rotation - 180}deg]`
? `right-auto top-[15%] left-[27%]`
: 'right-[15%] top-1/4',
]);
@@ -19,8 +19,20 @@ type LoseButtonProps = {
};
export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => {
const calcRotation =
rotation === Rotation.SideFlipped
? rotation
: rotation === Rotation.Side
? rotation - 180
: rotation;
return (
<LoseButton $rotation={rotation} onClick={onClick} aria-label={`Lose Game`}>
<LoseButton
$rotation={rotation}
onClick={onClick}
aria-label={`Lose Game`}
style={{ rotate: `${calcRotation}deg` }}
>
<Skull size="5vmin" color="black" opacity={0.5} />
</LoseButton>
);