diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..e53f54d --- /dev/null +++ b/.editorconfig @@ -0,0 +1,2 @@ +[*] +max_line_length=120 diff --git a/README.md b/README.md index 3d80ca8..60d8a0d 100644 --- a/README.md +++ b/README.md @@ -19,13 +19,16 @@ It will reload automatically on changes to the code. ### Linting and coding style -Each Pull Request is validated by a linter. +Each Pull Request is validated by `eslint` and `prettier`. To run this locally: ```bash npm run lint +npm run format ``` +The last command will modify source files where needed. + ## Import fits via URL When working with EVEShip.fit, the URL is automatically adjusted to represent the current fit you are working on. diff --git a/app/layout.tsx b/app/layout.tsx index 68b68c7..48ac059 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,7 +1,7 @@ -import React from 'react' -import type { Metadata } from 'next' +import React from "react"; +import type { Metadata } from "next"; -import './globals.css' +import "./globals.css"; import { Noto_Serif } from "next/font/google"; const font = Noto_Serif({ @@ -9,18 +9,14 @@ const font = Noto_Serif({ }); export const metadata: Metadata = { - title: 'EVEShip.fit', - description: 'View, Create, and Share your EVE Online ship fits online', -} + title: "EVEShip.fit", + description: "View, Create, and Share your EVE Online ship fits online", +}; -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} - ) + ); } diff --git a/app/page.module.css b/app/page.module.css index 0210063..92682af 100644 --- a/app/page.module.css +++ b/app/page.module.css @@ -1,68 +1,68 @@ .main { - margin: 0 auto; - width: 1580px; + margin: 0 auto; + width: 1580px; } .content { - background-color: #111111; - border: 1px solid #4f4f4f; - border-radius: 25px; - color: #c5c5c5; - display: flex; - justify-content: flex-end; - margin-top: 10px; - padding: 20px; - position: relative; + background-color: #111111; + border: 1px solid #4f4f4f; + border-radius: 25px; + color: #c5c5c5; + display: flex; + justify-content: flex-end; + margin-top: 10px; + padding: 20px; + position: relative; } .selection { - flex: 1; - margin-top: 10px; - overflow-x: hidden; - padding-right: 10px; + flex: 1; + margin-top: 10px; + overflow-x: hidden; + padding-right: 10px; } .selectionHeader { - display: flex; + display: flex; } .selectionHeader > div { - background-color: #4f4f4f; - cursor: pointer; - flex: 1; - line-height: 24px; - text-align: center; + background-color: #4f4f4f; + cursor: pointer; + flex: 1; + line-height: 24px; + text-align: center; } .selectionHeader > div:hover { - background-color: #6c6c6c; + background-color: #6c6c6c; } .selectionHeader > div:first-child { - border-bottom-left-radius: 25px; - margin-right: 5px; + border-bottom-left-radius: 25px; + margin-right: 5px; } .selectionHeader > div:last-child { - border-bottom-right-radius: 25px; - margin-left: 5px; + border-bottom-right-radius: 25px; + margin-left: 5px; } .selectionContent { - height: 644px; - margin-bottom: 10px; + height: 644px; + margin-bottom: 10px; } .collapsed { - display: none; + display: none; } .selectionHeader > div.selected { - background-color: #7a7a7a; + background-color: #7a7a7a; } .fit { - height: 730px; - width: 730px; + height: 730px; + width: 730px; } .statistics { - margin-top: 10px; - position: relative; + margin-top: 10px; + position: relative; } .statistics > div:first-child { - margin-bottom: 10px; + margin-bottom: 10px; } diff --git a/app/page.tsx b/app/page.tsx index 7efa1b5..c92a187 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,7 +3,20 @@ import clsx from "clsx"; import React from "react"; -import { DogmaEngineProvider, EsiCharacterSelection, EsiProvider, EveDataProvider, FitButtonBar, HardwareListing, HullListing, LocalFitProvider, ModalDialogAnchor, ShipFitExtended, ShipSnapshotProvider, ShipStatistics } from "@eveshipfit/react"; +import { + DogmaEngineProvider, + EsiCharacterSelection, + EsiProvider, + EveDataProvider, + FitButtonBar, + HardwareListing, + HullListing, + LocalFitProvider, + ModalDialogAnchor, + ShipFitExtended, + ShipSnapshotProvider, + ShipStatistics, +} from "@eveshipfit/react"; import { Banner } from "@/components/Banner"; import { LocationHash } from "@/components/LocationHash"; @@ -25,39 +38,51 @@ const Page = () => { window.esf_debug = () => setDebug((prev) => !prev); }, []); - return - - - - -
- -
-
-
setSelection("hulls")} className={clsx({[styles.selected]: selection == "hulls"})}>Hull & Fits
-
setSelection("hardware")} className={clsx({[styles.selected]: selection == "hardware"})}>Hardware
+ return ( + + + + + +
+ +
+
+
setSelection("hulls")} + className={clsx({ [styles.selected]: selection == "hulls" })} + > + Hull & Fits +
+
setSelection("hardware")} + className={clsx({ [styles.selected]: selection == "hardware" })} + > + Hardware +
+
+
+ +
+
+ +
+
-
- +
+
-
- +
+ +
-
-
- -
-
- - -
-
- {debug && } - - - ; -} + {debug && } + + + + ); +}; export default function Home() { return ( @@ -68,5 +93,5 @@ export default function Home() { - ) + ); } diff --git a/components/Banner/Banner.module.css b/components/Banner/Banner.module.css index b2c9221..ebc4a1a 100644 --- a/components/Banner/Banner.module.css +++ b/components/Banner/Banner.module.css @@ -1,36 +1,36 @@ .banner { - background-color: #cdcdcd; - border-radius: 25px; - margin-top: 10px; - padding: 20px 0; - position: relative; - text-align: center; + background-color: #cdcdcd; + border-radius: 25px; + margin-top: 10px; + padding: 20px 0; + position: relative; + text-align: center; } .bannerLinks { - display: inline; - position: absolute; - right: 15px; - top: 8px; + display: inline; + position: absolute; + right: 15px; + top: 8px; } .bannerLinks > a { - background-color: #2a2a2a; - border-radius: 50%; - display: inline-block; - height: 37px; - margin-left: 10px; - padding-top: 6px; - width: 43px; + background-color: #2a2a2a; + border-radius: 50%; + display: inline-block; + height: 37px; + margin-left: 10px; + padding-top: 6px; + width: 43px; } .bannerConstruction { - background-color: #c84824; - border-radius: 25px; - color: #c5c5c5; - margin-top: 10px; - padding: 20px 0; - text-align: center; + background-color: #c84824; + border-radius: 25px; + color: #c5c5c5; + margin-top: 10px; + padding: 20px 0; + text-align: center; } .bannerConstruction > a { - color: #c5f5c5; + color: #c5f5c5; } diff --git a/components/Banner/Banner.tsx b/components/Banner/Banner.tsx index baac61b..687b006 100644 --- a/components/Banner/Banner.tsx +++ b/components/Banner/Banner.tsx @@ -4,20 +4,28 @@ import Image from "next/image"; import styles from "./Banner.module.css"; export const Banner = () => { - return <> -
- EVEShip.fit - View, Create, and Share your EVE Online ship fits online -
- - Donation - - - Discord - - - GitHub - + return ( + <> +
+ EVEShip.fit - View, Create, and Share your EVE Online ship fits online +
-
- -} + + ); +}; diff --git a/components/Banner/index.ts b/components/Banner/index.ts index f4930c0..06353f1 100644 --- a/components/Banner/index.ts +++ b/components/Banner/index.ts @@ -1 +1 @@ -export { Banner } from './Banner'; +export { Banner } from "./Banner"; diff --git a/components/Debug/Debug.module.css b/components/Debug/Debug.module.css index 011e587..de1e821 100644 --- a/components/Debug/Debug.module.css +++ b/components/Debug/Debug.module.css @@ -1,13 +1,13 @@ .debug { - background-color: #cdcdcd; - padding: 10px; + background-color: #cdcdcd; + padding: 10px; } .header { - margin-bottom: 10px; - text-align: center; + margin-bottom: 10px; + text-align: center; } .debug > select { - margin-bottom: 10px; + margin-bottom: 10px; } diff --git a/components/Debug/Debug.tsx b/components/Debug/Debug.tsx index 93ced71..ac06457 100644 --- a/components/Debug/Debug.tsx +++ b/components/Debug/Debug.tsx @@ -7,30 +7,41 @@ export const Debug = () => { const eveData = React.useContext(EveDataContext); const snapshot = React.useContext(ShipSnapshotContext); - const [tab, setTab] = React.useState<"JSON" | "Ship" | "Char" | "Structure" | "Target" | { Item?: number; Charge?: number }>("Ship"); + const [tab, setTab] = React.useState< + "JSON" | "Ship" | "Char" | "Structure" | "Target" | { Item?: number; Charge?: number } + >("Ship"); - const items = snapshot?.items?.map((item, index) => { return { item, index }; }).sort((a, b) => a.item.flag - b.item.flag) ?? []; + const items = + snapshot?.items + ?.map((item, index) => { + return { item, index }; + }) + .sort((a, b) => a.item.flag - b.item.flag) ?? []; - return <> -
-
EVEShip.fit debugger
+ return ( + <> +
+
EVEShip.fit debugger
- + - {tab === "JSON" && 
{JSON.stringify(snapshot.currentFit, null, 2)}
} - {tab !== "JSON" && } -
- -} + {tab === "JSON" && 
{JSON.stringify(snapshot.currentFit, null, 2)}
} + {tab !== "JSON" && } +
+ + ); +}; diff --git a/components/Debug/index.ts b/components/Debug/index.ts index 4995a53..776c72a 100644 --- a/components/Debug/index.ts +++ b/components/Debug/index.ts @@ -1 +1 @@ -export { Debug } from './Debug'; +export { Debug } from "./Debug"; diff --git a/components/LocationHash/LocationHash.tsx b/components/LocationHash/LocationHash.tsx index 9400110..bd36758 100644 --- a/components/LocationHash/LocationHash.tsx +++ b/components/LocationHash/LocationHash.tsx @@ -53,4 +53,4 @@ export const LocationHash = () => { } return null; -} +}; diff --git a/components/LocationHash/index.ts b/components/LocationHash/index.ts index 8055959..3162c19 100644 --- a/components/LocationHash/index.ts +++ b/components/LocationHash/index.ts @@ -1 +1 @@ -export { LocationHash } from './LocationHash'; +export { LocationHash } from "./LocationHash"; diff --git a/package.json b/package.json index 52541a2..a319fda 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "scripts": { "build": "next build", "dev": "next dev", - "lint": "next lint" + "format": "prettier -w app components", + "lint": "next lint && prettier -c app components" }, "repository": { "type": "git",