ryan/LifeTrinket
1
0
Fork 0
forked from external-repos/LifeTrinket
Code Pull Requests Activity

configure new icons

Browse Source
This commit is contained in:
Vikeo
2024-05-26 16:12:48 +02:00
parent 7e69d4fff0
commit 25794fe763
9 changed files with 104 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

6
src/Components/Buttons/ExtraCounter.tsx
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>
);

1
src/Components/Buttons/LifeCounterButton.tsx
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) => [

2
src/Components/Counters/ExtraCountersBar.tsx
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"
/>
}

82
src/Components/Dialogs/InfoDialog.tsx
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"

2
src/Components/LifeCounter/LifeCounter.tsx
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]',

2
src/Components/Misc/TextComponents.tsx
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;`;

23
src/Components/Players/PlayerMenu.tsx
View File

@@ -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
@@ -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) => {

4
tailwind.config.ts
View File

@@ -18,8 +18,8 @@ export const baseColors = {
settings: 'rgba(0, 0, 0, 0.8)',
},
icons: {
dark: '#00000080',
light: '#F9FFE34f',
dark: '#000000',
light: '#F9FFE3',
},
text: {
primary: '#F9FFE3',