More eslint, prettier

.eslintrc.json

@@ -1,3 +1,8 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "prettier"],
+  "plugins": ["import", "prettier"],
+  "rules": {
+    "import/order": "error",
+    "prettier/prettier": "error"
+  }
 }

convex/deals.ts

@@ -1,6 +1,6 @@
 import { v } from "convex/values";
-import { mutation, query } from "./_generated/server.js";
 import { shuffle } from "d3-array";
+import { mutation, query } from "./_generated/server.js";
 
 const suits = [..."♣♦♥♠"];
 const ranks = [..."23456789", "10", ..."JQKA"];

convex/players.ts

@@ -1,5 +1,5 @@
-import { mutation } from "./_generated/server.js";
 import { v } from "convex/values";
+import { mutation } from "./_generated/server.js";
 
 export const join = mutation({
   args: { table: v.string() },

convex/schema.ts

@@ -1,4 +1,4 @@
-import { defineSchema, defineTable} from "convex/server";
+import { defineSchema, defineTable } from "convex/server";
 import { v } from "convex/values";
 
 export default defineSchema({

package.json

@@ -26,7 +26,9 @@
     "@types/react-transition-group": "^4.4.10",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.1.0",
-    "prettier": "^3.2.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "typescript": "^5.3.3"
   }
 }

src/components/Card.tsx

@@ -244,7 +244,7 @@ export function Card({
 }: CardProps & JSX.IntrinsicElements["div"]) {
   const r = useMemo(
     () => (void card, rotation ?? Math.random() * 10 - 5),
-    [rotation, card]
+    [rotation, card],
   );
   const upsideDown = useMemo(() => (void card, Math.random() > 0.5), [card]);
 

src/components/Hand.tsx

@@ -3,8 +3,8 @@ import Head from "next/head";
 import { useEffect, useState } from "react";
 import { animated, config, useSpring } from "react-spring";
 import { useQuery } from "convex/react";
-import { Card } from "./Card";
 import { api } from "../../convex/_generated/api";
+import { Card } from "./Card";
 
 const slow = { ...config.slow, precision: 0.0001 };
 export function Hand({ table, seat }: { table: string; seat: number }) {

src/components/Table.tsx

@@ -3,8 +3,8 @@ import Head from "next/head";
 import { ReactNode, useState } from "react";
 import { animated, useSpring } from "react-spring";
 import { useMutation, useQuery } from "convex/react";
-import { Card } from "./Card";
 import { api } from "../../convex/_generated/api";
+import { Card } from "./Card";
 
 function DealerButton({
   onMove,
@@ -36,7 +36,7 @@ function DealerButton({
       });
       if (last && Math.hypot(...movement) > 200) onMove();
       return memo;
-    }
+    },
   );
 
   return (