import React , { CSSProperties } from "react" ; import { ButtonGroup , Button , Tooltip , OverlayTrigger } from "react-bootstrap" ; import { useStore } from "laco-react" ; import Store from "../../store" ; import Scoreboard from "../../model/Scoreboard" ; import Side from "../../model/Side" ; function SideButton ( { value , active , onClick , label , tooltip } ) { return ( < OverlayTrigger overlay = { < Tooltip id = { value } > { tooltip } < /Tooltip>}> < Button size = "sm" value = { value } active = { active } onClick = { onClick } name = "side" style = { { paddingTop : 3 , paddingBottom : 3 , minWidth : 30 } } onFocus = { ( { currentTarget } ) => { currentTarget . blur ( ) ; } } > { label } < /Button> < /OverlayTrigger>); } export default function SideComponent ( { playerIndex , style } ) { const scoreboard = useStore ( Store ) ; const { players } = scoreboard ; const { side } = players [ playerIndex ] ; const handleOnClick = ( { target } ) => { Store . set ( ( state ) => { const currentPlayer = state . players [ playerIndex ] ; const newSide = Side [ target . value ] ; if ( currentPlayer . side === newSide ) { currentPlayer . side = undefined ; return state ; } currentPlayer . side = newSide ; if ( ! [ 0 , 1 ] . includes ( playerIndex ) ) { return state ; } const otherPlayerIndex = playerIndex === 0 ? 1 : 0 ; const otherPlayer = state . players [ otherPlayerIndex ] ; if ( newSide === "winners" ) { otherPlayer . side = Side . losers ; } return state ; } ) ; } ; return ( < ButtonGroup style = { style } > < SideButton active = { side === Side . winners } label = "W" onClick = { handleOnClick } value = "winners" tooltip = "Winners Side" / > < SideButton active = { side === Side . losers } label = "L" onClick = { handleOnClick } value = "losers" tooltip = "Losers Side" / > < /ButtonGroup>); }