Display graceful error modal for failure to gen points

client/src/components/util/GameCreationForm/ErrorModal.jsx

@@ -0,0 +1,23 @@
+import { useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import styles from './ErrorModal.module.css';
+
+
+const ErrorModal = ({ open, onClose }) => {
+  const transitionRef = useRef(null);
+
+  return (
+    <CSSTransition nodeRef={transitionRef} in={open} mountOnEnter unmountOnExit timeout={200} classNames="fade">
+      <div className={styles.background} ref={transitionRef}>
+        <div className={styles.content}>
+          <p className={styles.text}>
+            Sorry! The server took too long to generate points for that game - your configurations may be too restrictive.
+          </p>
+          <button onClick={onClose}>Close</button>
+        </div>
+      </div>
+    </CSSTransition>
+  )
+};
+
+export default ErrorModal;

client/src/components/util/GameCreationForm/ErrorModal.module.css

@@ -0,0 +1,28 @@
+.background {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.content {
+  background-color: #222;
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 20px;
+  border: 1px solid #888;
+  width: 30%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.text {
+  max-width: 80%;
+  text-align: center;
+}

client/src/components/util/GameCreationForm/GameCreationForm.jsx

@@ -6,6 +6,7 @@ import { FROZEN, NORMAL, TIME_BANK, RACE, COUNTRY_RACE } from '../../../domain/r
 import useCountryLookup from '../../../hooks/useCountryLookup';
 import Loading from '../Loading';
 import { Dropdown, DropdownGroup, Item, CountryDropdown } from './Dropdown';
+import ErrorModal from './ErrorModal';
 import styles from './GameCreationForm.module.css';
 
 const DEFAULTS = {
@@ -77,7 +78,7 @@ const GameCreationForm = ({ afterCreate }) => {
 
   return (
     <div className={styles.form}>
-      { creationError && <div className={styles.error}>Error! TODO</div> }
+      <ErrorModal open={creationError} onClose={() => setCreationError(false)} />
       <button className={styles.start} onClick={onCreateGame}>
         New Game
       </button>

client/src/components/util/GameCreationForm/GameCreationForm.module.css

@@ -18,4 +18,4 @@
 .start {
   min-width: 200px;
   flex: 1;
-}
+}