Compare commits

...

23 Commits

Author SHA1 Message Date
Vikeo
6d3bf32e4b Add the blobs 2024-06-03 15:18:52 +02:00
Vikeo
df3c30da31 fix 2024-05-27 11:01:43 +02:00
Vikeo
5fff18e079 check if ios 2024-05-27 11:01:25 +02:00
Vikeo
7203f0170a hotfix 2024-05-27 10:59:09 +02:00
Vikeo
63fbceafe2 fix null state 2024-05-27 10:58:42 +02:00
Vikeo
2ec9998a2a show and hide things based on ios, add button for installing PWA 2024-05-27 10:47:59 +02:00
Vikeo
4b7b06ded3 fix lint 2024-05-26 16:19:04 +02:00
Vikeo
25794fe763 configure new icons 2024-05-26 16:12:48 +02:00
Vikeo
7e69d4fff0 add better custom icons 2024-05-26 16:12:19 +02:00
Vikeo
273b69b7a1 better spotlights 2024-05-25 12:13:27 +02:00
Vikeo
286239f6c9 other default colors 2024-05-25 12:02:35 +02:00
Vikeo
7aa04820e6 fix cross size 2024-05-24 23:56:41 +02:00
Vikeo
b19749adcc starting player blur 2024-05-24 23:42:53 +02:00
Vikeo
c74dcf7675 fix slider not updating immediately 2024-05-23 13:12:36 +02:00
Vikeo
b52c160905 debump 2024-05-23 13:08:20 +02:00
Vikeo
980d5203a9 bump 2024-05-23 13:07:14 +02:00
Vikeo
05bfc8c3d1 try fix 2024-05-23 13:03:28 +02:00
Vikeo
fb91ef3224 add glow on start menu 2024-05-23 12:55:02 +02:00
Vikeo
c3e8326be2 add glow animation to start menu 2024-05-23 12:54:42 +02:00
Vikeo
9bbe6cbb3b style sliders 2024-05-23 10:05:02 +02:00
Vikeo
739048044c update colors 2024-05-22 10:49:03 +02:00
Vikeo
4656757554 update info icon 2024-05-22 10:26:42 +02:00
Vikeo
9a6bfe49a1 fix player settings background colour 2024-05-22 00:23:38 +02:00
36 changed files with 663 additions and 322 deletions

View File

@@ -1,12 +1,12 @@
index.html,1711905710499,4b604b23faec8d63a58e07b96d724a1aea56a7c86d57c9af791832ce87a552e7
manifest.webmanifest,1711905710499,f2bf253209f6e292a6b0dbfa06fb4ac188eb5f2dba568c3ad5511b9ed52c1f51
manifest.json,1711905710294,7ff5111aa04a42adff3b38924ec467b6f345ed0309dba1486dc9b783b60c2a9d
sw.js,1711905711506,1ef2f4f40ec8dca15cc42d547462ade1e84314ea9722276f5994ccee7bbdf80f
robots.txt,1711905710294,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
registerSW.js,1711905710499,5b6445b5215737c53ef0d379c151d57de165a056de2d1c5812ed614f158ebcbd
workbox-3e911b1d.js,1711905711507,d5dbc868a5c07af633d29de7ba3ffe37542aaaabdf33713b4298df31f92f11ff
assets/index-7m_Zw4yH.css,1711905710499,37997d06b32b3d0c724c054913e3c0583b86f786358121cb1615e6646ff46b56
favicon.ico,1711905710294,8cefe5adbf00d337d8633fb744b9f2c4914f769b319be4bb7e184b7a4aa17160
logo192.png,1711905710294,3d1e2e6f064d4fd325828f21bb6493ff0dbf2390b0e7d2aba9f2b6def4829799
logo512.png,1711905710294,892a4da1cc5434929a83a71fcbcb0d0d80aa82f44e3c21e9b20ffe9267197133
assets/index-CLJVONOc.js,1711905710499,22f3835412f82bb3f8a62e74a7f4602a9c43b447224790365dbcc6cbffb4e665
index.html,1716800495173,a60a0d61bc25aa1eb4446d628875d96224860fbd767a11682a6c1db79b9403e2
manifest.webmanifest,1716800495173,10e89b44378da695cb672bf7d801a4ade909383751f1665416f561bbe1434e5d
manifest.json,1716800495051,91ce94afb71f33a477f5d8d48c3f98bd7de422279c74f17b6500eec72003ac1a
registerSW.js,1716800495173,8db45a5ae8765ce12ec241d6c5bd5d30eb81dd9163b2685c5e1b867a0e487018
robots.txt,1716800495051,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
sw.js,1716800496019,609c6e27a6431ece2081013efab535a218046977d97b8600a6f58ba7589373c1
logo192.png,1716800495050,14ac21c3975e11951c1eb7793eec18e1cc3274bfe7cf7858636d547a9a4efc1c
workbox-3e911b1d.js,1716800496020,666146b896084273226c83dca0b93f99accb195688330d6aa5c8c570bd48a4ac
assets/index-B0S3b36T.css,1716800495173,1eb1cb3d1dacc339354071ee052cdacc07d1c831c61e08b082518436f3463d83
favicon.ico,1716800495050,c3d2b7ac7f6263cca7ee26f91725eb32e7539bf0564f3b31a1bfc23cc88e9739
logo512.png,1716800495051,a9ebde1252bb76a5b474130ef07a7ed744448fde84221f715f3fec849eccbcd2
assets/index-2MMQ0HyH.js,1716800495173,f14516d3e15bb8fa5079d40fb7c1a7e0974d336340936bbed066d792ee1021e5

View File

@@ -1,7 +1,7 @@
{
"name": "life-trinket",
"private": true,
"version": "0.9.9",
"version": "0.9.96",
"type": "commonjs",
"engines": {
"node": ">=20",

View File

@@ -29,7 +29,7 @@ const ExtraCounterButton = twc.button`
`;
const IconContainer = twc.div<RotationDivProps>((props) => [
'w-auto',
'w-auto opacity-50',
props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
? 'rotate-[-90deg]'
: '',
@@ -126,8 +126,7 @@ const ExtraCounter = ({
}}
aria-label={`Player ${playerIndex} extra counter: ${type}`}
>
<IconContainer $rotation={rotation}>
{Icon}
<IconContainer $rotation={rotation}>{Icon}</IconContainer>
<TextContainer>
<OutlinedText
fontSize={fontSize}
@@ -137,7 +136,6 @@ const ExtraCounter = ({
{counterTotal ? counterTotal : undefined}
</OutlinedText>
</TextContainer>
</IconContainer>
</ExtraCounterButton>
</ExtraCounterContainer>
);

View File

@@ -23,6 +23,7 @@ const LifeCounterButtonTwc = twc.button`
items-center
select-none
webkit-user-select-none
opacity-50
`;
const TextContainer = twc.div<RotationButtonProps>((props) => [

View File

@@ -110,6 +110,8 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
<CommanderTax
size={iconSize}
data-contrast={iconColor}
strokeWidth={0}
stroke="transparent"
className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
/>
}

View File

@@ -1,5 +1,5 @@
import { useEffect } from 'react';
import { Cross } from '../../Icons/generated';
import { Close } from '../../Icons/generated';
import { useAnalytics } from '../../Hooks/useAnalytics';
import { Separator } from '../Misc/Separator';
@@ -42,9 +42,9 @@ export const Dialog: React.FC<{
analytics.trackEvent(`${id}_cross_clicked`);
dialogRef.current?.close();
}}
className="flex absolute -top-2 right-2 z-10 w-10 h-10 bg-primary-main items-center justify-center rounded-full border-solid border-primary-dark border-2"
className="flex absolute -top-2 right-2 z-10 w-10 h-10 bg-background-default rounded-full"
>
<Cross size="16px" className="text-text-primary" />
<Close className="text-primary-main size-full" />
</button>
<div className="bg-background-default rounded-2xl max-w-[548px] max-h-[80vh] flex flex-col">

View File

@@ -1,4 +1,11 @@
import { useAnalytics } from '../../Hooks/useAnalytics';
import {
CommanderTax,
Energy,
Experience,
PartnerTax,
Poison,
} from '../../Icons/generated';
import { BuyMeCoffee } from '../../Icons/generated/Support';
import { Separator } from '../Misc/Separator';
import { Paragraph } from '../Misc/TextComponents';
@@ -16,7 +23,35 @@ export const InfoDialog = ({
<h2 className="text-md underline">Contributors</h2>
<div className="flex flex-row items-center gap-1 text-sm">
{/* <Trinket className="size-4" /> */}
<a href="#">Elin:</a> Icon design
<div className="flex flex-col">
<div>
<a
href="https://github.com/Vikeo"
target="_blank"
className="text-text-secondary underline"
>
Vikeo
</a>
: Creator
</div>
<div>
<a href="#" className="text-text-secondary underline">
Elin
</a>
: Icon design
</div>
</div>
</div>
<div className="mt-2 text-text-primary">
Visit the{' '}
<a
href="https://github.com/Vikeo/LifeTrinket"
target="_blank"
className="text-text-secondary underline"
>
GitHub
</a>{' '}
to contribute or learn more about this web app.
</div>
<Separator height="1px" />
</div>
@@ -56,6 +91,25 @@ export const InfoDialog = ({
</li>
</ul>
<h3 className="text-lg font-bold mb-1">Other counter symbols</h3>
<ul className="list-disc ml-6 mb-4">
<li className="flex items-center">
<CommanderTax className="size-6" /> - Commander Tax
</li>
<li className="flex items-center">
<PartnerTax className="size-6" /> - Partner Tax
</li>
<li className="flex items-center">
<Poison className="size-6" /> - Poison
</li>
<li className="flex items-center">
<Energy className="size-6" /> - Energy
</li>
<li className="flex items-center">
<Experience className="size-6" /> - Experience
</li>
</ul>
<h3 className="text-lg font-bold mb-2">Other functionality</h3>
<ul className="list-disc ml-6">
<li>
@@ -74,20 +128,24 @@ export const InfoDialog = ({
</Paragraph>
</li>
</ul>
<h3 className="text-lg font-bold mb-2">Acknowledgements </h3>
<Paragraph>
LifeTrinket is unofficial Fan Content permitted under the{' '}
<a
href="https://company.wizards.com/en/legal/fancontentpolicy"
className="text-text-secondary underline"
target="_blank"
>
Fan Content Policy
</a>
. Not approved or endorsed by Wizards. Portions of the material or
concepts, such as "Commander", used are property of Wizards of the
Coast. ©Wizards of the Coast LLC.
</Paragraph>
</div>
</div>
<div className="text-center mt-4 text-text-primary">
Visit my{' '}
<a
href="https://github.com/Vikeo/LifeTrinket"
target="_blank"
className="text-text-secondary underline"
>
GitHub
</a>{' '}
for more info about this web app.
</div>
<div className="flex justify-center mt-4">
<a
className="flex flex-row items-center self-center border-none cursor-pointer bg-primary-main rounded-md mx-4 pr-4 pl-3 py-2 transition-colors duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark"

View File

@@ -2,6 +2,7 @@ import { twc } from 'react-twc';
import { useAnalytics } from '../../Hooks/useAnalytics';
import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
import { PreStartMode } from '../../Types/Settings';
import { InstallPWAButton } from '../Misc/InstallPWAButton';
import { Separator } from '../Misc/Separator';
import { Paragraph } from '../Misc/TextComponents';
import { ToggleButton } from '../Misc/ToggleButton';
@@ -11,7 +12,7 @@ const SettingContainer = twc.div`w-full flex flex-col mb-2`;
const ToggleContainer = twc.div`flex flex-row justify-between items-center -mb-1`;
const Description = twc.p`mr-16 text-xs text-left text-text-secondary`;
const Description = twc.p`mr-16 text-xs text-left text-text-secondary mt-1`;
const baseGithubReleasesUrl =
'https://github.com/Vikeo/LifeTrinket/releases/tag/';
@@ -135,7 +136,7 @@ export const SettingsDialog = ({
name="pre-start-modes"
id="pre-start-modes"
value={settings.preStartMode}
className="bg-primary-main border-none outline-none text-text-primary rounded-md p-1 text-xs disabled:bg-primary-dark"
className="bg-secondary-main border-none outline-none text-text-primary rounded-md p-1 text-xs disabled:saturate-50 font-semibold"
onChange={(e) => {
setSettings({
...settings,
@@ -201,11 +202,10 @@ export const SettingsDialog = ({
is enabled.
</Description>
</SettingContainer>
{(!window.isIOS || window.isIPad) && (
<SettingContainer>
<ToggleContainer>
<label>
Fullscreen on start <span className="text-xs">(Android only)</span>
</label>
<label>Fullscreen on start</label>
<ToggleButton
checked={settings.goFullscreenOnStart}
onChange={() => {
@@ -220,10 +220,32 @@ export const SettingsDialog = ({
Will enter fullscreen mode when starting a game if this is enabled.
</Description>
</SettingContainer>
)}
<SettingContainer>
<ToggleContainer>
<label>Show animations</label>
<ToggleButton
checked={settings.showAnimations}
onChange={() => {
setSettings({
...settings,
showAnimations: !settings.showAnimations,
});
}}
/>
</ToggleContainer>
<Description>
Disables the following animation:
<ul className="pl-1 list-inside">
<li className="list-disc">Glow effect on start menu</li>
</ul>
</Description>
</SettingContainer>
<Separator height="1px" />
<div className="flex w-full justify-center">
<button
className="mt-1 mb-1 bg-primary-main px-3 py-1 rounded-md duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark"
className="mt-1 mb-1 bg-primary-main px-3 py-1 rounded-md duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark font-bold"
onClick={() => {
analytics.trackEvent('settings_save_clicked');
dialogRef.current?.close();
@@ -233,24 +255,48 @@ export const SettingsDialog = ({
</button>
</div>
{!isPWA && (
<>
{window.isIOS && (
<>
<Separator height="1px" />
<SettingContainer>
<ToggleContainer>
<Paragraph>
<b>Tip:</b> You can{' '}
<b>add this webapp to your home page on iOS</b> or{' '}
<b>install it on Android</b> to have it act just like a normal
app!
<b>Tip:</b> You can <b>add this webapp to your home page</b>{' '}
to have it act just like a normal app!
</Paragraph>
</ToggleContainer>
<Description className="mt-1">
If you do, this app will work offline and the toolbar will be
automatically hidden.
If you do, this web app will work offline and the toolbar will
be automatically hidden.
</Description>
</SettingContainer>
</>
)}
{!window.isIOS && (
<>
<Separator height="1px" />
<SettingContainer>
<ToggleContainer>
<Paragraph>
<b>Tip:</b> You can <b>install this page as a PWA</b> to
have it act just like a normal app!
</Paragraph>
</ToggleContainer>
<Description className="mt-1">
If you do, this web app will work offline and the toolbar will
be automatically hidden. PWA stands for Progressive Web
Application
</Description>
</SettingContainer>
<div className="flex w-full justify-center">
<InstallPWAButton />
</div>
</>
)}
</>
)}
<Separator height="1px" />
</Dialog>
);

View File

@@ -19,7 +19,7 @@ import { StartingPlayerCard } from '../PreStartGame/StartingPlayerCard';
import Health from './Health';
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',
'absolute flex-grow border-none outline-none cursor-pointer bg-transparent z-[1] select-none webkit-user-select-none opacity-50',
props.$rotation === Rotation.Side || props.$rotation === Rotation.SideFlipped
? `right-auto top-[1vmax] left-[27%]`
: 'top-1/4 right-[1vmax]',

View File

@@ -0,0 +1,45 @@
import { useEffect, useRef, useState } from 'react';
import { BeforeInstallPromptEvent } from '../../global';
import { useAnalytics } from '../../Hooks/useAnalytics';
export const InstallPWAButton = () => {
const supportsPWARef = useRef<boolean>(false);
const [promptInstall, setPromptInstall] =
useState<BeforeInstallPromptEvent | null>(null);
const analytics = useAnalytics();
const handler = (e: BeforeInstallPromptEvent) => {
e.preventDefault();
supportsPWARef.current = true;
setPromptInstall(e);
};
useEffect(() => {
window.addEventListener('beforeinstallprompt', handler);
return () => window.removeEventListener('transitionend', handler);
}, []);
if (!supportsPWARef.current) {
return null;
}
return (
<button
className="mt-1 mb-1 bg-primary-main px-3 py-1 rounded-md duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark font-bold"
aria-label="Install app"
title="Install app"
onClick={(e) => {
e.preventDefault();
if (!promptInstall) {
return;
}
analytics.trackEvent('install_pwa_prompt_shown');
promptInstall.prompt();
}}
>
Install as a PWA
</button>
);
};

View File

@@ -1,6 +1,6 @@
import { twc } from 'react-twc';
export const Paragraph = twc.p`text-text-primary;`;
export const Paragraph = twc.p`text-text-primary`;
// eslint-disable-next-line react-refresh/only-export-components
export const H1 = twc.h1`text-text-primary;`;

View File

@@ -5,7 +5,7 @@ import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
import { usePlayers } from '../../Hooks/usePlayers';
import { useSafeRotate } from '../../Hooks/useSafeRotate';
import {
Cross,
Close,
Energy,
Exit,
Experience,
@@ -24,8 +24,7 @@ const PlayerMenuWrapper = twc.div`
flex
flex-col
absolute
w-full
h-full
size-full
bg-background-settings
backdrop-blur-[3px]
items-center
@@ -193,9 +192,9 @@ const PlayerMenu = ({
analytics.trackEvent('close_player_menu_button');
setShowPlayerMenu(false);
}}
className="flex absolute top-0 right-2 z-10 bg-transparent items-center justify-center rounded-full border-solid border-primary-main border-2 p-[0.2rem]"
className="flex absolute top-2 right-2 z-10"
>
<Cross size={buttonFontSize} className="text-primary-main " />
<Close size={iconSize} className="text-primary-main" />
</button>
<BetterRowContainer>
@@ -223,7 +222,7 @@ const PlayerMenu = ({
size={extraCountersSize}
color="black"
stroke="white"
strokeWidth="30"
strokeWidth="1"
/>
}
checkedIcon={
@@ -231,7 +230,9 @@ const PlayerMenu = ({
size={extraCountersSize}
color={player.color}
stroke="white"
strokeWidth="30"
strokeWidth="1"
strokeLinejoin="round"
strokeLinecap="round"
/>
}
onChange={(e) => {
@@ -254,7 +255,7 @@ const PlayerMenu = ({
size={extraCountersSize}
color="black"
stroke="white"
strokeWidth="30"
strokeWidth="2"
/>
}
checkedIcon={
@@ -262,7 +263,9 @@ const PlayerMenu = ({
size={extraCountersSize}
color={player.color}
stroke="white"
strokeWidth="30"
strokeWidth="2"
strokeLinejoin="round"
strokeLinecap="round"
/>
}
onChange={(e) => {
@@ -284,7 +287,7 @@ const PlayerMenu = ({
size={extraCountersSize}
color="black"
stroke="white"
strokeWidth="15"
strokeWidth={2.2}
/>
}
checkedIcon={
@@ -292,7 +295,7 @@ const PlayerMenu = ({
size={extraCountersSize}
color={player.color}
stroke="white"
strokeWidth="15"
strokeWidth={2.2}
/>
}
onChange={(e) => {
@@ -314,7 +317,7 @@ const PlayerMenu = ({
size={extraCountersSize}
color="black"
stroke="white"
strokeWidth="15"
strokeWidth={2.5}
/>
}
checkedIcon={
@@ -322,7 +325,7 @@ const PlayerMenu = ({
size={extraCountersSize}
color={player.color}
stroke="white"
strokeWidth="15"
strokeWidth={2.5}
/>
}
onChange={(e) => {
@@ -344,6 +347,7 @@ const PlayerMenu = ({
>
<Exit size={iconSize} style={{ rotate: '180deg' }} />
</button>
{(!window.isIOS || window.isIPad) && (
<div
data-fullscreen={document.fullscreenElement ? true : false}
className="flex
@@ -361,13 +365,17 @@ const PlayerMenu = ({
/>
}
checkedIcon={
<FullscreenOn size={iconSize} className="text-primary-main" />
<FullscreenOn
size={iconSize}
className="text-primary-main"
/>
}
onChange={toggleFullscreen}
aria-checked={document.fullscreenElement ? true : false}
aria-label="Fullscreen"
/>
</div>
)}
<button
data-wake-lock-active={settings.keepAwake}

View File

@@ -122,7 +122,7 @@ export const Trivia = () => {
return (
<div
className="absolute flex justify-center items-center w-full h-full portrait:h-[100dvw] portrait:w-[100dvh] z-50 bg-primary-main overflow-hidden"
className="absolute flex justify-center items-center w-full h-full portrait:h-[100dvw] portrait:w-[100dvh] z-50 bg-primary-dark overflow-hidden"
onClick={() => setPlaying(true)}
>
<button
@@ -146,7 +146,7 @@ export const Trivia = () => {
<div className="size-full flex flex-col justify-between items-center whitespace-nowrap pointer-events-none webkit-user-select-none text-wrap text-center py-[10vmin] px-[10vmax]">
<div className="text-[6vmin]">Decide who starts by answering:</div>
<div className="flex flex-col">
<div className="text-[8vmin] rotate-180 text-text-primary opacity-40">
<div className="text-[8vmin] rotate-180 text-text-primary opacity-60">
{randomQuestion}
</div>
<div className="text-[8vmin]">{randomQuestion}</div>

View File

@@ -1,5 +1,4 @@
import { twc } from 'react-twc';
import { baseColors } from '../../../tailwind.config';
import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
import { Player, Rotation } from '../../Types/Player';
import { PreStartMode } from '../../Types/Settings';
@@ -24,15 +23,9 @@ export const StartingPlayerCard = ({ player }: { player: Player }) => {
return (
<div
className="z-20 flex absolute w-full h-full justify-center items-center select-none cursor-pointer webkit-user-select-none"
className="z-20 flex absolute w-full h-full justify-center items-center select-none cursor-pointer webkit-user-select-none backdrop-blur-xl"
style={{
rotate: `${calcRotation}deg`,
backgroundImage:
!randomizingPlayer ||
(settings.preStartMode !== PreStartMode.None &&
settings.preStartMode !== PreStartMode.FingerGame)
? `radial-gradient(circle at center, ${player.color}, ${baseColors.primary.main})`
: 'none',
}}
onClick={() => {
setPlaying(true);
@@ -43,7 +36,7 @@ export const StartingPlayerCard = ({ player }: { player: Player }) => {
rotate: `${calcTextRotation}deg`,
}}
>
<div className="flex flex-col justify-center items-center">
<div className="flex flex-col justify-center items-center text-text-primary font-semibold">
<Paragraph>👑</Paragraph>
{(!randomizingPlayer ||
(settings.preStartMode !== PreStartMode.None &&

View File

@@ -12,10 +12,11 @@ import {
defaultInitialGameSettings,
} from '../../../Types/Settings';
import { LayoutOptions } from './LayoutOptions';
import { baseColors } from '../../../../tailwind.config';
import { InfoDialog } from '../../Dialogs/InfoDialog';
import { SettingsDialog } from '../../Dialogs/SettingsDialog';
import { ToggleButton } from '../../Misc/ToggleButton';
import { LayoutOptions } from './LayoutOptions';
const commanderSettings: Pick<
InitialGameSettings,
@@ -35,9 +36,9 @@ const standardSettings: Pick<
orientation: Orientation.Landscape,
};
const MainWrapper = twc.div`h-fit w-full pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10`;
const MainWrapper = twc.div`h-fit w-full pb-24 overflow-hidden items-center flex flex-col min-[349px]:pb-10 z-10`;
const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-1 items-center flex flex-row flex-wrap px-4 z-10 gap-4`;
const StartButtonFooter = twc.div`w-full max-w-[548px] fixed bottom-4 z-10 items-center flex flex-row flex-wrap px-4 gap-4`;
const SliderWrapper = twc.div`mx-8 relative`;
@@ -67,6 +68,8 @@ const Start = () => {
const infoDialogRef = useRef<HTMLDialogElement | null>(null);
const settingsDialogRef = useRef<HTMLDialogElement | null>(null);
const playersSliderRef = useRef<HTMLInputElement | null>(null);
const healthSliderRef = useRef<HTMLInputElement | null>(null);
const [playerOptions, setPlayerOptions] = useState<InitialGameSettings>(
initialGameSettings || defaultInitialGameSettings
@@ -81,6 +84,68 @@ const Start = () => {
}
});
useEffect(() => {
if (!playersSliderRef.current) {
return;
}
let progress = 0;
switch (playerOptions?.numberOfPlayers) {
case 1:
progress = 0;
break;
case 2:
progress = 20;
break;
case 3:
progress = 40;
break;
case 4:
progress = 60;
break;
case 5:
progress = 80;
break;
case 6:
progress = 100;
break;
default:
break;
}
playersSliderRef.current.style.background = `linear-gradient(to right, ${baseColors.secondary.main} ${progress}%, ${baseColors.secondary.dark} ${progress}%)`;
}, [playerOptions?.numberOfPlayers]);
useEffect(() => {
if (!healthSliderRef.current) {
return;
}
let progress = 0;
switch (playerOptions?.startingLifeTotal) {
case 20:
progress = 0;
break;
case 30:
progress = 25;
break;
case 40:
progress = 50;
break;
case 50:
progress = 75;
break;
case 60:
progress = 100;
break;
default:
break;
}
healthSliderRef.current.style.background = `linear-gradient(to right, ${baseColors.secondary.main} ${progress}%, ${baseColors.secondary.dark} ${progress}%)`;
}, [playerOptions?.startingLifeTotal]);
useEffect(() => {
setInitialGameSettings(playerOptions);
}, [playerOptions, setInitialGameSettings]);
@@ -171,9 +236,15 @@ const Start = () => {
return (
<>
<InfoDialog dialogRef={infoDialogRef} />
{settings.showAnimations && (
<div className="blob-container">
<div className="spotlight1" />
<div className="spotlight2" />
</div>
)}
<SettingsDialog dialogRef={settingsDialogRef} />
<div className="flex justify-center items-center w-screen">
<div className="flex justify-center items-center w-screen z-10">
<MainWrapper>
<Info
className="size-8 absolute top-7 left-4 text-primary-main"
@@ -225,7 +296,7 @@ const Start = () => {
className="flex justify-center self-center items-center mt-1 mb-1 bg-primary-main px-3 py-2 rounded-md transition-colors duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark"
onClick={openSettings}
>
<span className="text-sm flex flex-row items-center text-text-primary">
<span className="text-sm flex flex-row items-center text-text-primary font-bold">
<Cog />
&nbsp;Game Settings
</span>
@@ -250,6 +321,7 @@ const Start = () => {
<LabelText className="mt-4">Number of Players</LabelText>
<SliderWrapper>
<input
ref={playersSliderRef}
className="accent-primary-main text-primary-dark w-full h-3 rounded-lg cursor-pointer"
title="Number of Players"
type="range"
@@ -264,7 +336,7 @@ const Start = () => {
});
}}
/>
<div className="flex w-full justify-between px-1 text-text-primary pointer-events-none">
<div className="flex w-full justify-between px-[6px] text-text-primary pointer-events-none">
<div>1</div>
<div>2</div>
<div>3</div>
@@ -277,6 +349,7 @@ const Start = () => {
<LabelText className="mt-4">Starting Health</LabelText>
<SliderWrapper>
<input
ref={healthSliderRef}
className="accent-primary-main text-primary-dark w-full h-3 rounded-lg cursor-pointer"
title="Starting Health"
type="range"
@@ -293,7 +366,7 @@ const Start = () => {
})
}
/>
<div className="flex w-full justify-between px-1 text-text-primary pointer-events-none">
<div className="flex w-full justify-between text-text-primary pointer-events-none">
<div>20</div>
<div>30</div>
<div>40</div>
@@ -314,7 +387,7 @@ const Start = () => {
}}
/>
</div>
{!isPWA && (
{!isPWA && window.isIOS && (
<p className="text-center text-xs text-text-primary w-11/12 mt-4">
If you're on iOS, this page works better if you{' '}
<strong>hide the toolbar</strong> or{' '}
@@ -325,7 +398,7 @@ const Start = () => {
<StartButtonFooter>
<button
className="flex flex-grow basis-0 justify-center self-center items-center bg-primary-main px-3 py-2 rounded-md text-text-primary min-w-[150px] duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark"
className="flex flex-grow basis-0 justify-center self-center items-center bg-primary-main px-3 py-2 rounded-md text-text-primary min-w-[150px] duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark font-bold"
onClick={doStartNewGame}
>
NEW GAME
@@ -335,7 +408,7 @@ const Start = () => {
<button
className="flex flex-grow basis-0 justify-center self-center items-center bg-secondary-main px-3 py-2 rounded-md text-text-primary min-w-[150px]
duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-secondary-dark"
duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-secondary-dark font-bold"
onClick={doResumeGame}
>
RESUME&nbsp;

View File

@@ -2,14 +2,14 @@ import { Player, Rotation } from '../Types/Player';
import { InitialGameSettings, Orientation } from '../Types/Settings';
export const presetColors = [
'#F06292', // Light Pink
'#4DB6AC', // Teal
'#FFA726', // Orange
'#7986CB', // Indigo
'#FFCC80', // Peach
'#90CAF9', // Pastel Blue
'#CE93D8', // Lilac
'#FF8A80', // Coral
'#D08182', // Muted Pink
'#5AAB9E', // Teal
'#D58B5A', // Burnt Orange
'#697A9A', // Soft Indigo
'#78B2D3', // Pastel Blue
'#A785BA', // Lilac
'#D9C17C', // Muted Yellow
'#FF907F', // Light Coral
];
const getOrientationRotations = (

View File

@@ -0,0 +1,45 @@
import PropTypes from 'prop-types';
import { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
size?: string;
}
const Close = ({
title,
titleId,
...props
}: SVGProps<SVGSVGElement> & SVGRProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size || 16}
height={props.size || 16}
fill="currentColor"
viewBox="0 0 52 52"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
fillRule="evenodd"
d="M26 48c12.15 0 22-9.85 22-22S38.15 4 26 4 4 13.85 4 26s9.85 22 22 22m0 4c14.36 0 26-11.64 26-26S40.36 0 26 0 0 11.64 0 26s11.64 26 26 26"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M15.586 15.586a2 2 0 0 1 2.828 0l18 18a2 2 0 1 1-2.828 2.828l-18-18a2 2 0 0 1 0-2.828"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M36.414 15.586a2 2 0 0 1 0 2.828l-18 18a2 2 0 1 1-2.828-2.828l18-18a2 2 0 0 1 2.828 0"
clipRule="evenodd"
/>
</svg>
);
};
Close.propTypes = {
title: PropTypes.string,
};
export default Close;

View File

@@ -16,13 +16,16 @@ const CommanderTax = ({
width={props.size || 16}
height={props.size || 16}
fill="currentColor"
paintOrder="stroke fill markers"
viewBox="0 0 524 524"
viewBox="0 0 52 52"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M256 23.9c-1.9.4-5.5 1.8-7.9 3.2-5.1 2.8-130.3 133.3-135.8 141.5-5.4 8.1-7.5 14.7-8.1 25.5-.5 11.3.7 17.6 5.2 26.9 3.7 7.8 13.8 18.4 21.1 22.1 2.8 1.4 20.4 7.5 39.3 13.4 18.8 6 33.7 11.2 33 11.6-.7.3-24.2 9.3-52.3 19.9-32.8 12.4-52.9 20.5-56.3 22.7-6 4-12 10.7-15.6 17.4-1.5 2.7-9.7 31.1-20.6 71.5C41.3 461.3 39.9 467 40.3 473c.9 12.3 7.2 21.7 18.5 27.2l6.7 3.3H262c190.8 0 196.7-.1 202-1.9 7.5-2.6 15.9-11 18.8-18.9 4.1-10.8 3.9-11.8-15.3-81.5-9.6-35-18.7-66.6-20.2-70.1-3.4-8.3-13-18.6-21-22.8-3.2-1.7-27.9-11.5-55-21.9s-48.9-19.2-48.5-19.5c.4-.4 15.1-5.3 32.7-10.8 17.6-5.6 34.5-11.4 37.5-12.9 11.4-5.6 23-20.5 25.9-33.2 2.7-11.5.7-27.5-4.7-37.3-3.6-6.7-5.2-8.5-73.7-80.2-45.1-47.2-61.4-63.7-65.1-65.7-5.3-2.8-13.7-4.1-19.4-2.9m32.5 97.6c9.3 1.8 31.6 8.3 32.9 9.5 1.6 1.5-12.1 43.6-18.3 56.5-6 12.3-16.1 27.7-22.6 34.7-7.3 7.7-16.8 10.3-26.6 7.5-7.3-2.2-11.4-5.8-19.6-17.4-16.1-22.8-22.4-36.2-29.9-64.3-2.4-9-4.1-16.7-3.6-17 2.3-2.1 30.7-9.3 44.7-11.4 6.3-.9 35.2.3 43 1.9M325.1 225l62.1-31.1-.7 3.3c-1 4.7-2.1 6.4-5.8 9.1-1.7 1.3-28.8 16-60.1 32.7-51.8 27.7-57.1 30.2-59.6 29.3-5.3-2-114.5-60.6-116.9-62.7-2.5-2.2-5.1-7.4-5.1-10.1 0-1.1 18.7 7.8 62 29.5l61.9 31zm-194 131.4c1.1 3 .1 11.2-8.7 69.9-5.4 36.7-10.2 66.3-10.5 65.9-.4-.4-3-8-5.8-16.9l-5.1-16.2 11-57.8c6.1-31.8 11.4-58.5 11.6-59.3.5-1.4 4.6 6.4 7.5 14.4m280.8 44.2 11.2 58.1-5.2 16.6c-2.9 9.2-5.6 16.4-6 15.9-.3-.4-5-30.4-10.4-66.7l-9.8-66 3.9-8.7c2.2-4.8 4.2-8.4 4.5-8 .4.4 5.7 26.8 11.8 58.8" />
<path
fillRule="evenodd"
d="M13.856 22.918c-2.404-1.215-2.98-4.403-1.131-6.362L24.546 4.04a2 2 0 0 1 2.908 0l11.848 12.544c1.842 1.95 1.28 5.125-1.12 6.325L37 23.5 31.5 26l8.735 3.744a4 4 0 0 1 2.279 2.606l3.782 13.615a2 2 0 0 1-1.927 2.535H7.63a2 2 0 0 1-1.927-2.535L9.486 32.35a4 4 0 0 1 2.279-2.606L20.5 26s-3.4-1.424-5.5-2.5c-.36-.185-.747-.381-1.144-.582M28 11.5c.945.199 2.14.773 2.86 1.15a.92.92 0 0 1 .466 1.054C30.769 15.824 28.899 22 26 22c-2.9 0-4.77-6.176-5.326-8.296a.92.92 0 0 1 .466-1.054c.72-.377 1.915-.951 2.86-1.15 1.529-.322 2.471-.322 4 0m9.062 23.387a1 1 0 0 1 .155-.713L38 33l2.42 10.651a1 1 0 0 1-.08.669L39 47zM16 19.5l.232.464a2 2 0 0 0 .787.836l8.48 4.91a1 1 0 0 0 1.002 0l8.48-4.91a2 2 0 0 0 .787-.836L36 19.5l-9.553 4.776a1 1 0 0 1-.894 0zm-4.34 24.82a1 1 0 0 1-.08-.669L14 33l.783 1.174a1 1 0 0 1 .155.713L13 47z"
clipRule="evenodd"
/>
</svg>
);
};

View File

@@ -15,14 +15,16 @@ const Energy = ({
xmlns="http://www.w3.org/2000/svg"
width={props.size || 16}
height={props.size || 16}
viewBox="0 0 524 524"
fill="currentColor"
viewBox="0 0 52 52"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
fill="currentColor"
d="M115 56.7c0 43.4-3.9 70.1-15.2 105.3-13.2 41.2-31 72.7-64.7 114.9-9.4 11.8-16.8 21.8-16.4 22.1.5.4 15.9 7.1 34.3 15 45.7 19.5 62.7 28.1 85.5 43.3 20.7 13.8 37.9 28 56 46.2 25.5 25.5 37.6 41.5 64.9 86.1l2.8 4.7 4.2-6.7c23.6-38.7 58.8-78.7 94.3-107.4 36.6-29.6 69.6-48.8 120.8-70.6 12.7-5.4 23.4-10.2 23.8-10.6.5-.4-6.1-9.5-14.6-20.1-18.3-23.1-25-32.4-34.6-48.3-22.9-38.1-38.1-82-44.6-128.6-1.1-7.4-1.8-22.4-2.2-41.8l-.6-30.3-2.6.5c-1.4.3-24.6 4.1-51.6 8.5-92 15-94.4 15-199.8-2.5-21.3-3.5-39-6.4-39.2-6.4-.3 0-.5 12-.5 26.7m129 28.7c14.8 6.1 22.9 7.8 39.5 8.3 13.2.4 16.9.2 30.8-2.2 8.7-1.5 16-2.6 16.2-2.4s-4 4-9.2 8.4c-19.6 16.6-37.7 36.8-50.7 56.6-9.5 14.7-24.6 45.4-24.6 50.2 0 1 3.2 1.8 12.3 3 42.6 5.8 64 5.9 108 .6 9.3-1.1 17-1.9 17.2-1.7s-7.6 9.3-17.2 20.3c-28.6 32.6-40.9 48.8-55.3 72.5-10.5 17.4-14.4 26.9-26.6 64-6.3 19.5-13.9 42.7-16.8 51.5l-5.3 16-.9-28c-1.2-36.9-1-59 .5-70 2.3-17.3 7.5-35.6 15.1-53.8 4.5-10.5 3.9-11.7-6.9-14.6-22.9-6.2-71.6-4.5-114.5 3.9-8.3 1.6-15.1 2.8-15.3 2.6-.2-.1 3-4.1 7-8.7 31.2-35.8 55.4-78.7 69.6-123.3 2.1-6.6 6.4-22.4 9.6-34.9 4.8-18.9 6.1-22.8 7.4-22.3.9.2 5.4 2 10.1 4"
fillRule="evenodd"
d="M18.9 3.05c.243-.654.912-1.08 1.647-1.048l15.16.651c1.284.055 2.019 1.4 1.318 2.413L26.463 20.34l15.006 1.135c1.242.093 1.937 1.392 1.276 2.386l-16.891 25.4c-.972 1.46-3.374.586-3.046-1.11l3.55-18.305-15.494 1.758c-1.221.138-2.174-.974-1.77-2.066z"
clipRule="evenodd"
/>
</svg>
);

View File

@@ -15,14 +15,17 @@ const Experience = ({
xmlns="http://www.w3.org/2000/svg"
width={props.size || 16}
height={props.size || 16}
viewBox="0 0 524 524"
fill="currentColor"
viewBox="0 0 52 52"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<g fill="currentColor">
<path d="M24.2 73.7c14 18.5 27.2 42.3 30.4 55.3 2.8 11.1 1.5 23.8-6.1 58.5-15 69-16.8 93.2-7.9 111.3 8.7 17.8 45 48.1 121.5 101.4 23.5 16.4 84.8 56.8 86.2 56.8.4 0 .6-64.2.5-142.6l-.3-142.6-7-2.2c-25.3-8-38.8-24.2-41.1-49-.8-8.6 1.4-20.7 5.2-29.4 1.3-3 2.1-5.9 1.7-6.3-.5-.4-9-4.6-19-9.3L170.1 67h-151zM334.3 76c-10.1 4.9-18.3 9.1-18.3 9.3 0 .3 1.1 2.9 2.4 5.8 3.7 8.5 5.1 15.7 5 25.9-.1 16.1-4.7 27.6-15 37.7-6.9 6.8-18.7 13.3-28.1 15.4l-5.3 1.2v142.9c0 78.5.3 142.8.8 142.8.4 0 11.8-7.3 25.4-16.3C409.9 369.3 469 323.6 482.5 300.6c9.9-16.9 8.4-41.8-6.6-111.1-8.5-39-9.6-50.6-5.9-62.6 4.3-14.5 13.5-31.3 27-49.5 3.9-5.2 7-9.6 7-9.9s-34.1-.5-75.7-.4l-75.8.1z" />
</g>
<path
fillRule="evenodd"
d="m24.104 9.28.855.386.04.923v.016l.002.04a30 30 0 0 1 .017.637c.006.38.007.894-.022 1.32-.119 1.762-.87 3.038-1.442 4.011l-.083.143c-.596 1.017-.971 1.733-.971 2.744 0 1.241.626 2.945 1.303 4.373.694 1.463 1.197 3.12 1.197 4.875 0 5.155-.526 10.296-1.571 15.343l-.38 1.84-.023-.008-.058-.018-.214-.07a61.78 61.78 0 0 1-3.344-1.222c-1.98-.79-4.494-1.922-6.247-3.199-2.474-1.802-4.341-3.56-5.758-5.606-1.421-2.053-2.336-4.32-3.009-7.07-.592-2.421-.199-4.073.175-5.627l.01-.042c.348-1.448.695-2.89.413-5.254-.09-.758-.335-1.558-.653-2.427-.095-.26-.203-.542-.315-.832a31 31 0 0 1-.65-1.8c-.267-.857-.5-1.892-.302-2.916.222-1.144.932-2.047 2.07-2.657 1.796-.964 3.931-1.233 5.994-1.176 2.08.058 4.217.45 6.117.933a46.6 46.6 0 0 1 6.85 2.34M29.939 9.28l-.855.386-.04.923v.016l-.002.04a20 20 0 0 0-.017.637c-.006.38-.007.894.022 1.32.119 1.762.87 3.038 1.442 4.011l.083.143c.596 1.017.971 1.733.971 2.744 0 1.241-.626 2.945-1.303 4.373-.694 1.463-1.197 3.12-1.197 4.875a75.7 75.7 0 0 0 1.571 15.343l.38 1.84.023-.008.058-.018.214-.07a61.776 61.776 0 0 0 3.344-1.222c1.98-.79 4.494-1.922 6.247-3.199 2.474-1.802 4.34-3.56 5.758-5.606 1.421-2.053 2.336-4.32 3.008-7.07.593-2.421.2-4.073-.174-5.627l-.01-.042c-.349-1.448-.695-2.89-.413-5.254.09-.758.335-1.558.653-2.427.095-.26.203-.542.315-.832.23-.599.473-1.235.65-1.8.267-.857.5-1.892.302-2.916-.222-1.144-.932-2.047-2.07-2.657-1.796-.964-3.931-1.233-5.994-1.176-2.08.058-4.218.45-6.117.933a46.6 46.6 0 0 0-6.71 2.28z"
clipRule="evenodd"
/>
</svg>
);
};

View File

@@ -15,15 +15,17 @@ const Info = ({
xmlns="http://www.w3.org/2000/svg"
width={props.size || 16}
height={props.size || 16}
viewBox="0 0 524 524"
fill="currentColor"
viewBox="0 0 52 52"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<g fill="currentColor">
<path d="M236.7 33.5c-28.8 3.6-51.4 10.2-75.4 22C92.7 89.2 46.2 152.7 34.4 229c-2.5 16-2.5 50 0 66C46 370 91.6 433.3 158.5 467.2c32.9 16.7 65.2 24.3 103.5 24.3 22.1 0 34.2-1.4 54.5-6.2 31.1-7.3 65.4-24.3 90.8-45.2 9.1-7.4 27-25.5 34.3-34.6 25-31.3 41.8-70.1 48-111 2.5-16.4 2.5-48.3 0-65-11.4-76.2-58.6-140.8-126.9-174-23.2-11.2-42.1-17.1-67.7-21-14.5-2.2-44.7-2.8-58.3-1M294 78.9c74.6 13.2 133.6 70.2 149.6 144.4 8.6 40.3 3.5 82-14.6 119.3C390.5 422 302.6 463 216.5 441.9c-88.7-21.8-148.8-107.6-139.4-199 7.3-71.5 56.7-133.8 124.4-156.8 12.2-4.1 27.1-7.4 40.5-9.1 11.8-1.4 38.8-.4 52 1.9" />
<path d="M246.5 112c-20.8 2-36.2 8.6-48.5 21.1-11.5 11.6-19.3 26.4-27.5 52-3.4 10.6-3.6 11.9-2.4 14.4 2 4.1 5.8 6.5 11.4 7.1 7.4.9 9.2-1 17.8-19 14.9-30.8 25.7-41.9 46-47.3 8.4-2.3 29.8-2.2 38.6.1 21.2 5.5 34.6 19.5 35.9 37.6.8 11.1-2.3 16.4-20.5 35.2-26 26.8-38 45.6-44.2 69.2-3 11.3-4.6 31.6-3.6 46 .7 11.3.9 12.1 3.5 14.8 2.6 2.5 3.5 2.8 9.5 2.8 5.7 0 6.9-.3 9-2.5 1.4-1.3 2.5-3.2 2.6-4.2s.2-9.9.3-19.8c.2-20.3 1.6-28.1 7.1-40.2 7.6-16.6 23.7-36 42.5-51.3 22.4-18.2 28.1-27.9 28-47.8-.1-19.8-6.1-35.4-17.9-46.5-8.6-8.1-14.8-11.8-26.6-15.7-16.5-5.4-41.3-7.8-61-6M252.4 372.9c-4.2 1.8-5.4 5-5.4 13.9 0 4.6.5 9.2 1 10.3 1.8 3.3 6.4 4.9 14 4.9 12.6 0 15.5-3.3 14.9-16.9-.6-11.3-1.9-12.5-13.7-12.8-4.8-.2-9.7.1-10.8.6" />
</g>
<path
fillRule="evenodd"
d="M26 48c12.15 0 22-9.85 22-22S38.15 4 26 4 4 13.85 4 26s9.85 22 22 22m0 4c14.36 0 26-11.64 26-26S40.36 0 26 0 0 11.64 0 26s11.64 26 26 26m-4.191-36.87-.264.172c-2.513 1.644-2.671 5.27-.31 7.125a2 2 0 1 1-2.47 3.146c-4.514-3.547-4.213-10.477.591-13.619l.264-.172a11.66 11.66 0 0 1 12.76 0l.77.503c4.556 2.98 4.841 9.551.561 12.914-.422.332-.877.62-1.357.86l-.54.27A6.9 6.9 0 0 0 28 32.5a2 2 0 1 1-4 0 10.9 10.9 0 0 1 6.025-9.748l.54-.27q.36-.18.675-.428c2.128-1.672 1.986-4.94-.28-6.421l-.769-.503a7.66 7.66 0 0 0-8.382 0M26 42a3 3 0 1 0 0-6 3 3 0 0 0 0 6"
clipRule="evenodd"
/>
</svg>
);
};

View File

@@ -16,13 +16,21 @@ const PartnerTax = ({
width={props.size || 16}
height={props.size || 16}
fill="currentColor"
paintOrder="stroke fill markers"
viewBox="0 0 524 524"
viewBox="0 0 52 52"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M196.7 79.1c-2.1.5-5 1.5-6.5 2.3-3.3 1.8-17.6 16.3-59.3 60.1-60 63.1-60.2 63.3-62.2 78.5-1.7 13.3 1.4 24.2 10 34.7 6.5 7.9 10.6 9.9 40.8 19.8 29.9 9.8 33 11 30.5 11.9-.8.3-8 3.1-16 6.1-8 3.1-19.7 7.5-26 9.9-20.7 7.9-40.3 15.7-45 18.1-2.6 1.3-7.2 5.1-10.2 8.4-6.6 7.1-7.2 8.7-17.9 47.6-19.1 69.1-21.3 78.3-20.3 84.8 1.6 9.6 7.1 16.9 16.3 21.7l4 2 233.6-.2 233.7-.3 3.3-3.7c5.2-5.6 5.3-7.6 1.6-22.3-5.9-23.2-13.2-47.9-15.3-51.3-3.3-5.3-7.3-7.5-30-16.3-12-4.6-21.8-8.6-21.8-8.9s6.6-2.7 14.8-5.4c16.2-5.3 19.9-7.5 23.8-14.3 3.4-5.6 3.7-13.7.8-20-1.9-4.2-32.4-37.2-52.7-57.1-9-8.8-9.6-9.2-13.8-9.2-2.4.1-5.4.6-6.5 1.3-1.8 1-17.1 16.5-46 46.6l-7.2 7.5-3.3-3.5c-7.4-7.7-11.5-9.6-79.6-35.9-9-3.5-16.3-6.7-16.3-7.1s12.5-4.8 27.8-9.8c16.3-5.3 29.6-10.2 32.2-11.9 6-3.8 13.3-11.8 16.3-17.8 7-13.9 5.4-33.5-3.8-45.3-7.2-9.1-103-109.8-110.2-115.7-5.8-4.8-13.2-6.7-19.6-5.3m34.8 84.4c5.5 1.4 12.2 3.3 14.9 4.2l4.8 1.5-.6 4.6c-1 7.4-11.3 36.9-16.3 46.8-2.5 5.1-7.6 13.4-11.3 18.5-5.4 7.6-7.7 9.9-12 12.1-6.8 3.6-12.8 3.7-19.7.3-5.8-2.9-9.3-6.8-18.2-20.5-8.2-12.5-13.2-23.1-17.5-37.1-5.1-17-6.4-23.8-4.6-24.9.8-.5 7.9-2.5 15.9-4.4 8.1-1.9 15.5-3.8 16.6-4 1.1-.3 10.1-.3 20-.1 15.1.4 19.6.8 28 3m-76.1 88.4 46.9 23.5 51.8-25.9c28.5-14.3 52.1-25.7 52.4-25.3.8.8-1.8 7-3.6 8.4-3.9 3.1-93.1 50.5-98.6 52.5-3.1 1-4.2.6-19-7.1-23.6-12.4-66.7-35.6-75.5-40.7-7.6-4.4-11.8-8.5-11.8-11.6 0-2.4 4.5-.3 57.4 26.2M418.5 318c12 1.2 19.5 3.5 19.5 5.9 0 3.7-7.2 22.7-11 29.2-5.4 9.1-9.9 12.9-15.2 12.9-3.7 0-4.7-.6-8.7-4.8-5.3-5.5-12-17.7-15-27.6-3.2-10.5-3.1-11.3 3.2-13.1 12.1-3.5 15-3.8 27.2-2.5M88.6 354.5c1.4 3.2 2.4 7.5 2.4 10.1 0 6-14 102.3-15.7 107.8-.5 1.8-.6 1.8-1.5.1-1.4-2.4-7.8-23.3-7.8-25.4-.1-3.8 18.5-98.1 19.2-98.1.5 0 2 2.5 3.4 5.5m239.8 43.3c5.3 26.8 9.6 49.4 9.6 50.1 0 2.1-9.2 28.1-9.9 28.1-.4 0-1.9-7.8-3.4-17.3-1.4-9.4-5.4-34.7-8.7-56l-6-38.8 3.4-7.4c1.9-4.1 3.9-7.5 4.4-7.5s5.3 21.9 10.6 48.8m136.5-43.3c-3 2.9-50.1 27.5-52.5 27.5-1.1 0-8.6-3.6-16.9-8.1-8.2-4.4-18.9-10.1-23.7-12.6-8-4.2-10.8-6.7-9.3-8.2.3-.3 11.7 5 25.3 11.8l24.7 12.3 27-13.5c25.2-12.6 31.2-14.8 25.4-9.2m-86.6 25.1c4.3 1.4 7.7 2.8 7.5 3s-3.4 1.5-7.1 2.9l-6.6 2.5-1.6-5.2c-.8-2.8-1.5-5.3-1.5-5.5 0-.6 1.7-.2 9.3 2.3m100.1 62.8 4.5 23.4-2.3 6.9c-2.9 8.4-2.5 9.8-7.6-24.5-3.7-25.3-3.8-26.5-2.2-29.8 1.5-3.2 1.7-3.3 2.4-1.5.4 1.1 2.7 12.6 5.2 25.5" />
<path
fillRule="evenodd"
d="M35.145 33.65c-1.297-.691-1.612-2.466-.616-3.568l5.17-5.723a1.07 1.07 0 0 1 1.601 0l5.186 5.739c.99 1.097.686 2.866-.611 3.544l-.221.115-2.577 1.224 3.959 1.774a2.23 2.23 0 0 1 1.237 1.47l1.688 6.351c.19.717-.334 1.424-1.055 1.424H32.094c-.721 0-1.245-.707-1.055-1.424l1.688-6.35a2.23 2.23 0 0 1 1.237-1.471l3.96-1.774s-1.594-.697-2.578-1.224zm6.292-5.77c.423.094.953.355 1.294.539a.52.52 0 0 1 .252.59c-.276 1.082-1.146 4.014-2.483 4.014s-2.207-2.932-2.483-4.013a.52.52 0 0 1 .252-.591c.34-.184.87-.445 1.294-.538.716-.158 1.158-.158 1.874 0m4.25 11.48a.58.58 0 0 1 .083-.398l.352-.553 1.13 5.193a.58.58 0 0 1-.044.373l-.617 1.29zm-9.872-7.562.09.188c.094.197.242.361.426.473l3.892 2.355c.171.103.383.103.554 0l3.892-2.355c.184-.112.332-.276.427-.473l.09-.188-4.439 2.32a.53.53 0 0 1-.494 0zm-2.023 12.177a.58.58 0 0 1-.043-.373l1.129-5.192.352.552a.58.58 0 0 1 .083.397l-.904 5.906z"
clipRule="evenodd"
/>
<path
fillRule="evenodd"
d="M10.204 24.07c-2.374-1.227-2.95-4.38-1.128-6.335l9.46-10.163a2 2 0 0 1 2.928 0l9.487 10.191c1.813 1.947 1.255 5.09-1.118 6.293l-.404.205-4.715 2.174 7.243 3.149a4 4 0 0 1 2.263 2.612l3.088 11.276A2 2 0 0 1 35.378 46H4.622a2 2 0 0 1-1.929-2.528L5.78 32.196a4 4 0 0 1 2.263-2.612l7.243-3.15s-2.915-1.237-4.715-2.173zm11.51-10.244c.775.165 1.744.628 2.368.955.382.201.57.633.46 1.05-.504 1.92-2.095 7.125-4.542 7.125s-4.038-5.205-4.542-7.125a.916.916 0 0 1 .46-1.05c.624-.327 1.593-.79 2.368-.955 1.31-.28 2.118-.28 3.428 0m7.775 20.382a1 1 0 0 1 .152-.705l.645-.981 2.065 9.22a1 1 0 0 1-.078.661l-1.13 2.293zm-18.06-13.425.163.332a2 2 0 0 0 .781.84l7.12 4.182a1 1 0 0 0 1.013 0l7.12-4.182a2 2 0 0 0 .782-.84l.163-.332-8.119 4.118a1 1 0 0 1-.904 0zm-3.702 21.62a1 1 0 0 1-.078-.66l2.065-9.221.645.981a1 1 0 0 1 .152.705L8.857 44.696z"
clipRule="evenodd"
/>
</svg>
);
};

View File

@@ -16,14 +16,13 @@ const Poison = ({
width={props.size || 16}
height={props.size || 16}
fill="currentColor"
overflow="visible"
paintOrder="stroke fill markers"
viewBox="0 0 524 524"
viewBox="0 0 52 52"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M261.6 32.1 228 57.2v60.5l-6.7 1.2c-16.1 2.9-39.8 10.8-54.6 18.2-9.7 4.9-27.4 17-36.5 24.9-24.3 21.3-40.6 49-46.3 79-1.6 8.3-1.6 33.5 0 42 4.3 22.8 16.3 46.9 32.3 64.6 26 28.9 60 47.5 104 56.9l7.8 1.6.2 55.8.3 55.7 34-25.2 34-25.2.5-30.8.5-30.8 10.5-2.2c27-5.6 54.2-17.8 75.5-33.8 77.9-58.4 77.4-158.4-1.2-216.5-22.5-16.7-46.6-27.2-77-33.7l-8.3-1.7V62.3c0-30.8-.4-55.3-.9-55.3s-16 11.3-34.5 25.1M228 262v89l-2.7-.6c-5.3-1.3-14.8-5.1-23.8-9.7-31-15.5-50.5-41.7-53.4-71.4-2.5-25.1 6.9-48.5 27-67.8 9.4-9 15.7-13.4 27.6-19.4 7.8-3.9 21.4-9 24.1-9.1.9 0 1.2 18.5 1.2 89m76.1-86.9c33.2 10.8 58.9 34.5 68.6 63.4 2.5 7.4 2.7 9.2 2.7 23.5 0 14.2-.3 16.2-2.8 23.5-6.7 19.6-18.7 35-37.3 47.8-7.1 4.9-25.9 14-33 16l-5.3 1.5v-88.9c0-48.9.2-88.9.3-88.9.2 0 3.3.9 6.8 2.1" />
<path d="M27.109 3.482a.5.5 0 0 0-.3-.396l-4.148-1.75a.502.502 0 0 0-.694.519c.208 1.787.697 6.165 1.094 11.088a17.5 17.5 0 0 1 3.156-.24q.956.012 1.89.126a303 303 0 0 0-.998-9.347M21.556 50.067a.503.503 0 0 0 .72.516l4.556-2.244a.5.5 0 0 0 .274-.384c.119-.97.539-4.48.932-8.787.159-1.735.313-3.6.441-5.48.203-2.966.34-5.97.33-8.563-.008-2.09-.115-4.459-.272-6.849a13 13 0 0 0-2.32-.255c-.946-.02-1.886.063-2.788.247.135 2.398.219 4.757.213 6.857-.008 2.589-.156 5.54-.372 8.502a239 239 0 0 1-.454 5.352 330 330 0 0 1-1.26 11.088" />
<path d="M26.217 12.702a17.5 17.5 0 0 0-3.156.24c-6.351 1.072-11.603 5.623-12.035 12.183-.455 6.93 5.072 12.492 11.79 13.854.166-1.734.323-3.545.454-5.352-4.025-1.055-7.345-4.36-6.896-8.502.408-3.76 3.43-6.119 7.055-6.857a12.7 12.7 0 0 1 2.788-.247c.788.017 1.567.103 2.32.255 3.65.742 6.675 3.067 7.089 6.85.464 4.245-2.997 7.581-7.147 8.561-.128 1.88-.282 3.746-.44 5.481 7.254-.93 13.419-6.7 12.934-14.043-.452-6.861-6.119-11.483-12.867-12.296a18 18 0 0 0-1.89-.127" />
</svg>
);
};

View File

@@ -1,3 +1,4 @@
export { default as Close } from './Close';
export { default as Cog } from './Cog';
export { default as CommanderTax } from './CommanderTax';
export { default as Cross } from './Cross';

5
src/Icons/svgs/Close.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="52" height="52" viewBox="0 0 52 52" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26 48C38.1503 48 48 38.1503 48 26C48 13.8497 38.1503 4 26 4C13.8497 4 4 13.8497 4 26C4 38.1503 13.8497 48 26 48ZM26 52C40.3594 52 52 40.3594 52 26C52 11.6406 40.3594 0 26 0C11.6406 0 0 11.6406 0 26C0 40.3594 11.6406 52 26 52Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5858 15.5858C16.3668 14.8047 17.6332 14.8047 18.4142 15.5858L36.4142 33.5858C37.1953 34.3668 37.1953 35.6332 36.4142 36.4142C35.6332 37.1953 34.3668 37.1953 33.5858 36.4142L15.5858 18.4142C14.8047 17.6332 14.8047 16.3668 15.5858 15.5858Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4142 15.5858C37.1953 16.3668 37.1953 17.6332 36.4142 18.4142L18.4142 36.4142C17.6332 37.1953 16.3668 37.1953 15.5858 36.4142C14.8047 35.6332 14.8047 34.3668 15.5858 33.5858L33.5858 15.5858C34.3668 14.8047 35.6332 14.8047 36.4142 15.5858Z" fill="currentColor"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -1,26 +1,3 @@
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 524.000000 524.000000"
preserveAspectRatio="xMidYMid meet" fill='currentColor' paint-order='stroke fill markers'>
<g transform="translate(0.000000,524.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
<path d="M2560 5001 c-19 -4 -55 -18 -79 -32 -51 -28 -1303 -1333 -1358 -1415
-54 -81 -75 -147 -81 -255 -5 -113 7 -176 52 -269 37 -78 138 -184 211 -221
28 -14 204 -75 393 -134 188 -60 337 -112 330 -116 -7 -3 -242 -93 -523 -199
-328 -124 -529 -205 -563 -227 -60 -40 -120 -107 -156 -174 -15 -27 -97 -311
-206 -715 -167 -617 -181 -674 -177 -734 9 -123 72 -217 185 -272 l67 -33
1965 0 c1908 0 1967 1 2020 19 75 26 159 110 188 189 41 108 39 118 -153 815
-96 350 -187 666 -202 701 -34 83 -130 186 -210 228 -32 17 -279 115 -550 219
-271 104 -489 192 -485 195 4 4 151 53 327 108 176 56 345 114 375 129 114 56
230 205 259 332 27 115 7 275 -47 373 -36 67 -52 85 -737 802 -451 472 -614
637 -651 657 -53 28 -137 41 -194 29z m325 -976 c93 -18 316 -83 329 -95 16
-15 -121 -436 -183 -565 -60 -123 -161 -277 -226 -347 -73 -77 -168 -103 -266
-75 -73 22 -114 58 -196 174 -161 228 -224 362 -299 643 -24 90 -41 167 -36
170 23 21 307 93 447 114 63 9 352 -3 430 -19z m366 -1035 l621 311 -7 -33
c-10 -47 -21 -64 -58 -91 -17 -13 -288 -160 -601 -327 -518 -277 -571 -302
-596 -293 -53 20 -1145 606 -1169 627 -25 22 -51 74 -51 101 0 11 187 -78 620
-295 l619 -310 622 310z m-1940 -1314 c11 -30 1 -112 -87 -699 -54 -367 -102
-663 -105 -659 -4 4 -30 80 -58 169 l-51 162 110 578 c61 318 114 585 116 593
5 14 46 -64 75 -144z m2808 -442 l112 -581 -52 -166 c-29 -92 -56 -164 -60
-159 -3 4 -50 304 -104 667 l-98 660 39 87 c22 48 42 84 45 80 4 -4 57 -268
118 -588z" />
</g>
<svg width="52" height="52" viewBox="0 0 52 52" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8564 22.9182C11.4521 21.703 10.8752 18.5145 12.7248 16.5561L24.546 4.03956C25.3352 3.20389 26.6648 3.20389 27.454 4.03956L39.302 16.5844C41.1437 18.5345 40.5819 21.709 38.1828 22.9086L37 23.5L31.5 26L40.2354 29.7438C41.3509 30.2218 42.189 31.1804 42.5138 32.3498L46.2958 45.9647C46.6498 47.2391 45.6914 48.5 44.3687 48.5H7.63129C6.30865 48.5 5.35026 47.2391 5.70426 45.9647L9.48619 32.3498C9.811 31.1804 10.6491 30.2218 11.7646 29.7438L20.5 26C20.5 26 17.0994 24.5765 15 23.5C14.6396 23.3152 14.2531 23.1187 13.8564 22.9182ZM28 11.5C28.9453 11.699 30.1395 12.2725 30.8602 12.6499C31.2455 12.8516 31.4362 13.2835 31.3258 13.7042C30.7694 15.8239 28.8994 22 26 22C23.1006 22 21.2306 15.8239 20.6742 13.7042C20.5638 13.2835 20.7545 12.8516 21.1398 12.6499C21.8606 12.2725 23.0547 11.699 24 11.5C25.5286 11.1782 26.4714 11.1782 28 11.5ZM37.0619 34.8868C37.0221 34.6381 37.0776 34.3836 37.2173 34.1741L38 33L40.4207 43.6511C40.472 43.8767 40.4435 44.1131 40.34 44.32L39 47L37.0619 34.8868ZM16 19.5L16.232 19.9639C16.4068 20.3136 16.6804 20.6044 17.0187 20.8003L25.499 25.7099C25.8089 25.8894 26.1911 25.8894 26.501 25.7099L34.9813 20.8003C35.3197 20.6044 35.5932 20.3136 35.7681 19.9639L36 19.5L26.4472 24.2764C26.1657 24.4172 25.8343 24.4172 25.5528 24.2764L16 19.5ZM11.66 44.32C11.5565 44.1131 11.528 43.8767 11.5793 43.6511L14 33L14.7827 34.1741C14.9224 34.3836 14.9779 34.6381 14.9381 34.8868L13 47L11.66 44.32Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -1,26 +1,3 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="524.000000pt" height="524.000000pt" viewBox="0 0 524.000000 524.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,524.000000) scale(0.100000,-0.100000)"
fill="currentColor" stroke="none">
<path d="M1150 4673 c0 -434 -39 -701 -152 -1053 -132 -412 -310 -727 -647
-1149 -94 -118 -168 -218 -164 -221 5 -4 159 -71 343 -150 457 -195 627 -281
855 -433 207 -138 379 -280 560 -462 255 -255 376 -415 649 -861 l28 -47 42
67 c236 387 588 787 943 1074 366 296 696 488 1208 706 127 54 234 102 238
106 5 4 -61 95 -146 201 -183 231 -250 324 -346 483 -229 381 -381 820 -446
1286 -11 74 -18 224 -22 418 l-6 303 -26 -5 c-14 -3 -246 -41 -516 -85 -920
-150 -944 -150 -1998 25 -213 35 -390 64 -392 64 -3 0 -5 -120 -5 -267z m1290
-287 c148 -61 229 -78 395 -83 132 -4 169 -2 308 22 87 15 160 26 162 24 2 -2
-40 -40 -92 -84 -196 -166 -377 -368 -507 -566 -95 -147 -246 -454 -246 -502
0 -10 32 -18 123 -30 426 -58 640 -59 1080 -6 93 11 170 19 172 17 2 -2 -76
-93 -172 -203 -286 -326 -409 -488 -553 -725 -105 -174 -144 -269 -266 -640
-63 -195 -139 -427 -168 -515 l-53 -160 -9 280 c-12 369 -10 590 5 700 23 173
75 356 151 538 45 105 39 117 -69 146 -229 62 -716 45 -1145 -39 -83 -16 -151
-28 -153 -26 -2 1 30 41 70 87 312 358 554 787 696 1233 21 66 64 224 96 349
48 189 61 228 74 223 9 -2 54 -20 101 -40z"/>
</g>
<svg width="52" height="52" viewBox="0 0 52 52" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9008 3.04921C19.1426 2.39616 19.8121 1.97007 20.5469 2.00164L35.7075 2.65311C36.9914 2.70828 37.726 4.05351 37.0254 5.06644L26.4627 20.3386L41.4687 21.4735C42.7114 21.5674 43.406 22.8661 42.7451 23.8599L25.8536 49.2595C24.8822 50.7202 22.4796 49.8455 22.8083 48.1507L26.3579 29.8448L10.8636 31.6025C9.64281 31.741 8.69007 30.6288 9.09427 29.537L18.9008 3.04921Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 549 B

View File

@@ -1,21 +1,4 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="524.000000pt" height="524.000000pt" viewBox="0 0 524.000000 524.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,524.000000) scale(0.100000,-0.100000)"
fill="currentColor" stroke="none">
<path d="M242 4503 c140 -185 272 -423 304 -553 28 -111 15 -238 -61 -585
-150 -690 -168 -932 -79 -1113 87 -178 450 -481 1215 -1014 235 -164 848 -568
862 -568 4 0 6 642 5 1426 l-3 1426 -70 22 c-253 80 -388 242 -411 490 -8 86
14 207 52 294 13 30 21 59 17 63 -5 4 -90 46 -190 93 l-182 86 -755 0 -755 0
51 -67z"/>
<path d="M3343 4480 c-101 -49 -183 -91 -183 -93 0 -3 11 -29 24 -58 37 -85
51 -157 50 -259 -1 -161 -47 -276 -150 -377 -69 -68 -187 -133 -281 -154 l-53
-12 0 -1429 c0 -785 3 -1428 8 -1428 4 0 118 73 254 163 1087 714 1678 1171
1813 1401 99 169 84 418 -66 1111 -85 390 -96 506 -59 626 43 145 135 313 270
495 39 52 70 96 70 99 0 3 -341 5 -757 4 l-758 -1 -182 -88z"/>
</g>
<svg width="52" height="52" viewBox="0 0 52 52" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.1043 9.28051L24.9585 9.66635L24.9984 10.5887L24.9984 10.5902L24.9991 10.6049L25.0007 10.6456C25.002 10.6805 25.0038 10.7303 25.0058 10.7919C25.0098 10.9149 25.0146 11.0866 25.0178 11.2823C25.0241 11.6618 25.0252 12.1756 24.9963 12.6013C24.877 14.3641 24.1264 15.6404 23.5541 16.6134C23.5258 16.6615 23.4979 16.709 23.4705 16.7557C22.8747 17.7728 22.4998 18.4893 22.4998 19.5C22.4998 20.7411 23.1256 22.4455 23.8026 23.8729C24.4966 25.3361 24.9998 26.9924 24.9998 28.748V28.748C24.9999 33.9025 24.4735 39.0436 23.4288 44.0911L23.0481 45.9304L23.0257 45.9233L22.968 45.9047C22.9182 45.8887 22.846 45.8652 22.7537 45.8347C22.5692 45.7738 22.3042 45.6848 21.977 45.571C21.3235 45.3436 20.4182 45.0157 19.4097 44.6131C17.4292 43.8224 14.9156 42.6911 13.1631 41.4144C10.6892 39.612 8.82199 37.8547 7.40496 35.8082C5.9835 33.7553 5.06869 31.4889 4.3964 28.7387C3.80428 26.3166 4.19737 24.6645 4.5709 23.1112L4.58096 23.0694C4.92942 21.6207 5.27612 20.1794 4.99427 17.8152C4.9039 17.0572 4.65893 16.2573 4.34097 15.3882C4.24562 15.1275 4.13757 14.8459 4.02616 14.5555C3.79654 13.9571 3.55263 13.3214 3.3761 12.7552C3.1093 11.8994 2.87569 10.864 3.07424 9.84015C3.2961 8.69619 4.00602 7.79329 5.14436 7.18257C6.93978 6.21933 9.07509 5.95028 11.1376 6.00723C13.2172 6.06465 15.3554 6.45773 17.2548 6.9396C19.1608 7.42313 20.8689 8.00712 22.0984 8.46883C22.7145 8.70018 23.2136 8.90207 23.5612 9.0472C23.735 9.11979 23.8711 9.17827 23.9652 9.21924C24.0123 9.23973 24.1043 9.28051 24.1043 9.28051Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.9386 9.28051L29.0843 9.66635L29.0445 10.5887L29.0444 10.5902L29.0438 10.6049L29.0422 10.6456C29.0408 10.6805 29.039 10.7303 29.037 10.7919C29.033 10.9149 29.0282 11.0866 29.025 11.2823C29.0188 11.6618 29.0177 12.1756 29.0465 12.6013C29.1659 14.3641 29.9165 15.6404 30.4887 16.6134C30.5171 16.6615 30.545 16.709 30.5723 16.7557C31.1681 17.7728 31.5431 18.4893 31.5431 19.5C31.5431 20.7411 30.9172 22.4455 30.2402 23.8729C29.5462 25.3361 29.0431 26.9924 29.0431 28.748V28.748C29.0429 33.9025 29.5693 39.0436 30.6141 44.0911L30.9947 45.9304L31.0172 45.9233L31.0749 45.9047C31.1247 45.8887 31.1969 45.8652 31.2891 45.8347C31.4736 45.7738 31.7386 45.6848 32.0658 45.571C32.7194 45.3436 33.6246 45.0157 34.6332 44.6131C36.6136 43.8224 39.1273 42.6911 40.8797 41.4144C43.3536 39.612 45.2209 37.8547 46.6379 35.8082C48.0593 33.7553 48.9742 31.4889 49.6464 28.7387C50.2386 26.3166 49.8455 24.6645 49.472 23.1112L49.4619 23.0694C49.1134 21.6207 48.7667 20.1794 49.0486 17.8152C49.1389 17.0572 49.3839 16.2573 49.7019 15.3882C49.7972 15.1275 49.9053 14.8459 50.0167 14.5555C50.2463 13.9571 50.4902 13.3214 50.6668 12.7552C50.9335 11.8994 51.1672 10.864 50.9686 9.84015C50.7467 8.69619 50.0368 7.79329 48.8985 7.18257C47.1031 6.21933 44.9678 5.95028 42.9052 6.00723C40.8257 6.06465 38.6874 6.45773 36.788 6.9396C34.882 7.42313 33.1739 8.00712 31.9445 8.46883C31.3284 8.70018 30.8292 8.90207 30.4817 9.0472C30.3078 9.11979 30.1717 9.17827 30.0776 9.21924C30.0306 9.23973 29.9386 9.28051 29.9386 9.28051Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@@ -1,30 +1,3 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="524.000000pt" height="524.000000pt" viewBox="0 0 524.000000 524.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,524.000000) scale(0.100000,-0.100000)"
fill="currentColor" stroke="none">
<path d="M2367 4905 c-288 -36 -514 -102 -754 -220 -686 -337 -1151 -972
-1269 -1735 -25 -160 -25 -500 0 -660 116 -750 572 -1383 1241 -1722 329 -167
652 -243 1035 -243 221 0 342 14 545 62 311 73 654 243 908 452 91 74 270 255
343 346 250 313 418 701 480 1110 25 164 25 483 0 650 -114 762 -586 1408
-1269 1740 -232 112 -421 171 -677 210 -145 22 -447 28 -583 10z m573 -454
c746 -132 1336 -702 1496 -1444 86 -403 35 -820 -146 -1193 -385 -794 -1264
-1204 -2125 -993 -887 218 -1488 1076 -1394 1990 73 715 567 1338 1244 1568
122 41 271 74 405 91 118 14 388 4 520 -19z"/>
<path d="M2465 4120 c-208 -20 -362 -86 -485 -211 -115 -116 -193 -264 -275
-520 -34 -106 -36 -119 -24 -144 20 -41 58 -65 114 -71 74 -9 92 10 178 190
149 308 257 419 460 473 84 23 298 22 386 -1 212 -55 346 -195 359 -376 8
-111 -23 -164 -205 -352 -260 -268 -380 -456 -442 -692 -30 -113 -46 -316 -36
-460 7 -113 9 -121 35 -148 26 -25 35 -28 95 -28 57 0 69 3 90 25 14 13 25 32
26 42 1 10 2 99 3 198 2 203 16 281 71 402 76 166 237 360 425 513 224 182
281 279 280 478 -1 198 -61 354 -179 465 -86 81 -148 118 -266 157 -165 54
-413 78 -610 60z"/>
<path d="M2524 1511 c-42 -18 -54 -50 -54 -139 0 -46 5 -92 10 -103 18 -33 64
-49 140 -49 126 0 155 33 149 169 -6 113 -19 125 -137 128 -48 2 -97 -1 -108
-6z"/>
</g>
<svg width="52" height="52" viewBox="0 0 52 52" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26 48C38.1503 48 48 38.1503 48 26C48 13.8497 38.1503 4 26 4C13.8497 4 4 13.8497 4 26C4 38.1503 13.8497 48 26 48ZM26 52C40.3594 52 52 40.3594 52 26C52 11.6406 40.3594 0 26 0C11.6406 0 0 11.6406 0 26C0 40.3594 11.6406 52 26 52ZM21.8089 15.1299L21.5454 15.3022C19.0317 16.9458 18.874 20.5718 21.2356 22.4274C22.1042 23.1098 22.2551 24.3671 21.5726 25.2356C20.8902 26.1042 19.6329 26.2551 18.7644 25.5726C14.2506 22.0261 14.5519 15.0957 19.3564 11.9543L19.62 11.782C23.4958 9.24777 28.5042 9.24777 32.3801 11.782L33.1496 12.2851C37.7056 15.2641 37.9913 21.8361 33.711 25.1992C33.2888 25.5309 32.834 25.8191 32.3537 26.0592L31.8138 26.3292C29.4764 27.4978 28 29.8868 28 32.5C28 33.6046 27.1046 34.5 26 34.5C24.8954 34.5 24 33.6046 24 32.5C24 28.3717 26.3325 24.5977 30.0249 22.7515L30.5649 22.4815C30.8037 22.3621 31.0298 22.2188 31.2397 22.0539C33.3679 20.3817 33.2258 17.1141 30.9606 15.633L30.1911 15.1299C27.645 13.4651 24.355 13.4651 21.8089 15.1299ZM26 42C27.6569 42 29 40.6569 29 39C29 37.3431 27.6569 36 26 36C24.3431 36 23 37.3431 23 39C23 40.6569 24.3431 42 26 42Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -1,37 +1,4 @@
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="524.000000pt" height="524.000000pt"
viewBox="0 0 524.000000 524.000000" preserveAspectRatio="xMidYMid meet" fill='currentColor'
paint-order='stroke fill markers'>
<g transform="translate(0.000000,524.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
<path d="M1967 4449 c-21 -5 -50 -15 -65 -23 -33 -18 -176 -163 -593 -601
-600 -631 -602 -633 -622 -785 -17 -133 14 -242 100 -347 65 -79 106 -99 408
-198 299 -98 330 -110 305 -119 -8 -3 -80 -31 -160 -61 -80 -31 -197 -75 -260
-99 -207 -79 -403 -157 -450 -181 -26 -13 -72 -51 -102 -84 -66 -71 -72 -87
-179 -476 -191 -691 -213 -783 -203 -848 16 -96 71 -169 163 -217 l40 -20
2336 2 2337 3 33 37 c52 56 53 76 16 223 -59 232 -132 479 -153 513 -33 53
-73 75 -300 163 -120 46 -218 86 -218 89 0 3 66 27 148 54 162 53 199 75 238
143 34 56 37 137 8 200 -19 42 -324 372 -527 571 -90 88 -96 92 -138 92 -24
-1 -54 -6 -65 -13 -18 -10 -171 -165 -460 -466 l-72 -75 -33 35 c-74 77 -115
96 -796 359 -90 35 -163 67 -163 71 0 4 125 48 278 98 163 53 296 102 322 119
60 38 133 118 163 178 70 139 54 335 -38 453 -72 91 -1030 1098 -1102 1157
-58 48 -132 67 -196 53z m348 -844 c55 -14 122 -33 149 -42 l48 -15 -6 -46
c-10 -74 -113 -369 -163 -468 -25 -51 -76 -134 -113 -185 -54 -76 -77 -99
-120 -121 -68 -36 -128 -37 -197 -3 -58 29 -93 68 -182 205 -82 125 -132 231
-175 371 -51 170 -64 238 -46 249 8 5 79 25 159 44 81 19 155 38 166 40 11 3
101 3 200 1 151 -4 196 -8 280 -30z m-761 -884 l469 -235 518 259 c285 143
521 257 524 253 8 -8 -18 -70 -36 -84 -39 -31 -931 -505 -986 -525 -31 -10
-42 -6 -190 71 -236 124 -667 356 -755 407 -76 44 -118 85 -118 116 0 24 45 3
574 -262z m2631 -661 c120 -12 195 -35 195 -59 0 -37 -72 -227 -110 -292 -54
-91 -99 -129 -152 -129 -37 0 -47 6 -87 48 -53 55 -120 177 -150 276 -32 105
-31 113 32 131 121 35 150 38 272 25z m-3299 -365 c14 -32 24 -75 24 -101 0
-60 -140 -1023 -157 -1078 -5 -18 -6 -18 -15 -1 -14 24 -78 233 -78 254 -1 38
185 981 192 981 5 0 20 -25 34 -55z m2398 -433 c53 -268 96 -494 96 -501 0
-21 -92 -281 -99 -281 -4 0 -19 78 -34 173 -14 94 -54 347 -87 560 l-60 388
34 74 c19 41 39 75 44 75 5 0 53 -219 106 -488z m1365 433 c-30 -29 -501 -275
-525 -275 -11 0 -86 36 -169 81 -82 44 -189 101 -237 126 -80 42 -108 67 -93
82 3 3 117 -50 253 -118 l247 -123 270 135 c252 126 312 148 254 92z m-866
-251 c43 -14 77 -28 75 -30 -2 -2 -34 -15 -71 -29 l-66 -25 -16 52 c-8 28 -15
53 -15 55 0 6 17 2 93 -23z m1001 -628 l45 -234 -23 -69 c-29 -84 -25 -98 -76
245 -37 253 -38 265 -22 298 15 32 17 33 24 15 4 -11 27 -126 52 -255z" />
</g>
<svg width="52" height="52" viewBox="0 0 52 52" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.1454 33.6499C33.8477 32.9589 33.5333 31.1835 34.5286 30.0819L39.6999 24.3589C40.1323 23.8804 40.8679 23.8804 41.3002 24.3589L46.4859 30.0979C47.4769 31.1946 47.1717 32.964 45.8747 33.6418L45.6538 33.7572L43.0769 34.9815L47.036 36.755C47.6432 37.027 48.0981 37.5679 48.273 38.2259L49.9606 44.5762C50.1511 45.293 49.6275 46 48.9062 46H32.0939C31.3726 46 30.849 45.293 31.0395 44.5762L32.7271 38.2259C32.902 37.5679 33.3569 37.027 33.9642 36.755L37.9232 34.9815C37.9232 34.9815 36.33 34.2844 35.3463 33.7572C35.281 33.7222 35.2139 33.6864 35.1454 33.6499ZM41.4371 27.8807C41.8604 27.9739 42.3903 28.2345 42.7311 28.4188C42.94 28.5317 43.0426 28.7748 42.9828 29.0098C42.7073 30.0912 41.8374 33.0227 40.5001 33.0227C39.1627 33.0227 38.2928 30.0912 38.0174 29.0098C37.9575 28.7748 38.0602 28.5317 38.269 28.4188C38.6099 28.2345 39.1397 27.9739 39.563 27.8807C40.2792 27.7231 40.7209 27.7231 41.4371 27.8807ZM45.6867 39.3591C45.6655 39.2207 45.6952 39.0792 45.7698 38.9621L46.1223 38.4095L47.2515 43.6024C47.2787 43.7279 47.2635 43.8592 47.2084 43.9745L46.5908 45.2654L45.6867 39.3591ZM35.8148 31.7984L35.9044 31.9856C35.9988 32.183 36.1472 32.3475 36.3313 32.4589L40.2232 34.814C40.3941 34.9174 40.606 34.9174 40.7769 34.814L44.6688 32.4589C44.8529 32.3475 45.0013 32.183 45.0957 31.9856L45.1853 31.7984L40.7473 34.1177C40.5919 34.199 40.4082 34.199 40.2528 34.1177L35.8148 31.7984ZM33.7917 43.9745C33.7366 43.8592 33.7214 43.7279 33.7487 43.6024L34.8778 38.4095L35.2303 38.9621C35.3049 39.0792 35.3346 39.2207 35.3134 39.3591L34.4093 45.2654L33.7917 43.9745Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2038 24.0702C7.82978 22.8432 7.25462 19.6907 9.07551 17.7347L18.5361 7.57242C19.3271 6.72278 20.6729 6.72278 21.4638 7.57242L30.9508 17.763C32.7638 19.7105 32.2055 22.8523 29.8326 24.0559L29.4286 24.2609L24.7143 26.4348L31.9572 29.5839C33.0681 30.0669 33.9003 31.0274 34.2203 32.1958L37.3077 43.4718C37.6562 44.7446 36.6983 46 35.3787 46H4.62123C3.30164 46 2.34374 44.7446 2.69223 43.4718L5.77971 32.1958C6.09964 31.0274 6.93184 30.0669 8.0428 29.5839L15.2857 26.4348C15.2857 26.4348 12.3709 25.197 10.5714 24.2609C10.452 24.1987 10.3291 24.1351 10.2038 24.0702ZM21.7143 13.8261C22.4887 13.9915 23.458 14.4544 24.0816 14.7815C24.4637 14.982 24.6515 15.4137 24.542 15.831C24.0381 17.7512 22.4466 22.9565 20 22.9565C17.5533 22.9565 15.9618 17.7512 15.458 15.831C15.3485 15.4137 15.5363 14.982 15.9183 14.7815C16.5419 14.4544 17.5112 13.9915 18.2857 13.8261C19.5959 13.5463 20.4041 13.5463 21.7143 13.8261ZM29.4888 34.208C29.45 33.9622 29.5043 33.7109 29.6409 33.503L30.2857 32.5217L32.3514 41.7427C32.4013 41.9655 32.3735 42.1986 32.2726 42.4034L31.1428 44.6957L29.4888 34.208ZM11.4286 20.7826L11.5924 21.1151C11.7651 21.4654 12.0366 21.7576 12.3735 21.9554L19.4935 26.1373C19.8062 26.321 20.1938 26.321 20.5064 26.1373L27.6265 21.9554C27.9633 21.7576 28.2349 21.4654 28.4076 21.1151L28.5714 20.7826L20.4524 24.901C20.168 25.0452 19.832 25.0452 19.5476 24.901L11.4286 20.7826ZM7.72738 42.4034C7.62645 42.1986 7.59863 41.9655 7.64854 41.7427L9.71428 32.5217L10.3591 33.503C10.4957 33.7109 10.5499 33.9622 10.5112 34.208L8.85713 44.6957L7.72738 42.4034Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@@ -1,17 +1,5 @@
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 524.000000 524.000000"
preserveAspectRatio="xMidYMid meet" overflow="visible" fill='currentColor' paint-order='stroke fill markers'>
<g transform="translate(0.000000,524.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none">
<path d="M2616 4919 l-336 -251 0 -302 0 -303 -67 -12 c-161 -29 -398 -108
-546 -182 -97 -49 -274 -170 -365 -249 -243 -213 -406 -490 -463 -790 -16 -83
-16 -335 0 -420 43 -228 163 -469 323 -646 260 -289 600 -475 1040 -569 l78
-16 2 -558 3 -557 340 252 340 252 5 308 5 308 105 22 c270 56 542 178 755
338 779 584 774 1584 -12 2165 -225 167 -466 272 -770 337 l-83 17 0 554 c0
308 -4 553 -9 553 -5 0 -160 -113 -345 -251z m-336 -2299 l0 -890 -27 6 c-53
13 -148 51 -238 97 -310 155 -505 417 -534 714 -25 251 69 485 270 678 94 90
157 134 276 194 78 39 214 90 241 91 9 0 12 -185 12 -890z m761 869 c332 -108
589 -345 686 -634 25 -74 27 -92 27 -235 0 -142 -3 -162 -28 -235 -67 -196
-187 -350 -373 -478 -71 -49 -259 -140 -330 -160 l-53 -15 0 889 c0 489 2 889
3 889 2 0 33 -9 68 -21z" />
</g>
<svg width="52" height="52" viewBox="0 0 52 52" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M27.1088 3.48177C27.0869 3.30497 26.9723 3.15518 26.8081 3.08591L22.6613 1.33597C22.307 1.18649 21.9222 1.47297 21.9667 1.85487C22.175 3.6424 22.6642 8.01986 23.0605 12.9428C24.089 12.7693 25.1464 12.6869 26.2168 12.7021C26.8537 12.7112 27.4846 12.7538 28.1064 12.8287C27.6976 8.32132 27.2382 4.52512 27.1088 3.48177Z" fill="currentColor"/>
<path d="M21.5562 50.0668C21.5039 50.4644 21.917 50.7606 22.2767 50.5834L26.8318 48.3394C26.9826 48.2651 27.0857 48.1213 27.1062 47.9545C27.2249 46.9857 27.6449 43.4752 28.0382 39.1682C28.1966 37.4326 28.3507 35.5676 28.479 33.6875C28.6815 30.7216 28.8196 27.7181 28.8093 25.1251C28.801 23.0359 28.6941 20.6664 28.5371 18.2765C27.7844 18.1236 27.0052 18.0382 26.2168 18.0213C25.2707 18.001 24.331 18.0843 23.4288 18.268C23.5637 20.6662 23.6479 23.0247 23.6415 25.1251C23.6337 27.7136 23.486 30.6654 23.2703 33.6267C23.1386 35.4341 22.9816 37.2451 22.8157 38.9792C22.3428 43.9201 21.7969 48.2364 21.5562 50.0668Z" fill="currentColor"/>
<path d="M26.2168 12.7021C25.1464 12.6869 24.089 12.7693 23.0605 12.9428C16.7098 14.0145 11.4575 18.5649 11.0263 25.1251C10.5708 32.0547 16.0975 37.6168 22.8157 38.9792C22.9816 37.2451 23.1386 35.4341 23.2703 33.6267C19.2453 32.5716 15.9246 29.2665 16.3739 25.1251C16.782 21.3644 19.8032 19.0062 23.4288 18.268C24.331 18.0843 25.2707 18.001 26.2168 18.0213C27.0052 18.0382 27.7844 18.1236 28.5371 18.2765C32.1871 19.0176 35.2118 21.3434 35.6256 25.1251C36.0901 29.3713 32.6293 32.7074 28.479 33.6875C28.3507 35.5676 28.1966 37.4326 28.0382 39.1682C35.2931 38.2379 41.4576 32.4681 40.9733 25.1251C40.5208 18.2639 34.8543 13.6419 28.1064 12.8287C27.4846 12.7538 26.8537 12.7112 26.2168 12.7021Z" fill="currentColor"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@@ -25,6 +25,7 @@ export type Settings = {
showPlayerMenuCog: boolean;
goFullscreenOnStart: boolean;
preStartMode: PreStartMode;
showAnimations: boolean;
};
export type InitialGameSettings = {
@@ -57,6 +58,7 @@ export const settingsSchema = z.object({
showPlayerMenuCog: z.boolean(),
goFullscreenOnStart: z.boolean(),
preStartMode: z.nativeEnum(PreStartMode),
showAnimations: z.boolean(),
});
export const defaultSettings: Settings = {
@@ -65,4 +67,5 @@ export const defaultSettings: Settings = {
showStartingPlayer: true,
showPlayerMenuCog: true,
preStartMode: PreStartMode.None,
showAnimations: true,
};

21
src/global.d.ts vendored Normal file
View File

@@ -0,0 +1,21 @@
export {};
export interface BeforeInstallPromptEvent extends Event {
readonly platforms: string[];
readonly userChoice: Promise<{
outcome: 'accepted' | 'dismissed';
platform: string;
}>;
prompt(): Promise<void>;
}
declare global {
interface Window {
isIOS: boolean;
isIPad: boolean;
}
interface WindowEventMap {
beforeinstallprompt: BeforeInstallPromptEvent;
transitionend: BeforeInstallPromptEvent;
}
}

View File

@@ -80,3 +80,161 @@ code {
-ms-overflow-style: auto;
}
}
input[type='range'] {
-webkit-appearance: none;
transition: background 0ms ease-in;
margin: 10px 0;
width: 100%;
background: theme('colors.secondary.main');
}
input[type='range']:focus {
outline: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 0.875rem;
cursor: pointer;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border-radius: 25px;
border: 0px solid #000101;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 100px;
background: theme('colors.primary.main');
cursor: pointer;
margin-top: -3px;
}
input[type='range']::-moz-range-track {
width: 100%;
height: 0.875rem;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border-radius: 25px;
border: 0px solid #000101;
}
input[type='range']::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 100px;
background: theme('colors.primary.main');
cursor: pointer;
}
input[type='range']::-ms-track {
width: 100%;
height: 0.875rem;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type='range']::-ms-thumb {
height: 20px;
width: 20px;
border-radius: 100px;
background: theme('colors.primary.main');
cursor: pointer;
margin-top: -3px;
}
.blob-container {
margin: auto;
position: absolute;
display: flex;
align-items: center;
width: 100vw;
height: 100vh;
filter: blur(10vmax) contrast(10);
z-index: 9;
background: theme('colors.background.default');
mix-blend-mode: screen;
opacity: 30%;
}
@keyframes background-orb {
0% {
bottom: 10%;
}
50% {
bottom: 70%;
}
100% {
bottom: 10%;
}
}
@keyframes move-right-left {
0% {
rotate: 0deg;
right: 10%;
}
25% {
right: 20%;
}
50% {
rotate: 360deg;
right: 10%;
}
75% {
right: 30%;
}
100% {
rotate: 0deg;
right: 10%;
}
}
.spotlight1 {
background: theme('colors.background.spotlight');
position: fixed;
height: 20vmax;
width: 70vmax;
border-radius: 100%;
transform: translate(50%, 50%);
animation-duration: 15s, 50s;
animation-name: background-orb, move-right-left;
animation-iteration-count: infinite, infinite;
animation-direction: alternate, alternate;
animation-timing-function: ease-in-out;
animation-delay: -15s, -15s;
/* filter: blur(5vmax); */
}
.spotlight2 {
background: theme('colors.background.spotlight');
position: fixed;
height: 70vmax;
width: 20vmax;
border-radius: 100%;
transform: translate(50%, 50%);
animation-duration: 30s, 100s;
animation-name: background-orb, move-right-left;
animation-iteration-count: infinite, infinite;
animation-direction: reverse, reverse;
animation-timing-function: ease-in-out;
/* filter: blur(5vmax); */
}

View File

@@ -3,6 +3,10 @@ import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
window.isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
window.isIPad = /iPad/.test(navigator.userAgent);
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);

View File

@@ -4,28 +4,26 @@ import type { Config } from 'tailwindcss';
export const baseColors = {
primary: {
main: '#3E7D78',
dark: '#2D5F5B',
main: '#78A083',
dark: '#608069',
},
secondary: {
main: '#284F4C',
dark: '#1B3B38',
main: '#5D7965',
dark: '#4a6151',
},
background: {
default: '#08253B',
default: '#2E3041', // Orig: #35374B
spotlight: 'hsl(110, 80.4%, 32.1%)',
backdrop: 'rgba(0, 0, 0, 0.3)',
settings: 'rgba(20, 20, 0, 0.9)',
settings: 'rgba(0, 0, 0, 0.8)',
},
icons: {
dark: '#00000080',
light: '#ffffff4f',
dark: '#000000',
light: '#F9FFE3',
},
text: {
primary: '#F5F5F5',
secondary: '#76A6A5',
},
action: {
disabled: '#234A47',
primary: '#F9FFE3',
secondary: '#c7ccb6',
},
common: {
white: '#F9FFE3',