Swapping over to the new dropdowns

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

@@ -47,7 +47,7 @@ export const Item = ({ value, onSelect, children }) => (
   <DropdownItem onClick={() => onSelect(value)}>
     {children}
   </DropdownItem>
-)
+);
 
 export const Dropdown = ({ selected, onSelect, children }) => (
   <DropdownBox>
@@ -58,23 +58,4 @@ export const Dropdown = ({ selected, onSelect, children }) => (
       {children.map((child, key) => React.cloneElement(child, { onSelect, key }))}
     </DropdownList>
   </DropdownBox>
-)
-
-export default ({
-  options,
-  onChange,
-  children,
-}) => (
-  <DropdownBox>
-    <DropdownButton>
-      {children}
-    </DropdownButton>
-    <DropdownList>
-      {
-        Object.entries(options).map(([text, option]) => (
-          <DropdownItem key={option} onClick={() => onChange(option)}>{text}</DropdownItem>
-        ))
-      }
-    </DropdownList>
-  </DropdownBox>
 );

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

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { createGame } from '../../../domain/apiMethods';
 import { MAP_CRUNCH, RANDOM_STREET_VIEW, URBAN } from '../../../domain/genMethods';
 import Loading from '../Loading';
-import OldDropdown, { Dropdown, Item } from './Dropdown';
+import { Dropdown, Item } from './Dropdown';
 import styles from './GameCreationForm.module.css';
 
 export default ({ afterCreate }) => {
@@ -36,37 +36,21 @@ export default ({ afterCreate }) => {
           <Item value={300}>5 Minutes</Item>
           <Item value={3600}>1 Hour</Item>
         </Dropdown>
-        <OldDropdown
-          options={{
-            '1 Round': 1,
-            '3 Rounds': 3,
-            '5 Rounds': 5,
-            '10 Rounds': 10
-          }}
-          onChange={setRounds}
-        >
-          Rounds: {rounds}
-        </OldDropdown>
-        <OldDropdown
-          options={{
-            'All Countries': false,
-            'Just America': true
-          }}
-          onChange={setOnlyAmerica}
-        >
-          {onlyAmerica ? 'Just America' : 'All Countries'}
-        </OldDropdown>
-        <OldDropdown
-          options={{
-            'Map Crunch': MAP_CRUNCH,
-            'Random Street View': RANDOM_STREET_VIEW,
-            'Urban Centers': URBAN
-          }}
-          onChange={setGenMethod}
-        >
-          Generator:{' '}
-          {genMethod === MAP_CRUNCH ? 'Map Crunch' : genMethod === RANDOM_STREET_VIEW ? 'RSV' : 'Urban Centers'}
-        </OldDropdown>
+        <Dropdown selected={`Rounds: ${rounds}`} onSelect={setRounds}>
+          <Item value={1}>1 Round</Item>
+          <Item value={3}>3 Rounds</Item>
+          <Item value={5}>5 Rounds</Item>
+          <Item value={10}>10 Rounds</Item>
+        </Dropdown>
+        <Dropdown selected={onlyAmerica ? 'Just America' : 'All Countries'} onSelect={setOnlyAmerica}>
+          <Item value={false}>All Countries</Item>
+          <Item value={true}>Just America</Item>
+        </Dropdown>
+        <Dropdown selected={`Generator: ${genMethod === MAP_CRUNCH ? 'Map Crunch' : genMethod === RANDOM_STREET_VIEW ? 'RSV' : 'Urban Centers'}`} onSelect={setGenMethod}>
+          <Item value={MAP_CRUNCH}>Map Crunch</Item>
+          <Item value={RANDOM_STREET_VIEW}>Random Street View</Item>
+          <Item value={URBAN}>Urban Centers</Item>
+        </Dropdown>
       </div>
       <button className={styles.start} onClick={onCreateGame} disabled={invalidCombo}>
         {invalidCombo ? 'Incompatible Options' : 'New Game'}

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

@@ -12,6 +12,7 @@
   flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: flex-start;
+  min-width: 200px;
 }
 
 .start {