SNOWCLSTR V1.1.3

SNOWCLSTR: An immersive cyberpunk geo-game where real-world exploration meets a neon-drenched narrative, challenging players to uncover hidden truths in a dystopian future.Geocaching escape room.

Comment

Inspiration

SNOWCLSTR was inspired by the desire to blend the rich, atmospheric world of cyberpunk with interactive, location-based gameplay. The idea was to create a "technoir gumshoe geo-game" that leverages real-world maps, overlaying them with a futuristic, neon-drenched aesthetic. The core concept revolves around players becoming digital detectives, navigating a sprawling urban landscape to uncover encrypted data, solve puzzles, and unravel a complex, conspiratorial narrative. The allure of a world where technology blurs the lines between reality and illusion, combined with the thrill of real-world exploration, fueled the vision for this project.

What it does

SNOWCLSTR immerses players in a neon-drenched futuristic city, leveraging real-world maps with an augmented cyberpunk aesthetic. Players navigate an interactive map to discover locations, complete quests, and collect items. Key features include:

Interactive Map: A custom-styled Mapbox GL map with dynamic markers representing in-game locations.

Location-Based Quests: Players interact with specific locations to advance the narrative, solve puzzles, and uncover secrets.

Inventory System: A robust system for collecting, using, and combining various in-game items.

In-Game Communication: A communication system for interacting with NPCs and receiving missions, complete with video and audio dialogues.

Developer Mode: A comprehensive in-game tool for content creators to manage locations, items, and game documentation in real-time.

Advanced Interactions: Integrates 3D model viewing for artifacts and a hand-tracking-based biometric authentication mini-game.

Dynamic Documentation: A unique system that generates and updates project documentation (like README and changelog) directly from live database content.

How we built it

The application is built as a single-page application using a modern web development stack:

Frontend: Developed with React and TypeScript, leveraging Zustand for efficient state management across various game modules.

Mapping: Mapbox GL JS is used for rendering the interactive 2D map, with custom styling to achieve the cyberpunk aesthetic.

3D Graphics: Three.js is integrated for rendering interactive 3D models within location detail views, enhancing the visual experience of artifacts.

Animations: Framer Motion provides smooth and engaging UI animations and transitions. As well as custom videos and animation.

Backend & Database: Supabase serves as the backend-as-a-service, handling:

Database: Storing game versions, changelog entries, documentation content, and persistent game state.

Storage: Hosting game assets like 3D models, images, and audio/video files.

Styling: Tailwind CSS is used for rapid and consistent UI styling, complemented by a custom cyberpunk color palette and effects defined in index.css.

Icons: Lucide React provides a comprehensive set of vector icons used throughout the application.

Build Tool: Vite is used for fast development and optimized production builds.

External Integrations: An external Netlify-hosted iframe is used for the hand-tracking biometric authentication, communicating with the main application via window.postMessage.

Challenges we ran into

Developing SNOWCLSTR presented several interesting challenges:

Complex State Management: Orchestrating interconnected game states (map, inventory, communication, tutorial, developer mode) across multiple Zustand stores while ensuring data persistence and consistency.

Mapbox Customization: Achieving the desired cyberpunk visual style on the Mapbox map, including custom layers, pulsating effects, and dynamic marker rendering, while maintaining performance.

Three.js Integration: Seamlessly embedding and controlling 3D models within a React component, handling model loading, error states, lighting, and applying real-time visual effects like wireframes.

Cross-Origin Communication: Securely and reliably communicating between the main application and the external hand-tracking iframe, ensuring messages are correctly formatted and processed.

Dynamic Content Generation: Implementing the real-time README and changelog generation from Supabase data, requiring careful data fetching and markdown rendering.

Responsive Design: Adapting the intricate UI, including various panels, modals, and interactive elements, to provide an optimal experience across diverse screen sizes and orientations (mobile, tablet, desktop).

Audio Playback Policies: Navigating browser autoplay restrictions for audio elements (e.g., phone ringing, dialogue audio) to ensure a smooth user experience.

Accomplishments that we're proud of

We are particularly proud of:

Immersive Cyberpunk Aesthetic: Successfully creating a cohesive and engaging cyberpunk atmosphere through a combination of custom visual design, animations, and sound effects. Seamless Integration of Advanced Features: The smooth incorporation of 3D models and the hand-tracking biometric authentication mini-game into the core gameplay loop, adding depth and uniqueness. Real-time Documentation System: A novel feature that allows project documentation and changelogs to be managed and updated directly within the running application, reflecting changes instantly.

Modular and Maintainable Architecture: The use of React, Zustand, and clear component separation has resulted in a codebase that is easy to understand, extend, and debug.

Persistent Game State: Ensuring that player progress, inventory, and discovered locations are saved and restored across sessions, providing a continuous gameplay experience.

What we learned

Through this project, we gained valuable insights and deepened our expertise in:

Advanced Mapbox GL JS Techniques: Mastering custom layer rendering, dynamic marker management, and performance optimization for interactive maps.

Practical Three.js Implementation: Hands-on experience with GLTF model loading, scene setup, lighting, and applying post-processing effects in a web environment.

Zustand for Complex Applications: Effective patterns for structuring and managing global state in a highly interactive and data-driven application.

Supabase as a Full-Stack Solution: Comprehensive understanding of Supabase's capabilities for database management, file storage, and row-level security.

Secure Cross-Domain Communication: Best practices for inter-frame messaging and ensuring data integrity and security.

Robust Debugging Strategies: Developing systematic approaches to identify and resolve issues in complex, multi-layered applications involving external services and advanced browser APIs.

Additional Context SNOWCLSTR is an experimental "technoir gumshoe geo-game" developed by WayLucid. It was built as part of the Bolt.new Hackathon, showcasing the platform's capabilities for rapid development of full-stack web applications. The game's narrative revolves around uncovering encrypted data fragments and secrets related to the mysterious "SNOWCLSTR" project.

What's next for SNOWCLSTR V1.1.3

Working on adding more storyline and truly templatizing it so someone could use it to create and tell their own story.

Built With

Share this project:

Updates