external-repos/LifeTrinket
1
0
Fork 1
mirror of https://github.com/Vikeo/LifeTrinket.git synced 2025-11-14 23:17:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

commander damage tailwind

Browse Source
This commit is contained in:
Viktor Rådberg
2024-01-07 00:15:37 +01:00
parent db85fc2102
commit 1013914cdf
2 changed files with 43 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/Components/Buttons/CommanderDamage.tsx
View File

@@ -1,110 +1,45 @@
import styled from 'styled-components';
import { css } from 'styled-components';
import { Player, Rotation } from '../../Types/Player';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { OutlinedText } from '../Misc/OutlinedText';
import { decrementTimeoutMs } from '../../Data/constants'; import { decrementTimeoutMs } from '../../Data/constants';
import { usePlayers } from '../../Hooks/usePlayers'; import { usePlayers } from '../../Hooks/usePlayers';
import { Player, Rotation } from '../../Types/Player';
import { OutlinedText } from '../Misc/OutlinedText';
import { TwcComponentProps, twc } from 'react-twc';
const CommanderDamageContainer = styled.div<{ type RotationDivProps = TwcComponentProps<'div'> & {
$rotation: number; $rotation?: number;
}>` };
display: flex;
flex-direction: row;
flex-grow: 1;
width: 100%;
${(props) => { type RotationButtonProps = TwcComponentProps<'button'> & {
if ( $rotation?: number;
props.$rotation === Rotation.SideFlipped || };
props.$rotation === Rotation.Side
) {
return css`
flex-direction: column;
`;
}
}}
`;
const CommanderDamageButton = styled.button<{ const CommanderDamageContainer = twc.div<RotationDivProps>((props) => [
$backgroundColor?: string; 'flex flex-row flex-grow w-full',
$rotation: number; props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
}>` ? 'flex-col'
display: flex; : '',
flex-grow: 1; ]);
border: none;
height: 10vmin;
width: 50%;
outline: none;
cursor: pointer;
background-color: ${(props) => props.$backgroundColor || 'antiquewhite'};
margin: 0;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 0;
${(props) => {
if (
props.$rotation === Rotation.SideFlipped ||
props.$rotation === Rotation.Side
) {
return css`
width: 6vmax;
height: auto;
`;
}
}}
`;
const CommanderDamageTextContainer = styled.div<{ const CommanderDamageButton = twc.button<RotationButtonProps>((props) => [
$rotation: number; 'flex flex-grow border-none h-[10vmin] w-1/2 outline-none cursor-pointer m-0 p-0',
}>` props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
position: relative; ? 'w-[6vmax] h-auto'
top: 50%; : '',
left: 50%; ]);
transform: translate(-50%, -50%);
font-variant-numeric: tabular-nums;
pointer-events: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
${(props) => { const CommanderDamageTextContainer = twc.div<RotationDivProps>((props) => [
if ( 'relative top-1/2 left-1/2 tabular-nums pointer-events-none select-none',
props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
props.$rotation === Rotation.Side ? 'rotate-[270deg]'
) { : '',
return css` ]);
rotate: 270deg;
`;
}
}}
`;
const PartnerDamageSeperator = styled.div<{ const PartnerDamageSeperator = twc.div<RotationDivProps>((props) => [
$rotation: number; 'w-px bg-black',
}>` props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
width: 1px; ? 'w-[5.999vmax] h-px'
background-color: rgba(0, 0, 0, 1); : '',
]);
${(props) => {
if (
props.$rotation === Rotation.SideFlipped ||
props.$rotation === Rotation.Side
) {
return css`
width: auto;
height: 1px;
`;
}
}}
`;
type CommanderDamageButtonComponentProps = { type CommanderDamageButtonComponentProps = {
player: Player; player: Player;
@@ -214,8 +149,8 @@ export const CommanderDamage = ({
onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
e.preventDefault(); e.preventDefault();
}} }}
$backgroundColor={opponent.color}
aria-label={`Commander damage. Player ${player.index}, opponent ${opponent.index}`} aria-label={`Commander damage. Player ${player.index}, opponent ${opponent.index}`}
style={{ background: opponent.color }}
> >
<CommanderDamageTextContainer $rotation={player.settings.rotation}> <CommanderDamageTextContainer $rotation={player.settings.rotation}>
<OutlinedText <OutlinedText
@@ -248,8 +183,8 @@ export const CommanderDamage = ({
) => { ) => {
e.preventDefault(); e.preventDefault();
}} }}
$backgroundColor={opponent.color}
aria-label={`Partner Commander damage. Player ${player.index}, opponent ${opponent.index}`} aria-label={`Partner Commander damage. Player ${player.index}, opponent ${opponent.index}`}
style={{ background: opponent.color }}
> >
<CommanderDamageTextContainer $rotation={player.settings.rotation}> <CommanderDamageTextContainer $rotation={player.settings.rotation}>
<OutlinedText <OutlinedText

16
yarn.lock
View File

@@ -6311,9 +6311,9 @@ strip-json-comments@~2.0.1:
integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ== integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
styled-components@^6.0.7: styled-components@^6.0.7:
version "6.1.3" version "6.1.6"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.3.tgz#d3ffea630800f4486e79f6264826dad9426474e3" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.6.tgz#c75c4f994136545b3bcc11608db5363710b78c0e"
integrity sha512-kLerFjTAABuEZ870O4q4dyT/VCOJC/HA08+VeIGhkiOKkwJLP17HAWHCiqZWnUMV19m3axlOKR/+/EbCbuJAZg== integrity sha512-DgTLULSC29xpabJ24bbn1+hulU6vvGFQf4RPwBOJrm8WJFnN42yXpo5voBt3jDSJBa5tBd1L6PqswJjQ0wRKdg==
dependencies: dependencies:
"@emotion/is-prop-valid" "1.2.1" "@emotion/is-prop-valid" "1.2.1"
"@emotion/unitless" "0.8.0" "@emotion/unitless" "0.8.0"
@@ -6322,7 +6322,7 @@ styled-components@^6.0.7:
csstype "3.1.2" csstype "3.1.2"
postcss "8.4.31" postcss "8.4.31"
shallowequal "1.1.0" shallowequal "1.1.0"
stylis "4.3.0" stylis "4.3.1"
tslib "2.5.0" tslib "2.5.0"
stylis@4.2.0: stylis@4.2.0:
@@ -6330,10 +6330,10 @@ stylis@4.2.0:
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
stylis@4.3.0: stylis@4.3.1:
version "4.3.0" version "4.3.1"
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c" resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ== integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==
sucrase@^3.32.0: sucrase@^3.32.0:
version "3.35.0" version "3.35.0"