feat(app): Monochrome colored wedge animation mode implemented

ful1e5 · Dec 8, 2023 · cce7e96 · cce7e96
1 parent 57e66e5
commit cce7e96
Show file tree

Hide file tree

Showing 11 changed files with 190 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+### What's New?
+
+-   Monochrome colored wedge animation Mode in Customize button
+
 ## [v1.0.0-alpha.1] - 07 December 2023
 
 ### What's New?

diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "react-dom": "^18.2.0",
     "sharp": "^0.32.6",
     "swr": "^2.2.4",
+    "tinycolor2": "^1.6.0",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
@@ -45,6 +46,7 @@
     "@types/node": "^20.7.1",
     "@types/react": "^18.2.23",
     "@types/react-dom": "^18.2.8",
+    "@types/tinycolor2": "^1.4.6",
     "@types/uuid": "^9.0.6",
     "autoprefixer": "^10.4.16",
     "eslint": "8.40.0",

diff --git a/src/components/ColorPicker/modal.tsx b/src/components/ColorPicker/modal.tsx
@@ -1,12 +1,15 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+
+import tinycolor from 'tinycolor2';
 import Wheel from '@uiw/react-color-wheel';
 
 import { CursorPreview } from './preview';
 import { CloseSVG, RefreshSVG } from '@components/svgs';
 
 import { generateRandomColors } from '@utils/randomColors';
+import { WATCH_COLORS } from '@root/configs';
 
 import { Color } from 'bibata/app';
 
@@ -27,7 +30,9 @@ const ColorWheelCard: React.FC<ColorWheelCardProps> = (props) => {
 
   return (
     <div className='flex flex-col justify-center items-center'>
-      <div className='font-bold text-xs sm:text-md'>{props.title}</div>
+      <div className='font-bold text-xs sm:text-md text-center'>
+        {props.title}
+      </div>
       <div className='text-xl sm:text mt-2 p-2'>{props.children}</div>
       <input
         type='text'
@@ -68,16 +73,48 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
     }
   });
 
+  const [monochromeMode, setMonochromeMode] = useState(false);
+
   const defaultColor = generateRandomColors();
-  const [baseColor, setBaseColor] = useState<string>(defaultColor[0]);
-  const [outlineColor, setOutlineColor] = useState<string>(defaultColor[1]);
-  const [watchColor, setWatchColor] = useState<string>(defaultColor[2]);
+  const [baseColor, setBaseColor] = useState(defaultColor[0]);
+  const [outlineColor, setOutlineColor] = useState(defaultColor[1]);
+  const [watchBGColor, setWatchBGColor] = useState(defaultColor[2]);
+  const [watchColor1, setWatchColor1] = useState(WATCH_COLORS.c1);
+  const [watchColor2, setWatchColor2] = useState(WATCH_COLORS.c2);
+  const [watchColor3, setWatchColor3] = useState(WATCH_COLORS.c3);
+  const [watchColor4, setWatchColor4] = useState(WATCH_COLORS.c4);
+
+  const watchColor = {
+    bg: watchBGColor,
+    c1: watchColor1,
+    c2: watchColor2,
+    c3: watchColor3,
+    c4: watchColor4
+  };
 
   const refreshColors = () => {
     const color = generateRandomColors();
     setBaseColor(color[0]);
     setOutlineColor(color[1]);
-    setWatchColor(color[2]);
+    setWatchBGColor(color[2]);
+
+    monoWedgeColors(color[0], color[2]);
+  };
+
+  const monoWedgeColors = (b: string = baseColor, w: string = watchBGColor) => {
+    if (monochromeMode) {
+      const pallete = tinycolor.mix(b, w, 10).monochromatic(4);
+      const colors = pallete.map((p) => p.toHexString());
+      setWatchColor1(colors[1]);
+      setWatchColor2(colors[2]);
+      setWatchColor3(colors[3]);
+      setWatchColor4(colors[0]);
+    } else {
+      setWatchColor1(WATCH_COLORS.c1);
+      setWatchColor2(WATCH_COLORS.c2);
+      setWatchColor3(WATCH_COLORS.c3);
+      setWatchColor4(WATCH_COLORS.c4);
+    }
   };
 
   const handleColorPick = () => {
@@ -104,6 +141,10 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
     }
   }, []);
 
+  useEffect(() => {
+    monoWedgeColors();
+  }, [monochromeMode]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <>
       {props.isOpen && (
@@ -112,13 +153,25 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
           className='z-20 fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black backdrop-filter backdrop-blur-xl firefox:bg-opacity-80 bg-opacity-80'>
           <div className='w-full md:w-1/2 xl:w-1/3 max-h-full overflow-y-auto p-4 m-4 rounded-3xl shadow-lg bg-black ring-1 ring-white/[.06]'>
             <div className='flex justify-between text-xs'>
+              <div className='flex gap-2 text-xs'>
+                <button
+                  className='p-1 sm:p-2 bg-white/[.1] text-white rounded-lg sm:rounded-2xl hover:bg-green-400 active:bg-green-200 hover:text-black'
+                  onClick={refreshColors}>
+                  <RefreshSVG />
+                </button>
+
+                <button
+                  className={`p-1 sm:p-2 w-10 sm:w-20 rounded-lg sm:rounded-2xl text-xs sm:text-lg font-black ${
+                    monochromeMode
+                      ? 'bg-white text-black'
+                      : 'bg-gradient-to-br from-blue-500 via-voilet-500 to-pink-500 text-white'
+                  }`}
+                  onClick={() => setMonochromeMode((b) => !b)}>
+                  {monochromeMode ? '1' : <>&infin;</>}
+                </button>
+              </div>
               <button
-                className='p-2 bg-[#93f5d2] text-black rounded-2xl hover:bg-[#d9c57f] active:bg-[#ffc68f]'
-                onClick={refreshColors}>
-                <RefreshSVG />
-              </button>
-              <button
-                className='p-3 bg-gray-500 text-white rounded-2xl font-bold hover:bg-gray-400'
+                className='p-2 sm:p-3 bg-white/[.1] text-white rounded-lg sm:rounded-2xl font-bold hover:bg-white hover:text-black'
                 onClick={props.onClose}>
                 <CloseSVG />
               </button>
@@ -130,7 +183,10 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
                 watch={watchColor}
               />
             </div>
-            <div className='mt-8 grid grid-cols-3 gap-10'>
+            <div
+              className={`mt-8 grid gap-10 ${
+                monochromeMode ? 'grid-cols-3' : 'grid-cols-2 sm:grid-cols-3'
+              }`}>
               <ColorWheelCard
                 title='Base'
                 value={baseColor}
@@ -160,18 +216,78 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
               </ColorWheelCard>
 
               <ColorWheelCard
-                title='Watch BG'
-                value={watchColor}
-                onChange={(c) => setWatchColor(c)}>
+                title='Watch Background'
+                value={watchBGColor}
+                onChange={(c) => setWatchBGColor(c)}>
                 <Wheel
                   width={wheelSize}
                   height={wheelSize}
-                  color={watchColor}
+                  color={watchBGColor}
                   onChange={(cr) => {
-                    setWatchColor(cr.hex);
+                    setWatchBGColor(cr.hex);
                   }}
                 />
               </ColorWheelCard>
+
+              {!monochromeMode && (
+                <>
+                  <ColorWheelCard
+                    title='Watch Color 1'
+                    value={watchColor1}
+                    onChange={(c) => setWatchColor1(c)}>
+                    <Wheel
+                      width={wheelSize}
+                      height={wheelSize}
+                      color={watchColor1}
+                      onChange={(cr) => {
+                        setWatchColor1(cr.hex);
+                      }}
+                    />
+                  </ColorWheelCard>
+
+                  <ColorWheelCard
+                    title='Watch Color 2'
+                    value={watchColor2}
+                    onChange={(c) => setWatchColor2(c)}>
+                    <Wheel
+                      width={wheelSize}
+                      height={wheelSize}
+                      color={watchColor2}
+                      onChange={(cr) => {
+                        setWatchColor2(cr.hex);
+                      }}
+                    />
+                  </ColorWheelCard>
+
+                  <ColorWheelCard
+                    title='Watch Color 3'
+                    value={watchColor3}
+                    onChange={(c) => setWatchColor3(c)}>
+                    <Wheel
+                      width={wheelSize}
+                      height={wheelSize}
+                      color={watchColor3}
+                      onChange={(cr) => {
+                        setWatchColor3(cr.hex);
+                      }}
+                    />
+                  </ColorWheelCard>
+
+                  <ColorWheelCard
+                    title='Watch Color 4'
+                    value={watchColor4}
+                    onChange={(c) => setWatchColor4(c)}>
+                    <Wheel
+                      width={wheelSize}
+                      height={wheelSize}
+                      color={watchColor4}
+                      onChange={(cr) => {
+                        setWatchColor4(cr.hex);
+                      }}
+                    />
+                  </ColorWheelCard>
+                </>
+              )}
             </div>
             <div className='mt-11 flex justify-center'>
               <button

diff --git a/src/components/ColorPicker/preview.tsx b/src/components/ColorPicker/preview.tsx
@@ -5,7 +5,13 @@ import React from 'react';
 type Props = {
   base: string;
   outline: string;
-  watch?: string;
+  watch: {
+    bg: string;
+    c1: string;
+    c2: string;
+    c3: string;
+    c4: string;
+  };
 };
 
 export const CursorPreview: React.FC<Props> = (props) => {
@@ -26,7 +32,7 @@ export const CursorPreview: React.FC<Props> = (props) => {
         cx='118'
         cy='162'
         r='70.5'
-        fill={props.watch || props.base}
+        fill={props.watch.bg}
         stroke={props.outline}
         strokeWidth='17'
       />
@@ -44,7 +50,7 @@ export const CursorPreview: React.FC<Props> = (props) => {
               />
               <path
                 fillOpacity='0.8'
-                fill='#f05125'
+                fill={props.watch.c3}
                 d='M50 50L50 0A50 50 0 0 1 100 50Z'
               />
             </g>
@@ -59,7 +65,7 @@ export const CursorPreview: React.FC<Props> = (props) => {
               />
               <path
                 fillOpacity='0.8'
-                fill='#fdb813'
+                fill={props.watch.c4}
                 d='M50 50L50 0A50 50 0 0 1 100 50Z'
                 transform='rotate(90 50 50)'
               />
@@ -75,7 +81,7 @@ export const CursorPreview: React.FC<Props> = (props) => {
               />
               <path
                 fillOpacity='0.8'
-                fill='#7fbb42'
+                fill={props.watch.c2}
                 d='M50 50L50 0A50 50 0 0 1 100 50Z'
                 transform='rotate(180 50 50)'
               />
@@ -91,7 +97,7 @@ export const CursorPreview: React.FC<Props> = (props) => {
               />
               <path
                 fillOpacity='0.8'
-                fill='#32a0da'
+                fill={props.watch.c1}
                 d='M50 50L50 0A50 50 0 0 1 100 50Z'
                 transform='rotate(270 50 50)'
               />

diff --git a/src/components/Cursors/card.tsx b/src/components/Cursors/card.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { DELAYS, COLORS_MASK as mask } from '@root/configs';
+import { DELAYS, WATCH_COLORS, COLORS_MASK as mask } from '@root/configs';
 
 import { fetchX } from '@utils/fetchX';
 
@@ -43,7 +43,11 @@ export const CursorCard: React.FC<Props> = (props) => {
   const colors = {
     [mask.base]: base,
     [mask.outline]: outline,
-    [mask.watch]: watch || base
+    [mask.watch?.bg!]: watch?.bg || base,
+    [mask.watch?.c1!]: watch?.c1 || WATCH_COLORS.c1,
+    [mask.watch?.c2!]: watch?.c2 || WATCH_COLORS.c2,
+    [mask.watch?.c3!]: watch?.c3 || WATCH_COLORS.c3,
+    [mask.watch?.c4!]: watch?.c4 || WATCH_COLORS.c4
   };
 
   const fetchSvg = async (signal: AbortSignal) => {

diff --git a/src/components/DownloadButton/index.tsx b/src/components/DownloadButton/index.tsx
@@ -12,6 +12,7 @@ import { DownloadError } from './error';
 import { LockSVG, ProcessingSVG } from '@components/svgs';
 
 import { Platform, Type } from '@prisma/client';
+import { AddDownloadData } from '@services/download';
 import { Color, Image, ErrorLogs } from 'bibata/app';
 import { AuthToken } from 'bibata/core-api/types';
 import { DownloadFile } from 'bibata/core-api/responses';
@@ -128,8 +129,8 @@ export const DownloadButton: React.FC<Props> = (props) => {
           type: type as Type,
           baseColor: color.base,
           outlineColor: color.outline,
-          watchBGColor: color.watch || color.base
-        })
+          watchBGColor: color.watch?.bg || color.base
+        } as AddDownloadData['data'])
       });
     } catch (e) {
       updateErrorLogs({

diff --git a/src/components/svgs/close.tsx b/src/components/svgs/close.tsx
@@ -8,7 +8,7 @@ type Props = {};
 export const CloseSVG: React.FC<Props> = (_props) => {
   return (
     <svg
-      className='fill-current w-4'
+      className='fill-current w-2 sm:w-4'
       viewBox='0 0 100 100'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'>

diff --git a/src/components/svgs/refresh.tsx b/src/components/svgs/refresh.tsx
@@ -8,7 +8,7 @@ type Props = {};
 export const RefreshSVG: React.FC<Props> = (_props) => {
   return (
     <svg
-      className='fill-current w-6'
+      className='fill-current w-4 sm:w-6'
       fill='none'
       viewBox='0 0 100 100'
       xmlns='http://www.w3.org/2000/svg'>

diff --git a/src/configs.ts b/src/configs.ts
@@ -1,4 +1,4 @@
-import { Colors, Delays } from 'bibata/app';
+import { Color, Colors, Delays } from 'bibata/app';
 
 export const VERSIONS = ['1.0.0-alpha.0', '1.0.0-alpha.1'];
 
@@ -13,14 +13,21 @@ export const TYPES = ['Modern', 'Original'];
 
 export const SIZES = [16, 20, 22, 24, 28, 32, 40, 48, 56, 64, 72, 80, 88, 96];
 
-export const COLORS_MASK = {
+export const WATCH_COLORS = {
+  c1: '#32a0da',
+  c2: '#7eba41',
+  c3: '#f05024',
+  c4: '#fcb813'
+};
+
+export const COLORS_MASK: Color = {
   base: '#00ff00',
   outline: '#0000ff',
-  watch: '#ff0000'
+  watch: { bg: '#ff0000', ...WATCH_COLORS }
 };
 
 export const COLORS: Colors = {
-  Amber: { base: '#ff8300', outline: '#ffffff', watch: '#001524' },
+  Amber: { base: '#ff8300', outline: '#ffffff', watch: { bg: '#001524' } },
   Classic: { base: '#000000', outline: '#ffffff' },
   Ice: { base: '#ffffff', outline: '#000000' }
 };