import { StyleSheet, Text, View,TextInput, TouchableOpacity} from 'react-native';
import {useState } from "react"
export default function App() {
const [text,settext]=useState("")
const [comtext,setcomtext]=useState("")
const [win,setwin]=useState("...")
winner=()=>{
if(text=="fire" && comtext=="wood")
return "User"
else if(text=="wood" && comtext=="fire")
return "computer"
else if(text=="wood" && comtext=="water")
return "user"
else if(text=="water" && comtext=="wood")
return "computer"
else if(text=="water" && comtext=="fire")
return "user"
else if(text=="fire" && comtext=="water")
return "computer"
else if(text==comtext)
return "draw"
}
indexchoise=()=>{
return choise[Math.floor(Math.random()*choise.length)]
}
var choise = ["fire","wood","water"]
return (
<View style={{
height: 200,
backgroundColor: 'powderblue',
}}>
<Text>Your choise:</Text>
<TextInput
value={text}
style={{
backgroundColor: 'white',
borderWidth:2
}}/>
<Text>computer choise:</Text>
<TextInput
value={comtext}
style={{
backgroundColor: 'white',
borderWidth:2
}}/>
<Text>winner!!</Text>
<TextInput
value={win}
style={{
backgroundColor: 'white',
borderWidth:2
}}/>
<View style={{flexDirection:'row'}}>
<TouchableOpacity
style={styles.button}
onPress={()=>{settext("fire")
setcomtext(indexchoise)
setwin("") ;
}}
>
<Text
style = {styles.text}>Fire</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={()=>{settext("wood")
setcomtext(indexchoise)
setwin("") ;
}}
>
<Text
style = {styles.text}>wood</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={()=>{settext("water")
setcomtext(indexchoise)
setwin("") ;
}}
>
<Text
style = {styles.text}>water</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={()=>{
setwin(winner) ;
}}
>
<Text
style = {styles.text}>result</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: 'blue',
width: 73,
margin:5,
},
text: {
color: 'white'
}
});