import {useState} from 'react';
import { View, Button, Text, SafeAreaView, StyleSheet } from 'react-native';
// You can import supported modules from npm
import { TextInput} from 'react-native-paper';
export default function App() {
const [user, setUser] = useState('');
const [computer, setComputer] = useState('');
const [winner, setWinner] = useState('');
function getChoice( userChoice )
{
var choices = ['Fire', 'Wood', 'Water'];
index = Math.floor(Math.random() * 3) ;
var computerChoice = choices[index];
setUser(userChoice);
setComputer(computerChoice);
var win = '';
if( userChoice == 'Fire' && computerChoice == 'Fire' )
win = "Draw"
else if( userChoice == 'Fire' && computerChoice == 'Wood' )
win = "User"
else if( userChoice == 'Fire' && computerChoice == 'Water' )
win = "Computer"
else if( userChoice == 'Wood' && computerChoice == 'Fire' )
win = "Computer"
else if( userChoice == 'Wood' && computerChoice == 'Wood' )
win = "Draw"
else if( userChoice == 'Wood' && computerChoice == 'Water' )
win = "User"
else if( userChoice == 'Water' && computerChoice == 'Fire' )
win = "User"
else if( userChoice == 'Water' && computerChoice == 'Wood' )
win = "Computer"
else if( userChoice == 'Water' && computerChoice == 'Water' )
win = "Draw"
setWinner(win);
}
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
<View style={styles.textstyle}>
<Text>Your choice</Text>
</View>
<View style={styles.textinputStyle}>
<TextInput
mode="outlined"
dense
value = {user}
onChangeText={() => {}}
left={<TextInput.Affix text="$" />}
/>
</View>
</View>
<View style={styles.innerContainer}>
<View style={styles.textstyle}>
<Text>Computer choice</Text>
</View>
<View style={styles.textinputStyle}>
<TextInput
mode="outlined"
dense
value = {computer}
onChangeText={() => {}}
left={<TextInput.Affix text="$" />}
/>
</View>
</View>
<View style={styles.innerContainer}>
<View style={styles.textstyle}>
<Text>Winner</Text>
</View>
<View style={styles.textinputStyle}>
<TextInput
mode="outlined"
dense
value = {winner}
onChangeText={() => {}}
left={<TextInput.Affix text="$" />}
/>
</View>
</View>
<View style={styles.innerContainer}>
<View style={ [styles.textstyle, styles.buttonStyle] }>
<Button
title="Fire"
onPress={ () => getChoice('Fire')}
/>
</View>
<View style={ [styles.textstyle, styles.buttonStyle] }>
<Button
title="Wood"
onPress={ () => getChoice('Wood')}
/>
</View>
<View style={ [styles.textstyle, styles.buttonStyle] }>
<Button
title="Water"
onPress={ () => getChoice('Water')}
/>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
alignItems: 'center'
},
innerContainer: {
flexDirection:'row',
margin:5,
},
textstyle: {
justifyContent:'center',
width:70,
},
textinputStyle: {
margin:10,
width: 200,
},
buttonStyle: {
margin: 5,
}
});
NEW ENTRIES