// Import useState hook from React for state management
import { useState } from "react";
// Import necessary components from react-native
// Import core components from react-native for building UI
import {
View, // Container component for layout
Text, // Component for displaying text
TouchableOpacity, // Button component for touch interactions
StyleSheet // Utility for creating styles
} from "react-native";
// Main App component
const App = () => {
// State to store player's current choice
const [playerVal, setPlayerVal] = useState(null);
// State to store computer's current choice
const [computerVal, setComputerVal] = useState(null);
// State to store player's score
const [playerScore, setPlayerScore] = useState(0);
// State to store computer's score
const [compScore, setCompScore] = useState(0);
// Function to determine the winner
const logic = (playerVal, computerVal) => {
// If both choices are the same, it's a draw
if (playerVal === computerVal) {
return 0;
// Player wins conditions
} else if (
(playerVal === "ROCK" && computerVal === "SCISSORS") ||
(playerVal === "SCISSORS" && computerVal === "PAPER") ||
(playerVal === "PAPER" && computerVal === "ROCK")
) {
return 1; // Player wins
} else {
return -1; // Computer wins
}
};
// Function to handle player's choice and update state
const decision = (playerChoice) => {
// Array of possible choices
const choices = ["ROCK", "PAPER", "SCISSORS"];
// Randomly select computer's choice
const compChoice =
choices[Math.floor(Math.random() * choices.length)];
// Determine the result using logic function
const val = logic(playerChoice, compChoice);
// If player wins
if (val === 1) {
setPlayerVal(playerChoice); // Update player's choice
setComputerVal(compChoice); // Update computer's choice
setPlayerScore(playerScore + 1); // Increment player's score
// If computer wins
} else if (val === -1) {
setPlayerVal(playerChoice); // Update player's choice
setComputerVal(compChoice); // Update computer's choice
setCompScore(compScore + 1); // Increment computer's score
// If it's a draw
} else {
setComputerVal(compChoice); // Update computer's choice
setPlayerVal(playerChoice); // Update player's choice
}
};
// Render UI
return (
<View style={styles.container}>
{/* Game title */}
<Text style={styles.title}>
Rock, Paper, Scissors Game
</Text>
{/* Buttons for player to choose */}
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => decision("ROCK")} // Player chooses ROCK
>
<Text style={styles.buttonText}>
Rock
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => decision("PAPER")} // Player chooses PAPER
>
<Text style={styles.buttonText}>
Paper
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => decision("SCISSORS")} // Player chooses SCISSORS
>
<Text style={styles.buttonText}>
Scissors
</Text>
</TouchableOpacity>
</View>
{/* Display choices and scores */}
<View style={styles.scoreContainer}>
<Text style={styles.scoreText}>
Your choice: {playerVal}
</Text>
<Text style={styles.scoreText}>
Computer's choice: {computerVal}
</Text>
<Text style={styles.scoreText}>
Your Score: {playerScore}
</Text>
<Text style={styles.scoreText}>
Computer Score: {compScore}
</Text>
</View>
</View>
);
};
// Styles for the components
const styles = StyleSheet.create({
container: {
flex: 1, // Take full height
justifyContent: "center", // Center vertically
alignItems: "center", // Center horizontally
backgroundColor: "#333", // Dark background
color: "#fff", // Text color
},
title: {
fontSize: 28, // Large font size
marginBottom: 20, // Space below title
color: "#4caf50", // Green color
fontWeight: "bold", // Bold text
textTransform: "uppercase", // Uppercase letters
},
buttonContainer: {
flexDirection: "row", // Arrange buttons in a row
justifyContent: "space-between", // Space between buttons
marginVertical: 20, // Vertical margin
},
button: {
backgroundColor: "#4caf50", // Green background
paddingVertical: 12, // Vertical padding
paddingHorizontal: 20, // Horizontal padding
borderRadius: 8, // Rounded corners
marginHorizontal: 10, // Space between buttons
},
buttonText: {
color: "#fff", // White text
fontSize: 18, // Medium font size
fontWeight: "bold", // Bold text
},
scoreContainer: {
marginTop: 20, // Space above scores
alignItems: "center", // Center align
},
scoreText: {
color: "#fff", // White text
fontSize: 16, // Font size
marginBottom: 10, // Space below each score
textAlign: "center", // Centered text
},
});
// Export the App component as default
export default App;