Rock Paper Scissors Game

📖 About This Project

This is a simple but educational React application that demonstrates fundamental concepts in modern web development. The app features an interactive Rock Paper Scissors game with state management, event handling, and dynamic UI updates based on game logic.

🏗️ Project Structure

rpsgame/
├── src/
│   ├── main.jsx              # Entry point - renders the app
│   ├── App.jsx               # Main App component
│   ├── Game.jsx              # Game logic and UI component
│   └── Game.module.css       # Game styling
├── index.html                # HTML template
├── package.json              # Dependencies and scripts
├── vite.config.js            # Vite configuration
└── dist/                     # Production build
        

💻 Code Explanation

Game Component (Game.jsx)

function Game() {
  const [playerChoice, setPlayerChoice] = useState(null);
  const [codeyChoice, setCodeyChoice] = useState(null);
  const [result, setResult] = useState(null);

  function handlePlayerChoice(choice) {
    const codeyChoice = CHOICES[Math.floor(Math.random() * CHOICES.length)];
    setPlayerChoice(choice);
    setCodeyChoice(codeyChoice);
    // Game logic for determining winner
  }

  return (
    <div className={styles.container}>
      <h1>Rock Paper Scissors</h1>
      <div className={styles.choices}>
        {CHOICES.map((choice) => (
          <button onClick={() => handlePlayerChoice(choice)}>
            {choice.emoji}
          </button>
        ))}
      </div>
      {/* Results display */}
    </div>
  );
}
        

A complete game component that manages game state, handles user interactions, and implements the Rock Paper Scissors game logic. Demonstrates useState hook, event handling, and conditional rendering.

App Component (App.jsx)

function App() {
  return (
    <Game />
  );
}
        

The root component that renders the Game component. Demonstrates simple component composition and the single responsibility principle.

🛠️ Tech Stack

React 19.1.1

Vite 7.1.2

JSX

ES6 Modules

CSS Modules

Cloudflare Pages

🎓 Key Learning Points

State Management: Using useState hook to manage game state
Event Handling: Managing user interactions with onClick events
Conditional Rendering: Showing/hiding UI elements based on state
Array Mapping: Using map() to render game choices dynamically
CSS Modules: Scoped styling to prevent CSS conflicts
Game Logic: Implementing win/lose/tie conditions
Random Generation: Creating computer opponent choices

🚀 Deployment to Cloudflare Pages

This project is deployed using Cloudflare Pages, a fast and reliable hosting platform for static sites.

Deployment Steps:

Build the project: npm run build
Install Wrangler CLI: npm install -g wrangler
Deploy to Cloudflare Pages: wrangler pages deploy dist --project-name rps-game
Your site is live automatically!

Build Configuration

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

export default defineConfig({
  plugins: [react()],
})
        

🔧 Development Commands

npm run dev - Start development server
npm run build - Build for production
npm run preview - Preview production build

📚 Next Steps

Add score tracking and statistics
Implement best of 3/5/7 game modes
Add animations and sound effects
Create a leaderboard with local storage
Add different difficulty levels
Implement multiplayer functionality
Add game history and replay features

🌎 View Live Demo

✊✋✌️ Rock Paper Scissors Game

🎯 Try the Game