Dev

PTG/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+    "tabWidth": 4
+}

PTG/eslint.config.js

@@ -4,6 +4,7 @@ import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
+import eslintConfigPrettier from "eslint-config-prettier/flat";
 
 export default defineConfig([
   globalIgnores(['dist']),
@@ -19,4 +20,5 @@ export default defineConfig([
       globals: globals.browser,
     },
   },
+  eslintConfigPrettier,
 ])

PTG/package.json

@@ -32,10 +32,12 @@
     "@vitejs/plugin-react": "^6.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.9.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.4",
     "globals": "^17.11.0",
     "jsdom": "^30.0.1",
+    "prettier": "3.9.8",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.67.0",
     "vite": "^8.2.2",

PTG/pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 minimumReleaseAgeExclude:
   - '@tanstack/query-core@5.103.0'
   - '@tanstack/react-query@5.103.0'
+  - prettier@3.9.8

PTG/src/About.css

@@ -0,0 +1,24 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 15vw;
+    min-height: calc(93.5vh - 60px);
+}
+
+.footer-pin {
+    position: relative;
+    bottom: 0;
+    left: 0;
+}
+
+p {
+    text-align: justify;
+    margin-bottom: 1rem;
+}
+
+@media screen and (max-width: 600px) {
+    .container{
+        margin: 1rem;
+    }
+}

PTG/src/About.tsx

@@ -1,22 +1,42 @@
-import Header from "./Header.tsx"
+import Header from "./Header.tsx";
+import Footer from "./Footer.tsx";
+import "./About.css";
 
-
-export default function About(){
-    return(
+export default function About() {
+    return (
         <>
             <Header />
-            <h1>About</h1>
-            <p>
-                This is the result of a group project in IT2810 at NTNU.
-                Yes, we are aware that each Pokédex takes in National Dex as well, so
-                it is possible getting, e.g. Charizard when picking HG/SS.
-                This results in end game Pokémon showing up in the Team Generator.
-                Please be aware of this when generating a team.
-            </p>
-            <p>
-                This website is made by students, and is made for training reasons,
-                also for lazy people not wanting to pick a team themselves.
-            </p>
+            <div className="container">
+                <h1>About</h1>
+                <p>
+                    This is the result of a group project in IT2810 at the
+                    Norwegian University of Science and Technology (NTNU) by
+                    Team-33. Yes, we are aware that each Pokédex takes in
+                    National Dex as well, so it is possible getting, e.g.
+                    Charizard when picking HG/SS. This results in end game
+                    Pokémon showing up in the Team Generator. Please be aware of
+                    this when generating a team.
+                </p>
+                <p>
+                    To randomly generate your team simply click the "Generate 
+                    Team" button. If you would like to keep a pokémon in the 
+                    team click the star icon. Balance your team by choosing 
+                    from different types and/or games. This can be done by using 
+                    the type and game filters at the top of the home page in combination 
+                    with the generate button.
+                </p>
+                <p>
+                    This website is made by students, and is made for training
+                    reasons, also for lazy people not wanting to pick a team
+                    themselves. Contact information can be found at the footer
+                    of the home page and this page. Any feedback will be deeply
+                    appreciated, as it will be used as a tool to sharpen our
+                    skills and improve our work in the second project.
+                </p>
+            </div>
+            <div className="footer-pin">
+                <Footer />
+            </div>
         </>
     );
-}
+}

PTG/src/App.css

@@ -0,0 +1,9 @@
+.content {
+    min-height: calc(100vh - 60px);
+}
+
+.footer-pin {
+    position: relative;
+    bottom: 0;
+    left: 0;
+}

PTG/src/App.tsx

@@ -1,45 +1,66 @@
 import { useEffect, useState } from "react";
-import Header from "./Header.tsx"
-import Footer from "./Footer.tsx"
+import Header from "./Header.tsx";
+import Footer from "./Footer.tsx";
+import "./App.css";
 import ChoosePokemon from "./ChoosePokemon.tsx";
 import Team from "./Team.tsx";
 import PokemonGrid from "./PokemonGrid.tsx";
 import { loadStoredFilters, saveStoredFilters } from "./pokemonFilters.ts";
 import { usePokemonTeam } from "./usePokemonTeam.ts";
 
-export default function App(){
-	const [selectedGame, setSelectedGame] = useState(() => loadStoredFilters().selectedGame);
-	const [selectedType, setSelectedType] = useState(() => loadStoredFilters().selectedType);
-	const [selectedName, setSelectedName] = useState(() => loadStoredFilters().selectedName);
+export default function App() {
+    const [selectedGame, setSelectedGame] = useState(
+        () => loadStoredFilters().selectedGame,
+    );
+    const [selectedType, setSelectedType] = useState(
+        () => loadStoredFilters().selectedType,
+    );
+    const [selectedName, setSelectedName] = useState(
+        () => loadStoredFilters().selectedName,
+    );
 
-	useEffect(() => {
-		saveStoredFilters({ selectedGame, selectedType, selectedName });
-	}, [selectedGame, selectedType, selectedName]);
+    useEffect(() => {
+        saveStoredFilters({ selectedGame, selectedType, selectedName });
+    }, [selectedGame, selectedType, selectedName]);
 
-	const { team, pokemonById, typeMap, allFavourited, generateTeam, toggleFavourite } = usePokemonTeam(selectedGame, selectedType, selectedName);
+    const {
+        team,
+        pokemonById,
+        typeMap,
+        allFavourited,
+        generateTeam,
+        toggleFavourite,
+    } = usePokemonTeam(selectedGame, selectedType, selectedName);
 
-	return(
-		<div>
-			<Header />
-			<ChoosePokemon
-				selectedGame={selectedGame}
-				selectedType={selectedType}
-				selectedName={selectedName}
-				onGameChange={setSelectedGame}
-				onTypeChange={setSelectedType}
-				onNameChange={setSelectedName}
-			/>
-			<Team
-				team={team}
-				pokemonById={pokemonById}
-				typeMap={typeMap}
-				allFavourited={allFavourited}
-				generateTeam={generateTeam}
-				toggleFavourite={toggleFavourite}
-			/>
-			<PokemonGrid selectedGame={selectedGame} selectedType={selectedType} selectedName={selectedName} />
-			<Footer/>
-		</div>
-
-	);
+    return (
+        <div>
+            <div className="content">
+                <Header />
+                <ChoosePokemon
+                    selectedGame={selectedGame}
+                    selectedType={selectedType}
+                    selectedName={selectedName}
+                    onGameChange={setSelectedGame}
+                    onTypeChange={setSelectedType}
+                    onNameChange={setSelectedName}
+                />
+                <Team
+                    team={team}
+                    pokemonById={pokemonById}
+                    typeMap={typeMap}
+                    allFavourited={allFavourited}
+                    generateTeam={generateTeam}
+                    toggleFavourite={toggleFavourite}
+                />
+                <PokemonGrid
+                    selectedGame={selectedGame}
+                    selectedType={selectedType}
+                    selectedName={selectedName}
+                />
+            </div>
+            <div className="footer-pin">
+                <Footer />
+            </div>
+        </div>
+    );
 }

PTG/src/ChoosePokemon.css

@@ -1,12 +1,29 @@
 .chooseType {
-	field-sizing: content;
-	width: fit-content;
-	max-width: 100%;
+    field-sizing: content;
+    width: fit-content;
+    max-width: 100%;
+    margin-left: 1rem;
+
+    min-height: 1.5rem;
+    border-radius: 0;
+    height: 20px;
 }
 
 .chooseName {
-	field-sizing: content;
-	width: fit-content;
-	max-width: 100%;
-	margin-left: 1rem;
-}
+    field-sizing: content;
+    width: fit-content;
+    max-width: 100%;
+    min-width: 50px;
+    margin-left: 1rem;
+    margin-bottom: 5px;
+    height: 20px;
+}
+
+@media screen and (max-width: 600px){
+    .chooseName{
+        margin: 5px;
+    }
+    .chooseType{
+        margin: 5px;
+    }
+}