wip

src/Components/ColorPicker.tsx

@@ -0,0 +1,123 @@
+import React, { useRef, useEffect, useState, FC } from 'react';
+
+type ColorPickerProps = {
+  onChange: (color: string) => void;
+};
+
+export const ColorPicker: FC<ColorPickerProps> = ({ onChange }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [context, setContext] = useState<CanvasRenderingContext2D | null>(null);
+  const [dragging, setDragging] = useState<boolean>(false);
+  const [cursorPosition, setCursorPosition] = useState<{
+    x: number;
+    y: number;
+  }>({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        setContext(ctx);
+        drawColorWheel(ctx);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (context) {
+      drawCursor(context, cursorPosition);
+    }
+  }, [context, cursorPosition]);
+
+  const drawColorWheel = (ctx: CanvasRenderingContext2D) => {
+    const width = ctx.canvas.width;
+    const height = ctx.canvas.height;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const radius = Math.min(centerX, centerY);
+
+    for (let angle = 0; angle <= 360; angle += 1) {
+      const gradient = ctx.createLinearGradient(
+        centerX,
+        centerY,
+        centerX + radius * Math.cos((angle * Math.PI) / 180),
+        centerY + radius * Math.sin((angle * Math.PI) / 180)
+      );
+      gradient.addColorStop(0, `hsl(${angle}, 100%, 50%)`);
+      gradient.addColorStop(1, `hsl(${angle + 1}, 100%, 50%)`);
+
+      ctx.beginPath();
+      ctx.moveTo(centerX, centerY);
+      ctx.arc(
+        centerX,
+        centerY,
+        radius,
+        ((angle - 0.5) * Math.PI) / 180,
+        ((angle + 0.5) * Math.PI) / 180
+      );
+      ctx.fillStyle = gradient;
+      ctx.fill();
+      ctx.closePath();
+    }
+  };
+
+  const drawCursor = (
+    ctx: CanvasRenderingContext2D,
+    position: { x: number; y: number }
+  ) => {
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    drawColorWheel(ctx);
+    const radius = 5;
+    ctx.beginPath();
+    ctx.arc(position.x, position.y, radius, 0, 2 * Math.PI);
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.closePath();
+  };
+
+  const handleMouseDown = (
+    event: React.MouseEvent<HTMLCanvasElement, MouseEvent>
+  ) => {
+    setDragging(true);
+    handleMouseMove(event);
+  };
+
+  const handleMouseMove = (
+    event: React.MouseEvent<HTMLCanvasElement, MouseEvent>
+  ) => {
+    if (dragging && context) {
+      const canvas = canvasRef.current;
+      if (canvas) {
+        const rect = canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const imageData = context.getImageData(x, y, 1, 1);
+        const pixel = imageData.data;
+        const color = rgbToHex(pixel[0], pixel[1], pixel[2]);
+        onChange(color);
+        setCursorPosition({ x, y });
+      }
+    }
+  };
+
+  const handleMouseUp = () => {
+    setDragging(false);
+  };
+
+  const rgbToHex = (r: number, g: number, b: number): string => {
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+  };
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={200}
+      height={200}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+    />
+  );
+};

src/Components/Counters/ExtraCountersBar.tsx

@@ -10,6 +10,8 @@ import {
 import { CounterType, Player, Rotation } from '../../Types/Player';
 import { RotationDivProps } from '../Buttons/CommanderDamage';
 import ExtraCounter from '../Buttons/ExtraCounter';
+import { useEffect, useState } from 'react';
+import { checkContrast } from '../../Utils/checkContrast';
 
 const Container = twc.div<RotationDivProps>((props) => [
   'flex',
@@ -31,6 +33,17 @@ type ExtraCountersBarProps = {
 
 const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
   const { updatePlayer } = usePlayers();
+  const [iconColor, setIconColor] = useState<'dark' | 'light'>('dark');
+
+  useEffect(() => {
+    const contrast = checkContrast(player.color, '#00000080');
+
+    if (contrast === 'Fail') {
+      setIconColor('light');
+    } else {
+      setIconColor('dark');
+    }
+  }, [player.color]);
 
   const handleCounterChange = (
     updatedCounterTotal: number,
@@ -93,7 +106,13 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
         {useCommanderDamage && (
           <ExtraCounter
             rotation={player.settings.rotation}
-            Icon={<CommanderTax size={iconSize} opacity="0.5" color="black" />}
+            Icon={
+              <CommanderTax
+                size={iconSize}
+                data-contrast={iconColor}
+                className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+              />
+            }
             type={CounterType.CommanderTax}
             counterTotal={
               player.extraCounters?.find(
@@ -108,7 +127,13 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
         {Boolean(useCommanderDamage && usePartner) && (
           <ExtraCounter
             rotation={player.settings.rotation}
-            Icon={<PartnerTax size={iconSize} opacity="0.5" color="black" />}
+            Icon={
+              <PartnerTax
+                size={iconSize}
+                data-contrast={iconColor}
+                className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+              />
+            }
             type={CounterType.PartnerTax}
             counterTotal={
               player.extraCounters?.find(
@@ -123,7 +148,13 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
         {usePoison && (
           <ExtraCounter
             rotation={player.settings.rotation}
-            Icon={<Poison size={iconSize} opacity="0.5" color="black" />}
+            Icon={
+              <Poison
+                size={iconSize}
+                data-contrast={iconColor}
+                className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+              />
+            }
             type={CounterType.Poison}
             counterTotal={
               player.extraCounters?.find((counter) => counter.type === 'poison')
@@ -137,7 +168,13 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
         {useEnergy && (
           <ExtraCounter
             rotation={player.settings.rotation}
-            Icon={<Energy size={iconSize} opacity="0.5" color="black" />}
+            Icon={
+              <Energy
+                size={iconSize}
+                data-contrast={iconColor}
+                className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+              />
+            }
             type={CounterType.Energy}
             counterTotal={
               player.extraCounters?.find((counter) => counter.type === 'energy')
@@ -151,7 +188,13 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
         {useExperience && (
           <ExtraCounter
             rotation={player.settings.rotation}
-            Icon={<Experience size={iconSize} opacity="0.5" color="black" />}
+            Icon={
+              <Experience
+                size={iconSize}
+                data-contrast={iconColor}
+                className="data-[contrast=dark]:text-icons-dark data-[contrast=light]:text-icons-light"
+              />
+            }
             type={CounterType.Experience}
             counterTotal={
               player.extraCounters?.find(

src/Components/Player/PlayerMenu.tsx

@@ -5,7 +5,6 @@ import { theme } from '../../Data/theme';
 import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
 import { usePlayers } from '../../Hooks/usePlayers';
 import { useSafeRotate } from '../../Hooks/useSafeRotate';
-import { HexColorPicker } from 'react-colorful';
 import {
   Energy,
   Exit,
@@ -18,6 +17,7 @@ import {
 } from '../../Icons/generated';
 import { Player, Rotation } from '../../Types/Player';
 import { RotationDivProps } from '../Buttons/CommanderDamage';
+import { ColorPicker } from '../ColorPicker';
 
 const CheckboxContainer = twc.div``;
 
@@ -66,7 +66,7 @@ const ButtonsSections = twc.div`
   flex-wrap
 `;
 
-const ColorPicker = twc.button`
+const ColorPickerButton = twc.button`
   h-[8vmax]
   w-[8vmax]
   max-h-12
@@ -158,12 +158,11 @@ const PlayerMenu = ({
       >
         <BetterRowContainer>
           <TogglesSection>
-            <ColorPicker
+            <ColorPickerButton
               style={{ backgroundColor: player.color }}
               onClick={() => colorPickerDialogRef.current?.show()}
               aria-label="Color picker"
             />
-            {/* <HexColorPicker color={player.color} onChange={handleColorChange} /> */}
             {player.settings.useCommanderDamage && (
               <CheckboxContainer>
                 <Checkbox
@@ -361,17 +360,22 @@ const PlayerMenu = ({
             </div>
           </div>
         </dialog>
+
         <dialog
           ref={colorPickerDialogRef}
           className="z-[9999] size-full bg-background-settings"
           onClick={() => colorPickerDialogRef.current?.close()}
         >
           <div className="flex justify-center items-center size-full">
-            <HexColorPicker
+            {/* <HexColorPicker
               color={player.color}
               onChange={handleColorChange}
-              style={{ height: '80%', width: '60%' }}
+              style={{
-            />
+                height: '80%',
+                width: '60%',
+              }}
+            /> */}
+            <ColorPicker onChange={handleColorChange} />
           </div>
         </dialog>
       </SettingsContainer>

src/Utils/checkContrast.ts

@@ -0,0 +1,87 @@
+type RGBA = {
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+};
+
+export const hexToRgb = (hex: string): RGBA => {
+  hex = hex.replace(/^#/, '');
+  let alpha = 255;
+
+  if (hex.length === 8) {
+    alpha = parseInt(hex.slice(6, 8), 16);
+    hex = hex.substring(0, 6);
+  }
+
+  if (hex.length === 4) {
+    alpha = parseInt(hex.slice(3, 4).repeat(2), 16);
+    hex = hex.substring(0, 3);
+  }
+
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+
+  const num = parseInt(hex, 16);
+  const red = num >> 16;
+  const green = (num >> 8) & 255;
+  const blue = num & 255;
+
+  return { red, green, blue, alpha };
+};
+
+export const luminance = (a: number, b: number) => {
+  const l1 = Math.max(a, b);
+  const l2 = Math.min(a, b);
+  return (l1 + 0.05) / (l2 + 0.05);
+};
+
+export const rgbContrast = (a: RGBA, b: RGBA) => {
+  return luminance(relativeLuminance(a), relativeLuminance(b));
+};
+
+// calculate the color contrast ratio
+export const checkContrast = (hexC1: string, hexC2: string) => {
+  const color1rgb = hexToRgb(hexC1);
+  const color2rgb = hexToRgb(hexC2);
+
+  const contrast = rgbContrast(color1rgb, color2rgb);
+
+  if (contrast >= 7) {
+    return 'AAA';
+  }
+
+  if (contrast >= 4.5) {
+    return 'AA';
+  }
+
+  if (contrast >= 3) {
+    return 'AA Large';
+  }
+
+  return 'Fail';
+};
+
+// red, green, and blue coefficients
+const rc = 0.2126;
+const gc = 0.7152;
+const bc = 0.0722;
+// low-gamma adjust coefficient
+const lowc = 1 / 12.92;
+
+function adjustGamma(_) {
+  return Math.pow((_ + 0.055) / 1.055, 2.4);
+}
+
+export const relativeLuminance = (rgb: RGBA) => {
+  const rsrgb = rgb.red / 255;
+  const gsrgb = rgb.green / 255;
+  const bsrgb = rgb.blue / 255;
+
+  const r = rsrgb <= 0.03928 ? rsrgb * lowc : adjustGamma(rsrgb);
+  const g = gsrgb <= 0.03928 ? gsrgb * lowc : adjustGamma(gsrgb);
+  const b = bsrgb <= 0.03928 ? bsrgb * lowc : adjustGamma(bsrgb);
+
+  return r * rc + g * gc + b * bc;
+};

tailwind.config.ts

@@ -54,6 +54,10 @@ export default {
           backdrop: 'rgba(0, 0, 0, 0.3)',
           settings: 'rgba(20, 20, 0, 0.9)',
         },
+        icons: {
+          dark: '#000000',
+          light: '#FFFFFF',
+        },
         text: {
           primary: '#F5F5F5',
           secondary: '#76A6A5',