From 48ee1a065debde5027fc17e49144d348258dc5e4 Mon Sep 17 00:00:00 2001 From: notoraptor Date: Thu, 25 Jul 2019 10:59:36 -0400 Subject: [Web] Added game creation interface - Replaced fancybox with react-confirm-alert + dialog box - Removed unused code - Default map can be selected with 1-click - Added ability to select map variants --- diplomacy/web/src/gui/components/fancyBox.js | 47 ++++++++++++++++++++ diplomacy/web/src/gui/components/fancybox.jsx | 59 ------------------------- diplomacy/web/src/gui/components/help.jsx | 30 ++++++++----- diplomacy/web/src/gui/components/navigation.jsx | 2 +- 4 files changed, 68 insertions(+), 70 deletions(-) create mode 100644 diplomacy/web/src/gui/components/fancyBox.js delete mode 100644 diplomacy/web/src/gui/components/fancybox.jsx (limited to 'diplomacy/web/src/gui/components') diff --git a/diplomacy/web/src/gui/components/fancyBox.js b/diplomacy/web/src/gui/components/fancyBox.js new file mode 100644 index 0000000..1e8c07c --- /dev/null +++ b/diplomacy/web/src/gui/components/fancyBox.js @@ -0,0 +1,47 @@ +// ============================================================================== +// 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"; + +const TIMES = '\u00D7'; + +export class FancyBox extends React.Component { + render() { + return ( +
+
+
{this.props.title}
+
+
+
+
+
{this.props.children}
+
+
+ ); + } +} + + +FancyBox.propTypes = { + title: PropTypes.string.isRequired, + onClose: PropTypes.func.isRequired, + children: PropTypes.any.isRequired +}; diff --git a/diplomacy/web/src/gui/components/fancybox.jsx b/diplomacy/web/src/gui/components/fancybox.jsx deleted file mode 100644 index 66a1efe..0000000 --- a/diplomacy/web/src/gui/components/fancybox.jsx +++ /dev/null @@ -1,59 +0,0 @@ -// ============================================================================== -// 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"; - -const TIMES = '\u00D7'; - -export class FancyBox extends React.Component { - // open-tag () - // PROPERTIES - // title - // onClose - render() { - return ( -
-
{ - if (!event) - event = window.event; - if (event.hasOwnProperty('cancelBubble')) - event.cancelBubble = true; - if (event.stopPropagation) - event.stopPropagation(); - }}> -
-
{this.props.title}
-
-
-
-
-
{this.props.children}
-
-
-
- ); - } -} - - -FancyBox.propTypes = { - title: PropTypes.string.isRequired, - onClose: PropTypes.func.isRequired, - children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) -}; diff --git a/diplomacy/web/src/gui/components/help.jsx b/diplomacy/web/src/gui/components/help.jsx index 1ec1a54..f3f469f 100644 --- a/diplomacy/web/src/gui/components/help.jsx +++ b/diplomacy/web/src/gui/components/help.jsx @@ -1,13 +1,23 @@ import React from "react"; +import PropTypes from 'prop-types'; +import {FancyBox} from "./fancyBox"; -export function Help() { - return ( -
-

When building an order, press ESC to reset build.

-

Press letter associated to an order type to start building an order of this type. -
Order type letter is indicated in order type name after order type radio button. -

-

In Phase History tab, use keyboard left and right arrows to navigate in past phases.

-
- ); +export class Help extends React.Component { + render() { + return ( + +
+

When building an order, press ESC to reset build.

+

Press letter associated to an order type to start building an order of this type. +
Order type letter is indicated in order type name after order type radio button. +

+

In Phase History tab, use keyboard left and right arrows to navigate in past phases.

+
+ + ); + } } + +Help.propTypes = { + onClose: PropTypes.func.isRequired +}; diff --git a/diplomacy/web/src/gui/components/navigation.jsx b/diplomacy/web/src/gui/components/navigation.jsx index 5d961bc..051f8ea 100644 --- a/diplomacy/web/src/gui/components/navigation.jsx +++ b/diplomacy/web/src/gui/components/navigation.jsx @@ -1,5 +1,5 @@ import React from "react"; -import Octicon, {Person} from "@githubprimer/octicons-react"; +import Octicon, {Person} from "@primer/octicons-react"; import PropTypes from "prop-types"; export class Navigation extends React.Component { -- cgit v1.2.3