fmt

connect4-ui/.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+out
+connect4-moderator-server

connect4-ui/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "useTabs": false,
+  "tabWidth": 2
+}

connect4-ui/app/globals.css

@@ -8,5 +8,8 @@
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
 }

connect4-ui/components/Board.tsx

@@ -54,7 +54,9 @@ export default function Board({
             <div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0" />
             <span className="font-medium">{player2}</span>
             {currentTurnColor === 2 && (
-              <span className="text-xs text-yellow-400 animate-pulse">● Turn</span>
+              <span className="text-xs text-yellow-400 animate-pulse">
+                ● Turn
+              </span>
             )}
           </div>
         </div>
@@ -80,7 +82,9 @@ export default function Board({
               {/* Drop arrow indicator */}
               <div
                 className={`h-2 flex items-center justify-center transition-opacity ${
-                  hoveredCol === col && canInteract ? "opacity-100" : "opacity-0"
+                  hoveredCol === col && canInteract
+                    ? "opacity-100"
+                    : "opacity-0"
                 }`}
               >
                 <div className="w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-white/70" />
@@ -98,9 +102,7 @@ export default function Board({
                     className={`w-12 h-12 rounded-full border-2 transition-all duration-150 ${
                       cell === 1
                         ? `bg-red-500 shadow-lg shadow-red-950/60 ${
-                            isLast
-                              ? "border-white scale-110"
-                              : "border-red-700"
+                            isLast ? "border-white scale-110" : "border-red-700"
                           }`
                         : cell === 2
                           ? `bg-yellow-400 shadow-lg shadow-yellow-950/60 ${

connect4-ui/package-lock.json

@@ -20,6 +20,7 @@
         "eslint": "^9",
         "eslint-config-next": "15.2.4",
         "postcss": "^8",
+        "prettier": "^3.8.1",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -4962,6 +4963,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

connect4-ui/package.json

@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "next": "15.2.4",
@@ -14,14 +16,15 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.2.4",
-    "typescript": "^5",
+    "postcss": "^8",
+    "prettier": "^3.8.1",
     "tailwindcss": "^4",
-    "@tailwindcss/postcss": "^4",
-    "postcss": "^8"
+    "typescript": "^5"
   }
 }

connect4-ui/tsconfig.json

@@ -1,10 +1,6 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -22,19 +18,10 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     },
     "target": "ES2017"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }