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

new logo by elin

Browse Source
This commit is contained in:
Vikeo
2024-05-21 21:06:43 +02:00
parent fe43e464de
commit 9f1cc35eab
9 changed files with 139 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
public/logo512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 43 KiB

2
src/Components/Dialogs/Dialog.tsx
View File

@@ -48,10 +48,12 @@ export const Dialog: React.FC<{
</button>
<div className="bg-background-default rounded-2xl max-w-[548px] max-h-[80vh] flex flex-col">
{title && (
<div className="text-2xl text-center text-text-primary px-8 pt-4">
<h2 className="">{title}</h2>
<Separator height="1px" />
</div>
)}
<div className="h-full overflow-auto text-text-primary show-scrollbar px-8 pb-8">
{children}

29
src/Components/Dialogs/InfoDialog.tsx
View File

@@ -1,5 +1,6 @@
import { useAnalytics } from '../../Hooks/useAnalytics';
import { BuyMeCoffee } from '../../Icons/generated/Support';
import { Separator } from '../Misc/Separator';
import { Paragraph } from '../Misc/TextComponents';
import { Dialog } from './Dialog';
@@ -10,17 +11,30 @@ export const InfoDialog = ({
}) => {
const analytics = useAnalytics();
return (
<Dialog id="info" title="📋 Usage Guide" dialogRef={dialogRef}>
<Dialog id="info" title="Info" dialogRef={dialogRef}>
<div className=" text-text-primary">
<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 and colors
</div>
<Separator height="1px" />
</div>
<div className="text-text-primary mt-4">
<div className="text">
<h2 className="text-xl">📋 Usage Guide</h2>
<Separator height="1px" />
</div>
<div className="text-text-primary">
<Paragraph className="my-4">
<Paragraph className="mb-4">
There are some controls that you might not know about, so here's a
short list of them.
</Paragraph>
<h3 className="text-lg font-bold mb-2">Life counter</h3>
<ul className="list-disc ml-6 mb-4">
<li>
<strong>Tap</strong> on a player's + or - button to add or subtract{' '}
<strong>1 life</strong>.
<strong>Tap</strong> on a player's + or - button to add or
subtract <strong>1 life</strong>.
</li>
<li>
<strong>Long press</strong> on a player's + or - button to add or
@@ -48,8 +62,8 @@ export const InfoDialog = ({
<Paragraph className="mb-1">
When a player is <strong>at or below 0 life</strong>, has taken{' '}
<strong>21 or more Commander Damage</strong> or has{' '}
<strong>10 or more poison counters</strong>, a button with a skull
will appear on that player's card. Tapping it will dim the
<strong>10 or more poison counters</strong>, a button with a
skull will appear on that player's card. Tapping it will dim the
player's card.
</Paragraph>
</li>
@@ -61,6 +75,8 @@ export const InfoDialog = ({
</li>
</ul>
</div>
</div>
<div className="text-center mt-4 text-text-primary">
Visit my{' '}
<a
@@ -72,7 +88,6 @@ export const InfoDialog = ({
</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"

7
src/Components/Views/StartMenu/StartMenu.tsx
View File

@@ -4,7 +4,7 @@ import { createInitialPlayers } from '../../../Data/getInitialPlayers';
import { useAnalytics } from '../../../Hooks/useAnalytics';
import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
import { usePlayers } from '../../../Hooks/usePlayers';
import { Cog, Info } from '../../../Icons/generated';
import { Cog, Info, Trinket } from '../../../Icons/generated';
import {
InitialGameSettings,
Orientation,
@@ -176,14 +176,15 @@ const Start = () => {
<div className="flex justify-center items-center w-screen">
<MainWrapper>
<Info
className="size-8 absolute top-4 left-4 text-primary-main"
className="size-8 absolute top-7 left-4 text-primary-main"
onClick={() => {
openInfo();
}}
/>
<Trinket className="absolute w-12 h-12 top-4 right-4" />
<h1 className="relative flex flex-col text-3xl font-bold mt-6 mb-6 text-text-primary justify-center items-center">
Life Trinket
<div className="flex flex-row items-center">Life Trinket</div>
<div className="h-[1px] w-[120%] bg-common-white opacity-50" />
<div className="flex absolute text-xs font-medium -bottom-4">
v{version.installedVersion}

51
src/Icons/generated/Trinket.tsx Normal file
View File

@@ -0,0 +1,51 @@
import PropTypes from 'prop-types';
import { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
size?: string;
}
const Trinket = ({
title,
titleId,
...props
}: SVGProps<SVGSVGElement> & SVGRProps) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size || 16}
height={props.size || 16}
fill="none"
viewBox="0 0 364 472"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
fill="#78A083"
d="M40.536 302.159c-6.366-1.843-13.102 1.822-14.118 8.371-1.599 10.309-1.49 20.912.345 31.493 2.538 14.638 8.327 28.947 17.037 42.11s18.895 21.898 32.45 31.582 32.017 14.639 48.355 19.37 34.674 9.982 51.306 9.04c16.633-.942 29.437-2.571 43.833-9.043s26.935-15.473 36.901-26.49c7.205-7.964 12.964-16.868 17.121-26.436 2.641-6.078-1.095-12.775-7.461-14.619L153.42 334.848zM323.254 168.504c6.37 1.832 13.099-1.846 14.102-8.397 1.579-10.312 1.449-20.915-.405-31.493-2.566-14.633-8.382-28.93-17.117-42.077s-18.937-21.862-32.511-31.52-32.044-14.578-48.391-19.278-34.693-9.916-51.324-8.942-29.432 2.626-43.815 9.126-26.905 15.525-36.851 26.56c-7.19 7.978-12.93 16.893-17.07 26.468-2.629 6.084 1.12 12.774 7.489 14.605l112.946 32.474z"
/>
<path
fill="url(#a)"
d="M75.577 127.413c2.38-5.473 3.57-8.209 5.537-9.963a12 12 0 0 1 6.168-2.906c2.604-.399 5.472.425 11.207 2.074l216.593 62.274c5.73 1.648 8.595 2.471 10.588 4.191a12 12 0 0 1 3.683 5.732c.736 2.528.295 5.476-.588 11.372l-10.644 71.096c-.14.937-.211 1.405-.317 1.865q-.141.614-.347 1.209c-.154.446-.343.881-.721 1.749l-28.861 66.269c-2.382 5.469-3.573 8.204-5.538 9.956a12 12 0 0 1-6.168 2.904c-2.603.398-5.469-.426-11.202-2.074L48.371 290.886c-5.732-1.648-8.597-2.472-10.59-4.191a12 12 0 0 1-3.684-5.735c-.735-2.527-.293-5.476.592-11.374l10.654-71.027c.14-.934.21-1.401.316-1.86q.142-.612.346-1.206c.153-.445.342-.878.718-1.744z"
/>
<defs>
<radialGradient
id="a"
cx={0}
cy={0}
r={1}
gradientTransform="matrix(-25.05324 87.13566 -130.70377 -37.57994 181.959 234.953)"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FFF4BE" />
<stop offset={1} stopColor="#FFC374" />
</radialGradient>
</defs>
</svg>
);
};
Trinket.propTypes = {
title: PropTypes.string,
};
export default Trinket;

1
src/Icons/generated/index.ts
View File

@@ -13,3 +13,4 @@ export { default as PartnerTax } from './PartnerTax';
export { default as Poison } from './Poison';
export { default as ResetGame } from './ResetGame';
export { default as Skull } from './Skull';
export { default as Trinket } from './Trinket';

11
src/Icons/svgs/Trinket.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="364" height="472" viewBox="0 0 364 472" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M40.5356 302.159C34.1697 300.316 27.4337 303.981 26.418 310.53C24.8192 320.839 24.9288 331.442 26.7633 342.023C29.3011 356.661 35.0901 370.97 43.7998 384.133C52.5096 397.296 62.695 406.031 76.2507 415.715C89.8064 425.399 108.267 430.354 124.605 435.085C140.943 439.816 159.279 445.067 175.911 444.125C192.544 443.183 205.348 441.554 219.744 435.082C234.14 428.61 246.679 419.609 256.645 408.592C263.85 400.628 269.609 391.724 273.766 382.156C276.407 376.078 272.671 369.381 266.305 367.537L153.42 334.848L40.5356 302.159Z" fill="#78A083"/>
<path d="M323.254 168.504C329.624 170.336 336.353 166.658 337.356 160.107C338.935 149.795 338.805 139.192 336.951 128.614C334.385 113.981 328.569 99.6837 319.834 86.5374C311.099 73.3911 300.897 64.6755 287.323 55.0171C273.749 45.3588 255.279 40.4391 238.932 35.7391C222.585 31.0391 204.239 25.8229 187.608 26.7968C170.977 27.7707 158.176 29.4234 143.793 35.923C129.41 42.4225 116.888 51.4477 106.942 62.4834C99.7528 70.4607 94.0113 79.3756 89.8724 88.9514C87.2431 95.035 90.9911 101.725 97.3605 103.556L210.307 136.03L323.254 168.504Z" fill="#78A083"/>
<path d="M75.5773 127.413C77.9577 121.94 79.1479 119.204 81.1136 117.45C82.8455 115.905 84.9883 114.896 87.2823 114.544C89.8859 114.145 92.7537 114.969 98.4892 116.618L315.082 178.892C320.812 180.54 323.677 181.363 325.67 183.083C327.426 184.597 328.705 186.589 329.353 188.815C330.089 191.343 329.648 194.291 328.765 200.187L318.121 271.283C317.981 272.22 317.91 272.688 317.804 273.148C317.71 273.557 317.594 273.961 317.457 274.357C317.303 274.803 317.114 275.238 316.736 276.106L287.875 342.375C285.493 347.844 284.302 350.579 282.337 352.331C280.605 353.875 278.462 354.883 276.169 355.235C273.566 355.633 270.7 354.809 264.967 353.161L48.371 290.886C42.6395 289.238 39.7737 288.414 37.7805 286.695C36.0242 285.179 34.7448 283.188 34.097 280.96C33.3618 278.433 33.8042 275.484 34.6888 269.586L45.3425 198.559C45.4826 197.625 45.5527 197.158 45.6588 196.699C45.753 196.291 45.8686 195.889 46.0048 195.493C46.1582 195.048 46.3466 194.615 46.7235 193.749L75.5773 127.413Z" fill="url(#paint0_radial_14799_77884)"/>
<defs>
<radialGradient id="paint0_radial_14799_77884" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(181.959 234.953) rotate(106.041) scale(90.6658 135.999)">
<stop stop-color="#FFF4BE"/>
<stop offset="1" stop-color="#FFC374"/>
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB