librepoply/game/client/jsx/SendMoneyDialog.jsx

import React from 'react';
import Dialog from "./components/Dialog";
import {gameService} from "./services/GameService";
import Token from "./Token";
import Note from "./Note";

export default class SendMoneyDialog extends React.Component {
    state = {
		messages: '0'
 
    };

    selectPlayer = (player) => {
        this.setState({dest: player.id})
    }

    sendMoney = () => {
        if(this.state.dest) {
            gameService.sendMoney(this.props.player.id, this.state.dest, this.state.messages);
            this.props.dismiss();
        }
    }
	handleChange(evt) {
		const m = (evt.target.validity.valid) ? evt.target.value : this.state.messages;
		
		this.setState({ messages: m });
	}
    render() {
        const player = this.props.player;
        if (player) {
            const availablePlayers = this.props.game.players.filter(p => p.id !== player.id);


            const actions = [
                {
                    name: 'Close',
                    click: () => this.props.dismiss(),
                },
                {
                    name: 'Send $' + this.state.messages,
                    click: () => this.sendMoney(),
                },
            ];

            return (<Dialog actions={actions}>
                <div className="send-money-dialog">
                    <h1>Send Money</h1>
                    <div className="select-player">
                        <h3>Select Player</h3>
                        {availablePlayers.map(p => <div key={p.id} onClick={() => this.selectPlayer(p)}
                                                        className="player">
                            <Token token={p.token} selected={this.state.dest === p.id}/>
                            {p.name}
                        </div>)}

                    </div>
                    <div className="select-notes">
                        <h3>Select notes</h3>
                        <div className="notes">
                            <input value={this.state.messages} onChange={event => this.setState({messages: event.target.value.replace(/\D/,'')})}/>
                        </div>
                    </div>
                </div>
            </Dialog>)
        } else {
            return (<div></div>);
        }
    }
}