Liquid Glass Minesweeper

A dazzling challenge with global stakes.

Comment

Inspiration

The inspiration for "Liquid Glass Minesweeper" stemmed from a desire to reimagine a classic game with a modern, visually appealing twist and enhanced gameplay mechanics. We wanted to move beyond the traditional grid and introduce elements that would make the experience more engaging and competitive. The "liquid glass" aesthetic was chosen to give the game a sleek, futuristic, and immersive feel, making each interaction feel fluid and responsive. We were also inspired by the idea of global competition, leading to the integration of country-based statistics and leaderboards.

What it does

Liquid Glass Minesweeper is an advanced version of the classic Minesweeper game, featuring a dynamic level progression system and global country-based leaderboards. Players navigate through increasingly challenging levels, each with a larger board and more mines. The game tracks individual performance, including score, time elapsed, and win streaks. A unique feature is the integration with Supabase, which allows the game to detect the user's country and contribute their statistics (total mines cleared, best score, highest level achieved) to a global leaderboard. This fosters a sense of community and friendly competition among players worldwide. The "liquid glass" UI provides a distinct visual experience, with transparent, blurred elements and subtle animations.

How we built it

The project was built using React and TypeScript for the frontend, providing a robust and scalable foundation. Tailwind CSS was used for rapid and consistent styling, enabling the creation of the "liquid glass" aesthetic with ease. Lucide React provided a comprehensive set of icons, maintaining a cohesive visual language without introducing additional UI libraries.

The core game logic, including board generation, mine placement, cell revelation, and win condition checks, was implemented in src/utils/gameLogic.ts. State management for the game was handled using React's useState and useCallback hooks in src/App.tsx to ensure efficient re-renders and a smooth user experience.

For global statistics and leaderboards, we integrated Supabase. This involved:

  1. Setting up a country_stats table in Supabase with columns for country_code, country_name, total_mines_cleared, games_played, highest_level, and best_score.
  2. Implementing Row Level Security (RLS) policies to allow public read, insert, and update access to the country_stats table, as defined in supabase/migrations/20250613155557_aged_canyon.sql.
  3. Creating a Supabase RPC function update_country_stats to handle atomic updates and inserts for country statistics, preventing race conditions and ensuring data integrity.
  4. Developing utility functions in src/utils/supabaseStats.ts to interact with the Supabase client for updating and fetching country data.
  5. Modifying src/utils/countryDetection.ts to prioritize Supabase for data persistence and retrieval, falling back to local storage if Supabase is not configured or accessible.
  6. Integrating the country detection and leaderboard updates into the main App.tsx component, ensuring that user stats are updated upon winning a game and the leaderboard is refreshed.

The UI components, such as GameBoard, GameStats, GameControls, Leaderboard, and VictoryModal, were developed as modular React components, promoting reusability and maintainability. Radix UI primitives were used for accessible and unstyled components like Dialog and Progress, which were then styled with Tailwind CSS to match the "liquid glass" theme.

Challenges we ran into

One of the primary challenges was implementing the recursive cell revelation logic in revealCell within src/utils/gameLogic.ts to efficiently clear empty areas of the board. Ensuring that the game state updates correctly and reactively without performance bottlenecks was also a key consideration.

Integrating Supabase presented its own set of challenges, particularly in handling asynchronous operations and ensuring that local storage served as a reliable fallback when the database was not available. Correctly configuring Row Level Security (RLS) and creating the update_country_stats RPC function in Supabase was crucial for secure and efficient data management. Debugging database interactions and ensuring data consistency across multiple game sessions required careful attention.

Achieving the desired "liquid glass" visual effect with Tailwind CSS required careful layering of bg-white/opacity, backdrop-blur, and border utilities, along with subtle transition and shadow effects. Ensuring responsiveness across various screen sizes for the game board, which can dynamically change dimensions based on the level, also required thoughtful CSS application.

Accomplishments that we're proud of

We are particularly proud of the seamless integration of the global leaderboard powered by Supabase, which adds a competitive and social dimension to the game. The dynamic level progression system, coupled with the score calculation and win streak mechanics, provides a compelling reason for players to keep coming back. The "liquid glass" design, achieved purely with Tailwind CSS and without external UI libraries, stands out as a unique and polished visual identity for the game. The robust game logic, which handles complex Minesweeper rules accurately, is another significant accomplishment.

What we learned

Throughout this project, we gained valuable experience in building a full-stack application with React and Supabase. We deepened our understanding of:

  • Advanced React Hooks: Effectively using useState, useEffect, and useCallback for complex state management and performance optimization.
  • Tailwind CSS for advanced UI: Pushing the boundaries of utility-first CSS to create sophisticated visual effects like the "liquid glass" theme.
  • Supabase Integration: Implementing database schemas, RLS, and custom RPC functions for secure and efficient data persistence and retrieval in a real-time application context.
  • Asynchronous Programming: Managing async/await patterns for API calls and ensuring graceful fallbacks.
  • Game Development Principles: Applying core game logic concepts to create an engaging and bug-free experience.

What's next for Liquid Glass Minesweeper

For the future of Liquid Glass Minesweeper, we envision several enhancements:

  • User Authentication: Implementing user accounts with Supabase Authentication to allow players to track their personal stats more robustly and compete under unique usernames.
  • Custom Game Modes: Introducing options for custom board sizes, mine densities, or even themed mine types.
  • Achievements System: Adding in-game achievements to reward players for specific milestones or challenging feats.
  • Multiplayer Mode: Exploring the possibility of a real-time multiplayer mode where players can race to clear boards or compete head-to-head.
  • Improved Analytics: Leveraging Supabase's capabilities for more detailed game analytics to understand player behavior and optimize game design.

Built With

Share this project:

Updates