add game options

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quibbble/boardgame",
   "private": false,
-  "version": "1.1.9",
+  "version": "1.2.0",
   "description": "React component library for Quibbble boardgames.",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",

src/api/API.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 
 axios.defaults.withCredentials = true;
 
-export const CreateGame = async (host, gameKey, gameID, teams, variant) => {
+export const CreateGame = async (host, gameKey, gameID, teams, options) => {
     let config = {
         method: 'POST',
         url: `${ host }/game/create`,
@@ -14,10 +14,7 @@ export const CreateGame = async (host, gameKey, gameID, teams, variant) => {
             GameID: gameID.toLowerCase(),
             Teams: teams,
             TurnLength: null,
-            MoreOptions: {
-                Seed: Date.now(),
-                Variant: variant,
-            }
+            MoreOptions: options,
         })
     };
     return axios(config)

src/components/HomePage/HomePage.jsx

@@ -6,13 +6,18 @@ import { useNavigate } from "react-router-dom";
 import { CreateGame, Health } from "../../api/API";
 import { Footer } from "../Footer"
 
-export function HomePage({ config }) {
+export function HomePage(props) {
+
+    const { config, options, setOptions, children } = props
 
     const navigate = useNavigate();
 
     const [gameID, setGameID] = useState(`${ Adjectives[Math.floor(Math.random()*Adjectives.length)] }-${ Nouns[Math.floor(Math.random()*Nouns.length)] }-${ Math.floor(Math.random() * (99 - 0 + 1) + 0) }`);
     const [teams, setTeams] = useState(config.minTeams);
-    const [variant, setVariant] = useState(config.variants.length > 0 ? config.variants[0] : null)
+
+    useEffect(() => {
+        console.log(options)
+    }, [options])
 
     useEffect(() => {
         const checkHealth = async () => {
@@ -29,7 +34,7 @@ export function HomePage({ config }) {
 
     async function handleGo(e) {
         e.preventDefault();
-        let status = await CreateGame(config.host, config.key, gameID, teams, variant);
+        let status = await CreateGame(config.host, config.key, gameID, teams, options);
         if (status === 201 || status === 400) navigate(`/${ gameID }`);
     }
     return (
@@ -48,30 +53,31 @@ export function HomePage({ config }) {
                             <input className="w-10/12 p-2 text-zinc-100 bg-zinc-800 rounded-none border border-zinc-100 text-3xl font-medium box-border focus:outline-dashed outline-blue-500 outline-2" autoFocus type="text" value={ gameID } onChange={ e => setGameID(e.target.value) }/>
                             <button className="w-2/12 font-bold grow-0 bg-blue-500">Go</button>
                         </form>
-                        <div className="flex w-full justify-between flex-wrap">
+                        <div className="flex w-full justify-between flex-wrap gap-2">
                             <div className="flex order-2 md:order-1">
                                 <button onClick={ () => navigate("/rules") } title="how to play" className="mr-3 md:mr-2 p-2 first-line:p-2 bg-blue-500 italic text-xs font-bold">
                                     game rules
                                 </button>
                                 <a className="italic text-xs py-1 px-2 border-blue-500 border border-dashed text-blue-500" href="https://quibbble.com" target="_blank">more <span className="text-zinc-100 font-['lobster'] text-sm not-italic">quibbble</span> games</a>
                             </div>
-                            <div className="flex items-center order-1 md:order-2 mb-3 md:mb-0">
+                            <div className="overflow-scroll flex flex-warp items-center order-1 md:order-2 mb-3 md:mb-0">
                                 {
-                                    variant ? <>
+                                    options.Variant ? <>
                                         <div className="mr-1 font-black text-blue-500">VARIANT</div>
-                                        <select className="mr-1 bg-zinc-800 text-xs h-6 border font-bold border-zinc-100 focus:outline-none" id="players" onChange={ e => setVariant(e.target.value.replace(/\s/g, "")) }>
+                                        <select className="px-2 mr-1 bg-zinc-800 text-xs h-6 border font-bold border-zinc-100 focus:outline-none" id="players" onChange={ e => setOptions(options => ({...options, ...{Variant: e.target.value.replace(/\s/g, "")}})) }>
                                             { config.variants.map(el => <option key={ el } value={ el }>{ el }</option>) }
                                         </select>
                                     </> : null
                                 }
                                 {
                                     config.minTeams !== config.maxTeams ? <>
                                         <div className="mx-1 font-black text-blue-500">PLAYERS</div>
-                                        <select className="bg-zinc-800 text-xs h-6 border font-bold border-zinc-100 focus:outline-none" id="players" onChange={ e => setTeams(parseInt(e.target.value)) }>
+                                        <select className="px-2 bg-zinc-800 text-xs h-6 border font-bold border-zinc-100 focus:outline-none" id="players" onChange={ e => setTeams(parseInt(e.target.value)) }>
                                             { Array(config.maxTeams - config.minTeams + 1).fill().map((_, idx) => config.minTeams + idx).map(el => <option key={ el } value={ el }>{ el }</option>) }
                                         </select>
                                     </> : null
                                 }
+                                { children }
                             </div>
                         </div>
                     </div>

src/example/App.jsx

@@ -26,6 +26,19 @@ const config = {
   // gamePageMaxWidth: "max-w-4xl"
 }
 
+// extra options example if more options are needed for game creation
+const extra = ["A", "B", "C"]
+function ExtraOption({ setOptions }) {
+  return (
+    <div className="flex">
+      <div className="mx-1 ml-2 font-black text-blue-500">EXTRA</div>
+      <select className="px-2 bg-zinc-800 text-xs h-6 border font-bold border-zinc-100 focus:outline-none" id="players" onChange={ e => setOptions(options => ({ ...options, ...{ Extra: e.target.value } })) }>
+          { extra.map(el => <option key={ el } value={ el }>{ el }</option>) }
+      </select>
+    </div>
+  )
+}
+
 export default function App() {
   const ref = createRef();
   const ws = useRef();
@@ -38,6 +51,12 @@ export default function App() {
 
   const [rules, setRules] = useState("");
 
+  const [options, setOptions] = useState({
+      Seed: Date.now(),
+      Variant: config.variants.length > 0 ? config.variants[0] : null,
+      ExtraOption: extra[0],
+  })
+
   useLayoutEffect(() => {
       fetch(Rules)
       .then(response => response.text())
@@ -56,14 +75,20 @@ export default function App() {
               chat={ chat } setChat={ setChat }
               connected={ connected } setConnected={ setConnected }
               error={ error } setError={ setError }>
-                game component(s) go here
+                <div>game component(s) go here</div>
             </GamePage>
           }
         />
         <Route exact path="/status/down" element={ <DownPage config={ config } /> }/>
         <Route exact path="/rules" element={ <RulesPage config={ config } rules={ rules } /> }/>
         <Route exact path="/bugs" element={ <BugsPage config={ config } /> }/>
-        <Route path="/" element={ <HomePage config={ config } /> } />
+        <Route path="/" element=
+          { 
+            <HomePage config={ config } options={ options } setOptions={ setOptions }>
+              <ExtraOption setOptions={ setOptions } />
+            </HomePage>
+          }
+        />
       </Routes>
     </BrowserRouter>
   );