[WIP] Add complete implementation of WoW guild roster manager

[Copilot]

Implementation Plan for WoW Guild Roster Manager

• Create project structure and configuration files
  • Root-level .gitignore
  • Root-level .env.example
  • Backend structure and package.json
  • Frontend structure and package.json
• Implement backend (Node.js + Express + Socket.io)
  • Backend server.js with Express and Socket.io
  • Google Sheets API integration
  • Session management with in-memory storage
  • WebSocket handlers for real-time collaboration
  • Backend .env.example
• Implement frontend (React + Vite)
  • Vite configuration with base path
  • Frontend .env.example
  • index.html entry point
  • Main entry point (main.jsx)
  • App component with routing
  • CreateSession page with Google OAuth
  • SessionView page with drag-and-drop
  • RosterSection component
  • PlayerCard component
  • Toolbar component
  • Sidebar component with stats and buff detection
  • AddPlayerModal component
  • useSocket custom hook
  • WoW classes utility
  • Buff detection utility
  • Complete WoW-themed styling (App.css)
• Create documentation
  • Comprehensive README.md
  • DEPLOYMENT.md guide
• Test the implementation
  • Build backend
  • Build frontend
  • Verify all features work as expected
• Final review and security check

Original prompt

WoW Guild Roster Manager - Complete Implementation

Create a complete World of Warcraft retail guild raid roster management system with real-time collaboration features.

Reference Image

Project Structure

Create the following complete file structure with all necessary code:

Root Files

1. README.md - Complete documentation (replace existing)
2. .gitignore - Git ignore patterns
3. .env.example - Environment variables template
4. DEPLOYMENT.md - Deployment guide for GitHub Pages + Render

Backend Structure (backend/)

Create a complete Node.js backend with:

1. backend/package.json:

{
  "name": "wow-roster-manager-backend",
  "version": "1.0.0",
  "description": "Backend for WoW Guild Roster Manager",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "node server.js",
    "dev": "node --watch server.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "socket.io": "^4.6.1",
    "googleapis": "^118.0.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3"
  }
}

2. backend/.env.example:

PORT=3000
GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here
GOOGLE_REDIRECT_URI=http://localhost:3000/auth/callback
FRONTEND_URL=http://localhost:5173

3. backend/server.js - Complete Express + Socket.io server with:
   • In-memory session storage (Map)
   • Google Sheets API integration
   • WebSocket handlers for real-time collaboration
   • REST endpoints:
     • POST /api/session/create - Create session with Google Sheets data
     • GET /api/session/:sessionId - Get session data
     • POST /api/session/:sessionId/save - Save to Google Sheets
   • Socket.io events:
     • join-session - Join collaborative session
     • update-player-status - Move player between rosters
     • add-player - Add new player
     • update-player - Edit player details
     • select-player - Highlight player for all users
     • Various broadcast events for real-time sync

Frontend Structure (frontend/)

Create a complete React application with:

1. frontend/package.json:

{
  "name": "wow-roster-manager-frontend",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "npm run build && gh-pages -d dist"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.0",
    "socket.io-client": "^4.6.1",
    "@dnd-kit/core": "^6.0.8",
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
    "@react-oauth/google": "^0.11.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "@vitejs/plugin-react": "^4.0.0",
    "gh-pages": "^6.0.0",
    "vite": "^4.3.0"
  }
}

2. frontend/vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/WowRosterManager/',
  server: {
    port: 5173
  }
})

3. frontend/index.html - HTML entry point

4. frontend/.env.example:

VITE_BACKEND_URL=http://localhost:3000
VITE_GOOGLE_CLIENT_ID=your_google_client_id_here

5. frontend/src/ - Complete React application:
   • main.jsx - React entry point
   • App.jsx - Router setup with GoogleOAuthProvider
   • pages/CreateSession.jsx - Session creation page with Google OAuth
   • pages/SessionView.jsx - Main roster management interface
   • components/RosterSection.jsx - Droppable roster container
   • components/PlayerCard.jsx - Draggable player card with class colors
   • components/Toolbar.jsx - Top toolbar with actions
   • components/Sidebar.jsx - Stats and raid buff detection
   • components/AddPlayerModal.jsx - Add player form
   • hooks/useSocket.js - Socket.io connection hook
   • utils/wowClasses.js - WoW class data and colors
   • utils/buffDetection.js - Raid buff coverage detection
   • styles/App.css - Complete WoW-themed dark styling

Key Features to Implement

1. Real-time Collaboration

• Multiple users can join same session via shared link
• All roster changes sync instantly via WebSocket
• Player selection highlights for all users
• Participant counter
• Connection status indicator

2. Drag and Drop

• Use @dnd-kit for drag-and-drop
• Players draggable between Main Roster, Trials, and Bench
• Optimistic UI updates
• Broadcast changes to all connected users
• Read-only mode disables dragging

3. Google Sheets Integration

• OAuth 2.0 authentication for session host
• Load roster data on session creation
• Expected columns: Player Name | Class | Main Spec Role | Alt 1 Class | Alt 1 Spec Role | Alt 2 Class | Alt 2 Spec Role | Status | Notes
• Save button writes back to Google Sheets
• Show last saved timestamp

4. WoW Class System

• All retail WoW classes with proper hex colors:
  • Death Knig...

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.