From 8577e368529c5991d171dd43b8496a9f6ae61ad0 Mon Sep 17 00:00:00 2001
From: Kenneth Allen <kenneth@mostly.me>
Date: Thu, 21 Oct 2021 23:23:27 +1100
Subject: [PATCH] Extract wonder selector component

---
 .../src/components/Game/Game.tsx              | 36 +++----------------
 .../WonderSelector/WonderSelector.tsx         | 35 ++++++++++++++++++
 2 files changed, 39 insertions(+), 32 deletions(-)
 create mode 100644 packages/wonders-client/src/components/WonderSelector/WonderSelector.tsx

diff --git a/packages/wonders-client/src/components/Game/Game.tsx b/packages/wonders-client/src/components/Game/Game.tsx
index 7e7185a..247efdc 100644
--- a/packages/wonders-client/src/components/Game/Game.tsx
+++ b/packages/wonders-client/src/components/Game/Game.tsx
@@ -1,9 +1,9 @@
 import { Dispatch } from 'ketchup-react'
-import { Action, chooseWonderAction, maxPlayers, minPlayers, Player, startGameAction, State, structures, wonders } from 'wonders-common'
+import { Action, maxPlayers, minPlayers, Player, startGameAction, State, structures } from 'wonders-common'
 import Civ from '../Civ/Civ'
 import Card from '../Card/Card'
-import { ErrorMessage, Field, Form, Formik } from 'formik'
 import './Game.css'
+import WonderSelector from '../WonderSelector/WonderSelector'
 
 function getDistant<T>(arr: T[], idx: number) {
   switch (idx) {
@@ -22,10 +22,6 @@ export default function Game({ state, playerName, dispatch }: { state: State, pl
     distant: getDistant(state.players, playerIdx),
   }
 
-  function isWonderInUse(wonder: string) {
-    return state.players.filter(p => p.name !== playerName).map(p => p.wonder).includes(wonder)
-  }
-
   let gameElem: JSX.Element
   if (!player || !started) {
     gameElem = <div className='wonder-lobby'>
@@ -33,35 +29,11 @@ export default function Game({ state, playerName, dispatch }: { state: State, pl
         <Civ key={p.name} player={p} displayStyle='distant' />
       )}
     </div>
-    if (!started) {
+    if (player) {
       gameElem = <>
         {gameElem}
-        <Formik
-          initialValues={{ wonder: player.wonder ?? [...wonders.keys()][0] }}
-          validate={values => {
-            const errors: Partial<typeof values> = {}
-            if (values.wonder.length === 0) {
-              errors.wonder = 'Wonder not selected.'
-            }
-            if (isWonderInUse(values.wonder)) {
-              errors.wonder = 'Wonder already in use.'
-            }
-            return errors
-          }}
-          onSubmit={({ wonder }) => dispatch(chooseWonderAction(player.name, wonder))}>
-          <Form>
-            <button type="submit">Choose wonder</button>
-            {' '}
-            <Field as="select" name="wonder">
-              {[...wonders.keys()].map(w =>
-                <option key={w} disabled={isWonderInUse(w)}>{w}</option>
-              )}
-            </Field>
-            {' '}
-            <ErrorMessage name="wonder" />
-          </Form>
-        </Formik>
         <div>
+          <WonderSelector state={state} player={player} dispatch={dispatch} />
           <button onClick={() => dispatch(startGameAction(state.players.length))}
             disabled={started !== undefined
               || state.players.length < minPlayers
diff --git a/packages/wonders-client/src/components/WonderSelector/WonderSelector.tsx b/packages/wonders-client/src/components/WonderSelector/WonderSelector.tsx
new file mode 100644
index 0000000..2b3e226
--- /dev/null
+++ b/packages/wonders-client/src/components/WonderSelector/WonderSelector.tsx
@@ -0,0 +1,35 @@
+import { ErrorMessage, Field, Form, Formik } from 'formik'
+import { Dispatch } from 'ketchup-react'
+import { Action, chooseWonderAction, Player, State, wonders } from 'wonders-common'
+
+export default function WonderSelector({ state, player, dispatch }: { state: State, player: Player, dispatch: Dispatch<Action> }) {
+  function isWonderInUse(wonder: string) {
+    return state.players.filter(p => p.name !== player.name).map(p => p.wonder).includes(wonder)
+  }
+
+  return <Formik
+    initialValues={{ wonder: player.wonder ?? [...wonders.keys()][0] }}
+    validate={values => {
+      const errors: Partial<typeof values> = {}
+      if (values.wonder.length === 0) {
+        errors.wonder = 'Wonder not selected.'
+      }
+      if (isWonderInUse(values.wonder)) {
+        errors.wonder = 'Wonder already in use.'
+      }
+      return errors
+    }}
+    onSubmit={({ wonder }) => dispatch(chooseWonderAction(player.name, wonder))}>
+    <Form>
+      <button type="submit">Choose wonder</button>
+      {' '}
+      <Field as="select" name="wonder">
+        {[...wonders.keys()].map(w =>
+          <option key={w} disabled={isWonderInUse(w)}>{w}</option>
+        )}
+      </Field>
+      {' '}
+      <ErrorMessage name="wonder" />
+    </Form>
+  </Formik>
+}