From 2701df1e3b03c7c605ccf212a02987d53fbd0609 Mon Sep 17 00:00:00 2001 From: notoraptor Date: Wed, 17 Jul 2019 15:16:43 -0400 Subject: [web] Make button "Delete all" remove only orders from current se… (#49) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Make button "Delete all" remove only orders from current selected power. - Reorganize code - [web] Remove bugged and useless function gameReloaded() from game page. - This function caused error `engine.getPhaseType is not a function` for games with deadlines. - Move function saveGameToDisk into its own file. - [web] Add documentation to methods involved in orders management to help understand what happens. - Move methods getServerOrders() from game GUI component to game engine object. - Rename method onSetNoOrders to onSetEmptyOrdersSet. - Rename property in PowerActionsForm: onNoOrders => onPass. - [web] Update sending orders to send request clearOrders when local orders list is null. - Renamed local file: - components/power_order => power_orders - forms/power_actions_form => power_order_creation_form - Move power orders buttons bar to a separate file: - components/power_orders_actions_bar - [web] Improve messages about local/server defined orders. --- diplomacy/web/src/gui/forms/connection_form.jsx | 123 +++++++++++++++++++++ diplomacy/web/src/gui/forms/create_form.jsx | 95 ++++++++++++++++ diplomacy/web/src/gui/forms/find_form.jsx | 70 ++++++++++++ diplomacy/web/src/gui/forms/join_form.jsx | 80 ++++++++++++++ diplomacy/web/src/gui/forms/message_form.jsx | 53 +++++++++ .../src/gui/forms/power_order_creation_form.jsx | 121 ++++++++++++++++++++ .../web/src/gui/forms/select_location_form.jsx | 36 ++++++ diplomacy/web/src/gui/forms/select_via_form.jsx | 35 ++++++ 8 files changed, 613 insertions(+) create mode 100644 diplomacy/web/src/gui/forms/connection_form.jsx create mode 100644 diplomacy/web/src/gui/forms/create_form.jsx create mode 100644 diplomacy/web/src/gui/forms/find_form.jsx create mode 100644 diplomacy/web/src/gui/forms/join_form.jsx create mode 100644 diplomacy/web/src/gui/forms/message_form.jsx create mode 100644 diplomacy/web/src/gui/forms/power_order_creation_form.jsx create mode 100644 diplomacy/web/src/gui/forms/select_location_form.jsx create mode 100644 diplomacy/web/src/gui/forms/select_via_form.jsx (limited to 'diplomacy/web/src/gui/forms') diff --git a/diplomacy/web/src/gui/forms/connection_form.jsx b/diplomacy/web/src/gui/forms/connection_form.jsx new file mode 100644 index 0000000..eb7e049 --- /dev/null +++ b/diplomacy/web/src/gui/forms/connection_form.jsx @@ -0,0 +1,123 @@ +// ============================================================================== +// Copyright (C) 2019 - Philip Paquette, Steven Bocco +// +// This program is free software: you can redistribute it and/or modify it under +// the terms of the GNU Affero General Public License as published by the Free +// Software Foundation, either version 3 of the License, or (at your option) any +// later version. +// +// This program is distributed in the hope that it will be useful, but WITHOUT +// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS +// FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more +// details. +// +// You should have received a copy of the GNU Affero General Public License along +// with this program. If not, see . +// ============================================================================== +import React from 'react'; +import {Forms} from "../components/forms"; +import {UTILS} from "../../diplomacy/utils/utils"; +import PropTypes from "prop-types"; +import {DipStorage} from "../utils/dipStorage"; + +export class ConnectionForm extends React.Component { + constructor(props) { + super(props); + // Load fields values from local storage. + const initialState = this.initState(); + const savedState = DipStorage.getConnectionForm(); + if (savedState) { + if (savedState.hostname) + initialState.hostname = savedState.hostname; + if (savedState.port) + initialState.port = savedState.port; + if (savedState.username) + initialState.username = savedState.username; + if (savedState.showServerFields) + initialState.showServerFields = savedState.showServerFields; + } + this.state = initialState; + this.updateServerFieldsView = this.updateServerFieldsView.bind(this); + this.onChange = this.onChange.bind(this); + } + + initState() { + return { + hostname: window.location.hostname, + port: (window.location.protocol.toLowerCase() === 'https:') ? 8433 : 8432, + username: '', + password: '', + showServerFields: false + }; + } + + updateServerFieldsView() { + DipStorage.setConnectionshowServerFields(!this.state.showServerFields); + this.setState({showServerFields: !this.state.showServerFields}); + } + + onChange(newState) { + const initialState = this.initState(); + if (newState.hostname !== initialState.hostname) + DipStorage.setConnectionHostname(newState.hostname); + else + DipStorage.setConnectionHostname(null); + if (newState.port !== initialState.port) + DipStorage.setConnectionPort(newState.port); + else + DipStorage.setConnectionPort(null); + if (newState.username !== initialState.username) + DipStorage.setConnectionUsername(newState.username); + else + DipStorage.setConnectionUsername(null); + if (this.props.onChange) + this.props.onChange(newState); + } + + render() { + const onChange = Forms.createOnChangeCallback(this, this.onChange); + const onSubmit = Forms.createOnSubmitCallback(this, this.props.onSubmit); + return ( +
+ {Forms.createRow( + Forms.createColLabel('username', 'username:'), + + )} + {Forms.createRow( + Forms.createColLabel('password', 'password:'), + + )} +
+
+ + server settings {this.state.showServerFields ? UTILS.html.UNICODE_BOTTOM_ARROW : UTILS.html.UNICODE_TOP_ARROW} + +
+ {this.state.showServerFields && ( +
+ {Forms.createRow( + , + + )} + {Forms.createRow( + , + + )} +
+ )} +
+ {Forms.createRow('', Forms.createSubmit('connect', true, onSubmit))} +
+ ); + } +} + +ConnectionForm.propTypes = { + onChange: PropTypes.func, + onSubmit: PropTypes.func +}; diff --git a/diplomacy/web/src/gui/forms/create_form.jsx b/diplomacy/web/src/gui/forms/create_form.jsx new file mode 100644 index 0000000..6753519 --- /dev/null +++ b/diplomacy/web/src/gui/forms/create_form.jsx @@ -0,0 +1,95 @@ +// ============================================================================== +// Copyright (C) 2019 - Philip Paquette, Steven Bocco +// +// This program is free software: you can redistribute it and/or modify it under +// the terms of the GNU Affero General Public License as published by the Free +// Software Foundation, either version 3 of the License, or (at your option) any +// later version. +// +// This program is distributed in the hope that it will be useful, but WITHOUT +// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS +// FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more +// details. +// +// You should have received a copy of the GNU Affero General Public License along +// with this program. If not, see . +// ============================================================================== +import React from 'react'; +import {Forms} from "../components/forms"; +import {STRINGS} from "../../diplomacy/utils/strings"; +import PropTypes from "prop-types"; + +export class CreateForm extends React.Component { + constructor(props) { + super(props); + this.state = this.initState(); + } + + initState() { + const state = { + game_id: '', + power_name: '', + n_controls: 7, + deadline: 300, + registration_password: '' + }; + for (let rule of STRINGS.PUBLIC_RULES) + state[`rule_${rule.toLowerCase()}`] = false; + return state; + } + + render() { + const onChange = Forms.createOnChangeCallback(this, this.props.onChange); + const onSubmit = Forms.createOnSubmitCallback(this, this.props.onSubmit); + return ( +
+ {Forms.createRow( + Forms.createColLabel('game_id', 'Game ID (optional)'), + + )} + {Forms.createRow( + Forms.createColLabel('power_name', 'power:'), + + )} + {Forms.createRow( + Forms.createColLabel('n_controls', 'number of required players:'), + + )} + {Forms.createRow( + Forms.createColLabel('deadline', 'deadline (in seconds)'), + + )} + {Forms.createRow( + Forms.createColLabel('registration_password', 'registration password'), + + )} +
RULES:
+
+ {STRINGS.PUBLIC_RULES.map((rule, index) => ( +
+ {Forms.createCheckbox( + `rule_${rule.toLowerCase()}`, + rule, + Forms.getValue(this.state, `rule_${rule.toLowerCase()}`), + onChange)} +
+ ))} +
+ {Forms.createRow('', Forms.createSubmit('create a game', true, onSubmit))} +
+ ); + } +} + +CreateForm.propTypes = { + onChange: PropTypes.func, + onSubmit: PropTypes.func +}; diff --git a/diplomacy/web/src/gui/forms/find_form.jsx b/diplomacy/web/src/gui/forms/find_form.jsx new file mode 100644 index 0000000..2d67aba --- /dev/null +++ b/diplomacy/web/src/gui/forms/find_form.jsx @@ -0,0 +1,70 @@ +// ============================================================================== +// Copyright (C) 2019 - Philip Paquette, Steven Bocco +// +// This program is free software: you can redistribute it and/or modify it under +// the terms of the GNU Affero General Public License as published by the Free +// Software Foundation, either version 3 of the License, or (at your option) any +// later version. +// +// This program is distributed in the hope that it will be useful, but WITHOUT +// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS +// FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more +// details. +// +// You should have received a copy of the GNU Affero General Public License along +// with this program. If not, see . +// ============================================================================== +import React from 'react'; +import {Forms} from "../components/forms"; +import {STRINGS} from "../../diplomacy/utils/strings"; +import PropTypes from "prop-types"; + +export class FindForm extends React.Component { + constructor(props) { + super(props); + this.state = this.initState(); + } + + initState() { + return { + game_id: '', + status: '', + include_protected: false, + for_omniscience: false + }; + } + + render() { + const onChange = Forms.createOnChangeCallback(this, this.props.onChange); + const onSubmit = Forms.createOnSubmitCallback(this, this.props.onSubmit); + return ( +
+ {Forms.createRow( + Forms.createColLabel('game_id', 'game id (should contain):'), + + )} + {Forms.createRow( + Forms.createColLabel('status', 'status:'), + () + )} +
+ {Forms.createCheckbox('include_protected', 'include protected games.', Forms.getValue(this.state, 'include_protected'), onChange)} +
+
+ {Forms.createCheckbox('for_omniscience', 'for omniscience.', Forms.getValue(this.state, 'for_omniscience'), onChange)} +
+ {Forms.createRow('', Forms.createSubmit('find games', true, onSubmit))} +
+ ); + } +} + +FindForm.propTypes = { + onChange: PropTypes.func, + onSubmit: PropTypes.func +}; diff --git a/diplomacy/web/src/gui/forms/join_form.jsx b/diplomacy/web/src/gui/forms/join_form.jsx new file mode 100644 index 0000000..e7f8bb2 --- /dev/null +++ b/diplomacy/web/src/gui/forms/join_form.jsx @@ -0,0 +1,80 @@ +// ============================================================================== +// Copyright (C) 2019 - Philip Paquette, Steven Bocco +// +// This program is free software: you can redistribute it and/or modify it under +// the terms of the GNU Affero General Public License as published by the Free +// Software Foundation, either version 3 of the License, or (at your option) any +// later version. +// +// This program is distributed in the hope that it will be useful, but WITHOUT +// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS +// FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more +// details. +// +// You should have received a copy of the GNU Affero General Public License along +// with this program. If not, see . +// ============================================================================== +import React from 'react'; +import {Forms} from "../components/forms"; +import {STRINGS} from "../../diplomacy/utils/strings"; +import PropTypes from "prop-types"; + +export class JoinForm extends React.Component { + constructor(props) { + super(props); + this.state = this.initState(); + } + + initState() { + return { + [this.getPowerNameID()]: this.getDefaultPowerName(), + [this.getPasswordID()]: '' + }; + } + + getPowerNameID() { + return `power_name_${this.props.game_id}`; + } + + getPasswordID() { + return `registration_password_${this.props.game_id}`; + } + + getDefaultPowerName() { + return (this.props.powers && this.props.powers.length && this.props.powers[0]) || ''; + } + + render() { + const onChange = Forms.createOnChangeCallback(this, this.props.onChange); + const onSubmit = Forms.createOnSubmitCallback(this, this.props.onSubmit); + return ( +
+
+ {Forms.createLabel(this.getPowerNameID(), 'Power:')} + +
+ {this.props.password_required ? ( +
+ {Forms.createLabel(this.getPasswordID(), '', 'sr-only')} + +
+ ) : ''} + {Forms.createSubmit('join', false, onSubmit)} +
+ ); + } +} + +JoinForm.propTypes = { + game_id: PropTypes.string.isRequired, + password_required: PropTypes.bool.isRequired, + powers: PropTypes.arrayOf(PropTypes.string), + onChange: PropTypes.func, + onSubmit: PropTypes.func +}; diff --git a/diplomacy/web/src/gui/forms/message_form.jsx b/diplomacy/web/src/gui/forms/message_form.jsx new file mode 100644 index 0000000..d91a753 --- /dev/null +++ b/diplomacy/web/src/gui/forms/message_form.jsx @@ -0,0 +1,53 @@ +// ============================================================================== +// Copyright (C) 2019 - Philip Paquette, Steven Bocco +// +// This program is free software: you can redistribute it and/or modify it under +// the terms of the GNU Affero General Public License as published by the Free +// Software Foundation, either version 3 of the License, or (at your option) any +// later version. +// +// This program is distributed in the hope that it will be useful, but WITHOUT +// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS +// FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more +// details. +// +// You should have received a copy of the GNU Affero General Public License along +// with this program. If not, see . +// ============================================================================== +import React from 'react'; +import {Forms} from "../components/forms"; +import {UTILS} from "../../diplomacy/utils/utils"; +import PropTypes from "prop-types"; + +export class MessageForm extends React.Component { + constructor(props) { + super(props); + this.state = this.initState(); + } + + initState() { + return {message: ''}; + } + + render() { + const onChange = Forms.createOnChangeCallback(this, this.props.onChange); + const onSubmit = Forms.createOnSubmitCallback(this, this.props.onSubmit, this.initState()); + return ( +
+
+ {Forms.createLabel('message', '', 'sr-only')} +