fix some tailwind

2024-01-06 19:45:25 +01:00
parent 2b0d8102d8
commit db85fc2102
7 changed files with 66 additions and 74 deletions
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-screen-wake-lock": "^3.0.2",
+    "react-twc": "^1.3.0",
    "styled-components": "^6.0.7",
    "zod": "^3.22.4"
  },
--- a/src/Components/LifeTrinket.tsx
+++ b/src/Components/LifeTrinket.tsx
@@ -1,47 +1,37 @@
-import styled from 'styled-components';
+import { twc } from 'react-twc';
 import { useGlobalSettings } from '../Hooks/useGlobalSettings';
-import StartMenu from './Views/StartMenu/StartMenu';
 import { Play } from './Views/Play';
+import StartMenu from './Views/StartMenu/StartMenu';

-const StartWrapper = styled.div`
-  max-width: fit-content;
-  max-height: fit-content;
-`;
+const StartWrapper = twc.div`max-w-fit max-h-fit`;

-const PlayWrapper = styled.div`
-  position: relative;
-  z-index: 0;
-  max-width: fit-content;
-  max-height: fit-content;
-  @media (orientation: portrait) {
-    rotate: 90deg;
-  }
-`;
+const PlayWrapper = twc.div`relative z-0 max-w-fit max-h-fit portrait:rotate-90`;

-const EmergencyResetButton = styled.button`
-  width: 100vmax;
-  height: 100vmin;
-  font-size: 4vmax;
-  position: absolute;
-  top: 0;
-  z-index: -1;
-  background-color: #4e6815;
-`;
+const EmergencyResetButton = () => {
+  const { goToStart } = useGlobalSettings();
+
+  const EmergencyResetButton = twc.button`w-[100vmax] h-[100vmin] absolute top-0 z-[-1] bg-background-default`;
+  const Paragraph = twc.p`text-[4vmax] text-text-secondary`;
+
+  return (
+    <EmergencyResetButton onClick={goToStart}>
+      <Paragraph>If you can see this, something is wrong.</Paragraph>
+      <Paragraph>Press screen to go to start.</Paragraph>
+      <br />
+      <Paragraph>If the issue persists, please inform me.</Paragraph>
+    </EmergencyResetButton>
+  );
+};

 export const LifeTrinket = () => {
-  const { showPlay, goToStart, initialGameSettings } = useGlobalSettings();
+  const { showPlay, initialGameSettings } = useGlobalSettings();

  return (
    <>
      {showPlay && initialGameSettings ? (
        <PlayWrapper>
          <Play />
-          <EmergencyResetButton onClick={goToStart}>
-            <p>If you can see this, something is wrong.</p>
-            <p>Press screen to go to start.</p>
-            <br />
-            <p>If the issue persists, please inform me.</p>
-          </EmergencyResetButton>
+          <EmergencyResetButton />
        </PlayWrapper>
      ) : (
        <StartWrapper>
--- a/src/Components/Player/Player.tsx
+++ b/src/Components/Player/Player.tsx
@@ -1,5 +1,6 @@
 import LifeCounter from '../LifeCounter/LifeCounter';
 import { Player as PlayerType } from '../../Types/Player';
+import { twc } from 'react-twc';

 const getGridArea = (player: PlayerType) => {
  switch (player.index) {
@@ -20,9 +21,11 @@ const getGridArea = (player: PlayerType) => {
  }
 };

+const PlayerWrapper = twc.div`w-full h-full bg-black`;
+
 export const Player = (players: PlayerType[], gridClasses: string) => {
  return (
-    <div className="w-full h-full bg-black">
+    <PlayerWrapper>
      <div className={`grid w-full h-full gap-1 box-border ${gridClasses} `}>
        {players.map((player) => {
          const gridArea = getGridArea(player);
@@ -42,6 +45,6 @@ export const Player = (players: PlayerType[], gridClasses: string) => {
          );
        })}
      </div>
-    </div>
+    </PlayerWrapper>
  );
 };
--- a/src/Components/Views/Play.tsx
+++ b/src/Components/Views/Play.tsx
@@ -1,16 +1,10 @@
-import styled from 'styled-components';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
 import { Orientation } from '../../Types/Settings';
 import { Player } from '../Player/Player';
+import { twc } from 'react-twc';

-const MainWrapper = styled.div`
-  width: 100vmax;
-  height: 100vmin;
-  width: 100dvmax;
-  height: 100dvmin;
-  overflow: hidden;
-`;
+const MainWrapper = twc.div`w-[100vmax] h-[100vmin] w-[100dvmax] h-[100dvmin] overflow-hidden`;

 export const Play = () => {
  const { players } = usePlayers();
--- a/src/Components/Views/StartMenu/LayoutOptions.tsx
+++ b/src/Components/Views/StartMenu/LayoutOptions.tsx
@@ -1,6 +1,5 @@
 import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
 import React from 'react';
-import styled from 'styled-components';
 import { theme } from '../../../Data/theme';
 import {
  FivePlayers,
@@ -15,14 +14,11 @@ import {
  TwoPlayersSameSide,
 } from '../../../Icons/generated/Layouts';

+import { twc } from 'react-twc';
 import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape';
 import { Orientation } from '../../../Types/Settings';

-const LayoutWrapper = styled.div`
-  flex-direction: row;
-  display: flex;
-  justify-content: space-evenly;
-`;
+const LayoutWrapper = twc.div`flex flex-row justify-between self-center`;

 type LayoutOptionsProps = {
  numberOfPlayers: number;
--- a/src/Components/Views/StartMenu/StartMenu.tsx
+++ b/src/Components/Views/StartMenu/StartMenu.tsx
@@ -1,7 +1,6 @@
 import { Button, FormControl, FormLabel, Switch } from '@mui/material';
 import Slider from '@mui/material/Slider';
 import { useEffect, useState } from 'react';
-import styled from 'styled-components';
 import { createInitialPlayers } from '../../../Data/getInitialPlayers';
 import { theme } from '../../../Data/theme';
 import { useAnalytics } from '../../../Hooks/useAnalytics';
@@ -18,36 +17,15 @@ import { SettingsModal } from '../../Misc/SettingsModal';
 import { Spacer } from '../../Misc/Spacer';
 import { SupportMe } from '../../Misc/SupportMe';
 import { LayoutOptions } from './LayoutOptions';
+import { twc } from 'react-twc';

-const MainWrapper = styled.div`
-  width: 100dvw;
-  height: fit-content;
-  padding-bottom: 58px;
-  overflow: hidden;
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-`;
+const MainWrapper = twc.div`w-[100dvw] h-fit pb-14 overflow-hidden items-center flex flex-col`;

-const StartButtonFooter = styled.div`
-  position: fixed;
-  bottom: 1rem;
-  translate: -50%, -50%;
-  z-index: 1;
-`;
+const StartButtonFooter = twc.div`fixed bottom-4 -translate-y-1/2 z-1`;

-const ToggleButtonsWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-`;
+const ToggleButtonsWrapper = twc.div`flex flex-row justify-between items-center`;

-const ToggleContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
+const ToggleContainer = twc.div`flex flex-col items-center`;

 const playerMarks = [
  {
--- a/yarn.lock
+++ b/yarn.lock
@@ -182,6 +182,13 @@
  dependencies:
    regenerator-runtime "^0.14.0"

+"@babel/runtime@^7.13.10":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.7.tgz#dd7c88deeb218a0f8bd34d5db1aa242e0f203193"
+  integrity sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15":
  version "7.22.15"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -1257,6 +1264,21 @@
  resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
  integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==

+"@radix-ui/react-compose-refs@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
+  integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-slot@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
+  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+
 "@savvywombat/tailwindcss-grid-areas@^3.1.0":
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/@savvywombat/tailwindcss-grid-areas/-/tailwindcss-grid-areas-3.1.0.tgz#4a54d9430cc6ee1198278c341799195f0f3757e1"
@@ -5755,6 +5777,14 @@ react-transition-group@^4.4.5:
    loose-envify "^1.4.0"
    prop-types "^15.6.2"

+react-twc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-twc/-/react-twc-1.3.0.tgz#ff44aca6dc75305c5bc1464889b723d40331c98e"
+  integrity sha512-HL7rEZYIQumsWl91eUwQAVVijVt+Ly+Trgo/Eg+6GUnLvUfRJMvNa05cae1OAPzfTYY+1AtBDh+1DXPfOC1SGA==
+  dependencies:
+    "@radix-ui/react-slot" "^1.0.2"
+    clsx "^2.0.0"
+
 react@^18.2.0:
  version "18.2.0"
  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"