The Evolution of MapMaster
What began as a project for an online React course at Malmö University in Sweden, originally started as a simple interactive map. Initially, the idea was to create a map where users could click on countries to display information about them. However, the project quickly evolved. The simple map transformed into MapMaster, a flag-guessing game that challenges players to identify countries based on their flags.
Introducing MapMaster 🌍
Welcome to MapMaster, a geography-based flag guessing game that offers both fun and educational insights into the world of flags and countries. By integrating the restcountries.com API and the Google Geocoding API, the game became an interactive learning experience.
The Game’s Genesis
The idea of MapMaster started as a simple assignment but quickly evolved into a full-fledged game. The goal was to use technology not only to create something entertaining but also educational. By combining the Rest Countries API, which provides information about countries and their flags, with Google’s Geocoding API for accurate map interactions, MapMaster became a reality. It’s a perfect blend of learning and playing, where players test their knowledge of world flags in a fun and interactive way.
Adding a Competitive Edge with a Leaderboard
To enhance the game’s engagement, I added a leaderboard, hosted in Supabase. This addition not only brought a competitive element but also turned MapMaster into a platform where geography enthusiasts can compete and learn.
How to Play
The gameplay is simple yet captivating:
- Players are presented with a flag and have to guess the corresponding country.
- Points are scored for correct guesses.
- The game is time-bound, adding an element of excitement.
- Clues are available, but using them deducts points, adding a strategic layer to the game.
Project Structure
Here’s a glimpse into the structure of MapMaster:
.
├── LICENSE
├── README.md
├── index.html
├── package.json
├── public
│ └── favicon.svg
├── src
│ ├── App.tsx
│ ├── api
│ │ ├── CountriesApi.ts
│ │ └── GeocodeApi.ts
│ ├── assets
│ │ ├── fonts
│ │ │ ├── RocherColorGX.woff
│ │ │ └── RocherColorGX.woff2
│ │ └── scss
│ │ ├── _base.scss
│ │ ├── _font.scss
│ │ ├── _variables.scss
│ │ ├── components
│ │ │ ├── buttons.scss
│ │ │ ├── clickwindow.scss
│ │ │ ├── confetti.scss
│ │ │ ├── flag.scss
│ │ │ ├── gamemode.scss
│ │ │ ├── gameover.scss
│ │ │ ├── leaderboard.scss
│ │ │ ├── leaderboardentry.scss
│ │ │ ├── overlays.scss
│ │ │ └── roundwin.scss
│ │ └── main.scss
│ ├── clients
│ │ └── SupaBaseClient.ts
│ ├── components
│ │ ├── ClickWindow.tsx
│ │ ├── ConfettiCanon.tsx
│ │ ├── Game.tsx
│ │ ├── GameInitializer.ts
│ │ ├── GameUtils.ts
│ │ ├── Leaderboard.tsx
│ │ ├── Map.tsx
│ │ ├── Notification.tsx
│ │ ├── overlays
│ │ │ ├── ClueOverlay.tsx
│ │ │ ├── FlagOverlay.tsx
│ │ │ ├── GameModeSelectionOverlay.tsx
│ │ │ ├── GameOverOverlay.tsx
│ │ │ ├── InstructionsOverlay.tsx
│ │ │ ├── LeaderboardEntryOverlay.tsx
│ │ │ ├── PointsOverlay.tsx
│ │ │ ├── RoundWinOverlay.tsx
│ │ │ └── TimerOverlay.tsx
│ │ └── stages
│ │ ├── GameModeSelectionStage.tsx
│ │ ├── GameOverStage.tsx
│ │ ├── InstructionsStage.tsx
│ │ ├── RoundWonStage.tsx
│ │ └── RunningStage.tsx
│ ├── constants
│ │ ├── InitialGameState.ts
│ │ ├── constants.ts
│ │ └── overlayVariants.ts
│ ├── contexts
│ │ ├── GameContext.tsx
│ │ └── NotificationContext.tsx
│ ├── hooks
│ │ ├── useAntiCheat.ts
│ │ ├── useCountdown.ts
│ │ ├── useGameManager.ts
│ │ ├── useMapInteraction.ts
│ │ ├── useNotification.ts
│ │ ├── usePreventPinchZoom.ts
│ │ └── useTimer.ts
│ ├── interfaces
│ │ ├── Country.ts
│ │ ├── GameState.ts
│ │ ├── HighScore.ts
│ │ └── INotification.ts
│ ├── main.tsx
│ ├── reducers
│ │ └── GameReducer.ts
│ ├── services
│ │ ├── CountryService.ts
│ │ └── HighScoreService.ts
│ └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock
This structure shows the organization and modern tech stack used to build MapMaster. It’s all about creating an engaging, efficient, and scalable game.
Code Quality and Standards
Developing MapMaster, I emphasized code quality by using ESLint with Airbnb’s style guide. This ensures clean, maintainable code, aligning with best practices in JavaScript development. It’s about crafting code that’s as engaging and intuitive as the game itself.
Conclusion
MapMaster, at its core, is a game that combines fun with a bit of learning. It stands as an example of how creative coding can transform a simple idea into an engaging and enjoyable experience. The game is open source, and I welcome everyone to explore, play, and perhaps contribute to its evolution.
Discover the game on GitHub and enjoy the challenge at https://map.christianek.io. Let’s explore the world of flags together!