# The Merge World – Building a Web3 Strategy Game Platform

> An MMO economic strategy game that allows players to manage their own empire with advanced features like token purchases and an interactive map.

- Author: Daniil Hirchyts
- Published: January 1, 2023
- URL: https://hirchyts-daniil.me/projects/the-merge-world

## Executive Summary

- **Context**: Web3 strategy game platform bridging NFT ownership and gameplay surfaces.
- **My scope**: the web platform, including interactive map + account tooling.
- **Engineering focus**: large-scale visualization (Three.js), responsive UX, and efficient blockchain data retrieval.
- **Stack**: Next.js, TypeScript, TailwindCSS, RainbowKit/Wagmi, Three.js, PlanetScale, Express services.

## Introduction

The Merge World is an interactive MMO economic strategy game built on the L2 blockchain, developed in partnership with Posers NFT. I created a comprehensive web platform that would not only showcase the game's unique features but also provide functional tools for users to manage their in-game assets, view interactive maps, and engage with the broader community. This technical case study outlines the architecture, implementation challenges, and solutions developed for this complex Web3 application.

The Merge World platform needed to effectively communicate the game's concept—a strategy game where players mine resources, build empires, trade, and negotiate with other players to expand their influence. The website serves as both a marketing tool and a functional interface for players to interact with their blockchain assets (lands, buildings, and resources) while preparing for the full game launch.

![Tour of The Merge World website: the land reveal, the biome cards, the interactive map, the team and the leaderboard](https://hirchyts-daniil.me/projects/mergeWorld/mergeWorld.mp4)

## Project Background and Requirements

The Merge World is built as part of the Posers NFT ecosystem, an established collectible project with a dedicated community. The platform needed to bridge the gap between NFT ownership and actual gameplay utility, supporting a vibrant player economy where land ownership, resource management, and building placement are core mechanics.

**Key Requirements:**
- Create a responsive, visually cohesive platform that maintains the game's distinctive pixel art aesthetic
- Implement a fully interactive map system for visualizing the game world and owned territories
- Develop account management tools for NFT holders to track their assets (lands, buildings, resources)
- Integrate Web3 authentication and blockchain transaction capabilities
- Build a community-focused leaderboard to drive engagement
- Support the game's economic model through NFT minting functionality
- Ensure scalability to handle thousands of concurrent users

## Technical Architecture

### Frontend Technologies

The frontend of The Merge World platform was built using a cutting-edge technology stack designed to deliver both performance and visual fidelity. At its core, we implemented **Next.js 13** with the new App Router architecture, providing efficient server-side rendering capabilities while maintaining the interactive nature required for Web3 applications.

**TypeScript** served as our primary development language, enabling type safety and better code organization across the large codebase. For styling, we leveraged the utility-first approach of **TailwindCSS**, which allowed us to maintain the pixel-perfect game aesthetic while ensuring responsive design across all device sizes.

The Web3 integration—a critical aspect of the platform—was implemented using **RainbowKit** paired with **Wagmi**. This combination provided a streamlined wallet connection experience while handling the complexities of blockchain interactions, smart contract calls, and transaction management.

For the interactive map system, we utilized **Three.js** to render thousands of hexagonal cells efficiently, applying custom shaders and optimization techniques to maintain smooth performance even when visualizing the entire game world. **Radix UI** provided the foundation for accessible interface components, ensuring that complex interactions remained intuitive while conforming to the game's distinctive visual style.

### Backend & Infrastructure

The backend architecture was designed with scalability and reliability as primary concerns. We leveraged **Next.js API routes** as the foundation for our serverless backend, enabling seamless integration between frontend and backend code while maintaining performance.

For database management, we implemented **PlanetScale**, a serverless MySQL platform that provided the scalability needed for the growing user base while ensuring data integrity for critical game assets.

Where specialized functionality was required—particularly for blockchain-specific operations and real-time data processing—we deployed dedicated **Express.js** services. These microservices handled intensive tasks such as blockchain indexing, transaction verification, and data aggregation, communicating with the main application through secure API endpoints.

The entire infrastructure was containerized and deployed across multiple environments, ensuring consistent behavior from development through staging to production. This architecture provided the flexibility to scale individual components as needed while maintaining overall system reliability during usage spikes, such as during land minting events.

### Interactive Map Implementation

One of the most technically challenging aspects of the project was developing the interactive world map. This feature needed to visualize the game world with different biomes, elevation levels, and ownership status, while maintaining performance even with thousands of hexagonal tiles.

The map was implemented using Three.js with a custom hexagonal grid system:

```typescript
// Simplified example of the map implementation
const MapLayout = ({hexData}: any) => {
    // State management for map interactions
    const [selectedType, setSelectedType] = useState<'Height' | 'Heat' | 'Moisture'>('Height');
    const [selectedHex, setSelectedHex] = useState<HexProps | null>(null);
    const [colorMode, setColorMode] = useState<'blackAndWhite' | 'multicolour'>('blackAndWhite');

    // Convert hex grid coordinates to screen space
    function axialToScreen({q, r}: { q: number, r: number }, size: number): { x: number, y: number } {
        const x = size * (Math.sqrt(3) * q + Math.sqrt(3) / 2 * r);
        const y = size * (3 / 2 * r);
        return {x, y};
    }

    // Generate the SVG path for a hexagon
    function hexToSvgPath({x, y, z}: { x: number, y: number, z: number }, size: number): string {
        const hexCorner = (i: number) => {
            const angleDeg = 60 * i - 30;
            const angleRad = Math.PI / 180 * angleDeg;
            return [x + size * Math.cos(angleRad), y + size * Math.sin(angleRad)];
        };

        const points = Array.from({length: 6}, (_, i) => hexCorner(i));
        return `M${points.map(p => p.join(',')).join(' L')} Z`;
    }

    // Render using Three.js for performance with large number of cells
    return (
        <Canvas
            orthographic
            camera={{position: [0, 0, 50], zoom: 2, up: [0, 0, 1], near: 0.1, far: 1000}}
        >
            <MapControls minZoom={0.4} maxZoom={3} enableRotate={false}/>
            <Svg
                shapes={hexShapes}
                heights={heights}
                owners={owners}
                hexData={hexData}
            />
        </Canvas>
    );
};
```

This implementation allowed users to:
- Visualize the entire game world with different data overlays (height, temperature, moisture)
- Identify owned territories and district boundaries
- Get detailed information about any land parcel by selecting it
- Switch between different visualization modes for better understanding of terrain features

The map component communicates with our backend API to fetch the latest blockchain data, ensuring that ownership information and land status are always current.

### Account Management and Asset Tracking

The account section was designed to give players a comprehensive view of their game assets:

1. **Land Management:**
Users can view all their owned land parcels, complete with metadata such as biome type, coordinates, and building capacity. Each land parcel is also linked to its blockchain record for verification.

2. **Building and Resource Management:**
The platform tracks "Blueprint Boxes" and "Resource Boxes" that players receive through airdrops or purchases. These assets are essential for gameplay, allowing players to construct buildings and gather resources.

3. **Web3 Authentication:**
Implemented using RainbowKit and Wagmi, the authentication system verifies wallet ownership securely while maintaining a
smooth user experience.

![Users database table listing wallet addresses, roles and visit dates](https://hirchyts-daniil.me/projects/mergeWorld/merge_2.png)

## Visual Design and User Experience

Maintaining the game's distinct pixel art aesthetic was crucial for brand consistency. I implemented custom UI components that honored this visual language while ensuring modern usability.

## Technical Challenges and Solutions

### Challenge 1: Efficient Blockchain Data Retrieval

The platform needed to efficiently fetch and display blockchain data for thousands of NFTs without overwhelming the frontend with excessive API calls or data processing.

**Solution:** I implemented a custom data fetching strategy with pagination and caching.

This approach significantly improved performance by only loading the data needed for the current page view, while providing smooth pagination controls for users to navigate through their complete collection.

### Challenge 2: Three.js Performance with Large Datasets

The map visualization needed to handle thousands of interactive hexagonal cells without performance degradation.

**Solution:** I implemented a custom rendering optimization that only draws cells within the viewport and uses instanced
geometry for similar elements.

This optimization, combined with Level-of-Detail adjustments based on zoom levels, maintained smooth performance even when visualizing the entire game world.

![Account page listing owned lands, with a Taiga parcel expanded to show its attributes](https://hirchyts-daniil.me/projects/mergeWorld/merge_3.png)

## Conclusion

Developing The Merge World platform presented unique challenges at the intersection of Web3 technology, gaming mechanics, and user experience design. By leveraging modern web technologies and implementing custom solutions for blockchain integration, interactive visualization, and performance optimization, I was able to create a platform that not only serves as an effective marketing tool but also provides genuine utility to users.

The project demonstrates how blockchain technology can be integrated into web applications in a user-friendly way, abstracting the complexity while still providing the benefits of decentralized ownership and transactions. The web platform served as the central hub for users to manage their in-game assets and engage with the broader ecosystem.

Key lessons from this project include:
- The importance of performance optimization when dealing with blockchain data
- How custom UI components can maintain brand consistency while ensuring usability
- The value of responsive design for ensuring accessibility across devices
- The critical role of community features in driving engagement for Web3 projects

As blockchain gaming continues to mature, platforms like The Merge World provide valuable examples of how to bridge the gap between traditional web experiences and decentralized technologies.