simplifying action selection workflow to prevent bugs

src/components/Resources/SelectionView.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { StateProps } from "../../util/propTypes";
-import { GetChipsHTML } from "./ViewHTML";
+import { GetChipsHTML, ReserveCardHTML } from "./ViewHTML";
 
 export default function SelectionView({ state, setState }: StateProps) {
     const actionTypes = [
@@ -16,12 +16,9 @@ export default function SelectionView({ state, setState }: StateProps) {
                 case (actionTypes[0].active):
                     return <GetChipsHTML state={state} setState={setState} />
                 case (actionTypes[1].active):
-                    return (
+                    return <strong>Please make your selection above:</strong>;
-                        <>
+                case (actionTypes[2].active):
-                        {actionTypes[1].active && <strong>Your selection is {actionTypes[1].valid || "not"} valid</strong>}
+                    return <ReserveCardHTML state={state} setState={setState} />;
-                        <p>Card will display here</p>
-                        </>
-                    )
                 default:
                     return <></>;
             }

src/components/Resources/ViewHTML.tsx

@@ -4,6 +4,8 @@ import { setStateGetChips } from "../../util/stateSetters";
 import { StateProps } from "../../util/propTypes";
 import { ResourceCost } from "../../util/types";
 import { getChipsActions } from "../Player/ActionMethods";
+import { useCurrentPlayer } from "../../util/useCurrentPlayer";
+import { hasMaxChips } from "../Player/ActionMethods/getChipsActions";
 const { getChips } = getChipsActions;
 
 export const GetChipsHTML = ({ state, setState }: StateProps) => {
@@ -36,3 +38,41 @@ export const GetChipsHTML = ({ state, setState }: StateProps) => {
         </div>
     )
 }
+
+export const ReserveCardHTML = ({ state, setState }: StateProps) => {
+    const [takeGold, setTakeGold] = useState("");
+    const currentPlayer = useCurrentPlayer(state);
+
+    useEffect(() => {
+
+    })
+
+    return (
+        <div className="selection-view">
+            <strong>Please make your selection above.</strong>
+            { !hasMaxChips(currentPlayer) && (
+                <div className="take-gold">
+                    <p>Take a gold chip with your card? {takeGold}</p>
+                    <label htmlFor="take-gold-yes">Yes</label>
+                    <input
+                        id="take-gold-yes"
+                        value="Yes"
+                        checked={takeGold === "Yes"}
+                        onChange={() => setTakeGold("Yes")}
+                        type="radio"
+                    >
+                    </input>
+
+                    <label htmlFor="take-gold-no">No</label>
+                    <input
+                        id="take-gold-no"
+                        value="No"
+                        checked={takeGold === "No"}
+                        onChange={() => setTakeGold("No")}
+                        type="radio">
+                    </input>
+                </div>
+            )}
+        </div>
+    )
+}