TicTacToe: Update

src/TicTacToe.js

@@ -42,7 +42,7 @@ function SquareRow({ rowId, rows, clickHandler }) {
 
 function Map({ mapSize }) {
   // Config Here
-  const ticTacToeMaxMapSize = 6
+  const ticTacToeMaxMapSize = 5
 
   if (mapSize == undefined) {
     mapSize = 3;
@@ -75,12 +75,13 @@ function Map({ mapSize }) {
     }
     updateMap(nextMap)
     setCurrentMove(currentMove + 1)
-    if (currentMove + 1 >= mapSize * mapSize){
-      setNoWinner(true)
-    }
-    if (calculateWinner(row, column,nextMap)) {
+    let hasWinner = calculateWinner(row, column,nextMap)
+    if (hasWinner) {
       setWinner(nextMap[row][column])
     }
+    if (currentMove + 1 >= mapSize * mapSize && !hasWinner){
+      setNoWinner(true)
+    }
   }
 
   function calculateWinner(row, column,map) {
@@ -156,7 +157,7 @@ function Map({ mapSize }) {
   }
 
   return (
-    <div className="rounded-xl bg-sky-50 shadow-xl table items-center space-y-2 container mx-auto content-center">
+    <div className="rounded-xl bg-sky-50 shadow-xl flex flex-col items-center space-y-2 container mx-auto content-center gap-1">
       <p className="font-sans text-2xl text-center	">{mapSize > ticTacToeMaxMapSize ? "五子棋" : "井字棋"}模式</p>
       <p className="text-xl text-center ">现在是 {xIsNext ? "X" : "O"} 移动</p>
       <div className="flex flex-row justify-center items-center">
@@ -169,35 +170,66 @@ function Map({ mapSize }) {
           &#8592;回到上一个
         </button>
       </div>
-      <p className="text-xl text-center">{winner != null ? winner + "赢了" : ""} </p>
+      <p className="text-2xl text-center">{winner != null ? winner + "赢了" : ""} </p>
       <p className="text-xl text-center">{noWinner ? "没有胜利者" : ""} </p>
     </div>
   );
 }
 
+function getMaxBoardSize() {
+  const screenWidth = window.innerWidth;
+  const screenHeight = window.innerHeight;
+  const squareSize = 34;
+  const otherWidthUse = 48*2;
+
+  const squaresHorizontally = Math.floor((screenWidth - otherWidthUse) / squareSize);
+  const squaresVertically = Math.floor(screenHeight / squareSize);
+
+  if (squaresHorizontally > 20 && squaresVertically > 20){
+    return 20
+  }
+  
+  return squaresHorizontally < squaresVertically ? squaresHorizontally : squaresVertically;
+}
+
+
+
 export default function Game(){
   const location = useLocation();
   const params = new URLSearchParams(location.search);
   const useSize = params.get('mapSize');
+  
   let realSize = parseInt(useSize)
-  if (isNaN(realSize) || realSize < 3 || realSize > 20){
+  if (isNaN(realSize) || realSize < 3 || realSize > getMaxBoardSize()){
     realSize = 3
   }
   return(
-    <div className="min-h-svh flex flex-col items-center justify-center bg-slate-50 p-2 sm:p-4">
-      <div className="table items-center p-10">
+<div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-cyan-200 to-pink-200 via-white p-6 sm:p-10">
+  <div className="w-full max-w-4xl bg-white rounded-xl shadow-xl p-6 sm:p-12 space-y-6">
     <Map mapSize={realSize} />
-        <div className="rounded-xl bg-green-50 shadow-md flex space-x-2 container mx-auto">
-          <form className="flex gap-x-3" >
-            <label className="bg-green-50">
-              地图大小：
-              <input name="mapSize" defaultValue={realSize} type="number"  />
+    <div className="rounded-xl bg-green-50 shadow-lg flex flex-col items-center sm:space-y-4 p-6 sm:p-8 space-y-3 w-full">
+      <p>当前最大地图大小： {getMaxBoardSize()}</p>
+      <form className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center sm:text-center w-full">
+        <label className="text-lg sm:text-xl bg-green-50 border border-green-200 p-2 sm:p-4 rounded-md w-full sm:w-auto">
+          地图大小
+          <input
+            className="sm:w-20 sm:h-10 mt-2 sm:mt-0 border border-sky-300 rounded-md p-2 w-full"
+            name="mapSize"
+            defaultValue={realSize}
+            type="number"
+          />
         </label>
-            <button type="submit" className="bg-cyan-200 rounded-md text-sm">确认</button>
+        <button
+          type="submit"
+          className="bg-cyan-300 hover:bg-cyan-400 text-white rounded-md px-4 py-2 sm:px-6 sm:py-3 text-sm sm:text-lg mt-4 sm:mt-0"
+        >
+          确认
+        </button>
       </form>
     </div>
   </div>
 </div>
+
   )
 }