merge dev into main

.mailmap

@@ -0,0 +1,2 @@
+siversm <siversm@stud.ntnu.no> <sivert04@icloud.com>
+pederoha <pederoha@stud.ntnu.no> <pederhatlen@gmail.com>

project2/src/App.tsx

@@ -1,5 +1,191 @@
+import type { Pokemon, Ability, Type } from '../types/pokemon';
+
+// Mocking a base Abilty.
+const mockAbility: Ability = {
+    name: "Exists",
+    description: "Pokemon exists... idk does some shit, im not a pokemon.",
+    short_description: "IDK lives",
+}
+// Mocking a base Type.
+const mockType: Type = { name: "" }
+
+// Mock data until we have a backend: 12 pokemon with id, name and placeholder url
+const mockeMons: Pokemon[] = [
+    {
+        id: 1,
+        name: 'Bulbasaur',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+    {
+        id: 2,
+        name: 'Ivysaur',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+    {
+        id: 3,
+        name: 'Venusaur',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+    {
+        id: 4,
+        name: 'Charmander',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+    {
+        id: 5,
+        name: 'Charmeleon',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+    {
+        id: 6,
+        name: 'Charizard',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+    {
+        id: 7,
+        name: 'Squirtle',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+    {
+        id: 8,
+        name: 'Wartortle',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+    {
+        id: 9,
+        name: 'Blastoise',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+    {
+        id: 10,
+        name: 'Caterpie',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+    {
+        id: 11,
+        name: 'Metapod',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+    {
+        id: 12,
+        name: 'Butterfree',
+        abilities: [mockAbility],
+        types: [mockType],
+        attack: 67,
+        defence: 67,
+        special_attack: 67,
+        special_defence: 67,
+        speed: 67,
+        hp: 67,
+    },
+];
+
 function App() {
-    return <pre>Hello World!</pre>;
+    return (
+        <>
+            <header>
+                <h1>PokeDOX</h1>
+                <input
+                    type="search"
+                    placeholder="Search"
+                    aria-label="Search pokemon"
+                ></input>
+            </header>
+            <main>
+                <ul className="pokemon-grid">
+                    {mockeMons.map((pokemon) => (
+                        <li key={pokemon.id} className="pokemon-card">
+                            <div className="pokemon-image">
+                                <img src={`/Mock_img/${String(pokemon.id).padStart(3, '0')}.png`} alt={pokemon.name} />
+                            </div>
+                            <h2>{pokemon.name}</h2>
+                            <span>#{String(pokemon.id).padStart(4, '0')}</span>
+                        </li>
+                    ))}
+                </ul>
+            </main>
+            <footer>
+                <span>Doxing all your favourite pokemon since 2026</span>
+            </footer>
+        </>
+    );
 }
 
 export default App;

project2/src/index.css

@@ -1,7 +1,12 @@
 :root {
-    --text: #6b6375;
-    --text-h: #08060d;
+    --text: #08060d;
+    --text-h: #fff;
     --bg: #fff;
+    --accent: #8888ff;
+
+    --card-bg: #f4f4f5;
+    --card-border: #e4e4e7;
+    --image-bg: #fff;
 
     --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
     --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
@@ -27,20 +32,96 @@
         --text: #9ca3af;
         --text-h: #f3f4f6;
         --bg: #16171d;
+        --accent: #444488;
+
+        --card-bg: #161616;
+        --card-border: #2a2a2e;
+        --image-bg: #080808;
     }
 }
 
 #root {
-    width: 1126px;
+    /*width: 1126px;*/
     max-width: 100%;
     margin: 0 auto;
-    text-align: center;
+    /*text-align: center;*/
     min-height: 100svh;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
+
+    display: grid;
+    grid-template-rows: auto 1fr auto;
 }
 
 body {
     margin: 0;
 }
+
+header {
+    display: flex;
+    /*width: 100%;*/
+    color: var(--text-h);
+    background: var(--accent);
+    padding: 0 2rem;
+    align-items: center;
+    justify-content: space-between;
+}
+footer {
+    padding: 1rem 2rem;
+}
+
+input {
+    outline: none;
+    border: none;
+    border-radius: 1rem;
+    padding: 0.5rem 0.75rem;
+    width: 12rem;
+    min-width: 0;
+}
+
+input:focus,
+input:hover {
+    background: var(--bg);
+}
+
+.pokemon-grid {
+    list-style: none;
+    margin: 0;
+    padding: 1.5rem 2rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 14rem);
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.pokemon-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1.75rem 1.75rem 2rem;
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 1.5rem;
+}
+
+.pokemon-image {
+    width: 100%;
+    aspect-ratio: 1;
+    display: grid;
+    place-items: center;
+    background: var(--image-bg);
+    border-radius: 1.25rem;
+}
+
+.pokemon-image img {
+    width: 75%;
+    height: auto;
+    image-rendering: pixelated;
+}
+
+.pokemon-card h2 {
+    margin: 1.25rem 0 0.25rem;
+    font-size: 1.4rem;
+    color: var(--text-h);
+}