Pokedex Hellas Region - Project 1 Documentation

Alexandros Barbayianis
Oct 2
3 min read

Concept & Intentions

I wanted to merge two things I'm passionate about: Greek geography and Pokemon. Originally, I planned to use the full PokeAPI - when you clicked a region, a random Pokemon would appear. After talking with Craig, he encouraged me to simplify the scope. That's when I pivoted to a more structured approach: what if each of Greece's 13 regions had an associated Pokemon type, with one specific Pokemon assigned to each?

The inspiration came from Pokemon Scarlet/Violet using Spain as the basis for the Paldea region. I thought - why not do the same with Greece? Instead of a traditional Pokedex, I created an interactive map where users discover Pokemon by exploring different Greek regions, with each region's type reflecting something about its character or geography.

Design & Technical Decisions

The layout uses a three-column grid: left panel for Pokemon info, center for the interactive map, and right for the collection tracker and type legend. I went with the Cinzel font for headers to give it that classical Greek aesthetic without being too on-the-nose about it.

For the interactive map, I used p5.js to overlay clickable buttons on a map of Greece. Each region button changes opacity on hover and uses colors matching Pokemon type conventions (fire is orange, water is blue, etc.). Dual-type regions get split-colored buttons. The map itself is a static PNG with the buttons positioned using x/y coordinates.

The data structure is simple JSON - each Pokemon has a name, types, region, and sprite URL pulled from PokeAPI. When you click a region, JavaScript searches the JSON for matching data and displays it in the left panel.

Major Challenges

Positioning the buttons was the biggest pain point. I spent way too long manually adjusting x/y coordinates to align them with the map regions. There's probably a better way to do this with actual SVG regions or image maps, but I committed to the p5.js approach and made it work.

Managing dual-type regions required extra logic - instead of a single type property, some regions have a types array. The code checks for this and renders either a single-colored or split-colored button accordingly. Getting the rounded corners to work on split buttons took some CSS trickery.

JSON data loading threw async issues initially. The p5.js setup() function would run before the fetch completed, so I had to add error handling and console logs to debug the load sequence.

Scoping down was hard but necessary. Craig's advice to simplify saved me from getting stuck on API complexity. The random approach would've been cooler but less achievable.

Lessons Learned & Next Steps

Plan the data structure first. Map out all regions and Pokemon before coding. Sometimes simpler is better, one Pokemon per region is cleaner than random generation.

Next steps:

sound effects and animations
multiple Pokemon per region
type filter buttons
full Pokedex entries with stats
add reset button
add a random myth/god/creature related lore with each pokemon thats discoverd
live discover tracker so when you click a region and find a new pokemon it would update
revisit the random API idea with better planning

Resources & Credits

Starter code and structure:

Craig Protzel's poke-greece-starter-example: https://github.com/craigprotzel/poke-greece-starter-example

References:

Pokemon type colors: https://gist.github.com/apaleslimghost/0d25ec801ca4fc43317bcff298af43c3
PokeAPI for sprites: https://pokeapi.co
CSS Grid documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
Khan Academy HTML/CSS course: https://www.khanacademy.org/computing/computer-programming/html-css
CSS Flexbox guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

AI Usage

I used Claude extensively throughout this project for:

Code generation: p5.js button interaction logic, JSON data fetching

Debugging: When the JSON wouldn't load or buttons wouldn't align, I'd paste my code and describe the problem. Claude helped identify async timing issues and CSS specificity problems.

Typical prompt pattern: "The buttons aren't aligning with the map regions, here's my code [paste code]. How do I fix the positioning?" Claude would explain the coordinate system and suggest adjustments.

What I modified: Almost everything Claude generated needed tweaking. Button sizes were too large, colors didn't match Pokemon type standards. I adjusted all measurements, refined the color scheme, and rewrote parts of the click detection logic to better match my map layout.

How AI helped: Claude accelerated the grunt work - setting up boilerplate, explaining p5.js functions I wasn't familiar with, suggesting CSS properties I didn't know existed. It was like having documentation that understood context.

How AI didn't help: Claude sometimes suggested overly complex solutions when simple ones worked better. For positioning, it initially recommended creating a coordinate mapping system when I just needed manual x/y adjustments. I learned to ignore suggestions that seemed over-engineered for my needs.

My understanding: I can now explain how the p5.js draw loop works, why async fetch needs proper handling, and how CSS Grid differs from Flexbox. I'm not just copying code anymore - I know why each part exists and can modify it independently.