A real-time multiplayer social deduction game inspired by Wolvesville, built with Next.js and Socket.IO. This is the client-side application.
Next Wolvesville is a modern web implementation of the classic Werewolves game. Players are assigned secret roles and must work together (or against each other) to achieve their team's victory conditions. The game features real-time communication, multiple roles with unique abilities, and an immersive day/night cycle.
Note: This repository contains the frontend/client-side of the application. The backend server handles game logic, WebSocket connections, and player management.
- 🌐 Real-time Multiplayer - Powered by WebSockets for instant gameplay
- 🎭 Multiple Roles - Classic Werewolf, Seer, Doctor, Jailer, and more
- 💬 In-game Chat - General, Wolves, and Jail chat rooms
- 🤖 AI Players - CPU-controlled players to fill empty slots
- 🌍 Internationalization - English and French language support
- 🎨 Custom Avatars - Personalize your character with DiceBear avatars
- 🎵 Audio Effects - Immersive sound design with volume controls
- 📱 Responsive Design - Play on desktop, tablet, or mobile
- 🌓 Day/Night Cycle - Dynamic gameplay phases with voting and actions
- Node.js 18.x or higher
- npm or yarn package manager
- Clone the repository
git clone https://github.com/DylanP97/next-wolvesville.git
cd next-wolvesville- Install dependencies
npm install
# or
yarn install- Set up environment variables
# Create a .env file in the root directory
# Add your backend server URL
NEXT_PUBLIC_SERVER_URL=your_backend_server_url-
Important: Make sure your backend server is running before starting the client
-
Run the development server
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser
Important: This is only the client application. You need to have the backend server running for the game to function properly. First-time server connection may take up to 50 seconds.
- Quick Game - Solo play with random role assignment
- Create Room - Set up a custom game with specific roles and player count
- Join Room - Browse and join existing lobbies
- 🌑 Commencement Night - Players receive their roles
- ☀️ Daytime - Players discuss and share information
- ✉️ Vote Time - Village votes to eliminate a player
- 🌒 Nighttime - Special roles perform their abilities
- 🌒 Night Results - Night actions are revealed
The game features various roles including:
- 🐺 Werewolves - Eliminate villagers at night
- 👁️ Seer - Discovers player identities
- 👩⚕️ Doctor/Witch - Protects or heals players
- 👮♂️ Jailer - Arrests and interrogates players
- 🔫 Gunner - Can shoot during the day
- 🤡 Fool - Wins if voted out by the village
- And many more...
- Next.js 14 - React framework with App Router
- React 18 - UI library
- Tailwind CSS - Utility-first CSS framework
- NextUI - Beautiful React component library
- Lucide React - Icon library
- React Lottie - Animation library
- React Confetti - Celebration effects
- Socket.IO Client - Real-time bidirectional communication with the server
- WebSocket - Real-time connection to backend server
Backend Repository: The server-side application is hosted separately and handles game logic, room management, and WebSocket connections.
- i18next - Translation framework
- react-i18next - React bindings for i18next
- DiceBear - Avatar generation library
- TypeScript - Type safety
- ESLint - Code linting
- PostCSS - CSS processing
next-wolvesville/
├── app/
│ ├── components/ # Reusable UI components
│ ├── connexion/ # Authentication pages
│ ├── create-room/ # Room creation flow
│ ├── game/ # Game interface and logic
│ ├── general-btns/ # Common button components
│ ├── homepage/ # Home page components
│ ├── join-room/ # Room joining interface
│ ├── lib/ # Utility functions
│ ├── profile/ # User profile pages
│ ├── providers/ # React context providers
│ ├── layout.js # Root layout
│ ├── page.js # Home page
│ └── globals.css # Global styles
├── public/
│ ├── animations/ # Lottie animation files
│ ├── audio/ # Sound effects
│ ├── game/ # Game assets
│ └── locals.json # Translation files
├── package.json
├── next.config.js
├── tailwind.config.js
└── README.md
- Customize game settings
- Select specific roles for the game
- Choose between real players and AI
- Set preferred roles for players
- General Chat - All players communicate
- Wolves Chat - Night discussion for werewolves
- Jail Chat - Private conversation between jailer and prisoner
- Body, head, clothes, and accessories
- Multiple color options
- Facial features customization
- Persistent across sessions
- Full English and French translations
- Automatic language detection
- Easy language switching
- Localized game messages and UI
Create a .env file in the root directory:
# Backend server URL
NEXT_PUBLIC_SERVER_URL=http://localhost:3001
# or your deployed backend URLNote: The client connects to a separate backend server via Socket.IO. Make sure the backend is accessible at the URL you configure.
This application uses Socket.IO Client to connect to the backend server. The connection is established automatically when the app loads, connecting to the server URL specified in your environment variables.
# Development
npm run dev # Start development server
# Production
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLint- Some role actions need fixes
- Enhanced role selection for all players (currently only room creator)
- Improved matchmaking system
- Additional game roles
- Enhanced AI player behavior
- Tournament mode
- Player statistics and rankings
- Spectator mode
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is a personal implementation inspired by the game Wolvesville. Please check Wolvesville's official website for the original game.
DylanP97
- GitHub: @DylanP97
- Portfolio: d97-portfolio.vercel.app
- Inspired by Wolvesville
- Thanks to all contributors and players
- Built with modern web technologies
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue if your problem isn't already listed
- For general questions, feel free to reach out
Note: For the best experience, play in full-screen mode! 🎮
Made with ❤️ by DylanP97