configure new icons

package.json

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

src/Components/Buttons/ExtraCounter.tsx

@@ -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}>
+        <IconContainer $rotation={rotation}>{Icon}</IconContainer>
-          {Icon}
         <TextContainer>
           <OutlinedText
             fontSize={fontSize}
@@ -137,7 +136,6 @@ const ExtraCounter = ({
             {counterTotal ? counterTotal : undefined}
           </OutlinedText>
         </TextContainer>
-        </IconContainer>
       </ExtraCounterButton>
     </ExtraCounterContainer>
   );

src/Components/Buttons/LifeCounterButton.tsx

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

src/Components/Counters/ExtraCountersBar.tsx

@@ -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"
               />
             }

src/Components/Dialogs/InfoDialog.tsx

@@ -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"

src/Components/LifeCounter/LifeCounter.tsx

@@ -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]',

src/Components/Misc/TextComponents.tsx

@@ -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;`;

src/Components/Players/PlayerMenu.tsx

@@ -24,8 +24,7 @@ const PlayerMenuWrapper = twc.div`
   flex
   flex-col
   absolute
-  w-full
+  size-full
-  h-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) => {

tailwind.config.ts

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