Fix for look on mobile

src/TicTacToe.js

@@ -5,18 +5,19 @@ function Square({ row, column, value, clickHandler }) {
   let buttonClass = ""
   switch (value){
     case "X":
-      buttonClass = "square bg-amber-200	"
+      buttonClass = "bg-amber-200	"
       break;
     case "O":
-      buttonClass = "square bg-violet-300"
+      buttonClass = "bg-violet-300"
       break;
     default:
-      buttonClass = "square bg-white"
+      buttonClass = "bg-white"
       break;
   }
   return (
     <button
       className={buttonClass}
+      style={styles.square}
       onClick={() => clickHandler(row, column)}
     >
       {value}
@@ -183,18 +184,37 @@ export default function Game(){
     realSize = 3
   }
   return(
-    <>
+    <div className="min-h-svh flex flex-col items-center justify-center bg-slate-50 p-2 sm:p-4">
-      <Map mapSize={realSize}/>
+      <div className="table items-center p-10">
-
+        <Map mapSize={realSize}/>
-      <div className="rounded-xl bg-green-50 shadow-md flex space-x-2 container mx-auto">
+        <div className="rounded-xl bg-green-50 shadow-md flex space-x-2 container mx-auto">
-        <form >
+          <form className="flex gap-x-3" >
-          <label className="bg-green-50">
+            <label className="bg-green-50">
-            地图大小：
+              地图大小：
-            <input name="mapSize" defaultValue={realSize} type="number"  />
+              <input name="mapSize" defaultValue={realSize} type="number"  />
-          </label>
+            </label>
-          <button type="submit" className="bg-cyan-200 rounded-md text-sm">确认</button>
+            <button type="submit" className="bg-cyan-200 rounded-md text-sm">确认</button>
-        </form>
+          </form>
+        </div>
       </div>
-    </>
+    </div>
   )
+}
+
+
+const styles = {
+  square: {
+    border: '1px solid #999',
+    float: 'left',
+    fontSize: '24px',
+    fontWeight: 'bold',
+    lineHeight: '34px',
+    height: '34px',
+    marginRight: '-1px',
+    marginTop: '-1px',
+    padding: '0',
+    textAlign: 'center',
+    width: '34px',
+  },
+
 }

src/TodoList.tsx

@@ -30,6 +30,20 @@ function TodoItems({ items, setItems }: {
               {item.name}
             </span>
             <div className="flex gap-4">
+              { // 删除逻辑
+               item.isFinished ?
+                <button
+                  className={'px-4 py-2 text-sm font-medium text-white rounded-md bg-slate-400 hover:bg-slate-600'}
+                  onClick={() => {
+                    const updatedItems = items.filter(i => i.id !== item.id);
+                    for(let i: number = 0; i < updatedItems.length; i++){
+                      updatedItems[i].id = i
+                    }
+                    setItems(updatedItems);                
+                  }}
+                > 删除
+                </button> 
+              : <></>}
               <button
                 className={`px-4 py-2 text-sm font-medium text-white rounded-md 
                   ${item.isFinished ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600'}
@@ -41,18 +55,8 @@ function TodoItems({ items, setItems }: {
                   setItems(updatedItems);
                 }}
               >
-                {item.isFinished ? '还没做完' : '做完了'}
+                {item.isFinished ? '没做完' : '做完了'}
               </button>
-              { item.isFinished ?
-                <button
-                  className={'px-4 py-2 text-sm font-medium text-white rounded-md bg-slate-400 hover:bg-slate-600'}
-                  onClick={() => {
-                    const updatedItems = items.filter(i => i.id !== item.id);
-                    setItems(updatedItems);                
-                  }}
-                > 删除
-                </button> 
-              : <></>}
             </div>
 
           </li>
@@ -106,12 +110,12 @@ const TodoList = () => {
   const [items, setItems] = useState(exampleTodoItems)
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-slate-50 p-4">
+    <div className="min-h-screen flex flex-col items-center justify-center bg-slate-50 p-2 sm:p-4">
-      <p className="text-4xl text-center p-20 bg-gradient-to-r from-blue-800 to-pink-800 via-green-950 inline-block text-transparent bg-clip-text">简单TODO</p>
+      <p className="text-2xl sm:text-4xl text-center p-5 sm:p-20 bg-gradient-to-r from-blue-800 to-pink-800 via-green-950 inline-block text-transparent bg-clip-text">简单TODO</p>
-      <div className="w-full max-w-3xl p-10 bg-white rounded-lg shadow-lg">
+      <div className="w-full sm:max-w-3xl p-5 sm:p-10 bg-white rounded-lg shadow-lg">
         <TodoItems items={items} setItems={setItems} />
       </div>
-      <div className="w-full max-w-3xl mt-6 p-10 bg-white rounded-lg shadow-lg">
+      <div className="w-full sm:max-w-3xl mt-6 py-5 sm:py-10 px-2 sm:px-10 bg-white rounded-lg shadow-lg">
         <AddTodoItem items={items} setItems={setItems} />
       </div>
     </div>

src/styles.css

@@ -1,99 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  margin: 20px;
-  padding: 0;
-}
-
-h1 {
-  margin-top: 0;
-  font-size: 22px;
-}
-
-h2 {
-  margin-top: 0;
-  font-size: 20px;
-}
-
-h3 {
-  margin-top: 0;
-  font-size: 18px;
-}
-
-h4 {
-  margin-top: 0;
-  font-size: 16px;
-}
-
-h5 {
-  margin-top: 0;
-  font-size: 14px;
-}
-
-h6 {
-  margin-top: 0;
-  font-size: 12px;
-}
-
-code {
-  font-size: 1.2em;
-}
-
-ul {
-  padding-inline-start: 20px;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: sans-serif;
-  margin: 20px;
-  padding: 0;
-}
-
-.square {
-  border: 1px solid #999;
-  float: left;
-  font-size: 24px;
-  font-weight: bold;
-  line-height: 34px;
-  height: 34px;
-  margin-right: -1px;
-  margin-top: -1px;
-  padding: 0;
-  text-align: center;
-  width: 34px;
-}
-
-.board-row:after {
-  clear: both;
-  content: '';
-  display: table;
-}
-
-.status {
-  margin-bottom: 10px;
-}
-.game {
-  display: flex;
-  flex-direction: row;
-}
-
-.game-info {
-  margin-left: 20px;
-}
-
-.arrow {
-  font-size: '20px';
-  padding: '10px';
-  cursor: 'pointer';
-}