import React , { memo , useContext , useEffect , useState } from 'react' ; import cx from 'classnames' ; import { createUseStyles } from 'react-jss' ; import winImg from '../../../assets/img/end_win.svg' ; import loseImg from '../../../assets/img/end_lose.svg' ; import tieImg from '../../../assets/img/end_tie.svg' ; import { I18nContext } from '../../i18n/I18nContext' ; import { useAppDispatch } from '../../utils/useAppDispatch' ; import { CLOSE_SCREEN_END_INIT } from '../../constants/ActionTypes' ; import useKeyDown from '../../utils/useKeyDown' ; import { endScreenExitableDelay } from '../../constants/visuals' ; import { EndScreenNoCloseStateType } from '../../types/state' ; const textMap = { lose : 'You Lose!' , tie : 'Tie Game' , win : 'You Win!' } ; const erathianTextMap = { lose : 'you lose' , tie : 'tie game' , win : 'you win' } ; const imgMap = { lose : loseImg , tie : tieImg , win : winImg } ; const redNeonShadow = '0 0 6px rgba(225,191,191,0.98), 0 0 30px rgba(225,191,191,0.62), 0 0 12px rgba(238,54,37,0.78), 0 0 22px rgba(238,54,37,0.84), 0 0 38px rgba(238,54,37,0.88), 0 0 60px rgba(238,54,37,1)' ; const blackNeonShadow = '0 0 6px rgba(0,0,0,0.98), 0 0 30px rgba(0,0,0,0.62), 0 0 12px rgba(0,0,0,0.78), 0 0 22px rgba(0,0,0,0.84), 0 0 38px rgba(0,0,0,0.88), 0 0 60px rgba(0,0,0,1)' ; const neonShadowMap = { lose : blackNeonShadow , tie : redNeonShadow , win : redNeonShadow , } ; const useStyles = createUseStyles < string , EndScreenNoCloseStateType > ( { '@keyframes fadein' : { '0%' : { opacity : 0 , } , '100%' : { opacity : 1 , } , } , container : { padding : '15vh 10%' , opacity : 1 , 'animation-name' : '$fadein' , 'animation-iteration-count' : 1 , 'animation-timing-function' : 'ease-in' , 'animation-duration' : '0.4s' , } , main : { 'background-image' : ( { type } ) => `url(${ imgMap [ type ] })` , } , notetext : { top : '62%' , height : '5em' , 'font-size' : '5vh' , 'line-height' : '5vh' , } , text : { 'font-size' : '15vh' , 'line-height' : '15vh' , bottom : '53%' , 'text-shadow' : ( { type } ) => neonShadowMap [ type ] , } , erathiantext : { 'font-size' : '6.8vh' , 'line-height' : '6.8vh' , bottom : '42%' , 'text-shadow' : '0 0 10px rgba(125,203,255,0.98), 0 0 30px rgba(125,203,255,0.82), 0 0 12px rgba(0,129,255,0.88), 0 0 22px rgba(0,129,255,0.84), 0 0 38px rgba(0,129,255,0.88), 0 0 60px rgba(0,129,255,1)' , } , erathiantextspace : { display : 'inline-block' , width : '4em' , } , } ) ; const EndScreen = ( endScreenState ) => { const dispatch = useAppDispatch ( ) ; const _ = useContext ( I18nContext ) ; const classes = useStyles ( endScreenState ) ; const { type , surrender } = endScreenState ; const text = _ . i18n ( textMap [ type ] ) ; const erathianTextArr = erathianTextMap [ type ] . split ( ' ' ) ; const erathianTextContainer = ( < > { erathianTextArr [ 0 ] } < span className = { classes . erathiantextspace } > < /span> { erathianTextArr [ 1 ] } < />); let noteText = null ; if ( surrender ) { switch ( type ) { case 'win' : noteText = _ . i18n ( 'With no usable or discardable card, your opponent has surrendered' ) ; break ; case 'lose' : noteText = _ . i18n ( 'With no usable or discardable card, you have surrendered' ) ; break ; } } const [ exitable , setExitable ] = useState ( false ) ; useEffect ( ( ) => { setExitable ( false ) ; const timer = setTimeout ( ( ) => { setExitable ( true ) ; } , endScreenExitableDelay ) ; return ( ) => { clearTimeout ( timer ) ; } ; } , [ endScreenState ] ) ; const onActionFunc = ( ) => { dispatch ( { type : CLOSE_SCREEN_END_INIT , } ) ; } ; useKeyDown ( null , onActionFunc , endScreenExitableDelay ) ; const clickObj = exitable ? { onClick : onActionFunc , onContextMenu : onActionFunc , tabIndex : 0 } : { } ; return ( < div className = { cx ( 'absolute w-full h-full top-0 left-0 z-90 bg-black bg-opacity-50' , classes . container ) } { ... clickObj } > < div className = { cx ( 'w-full h-full bg-center bg-no-repeat bg-contain relative' , classes . main ) } > { noteText !== null && ( < div className = { cx ( classes . notetext , 'absolute w-full font-bold text-white text-center text-shadow-stroke' , 'robotocondensed' , 'el-text' ) } > { noteText } < /div>)} < div className = { cx ( classes . text , 'absolute w-full font-bold text-white text-center' , 'robotocondensed' , 'el-text' ) } > { text } < /div> < div className = { cx ( classes . erathiantext , 'absolute w-full tracking-tighter text-white text-center' , 'erathian-normal' ) } > { erathianTextContainer } < /div> { } < /div> < /div>); } ; export default memo ( EndScreen ) ;