From 1013914cdfc2c1c72e0d87e2043a33b6ecf8746d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= <thevikeo@gmail.com>
Date: Sun, 7 Jan 2024 00:15:37 +0100
Subject: [PATCH] commander damage tailwind

---
 src/Components/Buttons/CommanderDamage.tsx | 135 ++++++---------------
 yarn.lock                                  |  16 +--
 2 files changed, 43 insertions(+), 108 deletions(-)

diff --git a/src/Components/Buttons/CommanderDamage.tsx b/src/Components/Buttons/CommanderDamage.tsx
index 337dce1..2aff440 100644
--- a/src/Components/Buttons/CommanderDamage.tsx
+++ b/src/Components/Buttons/CommanderDamage.tsx
@@ -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 { OutlinedText } from '../Misc/OutlinedText';
 import { decrementTimeoutMs } from '../../Data/constants';
 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<{
-  $rotation: number;
-}>`
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  width: 100%;
+type RotationDivProps = TwcComponentProps<'div'> & {
+  $rotation?: number;
+};
 
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        flex-direction: column;
-      `;
-    }
-  }}
-`;
+type RotationButtonProps = TwcComponentProps<'button'> & {
+  $rotation?: number;
+};
 
-const CommanderDamageButton = styled.button<{
-  $backgroundColor?: string;
-  $rotation: number;
-}>`
-  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 CommanderDamageContainer = twc.div<RotationDivProps>((props) => [
+  'flex flex-row flex-grow w-full',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'flex-col'
+    : '',
+]);
 
-const CommanderDamageTextContainer = styled.div<{
-  $rotation: number;
-}>`
-  position: relative;
-  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;
+const CommanderDamageButton = twc.button<RotationButtonProps>((props) => [
+  '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
+    ? 'w-[6vmax] h-auto'
+    : '',
+]);
 
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        rotate: 270deg;
-      `;
-    }
-  }}
-`;
+const CommanderDamageTextContainer = twc.div<RotationDivProps>((props) => [
+  'relative top-1/2 left-1/2 tabular-nums pointer-events-none select-none',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'rotate-[270deg]'
+    : '',
+]);
 
-const PartnerDamageSeperator = styled.div<{
-  $rotation: number;
-}>`
-  width: 1px;
-  background-color: rgba(0, 0, 0, 1);
-
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        width: auto;
-        height: 1px;
-      `;
-    }
-  }}
-`;
+const PartnerDamageSeperator = twc.div<RotationDivProps>((props) => [
+  'w-px bg-black',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'w-[5.999vmax] h-px'
+    : '',
+]);
 
 type CommanderDamageButtonComponentProps = {
   player: Player;
@@ -214,8 +149,8 @@ export const CommanderDamage = ({
         onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
           e.preventDefault();
         }}
-        $backgroundColor={opponent.color}
         aria-label={`Commander damage. Player ${player.index}, opponent ${opponent.index}`}
+        style={{ background: opponent.color }}
       >
         <CommanderDamageTextContainer $rotation={player.settings.rotation}>
           <OutlinedText
@@ -248,8 +183,8 @@ export const CommanderDamage = ({
             ) => {
               e.preventDefault();
             }}
-            $backgroundColor={opponent.color}
             aria-label={`Partner Commander damage. Player ${player.index}, opponent ${opponent.index}`}
+            style={{ background: opponent.color }}
           >
             <CommanderDamageTextContainer $rotation={player.settings.rotation}>
               <OutlinedText
diff --git a/yarn.lock b/yarn.lock
index 6d77df1..15e5239 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6311,9 +6311,9 @@ strip-json-comments@~2.0.1:
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
 styled-components@^6.0.7:
-  version "6.1.3"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.3.tgz#d3ffea630800f4486e79f6264826dad9426474e3"
-  integrity sha512-kLerFjTAABuEZ870O4q4dyT/VCOJC/HA08+VeIGhkiOKkwJLP17HAWHCiqZWnUMV19m3axlOKR/+/EbCbuJAZg==
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.6.tgz#c75c4f994136545b3bcc11608db5363710b78c0e"
+  integrity sha512-DgTLULSC29xpabJ24bbn1+hulU6vvGFQf4RPwBOJrm8WJFnN42yXpo5voBt3jDSJBa5tBd1L6PqswJjQ0wRKdg==
   dependencies:
     "@emotion/is-prop-valid" "1.2.1"
     "@emotion/unitless" "0.8.0"
@@ -6322,7 +6322,7 @@ styled-components@^6.0.7:
     csstype "3.1.2"
     postcss "8.4.31"
     shallowequal "1.1.0"
-    stylis "4.3.0"
+    stylis "4.3.1"
     tslib "2.5.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"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-stylis@4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
-  integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
+stylis@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.1.tgz#ed8a9ebf9f76fe1e12d462f5cc3c4c980b23a7eb"
+  integrity sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==
 
 sucrase@^3.32.0:
   version "3.35.0"