Skip to content

A modern Nonogram game with singleplayer and multiplayer support, built with React 18+, TypeScript, Vite, and Firebase.

Notifications You must be signed in to change notification settings

d-broder/nonoparty

Repository files navigation

NonoParty

A modern Nonogram game with singleplayer and multiplayer support, built with React 18+, TypeScript, Vite, and Firebase.

🌐 Play now at: nonoparty.vercel.app

🎯 Main Features

  • Singleplayer Mode: Solve classic and super nonogram puzzles individually
  • Multiplayer Mode: Play with friends in real time using private rooms - The main differentiator of NonoParty!
  • Responsive Design: Mobile-first approach with desktop enhancements
  • Modern UI Components: Modular, reusable component system
  • Real-time Synchronization: Firebase-powered multiplayer experience
  • Advanced Controls: Zoom, grid reset, and smart painting modes

🎮 Game Modes

Singleplayer

  • Choose between Classic or Super Nonogram puzzles
  • Solve at your own pace with local state management
  • Clue click system for visual assistance
  • Zoom and grid reset controls

Multiplayer - The NonoParty Experience! 🎉

  • Create or join private rooms with custom room IDs
  • Real-time collaboration with other players
  • Player-specific color system for visual distinction
  • Live synchronization of all game actions
  • Automatic room cleanup and player management

🎯 How to Play

Basic Controls

  • Left Click: Cycles cell states (empty → filled → marked → empty)
  • Paint Mode: Switch between black cells, X marks, and O marks
  • Clue Assistance: Click row/column numbers for visual hints
  • Zoom Controls: Scale the game board for better visibility

Multiplayer Features

  • Room Creation: Generate shareable room links
  • Player Colors: Each player gets a unique color identifier
  • Real-time Updates: See other players' moves instantly
  • Room Management: Automatic cleanup when players leave

🛠️ Technologies Used

Frontend

  • React 18+ with Concurrent Features and modern hooks
  • TypeScript for type safety and developer experience
  • Vite for fast development and optimized builds
  • React Router for client-side routing
  • CSS Modules with container-controlled spacing patterns

Backend/Database

  • Firebase Firestore for real-time multiplayer synchronization
  • Firebase Hosting for production deployment
  • Session Storage for local player state management

Development Tools

  • ESLint with TypeScript rules
  • Feature-based file organization
  • Barrel exports for clean imports
  • Custom hooks for logic separation

🎮 Planned Future Features

  • Competitive ranking and scoring
  • Custom puzzle creator
  • Themes and visual customizations
  • Offline mode with sync

NonoParty - Play Nonograms with Friends! 🎉
Developed with ❤️ using React, TypeScript and Firebase

About

A modern Nonogram game with singleplayer and multiplayer support, built with React 18+, TypeScript, Vite, and Firebase.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages