PVP Wordle

A multiplayer Player vs Player Wordle game where players compete in real-time to guess words.

Features

• Real-time multiplayer gameplay
• Create and join game rooms with unique codes
• Public rooms displayed in lobby and private rooms with invitation codes
• Turn-based guessing with feedback for correct letters and positions
• WebRTC for peer-to-peer communication
• Automatic deployment with ngrok for backend connectivity

Project Structure

• frontend/: Client-side code (HTML, CSS, JavaScript)
• backend/: Server-side code (Node.js, Socket.io)
• docs/: Generated output for GitHub Pages deployment
• .notes/: Project documentation and planning
• deploy.js: Automated deployment script

Prerequisites

• Node.js (v14 or higher)
• npm (v6 or higher)
• ngrok installed and configured with an auth token

Setup and Installation

1. Clone the repository
2. Install dependencies:

   npm install
   npm run setup
   

3. Configure ngrok:
   • Create a free account at ngrok.com
   • Install ngrok CLI from ngrok.com/download
   • Add your auth token: ngrok config add-authtoken YOUR_TOKEN

Local Development

1. Start the backend server:

   npm run dev:server
   

2. Start the frontend development server:

   npm run dev:client
   

3. Access the game at http://localhost:8080

Deployment

Automated Deployment (Recommended)

The easiest way to deploy the game is using our automated deployment script:

npm run deploy

This script will:

1. Check if port 3000 is available for the backend server
2. Verify ngrok installation and configuration
3. Start the backend server
4. Launch ngrok and create a public URL for your backend
5. Update the frontend code with the ngrok URL
6. Deploy the frontend to GitHub Pages (if configured)
7. Start a local frontend server if GitHub Pages is not configured
8. Output the URLs you can share with friends

The script will keep running to maintain the ngrok tunnel. Press Ctrl+C to stop when you're done playing.

Manual Deployment

GitHub Pages (Frontend)

1. Deploy the frontend to GitHub Pages:

   npm run deploy:github
   

2. Enable GitHub Pages in your repository settings, set the source to the /docs folder.

3. Your frontend will be available at https://yourusername.github.io/pvp-wordle/

ngrok (Backend)

1. Start the backend server:

   npm run start:server
   

2. In a separate terminal, start ngrok:

   npm run start:ngrok
   

3. Note the ngrok URL displayed (e.g., https://abc123.ngrok-free.app). This is your backend URL.

4. Manually update the BACKEND_URL in frontend/script.js and redeploy.

Game Instructions

1. When you launch the game, you can either create a new room or join an existing one.
2. If creating a room, you'll get a unique room code to share with your opponent.
3. When both players join, the game will begin with a countdown.
4. Take turns guessing 5-letter words. After each guess, you'll see feedback with colored tiles:
   • Green: Correct letter in correct position
   • Yellow: Correct letter in wrong position
   • Gray: Letter not in the word
5. The first player to guess the word correctly wins the game!

Troubleshooting

• Port 3000 Already in Use: If the deploy script fails with port 3000 unavailable, try:

  • Stop any existing node processes using npx kill-port 3000
  • Check for processes using port 3000 in Task Manager/Activity Monitor

• ngrok Issues: If ngrok fails to start:

  • Verify your auth token is configured correctly
  • Check if your ngrok session limit has been reached
  • Try restarting ngrok manually

License

MIT