wip tailwind

src/Components/Buttons/CommanderDamage.tsx

@@ -5,40 +5,44 @@ import { Player, Rotation } from '../../Types/Player';
 import { OutlinedText } from '../Misc/OutlinedText';
 import { TwcComponentProps, twc } from 'react-twc';
 
-type RotationDivProps = TwcComponentProps<'div'> & {
+export type RotationDivProps = TwcComponentProps<'div'> & {
   $rotation?: number;
 };
 
-type RotationButtonProps = TwcComponentProps<'button'> & {
+export type RotationSpanProps = TwcComponentProps<'span'> & {
+  $rotation?: number;
+};
+
+export type RotationButtonProps = TwcComponentProps<'button'> & {
   $rotation?: number;
 };
 
 const CommanderDamageContainer = twc.div<RotationDivProps>((props) => [
-  'flex flex-row flex-grow w-full',
+  'flex flex-grow',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
     ? 'flex-col'
-    : '',
+    : 'flex-row',
 ]);
 
 const CommanderDamageButton = twc.button<RotationButtonProps>((props) => [
-  'flex flex-grow border-none h-[10vmin] w-1/2 outline-none cursor-pointer m-0 p-0',
+  'flex flex-grow border-none outline-none cursor-pointer m-0 p-0 webkit-user-select-none',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
     ? 'w-[6vmax] h-auto'
-    : '',
+    : 'h-[10vmin] w-1/2',
 ]);
 
 const CommanderDamageTextContainer = twc.div<RotationDivProps>((props) => [
-  'relative top-1/2 left-1/2 tabular-nums pointer-events-none select-none',
+  'relative top-1/2 left-1/2 tabular-nums pointer-events-none select-none webkit-user-select-none',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
     ? 'rotate-[270deg]'
     : '',
 ]);
 
 const PartnerDamageSeperator = twc.div<RotationDivProps>((props) => [
-  'w-px bg-black',
+  'bg-black',
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
-    ? 'w-[5.999vmax] h-px'
-    : '',
+    ? 'w-full h-px'
+    : 'w-px',
 ]);
 
 type CommanderDamageButtonComponentProps = {

src/Components/Buttons/ExtraCounter.tsx

@@ -1,60 +1,45 @@
 import { ReactNode, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { css } from 'styled-components';
 import { decrementTimeoutMs } from '../../Data/constants';
 import { CounterType, Rotation } from '../../Types/Player';
 import { OutlinedText } from '../Misc/OutlinedText';
+import { twc } from 'react-twc';
+import { RotationDivProps } from './CommanderDamage';
 
-const ExtraCounterContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: all;
-  flex-grow: 1;
+const ExtraCounterContainer = twc.div`
+  flex
+  justify-center
+  items-center
+  pointer-events-all
+  flex-grow
 `;
 
-export const StyledExtraCounterButton = styled.button`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  flex-grow: 1;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  background-color: transparent;
-  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;
-  height: 100%;
-`;
-
-const IconContainer = styled.div<{
-  $rotation: number;
-}>`
-  width: auto;
-
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        rotate: -90deg;
+const StyledExtraCounterButton = twc.button`
+  flex
+  justify-center
+  items-center
+  relative
+  flex-grow
+  border-none
+  outline-none
+  cursor-pointer
+  bg-transparent
+  select-none
+  h-full
+  webkit-user-select-none
   `;
-    }
-  }}
-`;
 
-const TextContainer = styled.div`
-  position: absolute;
-  translate: -50%;
-  top: 50%;
-  left: 50%;
-`;
+const IconContainer = twc.div<RotationDivProps>((props) => [
+  'w-auto',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'rotate-[-90deg]'
+    : '',
+]);
+
+const TextContainer = twc.div`
+  absolute
+  top-1/2
+  left-1/2
+  `;
 
 type ExtraCounterProps = {
   Icon: ReactNode;

src/Components/Buttons/LifeCounterButton.tsx

@@ -1,64 +1,43 @@
 import { useRef, useState } from 'react';
-import styled from 'styled-components';
-import { css } from 'styled-components';
 import { lifeLongPressMultiplier } from '../../Data/constants';
 
+import { TwcComponentProps, twc } from 'react-twc';
 import { Rotation } from '../../Types/Player';
 
-export const StyledLifeCounterButton = styled.button`
-  width: 100%;
-  height: 100%;
-  color: rgba(0, 0, 0, 0.4);
-  font-weight: 600;
-  background-color: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  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;
-`;
-
-const TextContainer = styled.div<{
+type RotationButtonProps = TwcComponentProps<'div'> & {
   $align?: string;
-  $rotation: number;
-}>`
-  position: relative;
+  $rotation?: number;
+};
 
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      if (props.$align === 'right') {
-        return css`
-          rotate: -90deg;
-          bottom: 25%;
-          top: auto;
+const StyledLifeCounterButton = twc.button`
+  h-full
+  w-full
+  flex
+  text-lifeCounter-text
+  font-semibold
+  bg-transparent
+  border-none
+  outline-none
+  cursor-pointer
+  justify-center
+  items-center
+  select-none
+  webkit-user-select-none
   `;
-      }
-      return css`
-        rotate: -90deg;
-        top: 25%;
-      `;
-    }
 
-    if (props.$align === 'right') {
-      return css`
-        left: 25%;
-      `;
-    }
-    return css`
-      right: 25%;
-    `;
-  }}
-`;
+const TextContainer = twc.div<RotationButtonProps>((props) => [
+  'relative',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? props.$align === 'right'
+      ? '-rotate-90 bottom-1/4 top-auto'
+      : '-rotate-90 top-1/4'
+    : 'top-auto',
+  props.$rotation === Rotation.Flipped || props.$rotation === Rotation.Normal
+    ? props.$align === 'right'
+      ? 'left-1/4'
+      : 'right-1/4'
+    : '',
+]);
 
 type LifeCounterButtonProps = {
   lifeTotal: number;

src/Components/Buttons/LoseButton.tsx

@@ -1,43 +1,17 @@
-import styled, { css } from 'styled-components';
+import { twc } from 'react-twc';
 import { Skull } from '../../Icons/generated';
 import { Rotation } from '../../Types/Player';
+import { RotationDivProps } from './CommanderDamage';
 
-export const LoseButton = styled.button<{ $rotation: Rotation }>`
-  position: absolute;
-  flex-grow: 1;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  top: 25%;
-  right: 15%;
-  background-color: #43434380;
-  border-radius: 8px;
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: transparent;
-  user-select: none;
-  -moz-user-select: -moz-none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  z-index: 1;
+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) => {
-    if (props.$rotation === Rotation.SideFlipped) {
-      return css`
-        right: auto;
-        top: 15%;
-        left: 27%;
-        rotate: ${props.$rotation}deg;
-      `;
-    } else if (props.$rotation === Rotation.Side) {
-      return css`
-        right: auto;
-        top: 15%;
-        left: 27%;
-        rotate: ${props.$rotation - 180}deg;
-      `;
-    }
-  }}
-`;
+  props.$rotation === Rotation.SideFlipped
+    ? `right-auto top-[15%] left-[27%] rotate-[${props.$rotation}deg]`
+    : props.$rotation === Rotation.Side
+    ? `right-auto top-[15%] left-[27%] rotate-[${props.$rotation - 180}deg]`
+    : 'right-[15%] top-1/4',
+]);
 
 type LoseButtonProps = {
   onClick: () => void;

src/Components/Buttons/SettingsButton.tsx

@@ -1,37 +1,14 @@
-import styled from 'styled-components';
-import { css } from 'styled-components';
-import { Rotation } from '../../Types/Player';
+import { twc } from 'react-twc';
 import { Cog } from '../../Icons/generated';
+import { Rotation } from '../../Types/Player';
+import { RotationButtonProps } from './CommanderDamage';
 
-export const StyledSettingsButton = styled.button<{ $rotation: Rotation }>`
-  position: absolute;
-  flex-grow: 1;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  top: 25%;
-  right: 1vmax;
-  background-color: transparent;
-  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;
-  z-index: 1;
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.Side ||
-      props.$rotation === Rotation.SideFlipped
-    ) {
-      return css`
-        right: auto;
-        top: 1vmax;
-        left: 27%;
-      `;
-    }
-  }}
-`;
+const StyledSettingsButton = twc.button<RotationButtonProps>((props) => [
+  'absolute flex-grow border-none outline-none cursor-pointer bg-transparent z-[1] select-none  webkit-user-select-none',
+  props.$rotation === Rotation.Side || props.$rotation === Rotation.SideFlipped
+    ? `right-auto top-[1vmax] left-[27%]`
+    : 'top-1/4 right-[1vmax]',
+]);
 
 type SettingsButtonProps = {
   onClick: () => void;

src/Components/Counters/CommanderDamageBar.tsx

@@ -1,27 +1,13 @@
+import { twc } from 'react-twc';
 import { Player, Rotation } from '../../Types/Player';
-import styled from 'styled-components';
-import { css } from 'styled-components';
-import { CommanderDamage } from '../Buttons/CommanderDamage';
+import { CommanderDamage, RotationDivProps } from '../Buttons/CommanderDamage';
 
-const CommanderDamageGrid = styled.div<{ $rotation: number }>`
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  width: 100%;
-
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        flex-direction: column;
-        height: 100%;
-        width: auto;
-      `;
-    }
-  }}
-`;
+const CommanderDamageGrid = twc.div<RotationDivProps>((props) => [
+  'flex flex-grow',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'flex-col h-full w-auto'
+    : 'flex-row w-full',
+]);
 
 type CommanderDamageBarProps = {
   opponents: Player[];

src/Components/Counters/Counters.tsx

@@ -1,59 +0,0 @@
-import styled from 'styled-components';
-import { usePlayers } from '../../Hooks/usePlayers';
-import LifeCounter from '../LifeCounter/LifeCounter';
-
-export const CountersWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  background-color: black;
-`;
-
-export const CountersGrid = styled.div<{ $gridTemplateAreas: string }>`
-  display: grid;
-  gap: 4px;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  height: 100%;
-  grid-template-areas: ${({ $gridTemplateAreas }) => $gridTemplateAreas};
-`;
-
-export const GridItemContainer = styled.div<{
-  $gridArea: string;
-}>`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  grid-area: ${(props) => props.$gridArea};
-`;
-
-type CountersProps = {
-  gridAreas: string;
-};
-
-const Counters = ({ gridAreas }: CountersProps) => {
-  const { players } = usePlayers();
-  return (
-    <CountersWrapper>
-      <CountersGrid $gridTemplateAreas={gridAreas}>
-        {players.map((player) => {
-          return (
-            <GridItemContainer
-              key={player.index}
-              $gridArea={`player${player.index}`}
-            >
-              <LifeCounter
-                player={player}
-                opponents={players.filter(
-                  (opponent) => opponent.index !== player.index
-                )}
-              />
-            </GridItemContainer>
-          );
-        })}
-      </CountersGrid>
-    </CountersWrapper>
-  );
-};
-
-export default Counters;

src/Components/Counters/ExtraCountersBar.tsx

@@ -1,8 +1,5 @@
-import { CounterType, Player } from '../../Types/Player';
-import ExtraCounter from '../Buttons/ExtraCounter';
-import styled from 'styled-components';
-import { css } from 'styled-components';
-import { Rotation } from '../../Types/Player';
+import { twc } from 'react-twc';
+import { usePlayers } from '../../Hooks/usePlayers';
 import {
   CommanderTax,
   Energy,
@@ -10,49 +7,23 @@ import {
   PartnerTax,
   Poison,
 } from '../../Icons/generated';
-import { usePlayers } from '../../Hooks/usePlayers';
+import { CounterType, Player, Rotation } from '../../Types/Player';
+import { RotationDivProps } from '../Buttons/CommanderDamage';
+import ExtraCounter from '../Buttons/ExtraCounter';
 
-const Container = styled.div<{ $rotation: Rotation }>`
-  width: 100%;
-  height: 20vmin;
-  display: flex;
+const Container = twc.div<RotationDivProps>((props) => [
+  'flex',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'h-full w-[8vmax]'
+    : 'h-[20vmin] w-full',
+]);
 
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        height: 100%;
-        width: 9.3vmax;
-      `;
-    }
-  }}
-`;
-
-export const ExtraCountersGrid = styled.div<{ $rotation: Rotation }>`
-  display: flex;
-  position: absolute;
-  width: 100%;
-  flex-direction: row;
-  flex-grow: 1;
-  bottom: 0;
-  pointer-events: none;
-
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        flex-direction: column-reverse;
-        height: 100%;
-        width: auto;
-        bottom: auto;
-      `;
-    }
-  }}
-`;
+export const ExtraCountersGrid = twc.div<RotationDivProps>((props) => [
+  'flex absolute flex-row flex-grow pointer-events-none',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'flex-col-reverse h-full w-auto bottom-auto'
+    : 'w-full bottom-0',
+]);
 
 type ExtraCountersBarProps = {
   player: Player;

src/Components/LifeCounter/Health.tsx

@@ -1,115 +1,43 @@
 import { useEffect, useRef, useState } from 'react';
-import styled, { css, keyframes } from 'styled-components';
+import { twc } from 'react-twc';
 import { Player, Rotation } from '../../Types/Player';
+import {
+  RotationDivProps,
+  RotationSpanProps,
+} from '../Buttons/CommanderDamage';
 import LifeCounterButton from '../Buttons/LifeCounterButton';
 import { OutlinedText } from '../Misc/OutlinedText';
 
-const LifeCountainer = styled.div<{
-  $rotation: Rotation;
-}>`
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  width: 100%;
-  height: 100%;
-  justify-content: space-between;
-  align-items: center;
+const LifeCountainer = twc.div<RotationDivProps>((props) => [
+  'flex flex-grow relative w-full h-full justify-between items-center',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'flex-col-reverse'
+    : 'flex-row',
+]);
 
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        flex-direction: column-reverse;
-      `;
-    }
-  }}
+const LifeCounterTextContainer = twc.div<RotationDivProps>((props) => [
+  'absolute m-0 p-0 pointer-events-none select-none webkit-user-select-none',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'w-full h-2/3'
+    : 'w-2/3 h-full',
+]);
+
+const TextWrapper = twc.div`
+  flex
+  absolute
+  justify-center
+  items-center
+  w-full
+  h-full
+  z-[-1]
 `;
 
-const LifeCounterTextContainer = styled.div<{
-  $rotation: Rotation;
-}>`
-  position: absolute;
-  width: 60%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  pointer-events: none;
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: transparent;
-  user-select: none;
-  -moz-user-select: -moz-none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        width: 100%;
-        height: 60%;
-      `;
-    }
-  }}
-`;
-
-const TextWrapper = styled.div`
-  display: flex;
-  position: absolute;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-`;
-
-const fadeOut = keyframes`
-  0% {
-    opacity: 1;
-  }
-  33% {
-    opacity: 0.6;
-  }
-  100% {
-    opacity: 0;
-  }
-`;
-
-export const RecentDifference = styled.span<{ $rotation: Rotation }>`
-  position: absolute;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  min-width: 15vmin;
-  text-shadow: none;
-  text-align: center;
-
-  background-color: rgba(255, 255, 255, 0.6);
-  font-variant-numeric: tabular-nums;
-  border-radius: 10vmin;
-  padding: 5px 10px;
-  font-size: 8vmin;
-  color: #333333;
-  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;
-      `;
-    }
-  }}
-`;
+const RecentDifference = twc.div<RotationSpanProps>((props) => [
+  'absolute min-w-[20vmin] drop-shadow-none text-center bg-interface-recentDifference-background tabular-nums rounded-full p-[6px 12px] text-[8vmin] text-interface-recentDifference-text animate-fadeOut',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'top-1/3 translate-x-1/4 translate-y-1/2 rotate-[270deg]'
+    : 'top-1/4 left-[50%] -translate-x-1/2',
+]);
 
 type HealthProps = {
   player: Player;

src/index.css

@@ -20,3 +20,17 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@layer utilities {
+  .pointer-events-all {
+    pointer-events: all;
+  }
+
+  .webkit-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;
+  }
+}

tailwind.config.ts

@@ -59,8 +59,49 @@ export default {
           white: '#F9FFE3',
           black: '#000000',
         },
+        lifeCounter: {
+          text: 'rgba(0, 0, 0, 0.4)',
+          lostWrapper: '#00000070',
+        },
+        interface: {
+          loseButton: {
+            background: '#43434380',
+          },
+          recentDifference: {
+            background: 'rgba(255, 255, 255, 0.6);',
+            text: '#333333',
+          },
+        },
+      },
+      keyframes: {
+        fadeOut: {
+          '0%': {
+            opacity: '1',
+          },
+          '33%': {
+            opacity: '0.6',
+          },
+          '100%': {
+            opacity: '0',
+          },
+        },
+      },
+      animation: {
+        fadeOut: 'fadeOut 3s 1s ease-out forwards',
       },
     },
   },
   plugins: [tailwindcssGridAreas],
 } satisfies Config;
+
+// const fadeOut = keyframes`
+//   0% {
+//     opacity: 1;
+//   }
+//   33% {
+//     opacity: 0.6;
+//   }
+//   100% {
+//     opacity: 0;
+//   }
+// `;