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/diplomacy/engine/game.js | 24 + diplomacy/web/src/diplomacy/utils/diplog.js | 2 +- diplomacy/web/src/gui/components/action.jsx | 52 + diplomacy/web/src/gui/components/button.jsx | 52 + diplomacy/web/src/gui/components/delete_button.jsx | 43 + diplomacy/web/src/gui/components/fancybox.jsx | 59 + diplomacy/web/src/gui/components/forms.jsx | 116 ++ diplomacy/web/src/gui/components/help.jsx | 13 + diplomacy/web/src/gui/components/layouts.jsx | 55 + diplomacy/web/src/gui/components/message_view.jsx | 67 + diplomacy/web/src/gui/components/navigation.jsx | 61 + diplomacy/web/src/gui/components/page_context.jsx | 3 + diplomacy/web/src/gui/components/power_orders.jsx | 77 ++ .../src/gui/components/power_orders_actions_bar.js | 26 + diplomacy/web/src/gui/components/tab.jsx | 29 + diplomacy/web/src/gui/components/table.jsx | 112 ++ diplomacy/web/src/gui/components/tabs.jsx | 69 ++ diplomacy/web/src/gui/core/action.jsx | 52 - diplomacy/web/src/gui/core/button.jsx | 52 - diplomacy/web/src/gui/core/delete_button.jsx | 43 - diplomacy/web/src/gui/core/fancybox.jsx | 59 - diplomacy/web/src/gui/core/forms.jsx | 116 -- diplomacy/web/src/gui/core/layouts.jsx | 55 - diplomacy/web/src/gui/core/page.jsx | 375 ------ diplomacy/web/src/gui/core/tab.jsx | 29 - diplomacy/web/src/gui/core/table.jsx | 112 -- diplomacy/web/src/gui/core/tabs.jsx | 69 -- .../gui/diplomacy/contents/content_connection.jsx | 101 -- .../src/gui/diplomacy/contents/content_game.jsx | 1270 ------------------- .../src/gui/diplomacy/contents/content_games.jsx | 171 --- .../src/gui/diplomacy/forms/connection_form.jsx | 123 -- .../web/src/gui/diplomacy/forms/create_form.jsx | 95 -- .../web/src/gui/diplomacy/forms/find_form.jsx | 70 -- .../web/src/gui/diplomacy/forms/join_form.jsx | 80 -- .../web/src/gui/diplomacy/forms/message_form.jsx | 53 - .../src/gui/diplomacy/forms/power_actions_form.jsx | 121 -- .../gui/diplomacy/forms/select_location_form.jsx | 36 - .../src/gui/diplomacy/forms/select_via_form.jsx | 35 - .../web/src/gui/diplomacy/map/dom_order_builder.js | 278 ----- .../web/src/gui/diplomacy/map/dom_past_map.js | 114 -- diplomacy/web/src/gui/diplomacy/map/map.jsx | 94 -- diplomacy/web/src/gui/diplomacy/map/renderer.js | 615 --------- .../web/src/gui/diplomacy/utils/dipStorage.jsx | 140 --- .../src/gui/diplomacy/utils/inline_game_view.jsx | 158 --- .../src/gui/diplomacy/utils/load_game_from_disk.js | 83 -- diplomacy/web/src/gui/diplomacy/utils/map_data.js | 98 -- diplomacy/web/src/gui/diplomacy/utils/order.js | 24 - .../web/src/gui/diplomacy/utils/order_building.js | 211 ---- .../web/src/gui/diplomacy/utils/power_view.jsx | 65 - diplomacy/web/src/gui/diplomacy/utils/province.js | 117 -- diplomacy/web/src/gui/diplomacy/widgets/help.jsx | 13 - .../web/src/gui/diplomacy/widgets/message_view.jsx | 67 - .../web/src/gui/diplomacy/widgets/navigation.jsx | 61 - .../web/src/gui/diplomacy/widgets/page_context.jsx | 3 - .../web/src/gui/diplomacy/widgets/power_order.jsx | 79 -- 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 + diplomacy/web/src/gui/map/dom_order_builder.js | 278 +++++ diplomacy/web/src/gui/map/dom_past_map.js | 114 ++ diplomacy/web/src/gui/map/map.jsx | 94 ++ diplomacy/web/src/gui/map/renderer.js | 615 +++++++++ diplomacy/web/src/gui/pages/content_connection.jsx | 101 ++ diplomacy/web/src/gui/pages/content_game.jsx | 1303 ++++++++++++++++++++ diplomacy/web/src/gui/pages/content_games.jsx | 171 +++ diplomacy/web/src/gui/pages/page.jsx | 375 ++++++ diplomacy/web/src/gui/utils/dipStorage.jsx | 140 +++ diplomacy/web/src/gui/utils/inline_game_view.jsx | 158 +++ diplomacy/web/src/gui/utils/load_game_from_disk.js | 83 ++ diplomacy/web/src/gui/utils/map_data.js | 98 ++ diplomacy/web/src/gui/utils/order.js | 24 + diplomacy/web/src/gui/utils/order_building.js | 211 ++++ diplomacy/web/src/gui/utils/power_view.jsx | 65 + diplomacy/web/src/gui/utils/province.js | 117 ++ diplomacy/web/src/gui/utils/saveGameToDisk.js | 18 + diplomacy/web/src/index.js | 2 +- 81 files changed, 5438 insertions(+), 5339 deletions(-) create mode 100644 diplomacy/web/src/gui/components/action.jsx create mode 100644 diplomacy/web/src/gui/components/button.jsx create mode 100644 diplomacy/web/src/gui/components/delete_button.jsx create mode 100644 diplomacy/web/src/gui/components/fancybox.jsx create mode 100644 diplomacy/web/src/gui/components/forms.jsx create mode 100644 diplomacy/web/src/gui/components/help.jsx create mode 100644 diplomacy/web/src/gui/components/layouts.jsx create mode 100644 diplomacy/web/src/gui/components/message_view.jsx create mode 100644 diplomacy/web/src/gui/components/navigation.jsx create mode 100644 diplomacy/web/src/gui/components/page_context.jsx create mode 100644 diplomacy/web/src/gui/components/power_orders.jsx create mode 100644 diplomacy/web/src/gui/components/power_orders_actions_bar.js create mode 100644 diplomacy/web/src/gui/components/tab.jsx create mode 100644 diplomacy/web/src/gui/components/table.jsx create mode 100644 diplomacy/web/src/gui/components/tabs.jsx delete mode 100644 diplomacy/web/src/gui/core/action.jsx delete mode 100644 diplomacy/web/src/gui/core/button.jsx delete mode 100644 diplomacy/web/src/gui/core/delete_button.jsx delete mode 100644 diplomacy/web/src/gui/core/fancybox.jsx delete mode 100644 diplomacy/web/src/gui/core/forms.jsx delete mode 100644 diplomacy/web/src/gui/core/layouts.jsx delete mode 100644 diplomacy/web/src/gui/core/page.jsx delete mode 100644 diplomacy/web/src/gui/core/tab.jsx delete mode 100644 diplomacy/web/src/gui/core/table.jsx delete mode 100644 diplomacy/web/src/gui/core/tabs.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/contents/content_connection.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/contents/content_game.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/contents/content_games.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/forms/connection_form.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/forms/create_form.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/forms/find_form.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/forms/join_form.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/forms/message_form.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/forms/power_actions_form.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/forms/select_location_form.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/forms/select_via_form.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/map/dom_order_builder.js delete mode 100644 diplomacy/web/src/gui/diplomacy/map/dom_past_map.js delete mode 100644 diplomacy/web/src/gui/diplomacy/map/map.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/map/renderer.js delete mode 100644 diplomacy/web/src/gui/diplomacy/utils/dipStorage.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/utils/inline_game_view.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/utils/load_game_from_disk.js delete mode 100644 diplomacy/web/src/gui/diplomacy/utils/map_data.js delete mode 100644 diplomacy/web/src/gui/diplomacy/utils/order.js delete mode 100644 diplomacy/web/src/gui/diplomacy/utils/order_building.js delete mode 100644 diplomacy/web/src/gui/diplomacy/utils/power_view.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/utils/province.js delete mode 100644 diplomacy/web/src/gui/diplomacy/widgets/help.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/widgets/message_view.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/widgets/navigation.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/widgets/page_context.jsx delete mode 100644 diplomacy/web/src/gui/diplomacy/widgets/power_order.jsx 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 create mode 100644 diplomacy/web/src/gui/map/dom_order_builder.js create mode 100644 diplomacy/web/src/gui/map/dom_past_map.js create mode 100644 diplomacy/web/src/gui/map/map.jsx create mode 100644 diplomacy/web/src/gui/map/renderer.js create mode 100644 diplomacy/web/src/gui/pages/content_connection.jsx create mode 100644 diplomacy/web/src/gui/pages/content_game.jsx create mode 100644 diplomacy/web/src/gui/pages/content_games.jsx create mode 100644 diplomacy/web/src/gui/pages/page.jsx create mode 100644 diplomacy/web/src/gui/utils/dipStorage.jsx create mode 100644 diplomacy/web/src/gui/utils/inline_game_view.jsx create mode 100644 diplomacy/web/src/gui/utils/load_game_from_disk.js create mode 100644 diplomacy/web/src/gui/utils/map_data.js create mode 100644 diplomacy/web/src/gui/utils/order.js create mode 100644 diplomacy/web/src/gui/utils/order_building.js create mode 100644 diplomacy/web/src/gui/utils/power_view.jsx create mode 100644 diplomacy/web/src/gui/utils/province.js create mode 100644 diplomacy/web/src/gui/utils/saveGameToDisk.js (limited to 'diplomacy/web/src') diff --git a/diplomacy/web/src/diplomacy/engine/game.js b/diplomacy/web/src/diplomacy/engine/game.js index 93da77c..e44fdf6 100644 --- a/diplomacy/web/src/diplomacy/engine/game.js +++ b/diplomacy/web/src/diplomacy/engine/game.js @@ -19,6 +19,7 @@ import {STRINGS} from "../utils/strings"; import {SortedDict} from "../utils/sorted_dict"; import {Power} from "./power"; import {Message} from "./message"; +import {Order} from "../../gui/utils/order"; export function comparablePhase(shortPhaseName) { /** Return a unique integer corresponding to given short phase name, so that @@ -420,6 +421,29 @@ export class Game { return [this.role]; } + getServerOrders() { + /** Return a dictionary of server orders. + * Returned dictionary maps each power name to either: + * - a dictionary of orders, mapping a loc to an Order object with boolean flag `local` set to false. + * - an empty dictionary, to represent an empty orders set. + * - null value, if power.order_is_set is false. + * **/ + const orders = {}; + const controllablePowers = this.getControllablePowers(); + for (let powerName of controllablePowers) { + const powerOrders = {}; + let countOrders = 0; + const power = this.powers[powerName]; + for (let orderString of power.orders) { + const serverOrder = new Order(orderString, false); + powerOrders[serverOrder.loc] = serverOrder; + ++countOrders; + } + orders[powerName] = (countOrders || power.order_is_set) ? powerOrders : null; + } + return orders; + } + getMessageChannels(role, all) { const messageChannels = {}; role = role || this.role; diff --git a/diplomacy/web/src/diplomacy/utils/diplog.js b/diplomacy/web/src/diplomacy/utils/diplog.js index 1e4a753..261a8f4 100644 --- a/diplomacy/web/src/diplomacy/utils/diplog.js +++ b/diplomacy/web/src/diplomacy/utils/diplog.js @@ -25,7 +25,7 @@ export class Diplog { } static info(msg) { - console.info(msg); + console.log(msg); } static success(msg) { diff --git a/diplomacy/web/src/gui/components/action.jsx b/diplomacy/web/src/gui/components/action.jsx new file mode 100644 index 0000000..73fe8cb --- /dev/null +++ b/diplomacy/web/src/gui/components/action.jsx @@ -0,0 +1,52 @@ +// ============================================================================== +// 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 PropTypes from 'prop-types'; + + +export class Action extends React.Component { + // title + // isActive + // onClick + // See Button parameters. + + render() { + return ( +
+
+ {this.props.title} + {this.props.highlight !== null + && this.props.highlight !== undefined + && {this.props.highlight}} +
+
+ ); + } +} + +Action.propTypes = { + title: PropTypes.string.isRequired, + onClick: PropTypes.func.isRequired, + highlight: PropTypes.any, + isActive: PropTypes.bool +}; + +Action.defaultProps = { + highlight: null, + isActive: false +}; diff --git a/diplomacy/web/src/gui/components/button.jsx b/diplomacy/web/src/gui/components/button.jsx new file mode 100644 index 0000000..0d5dadd --- /dev/null +++ b/diplomacy/web/src/gui/components/button.jsx @@ -0,0 +1,52 @@ +import React from "react"; +import PropTypes from "prop-types"; + +export class Button extends React.Component { + /** Bootstrap button. + * Bootstrap classes: + * - btn + * - btn-primary + * - mx-1 (margin-left 1px, margin-right 1px) + * Props: title (str), onClick (function). + * **/ + // title + // onClick + // pickEvent = false + // large = false + // small = false + + constructor(props) { + super(props); + this.onClick = this.onClick.bind(this); + } + + onClick(event) { + if (this.props.onClick) + this.props.onClick(this.props.pickEvent ? event : null); + } + + render() { + return ( + + ); + } +} + +Button.propTypes = { + title: PropTypes.string.isRequired, + onClick: PropTypes.func.isRequired, + color: PropTypes.string, + large: PropTypes.bool, + small: PropTypes.bool, + pickEvent: PropTypes.bool, + disabled: PropTypes.bool +}; + +Button.defaultPropTypes = { + disabled: false +}; diff --git a/diplomacy/web/src/gui/components/delete_button.jsx b/diplomacy/web/src/gui/components/delete_button.jsx new file mode 100644 index 0000000..59141fd --- /dev/null +++ b/diplomacy/web/src/gui/components/delete_button.jsx @@ -0,0 +1,43 @@ +import React from "react"; +import {Button} from "./button"; +import PropTypes from "prop-types"; + +export class DeleteButton extends React.Component { + constructor(props) { + super(props); + this.state = {step: 0}; + this.onClick = this.onClick.bind(this); + } + + onClick() { + this.setState({step: this.state.step + 1}, () => { + if (this.state.step === 2) + this.props.onClick(); + }); + } + + render() { + let title = ''; + let color = ''; + if (this.state.step === 0) { + title = this.props.title; + color = 'secondary'; + } else if (this.state.step === 1) { + title = this.props.confirmTitle; + color = 'danger'; + } else if (this.state.step === 2) { + title = this.props.waitingTitle; + color = 'danger'; + } + return ( + +
+ {this.props.navigation.map((nav, index) => { + const navTitle = nav[0]; + const navAction = nav[1]; + return {navTitle}; + })} +
+ + )} + + + ); + } + return ( +
{this.props.title}
+ ); + } +} + +Navigation.propTypes = { + title: PropTypes.string.isRequired, + afterTitle: PropTypes.object, + navigation: PropTypes.array, + username: PropTypes.string, +}; diff --git a/diplomacy/web/src/gui/components/page_context.jsx b/diplomacy/web/src/gui/components/page_context.jsx new file mode 100644 index 0000000..cfb8252 --- /dev/null +++ b/diplomacy/web/src/gui/components/page_context.jsx @@ -0,0 +1,3 @@ +import React from "react"; + +export const PageContext = React.createContext(null); diff --git a/diplomacy/web/src/gui/components/power_orders.jsx b/diplomacy/web/src/gui/components/power_orders.jsx new file mode 100644 index 0000000..b702a9d --- /dev/null +++ b/diplomacy/web/src/gui/components/power_orders.jsx @@ -0,0 +1,77 @@ +// ============================================================================== +// 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 PropTypes from 'prop-types'; +import {Button} from "./button"; + +export class PowerOrders extends React.Component { + render() { + const orderEntries = this.props.orders ? Object.entries(this.props.orders) : null; + let display = null; + if (orderEntries) { + if (orderEntries.length) { + orderEntries.sort((a, b) => a[1].order.localeCompare(b[1].order)); + display = ( +
+ {orderEntries.map((entry, index) => ( +
+
+ {entry[1].order} + {entry[1].local ? '' : [S]} +
+
+
+
+ ))} +
+ ); + } else if (this.props.serverCount === 0) { + display = (
Empty orders set
); + } else { + display = (
Local empty orders set
); + } + } else { + if (this.props.serverCount < 0) { + display =
No orders!
; + } else { + display =
Asking to unset orders
; + } + } + return ( +
+
+ {this.props.name} + + {(this.props.wait ? ' ' : ' not') + ' waiting'} + +
+ {display} +
+ ); + } +} + +PowerOrders.propTypes = { + wait: PropTypes.bool, + name: PropTypes.string, + orders: PropTypes.object, + serverCount: PropTypes.number, + onRemove: PropTypes.func, +}; diff --git a/diplomacy/web/src/gui/components/power_orders_actions_bar.js b/diplomacy/web/src/gui/components/power_orders_actions_bar.js new file mode 100644 index 0000000..2e33a6e --- /dev/null +++ b/diplomacy/web/src/gui/components/power_orders_actions_bar.js @@ -0,0 +1,26 @@ +import React from 'react'; +import {Button} from "./button"; +import {Bar} from "./layouts"; +import PropTypes from 'prop-types'; + +export class PowerOrdersActionBar extends React.Component { + render() { + return ( + + Orders: + - ); - } -} - -Button.propTypes = { - title: PropTypes.string.isRequired, - onClick: PropTypes.func.isRequired, - color: PropTypes.string, - large: PropTypes.bool, - small: PropTypes.bool, - pickEvent: PropTypes.bool, - disabled: PropTypes.bool -}; - -Button.defaultPropTypes = { - disabled: false -}; diff --git a/diplomacy/web/src/gui/core/delete_button.jsx b/diplomacy/web/src/gui/core/delete_button.jsx deleted file mode 100644 index 59141fd..0000000 --- a/diplomacy/web/src/gui/core/delete_button.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from "react"; -import {Button} from "./button"; -import PropTypes from "prop-types"; - -export class DeleteButton extends React.Component { - constructor(props) { - super(props); - this.state = {step: 0}; - this.onClick = this.onClick.bind(this); - } - - onClick() { - this.setState({step: this.state.step + 1}, () => { - if (this.state.step === 2) - this.props.onClick(); - }); - } - - render() { - let title = ''; - let color = ''; - if (this.state.step === 0) { - title = this.props.title; - color = 'secondary'; - } else if (this.state.step === 1) { - title = this.props.confirmTitle; - color = 'danger'; - } else if (this.state.step === 2) { - title = this.props.waitingTitle; - color = 'danger'; - } - return ( -