rockpaperscissors/javascript.js at main · andrewkernel/rockpaperscissors · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
const choices = [
    {
        key: 'rock',
        label: 'ROCK',
        image: 'https://images.unsplash.com/photo-1764698188527-28ca21d076d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxyb2NrJTIwc3RvbmUlMjBoYW5kJTIwZ2VzdHVyZXxlbnwxfHx8fDE3NzIwNzM2MDZ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    },
    {
        key: 'paper',
        label: 'PAPER',
        image: 'https://images.unsplash.com/photo-1611923973164-e0e5f7f69872?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwYXBlciUyMGhhbmQlMjBnZXN0dXJlJTIwd2hpdGV8ZW58MXx8fHwxNzcyMDczNjA2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    },
    {
        key: 'scissors',
        label: 'SCISSORS',
        image: 'https://images.unsplash.com/photo-1567034866941-5acf937cb310?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzY2lzc29ycyUyMGhhbmQlMjBnZXN0dXJlJTIwZ2FtZXxlbnwxfHx8fDE3NzIwNzM2MDd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral',
    },
];

function getComputerChoice() {
    const randomIndex = Math.floor(Math.random() * choices.length);
    return choices[randomIndex].key;
}

function getRoundWinner(humanChoice, computerChoice) {
    if (humanChoice === computerChoice) {
        return 'tie';
    }

    if (
        (humanChoice === 'rock' && computerChoice === 'scissors') ||
        (humanChoice === 'paper' && computerChoice === 'rock') ||
        (humanChoice === 'scissors' && computerChoice === 'paper')
    ) {
        return 'human';
    }

    return 'computer';
}

function App() {
    const [playerScore, setPlayerScore] = React.useState(0);
    const [computerScore, setComputerScore] = React.useState(0);
    const [resultText, setResultText] = React.useState('Choose a move to start.');

    const handleChoice = (humanChoice) => {
        const computerChoice = getComputerChoice();
        const winner = getRoundWinner(humanChoice, computerChoice);

        let nextPlayerScore = playerScore;
        let nextComputerScore = computerScore;
        let message = `You chose ${humanChoice}, computer chose ${computerChoice}. `;

        if (winner === 'human') {
            nextPlayerScore += 1;
            message += 'You win!';
        } else if (winner === 'computer') {
            nextComputerScore += 1;
            message += 'Computer wins!';
        } else {
            message += "It's a tie!";
        }

        if (nextPlayerScore === 5 || nextComputerScore === 5) {
            const finalMessage = nextPlayerScore === 5 ? 'You win the game!' : 'Computer wins the game!';
            window.alert(`Game over! ${finalMessage}`);

            setPlayerScore(0);
            setComputerScore(0);
            setResultText('Choose a move to start.');
            return;
        }

        setPlayerScore(nextPlayerScore);
        setComputerScore(nextComputerScore);
        setResultText(message);
    };

    return (
        <div className="container">
            <div className="header">
                <h1 className="title">Rock. Paper. Scissors.</h1>
                <p className="subtitle">The timeless game</p>
            </div>

            <div className="score-area">
                <div className="score-grid">
                    <div className="score-item">
                        <div className="score-label">You</div>
                        <div className="score-value">{playerScore}</div>
                    </div>
                    <div className="score-divider"></div>
                    <div className="score-item">
                        <div className="score-label">Computer</div>
                        <div className="score-value">{computerScore}</div>
                    </div>
                </div>

                <div className="result-message">{resultText}</div>
            </div>

            <div className="grid">
                {choices.map((choice) => (
                    <button
                        key={choice.key}
                        className="item choice"
                        data-choice={choice.key}
                        type="button"
                        onClick={() => handleChoice(choice.key)}
                    >
                        <div className="image-wrapper">
                            <img src={choice.image} alt={choice.key} className="image" />
                        </div>
                        <p className="label">{choice.label}</p>
                    </button>
                ))}
            </div>

            <div className="footer">
                <p className="footer-text">EST. 200 BCE</p>
            </div>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);