better color picker

package.json

@@ -20,6 +20,7 @@
     "firebase": "^10.3.0",
     "ga-4-react": "^0.1.281",
     "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
     "react-screen-wake-lock": "^3.0.2",
     "react-swipeable": "^7.0.1",

src/Components/Buttons/LoseButton.tsx

@@ -7,7 +7,7 @@ const LoseButton = twc.div<RotationDivProps>((props) => [
   'absolute flex-grow border-none outline-none cursor-pointer bg-interface-loseButton-background rounded-lg select-none z-[1] webkit-user-select-none py-2 px-4 ',
 
   props.$rotation === Rotation.SideFlipped || props.$rotation === Rotation.Side
-    ? `left-[19%]`
+    ? `left-[21%]`
     : 'top-[21%]',
 ]);
 

src/Components/Player/PlayerMenu.tsx

@@ -5,6 +5,7 @@ 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,
@@ -65,17 +66,12 @@ const ButtonsSections = twc.div`
   flex-wrap
 `;
 
-const ColorPicker = twc.input`
+const ColorPicker = twc.button`
   h-[8vmax]
   w-[8vmax]
   max-h-12
-  max-w-11
+  max-w-12
-  border-none
+  rounded-full
-  outline-none
-  cursor-pointer
-  bg-transparent
-  user-select-none
-  text-common-white
 `;
 
 const SettingsContainer = twc.div<RotationDivProps>((props) => [
@@ -97,7 +93,8 @@ const PlayerMenu = ({
   isShown,
 }: PlayerMenuProps) => {
   const settingsContainerRef = useRef<HTMLDivElement | null>(null);
-  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const resetGameDialogRef = useRef<HTMLDialogElement | null>(null);
+  const colorPickerDialogRef = useRef<HTMLDialogElement | null>(null);
 
   const { isSide } = useSafeRotate({
     rotation: player.settings.rotation,
@@ -107,8 +104,8 @@ const PlayerMenu = ({
   const { fullscreen, wakeLock, goToStart } = useGlobalSettings();
   const { updatePlayer, resetCurrentGame } = usePlayers();
 
-  const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleColorChange = (newColor: string) => {
-    const updatedPlayer = { ...player, color: event.target.value };
+    const updatedPlayer = { ...player, color: newColor };
     updatePlayer(updatedPlayer);
   };
 
@@ -162,12 +159,11 @@ const PlayerMenu = ({
         <BetterRowContainer>
           <TogglesSection>
             <ColorPicker
-              type="color"
+              style={{ backgroundColor: player.color }}
-              value={player.color}
+              onClick={() => colorPickerDialogRef.current?.show()}
-              onChange={handleColorChange}
-              role="button"
               aria-label="Color picker"
             />
+            {/* <HexColorPicker color={player.color} onChange={handleColorChange} /> */}
             {player.settings.useCommanderDamage && (
               <CheckboxContainer>
                 <Checkbox
@@ -196,7 +192,6 @@ const PlayerMenu = ({
                 />
               </CheckboxContainer>
             )}
-
             <CheckboxContainer>
               <Checkbox
                 name="usePoison"
@@ -223,7 +218,6 @@ const PlayerMenu = ({
                 aria-label="Poison"
               />
             </CheckboxContainer>
-
             <CheckboxContainer>
               <Checkbox
                 name="useEnergy"
@@ -250,7 +244,6 @@ const PlayerMenu = ({
                 aria-label="Energy"
               />
             </CheckboxContainer>
-
             <CheckboxContainer>
               <Checkbox
                 name="useExperience"
@@ -331,7 +324,7 @@ const PlayerMenu = ({
                 fontSize: buttonFontSize,
                 padding: '4px',
               }}
-              onClick={() => dialogRef.current?.show()}
+              onClick={() => resetGameDialogRef.current?.show()}
               role="checkbox"
               aria-checked={wakeLock.active}
               aria-label="Reset Game"
@@ -341,30 +334,46 @@ const PlayerMenu = ({
           </ButtonsSections>
         </BetterRowContainer>
         <dialog
-          ref={dialogRef}
+          ref={resetGameDialogRef}
-          className="z-[9999] min-h-2/4 bg-background-default text-text-primary rounded-2xl border-none absolute bottom-[20%]"
+          className="z-[999] size-full bg-background-settings"
+          onClick={() => resetGameDialogRef.current?.close()}
         >
-          <div className="flex flex-col p-4 gap-2">
+          <div className="flex size-full items-center justify-center">
-            <h1 className="text-center">Reset Game?</h1>
+            <div className="flex flex-col justify-center p-4 gap-2 bg-background-default rounded-2xl border-none">
-            <div className="flex justify-evenly gap-4">
+              <h1 className="text-center text-text-primary">Reset Game?</h1>
-              <Button
+              <div className="flex justify-evenly gap-4">
-                variant="contained"
+                <Button
-                onClick={() => dialogRef.current?.close()}
+                  variant="contained"
-              >
+                  onClick={() => resetGameDialogRef.current?.close()}
-                No
+                >
-              </Button>
+                  No
-              <Button
+                </Button>
-                variant="contained"
+                <Button
-                onClick={() => {
+                  variant="contained"
-                  handleResetGame();
+                  onClick={() => {
-                  dialogRef.current?.close();
+                    handleResetGame();
-                }}
+                    resetGameDialogRef.current?.close();
-              >
+                  }}
-                Yes
+                >
-              </Button>
+                  Yes
+                </Button>
+              </div>
             </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
+              color={player.color}
+              onChange={handleColorChange}
+              style={{ height: '80%', width: '60%' }}
+            />
+          </div>
+        </dialog>
       </SettingsContainer>
     </PlayerMenuWrapper>
   );

yarn.lock

@@ -7102,6 +7102,11 @@ re2@^1.17.7:
     nan "^2.18.0"
     node-gyp "^10.0.1"
 
+react-colorful@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"