+ Map Size change

package.json

@@ -14,6 +14,7 @@
     "react-scripts": "^5.0.0"
   },
   "devDependencies": {
+    "react-router-dom": "^6.28.0",
     "tailwindcss": "^3.4.15"
   },
   "browserslist": {

src/App.js

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useLocation } from 'react-router-dom';
 
 function Square({ row, column, value, clickHandler }) {
   let buttonClass = ""
@@ -38,7 +39,7 @@ function SquareRow({ rowId, rows, clickHandler }) {
   return <>{items}</>;
 }
 
-export default function Map({ mapSize }) {
+function Map({ mapSize }) {
   // Config Here
   const ticTacToeMaxMapSize = 6
 
@@ -166,3 +167,28 @@ export default function Map({ mapSize }) {
     </div>
   );
 }
+
+export default function Game(){
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const useSize = params.get('mapSize');
+  let realSize = parseInt(useSize)
+  if (realSize == NaN || realSize < 3 || realSize > 20){
+    realSize = 3
+  }
+  return(
+    <>
+      <Map mapSize={realSize}/>
+
+      <div className="rounded-xl bg-green-50 shadow-md flex space-x-2 container mx-auto">
+        <form >
+          <label className="bg-green-50">
+            地图大小：
+            <input name="mapSize" defaultValue={realSize} type="number"  />
+          </label>
+          <button type="submit" className="bg-cyan-200 rounded-md text-sm">确认</button>
+        </form>
+      </div>
+    </>
+  )
+}

src/index.js

@@ -3,10 +3,13 @@ import { createRoot } from "react-dom/client";
 import "./styles.css";
 
 import App from "./App";
+import { BrowserRouter } from "react-router-dom";
 
 const root = createRoot(document.getElementById("root"));
 root.render(
   <StrictMode>
-    <App mapSize={8}/>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>
 );

yarn.lock

@@ -1590,6 +1590,11 @@
     schema-utils "^4.2.0"
     source-map "^0.7.3"
 
+"@remix-run/router@1.21.0":
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.21.0.tgz#c65ae4262bdcfe415dbd4f64ec87676e4a56e2b5"
+  integrity sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -7605,6 +7610,21 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-router-dom@^6.28.0:
+  version "6.28.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.28.0.tgz#f73ebb3490e59ac9f299377062ad1d10a9f579e6"
+  integrity sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==
+  dependencies:
+    "@remix-run/router" "1.21.0"
+    react-router "6.28.0"
+
+react-router@6.28.0:
+  version "6.28.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.28.0.tgz#29247c86d7ba901d7e5a13aa79a96723c3e59d0d"
+  integrity sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==
+  dependencies:
+    "@remix-run/router" "1.21.0"
+
 react-scripts@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"