import * as React from "react" ; import { useSelector } from "react-redux" ; import { GamePhase } from "@creature-chess/models" ; import { AppState } from "../../store" ; const getOpponentName = ( state ) => state . game . playerList . find ( p => p . id === state . game . playerInfo . opponentId ) ?. name || null ; const NowPlaying = ( ) => { const phase = useSelector < AppState , GamePhase | null > ( state => state . game . roundInfo . phase ) ; const opponentName = useSelector < AppState , string | null > ( getOpponentName ) ; if ( phase !== GamePhase . READY && phase !== GamePhase . PLAYING ) { return null ; } if ( ! opponentName ) { return null ; } return < div className = "now-playing" > < span className = "label" > Now Playing : { opponentName } < /span></div > ; } ; export { NowPlaying } ;