Building a Sailing Education Game: Racing Mark Guessing Game

For sailors racing in the Solent, the busy stretch of water between mainland England and the Isle of Wight, knowing the racing marks is essential. We built an interactive game to make learning these marks engaging and effective.

The Challenge

The Solent is one of the busiest sailing areas in the UK, with dozens of racing marks spread across the waterway. Sailors need to know not just where these marks are, but their names, colors, and geographical relationships to one another.

Traditional learning methods involve studying charts and printed mark lists. We wanted to create something more interactive and fun—a game that would make learning these marks feel less like studying and more like play.

Introducing the Racing Mark Guessing Game

The Racing Mark Guessing Game is a React-based web application that presents sailors with an interactive map and challenges them to identify highlighted racing marks using context clues and geographical knowledge.

Core Features

Progressive Difficulty Levels

• Beginner: Common marks that every local sailor knows
• Intermediate: Less frequently used marks
• Advanced: Obscure marks that even experienced racers might struggle with

Time-Based Scoring Players race against the clock, earning bonus points for quick correct answers and building streak multipliers for consecutive successes.

Interactive Mapping Built on Leaflet with OpenSeaMap nautical chart layers, the game provides the same visual context sailors would see on real navigation charts. Context marks are shown to help players triangulate positions and identify the target mark.

Comprehensive Statistics After each game, players receive detailed statistics and a grade based on their performance, encouraging improvement and mastery.

Technical Implementation

Frontend Stack

We chose a modern, performant stack:

• React 19 for component architecture and state management
• TypeScript for type safety across the application
• Leaflet & React-Leaflet for interactive mapping
• Vite for fast development and optimized builds
• Tailwind CSS for responsive styling

Data Architecture

Racing marks are stored as GPX data with rich metadata:

• Geographical coordinates (latitude/longitude)
• Symbol information (mark colors: Red, Green, Yellow, etc.)
• Descriptions and sponsor information
• Difficulty classifications for question generation

The gpxParser.ts module processes this data and provides utilities for geographical calculations, while gameLogic.ts handles question generation, scoring, and statistics.

Game Logic

The core game controller manages:

• Question Generation: Randomly selecting marks based on difficulty level while avoiding repetition
• Timer Management: Countdown logic with time bonuses for quick answers
• Scoring System: Base points, time bonuses, and streak multipliers
• Statistics Tracking: Comprehensive game analytics and grading

Deployment Strategy

We deployed to Cloudflare Workers for several key advantages:

• Global CDN: Fast load times for users anywhere
• Edge Computing: Minimal latency for game interactions
• SPA Routing: Client-side navigation without server round-trips
• Cost Efficiency: Free tier handles substantial traffic

Development Best Practices

Testing Strategy

We implemented comprehensive testing with:

• Vitest for fast test execution
• React Testing Library for component testing
• Happy DOM for lightweight DOM simulation
• Mock setup for browser APIs that aren’t available in Node

Tests cover both utility functions and React components, ensuring reliability across the application.

Type Safety

TypeScript definitions ensure:

• Mark data structure consistency
• Game state type safety
• Props validation across components
• Compile-time error catching

Code Quality

The project maintains quality through:

• ESLint with React-specific rules
• Prettier for consistent formatting
• Automated CI pipeline (pnpm ci) running format checks, linting, tests, and builds

User Experience Considerations

Educational Value

The game isn’t just entertaining, it’s genuinely educational:

• Contextual Learning: Players learn marks in relation to their surroundings
• Spaced Repetition: Mark difficulty ensures appropriate challenge levels
• Immediate Feedback: Correct answers show mark details; wrong answers provide learning opportunities

Mobile Responsiveness

Sailors often access sailing resources on phones or tablets. The game is fully responsive, with touch-optimized map interactions and mobile-friendly UI.

Performance

We optimized for quick load times:

• Lazy loading of map tiles
• Efficient mark data loading
• Optimized bundling with Vite
• Asset chunking for faster initial loads

Lessons Learned

1. Map Libraries Have Complexity

Integrating Leaflet with React required careful management of map lifecycle, especially around component mounting/unmounting and ref handling. React-Leaflet simplified this, but we still needed custom logic for mark highlighting and interaction.

2. Geographical Calculations Matter

Calculating distances between marks and determining which marks should be shown as context required careful use of the Haversine formula and understanding of geographical coordinate systems.

3. Game Balance is Iterative

Finding the right difficulty curve, time limits, and scoring multipliers took testing with real users. What seems easy to developers may be challenging for actual sailors, and vice versa.

4. Niche Applications Have Engaged Users

Targeting a specific community (Solent sailors) created a more focused, valuable product. The niche focus also provides excellent SEO opportunities in the UK sailing community.

SEO and Discoverability

We implemented a comprehensive SEO strategy targeting:

• Core Keywords: “Solent racing marks quiz”, “sailing navigation training”
• Long-tail Keywords: “learn Solent racing marks online”, “yacht racing navigation quiz”
• Structured Data: Schema.org markup for educational games
• Social Sharing: Twitter integration for score sharing

The game’s focused niche makes it easier to rank for specific sailing-related searches while providing genuine value to the community.

Future Enhancements

We’re planning several improvements:

• Learn Mode: Educational content with mark descriptions and sailing context
• Additional Regions: Expand beyond the Solent to other major sailing areas
• Achievement System: Badges and challenges to encourage mastery
• Leaderboards: Competition and social features
• Offline Capability: Service worker for offline practice
• SCRA Integration: Direct links to Solent Cruiser Racing Association resources

Try It Out

The Racing Mark Guessing Game is live and free to use. Whether you’re studying for RYA qualifications, preparing for your first Solent race, or just want to test your local knowledge, give it a try.

The focused, educational nature of the game demonstrates how MVPs can serve specific communities effectively while maintaining high technical quality and user experience standards.

Building niche tools for passionate communities creates opportunities for genuine impact. This project helped sailors learn essential navigation knowledge while teaching us valuable lessons about map integration, game mechanics, and community-focused product development.

Have questions about building educational games or map-based applications? Get in touch—we’d love to discuss your project!