add .mjs to format rule, fix import style

packages/webapp/Makefile

@@ -33,5 +33,5 @@ check:
 # Runs prettier formatting across webapp files with specified file extensions.
 format: 
 	pnpm eslint . --fix
-	pnpm prettier --write "**/*.{js,jsx,ts,tsx,json,css,cjs}"
+	pnpm prettier --write "**/*.{js,jsx,ts,tsx,json,css,cjs,mjs}"
 .PHONY: format

packages/webapp/next.config.mjs

@@ -9,57 +9,57 @@ const require = createRequire(import.meta.url)
 
 /** @type {import("next").NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+    reactStrictMode: true,
 
-  /**
-   * If you have the "experimental: { appDir: true }" setting enabled, then you
-   * must comment the below `i18n` config out.
-   *
-   * @see https://github.com/vercel/next.js/issues/41980
-   */
-  i18n: {
-    locales: ["en"],
-    defaultLocale: "en",
-  },
-  eslint: {
-    // Warning: This allows production builds to successfully complete even if
-    // your project has ESLint errors.
-    ignoreDuringBuilds: true,
-  },
-  experimental: {
-    // Currently broken in Next 13.3.0: https://github.com/pmndrs/swc-jotai/issues/6
-    // Unlike what is suggested, also broken when I downgrade to Next 13.2.3 and Next 13.1.6.
-    swcPlugins: [
-      // ['@swc-jotai/react-refresh', {}],
-      // ["@swc-jotai/debug-label", {}]
-    ]
-  },
-  webpack(config, { dev, isServer }) {
-    // prevent node-gyp from failing because "can't resolve fs"
-    config.resolve.fallback = {
-      ...config.resolve.fallback,
-      fs: false,
-      net: false,
-      tls: false,
-      readline: false
-    }
+    /**
+     * If you have the "experimental: { appDir: true }" setting enabled, then you
+     * must comment the below `i18n` config out.
+     *
+     * @see https://github.com/vercel/next.js/issues/41980
+     */
+    i18n: {
+        locales: ["en"],
+        defaultLocale: "en",
+    },
+    eslint: {
+        // Warning: This allows production builds to successfully complete even if
+        // your project has ESLint errors.
+        ignoreDuringBuilds: true,
+    },
+    experimental: {
+        // Currently broken in Next 13.3.0: https://github.com/pmndrs/swc-jotai/issues/6
+        // Unlike what is suggested, also broken when I downgrade to Next 13.2.3 and Next 13.1.6.
+        swcPlugins: [
+            // ['@swc-jotai/react-refresh', {}],
+            // ["@swc-jotai/debug-label", {}]
+        ],
+    },
+    webpack(config, { dev, isServer }) {
+        // prevent node-gyp from failing because "can't resolve fs"
+        config.resolve.fallback = {
+            ...config.resolve.fallback,
+            fs: false,
+            net: false,
+            tls: false,
+            readline: false,
+        }
 
-    config.experiments = {
-      ...config.experiments,
-      topLevelAwait: true // enable await at top-level in modules
-    }
+        config.experiments = {
+            ...config.experiments,
+            topLevelAwait: true, // enable await at top-level in modules
+        }
 
-    // This would be great, but is sadly disallowed by Next, because they hate freedom.
-    // https://nextjs.org/docs/messages/improper-devtool
-    // Having this would enable parsing hook names in the React DevTools.
-    // config.devtool = "cheap-module-source-map"
-    return config
-  },
-  // This hack makes it possible to use the Jotai devtools
-  // Sources:
-  //   https://github.com/jotaijs/jotai-devtools/issues/47
-  //   https://github.com/martpie/next-transpile-modules/releases/tag/the-end
-  transpilePackages: ['jotai-devtools']
+        // This would be great, but is sadly disallowed by Next, because they hate freedom.
+        // https://nextjs.org/docs/messages/improper-devtool
+        // Having this would enable parsing hook names in the React DevTools.
+        // config.devtool = "cheap-module-source-map"
+        return config
+    },
+    // This hack makes it possible to use the Jotai devtools
+    // Sources:
+    //   https://github.com/jotaijs/jotai-devtools/issues/47
+    //   https://github.com/martpie/next-transpile-modules/releases/tag/the-end
+    transpilePackages: ["jotai-devtools"],
 }
 
 // // This hack makes it possible to use the Jotai devtools
@@ -68,4 +68,4 @@ const nextConfig = {
 //   "jotai-devtools",
 // ])
 // export default withTranspileModules(nextConfig)
-export default nextConfig
+export default nextConfig

packages/webapp/postcss.config.mjs

@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
 }

packages/webapp/src/components/cards/cardContainer.tsx

@@ -3,13 +3,12 @@ import React from "react"
 import { useSortable } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
 
+import BoardCard from "src/components/cards/boardCard"
+import DraggedCard from "src/components/cards/draggedCard"
+import HandCard from "src/components/cards/handCard"
 import { CardPlacement } from "src/store/types"
 import { convertStringToSafeNumber } from "src/utils/js-utils"
 
-import BoardCard from "./boardCard"
-import DraggedCard from "./draggedCard"
-import HandCard from "./handCard"
-
 interface BaseCardProps {
     id: string
     className?: string

packages/webapp/src/components/hand.tsx

@@ -3,14 +3,12 @@ import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai"
 
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable"
 
+import CardContainer from "src/components/cards/cardContainer"
 import { CancellationHandler } from "src/components/modals/loadingModal"
+import useScrollBox from "src/hooks/useScrollBox"
 import { CardPlacement } from "src/store/types"
 import { convertBigIntArrayToStringArray } from "src/utils/js-utils"
 
-import useScrollBox from "../hooks/useScrollBox"
-
-import CardContainer from "./cards/cardContainer"
-
 const Hand = ({
     cards,
     className,

packages/webapp/src/components/modals/globalErrorModal.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react"
 
 import { Button } from "src/components/ui/button"
+import { Dialog, DialogContent, DialogTitle } from "src/components/ui/dialog"
 import { ErrorConfig } from "src/store/types"
 
-import { Dialog, DialogContent, DialogTitle } from "../ui/dialog"
-
 /**
  * A modal displayed globally (setup in _app.tsx) whenever the errorConfig state is set to non-null.
  * This modal can be dismissed by setting the errorConfig state to null.

packages/webapp/src/components/modals/inGameMenuModalContent.tsx

@@ -1,8 +1,7 @@
 import Link from "next/link"
 
 import { Button } from "src/components/ui/button"
-
-import { DialogDescription, DialogTitle } from "../ui/dialog"
+import { DialogDescription, DialogTitle } from "src/components/ui/dialog"
 
 /**
  * This modal content is shared by both the {@link CreateGameModal} (for the game creator) and the

packages/webapp/src/components/modals/joinGameModal.tsx

@@ -9,6 +9,7 @@ import { Spinner } from "src/components/lib/modalElements"
 import { InGameMenuModalContent } from "src/components/modals/inGameMenuModalContent"
 import { LoadingModalContent } from "src/components/modals/loadingModal"
 import { Button } from "src/components/ui/button"
+import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "src/components/ui/dialog"
 import { Input } from "src/components/ui/input"
 import { useCancellationHandler } from "src/hooks/useCancellationHandler"
 import * as store from "src/store/hooks"
@@ -17,8 +18,6 @@ import { setError } from "src/store/write"
 import { isStringPositiveInteger, parseBigIntOrNull } from "src/utils/js-utils"
 import { navigate } from "src/utils/navigate"
 
-import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "../ui/dialog"
-
 interface JoinGameModalContentProps {
     loading: string | null
     setLoading: React.Dispatch<React.SetStateAction<string | null>>