fix side recent difference rotation

This commit is contained in:
Viktor Rådberg
2023-12-24 12:05:47 +01:00
parent 4891c670ae
commit 3e2deca2f0

View File

@@ -79,7 +79,7 @@ const fadeOut = keyframes`
} }
`; `;
export const RecentDifference = styled.span` export const RecentDifference = styled.span<{ $rotation: Rotation }>`
position: absolute; position: absolute;
top: 40%; top: 40%;
left: 50%; left: 50%;
@@ -95,6 +95,20 @@ export const RecentDifference = styled.span`
font-size: 8vmin; font-size: 8vmin;
color: #333333; color: #333333;
animation: ${fadeOut} 3s 1s ease-out forwards; animation: ${fadeOut} 3s 1s ease-out forwards;
${(props) => {
if (
props.$rotation === Rotation.SideFlipped ||
props.$rotation === Rotation.Side
) {
return css`
top: 27%;
left: 30%;
transform: translate(-50%, -50%);
rotate: 270deg;
`;
}
}}
`; `;
type HealthProps = { type HealthProps = {
@@ -195,7 +209,10 @@ const Health = ({
{player.lifeTotal} {player.lifeTotal}
</OutlinedText> </OutlinedText>
{recentDifference !== 0 && ( {recentDifference !== 0 && (
<RecentDifference key={differenceKey}> <RecentDifference
key={differenceKey}
$rotation={player.settings.rotation}
>
{recentDifference > 0 ? '+' : ''} {recentDifference > 0 ? '+' : ''}
{recentDifference} {recentDifference}
</RecentDifference> </RecentDifference>