{"version":3,"sources":["utils/contextProvider.tsx","components/circularSlider/reducer.js","components/circularSlider/useEventListener.js","components/circularSlider/knob.js","components/circularSlider/labels.js","components/circularSlider/svg.js","components/circularSlider/index.js","components/leftMenu.tsx","utils/save.tsx","components/colorWheel.tsx","components/gradientBuilder.tsx","components/colorModal.tsx","utils/viewbox.tsx","components/rightMenu.tsx","components/footer.tsx","components/App.tsx","serviceWorker.ts","index.tsx"],"names":["initialState","rotationDegree","flipDirection","pressedKey","wheelDirection","wheelActive","scaleVector","svgTransform","pickedHair","pickedBody","pickedFace","pickedFacialHair","pickedAccessory","pickedSection","strokeColor","backgroundBasicColor","backgroundFirstGradientColor","backgroundSecondGradientColor","firstColor","secondColor","isFrameTransparent","Context","React","createContext","state","dispatch","reducer","action","type","payload","Object","assign","updatedState","degree","dispatchedData","Provider","children","useReducer","value","useProvider","useContext","Error","winObj","window","useEventListener","eventName","handler","element","savedHandler","useRef","useEffect","current","addEventListener","eventListener","event","passive","removeEventListener","Knob","isDragging","knobPosition","knobColor","knobRadius","knobSize","onMouseDown","trackSize","styles","knob","position","left","top","cursor","zIndex","dragging","pause","animationPlayState","animation","transformOrigin","animationTimingFunction","style","transform","x","y","onTouchStart","width","height","viewBox","fill","fillOpacity","stroke","cx","cy","r","Labels","labelColor","labelBottom","labelFontSize","valueFontSize","appendToValue","prependToValue","verticalOffset","hideLabelValue","label","labels","display","flexDirection","justifyContent","alignItems","color","userSelect","fontSize","bottomMargin","marginBottom","appended","right","prepended","hide","Svg","direction","strokeDasharray","strokeDashoffset","progressColorFrom","progressColorTo","trackColor","progressSize","svgFullPath","radiansOffset","progressLineCap","svg","path","halfTrack","radius","overflow","id","x1","x2","offset","stopColor","strokeWidth","ref","strokeLinecap","d","pageXOffset","pageYOffset","docObj","documentElement","scrollLeft","scrollTop","document","touchSupported","SLIDER_EVENT","DOWN","UP","MOVE","knobOffset","Math","PI","bottom","getSliderRotation","number","getRadians","degrees","generateRange","min","max","rangeOfNumbers","i","push","offsetRelativeToDocument","rect","getBoundingClientRect","circularSlider","opacity","transition","mounted","CircularSlider","data","dataIndex","onChange","radians","dashFullArray","dashFullOffset","setKnobPosition","useCallback","offsetRadians","dashOffset","pointsInCircle","length","currentPoint","round","cos","sin","onMouseMove","touch","preventDefault","changedTouches","mouseXFromCenter","pageX","mouseYFromCenter","pageY","atan2","getTotalLength","dataArrayLength","knobPositionIndex","split","join","railStyle","backgroundColor","borderRadius","trackStyle","dotStyle","marginLeft","border","verticalAlign","activeDotStyle","marginTop","touchAction","LeftMenu","useState","leftMenuVisibility","setLeftMenuVisibility","querySelector","remove","querySelectorAll","forEach","innerWidth","updateRotationDegree","wheelEvent","deltaY","updateScaleVector","vector","rotate","flip","handleScaleChange","handleScaleMouseWheel","nativeEvent","handleRotateDegreeChange","handleFlipButtonClick","handleDrawerButtonClick","renderScaleMeter","useMemo","className","onWheel","defaultValue","marks","0.5","0.75","1","1.25","1.5","step","renderRotateMeter","renderFlipper","onClick","textAlign","downloadResource","resource","name","FileSaver","ColorWheel","target","colorDispatchKeyHolder","keys","disableAlpha","pickedColor","requestType","hex","GradientBuilder","foregroundFirstGradientColor","foregroundSecondGradientColor","gradientDegree","setGradientDegree","firstColorBoxClicked","setFirstColorBoxClicked","secondColorBoxClicked","setSecondColorBoxClicked","handleColorChange","caller","isValidHex","handleMouseWheel","handleFirstColorBoxClick","handleSecondColorBoxClick","renderColorWheel","renderHelper","renderGradientPreviewer","background","renderColorHexInputs","input","outline","boxShadow","padding","boxSizing","renderColorBoxes","title","ColorModal","displayColorPicker","setDisplayColorPicker","colorType","setColorType","initialColors","handlePickerVisibiltyChange","isVisible","adjustStrokeColor","handleColorTypeChange","renderBasicPalette","triangle","colors","renderGradientPalette","isSittingPose","pose","SittingPose","includes","isStandingPose","StandingPose","adjustPeepsViewbox","bodyPiece","RightMenu","pieceKeys","setPieceKeys","hairKeys","bodyKeys","faceKeys","facialHairKeys","accessoryKeys","Hair","BustPose","Face","FacialHair","Accessories","updateHair","hair","updateBody","body","updateFace","face","updateFacialHair","facialHair","updateFrameType","isTransparent","updateAccessory","accessory","randomizePeep","floor","random","handlePieceSectionClick","section","updateSection","isPieceChecked","piece","adjustSvgViewbox","handlePieceItemClick","renderPieceList","pieces","map","index","key","checked","readOnly","createElement","renderPiece","handleSaveSvgButtonClick","svgEl","setAttribute","svgData","outerHTML","svgBlob","Blob","saveSvg","handleSavePngButtonClick","canvas","canvasContext","getContext","DOMURL","self","URL","webkitURL","image","Image","url","createObjectURL","appendChild","onload","drawImage","revokeObjectURL","toBlob","pngBlob","removeChild","src","savePng","renderSelectedPieceSet","pickedSectionObject","renderSaveButtons","rendererRandomizerButton","renderColorPicker","renderFrameOptions","Footer","href","rel","alignSelf","PeepsGenerator","illustrationRef","handleMouseEnter","handleMouseLeave","peepGroupWrapper","getBBox","getElementsByClassName","focus","undefined","tabIndex","onMouseEnter","onMouseLeave","onKeyDown","onKeyUp","setTimeout","wrapperBackground","isLocalhost","Boolean","location","hostname","match","registerValidSW","swUrl","config","navigator","serviceWorker","register","then","registration","onupdatefound","installingWorker","installing","onstatechange","controller","console","log","onUpdate","onSuccess","catch","error","ReactDOM","hydrate","getElementById","process","origin","fetch","headers","response","contentType","get","status","indexOf","ready","unregister","reload","checkValidServiceWorker"],"mappings":"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","file":"static/js/main.6574a714.chunk.js","sourcesContent":["import React, { useReducer, useContext } from 'react';\nimport { StateKeys, ContextProps, ProviderProps } from './types';\n\nconst initialState: StateKeys = {\n\trotationDegree: 0,\n\tflipDirection: 1,\n\tpressedKey: '',\n\twheelDirection: '',\n\twheelActive: false,\n\tscaleVector: 1,\n\tsvgTransform: {},\n\tpickedHair: 'HatHip',\n\tpickedBody: 'PointingUp',\n\tpickedFace: 'Smile',\n\tpickedFacialHair: 'None',\n\tpickedAccessory: 'None',\n\tpickedSection: 'Accessories',\n\tstrokeColor: '#000000',\n\tbackgroundBasicColor: '#FFD55A',\n\tbackgroundFirstGradientColor: '#81087F',\n\tbackgroundSecondGradientColor: '#ffd402',\n\tfirstColor: '#81087F',\n\tsecondColor: '#ffd402',\n\tisFrameTransparent: false,\n};\n\nexport const Context = React.createContext<ContextProps>({\n\tstate: initialState,\n\tdispatch: () => {},\n});\n\nconst reducer = (state: any, action: any) => {\n\tswitch (action.type) {\n\t\tcase 'SET_ROTATION_DEGREE':\n\t\t\tstate.rotationDegree = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_FLIP_DIRECTION':\n\t\t\tstate.flipDirection = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_PRESSED_KEY':\n\t\t\tstate.pressedKey = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_WHEEL_DIRECTION':\n\t\t\tstate.wheelDirection = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_IS_WHEEL_ACTIVE':\n\t\t\tstate.wheelActive = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_SVG_TRANSFORM':\n\t\t\tstate.svgTransform = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_SCALE_VECTOR':\n\t\t\tstate.scaleVector = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_HAIR':\n\t\t\tstate.pickedHair = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_BODY':\n\t\t\tstate.pickedBody = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_FACE':\n\t\t\tstate.pickedFace = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_FACIAL_HAIR':\n\t\t\tstate.pickedFacialHair = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_ACCESSORY':\n\t\t\tstate.pickedAccessory = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_PIECE_SECTION':\n\t\t\tstate.pickedSection = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_STROKE_COLOR':\n\t\t\tconst updatedState = action.payload;\n\t\t\t// check if payload comes from the colorWheel\n\t\t\tif (typeof action.payload === 'object' && !action.payload.degree) {\n\t\t\t\tupdatedState.degree = state.strokeColor.degree;\n\n\t\t\t\t// Find which color has updated on the gradient builder's color picker\n\t\t\t\tif (!updatedState.secondColor) {\n\t\t\t\t\t// assing back the original second color\n\t\t\t\t\tupdatedState.secondColor = state.strokeColor.secondColor;\n\t\t\t\t}\n\t\t\t\tif (!updatedState.firstColor) {\n\t\t\t\t\t// assing back the original first color\n\t\t\t\t\tupdatedState.firstColor = state.strokeColor.firstColor;\n\t\t\t\t}\n\t\t\t}\n\t\t\tstate.strokeColor = updatedState;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_BACKGROUND_BASIC_COLOR':\n\t\t\tconst dispatchedData = action.payload;\n\t\t\t// check if payload comes from the colorWheel\n\t\t\tif (typeof action.payload === 'object' && !action.payload.degree) {\n\t\t\t\tdispatchedData.degree = state.backgroundBasicColor.degree;\n\n\t\t\t\t// Find which color has updated on the gradient builder's color picker\n\t\t\t\tif (!dispatchedData.secondColor) {\n\t\t\t\t\t// assing back the original second color\n\t\t\t\t\tdispatchedData.secondColor = state.backgroundBasicColor.secondColor;\n\t\t\t\t}\n\t\t\t\tif (!dispatchedData.firstColor) {\n\t\t\t\t\t// assing back the original first color\n\t\t\t\t\tdispatchedData.firstColor = state.backgroundBasicColor.firstColor;\n\t\t\t\t}\n\t\t\t}\n\t\t\tstate.backgroundBasicColor = dispatchedData;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_FOREGROUND_FIRST_COLOR':\n\t\t\tstate.firstColor = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_FOREGROUND_SECOND_COLOR':\n\t\t\tstate.secondColor = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_BACKGROUND_FIRST_GRADIENT_COLOR':\n\t\t\tstate.backgroundFirstGradientColor = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_BACKGROUND_SECOND_GRADIENT_COLOR':\n\t\t\tstate.backgroundSecondGradientColor = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tcase 'SET_FRAME_TYPE':\n\t\t\tstate.isFrameTransparent = action.payload;\n\t\t\treturn Object.assign({}, state);\n\t\tdefault:\n\t\t\tbreak;\n\t}\n};\n\nexport const Provider: React.FC<ProviderProps> = ({ children }) => {\n\tconst [state, dispatch] = useReducer(reducer, initialState);\n\n\treturn (\n\t\t<Context.Provider value={{ state, dispatch }}>{children}</Context.Provider>\n\t);\n};\n\nexport const useProvider = () => useContext(Context);\n","const reducer = (state, action) => {\n    switch (action.type) {\n        case 'init':\n            return {\n                ...state,\n                ...action.payload,\n            };\n        case 'setKnobPosition':\n            return {\n                ...state,\n                ...action.payload,\n            };\n        case 'onMouseDown':\n        case 'onMouseUp':\n            return {\n                ...state,\n                ...action.payload,\n            };\n        case 'setInitialKnobPosition':\n            return {\n                ...state,\n                ...action.payload,\n            };\n        default:\n            throw new Error();\n    }\n};\n\nexport default reducer;\n","import {useEffect, useRef} from 'react';\n\nlet winObj = null;\n\nif (typeof window !== 'undefined') {\n    winObj = window;\n}\n\nconst useEventListener = (eventName, handler, element= winObj) => {\n    const savedHandler = useRef(null);\n\n    useEffect(() => {\n        savedHandler.current = handler;\n    }, [handler]);\n\n    useEffect(() => {\n            if(winObj === null) return;\n            const isSupported = element && element.addEventListener;\n            if (!isSupported) return;\n\n            // Create event listener that calls handler function stored in ref\n            const eventListener = event => savedHandler.current(event);\n\n            element.addEventListener(eventName, eventListener, {passive: false});\n            return () => {\n                element.removeEventListener(eventName, eventListener);\n            };\n        },\n        [eventName, element]\n    );\n};\n\nexport default useEventListener;","import React, { Fragment } from 'react';\n\nconst Knob = ({\n\tisDragging,\n\tknobPosition,\n\tknobColor,\n\tknobRadius = 12,\n\tknobSize = 36,\n\tonMouseDown,\n\ttrackSize,\n\tchildren,\n}) => {\n\tconst styles = {\n\t\tknob: {\n\t\t\tposition: 'absolute',\n\t\t\tleft: `-${knobSize / 2 - trackSize / 2}px`,\n\t\t\ttop: `-${knobSize / 2 - trackSize / 2}px`,\n\t\t\tcursor: 'grab',\n\t\t\tzIndex: 3,\n\t\t},\n\n\t\tdragging: {\n\t\t\tcursor: 'grabbing',\n\t\t},\n\n\t\tpause: {\n\t\t\tanimationPlayState: 'paused',\n\t\t},\n\n\t\tanimation: {\n\t\t\ttransformOrigin: '50% 50%',\n\t\t\tanimationTimingFunction: 'ease-out',\n\t\t\tanimation: 'pulse 1500ms infinite',\n\t\t},\n\t};\n\n\tconst defaultKnobIcon = () => {\n\t\treturn (\n\t\t\t<Fragment>\n\t\t\t\t<rect fill='#FFFFFF' x='14' y='14' width='8' height='1' />\n\t\t\t\t<rect fill='#FFFFFF' x='14' y='17' width='8' height='1' />\n\t\t\t\t<rect fill='#FFFFFF' x='14' y='20' width='8' height='1' />\n\t\t\t</Fragment>\n\t\t);\n\t};\n\n\tconst customKnobIcon = () => children;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\ttransform: `translate(${knobPosition.x}px, ${knobPosition.y}px)`,\n\t\t\t\t...styles.knob,\n\t\t\t\t...(isDragging && styles.dragging),\n\t\t\t}}\n\t\t\tonMouseDown={onMouseDown}\n\t\t\tonTouchStart={onMouseDown}>\n\t\t\t<svg\n\t\t\t\twidth={`${knobSize}px`}\n\t\t\t\theight={`${knobSize}px`}\n\t\t\t\tviewBox={`0 0 ${knobSize} ${knobSize}`}>\n\t\t\t\t<circle\n\t\t\t\t\tstyle={{ ...styles.animation, ...(isDragging && styles.pause) }}\n\t\t\t\t\tfill={knobColor}\n\t\t\t\t\tfillOpacity='0.2'\n\t\t\t\t\tstroke='none'\n\t\t\t\t\tcx={knobSize / 2}\n\t\t\t\t\tcy={knobSize / 2}\n\t\t\t\t\tr={knobSize / 2}\n\t\t\t\t/>\n\t\t\t\t<circle\n\t\t\t\t\tfill={knobColor}\n\t\t\t\t\tstroke='none'\n\t\t\t\t\tcx={knobSize / 2}\n\t\t\t\t\tcy={knobSize / 2}\n\t\t\t\t\tr={knobRadius}\n\t\t\t\t/>\n\t\t\t\t{children ? customKnobIcon() : defaultKnobIcon()}\n\t\t\t</svg>\n\t\t</div>\n\t);\n};\n\nexport default Knob;\n","import React from 'react';\n\nconst Labels = ({\n\tlabelColor,\n\tlabelBottom,\n\tlabelFontSize,\n\tvalueFontSize,\n\tappendToValue,\n\tprependToValue,\n\tverticalOffset,\n\thideLabelValue,\n\tlabel,\n\tvalue,\n}) => {\n\tconst styles = {\n\t\tlabels: {\n\t\t\tposition: 'absolute',\n\t\t\ttop: '0',\n\t\t\tleft: '0',\n\t\t\twidth: '100%',\n\t\t\theight: '100%',\n\t\t\tdisplay: 'flex',\n\t\t\tflexDirection: 'column',\n\t\t\tjustifyContent: 'center',\n\t\t\talignItems: 'center',\n\t\t\tcolor: `${labelColor}`,\n\t\t\tuserSelect: 'none',\n\t\t\tzIndex: 1,\n\t\t},\n\n\t\tvalue: {\n\t\t\tfontSize: `${valueFontSize}`,\n\t\t\tposition: 'relative',\n\t\t},\n\n\t\tbottomMargin: {\n\t\t\tmarginBottom: `calc(${verticalOffset})`,\n\t\t},\n\n\t\tappended: {\n\t\t\tposition: 'absolute',\n\t\t\tright: '0',\n\t\t\ttop: '0',\n\t\t\ttransform: 'translate(100%, 0)',\n\t\t},\n\n\t\tprepended: {\n\t\t\tposition: 'absolute',\n\t\t\tleft: '0',\n\t\t\ttop: '0',\n\t\t\ttransform: 'translate(-100%, 0)',\n\t\t},\n\n\t\thide: {\n\t\t\tdisplay: 'none',\n\t\t},\n\t};\n\n\treturn (\n\t\t<div style={{ ...styles.labels, ...(hideLabelValue && styles.hide) }}>\n\t\t\t{labelBottom || <div style={{ fontSize: labelFontSize }}>{label}</div>}\n\t\t\t<div\n\t\t\t\tstyle={{ ...styles.value, ...(!labelBottom && styles.bottomMargin) }}>\n\t\t\t\t<code>\n\t\t\t\t\t<span style={styles.prepended}>{prependToValue}</span>\n\t\t\t\t\t{value}\n\t\t\t\t\t<span style={styles.appended}>{appendToValue}</span>\n\t\t\t\t</code>\n\t\t\t</div>\n\t\t\t{labelBottom && <div style={{ fontSize: labelFontSize }}>{label}</div>}\n\t\t</div>\n\t);\n};\n\nexport default Labels;\n","import React from 'react';\n\nconst Svg = ({\n         width,\n         label,\n         direction,\n         strokeDasharray,\n         strokeDashoffset,\n         progressColorFrom,\n         progressColorTo,\n         trackColor,\n         progressSize,\n         trackSize,\n         svgFullPath,\n         radiansOffset,\n         progressLineCap,\n     }) => {\n\n    const styles = ({\n        svg: {\n            position: 'relative',\n            zIndex: 2\n        },\n\n        path: {\n            transform: `rotate(${radiansOffset}rad) ${direction === -1 ? 'scale(-1, 1)' : 'scale(1, 1)'}`,\n            transformOrigin: 'center center'\n        }\n    });\n\n    const halfTrack = trackSize / 2;\n    const radius = width / 2 - halfTrack;\n\n    return (\n        <svg\n            width={`${width}px`}\n            height={`${width}px`}\n            viewBox={`0 0 ${width} ${width}`}\n            overflow=\"visible\"\n            style={styles.svg}\n        >\n            <defs>\n                <linearGradient id={label} x1=\"100%\" x2=\"0%\">\n                    <stop offset=\"0%\" stopColor={progressColorFrom}/>\n                    <stop offset=\"100%\" stopColor={progressColorTo}/>\n                </linearGradient>\n            </defs>\n            <circle\n                strokeWidth={trackSize}\n                fill=\"none\"\n                stroke={trackColor}\n                cx={width / 2}\n                cy={width / 2}\n                r={radius}\n            />\n            <path\n                style={styles.path}\n                ref={svgFullPath}\n                strokeDasharray={strokeDasharray}\n                strokeDashoffset={strokeDashoffset}\n                strokeWidth={progressSize}\n                strokeLinecap={progressLineCap !== 'round' ? 'butt' : 'round'}\n                fill=\"none\"\n                stroke={`url(#${label})`}\n                d={`\n                        M ${width / 2}, ${width / 2}\n                        m 0, -${width / 2 - halfTrack}\n                        a ${width / 2 - halfTrack},${width / 2 - halfTrack} 0 0,1 0,${width - halfTrack*2}\n                        a -${width / 2 - halfTrack},-${width / 2 - halfTrack} 0 0,1 0,-${width - halfTrack*2}\n                    `}/>\n        </svg>\n    );\n};\n\nexport default Svg;\n","import React, {useEffect, useReducer, useCallback, useRef} from 'react';\nimport reducer from \"./reducer\";\nimport useEventListener from \"./useEventListener\";\nimport Knob from \"./knob\";\nimport Labels from \"./labels\";\nimport Svg from \"./svg\";\n\n// mock window object for SSR\nlet winObj = {\n    pageXOffset: 0,\n    pageYOffset: 0\n};\n\nlet docObj = {\n    documentElement: {\n        scrollLeft: 0,\n        scrollTop: 0\n    }\n};\n\nif (typeof window !== 'undefined') {\n    winObj = window;\n    docObj = document;\n}\n\nconst touchSupported = ('ontouchstart' in winObj);\nconst SLIDER_EVENT = {\n    DOWN: touchSupported ? 'touchstart' : 'mousedown',\n    UP: touchSupported ? 'touchend' : 'mouseup',\n    MOVE: touchSupported ? 'touchmove' : 'mousemove',\n};\n\nconst spreadDegrees = 360;\nconst knobOffset = {\n    top: Math.PI / 2,\n    right: 0,\n    bottom: -Math.PI / 2,\n    left: -Math.PI\n};\n\nconst getSliderRotation = (number) => {\n    if(number < 0) return -1;\n    return 1;\n};\n\nconst getRadians = (degrees) => {\n    return degrees * Math.PI / 180;\n};\n\nconst generateRange = (min, max) => {\n    let rangeOfNumbers = [];\n    for(let i = min; i <= max; i++) {\n        rangeOfNumbers.push(i);\n    }\n    return rangeOfNumbers;\n};\n\nconst offsetRelativeToDocument = (ref) => {\n    const rect = ref.current.getBoundingClientRect();\n    const scrollLeft = winObj.pageXOffset || docObj.documentElement.scrollLeft;\n    const scrollTop = winObj.pageYOffset || docObj.documentElement.scrollTop;\n    return {top: rect.top + scrollTop, left: rect.left + scrollLeft};\n};\n\nconst styles = ({\n    circularSlider: {\n        position: 'relative',\n        display: 'inline-block',\n        opacity: 0,\n        transition: 'opacity 1s ease-in'\n    },\n\n    mounted: {\n        opacity: 1\n    },\n});\n\nconst CircularSlider = ({\n        label = 'ANGLE',\n        width = 280,\n        direction = 1,\n        min = 0,\n        max = 360,\n        knobColor = '#4e63ea',\n        knobPosition = 'top',\n        labelColor = '#272b77',\n        labelBottom = false,\n        labelFontSize = '1rem',\n        valueFontSize = '3rem',\n        appendToValue = '',\n        prependToValue = '',\n        verticalOffset = '1.5rem',\n        hideLabelValue = false,\n        progressColorFrom = '#80C3F3',\n        progressColorTo = '#4990E2',\n        progressSize = 8,\n        trackColor = '#DDDEFB',\n        trackSize = 8,\n        data = [],\n        dataIndex = 0,\n        progressLineCap = 'round',\n        children,\n        onChange = value => {},\n        style = {}\n    }) => {\n    const initialState = {\n        mounted: false,\n        isDragging: false,\n        width: width,\n        radius: width / 2,\n        knobPosition: knobPosition,\n        label: 0,\n        data: data,\n        radians: 0,\n        offset: 0,\n        knob: {\n            x: 0,\n            y: 0,\n        },\n        dashFullArray: 0,\n        dashFullOffset: 0\n    };\n\n    const [state, dispatch] = useReducer(reducer, initialState);\n    const circularSlider = useRef(null);\n    const svgFullPath = useRef(null);\n\n    const setKnobPosition = useCallback((radians) => {\n        const radius = state.radius - trackSize / 2;\n        const offsetRadians = radians + knobOffset[knobPosition];\n        let degrees = (offsetRadians > 0 ? offsetRadians\n            :\n            ((2 * Math.PI) + offsetRadians)) * (spreadDegrees / (2 * Math.PI));\n        // change direction\n        const dashOffset = (degrees / spreadDegrees) * state.dashFullArray;\n        degrees = (getSliderRotation(direction) === -1 ? spreadDegrees - degrees : degrees);\n\n        const pointsInCircle = (state.data.length - 1) / spreadDegrees;\n        const currentPoint = Math.round(degrees * pointsInCircle);\n\n        if(state.data[currentPoint] !== state.label) {\n            // props callback for parent\n            onChange(state.data[currentPoint]);\n        }\n\n        dispatch({\n            type: 'setKnobPosition',\n            payload: {\n                dashFullOffset: getSliderRotation(direction) === -1 ? dashOffset : state.dashFullArray - dashOffset,\n                label: state.data[currentPoint],\n                knob: {\n                    x: (radius * Math.cos(radians) + radius),\n                    y: (radius * Math.sin(radians) + radius),\n                }\n            }\n        });\n    }, [state.dashFullArray, state.radius, state.data, state.label, knobPosition, direction, onChange]);\n\n    const onMouseDown = () => {\n        dispatch({\n            type: 'onMouseDown',\n            payload: {\n                isDragging: true\n            }\n        });\n    };\n\n    const onMouseUp = () => {\n        dispatch({\n            type: 'onMouseUp',\n            payload: {\n                isDragging: false\n            }\n        });\n    };\n\n    const onMouseMove = useCallback((event) => {\n        if (!state.isDragging) return;\n\n        event.preventDefault();\n\n        let touch;\n        if (event.type === 'touchmove') {\n            touch = event.changedTouches[0];\n        }\n\n        const mouseXFromCenter = (event.type === 'touchmove' ? touch.pageX : event.pageX) -\n            (offsetRelativeToDocument(circularSlider).left + state.radius);\n        const mouseYFromCenter = (event.type === 'touchmove' ? touch.pageY : event.pageY) -\n            (offsetRelativeToDocument(circularSlider).top + state.radius);\n\n        const radians = Math.atan2(mouseYFromCenter, mouseXFromCenter);\n        setKnobPosition(radians);\n    }, [state.isDragging, state.radius, setKnobPosition]);\n\n    // Get svg path length onmount\n    useEffect(() => {\n        dispatch({\n            type: 'init',\n            payload: {\n                mounted: true,\n                data: state.data.length ? [...state.data] : [...generateRange(min, max)],\n                dashFullArray: svgFullPath.current.getTotalLength ? svgFullPath.current.getTotalLength() : 0,\n            }\n        });\n        // eslint-disable-next-line\n    }, [max, min]);\n\n    // Set knob position\n    useEffect(() => {\n        const dataArrayLength = state.data.length;\n        const knobPositionIndex = (dataIndex > dataArrayLength - 1) ? dataArrayLength - 1 : dataIndex;\n\n        if(!!dataArrayLength) {\n            const pointsInCircle = spreadDegrees / dataArrayLength;\n            const offset = getRadians(pointsInCircle) / 2;\n\n            dispatch({\n                type: 'setInitialKnobPosition',\n                payload: {\n                    radians: Math.PI / 2 - knobOffset[state.knobPosition],\n                    offset\n                }\n            });\n\n            if(knobPositionIndex) {\n                const degrees = getSliderRotation(direction) * knobPositionIndex * pointsInCircle;\n                const radians = getRadians(degrees) - knobOffset[state.knobPosition];\n\n                return setKnobPosition(radians+(offset*getSliderRotation(direction)));\n            }\n            setKnobPosition(-(knobOffset[state.knobPosition]*getSliderRotation(direction))+(offset*getSliderRotation(direction)));\n        }\n\n        // eslint-disable-next-line\n    }, [state.dashFullArray, state.knobPosition, state.data.length, dataIndex, direction]);\n\n    useEventListener(SLIDER_EVENT.MOVE, onMouseMove);\n    useEventListener(SLIDER_EVENT.UP, onMouseUp);\n\n    return (\n        <div style={{...styles.circularSlider, ...style, ...(state.mounted && styles.mounted)}} ref={circularSlider}>\n            <Svg\n                width={width}\n                label={label.split(\" \").join(\"\")}\n                direction={direction}\n                strokeDasharray={state.dashFullArray}\n                strokeDashoffset={state.dashFullOffset}\n                svgFullPath={svgFullPath}\n                progressSize={progressSize}\n                progressColorFrom={progressColorFrom}\n                progressColorTo={progressColorTo}\n                progressLineCap={progressLineCap}\n                trackColor={trackColor}\n                trackSize={trackSize}\n                radiansOffset={state.radians}\n            />\n            <Knob\n                isDragging={state.isDragging}\n                knobPosition={{ x: state.knob.x, y: state.knob.y }}\n                knobColor={knobColor}\n                trackSize={trackSize}\n                onMouseDown={onMouseDown}\n            >\n                {children}\n            </Knob>\n            <Labels\n                label={label}\n                labelColor={labelColor}\n                labelBottom={labelBottom}\n                labelFontSize={labelFontSize}\n                verticalOffset={verticalOffset}\n                valueFontSize={valueFontSize}\n                appendToValue={appendToValue}\n                prependToValue={prependToValue}\n                hideLabelValue={hideLabelValue}\n                value={`${state.label}`}\n            />\n        </div>\n    );\n};\n\nexport default CircularSlider;\n","import React, { useState, useEffect, useMemo } from 'react';\n// @ts-ignore\nimport CircularSlider from './circularSlider';\n// @ts-ignore\nimport Slider from 'rc-slider/lib/Slider';\nimport { useProvider } from '../utils/contextProvider';\n\nconst styles = {\n\trailStyle: {\n\t\tposition: 'absolute',\n\t\twidth: '100%',\n\t\tbackgroundColor: '#f1f3f4',\n\t\theight: '8px',\n\t\tborderRadius: '6px',\n\t},\n\ttrackStyle: {\n\t\tposition: 'absolute',\n\t\tleft: 0,\n\t\theight: '8px',\n\t\tborderRadius: '6px',\n\t\tbackgroundColor: '#FCCE5A',\n\t},\n\tdotStyle: {\n\t\tposition: 'absolute',\n\t\tbottom: '-7px',\n\t\tmarginLeft: '-8px',\n\t\twidth: '14px',\n\t\theight: '14px',\n\t\tborder: '2px solid #e9e9e9',\n\t\tbackgroundColor: '#fff',\n\t\tcursor: 'pointer',\n\t\tborderRadius: '50%',\n\t\tverticalAlign: 'middle',\n\t},\n\tactiveDotStyle: {\n\t\tposition: 'absolute',\n\t\twidth: '18px',\n\t\theight: '18px',\n\t\tcursor: 'pointer',\n\t\tmarginTop: '-5px',\n\t\tborderRadius: '50%',\n\t\tborder: 'solid 2px #000',\n\t\tbackgroundColor: '#000',\n\t\ttouchAction: 'pan-x',\n\t\tbottom: '-8px',\n\t\tmarginLeft: '-9px',\n\t\tzIndex: 2,\n\t},\n};\n\nconst LeftMenu = () => {\n\tconst { state, dispatch } = useProvider();\n\tconst {\n\t\tflipDirection,\n\t\tpressedKey,\n\t\trotationDegree,\n\t\tscaleVector,\n\t\tsvgTransform,\n\t\twheelActive,\n\t\twheelDirection,\n\t} = state;\n\tconst [leftMenuVisibility, setLeftMenuVisibility] = useState<boolean>(true);\n\n\tuseEffect(() => {\n\t\t// removes the ripple animation of circular slider\n\t\t(document.querySelector(\n\t\t\t'.rotateWrapper > div > div > div > svg > circle'\n\t\t) as HTMLElement)?.remove();\n\n\t\t// removes the stripes from the circular slide knob\n\t\tdocument\n\t\t\t.querySelectorAll('.rotateWrapper > div > div > div > svg > rect')\n\t\t\t.forEach((rect) => rect?.remove());\n\t\tif (window?.innerWidth > 1440) {\n\t\t\tdispatch({\n\t\t\t\ttype: 'SET_SCALE_VECTOR',\n\t\t\t\tpayload: 1.25,\n\t\t\t});\n\t\t}\n\t\tif (window?.innerWidth > 1900) {\n\t\t\tdispatch({\n\t\t\t\ttype: 'SET_SCALE_VECTOR',\n\t\t\t\tpayload: 1.5,\n\t\t\t});\n\t\t}\n\t}, []);\n\n\tconst updateRotationDegree = (wheelEvent?: WheelEvent) => {\n\t\tlet degree = rotationDegree;\n\t\t//@ts-ignore\n\t\tif (wheelDirection === 'up' || wheelEvent?.deltaY < 0) {\n\t\t\tdegree = degree + 10 > 360 ? 10 : degree + 10;\n\t\t} else {\n\t\t\tdegree = degree - 10 < 0 ? 350 : degree - 10;\n\t\t}\n\t\tdispatch({\n\t\t\ttype: 'SET_ROTATION_DEGREE',\n\t\t\tpayload: degree,\n\t\t});\n\t};\n\n\tconst updateFlipDirection = () => {\n\t\tif (wheelDirection === 'up') {\n\t\t\tflipDirection === 1 &&\n\t\t\t\tdispatch({\n\t\t\t\t\ttype: 'SET_FLIP_DIRECTION',\n\t\t\t\t\tpayload: -1,\n\t\t\t\t});\n\t\t} else {\n\t\t\tflipDirection === -1 &&\n\t\t\t\tdispatch({\n\t\t\t\t\ttype: 'SET_FLIP_DIRECTION',\n\t\t\t\t\tpayload: 1,\n\t\t\t\t});\n\t\t}\n\t};\n\n\tconst updateScaleVector = (wheelEvent?: WheelEvent) => {\n\t\tlet vector = scaleVector;\n\t\t//@ts-ignore\n\t\tif (wheelDirection === 'up' || wheelEvent?.deltaY < 0) {\n\t\t\tvector = vector <= 0.5 ? 0.5 : vector - 0.25;\n\t\t} else {\n\t\t\tvector = vector >= 1.5 ? 1.5 : vector + 0.25;\n\t\t}\n\t\tdispatch({\n\t\t\ttype: 'SET_SCALE_VECTOR',\n\t\t\tpayload: vector,\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tdispatch({\n\t\t\ttype: 'SET_SVG_TRANSFORM',\n\t\t\tpayload: {\n\t\t\t\t...svgTransform,\n\t\t\t\trotate: `${rotationDegree}`,\n\t\t\t},\n\t\t});\n\t}, [rotationDegree]);\n\n\tuseEffect(() => {\n\t\tdispatch({\n\t\t\ttype: 'SET_SVG_TRANSFORM',\n\t\t\tpayload: {\n\t\t\t\t...svgTransform,\n\t\t\t\tflip: `scale(${flipDirection}, 1)`,\n\t\t\t},\n\t\t});\n\t}, [flipDirection]);\n\n\tuseEffect(() => {\n\t\tif (!(pressedKey && wheelDirection && wheelActive)) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch (pressedKey) {\n\t\t\tcase 'r':\n\t\t\t\tupdateRotationDegree();\n\t\t\t\tbreak;\n\t\t\tcase 'f':\n\t\t\t\tupdateFlipDirection();\n\t\t\t\tbreak;\n\t\t\tcase 's':\n\t\t\t\tupdateScaleVector();\n\t\t\t\tbreak;\n\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t}, [pressedKey, wheelDirection, wheelActive]);\n\n\tconst handleScaleChange = (vector: number) => {\n\t\tdispatch({\n\t\t\ttype: 'SET_SCALE_VECTOR',\n\t\t\tpayload: vector,\n\t\t});\n\t};\n\n\tconst handleScaleMouseWheel = ({ nativeEvent }: React.WheelEvent) => {\n\t\tupdateRotationDegree(nativeEvent);\n\t};\n\n\tconst handleRotateDegreeChange = (degree: number) => {\n\t\tdispatch({\n\t\t\ttype: 'SET_ROTATION_DEGREE',\n\t\t\tpayload: degree,\n\t\t});\n\t};\n\n\tconst handleFlipButtonClick = () => {\n\t\tdispatch({\n\t\t\ttype: 'SET_FLIP_DIRECTION',\n\t\t\tpayload: -flipDirection,\n\t\t});\n\t};\n\n\tconst handleDrawerButtonClick = () => {\n\t\tsetLeftMenuVisibility(!leftMenuVisibility);\n\t};\n\n\tconst renderScaleMeter = useMemo(() => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName='scaleWrapper'\n\t\t\t\tonWheel={({ nativeEvent }) => {\n\t\t\t\t\tupdateScaleVector(nativeEvent);\n\t\t\t\t}}>\n\t\t\t\t<span className='scaleTitle'>Scale</span>\n\t\t\t\t{\n\t\t\t\t\t//@ts-ignore\n\t\t\t\t\t<Slider\n\t\t\t\t\t\tvalue={scaleVector}\n\t\t\t\t\t\tmin={0.5}\n\t\t\t\t\t\tmax={1.5}\n\t\t\t\t\t\tdefaultValue={1}\n\t\t\t\t\t\tonChange={handleScaleChange}\n\t\t\t\t\t\tmarks={{ 0.5: 0.5, 0.75: 0.75, 1.0: 1.0, 1.25: 1.25, 1.5: 1.5 }}\n\t\t\t\t\t\tstep={null}\n\t\t\t\t\t\trailStyle={styles.railStyle}\n\t\t\t\t\t\ttrackStyle={styles.trackStyle}\n\t\t\t\t\t\tdotStyle={styles.dotStyle}\n\t\t\t\t\t\tactiveDotStyle={styles.activeDotStyle}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\t<div className='scaleShortcutWrapper'>\n\t\t\t\t\t<span>or</span>\n\t\t\t\t\t<span className='boldText'>press s</span>\n\t\t\t\t\t<span>+</span>\n\t\t\t\t\t<span className='boldText'>scroll on illustration</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}, [scaleVector]);\n\n\tconst renderRotateMeter = useMemo(() => {\n\t\treturn (\n\t\t\t<div className='rotateWrapper' onWheel={handleScaleMouseWheel}>\n\t\t\t\t<span className='rotateTitle'>Rotate</span>\n\t\t\t\t<div className='rotateRow'>\n\t\t\t\t\t{\n\t\t\t\t\t\t//@ts-ignore\n\t\t\t\t\t\t<CircularSlider\n\t\t\t\t\t\t\twidth={100}\n\t\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\t\tmax={360}\n\t\t\t\t\t\t\tdirection={-1}\n\t\t\t\t\t\t\tknobPosition='right'\n\t\t\t\t\t\t\tknobColor='#000000'\n\t\t\t\t\t\t\ttrackColor='#f1f3f4'\n\t\t\t\t\t\t\tprogressColorFrom='#FDE7AB'\n\t\t\t\t\t\t\tprogressColorTo='#FCCE5A'\n\t\t\t\t\t\t\tappendToValue='°'\n\t\t\t\t\t\t\tvalueFontSize='15px'\n\t\t\t\t\t\t\tonChange={handleRotateDegreeChange}\n\t\t\t\t\t\t\tlabel='Degree'\n\t\t\t\t\t\t\tdataIndex={rotationDegree}\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\t<span>or</span>\n\t\t\t\t\t<div className='rotateShortcutWrapper'>\n\t\t\t\t\t\t<span className='boldText'>press r</span>\n\t\t\t\t\t\t<span>+</span>\n\t\t\t\t\t\t<span className='boldText'>scroll on</span>\n\t\t\t\t\t\t<span className='boldText'>illustration</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}, [rotationDegree]);\n\n\tconst renderFlipper = useMemo(() => {\n\t\treturn (\n\t\t\t<div className='flipWrapper'>\n\t\t\t\t<div className='flipButton' onClick={handleFlipButtonClick}>\n\t\t\t\t\t<span style={{ textAlign: 'center' }}>Flip</span>\n\t\t\t\t</div>\n\t\t\t\t<span>or</span>\n\t\t\t\t<div className='rotateShortcutWrapper'>\n\t\t\t\t\t<span className='boldText'>press f</span>\n\t\t\t\t\t<span>+</span>\n\t\t\t\t\t<span className='boldText'>scroll on illustration</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}, [flipDirection]);\n\n\treturn useMemo(() => {\n\t\treturn (\n\t\t\t<div className={`leftMenu ${leftMenuVisibility ? '' : 'drawerClosed'}`}>\n\t\t\t\t<div className='leftMenuWrapper'>\n\t\t\t\t\t<div className='leftMenuContentWrapper'>\n\t\t\t\t\t\t{renderScaleMeter}\n\n\t\t\t\t\t\t{renderRotateMeter}\n\n\t\t\t\t\t\t{renderFlipper}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName='leftMenuDrawerButton'\n\t\t\t\t\t\tonClick={handleDrawerButtonClick}>\n\t\t\t\t\t\t{leftMenuVisibility ? 'Close' : 'Open'}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}, [leftMenuVisibility, scaleVector, rotationDegree, flipDirection]);\n};\n\nexport default LeftMenu;\n","import * as FileSaver from 'file-saver';\n\nexport const saveSvg = (svgEl: HTMLElement, name: string) => {\n\tsvgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\tconst svgData = svgEl.outerHTML;\n\tconst preface = '<?xml version=\"1.0\" standalone=\"no\"?>\\r\\n';\n\tconst svgBlob = new Blob([preface, svgData], {\n\t\ttype: 'image/svg+xml',\n\t});\n\tdownloadResource(svgBlob, name);\n};\n\nexport const savePng = (\n\tsvgEl: HTMLElement,\n\tname: string,\n\tscaleVector: number\n) => {\n\tconst canvas = document.createElement('canvas');\n\tcanvas.width = svgEl.getBoundingClientRect().height * scaleVector;\n\tcanvas.height = svgEl.getBoundingClientRect().height * scaleVector;\n\t/**\n\t *  The css width/height being ignored by the safari browser\n\t *  thus distorts the svg while drawing it\n\t *  - @#%! wasted too much time to figure out that\n\t */\n\tsvgEl.setAttribute('width', `${canvas.width}`);\n\tsvgEl.setAttribute('height', `${canvas.height}`);\n\n\tsvgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\n\tconst svgData = svgEl.outerHTML;\n\tconst preface = '<?xml version=\"1.0\" standalone=\"no\"?>\\r\\n';\n\n\tconst canvasContext = canvas.getContext('2d');\n\n\tconst DOMURL = window.self.URL || window.self.webkitURL || window.self;\n\tconst image = new Image();\n\tconst svgBlob = new Blob([preface, svgData], {\n\t\ttype: 'image/svg+xml',\n\t});\n\tconst url = DOMURL.createObjectURL(svgBlob);\n\t\n\tcanvas.style.display = 'none';\n\tdocument.body.appendChild(canvas);\n\n\timage.onload = () => {\n\t\tif (!canvasContext) {\n\t\t\treturn;\n\t\t}\n\n\t\tcanvasContext.drawImage(image, 0, 0, canvas.width, canvas.height);\n\n\t\tDOMURL.revokeObjectURL(url);\n\t\tcanvas.toBlob((pngBlob) => {\n\t\t\tpngBlob && downloadResource(pngBlob, name);\n\t\t\tdocument.body.removeChild(canvas);\n\t\t});\n\t};\n\n\timage.src = url;\n};\n\nconst downloadResource = (resource: Blob, name: string) => {\n\tFileSaver.saveAs(resource, name);\n};\n","import React, { useEffect, useMemo } from 'react';\nimport { useProvider } from '../utils/contextProvider';\nimport { ColorResult, ChromePicker } from 'react-color';\nimport { ReducerAction } from '../utils/types';\n\ninterface ColorWheelType {\n\tcolor: string;\n\ttarget: 'first' | 'second';\n\ttype?: 'Background' | 'Foreground'\n}\n\nexport const ColorWheel: React.FC<ColorWheelType> = ({ color, target, type }) => {\n\tconst { dispatch } = useProvider();\n\n\tuseEffect(() => {\n\t\tdocument.querySelectorAll('.flexbox-fix')[1].remove();\n\t}, []);\n\n\tconst colorDispatchKeyHolder = useMemo(() => {\n\t\tconst keys = {firstColor: '', secondColor: ''}\n\t\tif (type === 'Background') {\n\t\t\tkeys.firstColor = 'SET_BACKGROUND_FIRST_GRADIENT_COLOR';\n\t\t\tkeys.secondColor = 'SET_BACKGROUND_SECOND_GRADIENT_COLOR';\n\t\t} else {\n\t\t\tkeys.firstColor = 'SET_FOREGROUND_FIRST_COLOR';\n\t\t\tkeys.secondColor = 'SET_FOREGROUND_SECOND_COLOR';\n\t\t}\n\t\treturn keys\n\t}, [color])\n\n\treturn (\n\t\t<ChromePicker\n\t\t\tdisableAlpha\n\t\t\tcolor={color}\n\t\t\tonChange={(pickedColor: ColorResult) => {\n\t\t\t\tconst requestType =\n\t\t\t\t\ttarget === 'first' ? colorDispatchKeyHolder.firstColor : colorDispatchKeyHolder.secondColor;\n\t\t\t\tdispatch({\n\t\t\t\t\ttype: requestType as ReducerAction,\n\t\t\t\t\tpayload: pickedColor.hex,\n\t\t\t\t});\n\t\t\t}}\n\t\t/>\n\t);\n};\n","import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { useProvider } from '../utils/contextProvider';\nimport { EditableInput } from 'react-color/lib/components/common';\n// @ts-ignore\nimport CircularSlider from './circularSlider';\nimport { ColorResult } from 'react-color';\n//@ts-ignore\nimport { isValidHex } from 'react-color/lib/helpers/color';\nimport { GradientType } from 'dailyworkspace/lib/peeps/types';\nimport { ColorWheel } from './colorWheel';\n\nexport const GradientBuilder: React.FC<{\n\ttype?: 'Background' | 'Foreground';\n}> = ({ type }) => {\n\tconst { state, dispatch } = useProvider();\n\tconst {\n\t\tstrokeColor,\n\t\tfirstColor: foregroundFirstGradientColor,\n\t\tsecondColor: foregroundSecondGradientColor,\n\t\tbackgroundBasicColor,\n\t\tbackgroundFirstGradientColor,\n\t\tbackgroundSecondGradientColor,\n\t\tisFrameTransparent,\n\t} = state;\n\n\tconst firstColor = useMemo(() => {\n\t\tif (type === 'Background') {\n\t\t\treturn backgroundFirstGradientColor;\n\t\t} else {\n\t\t\treturn foregroundFirstGradientColor;\n\t\t}\n\t}, [foregroundFirstGradientColor, backgroundFirstGradientColor]);\n\n\tconst secondColor = useMemo(() => {\n\t\tif (type === 'Background') {\n\t\t\treturn backgroundSecondGradientColor;\n\t\t} else {\n\t\t\treturn foregroundSecondGradientColor;\n\t\t}\n\t}, [foregroundSecondGradientColor, backgroundSecondGradientColor]);\n\n\tconst [gradientDegree, setGradientDegree] = useState(\n\t\t(type === 'Background'\n\t\t\t? (backgroundBasicColor  as GradientType).degree\n\t\t\t: (strokeColor as GradientType).degree) || 0\n\t);\n\n\tconst [firstColorBoxClicked, setFirstColorBoxClicked] = useState<boolean>(\n\t\tfalse\n\t);\n\tconst [secondColorBoxClicked, setSecondColorBoxClicked] = useState<boolean>(\n\t\tfalse\n\t);\n\n\tuseEffect(() => {\n\t\tconst dispatchKey =\n\t\t\ttype === 'Background' ? 'SET_BACKGROUND_BASIC_COLOR' : 'SET_STROKE_COLOR';\n\t\tdispatch({\n\t\t\ttype: dispatchKey,\n\t\t\tpayload: {\n\t\t\t\tdegree: gradientDegree,\n\t\t\t\tfirstColor,\n\t\t\t\tsecondColor,\n\t\t\t},\n\t\t});\n\t}, [firstColor, secondColor, gradientDegree, dispatch]);\n\n\tconst handleColorChange = (caller: string) => {\n\t\treturn (color: ColorResult) => {\n\t\t\tif (!isValidHex(color)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (type === 'Background') {\n\t\t\t\tconst requestType =\n\t\t\t\t\tcaller === 'first'\n\t\t\t\t\t\t? 'SET_BACKGROUND_FIRST_GRADIENT_COLOR'\n\t\t\t\t\t\t: 'SET_BACKGROUND_SECOND_GRADIENT_COLOR';\n\t\t\t\tdispatch({\n\t\t\t\t\ttype: requestType,\n\t\t\t\t\tpayload: color,\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tconst requestType =\n\t\t\t\t\tcaller === 'first'\n\t\t\t\t\t\t? 'SET_FOREGROUND_FIRST_COLOR'\n\t\t\t\t\t\t: 'SET_FOREGROUND_SECOND_COLOR';\n\t\t\t\tdispatch({\n\t\t\t\t\ttype: requestType,\n\t\t\t\t\tpayload: color,\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\t};\n\n\tconst handleMouseWheel = useCallback(({ nativeEvent }: React.WheelEvent) => {\n\t\tif (nativeEvent?.deltaY < 0) {\n\t\t\tsetGradientDegree((degree) => (degree + 10 > 360 ? 10 : degree + 10));\n\t\t} else {\n\t\t\tsetGradientDegree((degree) => (degree - 10 < 0 ? 350 : degree - 10));\n\t\t}\n\t}, []);\n\n\tconst handleFirstColorBoxClick = useCallback(() => {\n\t\tif (secondColorBoxClicked) {\n\t\t\tsetSecondColorBoxClicked(false);\n\t\t}\n\t\tsetFirstColorBoxClicked((state) => !state);\n\t}, [secondColorBoxClicked]);\n\n\tconst handleSecondColorBoxClick = useCallback(() => {\n\t\tif (firstColorBoxClicked) {\n\t\t\tsetFirstColorBoxClicked(false);\n\t\t}\n\t\tsetSecondColorBoxClicked((state) => !state);\n\t}, [firstColorBoxClicked]);\n\n\tconst renderColorWheel = useMemo(() => {\n\t\tconst renderHelper: { color: string; target: 'first' | 'second' } = {\n\t\t\tcolor: '',\n\t\t\ttarget: 'first',\n\t\t};\n\t\tif (firstColorBoxClicked) {\n\t\t\trenderHelper.color = firstColor;\n\t\t\trenderHelper.target = 'first';\n\t\t}\n\n\t\tif (secondColorBoxClicked) {\n\t\t\trenderHelper.color = secondColor;\n\t\t\trenderHelper.target = 'second';\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{firstColorBoxClicked && (\n\t\t\t\t\t<ColorWheel\n\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\tcolor={renderHelper.color}\n\t\t\t\t\t\ttarget={renderHelper.target}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{secondColorBoxClicked && (\n\t\t\t\t\t<ColorWheel\n\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\tcolor={renderHelper.color}\n\t\t\t\t\t\ttarget={renderHelper.target}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t}, [firstColorBoxClicked, secondColorBoxClicked, firstColor, secondColor]);\n\n\tconst renderGradientPreviewer = useMemo(() => {\n\t\tlet backgroundColor = `linear-gradient(${gradientDegree}deg, ${firstColor}, ${secondColor})`;\n\t\tif (firstColorBoxClicked || secondColorBoxClicked) {\n\t\t\tbackgroundColor = 'white';\n\t\t}\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName='gradientPreview'\n\t\t\t\tstyle={{\n\t\t\t\t\tbackground: backgroundColor,\n\t\t\t\t\talignItems:\n\t\t\t\t\t\tfirstColorBoxClicked || secondColorBoxClicked\n\t\t\t\t\t\t\t? 'baseline'\n\t\t\t\t\t\t\t: 'center',\n\t\t\t\t}}\n\t\t\t\tonWheel={handleMouseWheel}>\n\t\t\t\t{\n\t\t\t\t\t//@ts-ignore\n\t\t\t\t\t<CircularSlider\n\t\t\t\t\t\twidth={110}\n\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\tmax={360}\n\t\t\t\t\t\tdirection={-1}\n\t\t\t\t\t\tknobPosition='right'\n\t\t\t\t\t\tprogressColorFrom='#FFFFFF'\n\t\t\t\t\t\tprogressColorTo='#FFFFFF'\n\t\t\t\t\t\tknobColor='#FFFFFF'\n\t\t\t\t\t\ttrackColor='#FFFFFF'\n\t\t\t\t\t\tappendToValue='°'\n\t\t\t\t\t\tvalueFontSize='15px'\n\t\t\t\t\t\ttrackSize={4}\n\t\t\t\t\t\tprogressSize={4}\n\t\t\t\t\t\tonChange={(value: number) => {\n\t\t\t\t\t\t\tsetGradientDegree(value);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tlabel=''\n\t\t\t\t\t\tdataIndex={gradientDegree}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay:\n\t\t\t\t\t\t\t\tfirstColorBoxClicked || secondColorBoxClicked\n\t\t\t\t\t\t\t\t\t? 'none'\n\t\t\t\t\t\t\t\t\t: 'inline-block',\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\t{renderColorWheel}\n\t\t\t</div>\n\t\t);\n\t}, [\n\t\tgradientDegree,\n\t\tfirstColor,\n\t\tsecondColor,\n\t\tfirstColorBoxClicked,\n\t\tsecondColorBoxClicked,\n\t\thandleMouseWheel,\n\t]);\n\n\tconst renderColorHexInputs = useMemo(() => {\n\t\treturn (\n\t\t\t<div className='gradientInputWrapper'>\n\t\t\t\t<EditableInput\n\t\t\t\t\tvalue={firstColor}\n\t\t\t\t\tonChange={handleColorChange('first')}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tinput: {\n\t\t\t\t\t\t\twidth: '90%',\n\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\tcolor: '#666',\n\t\t\t\t\t\t\tborder: '0px',\n\t\t\t\t\t\t\toutline: 'none',\n\t\t\t\t\t\t\theight: '22px',\n\t\t\t\t\t\t\tboxShadow: 'inset 0 0 0 1px #ddd',\n\t\t\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\t\t\tpadding: '0 7px',\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<EditableInput\n\t\t\t\t\tvalue={secondColor}\n\t\t\t\t\tonChange={handleColorChange('second')}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tinput: {\n\t\t\t\t\t\t\twidth: '90%',\n\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\tcolor: '#666',\n\t\t\t\t\t\t\tborder: '0px',\n\t\t\t\t\t\t\toutline: 'none',\n\t\t\t\t\t\t\theight: '22px',\n\t\t\t\t\t\t\tboxShadow: 'inset 0 0 0 1px #ddd',\n\t\t\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\t\t\tpadding: '0 7px',\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}, [firstColor, secondColor]);\n\n\tconst renderColorBoxes = useMemo(() => {\n\t\treturn (\n\t\t\t<div className='gradientColorBoxWrapper'>\n\t\t\t\t<div\n\t\t\t\t\ttitle={firstColor as string}\n\t\t\t\t\tclassName='gradientColorBox'\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: firstColor as string,\n\t\t\t\t\t\tanimation: firstColorBoxClicked ? 'pulse 1s infinite' : 'unset',\n\t\t\t\t\t}}\n\t\t\t\t\tonClick={handleFirstColorBoxClick}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\ttitle={secondColor as string}\n\t\t\t\t\tclassName='gradientColorBox'\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: secondColor as string,\n\t\t\t\t\t\tanimation: secondColorBoxClicked ? 'pulse 1s infinite' : 'unset',\n\t\t\t\t\t}}\n\t\t\t\t\tonClick={handleSecondColorBoxClick}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}, [\n\t\tfirstColor,\n\t\tsecondColor,\n\t\thandleFirstColorBoxClick,\n\t\thandleSecondColorBoxClick,\n\t]);\n\n\treturn useMemo(() => {\n\t\treturn (\n\t\t\t<div className='gradientBlock'>\n\t\t\t\t{renderGradientPreviewer}\n\n\t\t\t\t{renderColorBoxes}\n\n\t\t\t\t{renderColorHexInputs}\n\t\t\t</div>\n\t\t);\n\t}, [\n\t\tgradientDegree,\n\t\tfirstColor,\n\t\tsecondColor,\n\t\tgradientDegree,\n\t\tfirstColorBoxClicked,\n\t\tsecondColorBoxClicked,\n\t]);\n};\n","import React, { useState, useMemo } from 'react';\nimport { ColorResult, BlockPicker } from 'react-color';\nimport { GradientBuilder } from './gradientBuilder';\nimport { useProvider } from '../utils/contextProvider';\n\ntype ColoringType = 'basic' | 'gradient';\n\nconst ColorModal: React.FC<{ type: 'Background' | 'Foreground' }> = ({\n\ttype,\n}) => {\n\tconst { state, dispatch } = useProvider();\n\tconst { strokeColor, backgroundBasicColor } = state;\n\tconst [displayColorPicker, setDisplayColorPicker] = useState<boolean>(false);\n\tconst [colorType, setColorType] = useState<ColoringType>('basic');\n\tconst initialColors = [\n\t\t'#4D4D4D',\n\t\t'#999999',\n\t\t'#2e8a57',\n\t\t'#FE9200',\n\t\t'#fe1694',\n\t\t'#33cd33',\n\t\t'#8a2ae3',\n\t\t'#68CCCA',\n\t\t'#73D8FF',\n\t\t'#AEA1FF',\n\t\t'#7f8000',\n\t\t'#000000',\n\t\t'#81087f',\n\t\t'#cccccc',\n\t\t'#D33115',\n\t\t'#143D59',\n\t\t'#210070',\n\t\t'#213970',\n\t\t'#FFE042',\n\t\t'#E71989',\n\t\t'#5B0E2D',\n\t\t'#FFD55A',\n\t\t'#6DD47E',\n\t\t'#F93800',\n\t\t'#F9858B',\n\t\t'#761137',\n\t\t'#00154F',\n\t\t'#F2BC94',\n\t\t'#FBEAEB',\n\t\t'#EB2188',\n\t];\n\n\tconst handleColorChange = (color: ColorResult) => {\n\t\tif (type === 'Background') {\n\t\t\tdispatch({\n\t\t\t\ttype: 'SET_BACKGROUND_BASIC_COLOR',\n\t\t\t\tpayload: color.hex,\n\t\t\t});\n\t\t} else {\n\t\t\tdispatch({\n\t\t\t\ttype: 'SET_STROKE_COLOR',\n\t\t\t\tpayload: color.hex,\n\t\t\t});\n\t\t}\n\t};\n\n\tconst handlePickerVisibiltyChange = (isVisible?: boolean) => {\n\t\treturn () => {\n\t\t\tisVisible === false\n\t\t\t\t? setDisplayColorPicker(isVisible)\n\t\t\t\t: setDisplayColorPicker(!displayColorPicker);\n\t\t};\n\t};\n\n\tconst adjustStrokeColor = () => {\n\t\tif (type === 'Background') {\n\t\t\treturn typeof backgroundBasicColor === 'object'\n\t\t\t\t? `linear-gradient(${backgroundBasicColor.degree || 0}, ${\n\t\t\t\t\t\tbackgroundBasicColor.firstColor\n\t\t\t\t  }, ${backgroundBasicColor.secondColor})`\n\t\t\t\t: backgroundBasicColor;\n\t\t} else {\n\t\t\treturn typeof strokeColor === 'object'\n\t\t\t\t? `linear-gradient(${strokeColor.degree || 0}, ${\n\t\t\t\t\t\tstrokeColor.firstColor\n\t\t\t\t  }, ${strokeColor.secondColor})`\n\t\t\t\t: strokeColor;\n\t\t}\n\t};\n\n\tconst handleColorTypeChange = (type: ColoringType) => {\n\t\treturn () => {\n\t\t\tsetColorType(type);\n\t\t};\n\t};\n\n\tconst renderBasicPalette = useMemo(() => {\n\t\treturn (\n\t\t\t<div className='basicPicker'>\n\t\t\t\t<BlockPicker\n\t\t\t\t\ttriangle='hide'\n\t\t\t\t\tcolor={adjustStrokeColor()}\n\t\t\t\t\tonChange={handleColorChange}\n\t\t\t\t\tcolors={initialColors}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tclassName='colorTypeChangeButton gradientColorButton'\n\t\t\t\t\tonClick={handleColorTypeChange('gradient')}>\n\t\t\t\t\tGradient\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}, [initialColors]);\n\n\tconst renderGradientPalette = useMemo(() => {\n\t\treturn (\n\t\t\t<div className='gradientPicker'>\n\t\t\t\t<GradientBuilder type={type} />\n\t\t\t\t<div\n\t\t\t\t\tclassName='colorTypeChangeButton basicColorButton'\n\t\t\t\t\tonClick={handleColorTypeChange('basic')}>\n\t\t\t\t\tBasic\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}, []);\n\n\treturn useMemo(() => {\n\t\tconst pickedColor = adjustStrokeColor();\n\t\treturn (\n\t\t\t<div className='colorIndicator'>\n\t\t\t\t<div\n\t\t\t\t\tclassName='colorSwatch'\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tboxShadow: `0 0 0 2px ${pickedColor}`,\n\t\t\t\t\t}}\n\t\t\t\t\tonClick={handlePickerVisibiltyChange()}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`pickedColor ${type === 'Background' ? 'backgroundPickedColorIndicatior' : ''}`}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackground: pickedColor,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{displayColorPicker ? (\n\t\t\t\t\t<div className='colorPopover'>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName='colorCover'\n\t\t\t\t\t\t\tonClick={handlePickerVisibiltyChange(false)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{colorType === 'basic' ? renderBasicPalette : renderGradientPalette}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t);\n\t}, [displayColorPicker, initialColors, colorType]);\n};\n\nexport default ColorModal;\n","import {\n\tSittingPose,\n\tSittingPoseType,\n\tStandingPoseType,\n\tStandingPose,\n\tBustPose,\n\tBustPoseType,\n} from 'dailyworkspace';\n\nexport const isSittingPose = (pose: any): pose is SittingPoseType =>\n\tObject.keys(SittingPose).includes(pose);\n\nexport const isStandingPose = (pose: any): pose is StandingPoseType =>\n\tObject.keys(StandingPose).includes(pose);\n\nexport const isBustPose = (pose: any): pose is BustPoseType =>\n\tObject.keys(BustPose).includes(pose);\n\nexport const adjustPeepsViewbox = (bodyPiece: string) => {\n\tlet x = '-350',\n\t\ty = '-150',\n\t\twidth = '1500',\n\t\theight = '1500';\n\tif (isSittingPose(bodyPiece)) {\n\t\tx = '-800';\n\t\ty = '-300';\n\t\twidth = '2600';\n\t\theight = '2600';\n\t\tif (bodyPiece === 'MediumBW' || bodyPiece === 'MediumWB') {\n\t\t\tx = '-1000';\n\t\t}\n\t\tif (bodyPiece === 'OneLegUpBW' || bodyPiece === 'OneLegUpWB') {\n\t\t\tx = '-900';\n\t\t}\n\t\tif (bodyPiece === 'CrossedLegs') {\n\t\t\tx = '-850';\n\t\t\twidth = '2800';\n\t\t\theight = '2800';\n\t\t}\n\t\tif (bodyPiece === 'WheelChair') {\n\t\t\tx = '-700';\n\t\t\ty = '-150';\n\t\t\twidth = '2700';\n\t\t\theight = '2700';\n\t\t}\n\t\tif (bodyPiece === 'Bike') {\n\t\t\tx = '-1450';\n\t\t\ty = '-450';\n\t\t\twidth = '4200';\n\t\t\theight = '4200';\n\t\t}\n\t} else if (isStandingPose(bodyPiece)) {\n\t\tx = '-1300';\n\t\ty = '-200';\n\t\twidth = '3350';\n\t\theight = '3350';\n\t} else {\n\t\tif (bodyPiece === 'PocketShirt') {\n\t\t\tx = '-395';\n\t\t}\n\t\tif (bodyPiece === 'Geek' || bodyPiece === 'DotJacket') {\n\t\t\tx = '-305';\n\t\t}\n\t\tif (bodyPiece === 'Device') {\n\t\t\ty = '-160';\n\t\t}\n\t}\n\treturn { x, y, width, height };\n};\n\nexport const distinguishBodyViewbox = (bodyPiece: string) => {\n\tif (isStandingPose(bodyPiece)) {\n\t\treturn '-300 350 2500 2500';\n\t} else if (isSittingPose(bodyPiece)) {\n\t\tif (bodyPiece === 'Bike') {\n\t\t\treturn '-500 300 3000 3000';\n\t\t}\n\t\tif (\n\t\t\tbodyPiece === 'MediumBW' ||\n\t\t\tbodyPiece === 'MediumWB' ||\n\t\t\tbodyPiece === 'OneLegUpBW' ||\n\t\t\tbodyPiece === 'OneLegUpWB' ||\n\t\t\tbodyPiece === 'WheelChair'\n\t\t) {\n\t\t\treturn '-300 250 2000 2000';\n\t\t}\n\t\treturn '0 300 2000 2000';\n\t} else {\n\t\treturn '0 150 1200 1200';\n\t}\n};\n","import React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport {\n\tAccessories,\n\tBustPose,\n\tFace,\n\tFacialHair,\n\tHair,\n\tAccessoryType,\n\tBustPoseType,\n\tFaceType,\n\tFacialHairType,\n\tHairType,\n\tSittingPoseType,\n\tStandingPose,\n\tStandingPoseType,\n\tSittingPose,\n} from 'dailyworkspace';\nimport { FaTrash } from 'react-icons/fa';\nimport { saveSvg, savePng } from '../utils/save';\nimport { PieceKeyType, SectionValues } from './types';\nimport { useProvider } from '../utils/contextProvider';\nimport ColorModal from './colorModal';\nimport { distinguishBodyViewbox } from '../utils/viewbox';\n\nconst RightMenu = () => {\n\tconst { state, dispatch } = useProvider();\n\n\tconst {\n\t\tpickedAccessory,\n\t\tpickedBody,\n\t\tpickedFace,\n\t\tpickedFacialHair,\n\t\tpickedHair,\n\t\tpickedSection,\n\t\tscaleVector,\n\t\tisFrameTransparent,\n\t} = state;\n\n\tconst [pieceKeys, setPieceKeys] = useState<PieceKeyType>();\n\n\tuseEffect(() => {\n\t\tconst keys = {\n\t\t\thairKeys: [''],\n\t\t\tbodyKeys: [''],\n\t\t\tfaceKeys: [''],\n\t\t\tfacialHairKeys: [''],\n\t\t\taccessoryKeys: [''],\n\t\t};\n\t\tkeys.hairKeys = Object.keys(Hair);\n\t\tkeys.bodyKeys = [\n\t\t\t...Object.keys(BustPose),\n\t\t\t...Object.keys(SittingPose),\n\t\t\t...Object.keys(StandingPose),\n\t\t];\n\t\tkeys.faceKeys = Object.keys(Face);\n\t\tkeys.facialHairKeys = Object.keys(FacialHair);\n\t\tkeys.accessoryKeys = Object.keys(Accessories);\n\t\tsetPieceKeys(keys);\n\t}, []);\n\n\tconst updateHair = (hair: HairType) => {\n\t\tdispatch({\n\t\t\ttype: 'SET_HAIR',\n\t\t\tpayload: hair,\n\t\t});\n\t};\n\n\tconst updateBody = (body: BustPoseType) => {\n\t\tdispatch({\n\t\t\ttype: 'SET_BODY',\n\t\t\tpayload: body,\n\t\t});\n\t};\n\n\tconst updateFace = (face: FaceType) => {\n\t\tdispatch({\n\t\t\ttype: 'SET_FACE',\n\t\t\tpayload: face,\n\t\t});\n\t};\n\n\tconst updateFacialHair = (facialHair: FacialHairType) => {\n\t\tdispatch({\n\t\t\ttype: 'SET_FACIAL_HAIR',\n\t\t\tpayload: facialHair,\n\t\t});\n\t};\n\n\tconst updateFrameType = useCallback(\n\t\t(isTransparent) => () => {\n\t\t\tisTransparent !== isFrameTransparent &&\n\t\t\t\tdispatch({\n\t\t\t\t\ttype: 'SET_FRAME_TYPE',\n\t\t\t\t\tpayload: isTransparent,\n\t\t\t\t});\n\t\t},\n\t\t[isFrameTransparent]\n\t);\n\n\tconst updateAccessory = (accessory: AccessoryType) => {\n\t\tdispatch({\n\t\t\ttype: 'SET_ACCESSORY',\n\t\t\tpayload: accessory,\n\t\t});\n\t};\n\n\tconst updateSection = (section: SectionValues) => {\n\t\tdispatch({\n\t\t\ttype: 'SET_PIECE_SECTION',\n\t\t\tpayload: section,\n\t\t});\n\t};\n\n\tconst randomizePeep = useCallback(() => {\n\t\tif (!pieceKeys) {\n\t\t\treturn;\n\t\t}\n\t\tupdateHair(\n\t\t\tpieceKeys.hairKeys[\n\t\t\t\tMath.floor(Math.random() * pieceKeys.hairKeys.length)\n\t\t\t] as HairType\n\t\t);\n\n\t\tupdateBody(\n\t\t\tpieceKeys.bodyKeys[\n\t\t\t\tMath.floor(Math.random() * pieceKeys.bodyKeys.length)\n\t\t\t] as BustPoseType & SittingPoseType & StandingPoseType\n\t\t);\n\n\t\tupdateFace(\n\t\t\tpieceKeys.faceKeys[\n\t\t\t\tMath.floor(Math.random() * pieceKeys.faceKeys.length)\n\t\t\t] as FaceType\n\t\t);\n\n\t\tupdateFacialHair(\n\t\t\tpieceKeys.facialHairKeys[\n\t\t\t\tMath.floor(Math.random() * pieceKeys.facialHairKeys.length)\n\t\t\t] as FacialHairType\n\t\t);\n\n\t\tupdateAccessory(\n\t\t\tpieceKeys.accessoryKeys[\n\t\t\t\tMath.floor(Math.random() * pieceKeys.accessoryKeys.length)\n\t\t\t] as AccessoryType\n\t\t);\n\t}, [pieceKeys]);\n\n\tconst handlePieceSectionClick = (section: string) => {\n\t\treturn () => {\n\t\t\tupdateSection(section as SectionValues);\n\t\t};\n\t};\n\n\tconst renderPieceSections = (sections: Array<string>) => {\n\t\treturn sections.map((section, index) => {\n\t\t\treturn (\n\t\t\t\t<li\n\t\t\t\t\tclassName='pieceSectionItem'\n\t\t\t\t\tkey={index}\n\t\t\t\t\tonClick={handlePieceSectionClick(section)}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`pieceSectionButton ${section} ${\n\t\t\t\t\t\t\tpickedSection === section ? 'pickedSection' : ''\n\t\t\t\t\t\t}`}>\n\t\t\t\t\t\t<span>{section}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t);\n\t\t});\n\t};\n\n\tconst renderPiece = (piece: string) => {\n\t\tswitch (pickedSection) {\n\t\t\tcase 'Accessories':\n\t\t\t\treturn React.createElement(Accessories[piece as AccessoryType]);\n\t\t\tcase 'Body':\n\t\t\t\treturn React.createElement(\n\t\t\t\t\tBustPose[piece as BustPoseType] ||\n\t\t\t\t\t\tSittingPose[piece as SittingPoseType] ||\n\t\t\t\t\t\tStandingPose[piece as StandingPoseType]\n\t\t\t\t);\n\t\t\tcase 'Hair':\n\t\t\t\treturn React.createElement(Hair[piece as HairType]);\n\t\t\tcase 'FacialHair':\n\t\t\t\treturn React.createElement(FacialHair[piece as FacialHairType]);\n\t\t\tcase 'Face':\n\t\t\t\treturn React.createElement(Face[piece as FaceType]);\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tconst isPieceChecked = (piece: string) => {\n\t\tswitch (pickedSection) {\n\t\t\tcase 'Accessories':\n\t\t\t\treturn piece === pickedAccessory;\n\t\t\tcase 'Body':\n\t\t\t\treturn piece === pickedBody;\n\t\t\tcase 'Hair':\n\t\t\t\treturn piece === pickedHair;\n\t\t\tcase 'FacialHair':\n\t\t\t\treturn piece === pickedFacialHair;\n\t\t\tcase 'Face':\n\t\t\t\treturn piece === pickedFace;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tconst adjustSvgViewbox = (piece: string) => {\n\t\tswitch (pickedSection) {\n\t\t\tcase 'Accessories':\n\t\t\t\treturn '-75 -125 500 400';\n\t\t\tcase 'Body':\n\t\t\t\treturn distinguishBodyViewbox(piece);\n\t\t\tcase 'Hair':\n\t\t\t\treturn '0 -100 550 750';\n\t\t\tcase 'FacialHair':\n\t\t\t\treturn '-50 -100 500 400';\n\t\t\tcase 'Face':\n\t\t\t\treturn '0 -20 300 400';\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tconst handlePieceItemClick = (piece: string) => {\n\t\treturn () => {\n\t\t\tswitch (pickedSection) {\n\t\t\t\tcase 'Accessories':\n\t\t\t\t\tupdateAccessory(piece as AccessoryType);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'Body':\n\t\t\t\t\tupdateBody(\n\t\t\t\t\t\tpiece as BustPoseType & SittingPoseType & StandingPoseType\n\t\t\t\t\t);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'Hair':\n\t\t\t\t\tupdateHair(piece as HairType);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'FacialHair':\n\t\t\t\t\tupdateFacialHair(piece as FacialHairType);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'Face':\n\t\t\t\t\tupdateFace(piece as FaceType);\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t};\n\t};\n\n\tconst renderPieceList = (pieces: Array<string>) => {\n\t\treturn pieces.map((piece, index) => {\n\t\t\treturn (\n\t\t\t\t<li\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclassName='pieceListItem'\n\t\t\t\t\tonClick={handlePieceItemClick(piece)}>\n\t\t\t\t\t<div className='pieceListWrapper'>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName='pieceListRadioButton'\n\t\t\t\t\t\t\ttype='radio'\n\t\t\t\t\t\t\tname={pickedSection}\n\t\t\t\t\t\t\tchecked={isPieceChecked(piece)}\n\t\t\t\t\t\t\treadOnly\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className='selectionIndicator' />\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName='pieceListSvg'\n\t\t\t\t\t\t\t\tviewBox={adjustSvgViewbox(piece)}\n\t\t\t\t\t\t\t\twidth='70'\n\t\t\t\t\t\t\t\theight='70'>\n\t\t\t\t\t\t\t\t{renderPiece(piece)}\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span className='pieceText'>{piece}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t);\n\t\t});\n\t};\n\n\tconst handleSaveSvgButtonClick = useCallback(() => {\n\t\tsaveSvg(\n\t\t\tdocument.querySelector('.svgWrapper > svg') as HTMLElement,\n\t\t\t'peep.svg'\n\t\t);\n\t}, []);\n\n\tconst handleSavePngButtonClick = useCallback(() => {\n\t\tsavePng(\n\t\t\tdocument.querySelector('.svgWrapper > svg') as HTMLElement,\n\t\t\t'peep.png',\n\t\t\tscaleVector\n\t\t);\n\t}, [scaleVector]);\n\n\tconst pickedSectionObject = () => {\n\t\tswitch (pickedSection) {\n\t\t\tcase 'Accessories':\n\t\t\t\treturn Object.keys(Accessories);\n\t\t\tcase 'Body':\n\t\t\t\treturn [\n\t\t\t\t\t...Object.keys(BustPose),\n\t\t\t\t\t...Object.keys(SittingPose),\n\t\t\t\t\t...Object.keys(StandingPose),\n\t\t\t\t];\n\t\t\tcase 'Hair':\n\t\t\t\treturn Object.keys(Hair);\n\t\t\tcase 'FacialHair':\n\t\t\t\treturn Object.keys(FacialHair);\n\t\t\tcase 'Face':\n\t\t\t\treturn Object.keys(Face);\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tconst renderSelectedPieceSet = useMemo(() => {\n\t\treturn (\n\t\t\t<div className='listWrapper'>\n\t\t\t\t<ul className={`pieceList ${pickedSection}`}>\n\t\t\t\t\t{renderPieceList(pickedSectionObject() as string[])}\n\t\t\t\t</ul>\n\t\t\t\t<ul className='sectionList'>\n\t\t\t\t\t{renderPieceSections([\n\t\t\t\t\t\t'Accessories',\n\t\t\t\t\t\t'Body',\n\t\t\t\t\t\t'Face',\n\t\t\t\t\t\t'FacialHair',\n\t\t\t\t\t\t'Hair',\n\t\t\t\t\t])}\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t);\n\t}, [pickedSection, renderPieceList]);\n\n\tconst renderSaveButtons = useMemo(() => {\n\t\treturn (\n\t\t\t<div className='saveButtonWrapper'>\n\t\t\t\t<div className='saveButton' onClick={handleSaveSvgButtonClick}>\n\t\t\t\t\tSave as SVG\n\t\t\t\t</div>\n\t\t\t\t<div className='saveButton' onClick={handleSavePngButtonClick}>\n\t\t\t\t\tSave as PNG\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}, [handleSaveSvgButtonClick, handleSavePngButtonClick]);\n\n\tconst rendererRandomizerButton = useMemo(() => {\n\t\treturn (\n\t\t\t<div className='shuffleButton' onClick={randomizePeep}>\n\t\t\t\t<span style={{ textAlign: 'center' }}>Shuffle</span>\n\t\t\t</div>\n\t\t);\n\t}, [randomizePeep]);\n\n\tconst renderColorPicker = useMemo(() => {\n\t\treturn (\n\t\t\t<div className='foregroundColorWrapper'>\n\t\t\t\t<span className='marginRightOneEM'>Foreground</span>\n\t\t\t\t<ColorModal type='Foreground' />\n\t\t\t</div>\n\t\t);\n\t}, []);\n\n\tconst renderFrameOptions = useMemo(() => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={`frameOptionsWrapper ${\n\t\t\t\t\t!isFrameTransparent && 'increaseFrameWrapperWidth'\n\t\t\t\t}`}>\n\t\t\t\t<span className='marginRightOneEM'>Background</span>\n\n\t\t\t\t<div style={{display: 'flex', ...(!isFrameTransparent && { display: 'none' }) }}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`frameOptionButton ${\n\t\t\t\t\t\t\tisFrameTransparent && 'deactiveFrameOptionButton'\n\t\t\t\t\t\t}`}\n\t\t\t\t\t\tonClick={updateFrameType(true)}>\n\t\t\t\t\t\ttransparent\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`frameOptionButton ${\n\t\t\t\t\t\t\t!isFrameTransparent && 'deactiveFrameOptionButton'\n\t\t\t\t\t\t}`}\n\t\t\t\t\t\tonClick={updateFrameType(false)}>\n\t\t\t\t\t\tcolorful\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t...(isFrameTransparent && { display: 'none' }),\n\t\t\t\t\t}}>\n\t\t\t\t\t<ColorModal type='Background' />\n\t\t\t\t\t<div className='trashIconWrapper' onClick={updateFrameType(true)}>\n\t\t\t\t\t\t<FaTrash color='#fd6565' />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}, [isFrameTransparent]);\n\n\treturn useMemo(() => {\n\t\treturn (\n\t\t\t<div className='rigthMenu'>\n\t\t\t\t{renderSelectedPieceSet}\n\n\t\t\t\t{renderFrameOptions}\n\n\t\t\t\t{renderColorPicker}\n\n\t\t\t\t{rendererRandomizerButton}\n\n\t\t\t\t{renderSaveButtons}\n\t\t\t</div>\n\t\t);\n\t}, [\n\t\tpickedSection,\n\t\trandomizePeep,\n\t\tpickedAccessory,\n\t\tpickedBody,\n\t\tpickedFace,\n\t\tpickedFacialHair,\n\t\tpickedHair,\n\t\tscaleVector,\n\t\tisFrameTransparent,\n\t]);\n};\n\nexport default RightMenu;\n","import React from 'react';\n\nexport const Footer = () => {\n\treturn (\n\t\t<div className='footer'>\n\t\t\t<div>\n\t\t\t\t<a href=\"https://www.buymeacoffee.com/mqLMb2X/extras\"\n\t\t\t\t   className='bottomLinkText '\n\t\t\t\t   target='_blank'>\n\t\t\t\t\tCongratulations,🔥🎂 draw cartoon avatar from your photo😘😘\n\t\t\t\t</a>\n\n\t\t\t\t<div className='signature'>\n\t\t\t\t\t<a\n\t\t\t\t\t\ttarget='_blank'\n\t\t\t\t\t\trel='noopener noreferrer'\n\t\t\t\t\t\thref='https://cvbox.org/'\n\t\t\t\t\t\tclassName='boldText removeDefaultAnchorStyle'>\n\t\t\t\t\t\tcvbox\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</div>\n\n\n\t);\n};\n","import React, { useEffect, useRef } from 'react';\nimport Peep from 'dailyworkspace';\nimport { useProvider } from '../utils/contextProvider';\nimport LeftMenu from './leftMenu';\nimport RightMenu from './rightMenu';\nimport { Footer } from './footer';\nimport { adjustPeepsViewbox } from '../utils/viewbox';\n\nconst styles = {\n\tpeepStyle: {\n\t\twidth: 390,\n\t\theight: 390,\n\t\tjustifyContent: 'center',\n\t\talignSelf: 'center',\n\t\ttransform: 'unset',\n\t},\n};\n\nexport const PeepsGenerator: React.FC = () => {\n\tconst { state, dispatch } = useProvider();\n\tconst illustrationRef = useRef<HTMLDivElement>(null);\n\n\tconst {\n\t\tpickedAccessory,\n\t\tpickedBody,\n\t\tpickedFace,\n\t\tpickedFacialHair,\n\t\tpickedHair,\n\t\tstrokeColor,\n\t\tpressedKey,\n\t\tscaleVector,\n\t\tsvgTransform,\n\t\tisFrameTransparent,\n\t\tbackgroundBasicColor,\n\t} = state;\n\n\tuseEffect(() => {\n\t\t/*\n\t\t  Removing the event listeners in\n\t\t\tsmall screens to prevent jumping behaviour\n\t\t\twhen pressing on the illustration\n\t\t */\n\t\tif (window?.innerWidth < 1201) {\n\t\t\tillustrationRef.current?.removeEventListener(\n\t\t\t\t'mouseenter',\n\t\t\t\thandleMouseEnter\n\t\t\t);\n\t\t\tillustrationRef.current?.removeEventListener(\n\t\t\t\t'mouseleave',\n\t\t\t\thandleMouseLeave\n\t\t\t);\n\t\t}\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst peepGroupWrapper = document.querySelector(\n\t\t\t'.svgWrapper > svg > g'\n\t\t) as SVGGraphicsElement;\n\t\tconst { width, height, x, y } = peepGroupWrapper.getBBox();\n\t\tpeepGroupWrapper.setAttribute(\n\t\t\t'transform',\n\t\t\t`rotate(${svgTransform?.rotate || '0'} ${x + width / 2} ${y + height / 2})`\n\t\t);\n\t}, [svgTransform, pickedBody]);\n\n\tconst handleMouseEnter = () => {\n\t\t(document.getElementsByClassName('svgWrapper')[0] as HTMLElement).focus();\n\t};\n\n\tconst handleMouseLeave = () => {\n\t\t(document.getElementsByClassName('header')[0] as HTMLElement).focus();\n\t\tdispatch({\n\t\t\ttype: 'SET_WHEEL_DIRECTION',\n\t\t\tpayload: undefined,\n\t\t});\n\t\tdispatch({\n\t\t\ttype: 'SET_PRESSED_KEY',\n\t\t\tpayload: undefined,\n\t\t});\n\t};\n\n\tconst handleKeyDown = ({ nativeEvent }: React.KeyboardEvent) => {\n\t\tif (pressedKey === nativeEvent.key) {\n\t\t\treturn;\n\t\t}\n\t\tdispatch({\n\t\t\ttype: 'SET_PRESSED_KEY',\n\t\t\tpayload: nativeEvent.key,\n\t\t});\n\t};\n\n\tconst handleKeyUp = () => {\n\t\tdispatch({\n\t\t\ttype: 'SET_PRESSED_KEY',\n\t\t\tpayload: undefined,\n\t\t});\n\t};\n\n\tconst handleMouseWheel = ({ nativeEvent }: React.WheelEvent) => {\n\t\tdispatch({\n\t\t\ttype: 'SET_IS_WHEEL_ACTIVE',\n\t\t\tpayload: true,\n\t\t});\n\t\tif (nativeEvent.deltaY > 0) {\n\t\t\tdispatch({\n\t\t\t\ttype: 'SET_WHEEL_DIRECTION',\n\t\t\t\tpayload: 'down',\n\t\t\t});\n\t\t} else {\n\t\t\tdispatch({\n\t\t\t\ttype: 'SET_WHEEL_DIRECTION',\n\t\t\t\tpayload: 'up',\n\t\t\t});\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tdispatch({\n\t\t\t\ttype: 'SET_IS_WHEEL_ACTIVE',\n\t\t\t\tpayload: false,\n\t\t\t});\n\t\t}, 0);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<a className='header' href='/'>\n\t\t\t\t<h2>notion style avatar generator</h2>\n\t\t\t</a>\n\n\t\t\t<div\n\t\t\t\tref={illustrationRef}\n\t\t\t\tclassName='svgWrapper'\n\t\t\t\ttabIndex={0}\n\t\t\t\tonMouseEnter={handleMouseEnter}\n\t\t\t\tonMouseLeave={handleMouseLeave}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\tonKeyUp={handleKeyUp}\n\t\t\t\tonWheel={handleMouseWheel}>\n\t\t\t\t<Peep\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t...styles.peepStyle,\n\t\t\t\t\t\twidth: styles.peepStyle.width * scaleVector,\n\t\t\t\t\t\theight: styles.peepStyle.height * scaleVector,\n\t\t\t\t\t\ttransform: `${svgTransform?.flip || ''}`,\n\t\t\t\t\t}}\n\t\t\t\t\taccessory={pickedAccessory}\n\t\t\t\t\tbody={pickedBody}\n\t\t\t\t\tface={pickedFace}\n\t\t\t\t\thair={pickedHair}\n\t\t\t\t\tfacialHair={pickedFacialHair}\n\t\t\t\t\tstrokeColor={strokeColor}\n\t\t\t\t\tviewBox={adjustPeepsViewbox(pickedBody)}\n\t\t\t\t\twrapperBackground={\n\t\t\t\t\t\tisFrameTransparent ? undefined : backgroundBasicColor\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t<LeftMenu />\n\n\t\t\t<RightMenu />\n\n\t\t\t<Footer />\n\t\t</>\n\t);\n};\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\ntype Config = {\n  onSuccess?: (registration: ServiceWorkerRegistration) => void;\n  onUpdate?: (registration: ServiceWorkerRegistration) => void;\n};\n\nexport function register(config?: Config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(\n      process.env.PUBLIC_URL,\n      window.location.href\n    );\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl: string, config?: Config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' }\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { PeepsGenerator } from './components/App';\nimport { Provider } from './utils/contextProvider';\nimport * as serviceWorker from './serviceWorker';\n\nimport 'rc-slider/assets/index.css';\nimport './styles/index.css';\n\nReactDOM.hydrate(\n\t<Provider>\n\t\t<PeepsGenerator />\n\t</Provider>,\n\tdocument.getElementById('main')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.register();\n"],"sourceRoot":""}