import React from "react" ; import { IDiceRoller } from "./interface" ; interface IDiceRollerViewProps { model : IDiceRoller ; } export const DiceRollerView = ( props ) => { const [ diceValue , setDiceValue ] = React . useState ( props . model . value ) ; React . useEffect ( ( ) => { setDiceValue ( props . model . value ) ; const onDiceRolled = ( ) => { setDiceValue ( props . model . value ) ; } ; props . model . on ( "diceRolled" , onDiceRolled ) ; return ( ) => { props . model . off ( "diceRolled" , onDiceRolled ) ; } ; } , [ props . model ] ) ; const diceChar = String . fromCodePoint ( 0x267F + diceValue ) ; return ( < div > < span style = { { fontSize : 50 } } > { diceChar } < /span> < button onClick = { props . model . roll } > Roll < /button> < /div>); } ;