From 0f0cec09bc3421e03350bc7a93aa5fa5707df797 Mon Sep 17 00:00:00 2001 From: Sivert Smedsrud Date: Sat, 3 Oct 2026 08:51:51 +0200 Subject: [PATCH 01/11] "MockMon Search Users are now able to search mockmons and with whitespaces or upper and lowercase Authored: Siversm" --- project2/src/App.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/project2/src/App.tsx b/project2/src/App.tsx index b264960..a5d2efc 100644 --- a/project2/src/App.tsx +++ b/project2/src/App.tsx @@ -1,4 +1,5 @@ -import type { Pokemon, Ability, Type } from '../types/pokemon'; +import type { Pokemon, Ability, Type } from './types/pokemon'; +import { useState } from 'react'; // Mocking a base Abilty. const mockAbility: Ability = { @@ -158,6 +159,14 @@ const mockeMons: Pokemon[] = [ ]; function App() { + + const [searchTerm, setSearchTerm] = useState(''); + const filteredPokemon = mockeMons.filter((pokemon) => /*true betyr behold og false betyr fjern*/ + + pokemon.name.toLocaleLowerCase().includes(searchTerm.trim().toLocaleLowerCase())); + /*trim fjerner whitespace i starten og slutten av stringen PEDER du kan si ifra om du mener dette kan gjøres lettere*/ + + return ( <>
@@ -166,11 +175,13 @@ function App() { type="search" placeholder="Search" aria-label="Search pokemon" + value={searchTerm} + onChange={(e) => setSearchTerm(e.target.value)} >
-
+
    - {mockeMons.map((pokemon) => ( + {filteredPokemon.map((pokemon) => (
  • {pokemon.name} From d433dcab6c4e8ae5c62e41ae62de98011d8f81cc Mon Sep 17 00:00:00 2001 From: Sivert Smedsrud Date: Tue, 6 Oct 2026 11:26:22 +0200 Subject: [PATCH 02/11] "Mockmon Stats Page added Now People can tap the pokemon and see non-styled details about the Mockmon. Authored: Siversm " --- package-lock.json | 6 ++++++ project2/src/App.tsx | 21 ++++++++++++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0d1f440 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "T26-Project-2", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/project2/src/App.tsx b/project2/src/App.tsx index a5d2efc..9fb06f5 100644 --- a/project2/src/App.tsx +++ b/project2/src/App.tsx @@ -161,11 +161,14 @@ const mockeMons: Pokemon[] = [ function App() { const [searchTerm, setSearchTerm] = useState(''); + const [selectedPokemon, setSelectedPokemon] = useState(null); const filteredPokemon = mockeMons.filter((pokemon) => /*true betyr behold og false betyr fjern*/ - pokemon.name.toLocaleLowerCase().includes(searchTerm.trim().toLocaleLowerCase())); /*trim fjerner whitespace i starten og slutten av stringen PEDER du kan si ifra om du mener dette kan gjøres lettere*/ + const handlePokemonClick = (pokemon: Pokemon) => { + setSelectedPokemon(pokemon); + }; return ( <> @@ -180,17 +183,33 @@ function App() { >
    + {selectedPokemon ? ( +
    +

    {selectedPokemon.name}

    +

    #{String(selectedPokemon.id).padStart(4, '0')}

    +

    Attack: {selectedPokemon.attack}

    +

    Defence: {selectedPokemon.defence}

    +

    Special Attack: {selectedPokemon.special_attack}

    +

    Special Defence: {selectedPokemon.special_defence}

    +

    Speed: {selectedPokemon.speed}

    +

    HP: {selectedPokemon.hp}

    + +
    + ) : (
      {filteredPokemon.map((pokemon) => (
    • +
      • ))}
    + )}
    Doxing all your favourite pokemon since 2026 From ea1c4dcb67fc0081986dd60a9d9ff8d904f3ba06 Mon Sep 17 00:00:00 2001 From: Sivert Smedsrud Date: Tue, 6 Oct 2026 11:35:30 +0200 Subject: [PATCH 03/11] "CSS Styling changes for the button Now the button has styling to fit the theme. Authored: Siversm " --- project2/src/App.tsx | 2 +- project2/src/index.css | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/project2/src/App.tsx b/project2/src/App.tsx index 9fb06f5..aa03af9 100644 --- a/project2/src/App.tsx +++ b/project2/src/App.tsx @@ -199,7 +199,7 @@ function App() {
      {filteredPokemon.map((pokemon) => (
    • - -
    - ) : ( -
      - {filteredPokemon.map((pokemon) => ( -
    • - -
      • +
      + {pageInfo && ( + { + setPerPage(n); + setPage(1); + }} + /> + )} + {loading && !pokemons &&

      Loading…

      } +
      + {pokemons.map((pokemon) => ( + { + document.body.style.overflow = 'hidden'; + setSelectedId(p.id); + }} + /> ))} -
    + + + {selectedPokemon && ( + { + document.body.style.overflow = ''; + setSelectedId(null); + }} + /> )}