bump

remove log
test
2024-01-13 20:32:10 +01:00 · 2024-01-13 20:32:00 +01:00 · 2024-01-13 20:26:07 +01:00 · 2024-01-13 20:20:50 +01:00 · 2024-01-13 20:20:20 +01:00 · 2024-01-13 20:18:50 +01:00
39 changed files with 8143 additions and 1400 deletions
--- a/.github/workflows/firebase-hosting-mege.yml
+++ b/.github/workflows/firebase-hosting-mege.yml
@@ -1,20 +0,0 @@
-# This file was auto-generated by the Firebase CLI
-# https://github.com/firebase/firebase-tools
-name: Deploy to Firebase Hosting on merge
-'on':
-  push:
-    branches:
-      - main
-jobs:
-  build_and_deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: oven-sh/setup-bun@v1
-      - run: bun install && bun run build && bun run lint
-      - uses: FirebaseExtended/action-hosting-deploy@v0
-        with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_LIFE_TRINKET }}'
-          channelId: live
-          projectId: life-trinket
--- a/.github/workflows/firebase-release.yml
+++ b/.github/workflows/firebase-release.yml
@@ -0,0 +1,58 @@
+name: Deploy to Firebase Hosting
+'on':
+  push:
+    tags:
+      - '*'
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    env:
+      REPO_READ_ACCESS_TOKEN: ${{ secrets.REPO_READ_ACCESS_TOKEN }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v1
+
+      - name: Build, lint, and deploy
+        run: |
+          bun install
+          bun run build
+          bun run lint
+      - name: Deploy to Firebase Hosting
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_LIFE_TRINKET }}'
+          channelId: live
+          projectId: life-trinket
+
+  release:
+    needs: build_and_deploy
+    runs-on: ubuntu-latest
+    env:
+      working-directory: ${{ github.workspace }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: get version
+        id: version
+        uses: notiz-dev/github-action-json-property@v0.2.0
+
+        with:
+          path: 'package.json'
+          prop_path: 'version'
+
+      - name: Create Release Note
+        id: create_release_note
+        run: echo "Release Note for version ${{ steps.version.outputs.prop }}" > release_note.txt
+
+      - name: Create Release
+        uses: ncipollo/release-action@v1.13.0
+        with:
+          bodyFile: release_note.txt
+          commit: ${{ github.sha }}
+          tag: '${{ steps.version.outputs.prop }}'
+          token: ${{ secrets.RELEASE_TOKEN }}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,12 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.5.0] - 2024-01-13
+
+### Changed
+
+- Styling with Tailwind CSS instead of styled-components
--- a/env.d.ts
+++ b/env.d.ts
@@ -0,0 +1 @@
+declare const APP_VERSION: string;
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "life-trinket",
  "private": true,
-  "version": "0.4.0",
+  "version": "0.5.45",
  "type": "commonjs",
  "engines": {
    "node": ">=18",
@@ -22,22 +22,28 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-screen-wake-lock": "^3.0.2",
-    "styled-components": "^6.0.7"
+    "react-twc": "^1.3.0",
+    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
+    "@savvywombat/tailwindcss-grid-areas": "^3.1.0",
    "@svgr/cli": "^8.1.0",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.16",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "firebase-tools": "^12.5.2",
+    "install": "^0.13.0",
+    "postcss": "^8.4.32",
    "prettier": "2.8.8",
+    "tailwindcss": "^3.4.0",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,12 @@
-import { createGlobalStyle } from 'styled-components';
 import { ThemeProvider } from '@mui/material';
 import { LifeTrinket } from './Components/LifeTrinket';
 import { theme } from './Data/theme';
 import { GlobalSettingsProvider } from './Providers/GlobalSettingsProvider';
 import { PlayersProvider } from './Providers/PlayersProvider';

-const GlobalStyles = createGlobalStyle`
-  html,
-  body {
-    background-color: ${theme.palette.background.default};
-  }
-  #root {
-    touch-action: manipulation;
-  }
-`;
-
 const App = () => {
  return (
    <ThemeProvider theme={theme}>
-      <GlobalStyles />
      <PlayersProvider>
        <GlobalSettingsProvider>
          <LifeTrinket />
--- a/src/Components/Buttons/CommanderDamage.tsx
+++ b/src/Components/Buttons/CommanderDamage.tsx
@@ -1,110 +1,49 @@
-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 { TwcComponentProps, twc } from 'react-twc';
 import { decrementTimeoutMs } from '../../Data/constants';
 import { usePlayers } from '../../Hooks/usePlayers';
+import { Player, Rotation } from '../../Types/Player';
+import { OutlinedText } from '../Misc/OutlinedText';

-const CommanderDamageContainer = styled.div<{
-  $rotation: number;
-}>`
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  width: 100%;
+export type RotationDivProps = TwcComponentProps<'div'> & {
+  $rotation?: number;
+};

-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        flex-direction: column;
-      `;
-    }
-  }}
-`;
+export type RotationSpanProps = TwcComponentProps<'span'> & {
+  $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;
-      `;
-    }
-  }}
-`;
+export type RotationButtonProps = TwcComponentProps<'button'> & {
+  $rotation?: number;
+};

-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 CommanderDamageContainer = twc.div<RotationDivProps>((props) => [
+  'flex flex-grow',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'flex-col'
+    : 'flex-row',
+]);

-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        rotate: 270deg;
-      `;
-    }
-  }}
-`;
+const CommanderDamageButton = twc.button<RotationButtonProps>((props) => [
+  '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 PartnerDamageSeperator = styled.div<{
-  $rotation: number;
-}>`
-  width: 1px;
-  background-color: rgba(0, 0, 0, 1);
+const CommanderDamageTextContainer = twc.div<RotationDivProps>((props) => [
+  '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]'
+    : '',
+]);

-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        width: auto;
-        height: 1px;
-      `;
-    }
-  }}
-`;
+const PartnerDamageSeperator = twc.div<RotationDivProps>((props) => [
+  'bg-black',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'w-full h-px'
+    : 'w-px',
+]);

 type CommanderDamageButtonComponentProps = {
  player: Player;
@@ -214,8 +153,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 +187,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
--- a/src/Components/Buttons/ExtraCounter.tsx
+++ b/src/Components/Buttons/ExtraCounter.tsx
@@ -1,57 +1,45 @@
 import { ReactNode, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { css } from 'styled-components';
+import { twc } from 'react-twc';
 import { decrementTimeoutMs } from '../../Data/constants';
 import { CounterType, Rotation } from '../../Types/Player';
 import { OutlinedText } from '../Misc/OutlinedText';
+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`
-  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 ExtraCounterButton = 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 IconContainer = styled.div<{
-  $rotation: number;
-}>`
-  width: auto;
+const IconContainer = twc.div<RotationDivProps>((props) => [
+  'w-auto',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'rotate-[-90deg]'
+    : '',
+]);

-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        rotate: -90deg;
-      `;
-    }
-  }}
-`;
-
-const TextContainer = styled.div`
-  position: absolute;
-  translate: -50%;
-  top: 50%;
-  left: 50%;
-`;
+const TextContainer = twc.div`
+  absolute
+  top-1/2
+  left-1/2
+  `;

 type ExtraCounterProps = {
  Icon: ReactNode;
@@ -115,7 +103,7 @@ const ExtraCounter = ({

  return (
    <ExtraCounterContainer>
-      <StyledExtraCounterButton
+      <ExtraCounterButton
        onPointerDown={handleDownInput}
        onPointerUp={handleUpInput}
        onPointerLeave={handleLeaveInput}
@@ -136,7 +124,7 @@ const ExtraCounter = ({
            </OutlinedText>
          </TextContainer>
        </IconContainer>
-      </StyledExtraCounterButton>
+      </ExtraCounterButton>
    </ExtraCounterContainer>
  );
 };
--- a/src/Components/Buttons/LifeCounterButton.tsx
+++ b/src/Components/Buttons/LifeCounterButton.tsx
@@ -1,64 +1,42 @@
 import { useRef, useState } from 'react';
-import styled from 'styled-components';
-import { css } from 'styled-components';
+import { TwcComponentProps, twc } from 'react-twc';
 import { lifeLongPressMultiplier } from '../../Data/constants';
-
 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;
-        `;
-      }
-      return css`
-        rotate: -90deg;
-        top: 25%;
-      `;
-    }
+const LifeCounterButtonTwc = 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
+  `;

-    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;
@@ -113,7 +91,7 @@ const LifeCounterButton = ({
      : '12vmin';

  return (
-    <StyledLifeCounterButton
+    <LifeCounterButtonTwc
      onPointerDown={handleDownInput}
      onPointerUp={handleUpInput}
      onPointerLeave={handleLeaveInput}
@@ -129,7 +107,7 @@ const LifeCounterButton = ({
      >
        {operation === 'add' ? '\u002B' : '\u2212'}
      </TextContainer>
-    </StyledLifeCounterButton>
+    </LifeCounterButtonTwc>
  );
 };

--- a/src/Components/Buttons/LoseButton.tsx
+++ b/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%]`
+    : props.$rotation === Rotation.Side
+    ? `right-auto top-[15%] left-[27%]`
+    : 'right-[15%] top-1/4',
+]);

 type LoseButtonProps = {
  onClick: () => void;
@@ -45,8 +19,20 @@ type LoseButtonProps = {
 };

 export const LoseGameButton = ({ rotation, onClick }: LoseButtonProps) => {
+  const calcRotation =
+    rotation === Rotation.SideFlipped
+      ? rotation
+      : rotation === Rotation.Side
+      ? rotation - 180
+      : rotation;
+
  return (
-    <LoseButton $rotation={rotation} onClick={onClick} aria-label={`Lose Game`}>
+    <LoseButton
+      $rotation={rotation}
+      onClick={onClick}
+      aria-label={`Lose Game`}
+      style={{ rotate: `${calcRotation}deg` }}
+    >
      <Skull size="5vmin" color="black" opacity={0.5} />
    </LoseButton>
  );
--- a/src/Components/Buttons/SettingsButton.tsx
+++ b/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 SettingsButtonTwc = 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;
@@ -40,13 +17,13 @@ type SettingsButtonProps = {

 const SettingsButton = ({ onClick, rotation }: SettingsButtonProps) => {
  return (
-    <StyledSettingsButton
+    <SettingsButtonTwc
      onClick={onClick}
      $rotation={rotation}
      aria-label={`Settings`}
    >
      <Cog size="5vmin" color="black" opacity="0.3" />
-    </StyledSettingsButton>
+    </SettingsButtonTwc>
  );
 };

--- a/src/Components/Counters/CommanderDamageBar.tsx
+++ b/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[];
--- a/src/Components/Counters/Counters.tsx
+++ b/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;
--- a/src/Components/Counters/ExtraCountersBar.tsx
+++ b/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,50 +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;
-        right: -6px;
-      `;
-    }
-  }}
-`;
+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;
--- a/src/Components/LifeCounter/Health.tsx
+++ b/src/Components/LifeCounter/Health.tsx
@@ -1,101 +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`
-  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;
-`;
+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;
@@ -166,9 +108,9 @@ const Health = ({

    const minRatio = Math.min(widthRatio, heightRatio);

-    const heightIsLarger = heightRatio > widthRatio;
+    const heightIs40PercentSmaller = heightRatio > widthRatio * 0.6;

-    const scaleFactor = heightIsLarger ? 0.8 : 1;
+    const scaleFactor = heightIs40PercentSmaller ? 0.8 : 1;

    return minRatio * scaleFactor * 1;
  };
@@ -195,7 +137,10 @@ const Health = ({
            {player.lifeTotal}
          </OutlinedText>
          {recentDifference !== 0 && (
-            <RecentDifference key={differenceKey}>
+            <RecentDifference
+              key={differenceKey}
+              $rotation={player.settings.rotation}
+            >
              {recentDifference > 0 ? '+' : ''}
              {recentDifference}
            </RecentDifference>
--- a/src/Components/LifeCounter/LifeCounter.tsx
+++ b/src/Components/LifeCounter/LifeCounter.tsx
@@ -1,137 +1,36 @@
 import { useEffect, useState } from 'react';
-import styled, { css, keyframes } from 'styled-components';
-import { theme } from '../../Data/theme';
+import { twc } from 'react-twc';
+import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
+import { usePlayers } from '../../Hooks/usePlayers';
 import { Player, Rotation } from '../../Types/Player';
+import { RotationDivProps } from '../Buttons/CommanderDamage';
 import { LoseGameButton } from '../Buttons/LoseButton';
 import SettingsButton from '../Buttons/SettingsButton';
 import CommanderDamageBar from '../Counters/CommanderDamageBar';
 import ExtraCountersBar from '../Counters/ExtraCountersBar';
-import PlayerMenu from '../PlayerMenu/PlayerMenu';
+import PlayerMenu from '../Player/PlayerMenu';
 import Health from './Health';
-import { usePlayers } from '../../Hooks/usePlayers';
-import { useGlobalSettings } from '../../Hooks/useGlobalSettings';

-const LifeCounterContentWrapper = styled.div<{
-  $backgroundColor: string;
-}>`
-  position: relative;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  background-color: ${(props) => props.$backgroundColor || 'antiquewhite'};
-  @media (orientation: landscape) {
-    max-width: 100vmax;
-    max-height: 100vmin;
-  }
+const LifeCounterContentWrapper = twc.div`
+  relative flex flex-grow flex-col items-center w-full h-full overflow-hidden`;

-  overflow: hidden;
-`;
+const LifeCounterWrapper = twc.div<RotationDivProps>((props) => [
+  'relative flex items-center w-full h-full z-[1]',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? `flex-row`
+    : `flex-col`,
+]);

-const LifeCounterWrapper = styled.div<{
-  $rotation: Rotation;
-}>`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  height: 100%;
+const StartingPlayerNoticeWrapper = twc.div`z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-primary-main`;

-  z-index: 1;
+const PlayerLostWrapper = twc.div<RotationDivProps>((props) => [
+  'z-[1] flex absolute w-full h-full justify-center items-center pointer-events-none select-none webkit-user-select-none bg-lifeCounter-lostWrapper',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? `rotate-[${props.$rotation - 90}deg]`
+    : '',
+]);

-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        flex-direction: row;
-        rotate: ${props.$rotation - 90}deg;
-      `;
-    }
-
-    return css`
-      flex-direction: column;
-      rotate: ${props.$rotation}deg;
-    `;
-  }}
-`;
-
-const PlayerNoticeWrapper = styled.div<{
-  $rotation: Rotation;
-  $backgroundColor: string;
-}>`
-  z-index: 1;
-  display: flex;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  background: ${(props) => props.$backgroundColor};
-  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`
-        rotate: ${props.$rotation - 90}deg;
-      `;
-    }
-  }}
-`;
-
-const DynamicText = styled.div<{ $rotation: Rotation }>`
-  font-size: 8vmin;
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-      `;
-    }
-  }}
-`;
-
-const fadeOut = keyframes`
-  0% {
-    opacity: 1;
-  }
-  33% {
-    opacity: 0.6;
-  }
-  100% {
-    opacity: 0;
-  }
-`;
-
-export const RecentDifference = styled.span`
-  position: absolute;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-shadow: none;
-  background-color: rgba(255, 255, 255, 0.6);
-  font-variant-numeric: tabular-nums;
-  border-radius: 50%;
-  padding: 5px 10px;
-  font-size: 8vmin;
-  color: #333333;
-  animation: ${fadeOut} 3s 1s ease-out forwards;
-`;
+const DynamicText = twc.div`text-[8vmin]`;

 const hasCommanderDamageReached21 = (player: Player) => {
  const commanderDamageTotals = player.commanderDamage.map(
@@ -208,27 +107,38 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
    updatePlayer(updatedPlayer);
  };

+  const calcRotation =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side
+      ? player.settings.rotation - 90
+      : player.settings.rotation;
+
+  const calcTextRotation =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side
+      ? player.settings.rotation - 180
+      : player.settings.rotation;
+
  return (
-    <LifeCounterContentWrapper $backgroundColor={player.color}>
-      <LifeCounterWrapper $rotation={player.settings.rotation}>
+    <LifeCounterContentWrapper style={{ background: player.color }}>
+      <LifeCounterWrapper
+        $rotation={player.settings.rotation}
+        style={{ rotate: `${calcRotation}deg` }}
+      >
        {settings.showStartingPlayer &&
          player.isStartingPlayer &&
          player.showStartingPlayer && (
-            <PlayerNoticeWrapper
-              $rotation={player.settings.rotation}
-              $backgroundColor={theme.palette.primary.main}
+            <StartingPlayerNoticeWrapper
+              style={{ rotate: `${calcRotation}deg` }}
            >
-              <DynamicText $rotation={player.settings.rotation}>
+              <DynamicText style={{ rotate: `${calcTextRotation}deg` }}>
                You start!
              </DynamicText>
-            </PlayerNoticeWrapper>
+            </StartingPlayerNoticeWrapper>
          )}

        {player.hasLost && (
-          <PlayerNoticeWrapper
-            $rotation={player.settings.rotation}
-            $backgroundColor={'#00000070'}
-          />
+          <PlayerLostWrapper $rotation={player.settings.rotation} />
        )}
        <CommanderDamageBar
          opponents={opponents}
@@ -256,11 +166,10 @@ const LifeCounter = ({ player, opponents }: LifeCounterProps) => {
          handleLifeChange={handleLifeChange}
        />
        <ExtraCountersBar player={player} />
+        {showPlayerMenu && (
+          <PlayerMenu player={player} setShowPlayerMenu={setShowPlayerMenu} />
+        )}
      </LifeCounterWrapper>
-
-      {showPlayerMenu && (
-        <PlayerMenu player={player} setShowPlayerMenu={setShowPlayerMenu} />
-      )}
    </LifeCounterContentWrapper>
  );
 };
--- a/src/Components/LifeTrinket.tsx
+++ b/src/Components/LifeTrinket.tsx
@@ -1,47 +1,37 @@
-import styled from 'styled-components';
-import Play from './Views/Play';
-import StartMenu from './Views/StartMenu/StartMenu';
+import { twc } from 'react-twc';
 import { useGlobalSettings } from '../Hooks/useGlobalSettings';
+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-[100dvmax] h-[100dvmin] 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 gridAreas={initialGameSettings?.gridAreas} />
-          <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>
+          <Play />
+          <EmergencyResetButton />
        </PlayWrapper>
      ) : (
        <StartWrapper>
--- a/src/Components/Misc/InfoModal.tsx
+++ b/src/Components/Misc/InfoModal.tsx
@@ -1,21 +1,8 @@
 import { Modal } from '@mui/material';
 import { theme } from '../../Data/theme';
-import styled from 'styled-components';
+import { twc } from 'react-twc';

-export const ModalWrapper = styled.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 80vw;
-  height: 85vh;
-  background-color: ${theme.palette.background.default};
-  padding: 1rem;
-  overflow: scroll;
-  border-radius: 1rem;
-  color: ${theme.palette.text.primary};
-  border: none;
-`;
+export const ModalWrapper = twc.div`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[85vh] bg-background-default p-4 overflow-scroll rounded-2xl border-none text-text-primary`;

 type InfoModalProps = {
  isOpen: boolean;
--- a/src/Components/Misc/OutlinedText.tsx
+++ b/src/Components/Misc/OutlinedText.tsx
@@ -1,58 +1,30 @@
-import styled, { css } from 'styled-components';
-import { theme } from '../../Data/theme';
 import { Rotation } from '../../Types/Player';

-const Container = styled.div`
-  display: flex;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-`;
+import { twc } from 'react-twc';
+//TODO Create provider for this
+import tailwindConfig from './../../../tailwind.config';
+import resolveConfig from 'tailwindcss/resolveConfig';

-const CenteredText = styled.div<{
-  strokeWidth?: string;
-  strokeColor?: string;
-  fillColor?: string;
-  fontSize?: string;
-  fontWeight?: string;
-  $rotation?: Rotation;
-}>`
-  position: absolute;
-  font-weight: ${(props) => props.fontWeight || ''};
-  font-variant-numeric: tabular-nums;
-  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 fullConfig = resolveConfig(tailwindConfig);

-  color: ${(props) => props.fillColor || theme.palette.common.black};
-  font-size: ${(props) => props.fontSize || '6vmin'};
-  -webkit-text-stroke: ${(props) => props.strokeWidth || '1vmin'}${(props) => props.strokeColor || theme.palette.common.white};
-  -webkit-text-fill-color: ${(props) =>
-    props.fillColor || theme.palette.common.black};
+const Container = twc.div`
+  flex
+  relative
+  w-full
+  h-full
+  items-center
+  justify-center
+  `;

-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        rotate: 270deg;
-      `;
-    }
-  }}
-`;
+const CenteredText = twc.div`absolute select-none text-common-black text-[6vmin] stroke-common-white
+webkit-user-select-none tabular-nums`;

-const CenteredTextOutline = styled.span`
-  position: absolute;
-  left: 0;
-  -webkit-text-stroke: 0;
-  pointer-events: none;
-`;
+const CenteredTextOutline = twc.span`
+  absolute
+  left-0
+  stroke-none
+  pointer-events-none
+  `;

 type OutlinedTextProps = {
  children?: React.ReactNode;
@@ -73,18 +45,33 @@ export const OutlinedText: React.FC<OutlinedTextProps> = ({
  fillColor,
  rotation,
 }) => {
+  const calcRotation =
+    rotation === Rotation.Side
+      ? rotation - 180
+      : rotation === Rotation.SideFlipped
+      ? rotation
+      : 0;
+
  return (
    <Container>
      <CenteredText
-        fontSize={fontSize}
-        fontWeight={fontWeight}
-        strokeWidth={strokeWidth}
-        strokeColor={strokeColor}
-        fillColor={fillColor}
-        $rotation={rotation}
+        style={{
+          fontSize,
+          fontWeight,
+          strokeWidth: strokeWidth || '1vmin',
+          color: fillColor || fullConfig.theme.colors.common.black,
+          WebkitTextStroke: `${strokeWidth || '1vmin'} ${
+            strokeColor || fullConfig.theme.colors.common.white
+          }`,
+          WebkitTextFillColor:
+            fillColor || fullConfig.theme.colors.common.black,
+          rotate: `${calcRotation}deg`,
+        }}
      >
        {children}
-        <CenteredTextOutline aria-hidden>{children}</CenteredTextOutline>
+        <CenteredTextOutline aria-hidden style={{ WebkitTextStroke: 0 }}>
+          {children}
+        </CenteredTextOutline>
      </CenteredText>
    </Container>
  );
--- a/src/Components/Misc/Separator.tsx
+++ b/src/Components/Misc/Separator.tsx
@@ -1,13 +1,3 @@
-import styled from 'styled-components';
-import { Spacer } from './Spacer';
-
-const SeparatorContainer = styled.div<{ width?: string; height?: string }>`
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-  background-color: #00000025;
-  border-radius: 50px;
-`;
-
 export const Separator = ({
  width = '100%',
  height = '100%',
@@ -16,10 +6,9 @@ export const Separator = ({
  height?: string;
 }) => {
  return (
-    <>
-      <Spacer height="0.5rem" />
-      <SeparatorContainer width={width} height={height} />
-      <Spacer height="0.5rem" />
-    </>
+    <div
+      className={`bg-common-black bg-opacity-30 rounded-full mt-2 mb-2`}
+      style={{ width, height }}
+    />
  );
 };
--- a/src/Components/Misc/SettingsModal.tsx
+++ b/src/Components/Misc/SettingsModal.tsx
@@ -1,38 +1,18 @@
 import { Button, FormLabel, Modal, Switch } from '@mui/material';
-import { ModalWrapper } from './InfoModal';
-import styled from 'styled-components';
+import { twc } from 'react-twc';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
-import { theme } from '../../Data/theme';
+import { ModalWrapper } from './InfoModal';
 import { Separator } from './Separator';
 import { Paragraph } from './TextComponents';
+import { useEffect, useState } from 'react';

-const SettingContainer = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`;
+const SettingContainer = twc.div`w-full flex flex-col`;

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

-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-`;
+const Container = twc.div`flex flex-col items-center w-full`;

-const Description = styled.p`
-  margin-top: -0.25rem;
-  margin-right: 3.5rem;
-  font-size: 0.8rem;
-  text-align: left;
-  color: ${theme.palette.text.secondary};
-`;
+const Description = twc.p`mr-16 text-xs text-left text-text-secondary`;

 type SettingsModalProps = {
  isOpen: boolean;
@@ -41,6 +21,49 @@ type SettingsModalProps = {

 export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
  const { settings, setSettings, isPWA } = useGlobalSettings();
+  const [isLatestVersion, setIsLatestVersion] = useState(false);
+  const [newVersion, setNewVersion] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    async function checkIfLatestVersion() {
+      try {
+        const result = await fetch(
+          'https://api.github.com/repos/Vikeo/LifeTrinket/releases/latest',
+          {
+            headers: {
+              /* @ts-expect-error is defined in vite.config.ts*/
+              Authorization: `Bearer ${REPO_READ_ACCESS_TOKEN}`,
+              Accept: 'application/vnd.github+json',
+              'X-GitHub-Api-Version': '2022-11-28',
+            },
+          }
+        );
+        const data = await result.json();
+
+        if (!data.name) {
+          setNewVersion(undefined);
+          setIsLatestVersion(false);
+          return;
+        }
+
+        setNewVersion(data.name);
+
+        /* @ts-expect-error is defined in vite.config.ts*/
+        if (data.name === APP_VERSION) {
+          setIsLatestVersion(true);
+          return;
+        }
+
+        setIsLatestVersion(false);
+      } catch (error) {
+        console.error('error getting latest version string', error);
+      }
+    }
+    checkIfLatestVersion();
+  }, [isOpen]);

  return (
    <Modal open={isOpen} onClose={closeModal}>
@@ -100,7 +123,7 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
          </SettingContainer>
          {!isPWA && (
            <>
-              <Separator height="2px" />
+              <Separator height="1px" />
              <SettingContainer>
                <ToggleContainer>
                  <Paragraph>
@@ -110,20 +133,45 @@ export const SettingsModal = ({ isOpen, closeModal }: SettingsModalProps) => {
                    normal app!
                  </Paragraph>
                </ToggleContainer>
-                <Description>
+                <Description className="mt-1">
                  If you do, this app will work offline and the toolbar will be
                  automatically hidden.
                </Description>
              </SettingContainer>
            </>
          )}
-          <Separator height="2px" />
+          <Separator height="1px" />
          <SettingContainer>
-            <Paragraph>Version: 0.4.0</Paragraph>
+            <Paragraph>
+              {/* @ts-expect-error is defined in vite.config.ts*/}
+              Current version: {APP_VERSION}{' '}
+              {isLatestVersion && (
+                <span className="text-sm text-text-secondary">(latest)</span>
+              )}
+            </Paragraph>
+            {!isLatestVersion && newVersion && (
+              <Paragraph className="text-text-secondary text-lg text-center">
+                New version ({newVersion}) is available!{' '}
+              </Paragraph>
+            )}
          </SettingContainer>
-          <Separator height="2px" />
+          {!isLatestVersion && newVersion && (
+            <Button
+              variant="contained"
+              style={{ marginTop: '0.25rem', marginBottom: '0.25rem' }}
+              onClick={() => window?.location?.reload()}
+            >
+              <span>Update</span>
+              <span className="text-xs">&nbsp;(reload app)</span>
+            </Button>
+          )}
+          <Separator height="1px" />

-          <Button variant="contained" onClick={closeModal}>
+          <Button
+            variant="contained"
+            onClick={closeModal}
+            style={{ marginTop: '0.25rem' }}
+          >
            Save and Close
          </Button>
        </Container>
--- a/src/Components/Misc/Spacer.tsx
+++ b/src/Components/Misc/Spacer.tsx
@@ -1,6 +0,0 @@
-import styled from 'styled-components';
-
-export const Spacer = styled.div<{ width?: string; height?: string }>`
-  width: ${(props) => props.width};
-  height: ${(props) => props.height};
-`;
--- a/src/Components/Misc/SupportMe.tsx
+++ b/src/Components/Misc/SupportMe.tsx
@@ -1,43 +1,30 @@
 import { Button, Drawer } from '@mui/material';
 import { useState } from 'react';
-import styled from 'styled-components';
-import { theme } from '../../Data/theme';
 import { BuyMeCoffee, KoFi } from '../../Icons/generated/Support';
 import { Paragraph } from './TextComponents';
 import LittleGuy from '../../Icons/generated/LittleGuy';
 import { useAnalytics } from '../../Hooks/useAnalytics';
+import { twc } from 'react-twc';

-// import { ButtonBase } from '@mui/material';
+const SupportContainer = twc.div`flex flex-col items-center justify-center gap-4 mt-4 mb-4`;

-const SupportContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  margin: 16px 0;
-`;
-
-const SupportButton = styled.button`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  background-color: ${theme.palette.primary.main};
-  border-radius: 4px;
-  margin: 0 1rem;
-  padding: 0 1rem;
-  transition: background-color 0.2s ease-in-out;
-  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.3);
-  &:hover {
-    background-color: ${theme.palette.primary.dark};
-  }
-`;
+const SupportButton = twc.button`
+  flex
+  flex-row
+  items-center
+  justify-left
+  border-none
+  cursor-pointer
+  bg-primary-main
+  rounded-md
+  w-10/12
+  mx-4
+  px-4
+  py-2
+  transition-colors duration-200 ease-in-out
+  shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)]
+  hover:bg-primary-dark
+  `;

 export const SupportMe = () => {
  const analytics = useAnalytics();
@@ -87,13 +74,7 @@ export const SupportMe = () => {
      <LittleGuy
        height={'4rem'}
        width={'2.5rem'}
-        style={{
-          pointerEvents: 'none',
-          position: 'absolute',
-          top: '2.5rem',
-          right: '0',
-          color: theme.palette.text.primary,
-        }}
+        className="pointer-events-none absolute top-10 right-0 text-text-primary"
      />

      <Drawer
@@ -104,22 +85,12 @@ export const SupportMe = () => {
      >
        <SupportContainer>
          <SupportButton onClick={handleOpenBuyMeCoffee}>
-            <BuyMeCoffee
-              height={'1.5rem'}
-              width={'1.5rem'}
-              style={{ marginRight: '0.5rem' }}
-            />
-            <Paragraph style={{ fontSize: '0.7rem' }}>Buy him a tea</Paragraph>
+            <BuyMeCoffee height="1.5rem" width="1.5rem" className="mr-2" />
+            <Paragraph className="text-xs">Buy him a tea</Paragraph>
          </SupportButton>
          <SupportButton onClick={handleOpenKoFi}>
-            <KoFi
-              height={'1.5rem'}
-              width={'1.5rem'}
-              style={{ marginRight: '0.5rem' }}
-            />
-            <Paragraph style={{ fontSize: '0.7rem' }}>
-              Buy him a ko-fi
-            </Paragraph>
+            <KoFi height="1.5rem" width="1.5rem" className="mr-2" />
+            <Paragraph className="text-xs">Buy him a ko-fi</Paragraph>
          </SupportButton>
        </SupportContainer>
      </Drawer>
--- a/src/Components/Misc/TextComponents.tsx
+++ b/src/Components/Misc/TextComponents.tsx
@@ -1,11 +1,6 @@
-import styled from 'styled-components';
-import { theme } from '../../Data/theme';
+import { twc } from 'react-twc';

-export const Paragraph = styled.p`
-  color: ${theme.palette.text.primary};
-`;
+export const Paragraph = twc.p`text-text-primary;`;

 // eslint-disable-next-line react-refresh/only-export-components
-export const H1 = styled.h1`
-  color: ${theme.palette.text.primary};
-`;
+export const H1 = twc.h1`text-text-primary;`;
--- a/src/Components/Player/Player.tsx
+++ b/src/Components/Player/Player.tsx
@@ -0,0 +1,50 @@
+import LifeCounter from '../LifeCounter/LifeCounter';
+import { Player as PlayerType } from '../../Types/Player';
+import { twc } from 'react-twc';
+
+const getGridArea = (player: PlayerType) => {
+  switch (player.index) {
+    case 0:
+      return 'grid-in-player0';
+    case 1:
+      return 'grid-in-player1';
+    case 2:
+      return 'grid-in-player2';
+    case 3:
+      return 'grid-in-player3';
+    case 4:
+      return 'grid-in-player4';
+    case 5:
+      return 'grid-in-player5';
+    default:
+      throw new Error('Invalid player index');
+  }
+};
+
+const PlayerWrapper = twc.div`w-full h-full bg-black`;
+
+export const Player = (players: PlayerType[], gridClasses: string) => {
+  return (
+    <PlayerWrapper>
+      <div className={`grid w-full h-full gap-1 box-border ${gridClasses} `}>
+        {players.map((player) => {
+          const gridArea = getGridArea(player);
+
+          return (
+            <div
+              key={player.index}
+              className={`flex justify-center items-center align-middle ${gridArea}`}
+            >
+              <LifeCounter
+                player={player}
+                opponents={players.filter(
+                  (opponent) => opponent.index !== player.index
+                )}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </PlayerWrapper>
+  );
+};
--- a/src/Components/PlayerMenu/PlayerMenu.tsx
+++ b/src/Components/PlayerMenu/PlayerMenu.tsx
@@ -1,168 +1,98 @@
 import { Button, Checkbox } from '@mui/material';
-import styled, { css } from 'styled-components';
-import { Player, Rotation } from '../../Types/Player';
+import { useRef } from 'react';
+import { twc } from 'react-twc';
 import { theme } from '../../Data/theme';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
+import { useSafeRotate } from '../../Hooks/useSafeRotate';
 import {
-  PartnerTax,
-  Poison,
+  Cross,
  Energy,
-  Experience,
  Exit,
+  Experience,
  FullscreenOff,
  FullscreenOn,
-  Cross,
+  PartnerTax,
+  Poison,
  ResetGame,
 } from '../../Icons/generated';
-import { useRef } from 'react';
-import { Spacer } from '../Misc/Spacer';
-import { useSafeRotate } from '../../Hooks/useSafeRotate';
+import { Player, Rotation } from '../../Types/Player';
+import {
+  RotationButtonProps,
+  RotationDivProps,
+} from '../Buttons/CommanderDamage';

-const SettingsContainer = styled.div<{
-  $rotation: Rotation;
-}>`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  height: 100%;
-  width: 100%;
+const CheckboxContainer = twc.div``;

-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        flex-direction: column-reverse;
-        height: 100%;
-        width: 100%;
-      `;
-    }
-  }}
-  ${(props) => {
-    if (props.$rotation === Rotation.Side) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-      `;
-    } else if (props.$rotation === Rotation.SideFlipped) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-      `;
-    }
-  }}
+const PlayerMenuWrapper = twc.div`
+  flex
+  flex-col
+  absolute
+  w-full
+  h-full
+  bg-background-settings
+  items-center
+  justify-center
+  z-[2]
+  webkit-user-select-none
 `;

-const BetterRowContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  width: 100%;
-  height: 100%;
-  justify-content: end;
-  align-items: stretch;
+const BetterRowContainer = twc.div`
+  flex
+  flex-col
+  flex-grow
+  w-full
+  h-full
+  justify-end
+  items-stretch
 `;

-const TogglesSection = styled.div`
-  display: flex;
-  position: relative;
-  flex-direction: row;
-  gap: 0.5rem;
-  justify-content: space-evenly;
+const TogglesSection = twc.div`
+  flex
+  relative
+  flex-row
+  gap-2
+  justify-evenly
 `;

-const ButtonsSections = styled.div`
-  display: flex;
-  max-width: 100%;
-  gap: 1rem;
-  justify-content: space-between;
-  padding: 3% 3%;
-  align-items: center;
+const ButtonsSections = twc.div`
+  flex
+  max-w-full
+  gap-4
+  justify-between
+  p-[3%]
+  items-center
 `;

-const ColorPicker = styled.input`
-  position: absolute;
-  top: 5%;
-  left: 5%;
-  height: 8vmax;
-  width: 8vmax;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  background-color: transparent;
-  user-select: none;
-  color: #ffffff;
+const ColorPicker = twc.input`
+  absolute
+  top-[5%]
+  left-[5%]
+  h-[8vmax]
+  w-[8vmax]
+  border-none
+  outline-none
+  cursor-pointer
+  bg-transparent
+  user-select-none
+  text-common-white
 `;

-const CheckboxContainer = styled.div<{ $rotation: Rotation }>`
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return css`
-        /* rotate: ${props.$rotation - 180}deg; */
-      `;
-    }
-  }}
-`;
+const SettingsContainer = twc.div<RotationDivProps>((props) => [
+  'flex flex-wrap h-full w-full',
+  props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
+    ? 'flex-col'
+    : 'flex-row',
+]);

-const PlayerMenuWrapper = styled.div<{
-  $rotation: Rotation;
-}>`
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(20, 20, 20, 0.9);
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-  ${(props) => {
-    if (
-      props.$rotation === Rotation.SideFlipped ||
-      props.$rotation === Rotation.Side
-    ) {
-      return;
-    }
-    return css`
-      rotate: ${props.$rotation}deg;
-    `;
-  }};
-`;
-
-const CloseButton = styled.div<{
-  $rotation: Rotation;
-}>`
-  position: absolute;
-  top: 15%;
-  right: 5%;
-  z-index: 9999;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  background-color: transparent;
-
-  ${(props) => {
-    if (props.$rotation === Rotation.Side) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-        top: 5%;
-        right: auto;
-        left: 5%;
-      `;
-    } else if (props.$rotation === Rotation.SideFlipped) {
-      return css`
-        rotate: ${props.$rotation - 180}deg;
-        top: auto;
-        left: auto;
-        bottom: 5%;
-        right: 5%;
-      `;
-    }
-  }}
-`;
+const CloseButton = twc.button<RotationButtonProps>((props) => [
+  'absolute border-none outline-none cursor-pointer bg-transparent z-[99]',
+  props.$rotation === Rotation.Side
+    ? `top-[5%] right-auto left-[5%]`
+    : props.$rotation === Rotation.SideFlipped
+    ? 'top-auto left-auto bottom-[5%] right-[5%]'
+    : 'top-[15%] right-[5%]',
+]);

 type PlayerMenuProps = {
  player: Player;
@@ -214,9 +144,31 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
  const extraCountersSize = isSide ? '8vmin' : '4vmax';
  const closeButtonSize = isSide ? '6vmin' : '3vmax';

+  const calcRotation =
+    player.settings.rotation === Rotation.Side
+      ? `${player.settings.rotation - 180}deg`
+      : player.settings.rotation === Rotation.SideFlipped
+      ? `${player.settings.rotation - 180}deg`
+      : '';
+
  return (
-    <PlayerMenuWrapper $rotation={player.settings.rotation}>
-      <CloseButton $rotation={player.settings.rotation}>
+    <PlayerMenuWrapper
+      //TODO: Fix hacky solution to rotation for SideFlipped
+      style={{
+        rotate:
+          player.settings.rotation === Rotation.SideFlipped ? '180deg' : '',
+      }}
+    >
+      <CloseButton
+        $rotation={player.settings.rotation}
+        style={{
+          rotate:
+            player.settings.rotation === Rotation.Side ||
+            player.settings.rotation === Rotation.SideFlipped
+              ? `${player.settings.rotation - 180}deg`
+              : '',
+        }}
+      >
        <Button
          variant="text"
          onClick={handleOnClick}
@@ -230,8 +182,12 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
          <Cross size={closeButtonSize} />
        </Button>
      </CloseButton>
+
      <SettingsContainer
        $rotation={player.settings.rotation}
+        style={{
+          rotate: calcRotation,
+        }}
        ref={settingsContainerRef}
      >
        <ColorPicker
@@ -244,7 +200,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
        <BetterRowContainer>
          <TogglesSection>
            {player.settings.useCommanderDamage && (
-              <CheckboxContainer $rotation={player.settings.rotation}>
+              <CheckboxContainer>
                <Checkbox
                  name="usePartner"
                  checked={player.settings.usePartner}
@@ -272,7 +228,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
              </CheckboxContainer>
            )}

-            <CheckboxContainer $rotation={player.settings.rotation}>
+            <CheckboxContainer>
              <Checkbox
                name="usePoison"
                checked={player.settings.usePoison}
@@ -299,7 +255,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
              />
            </CheckboxContainer>

-            <CheckboxContainer $rotation={player.settings.rotation}>
+            <CheckboxContainer>
              <Checkbox
                name="useEnergy"
                checked={player.settings.useEnergy}
@@ -326,7 +282,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
              />
            </CheckboxContainer>

-            <CheckboxContainer $rotation={player.settings.rotation}>
+            <CheckboxContainer>
              <Checkbox
                name="useExperience"
                checked={player.settings.useExperience}
@@ -353,8 +309,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
              />
            </CheckboxContainer>
          </TogglesSection>
-          <Spacer height="1rem" />
-          <ButtonsSections>
+          <ButtonsSections className="mt-4">
            <Button
              variant="text"
              style={{
@@ -366,7 +321,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
            >
              <Exit size={iconSize} style={{ rotate: '180deg' }} />
            </Button>
-            <CheckboxContainer $rotation={player.settings.rotation}>
+            <CheckboxContainer>
              <Checkbox
                name="fullscreen"
                checked={document.fullscreenElement ? true : false}
@@ -418,15 +373,7 @@ const PlayerMenu = ({ player, setShowPlayerMenu }: PlayerMenuProps) => {
        </BetterRowContainer>
        <dialog
          ref={dialogRef}
-          style={{
-            zIndex: 9999,
-            background: theme.palette.background.default,
-            color: theme.palette.text.primary,
-            borderRadius: '1rem',
-            border: 'none',
-            position: 'absolute',
-            top: '10%',
-          }}
+          className="z-[9999] bg-background-default text-text-primary rounded-2xl border-none absolute top-[10%]"
        >
          <h1>Reset Game?</h1>
          <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
--- a/src/Components/Views/Play.tsx
+++ b/src/Components/Views/Play.tsx
@@ -1,24 +1,67 @@
-import styled from 'styled-components';
-import Counters from '../Counters/Counters';
+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-[100dvmax] h-[100dvmin] overflow-hidden`;

-type PlayProps = {
-  gridAreas: string;
+export const Play = () => {
+  const { players } = usePlayers();
+  const { initialGameSettings } = useGlobalSettings();
+
+  let Layout: JSX.Element;
+  switch (players.length) {
+    case 1:
+      if (initialGameSettings?.orientation === Orientation.Portrait) {
+        Layout = Player(players, 'grid-areas-onePlayerPortrait');
+      }
+      Layout = Player(players, 'grid-areas-onePlayerLandscape');
+      break;
+    case 2:
+      switch (initialGameSettings?.orientation) {
+        case Orientation.Portrait:
+          Layout = Player(players, 'grid-areas-twoPlayersOppositePortrait');
+          break;
+        default:
+        case Orientation.Landscape:
+          Layout = Player(players, 'grid-areas-twoPlayersSameSideLandscape');
+          break;
+        case Orientation.OppositeLandscape:
+          Layout = Player(players, 'grid-areas-twoPlayersOppositeLandscape');
+          break;
+      }
+      break;
+    case 3:
+      if (initialGameSettings?.orientation === Orientation.Portrait) {
+        Layout = Player(players, 'grid-areas-threePlayersSide');
+        break;
+      }
+      Layout = Player(players, 'grid-areas-threePlayers');
+      break;
+    default:
+    case 4:
+      if (initialGameSettings?.orientation === Orientation.Portrait) {
+        Layout = Player(players, 'grid-areas-fourPlayerPortrait');
+        break;
+      }
+      Layout = Player(players, 'grid-areas-fourPlayer');
+      break;
+    case 5:
+      if (initialGameSettings?.orientation === Orientation.Portrait) {
+        Layout = Player(players, 'grid-areas-fivePlayersSide');
+        break;
+      }
+      Layout = Player(players, 'grid-areas-fivePlayers');
+      break;
+    case 6:
+      if (initialGameSettings?.orientation === Orientation.Portrait) {
+        Layout = Player(players, 'grid-areas-sixPlayersSide');
+        break;
+      }
+      Layout = Player(players, 'grid-areas-sixPlayers');
+      break;
+  }
+
+  return <MainWrapper>{Layout}</MainWrapper>;
 };
-
-const Play = ({ gridAreas }: PlayProps) => {
-  return (
-    <MainWrapper>
-      <Counters gridAreas={gridAreas} />
-    </MainWrapper>
-  );
-};
-
-export default Play;
--- a/src/Components/Views/StartMenu/LayoutOptions.tsx
+++ b/src/Components/Views/StartMenu/LayoutOptions.tsx
@@ -1,37 +1,34 @@
-import React from 'react';
-import styled from 'styled-components';
-import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
 import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
+import React from 'react';
 import { theme } from '../../../Data/theme';
 import {
-  OnePlayerPortrait,
-  TwoPlayersOppositeLandscape,
-  TwoPlayersOppositePortrait,
-  ThreePlayers,
-  ThreePlayersSide,
+  FivePlayers,
  FourPlayers,
  FourPlayersSide,
-  FivePlayers,
+  OnePlayerPortrait,
  SixPlayers,
+  ThreePlayers,
+  ThreePlayersSide,
+  TwoPlayersOppositeLandscape,
+  TwoPlayersOppositePortrait,
  TwoPlayersSameSide,
 } from '../../../Icons/generated/Layouts';
-import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape';

-const LayoutWrapper = styled.div`
-  flex-direction: row;
-  display: flex;
-  justify-content: space-evenly;
-`;
+import { twc } from 'react-twc';
+import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape';
+import { Orientation } from '../../../Types/Settings';
+
+const LayoutWrapper = twc.div`flex flex-row justify-between self-center`;

 type LayoutOptionsProps = {
  numberOfPlayers: number;
-  gridAreas: GridTemplateAreas;
-  onChange: (gridAreas: GridTemplateAreas) => void;
+  selectedOrientation: Orientation;
+  onChange: (orientation: Orientation) => void;
 };

-const LayoutOptions: React.FC<LayoutOptionsProps> = ({
+export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
  numberOfPlayers,
-  gridAreas,
+  selectedOrientation,
  onChange,
 }) => {
  const iconHeight = '30vmin';
@@ -43,7 +40,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
        return (
          <>
            <FormControlLabel
-              value={GridTemplateAreas.OnePlayerLandscape}
+              value={Orientation.Landscape}
              control={
                <Radio
                  icon={
@@ -66,7 +63,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
              label=""
            />
            <FormControlLabel
-              value={GridTemplateAreas.OnePlayerPortrait}
+              value={Orientation.Portrait}
              control={
                <Radio
                  icon={
@@ -94,7 +91,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
        return (
          <>
            <FormControlLabel
-              value={GridTemplateAreas.TwoPlayersSameSide}
+              value={Orientation.Landscape}
              control={
                <Radio
                  icon={
@@ -117,7 +114,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
              label=""
            />
            <FormControlLabel
-              value={GridTemplateAreas.TwoPlayersOppositePortrait}
+              value={Orientation.Portrait}
              control={
                <Radio
                  icon={
@@ -140,7 +137,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
              label=""
            />
            <FormControlLabel
-              value={GridTemplateAreas.TwoPlayersOppositeLandscape}
+              value={Orientation.OppositeLandscape}
              control={
                <Radio
                  icon={
@@ -168,7 +165,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
        return (
          <>
            <FormControlLabel
-              value={GridTemplateAreas.ThreePlayers}
+              value={Orientation.Landscape}
              control={
                <Radio
                  icon={
@@ -191,7 +188,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
              label=""
            />
            <FormControlLabel
-              value={GridTemplateAreas.ThreePlayersSide}
+              value={Orientation.Portrait}
              control={
                <Radio
                  icon={
@@ -220,7 +217,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
        return (
          <>
            <FormControlLabel
-              value={GridTemplateAreas.FourPlayers}
+              value={Orientation.Landscape}
              control={
                <Radio
                  icon={
@@ -243,7 +240,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
              label=""
            />
            <FormControlLabel
-              value={GridTemplateAreas.FourPlayersSide}
+              value={Orientation.Portrait}
              control={
                <Radio
                  icon={
@@ -272,7 +269,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
        return (
          <>
            <FormControlLabel
-              value={GridTemplateAreas.FivePlayers}
+              value={Orientation.Landscape}
              control={
                <Radio
                  icon={
@@ -324,7 +321,7 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
        return (
          <>
            <FormControlLabel
-              value={GridTemplateAreas.SixPlayers}
+              value={Orientation.Landscape}
              control={
                <Radio
                  icon={
@@ -382,9 +379,9 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
      <RadioGroup
        row
        onChange={(_e, value) => {
-          onChange(value as GridTemplateAreas);
+          onChange(value as Orientation);
        }}
-        value={gridAreas}
+        value={selectedOrientation}
        style={{ justifyContent: 'center' }}
      >
        {renderLayoutOptions()}
@@ -392,5 +389,3 @@ const LayoutOptions: React.FC<LayoutOptionsProps> = ({
    </LayoutWrapper>
  );
 };
-
-export default LayoutOptions;
--- a/src/Components/Views/StartMenu/StartMenu.tsx
+++ b/src/Components/Views/StartMenu/StartMenu.tsx
@@ -1,51 +1,30 @@
 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 { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
+import { twc } from 'react-twc';
 import { createInitialPlayers } from '../../../Data/getInitialPlayers';
 import { theme } from '../../../Data/theme';
 import { useAnalytics } from '../../../Hooks/useAnalytics';
-import { Cog, Info } from '../../../Icons/generated';
-import { InfoModal } from '../../Misc/InfoModal';
-import { SupportMe } from '../../Misc/SupportMe';
-import { H1, Paragraph } from '../../Misc/TextComponents';
-import LayoutOptions from './LayoutOptions';
-import { Spacer } from '../../Misc/Spacer';
-import { usePlayers } from '../../../Hooks/usePlayers';
 import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
-import { InitialGameSettings } from '../../../Types/Settings';
+import { usePlayers } from '../../../Hooks/usePlayers';
+import { Cog, Info } from '../../../Icons/generated';
+import {
+  GameFormat,
+  InitialGameSettings,
+  Orientation,
+} from '../../../Types/Settings';
+import { InfoModal } from '../../Misc/InfoModal';
 import { SettingsModal } from '../../Misc/SettingsModal';
+import { SupportMe } from '../../Misc/SupportMe';
+import { LayoutOptions } from './LayoutOptions';

-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 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 = [
  {
@@ -118,7 +97,8 @@ const Start = () => {
      numberOfPlayers: 4,
      startingLifeTotal: 40,
      useCommanderDamage: true,
-      gridAreas: GridTemplateAreas.FourPlayers,
+      orientation: Orientation.Portrait,
+      gameFormat: GameFormat.Commander,
    }
  );

@@ -156,31 +136,9 @@ const Start = () => {
    return `${value}`;
  };

-  const getDefaultLayout = (numberOfPlayers: number) => {
-    switch (numberOfPlayers) {
-      case 1:
-        return GridTemplateAreas.OnePlayerLandscape;
-      case 2:
-        return GridTemplateAreas.TwoPlayersSameSide;
-      case 3:
-        return GridTemplateAreas.ThreePlayers;
-      case 4:
-        return GridTemplateAreas.FourPlayers;
-      case 5:
-        return GridTemplateAreas.FivePlayers;
-      case 6:
-        return GridTemplateAreas.SixPlayers;
-      default:
-        return GridTemplateAreas.FourPlayers;
-    }
-  };
-
  useEffect(() => {
-    const defaultLayout = getDefaultLayout(playerOptions.numberOfPlayers);
-
    setPlayerOptions({
      ...playerOptions,
-      gridAreas: defaultLayout,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [playerOptions.numberOfPlayers]);
@@ -212,7 +170,10 @@ const Start = () => {

      <SupportMe />

-      <H1>Life Trinket</H1>
+      <h1 className="text-3xl block font-bold mt-6 mb-5 text-text-primary">
+        Life Trinket
+      </h1>
+
      <FormControl focused={false} style={{ width: '80vw' }}>
        <FormLabel>Number of Players</FormLabel>
        <Slider
@@ -228,11 +189,11 @@ const Start = () => {
            setPlayerOptions({
              ...playerOptions,
              numberOfPlayers: value as number,
+              orientation: Orientation.Landscape,
            });
          }}
        />
-        <Spacer height="0.7rem" />
-        <FormLabel>Starting Health</FormLabel>
+        <FormLabel className="mt-[0.7rem]">Starting Health</FormLabel>
        <Slider
          title="Starting Health"
          max={60}
@@ -246,12 +207,12 @@ const Start = () => {
            setPlayerOptions({
              ...playerOptions,
              startingLifeTotal: value as number,
+              orientation: Orientation.Landscape,
            })
          }
        />
-        <Spacer height="1rem" />

-        <ToggleButtonsWrapper>
+        <ToggleButtonsWrapper className="mt-4">
          <ToggleContainer>
            <FormLabel>Commander</FormLabel>
            <Switch
@@ -267,6 +228,7 @@ const Start = () => {
                    useCommanderDamage: value,
                    numberOfPlayers: 4,
                    startingLifeTotal: 40,
+                    orientation: Orientation.Landscape,
                  });
                  return;
                }
@@ -275,6 +237,7 @@ const Start = () => {
                  useCommanderDamage: value,
                  numberOfPlayers: 2,
                  startingLifeTotal: 20,
+                  orientation: Orientation.Landscape,
                });
              }}
            />
@@ -291,23 +254,36 @@ const Start = () => {
        </ToggleButtonsWrapper>

        <FormLabel>Layout</FormLabel>
-        <LayoutOptions
+        {/* <LayoutOptions
          numberOfPlayers={playerOptions.numberOfPlayers}
          gridAreas={playerOptions.gridAreas}
          onChange={(gridAreas) =>
-            setPlayerOptions({ ...playerOptions, gridAreas })
+            setPlayerOptions({
+              ...playerOptions,
+              gridAreas,
+              //TODO fix the layout selection
+              orientation: Orientation.Portrait,
+            })
          }
+        /> */}
+        <LayoutOptions
+          numberOfPlayers={playerOptions.numberOfPlayers}
+          selectedOrientation={playerOptions.orientation}
+          onChange={(orientation) => {
+            setPlayerOptions({
+              ...playerOptions,
+              orientation,
+            });
+          }}
        />
      </FormControl>

      {!isPWA && (
-        <Paragraph
-          style={{ textAlign: 'center', maxWidth: '75%', fontSize: '0.7rem' }}
-        >
+        <p className="text-center, max-w-[75%] text-xs text-text-primary">
          If you're on iOS, this page works better if you{' '}
          <strong>hide the toolbar</strong> or{' '}
          <strong>add the app to your home screen</strong>.
-        </Paragraph>
+        </p>
      )}

      <StartButtonFooter>
--- a/src/Data/GridTemplateAreas.ts
+++ b/src/Data/GridTemplateAreas.ts
@@ -1,15 +0,0 @@
-export enum GridTemplateAreas {
-  OnePlayerLandscape = '"player0 player0"',
-  OnePlayerPortrait = '"player0" "player0"',
-  TwoPlayersOppositeLandscape = '"player0" "player1"',
-  TwoPlayersOppositePortrait = '"player0 player1" "player0 player1"',
-  TwoPlayersSameSide = '"player0 player1"',
-  ThreePlayers = '"player0 player0" "player1 player2"',
-  ThreePlayersSide = '"player0 player0 player0 player2" "player1 player1 player1 player2"',
-  FourPlayers = '"player0 player1" "player2 player3"',
-  FourPlayersSide = '"player0 player1 player1 player1 player3" "player0 player2 player2 player2 player3"',
-  FivePlayers = '"player0 player0 player0 player1 player1 player1" "player2 player2 player3 player3 player4 player4"',
-  FivePlayersSide = '"player0 player0 player0 player0 player0 player1 player1 player1 player1 player1 player2" "player3 player3 player3 player3 player3 player4 player4 player4 player4 player4 player2"',
-  SixPlayers = '"player0 player1 player2" "player3 player4 player5"',
-  SixPlayersSide = '"player0 player1 player1 player1 player1 player2 player2 player2 player2 player3" "player0 player4 player4 player4 player4 player5 player5 player5 player5 player3"',
-}
--- a/src/Data/getInitialPlayers.ts
+++ b/src/Data/getInitialPlayers.ts
@@ -1,6 +1,5 @@
 import { Player, Rotation } from '../Types/Player';
-import { InitialGameSettings } from '../Types/Settings';
-import { GridTemplateAreas } from './GridTemplateAreas';
+import { InitialGameSettings, Orientation } from '../Types/Settings';

 const presetColors = [
  '#F06292', // Light Pink
@@ -13,184 +12,182 @@ const presetColors = [
  '#FF8A80', // Coral
 ];

-const getRotation = (index: number, gridAreas: GridTemplateAreas): Rotation => {
-  if (gridAreas === GridTemplateAreas.OnePlayerLandscape && index === 0) {
-    return Rotation.Normal;
+const getOrientationRotations = (
+  index: number,
+  numberOfPlayers: number,
+  orientation: Orientation
+): Rotation => {
+  switch (numberOfPlayers) {
+    case 1:
+      switch (orientation) {
+        default:
+        case Orientation.Landscape:
+          return Rotation.Normal;
+        case Orientation.Portrait:
+          return Rotation.Side;
+      }
+    case 2:
+      switch (orientation) {
+        default:
+        case Orientation.Landscape:
+          return Rotation.Normal;
+        case Orientation.Portrait:
+          switch (index) {
+            case 0:
+              return Rotation.SideFlipped;
+            case 1:
+              return Rotation.Side;
+            default:
+              return Rotation.Normal;
+          }
+        case Orientation.OppositeLandscape:
+          switch (index) {
+            case 0:
+              return Rotation.Flipped;
+            case 1:
+              return Rotation.Normal;
+            default:
+              return Rotation.Normal;
+          }
+      }
+    case 3:
+      switch (orientation) {
+        default:
+        case Orientation.Landscape:
+          switch (index) {
+            case 0:
+              return Rotation.Flipped;
+            case 1:
+              return Rotation.Normal;
+            case 2:
+              return Rotation.Normal;
+            default:
+              return Rotation.Normal;
+          }
+        case Orientation.Portrait:
+          switch (index) {
+            case 0:
+              return Rotation.Flipped;
+            case 1:
+              return Rotation.Normal;
+            case 2:
+              return Rotation.Side;
+            default:
+              return Rotation.Normal;
+          }
+      }
+    case 4:
+      switch (orientation) {
+        default:
+        case Orientation.Landscape:
+          switch (index) {
+            case 0:
+              return Rotation.Flipped;
+            case 1:
+              return Rotation.Flipped;
+            case 2:
+              return Rotation.Normal;
+            case 3:
+              return Rotation.Normal;
+            default:
+              return Rotation.Normal;
+          }
+        case Orientation.Portrait:
+          switch (index) {
+            case 0:
+              return Rotation.SideFlipped;
+            case 1:
+              return Rotation.Flipped;
+            case 2:
+              return Rotation.Normal;
+            case 3:
+              return Rotation.Side;
+            default:
+              return Rotation.Normal;
+          }
+      }
+    case 5:
+      switch (orientation) {
+        default:
+        case Orientation.Landscape:
+          switch (index) {
+            case 0:
+              return Rotation.Flipped;
+            case 1:
+              return Rotation.Flipped;
+            case 2:
+              return Rotation.Normal;
+            case 3:
+              return Rotation.Normal;
+            case 4:
+              return Rotation.Normal;
+            default:
+              return Rotation.Normal;
+          }
+        case Orientation.Portrait:
+          switch (index) {
+            case 0:
+              return Rotation.Side;
+            case 1:
+              return Rotation.Side;
+            case 2:
+              return Rotation.SideFlipped;
+            case 3:
+              return Rotation.SideFlipped;
+            case 4:
+              return Rotation.SideFlipped;
+            default:
+              return Rotation.Normal;
+          }
+      }
+    case 6:
+      switch (orientation) {
+        default:
+        case Orientation.Landscape:
+          switch (index) {
+            case 0:
+              return Rotation.Flipped;
+            case 1:
+              return Rotation.Flipped;
+            case 2:
+              return Rotation.Flipped;
+            case 3:
+              return Rotation.Normal;
+            case 4:
+              return Rotation.Normal;
+            case 5:
+              return Rotation.Normal;
+            default:
+              return Rotation.Normal;
+          }
+        case Orientation.Portrait:
+          switch (index) {
+            case 0:
+              return Rotation.Side;
+            case 1:
+              return Rotation.Side;
+            case 2:
+              return Rotation.Side;
+            case 3:
+              return Rotation.SideFlipped;
+            case 4:
+              return Rotation.SideFlipped;
+            case 5:
+              return Rotation.SideFlipped;
+            default:
+              return Rotation.Normal;
+          }
+      }
+    default:
+      return Rotation.Normal;
  }
-
-  if (gridAreas === GridTemplateAreas.OnePlayerPortrait && index === 0) {
-    return Rotation.Side;
-  }
-
-  if (gridAreas === GridTemplateAreas.TwoPlayersOppositePortrait) {
-    switch (index) {
-      case 0:
-        return Rotation.SideFlipped;
-      case 1:
-        return Rotation.Side;
-      default:
-        return Rotation.Normal;
-    }
-  }
-
-  if (gridAreas === GridTemplateAreas.TwoPlayersOppositeLandscape) {
-    switch (index) {
-      case 0:
-        return Rotation.Flipped;
-      case 1:
-        return Rotation.Normal;
-      default:
-        return Rotation.Normal;
-    }
-  }
-
-  if (gridAreas === GridTemplateAreas.TwoPlayersSameSide) {
-    switch (index) {
-      case 0:
-        return Rotation.Normal;
-      case 1:
-        return Rotation.Normal;
-      default:
-        return Rotation.Normal;
-    }
-  }
-
-  if (gridAreas === GridTemplateAreas.ThreePlayers) {
-    switch (index) {
-      case 0:
-        return Rotation.Flipped;
-      case 1:
-        return Rotation.Normal;
-      case 2:
-        return Rotation.Normal;
-      default:
-        return Rotation.Normal;
-    }
-  }
-
-  if (gridAreas === GridTemplateAreas.ThreePlayersSide) {
-    switch (index) {
-      case 0:
-        return Rotation.Flipped;
-      case 1:
-        return Rotation.Normal;
-      case 2:
-        return Rotation.Side;
-      default:
-        return Rotation.Normal;
-    }
-  }
-
-  if (gridAreas === GridTemplateAreas.FourPlayers) {
-    switch (index) {
-      case 0:
-        return Rotation.Flipped;
-      case 1:
-        return Rotation.Flipped;
-      case 2:
-        return Rotation.Normal;
-      case 3:
-        return Rotation.Normal;
-      default:
-        return Rotation.Normal;
-    }
-  }
-
-  if (gridAreas === GridTemplateAreas.FourPlayersSide) {
-    switch (index) {
-      case 0:
-        return Rotation.SideFlipped;
-      case 1:
-        return Rotation.Flipped;
-      case 2:
-        return Rotation.Normal;
-      case 3:
-        return Rotation.Side;
-      default:
-        return Rotation.Normal;
-    }
-  }
-
-  if (gridAreas === GridTemplateAreas.FivePlayers) {
-    switch (index) {
-      case 0:
-        return Rotation.Flipped;
-      case 1:
-        return Rotation.Flipped;
-      case 2:
-        return Rotation.Normal;
-      case 3:
-        return Rotation.Normal;
-      case 4:
-        return Rotation.Normal;
-      default:
-        return Rotation.Normal;
-    }
-  }
-
-  if (gridAreas === GridTemplateAreas.FivePlayersSide) {
-    switch (index) {
-      case 0:
-        return Rotation.Flipped;
-      case 1:
-        return Rotation.Flipped;
-      case 2:
-        return Rotation.Side;
-      case 3:
-        return Rotation.Normal;
-      case 4:
-        return Rotation.Normal;
-      default:
-        return Rotation.Normal;
-    }
-  }
-
-  if (gridAreas === GridTemplateAreas.SixPlayers) {
-    switch (index) {
-      case 0:
-        return Rotation.Flipped;
-      case 1:
-        return Rotation.Flipped;
-      case 2:
-        return Rotation.Flipped;
-      case 3:
-        return Rotation.Normal;
-      case 4:
-        return Rotation.Normal;
-      case 5:
-        return Rotation.Normal;
-      default:
-        return Rotation.Normal;
-    }
-  }
-
-  if (gridAreas === GridTemplateAreas.SixPlayersSide) {
-    switch (index) {
-      case 0:
-        return Rotation.SideFlipped;
-      case 1:
-        return Rotation.Flipped;
-      case 2:
-        return Rotation.Flipped;
-      case 3:
-        return Rotation.Side;
-      case 4:
-        return Rotation.Normal;
-      case 5:
-        return Rotation.Normal;
-      default:
-        return Rotation.Normal;
-    }
-  }
-
-  return Rotation.Normal;
 };

 export const createInitialPlayers = ({
  numberOfPlayers,
  startingLifeTotal,
  useCommanderDamage,
-  gridAreas,
+  orientation,
 }: InitialGameSettings): Player[] => {
  const players: Player[] = [];
  const availableColors = [...presetColors]; // Create a copy of the colors array
@@ -213,7 +210,7 @@ export const createInitialPlayers = ({
      });
    }

-    const rotation = getRotation(i, gridAreas);
+    const rotation = getOrientationRotations(i, numberOfPlayers, orientation);

    const player: Player = {
      lifeTotal: startingLifeTotal,
--- a/src/Data/theme.ts
+++ b/src/Data/theme.ts
@@ -1,34 +1,28 @@
 import { createTheme } from '@mui/material';
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '../../tailwind.config';
+
+//TODO Create provider for this
+const fullConfig = resolveConfig(tailwindConfig);
+
+const { primary, secondary, background, text, action, common } =
+  fullConfig.theme.colors;

 export const theme = createTheme({
  palette: {
-    primary: {
-      main: '#7F9172',
-    },
-    secondary: {
-      main: '#5E714C',
-    },
-    background: {
-      default: '#495E35',
-    },
-    text: {
-      primary: '#F5F5F5',
-      secondary: '#b3b39b',
-    },
-    action: {
-      disabled: '#5E714C',
-    },
-    common: {
-      white: '#F9FFE3',
-      black: '#000000',
-    },
+    primary,
+    secondary,
+    background,
+    text,
+    action,
+    common,
  },
  components: {
    MuiFormLabel: {
      styleOverrides: {
        root: {
          fontSize: '1rem',
-          color: '#F5F5F5',
+          color: text.primary,
        },
      },
    },
@@ -36,12 +30,12 @@ export const theme = createTheme({
      styleOverrides: {
        markLabel: {
          fontSize: '1rem',
-          color: '#F5F5F5',
+          color: text.primary,
        },
        valueLabel: {
          display: 'none',
-          color: '#F5F5F5',
-          background: '#5E714C',
+          color: text.primary,
+          background: secondary.main,
        },
        track: {
          height: '0.7rem',
@@ -77,7 +71,7 @@ export const theme = createTheme({
      styleOverrides: {
        paper: {
          top: '1rem',
-          background: '#495E35',
+          background: background.default,
          height: 'auto',
          borderRadius: '8px',
        },
@@ -86,7 +80,7 @@ export const theme = createTheme({
    MuiBackdrop: {
      styleOverrides: {
        root: {
-          backgroundColor: 'rgba(0, 0, 0, 0.3)',
+          backgroundColor: background.backdrop,
        },
      },
    },
@@ -100,7 +94,7 @@ export const theme = createTheme({
    MuiSwitch: {
      styleOverrides: {
        colorPrimary: {
-          color: '#5E714C',
+          color: action.disabled,
        },
      },
    },
--- a/src/Providers/GlobalSettingsProvider.tsx
+++ b/src/Providers/GlobalSettingsProvider.tsx
@@ -1,11 +1,15 @@
 import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { useWakeLock } from 'react-screen-wake-lock';
 import {
  GlobalSettingsContext,
  GlobalSettingsContextType,
 } from '../Contexts/GlobalSettingsContext';
-import { useWakeLock } from 'react-screen-wake-lock';
 import { useAnalytics } from '../Hooks/useAnalytics';
-import { InitialGameSettings, Settings } from '../Types/Settings';
+import {
+  InitialGameSettings,
+  InitialGameSettingsSchema,
+  Settings,
+} from '../Types/Settings';

 export const GlobalSettingsProvider = ({
  children,
@@ -33,12 +37,36 @@ export const GlobalSettingsProvider = ({
      : { goFullscreenOnStart: true, keepAwake: true, showStartingPlayer: true }
  );

+  const removeLocalStorage = async () => {
+    localStorage.removeItem('initialGameSettings');
+    localStorage.removeItem('players');
+    localStorage.removeItem('playing');
+    localStorage.removeItem('showPlay');
+    setShowPlay(false);
+  };
+
  useEffect(() => {
+    if (savedGameSettings && JSON.parse(savedGameSettings).gridAreas) {
+      removeLocalStorage();
+      window.location.reload();
+      return;
+    }
+
+    //parse existing game settings with zod schema
+    const parsedInitialGameSettings =
+      InitialGameSettingsSchema.safeParse(initialGameSettings);
+
+    if (!parsedInitialGameSettings.success) {
+      removeLocalStorage();
+      window.location.reload();
+      return;
+    }
+
    localStorage.setItem(
      'initialGameSettings',
      JSON.stringify(initialGameSettings)
    );
-  }, [initialGameSettings]);
+  }, [initialGameSettings, savedGameSettings]);

  useEffect(() => {
    localStorage.setItem('settings', JSON.stringify(settings));
@@ -67,14 +95,6 @@ export const GlobalSettingsProvider = ({
    request();
  }

-  const removeLocalStorage = async () => {
-    localStorage.removeItem('initialGameSettings');
-    localStorage.removeItem('players');
-    localStorage.removeItem('playing');
-    localStorage.removeItem('showPlay');
-    setShowPlay(localStorage.getItem('showPlay') === 'true' ?? false);
-  };
-
  const ctxValue = useMemo((): GlobalSettingsContextType => {
    const goToStart = async () => {
      const currentPlayers = localStorage.getItem('players');
@@ -89,7 +109,6 @@ export const GlobalSettingsProvider = ({
    };

    const toggleWakeLock = async () => {
-      console.log('on press', active);
      if (active) {
        setSettings({ ...settings, keepAwake: false });
        release();
--- a/src/Types/Settings.ts
+++ b/src/Types/Settings.ts
@@ -1,4 +1,16 @@
-import { GridTemplateAreas } from '../Data/GridTemplateAreas';
+import { z } from 'zod';
+
+export enum Orientation {
+  OppositeLandscape = 'opposite-landscape',
+  Landscape = 'landscape',
+  Portrait = 'portrait',
+}
+
+export enum GameFormat {
+  Commander = 'commander',
+  Standard = 'standard',
+  TwoHeadedGiant = 'two-headed-giant',
+}

 export type Settings = {
  keepAwake: boolean;
@@ -9,9 +21,15 @@ export type Settings = {
 export type InitialGameSettings = {
  startingLifeTotal: number;
  useCommanderDamage: boolean;
-  gameFormat: GameFormat;
+  gameFormat?: GameFormat;
  numberOfPlayers: number;
-  gridAreas: GridTemplateAreas;
+  orientation: Orientation;
 };

-type GameFormat = 'commander' | 'standard' | 'two-headed-giant';
+export const InitialGameSettingsSchema = z.object({
+  startingLifeTotal: z.number().min(1).max(200).default(20),
+  useCommanderDamage: z.boolean().default(false),
+  gameFormat: z.nativeEnum(GameFormat).optional(),
+  numberOfPlayers: z.number().min(1).max(6).default(2),
+  orientation: z.nativeEnum(Orientation).default(Orientation.Landscape),
+});
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
 body {
+  background-color: theme('colors.background.default');
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -6,8 +12,25 @@ body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }
+#root {
+  touch-action: manipulation;
+}

 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;
+  }
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,109 @@
+//@ts-expect-error - tailwindcss-grid-areas does not have typescript support
+import tailwindcssGridAreas from '@savvywombat/tailwindcss-grid-areas';
+import type { Config } from 'tailwindcss';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      gridTemplateAreas: {
+        onePlayerLandscape: ['player0 player0'],
+        onePlayerPortrait: ['player0', 'player0'],
+        twoPlayersOppositeLandscape: ['player0', 'player1'],
+        twoPlayersOppositePortrait: ['player0 player1', 'player0 player1'],
+        twoPlayersSameSideLandscape: ['player0 player1'],
+        threePlayers: ['player0 player0', 'player1 player2'],
+        threePlayersSide: [
+          'player0 player0 player0 player2',
+          'player1 player1 player1 player2',
+        ],
+        fourPlayerPortrait: [
+          'player0 player1 player1 player1 player1 player3',
+          'player0 player2 player2 player2 player2 player3',
+        ],
+        fourPlayer: ['player0 player1', 'player2 player3'],
+        fivePlayers: [
+          'player0 player0 player0 player1 player1 player1',
+          'player2 player2 player3 player3 player4 player4',
+        ],
+        fivePlayersSide: [
+          'player0 player0 player0 player0 player0 player1 player1 player1 player1 player1 player2',
+          'player3 player3 player3 player3 player3 player4 player4 player4 player4 player4 player2',
+        ],
+        sixPlayers: ['player0 player1 player2', 'player3 player4 player5'],
+        sixPlayersSide: [
+          'player0 player1 player1 player1 player1 player2 player2 player2 player2 player3',
+          'player0 player4 player4 player4 player4 player5 player5 player5 player5 player3',
+        ],
+      },
+      colors: {
+        primary: {
+          main: '#7F9172',
+          dark: '#57654F',
+        },
+        secondary: {
+          main: '#5E714C',
+        },
+        background: {
+          default: '#495E35',
+          backdrop: 'rgba(0, 0, 0, 0.3)',
+          settings: 'rgba(20, 20, 0, 0.9)',
+        },
+        text: {
+          primary: '#F5F5F5',
+          secondary: '#b3b39b',
+        },
+        action: {
+          disabled: '#5E714C',
+        },
+        common: {
+          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;
+//   }
+// `;
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,4 +10,8 @@ export default defineConfig({
      external: ['babel-plugin-macros'],
    },
  },
+  define: {
+    APP_VERSION: JSON.stringify(process.env.npm_package_version),
+    REPO_READ_ACCESS_TOKEN: JSON.stringify(process.env.REPO_READ_ACCESS_TOKEN),
+  },
 });
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Viktor Rådberg	4453b12ce6	bump	2024-01-13 20:32:10 +01:00
Viktor Rådberg	d601a820f8	remove log	2024-01-13 20:32:00 +01:00
Viktor Rådberg	0455f43794	test	2024-01-13 20:26:07 +01:00
Viktor Rådberg	f94103fe51	fix	2024-01-13 20:20:50 +01:00
Viktor Rådberg	c36668b933	fix	2024-01-13 20:20:20 +01:00
Viktor Rådberg	f9d0346300	bump	2024-01-13 20:18:50 +01:00
Viktor Rådberg	2f3ee74c74	test	2024-01-13 20:15:43 +01:00
Viktor Rådberg	f8f0788b97	bump	2024-01-13 19:53:02 +01:00
Viktor Rådberg	bfe25eacb7	fix lint	2024-01-13 19:44:27 +01:00
Viktor Rådberg	7b0965c0dd	test release	2024-01-13 19:40:36 +01:00
Viktor Rådberg	e55ea6a83a	final test	2024-01-13 19:32:16 +01:00
Viktor Rådberg	481196de9b	test	2024-01-13 19:30:42 +01:00
Viktor Rådberg	a136dbd3f9	test	2024-01-13 19:28:50 +01:00
Viktor Rådberg	8d23349dac	test	2024-01-13 19:27:25 +01:00
Viktor Rådberg	a7caa46156	test	2024-01-13 19:22:31 +01:00
Viktor Rådberg	39cd3faae2	test	2024-01-13 19:19:30 +01:00
Viktor Rådberg	bdaa8e602f	test	2024-01-13 19:18:45 +01:00
Viktor Rådberg	26490103a9	Merge pull request #30 from Vikeo/develop test pr	2024-01-13 19:14:03 +01:00
Viktor Rådberg	56b07784d5	fix	2024-01-13 19:13:34 +01:00
Viktor Rådberg	4544c689a5	test	2024-01-13 19:12:11 +01:00
Viktor Rådberg	8a7a4b4127	test	2024-01-13 19:11:49 +01:00
Viktor Rådberg	391e654779	test	2024-01-13 18:58:07 +01:00
Viktor Rådberg	f79a0d3e7e	test	2024-01-13 18:55:41 +01:00
Viktor Rådberg	0664e340a0	test	2024-01-13 18:49:06 +01:00
Viktor Rådberg	dcb98aeac6	test	2024-01-13 18:48:11 +01:00
Viktor Rådberg	89b62ddac4	release	2024-01-13 18:37:12 +01:00
Viktor Rådberg	c704e3c7f4	release workflow	2024-01-13 18:26:34 +01:00
Viktor Rådberg	69a71e2d6e	version check	2024-01-13 18:17:24 +01:00
Viktor Rådberg	18945204bf	test	2024-01-13 18:03:59 +01:00
Viktor Rådberg	495e731636	tet	2024-01-13 17:57:03 +01:00
Viktor Rådberg	67b231f0d4	more logs	2024-01-13 17:12:31 +01:00
Viktor Rådberg	9d42fb1635	check version	2024-01-13 17:07:03 +01:00
Viktor Rådberg	38ad046344	test	2024-01-13 15:39:56 +01:00
Viktor Rådberg	bc87f073af	test	2024-01-13 15:35:42 +01:00
Viktor Rådberg	da46c25944	test version update	2024-01-13 15:34:24 +01:00
Viktor Rådberg	104f54f5b7	Merge pull request #29 from Vikeo/develop Release 0.5.0	2024-01-13 15:13:52 +01:00
Viktor Rådberg	101a055694	bump version	2024-01-13 15:09:58 +01:00
Viktor Rådberg	38e4cb8e8c	dvh	2024-01-13 15:02:33 +01:00
Viktor Rådberg	4ecb83060d	fix webkit highlight	2024-01-13 14:55:39 +01:00
Viktor Rådberg	4f231ba6f4	finish up tailwind	2024-01-13 14:50:36 +01:00
Viktor Rådberg	3cd982c643	wip tailwind	2024-01-07 19:02:07 +01:00
Viktor Rådberg	1013914cdf	commander damage tailwind	2024-01-07 00:15:37 +01:00
Viktor Rådberg	db85fc2102	fix some tailwind	2024-01-06 19:45:25 +01:00
Viktor Rådberg	2b0d8102d8	fix version	2024-01-06 01:14:30 +01:00
Viktor Rådberg	35e0224066	fix backdrop	2024-01-06 00:47:21 +01:00
Viktor Rådberg	1fa433a38f	remove styled components global styles	2024-01-06 00:45:35 +01:00
Viktor Rådberg	26821273d7	Merge branch 'develop'	2023-12-27 21:39:59 +01:00
Viktor Rådberg	7f19214624	reload window	2023-12-27 21:39:50 +01:00
Viktor Rådberg	8b2cd43a96	Merge pull request #28 from Vikeo/develop New release	2023-12-27 21:31:40 +01:00
Viktor Rådberg	23e18f8f41	fix styling	2023-12-27 21:29:28 +01:00
Viktor Rådberg	23b844c47e	fix	2023-12-27 21:11:44 +01:00
Viktor Rådberg	6ade1998f6	fix	2023-12-27 21:08:43 +01:00
Viktor Rådberg	cc98a1b84a	test	2023-12-27 21:05:27 +01:00
Viktor Rådberg	2ca6b91d09	test	2023-12-27 21:03:22 +01:00
Viktor Rådberg	00bda4fb68	test	2023-12-27 20:54:22 +01:00
Viktor Rådberg	d09d992535	test	2023-12-27 20:52:34 +01:00
Viktor Rådberg	e96e4f3aa9	test	2023-12-27 20:50:57 +01:00
Viktor Rådberg	cb132360a9	test	2023-12-27 20:48:29 +01:00
Viktor Rådberg	66b0892461	revert	2023-12-27 20:42:57 +01:00
Viktor Rådberg	fdab09d598	fix	2023-12-27 20:41:30 +01:00
Viktor Rådberg	ec030e7076	remove local storage when initial settings is not correct	2023-12-27 20:39:13 +01:00
Viktor Rådberg	9812c6737c	add zod validation	2023-12-27 20:35:10 +01:00
Viktor Rådberg	e8528f46ae	remove console logs	2023-12-27 19:57:16 +01:00
Viktor Rådberg	4ff7f67484	Merge pull request #27 from Vikeo/tailwind-wip Tailwind wip	2023-12-27 19:56:38 +01:00
Viktor Rådberg	6e222995b6	finish	2023-12-27 19:53:11 +01:00
Viktor Rådberg	808c55109d	wip done	2023-12-27 19:49:38 +01:00
Viktor Rådberg	183fd9c079	template	2023-12-27 17:50:05 +01:00
Viktor Rådberg	ea2114e048	wip	2023-12-24 15:15:32 +01:00
Viktor Rådberg	bc97e459cd	Merge pull request #26 from Vikeo/develop style fixes	2023-12-24 14:48:14 +01:00
Viktor Rådberg	47251b6f7b	no right	2023-12-24 14:47:59 +01:00
Viktor Rådberg	77e8a79a35	add type	2023-12-24 14:44:13 +01:00
Viktor Rådberg	bdbea848d3	small style fix	2023-12-24 14:42:15 +01:00
Viktor Rådberg	3e2deca2f0	fix side recent difference rotation	2023-12-24 12:05:47 +01:00
Viktor Rådberg	866dca8e41	Merge pull request #25 from Vikeo/develop Change start menu header from h2 to h1	2023-10-01 19:01:12 +02:00
Viktor Rådberg	5859bb5a49	Merge pull request #24 from Vikeo/develop Release 0.4.0	2023-09-28 14:34:29 +02:00
Viktor Rådberg	20fb2153b3	Merge pull request #23 from Vikeo/develop Just another small release	2023-09-26 17:31:25 +02:00
Viktor Rådberg	75038212c5	Merge pull request #22 from Vikeo/develop Release 0.3.0	2023-09-22 14:39:31 +02:00
Viktor Rådberg	b712fb6e03	Merge pull request #21 from Vikeo/develop add button to go back to start if render fails	2023-09-18 22:32:46 +02:00
Viktor Rådberg	3d27335fd0	Merge pull request #20 from Vikeo/develop Add reset game button	2023-09-18 18:29:44 +02:00
Viktor Rådberg	18b53669d2	Merge pull request #19 from Vikeo/develop New Release	2023-09-18 14:01:27 +02:00
Viktor Rådberg	28954eb948	Merge pull request #18 from Vikeo/develop yarn instead of bun	2023-09-17 19:23:32 +02:00
Viktor Rådberg	3c59d5d05b	Merge pull request #17 from Vikeo/develop New release	2023-09-17 19:20:10 +02:00
Viktor Rådberg	22b58c74d6	Update start page text (#16 ) * fix z index of settings and lose button * update start page promt	2023-09-02 08:32:14 +02:00