import { Point } from 'creepyface' ; import React , { useCallback , useEffect , useRef , useState } from 'react' ; import { useRafLoop , useWindowSize } from 'react-use' ; import santaHat from '../../public/santa-hat.png' ; import { useTranslate } from './Language' ; const isChristmas = ( ) => { const today = new Date ( ) ; const day = today . getDate ( ) ; const month = today . getMonth ( ) ; return ( month === 11 && day >= 15 ) || ( month === 0 && day <= 7 ) ; } ; const Pointer = ( props ) => { const { onPositionChange } = props ; const ref = useRef < SVGGElement > ( null ) ; const updatePosition = useCallback ( ( ) => { if ( ref . current ) { const { left , top } = ref . current . getBoundingClientRect ( ) ; onPositionChange ?. ( [ left - 1 , top - 1 ] ) ; } } , [ onPositionChange ] ) ; const { width , height } = useWindowSize ( ) ; useEffect ( ( ) => updatePosition ( ) , [ width , height , updatePosition ] ) ; const [ stop , start ] = useRafLoop ( updatePosition , false ) ; useEffect ( ( ) => { props . animating && props . onPositionChange ? start ( ) : stop ( ) ; } , [ props . animating , props . onPositionChange , stop , start ] ) ; return ( < g ref = { ref } className = "pointer" > < polygon points = "137.7,0 141.2,31.5 152.2,20 166.8,14.1" / > < /g>); } ; export default function Logo ( props ) { const [ animating , setAnimating ] = useState ( false ) ; const animate = ( ) => { if ( ! animating ) { setTimeout ( ( ) => setAnimating ( false ) , 800 ) ; setAnimating ( true ) ; } } ; const translate = useTranslate ( ) ; return ( < div className = "logo" > < div className = "wrapper" > < svg className = { animating ? ' animate' : '' } onMouseEnter = { animate } onClick = { animate } viewBox = { `0 0 317.8 78` } xmlns = "http://www.w3.org/2000/svg" xmlnsXlink = "http://www.w3.org/1999/xlink" > < title > Creepyface < /title> < Pointer animating = { animating } onPositionChange = { props . onPointerPositionChange } / > < g className = "eye" > < circle className = "pupil" cx = "83" cy = "46" r = "3.7" / > < /g> < g className = "eye" > < circle className = "pupil" cx = "115.8" cy = "46" r = "3.7" / > < /g> < g className = "text" > < path d = "M27.6,39.2l-1,11.7c-0.5-0.1-1.1-0.2-1.6-0.3s-1-0.1-1.6-0.1c-1.3,0-2.6,0.2-3.8,0.5 c - 1.2 , 0.3 - 2.3 , 0.8 - 3.2 , 1.5 c - 0.9 , 0.7 - 1.7 , 1.6 - 2.2 , 2.6 s - 0.8 , 2.3 - 0.8 , 3.7 c0 , 1 , 0.2 , 1.9 , 0.5 , 2.7 s0 .7 , 1.4 , 1.3 , 1.9 s1 .3 , 0.9 , 2.1 , 1.2 S19 , 65 , 20 , 65 c0 .7 , 0 , 1.4 - 0.1 , 2.1 - 0.2 s1 .4 - 0.3 , 2.2 - 0.6 s1 .4 - 0.5 , 2.1 - 0.8 s1 .3 - 0.6 , 1.9 - 1 l - 0.4 , 13.1 c - 0.7 , 0.4 - 1.5 , 0.7 - 2.3 , 1 S23 .9 , 77 , 23 , 77.3 s - 1.8 , 0.4 - 2.6 , 0.5 c - 0.9 , 0.1 - 1.7 , 0.2 - 2.5 , 0.2 c - 2.6 , 0 - 5 - 0.5 - 7.2 - 1.5 s - 4 - 2.3 - 5.6 - 4 c - 1.5 - 1.7 - 2.8 - 3.7 - 3.6 - 5.9 C0 .4 , 64.3 , 0 , 61.9 , 0 , 59.4 c0 - 3 , 0.4 - 5.9 , 1.3 - 8.5 S3 .4 , 46 , 5.1 , 44 s3 .8 - 3.5 , 6.2 - 4.6 c2 .5 - 1.1 , 5.3 - 1.7 , 8.5 - 1.7 c1 .3 , 0 , 2.6 , 0.1 , 3.9 , 0.3 C25 .1 , 38.3 , 26.3 , 38.7 , 27.6 , 39.2 z "/> < path d = "M62.8,50.4c0,1.4-0.1,2.8-0.4,3.9c-0.3,1.2-0.6,2.3-1.2,3.2c-0.5,1-1.2,1.9-2.1,2.7c-0.9,0.8-1.9,1.6-3.1,2.4 l6 .6 , 11.8 l - 12.5 , 2.4 l - 4.3 - 11.9 L42 .3 , 65 L42 , 76.8 H30c0 .1 - 4.2 , 0.2 - 8.4 , 0.3 - 12.6 c0 .1 - 4.2 , 0.2 - 8.4 , 0.3 - 12.6 c0 - 2.1 , 0.1 - 4.2 , 0.1 - 6.3 s0 .1 - 4.2 , 0.2 - 6.3 c1 .3 - 0.5 , 2.6 - 0.9 , 3.8 - 1.2 c1 .3 - 0.3 , 2.5 - 0.6 , 3.8 - 0.7 c1 .3 - 0.2 , 2.6 - 0.3 , 3.9 - 0.4 c1 .3 - 0.1 , 2.6 - 0.1 , 4 - 0.1 c2 .1 , 0 , 4.2 , 0.3 , 6.1 , 0.9 c2 , 0.6 , 3.7 , 1.5 , 5.2 , 2.6 c1 .5 , 1.2 , 2.7 , 2.6 , 3.7 , 4.4 C62 .4 , 46 , 62.8 , 48.1 , 62.8 , 50.4 z M50 .4 , 51.3 c0 - 0.8 - 0.1 - 1.5 - 0.3 - 2.1 s - 0.5 - 1.2 - 0.9 - 1.7 s - 0.9 - 0.8 - 1.6 - 1.1 C47 , 46.1 , 46.2 , 46 , 45.4 , 46 c - 0.4 , 0 - 0.7 , 0 - 1.1 , 0.1 c - 0.4 , 0 - 0.7 , 0.1 - 1 , 0.2 l - 0.4 , 10.4 h0 .7 c0 .8 , 0 , 1.6 - 0.1 , 2.4 - 0.3 s1 .6 - 0.5 , 2.2 - 0.9 c0 .7 - 0.4 , 1.2 - 1 , 1.6 - 1.6 C50 .2 , 53 , 50.4 , 52.2 , 50.4 , 51.3 z "/> < path d = "M162.6,51.6c0,1.8-0.3,3.4-0.8,4.8c-0.5,1.4-1.3,2.6-2.2,3.7s-2,1.9-3.3,2.6c-1.3,0.7-2.6,1.3-4,1.8 c - 1.4 , 0.5 - 2.9 , 0.8 - 4.5 , 1 c - 1.5 , 0.2 - 3.1 , 0.3 - 4.5 , 0.3 v11 .9 h - 13 c0 - 2.1 , 0 - 4.2 , 0 - 6.2 s0 - 4 , 0 - 6 s0 - 4 , 0 - 6 s0 - 4.1 , 0 - 6.2 c0 - 2.3 , 0 - 4.5 , 0 - 6.8 s0 - 4.5 , 0.1 - 6.8 c2 .4 - 0.7 , 4.7 - 1.2 , 7.1 - 1.6 c2 .4 - 0.4 , 4.8 - 0.5 , 7.3 - 0.5 c1 .4 , 0 , 2.9 , 0.1 , 4.3 , 0.3 c1 .4 , 0.2 , 2.8 , 0.6 , 4.1 , 1.1 s2 .5 , 1.1 , 3.6 , 1.9 c1 .1 , 0.8 , 2.1 , 1.6 , 2.9 , 2.7 s1 .5 , 2.2 , 1.9 , 3.6 S162 .6 , 49.9 , 162.6 , 51.6 z M150 .3 , 52.5 c0 - 1.2 - 0.4 - 2.1 - 1.1 - 2.8 c - 0.7 - 0.7 - 1.7 - 1 - 2.9 - 1 c - 0.4 , 0 - 0.8 , 0 - 1.2 , 0.1 s - 0.8 , 0.1 - 1.2 , 0.2 l - 0.3 , 8.1 c0 .3 , 0 , 0.5 , 0.1 , 0.8 , 0.1 c0 .2 , 0 , 0.5 , 0 , 0.8 , 0 c0 .7 , 0 , 1.3 - 0.1 , 1.9 - 0.3 c0 .6 - 0.2 , 1.2 - 0.5 , 1.7 - 1 c0 .5 - 0.4 , 0.9 - 0.9 , 1.2 - 1.5 C150 .1 , 53.9 , 150.3 , 53.2 , 150.3 , 52.5 z "/> < path d = "M198.1,39.5L185,60.9l0.4,15.8h-14.3l0.3-15.6l-10.2-20.7l14.2-1.8l4.5,12l4.8-12L198.1,39.5z" / > < path d = "M224.6,37.6c-0.1,1.7-0.2,3.5-0.3,5.2s-0.2,3.4-0.4,5.2l-11.8,0.6v3.5h10.2l-0.6,8.6L212,61l0.1,15.4 L198 , 76.7 l0 .9 - 39 L224 .6 , 37.6 L224 .6 , 37.6 z "/> < path d = "M257.7,74.8l-13.8,1.8l-1.7-6.3h-6.3l-1.4,6.3l-14.2-1.4l11.1-37.1l15.5-0.8L257.7,74.8z M241.2,61.8 l - 2.1 - 9.7 l - 2.1 , 9.7 H241 .2 z "/> < path d = "M284.1,39.2l-1,11.7c-0.5-0.1-1.1-0.2-1.6-0.3s-1-0.1-1.6-0.1c-1.3,0-2.6,0.2-3.8,0.5 c - 1.2 , 0.3 - 2.3 , 0.8 - 3.2 , 1.5 c - 0.9 , 0.7 - 1.7 , 1.6 - 2.2 , 2.6 s - 0.8 , 2.3 - 0.8 , 3.7 c0 , 1 , 0.2 , 1.9 , 0.5 , 2.7 s0 .7 , 1.4 , 1.3 , 1.9 c0 .6 , 0.5 , 1.3 , 0.9 , 2.1 , 1.2 c0 .8 , 0.3 , 1.7 , 0.4 , 2.7 , 0.4 c0 .7 , 0 , 1.4 - 0.1 , 2.1 - 0.2 s1 .4 - 0.3 , 2.2 - 0.6 c0 .7 - 0.2 , 1.4 - 0.5 , 2.1 - 0.8 s1 .3 - 0.6 , 1.9 - 1 l - 0.4 , 13.1 c - 0.7 , 0.4 - 1.5 , 0.7 - 2.3 , 1 s - 1.7 , 0.5 - 2.6 , 0.8 s - 1.8 , 0.4 - 2.6 , 0.5 c - 0.9 , 0.1 - 1.7 , 0.2 - 2.5 , 0.2 c - 2.6 , 0 - 5 - 0.5 - 7.2 - 1.5 s - 4 - 2.3 - 5.6 - 4 c - 1.5 - 1.7 - 2.8 - 3.7 - 3.6 - 5.9 s - 1.3 - 4.6 - 1.3 - 7.2 c0 - 3 , 0.4 - 5.9 , 1.3 - 8.5 s2 .1 - 4.9 , 3.8 - 6.9 s3 .8 - 3.5 , 6.2 - 4.6 c2 .5 - 1.1 , 5.3 - 1.7 , 8.5 - 1.7 c1 .3 , 0 , 2.6 , 0.1 , 3.9 , 0.3 C281 .6 , 38.3 , 282.9 , 38.7 , 284.1 , 39.2 z "/> < path d = "M317.8,54.7c0,1.6-0.1,3.2-0.3,4.8c-3.2,0.2-6.3,0.5-9.5,1c-3.1,0.5-6.3,0.9-9.4,1.3c0.5,1.3,1.2,2.4,2.3,3.2 c1 , 0.8 , 2.3 , 1.2 , 3.7 , 1.2 c0 .7 , 0 , 1.6 - 0.1 , 2.4 - 0.4 c0 .9 - 0.3 , 1.8 - 0.6 , 2.6 - 1 c0 .9 - 0.4 , 1.7 - 0.9 , 2.5 - 1.3 c0 .8 - 0.5 , 1.5 - 0.9 , 2.1 - 1.3 l - 1.3 , 12.6 c - 0.7 , 0.6 - 1.5 , 1 - 2.4 , 1.4 c - 0.8 , 0.4 - 1.7 , 0.7 - 2.6 , 0.9 c - 0.9 , 0.2 - 1.8 , 0.4 - 2.8 , 0.5 c - 0.9 , 0.1 - 1.8 , 0.2 - 2.7 , 0.2 c - 1.8 , 0 - 3.5 - 0.2 - 5 - 0.8 c - 1.5 - 0.5 - 2.9 - 1.2 - 4.1 - 2.1 s - 2.3 - 2 - 3.2 - 3.2 c - 0.9 - 1.2 - 1.7 - 2.6 - 2.3 - 4 s - 1.1 - 3 - 1.4 - 4.6 s - 0.5 - 3.2 - 0.5 - 4.9 s0 .2 - 3.5 , 0.5 - 5.2 s0 .8 - 3.4 , 1.4 - 5 s1 .4 - 3.1 , 2.4 - 4.4 c1 - 1.4 , 2.1 - 2.6 , 3.4 - 3.6 s2 .8 - 1.8 , 4.4 - 2.4 c1 .6 - 0.6 , 3.5 - 0.9 , 5.4 - 0.9 c1 .7 , 0 , 3.2 , 0.2 , 4.5 , 0.7 c1 .4 , 0.5 , 2.6 , 1.1 , 3.6 , 1.9 c1 .1 , 0.8 , 2 , 1.8 , 2.8 , 2.9 s1 .4 , 2.3 , 1.9 , 3.7 s0 .9 , 2.7 , 1.1 , 4.2 C317 .7 , 51.7 , 317.8 , 53.2 , 317.8 , 54.7 z M306 .7 , 53.3 c0 - 0.5 - 0.1 - 1.1 - 0.2 - 1.6 s - 0.3 - 1 - 0.5 - 1.5 c - 0.3 - 0.4 - 0.6 - 0.8 - 1 - 1.1 s - 0.9 - 0.4 - 1.5 - 0.4 c - 0.7 , 0 - 1.4 , 0.2 - 2 , 0.6 s - 1.1 , 0.9 - 1.5 , 1.5 s - 0.7 , 1.3 - 1 , 2 s - 0.5 , 1.4 - 0.6 , 1.9 l8 .2 - 0.8 v - 0.6 C306 .6 , 53.3 , 306.7 , 53.3 , 306.7 , 53.3 z "/> < path d = "M128.1,59.5c0.2-1.6,0.3-3.2,0.3-4.8c0-1.5-0.1-3-0.5-4.6c-0.2-1.5-0.6-2.8-1.1-4.2s-1.1-2.6-1.9-3.7 c - 0.8 - 1.1 - 1.7 - 2.1 - 2.8 - 2.9 c - 1 - 0.8 - 2.2 - 1.4 - 3.6 - 1.9 c - 1.3 - 0.5 - 2.8 - 0.7 - 4.5 - 0.7 c - 1.9 , 0 - 3.8 , 0.3 - 5.4 , 0.9 c - 1.6 , 0.6 - 3.1 , 1.4 - 4.4 , 2.4 s - 2.4 , 2.2 - 3.4 , 3.6 c - 1 , 1.3 - 1.8 , 2.8 - 2.4 , 4.4 c - 0.6 , 1.6 - 1.1 , 3.3 - 1.4 , 5 s - 0.5 , 3.5 - 0.5 , 5.2 s0 .2 , 3.3 , 0.5 , 4.9 s0 .8 , 3.2 , 1.4 , 4.6 s1 .4 , 2.8 , 2.3 , 4 s2 , 2.3 , 3.2 , 3.2 c1 .2 , 0.9 , 2.6 , 1.6 , 4.1 , 2.1 c1 .5 , 0.6 , 3.2 , 0.8 , 5 , 0.8 c0 .9 , 0 , 1.8 - 0.1 , 2.7 - 0.2 c1 - 0.1 , 1.9 - 0.3 , 2.8 - 0.5 s1 .8 - 0.5 , 2.6 - 0.9 c0 .9 - 0.4 , 1.7 - 0.8 , 2.4 - 1.4 l1 .3 - 12.6 c - 0.6 , 0.4 - 1.3 , 0.8 - 2.1 , 1.3 c - 0.8 , 0.4 - 1.6 , 0.9 - 2.5 , 1.3 c - 0.8 , 0.4 - 1.7 , 0.7 - 2.6 , 1 c - 0.8 , 0.3 - 1.7 , 0.4 - 2.4 , 0.4 c - 1.4 , 0 - 2.7 - 0.4 - 3.7 - 1.2 c - 1.1 - 0.8 - 1.8 - 1.9 - 2.3 - 3.2 c3 .1 - 0.4 , 6.3 - 0.8 , 9.4 - 1.3 C121 .8 , 60 , 124.9 , 59.7 , 128.1 , 59.5 z M104 .2 , 48.8 c0 - 5.1 , 4.2 - 9.3 , 9.3 - 9.3 s9 .3 , 4.2 , 9.3 , 9.3 s - 4.2 , 9.3 - 9.3 , 9.3 S104 .2 , 53.9 , 104.2 , 48.8 z "/> < path d = "M95.2,59.5c0.2-1.6,0.3-3.2,0.3-4.8c0-1.5-0.1-3-0.5-4.6c-0.2-1.5-0.6-2.8-1.1-4.2s-1.1-2.6-1.9-3.7 c - 0.8 - 1.1 - 1.7 - 2.1 - 2.8 - 2.9 c - 1 - 0.8 - 2.2 - 1.4 - 3.6 - 1.9 c - 1.3 - 0.5 - 2.8 - 0.7 - 4.5 - 0.7 c - 1.9 , 0 - 3.8 , 0.3 - 5.4 , 0.9 c - 1.6 , 0.6 - 3.1 , 1.4 - 4.4 , 2.4 s - 2.4 , 2.2 - 3.4 , 3.6 c - 1 , 1.3 - 1.8 , 2.8 - 2.4 , 4.4 s - 1.1 , 3.3 - 1.4 , 5 c - 0.3 , 1.7 - 0.5 , 3.5 - 0.5 , 5.2 s0 .2 , 3.3 , 0.5 , 4.9 c0 .3 , 1.6 , 0.8 , 3.2 , 1.4 , 4.6 s1 .4 , 2.8 , 2.3 , 4 s2 , 2.3 , 3.2 , 3.2 c1 .2 , 0.9 , 2.6 , 1.6 , 4.1 , 2.1 c1 .5 , 0.6 , 3.2 , 0.8 , 5 , 0.8 c0 .9 , 0 , 1.8 - 0.1 , 2.7 - 0.2 c1 - 0.1 , 1.9 - 0.3 , 2.8 - 0.5 s1 .8 - 0.5 , 2.6 - 0.9 c0 .9 - 0.4 , 1.7 - 0.8 , 2.4 - 1.4 l1 .3 - 12.6 c - 0.6 , 0.4 - 1.3 , 0.8 - 2.1 , 1.3 c - 0.8 , 0.4 - 1.6 , 0.9 - 2.5 , 1.3 c - 0.8 , 0.4 - 1.7 , 0.7 - 2.6 , 1 c - 0.8 , 0.3 - 1.7 , 0.4 - 2.4 , 0.4 c - 1.4 , 0 - 2.7 - 0.4 - 3.7 - 1.2 c - 1.1 - 0.8 - 1.8 - 1.9 - 2.3 - 3.2 c3 .1 - 0.4 , 6.3 - 0.8 , 9.4 - 1.3 C88 .9 , 60 , 92 , 59.7 , 95.2 , 59.5 z M71 .4 , 48.8 c0 - 5.1 , 4.2 - 9.3 , 9.3 - 9.3 s9 .3 , 4.2 , 9.3 , 9.3 s - 4.2 , 9.3 - 9.3 , 9.3 S71 .4 , 53.9 , 71.4 , 48.8 z "/> < /g> < /svg> { isChristmas ( ) && ( < img className = "hat" alt = { translate ( 'Santa hat' ) } src = { santaHat . src } / > ) } < /div> < /div>); }