import * as React from 'react' ; import { connect } from 'react-redux' ; import { Dispatch , Action } from 'redux' ; import Dialog from '../common/Dialog' ; import State from '../../state/State' ; import actionCreators from '../../state/actionCreators' ; import localization from '../../model/resources/localization' ; import SettingsState from '../../state/settings/SettingsState' ; import settingsActionCreators from '../../state/settings/settingsActionCreators' ; import Sex from '../../model/enums/Sex' ; import './SettingsDialog.css' ; interface SettingsDialogProps { settings : SettingsState ; onMute : ( isSoundEnabled : boolean ) => void ; onShowPersonsAtBottomOnWideScreenChanged : ( showPersonsAtBottomOnWideScreen : boolean ) => void ; onSexChanged : ( newSex : Sex ) => void ; onOralChanged : ( oral : boolean ) => void ; onFalseStartsChanged : ( falseStarts : boolean ) => void ; onHintShowmanChanged : ( hintShowman : boolean ) => void ; onClose : ( ) => void ; } const mapStateToProps = ( state ) => ( { settings : state . settings } ) ; const mapDispatchToProps = ( dispatch ) => ( { onMute : ( isSoundEnabled ) => { dispatch ( settingsActionCreators . isSoundEnabledChanged ( isSoundEnabled ) ) ; } , onShowPersonsAtBottomOnWideScreenChanged : ( showPersonsAtBottomOnWideScreen ) => { dispatch ( settingsActionCreators . showPersonsAtBottomOnWideScreenChanged ( showPersonsAtBottomOnWideScreen ) ) ; } , onSexChanged : ( newSex ) => { dispatch ( settingsActionCreators . onSexChanged ( newSex ) ) ; } , onOralChanged : ( oral ) => { dispatch ( settingsActionCreators . onOralChanged ( oral ) ) ; } , onFalseStartsChanged : ( falseStarts ) => { dispatch ( settingsActionCreators . onFalseStartsChanged ( falseStarts ) ) ; } , onHintShowmanChanged : ( hintShowman ) => { dispatch ( settingsActionCreators . onHintShowmanChanged ( hintShowman ) ) ; } , onClose : ( ) => { dispatch ( actionCreators . showSettings ( false ) ) ; } } ) ; export class SettingsDialog extends React . Component < SettingsDialogProps > { private layout : React . RefObject < HTMLDivElement > ; constructor ( props ) { super ( props ) ; this . layout = React . createRef < HTMLDivElement > ( ) ; } componentDidMount ( ) { window . addEventListener ( 'mousedown' , this . hide ) ; } componentWillUnmount ( ) { window . removeEventListener ( 'mousedown' , this . hide ) ; } hide = ( e ) : void => { if ( ! this . layout . current || ( e . target instanceof Node && this . layout . current . contains ( e . target as Node ) ) ) { return ; } this . props . onClose ( ) ; } ; private onSexChanged = ( e ) => { this . props . onSexChanged ( e . target . id === 'male' && e . target . checked ? Sex . Male : Sex . Female ) ; } ; render ( ) { return ( < Dialog id = "settingsDialog" title = { localization . settings } onClose = { this . props . onClose } > < div ref = { this . layout } className = "settingsDialogBody" > < div > < input id = "isSoundEnabled" type = "checkbox" checked = { this . props . settings . isSoundEnabled } onChange = { ( ) => this . props . onMute ( ! this . props . settings . isSoundEnabled ) } /> < label htmlFor = "isSoundEnabled" > { localization . sound } < /label> < /div> < div > < input id = "showPersonsAtBottomOnWideScreen" type = "checkbox" checked = { this . props . settings . showPersonsAtBottomOnWideScreen } onChange = { ( ) => this . props . onShowPersonsAtBottomOnWideScreenChanged ( ! this . props . settings . showPersonsAtBottomOnWideScreen ) } /> < label htmlFor = "showPersonsAtBottomOnWideScreen" > { localization . showPersonsAtBottomOnWideScreen } < /label> < /div> < p className = "header" > { localization . sex } < /p> < div className = "sexLogin" > < input type = "radio" id = "male" name = "sex" checked = { this . props . settings . sex === Sex . Male } onChange = { this . onSexChanged } / > < label htmlFor = "male" > { localization . male } < /label> < input type = "radio" id = "female" name = "sex" checked = { this . props . settings . sex === Sex . Female } onChange = { this . onSexChanged } / > < label htmlFor = "female" > { localization . female } < /label> < /div> < h2 > { localization . game } < /h2> < div className = "settingItem" > < input id = "oral" type = "checkbox" checked = { this . props . settings . appSettings . oral } onChange = { ( ) => this . props . onOralChanged ( ! this . props . settings . appSettings . oral ) } /> < label htmlFor = "oral" > { localization . oralGame } < /label> < span className = "hint" > { localization . oralGameHint } < /span> < /div> < div className = "settingItem" > < input id = "falseStarts" type = "checkbox" checked = { this . props . settings . appSettings . falseStart } onChange = { ( ) => this . props . onFalseStartsChanged ( ! this . props . settings . appSettings . falseStart ) } /> < label htmlFor = "falseStarts" > { localization . falseStarts } < /label> < span className = "hint" > { localization . falseStartsHint } < /span> < /div> < div className = "settingItem" > < input id = "hintShowman" type = "checkbox" checked = { this . props . settings . appSettings . hintShowman } onChange = { ( ) => this . props . onHintShowmanChanged ( ! this . props . settings . appSettings . hintShowman ) } /> < label htmlFor = "hintShowman" > { localization . hintShowman } < /label> < /div> < /div> < /Dialog>); } } export default connect ( mapStateToProps , mapDispatchToProps ) ( SettingsDialog ) ;