Skip to content

Build online tic-tac-toe game for two players #223

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
umardarlive wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Build online tic-tac-toe game for two players #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions online-tic-tac-toe/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Dependencies
node_modules/

# Build outputs
dist/
build/
.vercel/

# Environment variables
.env
.env.local
.env.production

# OS files
.DS_Store
Thumbs.db

# IDE
.vscode/
.idea/
*.swp
*.swo

# Logs
*.log
npm-debug.log*
77 changes: 77 additions & 0 deletions online-tic-tac-toe/QUICK_START.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
# ⚡ Quick Start Guide - Get Your Game Live in 10 Minutes

## Step 1: Firebase Setup (5 min)

1. **Create project**: [console.firebase.google.com](https://console.firebase.google.com/) → "Add project"

2. **Enable Database**:
- Build → Realtime Database → Create Database
- Start in **test mode**
- Enable

3. **Set Rules** (in Rules tab):
```json
{
"rules": {
"rooms": {
"$roomId": {
".read": true,
".write": true
}
}
}
}
```
Comment on lines +12 to +24
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Security warning needed for Firebase rules.

The documented rules allow unrestricted read/write access to all rooms. While suitable for quick testing, this is insecure for production and should include a warning. Malicious users could overwrite or delete game state.

Consider adding a note that these are test-only rules, and link to production-ready rules (e.g., validating turn order, player assignments) in the full README.

Suggested addition 
 3. **Set Rules** (in Rules tab):
    ```json
    {
      "rules": {
        "rooms": {
          "$roomId": {
            ".read": true,
            ".write": true
          }
        }
      }
    }
    ```
+   > ⚠️ **Warning**: These rules are for testing only. For production, implement validation rules to prevent cheating and unauthorized modifications.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
3. **Set Rules** (in Rules tab):
```json
{
"rules": {
"rooms": {
"$roomId": {
".read": true,
".write": true
}
}
}
}
```
3. **Set Rules** (in Rules tab):
🤖 Prompt for AI Agents 
In `@online-tic-tac-toe/QUICK_START.md` around lines 12 - 24, Update the README
snippet for the Firebase rules block (the "rules" -> "rooms" -> "$roomId"
example) to include a clear security warning that the provided ".read": true and
".write": true settings are for testing only, and add a link or pointer to
production-ready validation rules (e.g., rules that enforce turn order and
player assignments) in the full README; reference the "rules", "rooms", and
"$roomId" symbols so reviewers can find the exact JSON block to amend.


4. **Get Config**:
- Project Settings (gear icon) → Your apps → Web (`</>`)
- Copy `firebaseConfig`

5. **Update game.js**:
- Replace lines 7-14 with your config

## Step 2: Deploy (3 min)

### Option A: Vercel (Recommended)
```bash
npm i -g vercel
cd online-tic-tac-toe
vercel
```
✅ Done! Copy the URL

### Option B: Netlify
1. Drag folder to [app.netlify.com/drop](https://app.netlify.com/drop)
2. ✅ Done! Copy the URL

### Option C: Local Testing
```bash
python3 -m http.server 8000
# Open http://localhost:8000
```

## Step 3: Play! 🎮

1. Visit your URL
2. Create Game → Share link
3. Friend joins → Play!

---

## Troubleshooting

**"Firebase not configured"**
→ Update `game.js` with your Firebase config

**Opponent can't join**
→ Check Firebase Rules are set correctly

**Not deploying**
→ Make sure you're in the `online-tic-tac-toe` directory

---

**Need help?** See full [README.md](README.md)

**Total time**: ~10 minutes
**Total cost**: $0 (Free tier)
Loading