Consistent imports/classes code style

webdevcody · Oct 20, 2024 · 333dbaa · 333dbaa
1 parent 030d2c1
commit 333dbaa
Show file tree

Hide file tree

Showing 50 changed files with 178 additions and 184 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,13 @@
+{
+  "importOrder": [
+    "^react$",
+    "<THIRD_PARTY_MODULES>",
+    "^(@|.)/(.*)(?<!.s?css)$",
+    ".s?css$"
+  ],
+  "importOrderSortSpecifiers": true,
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ]
+}
diff --git a/app/games/[gameId]/page.tsx b/app/games/[gameId]/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { api } from "@/convex/_generated/api";
-import { Id } from "@/convex/_generated/dataModel";
 import { useQuery } from "convex/react";
 import { Result } from "./result";
+import { api } from "@/convex/_generated/api";
+import { Id } from "@/convex/_generated/dataModel";
 
 export default function GamePage({ params }: { params: { gameId: string } }) {
   const game = useQuery(api.games.getGame, {
@@ -14,14 +14,14 @@ export default function GamePage({ params }: { params: { gameId: string } }) {
   });
 
   return (
-    <div className="container mx-auto max-w-5xl min-h-screen flex flex-col items-center py-12 pb-24 gap-8">
+    <div className="container mx-auto flex min-h-screen max-w-5xl flex-col items-center gap-8 py-12 pb-24">
       <h1>Game {params.gameId}</h1>
       <h2>Model: {game?.modelId}</h2>
 
       <div className="flex flex-col gap-12">
         {results === undefined || results.length === 0 ? (
-          <div className="flex flex-col justify-center items-center gap-8">
-            <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-gray-900"></div>
+          <div className="flex flex-col items-center justify-center gap-8">
+            <div className="h-16 w-16 animate-spin rounded-full border-b-2 border-gray-900"></div>
             <p className="ml-4">Game starting...</p>
           </div>
         ) : (

diff --git a/app/games/[gameId]/result.tsx b/app/games/[gameId]/result.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { Doc } from "@/convex/_generated/dataModel";
-import { api } from "@/convex/_generated/api";
 import { useQuery } from "convex/react";
+import Link from "next/link";
 import { MapStatus } from "@/components/MapStatus";
 import { Visualizer } from "@/components/Visualizer";
-import Link from "next/link";
+import { api } from "@/convex/_generated/api";
+import { Doc } from "@/convex/_generated/dataModel";
 
 export const Result = ({ result }: { result: Doc<"results"> }) => {
   const map = useQuery(api.maps.getMapByLevel, {
@@ -24,13 +24,13 @@ export const Result = ({ result }: { result: Doc<"results"> }) => {
     <div className="flex items-center gap-8">
       <Link
         href={`/play/${map.level}`}
-        className="whitespace-nowrap hover:underline cursor-pointer"
+        className="cursor-pointer whitespace-nowrap hover:underline"
       >
         Level {map.level}
       </Link>
 
       {result.status === "failed" ? (
-        <div className="text-red-500 w-[200px] flex-shrink-0">
+        <div className="w-[200px] flex-shrink-0 text-red-500">
           {result.error}
         </div>
       ) : (

diff --git a/app/header.tsx b/app/header.tsx
@@ -1,11 +1,11 @@
 "use client";
 
+import { useAuthActions } from "@convex-dev/auth/react";
 import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { useConvexAuth, useQuery } from "convex/react";
+import dynamic from "next/dynamic";
 import Image from "next/image";
 import Link from "next/link";
-import dynamic from "next/dynamic";
-import { useAuthActions } from "@convex-dev/auth/react";
-import { useConvexAuth, useQuery } from "convex/react";
 import { Button } from "@/components/ui/button";
 import { api } from "@/convex/_generated/api";
 
@@ -36,7 +36,7 @@ export default function Header() {
   const isAdminQuery = useQuery(api.users.isAdmin);
 
   return (
-    <header className="flex justify-between items-center py-4 px-6 shadow-sm border-b">
+    <header className="flex items-center justify-between border-b px-6 py-4 shadow-sm">
       <Link href="/" className="flex items-center">
         <Image src="/logo.png" alt="Logo" width={32} height={32} />
         <span className="ml-2 text-xl font-bold">SurviveTheNight</span>
@@ -89,12 +89,12 @@ export default function Header() {
           <ThemeToggle />
         </div>
         <Button
-          className="shrink-0 w-9"
+          className="w-9 shrink-0"
           variant="outline"
           size="icon"
           type="button"
         >
-          <GitHubLogoIcon className="w-4 h-4" />
+          <GitHubLogoIcon className="h-4 w-4" />
         </Button>
         {!isAuthenticated ? (
           <SignInWithGitHub />

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,9 +1,9 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
 import { ConvexAuthNextjsServerProvider } from "@convex-dev/auth/nextjs/server";
+import { type Metadata } from "next";
+import { Inter } from "next/font/google";
 import Header from "./header";
 import { Providers } from "./provider";
+import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
 

diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
@@ -1,8 +1,6 @@
 "use client";
 
-import { api } from "@/convex/_generated/api";
 import { useQuery } from "convex/react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Table,
   TableBody,
@@ -12,6 +10,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { api } from "@/convex/_generated/api";
 
 // Define the types for the data
 interface Ranking {

diff --git a/app/maps/page.tsx b/app/maps/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { Input } from "@/components/ui/input";
-import React, { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
 import { useMutation } from "convex/react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import { api } from "@/convex/_generated/api";
 
 export default function AddMapPage() {

diff --git a/app/maps/review/page.tsx b/app/maps/review/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useMutation, useQuery } from "convex/react";
 import { Map } from "@/components/Map";
 import { Button } from "@/components/ui/button";
 import {
@@ -10,7 +11,6 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/convex/_generated/api";
-import { useMutation, useQuery } from "convex/react";
 
 const Page = () => {
   const isAdmin = useQuery(api.users.isAdmin);

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,26 +1,26 @@
 "use client";
 
 import { useQuery } from "convex/react";
-import { api } from "@/convex/_generated/api";
+import Link from "next/link";
+import Result from "./result";
+import { Button } from "@/components/ui/button";
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
+  TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { TableHeader } from "@/components/ui/table";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import Result from "./result";
+import { api } from "@/convex/_generated/api";
 
 export default function GamePage() {
   const results = useQuery(api.results.getLastCompletedResults);
   const globalRanking = useQuery(api.leaderboard.getGlobalRankings);
 
   if (results === undefined) {
     return (
-      <div className="min-h-screen container mx-auto pt-12 pb-24 space-y-8">
+      <div className="container mx-auto min-h-screen space-y-8 pb-24 pt-12">
         <h1 className="text-2xl font-bold">Recent Games</h1>
         <p>Loading...</p>
       </div>
@@ -29,26 +29,26 @@ export default function GamePage() {
 
   if (results.length === 0) {
     return (
-      <div className="min-h-screen container mx-auto pt-12 pb-24 space-y-8">
+      <div className="container mx-auto min-h-screen space-y-8 pb-24 pt-12">
         <h1 className="text-2xl font-bold">Recent Games</h1>
         <p>No results yet</p>
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto pt-12 flex gap-12">
-      <div className="space-y-8 flex-grow">
+    <div className="container mx-auto flex gap-12 pt-12">
+      <div className="flex-grow space-y-8">
         <h1 className="text-2xl font-bold">Recent Games</h1>
-        <div className="h-[calc(100vh_-_185px)] overflow-y-auto flex flex-col gap-4">
+        <div className="flex h-[calc(100vh_-_185px)] flex-col gap-4 overflow-y-auto">
           {results.map((result) => (
             <Result key={result._id} result={result} />
           ))}
         </div>
       </div>
 
       <div className="space-y-8">
-        <div className="flex justify-between items-center">
+        <div className="flex items-center justify-between">
           <h2 className="text-2xl font-bold">LLM Leaderboard</h2>
           <Button asChild>
             <Link href="/leaderboard">View Full Leaderboard</Link>

diff --git a/app/play/[level]/page.tsx b/app/play/[level]/page.tsx
@@ -1,16 +1,16 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useMutation, useQuery, Authenticated } from "convex/react";
-import { api } from "@/convex/_generated/api";
-import { Button } from "@/components/ui/button";
-import { Visualizer } from "@/components/Visualizer";
-import { Map } from "@/components/Map";
-import Link from "next/link";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import TestMode from "./test-mode";
+import { Authenticated, useMutation, useQuery } from "convex/react";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
+import TestMode from "./test-mode";
+import { Map } from "@/components/Map";
+import { Visualizer } from "@/components/Visualizer";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { api } from "@/convex/_generated/api";
 import { ZombieSurvival } from "@/simulators/zombie-survival";
 
 export default function PlayLevelPage({

diff --git a/app/play/[level]/test-mode.tsx b/app/play/[level]/test-mode.tsx
@@ -1,17 +1,17 @@
 import { useState } from "react";
+import { ReloadIcon } from "@radix-ui/react-icons";
 import { useAction } from "convex/react";
-import { api } from "@/convex/_generated/api";
-import { Button } from "@/components/ui/button";
-import { Visualizer } from "@/components/Visualizer";
 import { Map } from "@/components/Map";
-import { ReloadIcon } from "@radix-ui/react-icons";
+import { Visualizer } from "@/components/Visualizer";
+import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { api } from "@/convex/_generated/api";
 import { AI_MODELS } from "@/convex/constants";
 import { errorMessage } from "@/lib/utils";
 
@@ -67,13 +67,13 @@ export default function TestMode({ level, map }: TestModeProps) {
   };
 
   return (
-    <div className="flex flex-col items-center gap-4 w-full">
+    <div className="flex w-full flex-col items-center gap-4">
       {showOriginalMap && (
         <div className="mb-8">
           <Map map={map} />
         </div>
       )}
-      <div className="flex gap-4 mb-4">
+      <div className="mb-4 flex gap-4">
         <Select value={selectedModel} onValueChange={setSelectedModel}>
           <SelectTrigger className="w-[180px]">
             <SelectValue placeholder="Select AI model" />
@@ -102,11 +102,11 @@ export default function TestMode({ level, map }: TestModeProps) {
           </Button>
         )}
       </div>
-      {aiError && <div className="text-red-500 mt-4">{aiError}</div>}
+      {aiError && <div className="mt-4 text-red-500">{aiError}</div>}
       {gameResult && (
-        <div className="mt-4 flex flex-col items-center gap-8 max-w-4xl mx-auto">
+        <div className="mx-auto mt-4 flex max-w-4xl flex-col items-center gap-8">
           <Visualizer map={playerMap} autoStart={true} onReset={handleReset} />
-          <div className="flex flex-col gap-4 flex-1">
+          <div className="flex flex-1 flex-col gap-4">
             <div
               className={`text-2xl font-bold ${
                 gameResult === "WON" ? "text-green-500" : "text-red-500"
@@ -116,7 +116,7 @@ export default function TestMode({ level, map }: TestModeProps) {
             </div>
             {aiReasoning && (
               <div className="p-4">
-                <h3 className="font-semibold mb-2">AI Reasoning:</h3>
+                <h3 className="mb-2 font-semibold">AI Reasoning:</h3>
                 <p>{aiReasoning}</p>
               </div>
             )}

diff --git a/app/play/page.tsx b/app/play/page.tsx
@@ -1,22 +1,21 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { Authenticated, Unauthenticated, useQuery } from "convex/react";
-import { api } from "@/convex/_generated/api";
+import Link from "next/link";
 import { Map as GameMap } from "@/components/Map";
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { useEffect, useState } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { api } from "@/convex/_generated/api";
 import { cn } from "@/lib/utils";
-import { StarFilledIcon } from "@radix-ui/react-icons";
 
 export default function PlayPage() {
   const maps = useQuery(api.maps.getMaps, {});

diff --git a/app/playground/page.tsx b/app/playground/page.tsx
@@ -1,18 +1,18 @@
 "use client";
 
-import React from "react";
-import { CircleAlertIcon, EraserIcon } from "lucide-react";
+import * as React from "react";
 import { useAction, useMutation, useQuery } from "convex/react";
-import { Button } from "@/components/ui/button";
+import { CircleAlertIcon, EraserIcon } from "lucide-react";
 import { CopyMapButton } from "@/components/CopyMapButton";
 import { MapBuilder } from "@/components/MapBuilder";
 import { MapStatus } from "@/components/MapStatus";
 import { ModelSelector } from "@/components/ModelSelector";
 import { Visualizer } from "@/components/Visualizer";
-import { ZombieSurvival } from "@/simulators/zombie-survival";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/components/ui/use-toast";
 import { api } from "@/convex/_generated/api";
 import { errorMessage } from "@/lib/utils";
-import { useToast } from "@/components/ui/use-toast";
+import { ZombieSurvival } from "@/simulators/zombie-survival";
 
 const STORAGE_MAP_KEY = "playground-map";