import React , { memo } from "react" ; import { useConfig , useCurrentStats } from "../../../utils/config" ; import { useServerTime } from "../../../utils/time" ; import { clampResin , getResinRecharge , ResinCap } from "../../../db/resins" ; import { trackEvent } from "../../../utils/umami" ; import { Button , ButtonGroup } from "@chakra-ui/react" ; import { useHotkeys } from "react-hotkeys-hook" ; import { useIntl } from "react-intl" ; const SideButtons = ( { current } ) => { const time = useServerTime ( 1000 ) ; const [ , setResin ] = useConfig ( "resin" ) ; const [ buttons ] = useConfig ( "resinCalcButtons" ) ; const [ , setStats ] = useCurrentStats ( ) ; return ( < ButtonGroup isAttached > { buttons . map ( ( delta ) => { const rounded = Math . floor ( current + delta ) ; if ( ( delta < 0 && rounded >= 0 ) || ( delta > 0 && rounded <= ResinCap ) ) { return ( < SideButton key = { delta } value = { delta } onClick = { ( ) => { setResin ( ( resin ) => ( { value : clampResin ( clampResin ( resin . value + getResinRecharge ( time . valueOf ( ) - resin . time ) ) + delta ) , time : time . valueOf ( ) , } ) ) ; if ( delta < 0 ) { setStats ( ( stats ) => ( { ... stats , resinsSpent : stats . resinsSpent - delta } ) ) ; trackEvent ( "resin" , `resinSub${ Math . abs ( delta ) }` ) ; } else { trackEvent ( "resin" , `resinAdd${ delta }` ) ; } } } />); } } ) } < /ButtonGroup>); } ; const SideButton = ( { value , onClick } ) => { const { formatMessage } = useIntl ( ) ; if ( Math . abs ( value ) < 100 && value % 10 === 0 ) { const num = Math . abs ( value ) . toString ( ) . slice ( 0 , 1 ) ; let hotkeys = [ `${ num }` ] ; hotkeys . push ( `num_${ num }` ) ; if ( value > 0 ) { hotkeys = hotkeys . map ( ( key ) => `shift+${ key }` ) ; } useHotkeys ( hotkeys . join ( ", " ) , ( e ) => { onClick ( ) ; e . preventDefault ( ) ; } , [ onClick ] ) ; } return ( < Button color = "gray.500" size = "sm" p = { 2 } onClick = { onClick } title = { value > 0 ? formatMessage ( { defaultMessage : "Add {amount} resins" } , { amount : value } ) : formatMessage ( { defaultMessage : "Subtract {amount} resins" } , { amount : Math . abs ( value ) } ) } > { value > 0 ? `+${ value }` : `${ value }` } < /Button>); } ; export default memo ( SideButtons ) ;