diff --git a/.mailmap b/.mailmap new file mode 100644 index 0000000..c4e2aef --- /dev/null +++ b/.mailmap @@ -0,0 +1,2 @@ +siversm +pederoha diff --git a/project2/package-lock.json b/project2/package-lock.json index 4ab18e5..e93e481 100644 --- a/project2/package-lock.json +++ b/project2/package-lock.json @@ -8,22 +8,24 @@ "name": "project2", "version": "0.0.0", "dependencies": { - "react": "^19.2.8", - "react-dom": "^19.2.8" + "react": "^19.3.0", + "react-dom": "^19.3.0" }, "devDependencies": { "@eslint/js": "^10.0.1", - "@types/node": "^24.13.3", - "@types/react": "^19.2.18", - "@types/react-dom": "^19.2.7", + "@types/node": "^24.19.0", + "@types/react": "^19.3.0", + "@types/react-dom": "^19.3.0", "@vitejs/plugin-react": "^6.1.1", - "eslint": "^10.10.0", + "eslint": "^10.11.0", + "eslint-config-prettier": "^10.1.8", "eslint-plugin-react-hooks": "^7.1.1", - "eslint-plugin-react-refresh": "^0.5.6", + "eslint-plugin-react-refresh": "^0.5.7", "globals": "^17.12.0", - "typescript": "~6.0.2", - "typescript-eslint": "^8.69.0", - "vite": "^8.3.0" + "prettier": "3.9.9", + "typescript": "~6.0.3", + "typescript-eslint": "^8.71.0", + "vite": "^8.3.1" } }, "node_modules/@babel/code-frame": { @@ -1470,6 +1472,22 @@ } } }, + "node_modules/eslint-config-prettier": { + "version": "10.1.8", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz", + "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==", + "dev": true, + "license": "MIT", + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "funding": { + "url": "https://opencollective.com/eslint-config-prettier" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, "node_modules/eslint-plugin-react-hooks": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.1.1.tgz", @@ -2377,6 +2395,22 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.9.9", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.9.tgz", + "integrity": "sha512-Z/CJHIkdujO/OtN7nXUii0Rf3VT5SRuhjBA82Xvu2XhBUgX3nhP67T0LHceBdQLex7OOFGTox+Q5Yg8Jk2Qivg==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/project2/public/Mock_img/001.png b/project2/public/Mock_img/001.png new file mode 100644 index 0000000..ff6d416 Binary files /dev/null and b/project2/public/Mock_img/001.png differ diff --git a/project2/public/Mock_img/002.png b/project2/public/Mock_img/002.png new file mode 100644 index 0000000..bab075e Binary files /dev/null and b/project2/public/Mock_img/002.png differ diff --git a/project2/public/Mock_img/003.png b/project2/public/Mock_img/003.png new file mode 100644 index 0000000..4f9ac7b Binary files /dev/null and b/project2/public/Mock_img/003.png differ diff --git a/project2/public/Mock_img/004.png b/project2/public/Mock_img/004.png new file mode 100644 index 0000000..6b91d79 Binary files /dev/null and b/project2/public/Mock_img/004.png differ diff --git a/project2/public/Mock_img/005.png b/project2/public/Mock_img/005.png new file mode 100644 index 0000000..8bf5151 Binary files /dev/null and b/project2/public/Mock_img/005.png differ diff --git a/project2/public/Mock_img/006.png b/project2/public/Mock_img/006.png new file mode 100644 index 0000000..4c4fb91 Binary files /dev/null and b/project2/public/Mock_img/006.png differ diff --git a/project2/public/Mock_img/007.png b/project2/public/Mock_img/007.png new file mode 100644 index 0000000..299b74d Binary files /dev/null and b/project2/public/Mock_img/007.png differ diff --git a/project2/public/Mock_img/008.png b/project2/public/Mock_img/008.png new file mode 100644 index 0000000..88d620c Binary files /dev/null and b/project2/public/Mock_img/008.png differ diff --git a/project2/public/Mock_img/009.png b/project2/public/Mock_img/009.png new file mode 100644 index 0000000..7af9de8 Binary files /dev/null and b/project2/public/Mock_img/009.png differ diff --git a/project2/public/Mock_img/010.png b/project2/public/Mock_img/010.png new file mode 100644 index 0000000..b9a9b71 Binary files /dev/null and b/project2/public/Mock_img/010.png differ diff --git a/project2/public/Mock_img/011.png b/project2/public/Mock_img/011.png new file mode 100644 index 0000000..2294193 Binary files /dev/null and b/project2/public/Mock_img/011.png differ diff --git a/project2/public/Mock_img/012.png b/project2/public/Mock_img/012.png new file mode 100644 index 0000000..ea0dfea Binary files /dev/null and b/project2/public/Mock_img/012.png differ diff --git a/project2/src/App.tsx b/project2/src/App.tsx index 7612d16..daf9d5d 100644 --- a/project2/src/App.tsx +++ b/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 
Hello World!
; + return ( + <> +
+

PokeDOX

+ +
+
+
    + {mockeMons.map((pokemon) => ( +
  • +
    + {pokemon.name} +
    +

    {pokemon.name}

    + #{String(pokemon.id).padStart(4, '0')} +
    • + ))} +
+
+
+ Doxing all your favourite pokemon since 2026 +
+ + ); } export default App; diff --git a/project2/src/index.css b/project2/src/index.css index 444843f..7fcd5e8 100644 --- a/project2/src/index.css +++ b/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); +} diff --git a/project2/src/types/pokemon.ts b/project2/src/types/pokemon.ts new file mode 100644 index 0000000..2830a17 --- /dev/null +++ b/project2/src/types/pokemon.ts @@ -0,0 +1,23 @@ +export interface Ability { + name: string; + description: string; + short_description: string; +} + +export interface Type { + name: string; +} + +export interface Pokemon { + id: number; + name: string; + abilities: Array; + types: Array; + + attack: number; + defence: number; + special_attack: number; + special_defence: number; + speed: number; + hp: number; +}