This commit is contained in:
henrydays 2019-03-18 20:11:20 +00:00
parent fee3567d42
commit bfe760d51b
2 changed files with 292 additions and 277 deletions

View File

@ -1,27 +1,25 @@
import React from 'react';
import {
StyleSheet,
Text,
import React from "react";
import {
StyleSheet,
Text,
View,
ImageBackground,
Dimensions,
Button,
TouchableOpacity,
FlatList
} from 'react-native';
import ProgressBarAnimated from 'react-native-progress-bar-animated';
} from "react-native";
import ProgressBarAnimated from "react-native-progress-bar-animated";
import Modal from "react-native-modal";
import IconF from "react-native-vector-icons/Foundation"
import IconFA from "react-native-vector-icons/FontAwesome5"
import { ScrollView, ViewPagerAndroid } from 'react-native-gesture-handler';
import IconF from "react-native-vector-icons/Foundation";
import IconFA from "react-native-vector-icons/FontAwesome5";
import { ScrollView, ViewPagerAndroid } from "react-native-gesture-handler";
const SCREEN_HEIGHT = Dimensions.get("window").height;
const SCREEN_WIDTH = Dimensions.get("window").width;
import FitImage from 'react-native-fit-image';
import FitImage from "react-native-fit-image";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
@ -29,314 +27,330 @@ import { bindActionCreators } from "redux";
import * as Actions from "../store/actions"; //Import your actionss
class Jogo extends React.Component {
state = {
progress: 20,
progressWithOnComplete: 0,
progressCustomized: 0,
isModalVisible: false,
} ;
increase = (key, value) => {
state = {
progress: 20,
progressWithOnComplete: 0,
progressCustomized: 0,
isModalVisible: false
};
increase = (key, value) => {
this.setState({
[key]: this.state[key] + value,
});
}
[key]: this.state[key] + value
});
};
_toggleModal = () =>{
_toggleModal = () => {
this.setState({ isModalVisible: !this.state.isModalVisible });
console.log("assd")
}
console.log("assd");
};
componentDidMount(){
this.props.getCromos(this.props.user, this.props.internalToken);
}
componentDidMount() {
this.props.getCromos(this.props.user, this.props.internalToken);
}
render() {
const { navigate } = this.props.navigation;
const progressCustomStyles = {
backgroundColor: "red",
borderRadius: 0,
borderColor: "orange"
};
const progressCustomStyles = {
backgroundColor: 'red',
borderRadius: 0,
borderColor: 'orange',
};
const barWidth = Dimensions.get('screen').width - 30;
const barWidth = Dimensions.get("screen").width - 30;
return (
<View style={styles.container}>
<Modal
isVisible={this.state.isModalVisible}
animationInTiming={1000}
animationOutTiming={800}
>
<View style={{
flex:1,
alignContent:'center',
margin :SCREEN_WIDTH*0.1,
backgroundColor:'white',
marginBottom:SCREEN_HEIGHT*0.1,
marginTop:SCREEN_HEIGHT*0.1,
maxHeight:400
}}>
<ImageBackground
opacity={0.5}
source={require('../assets/img/bg_3.jpg')}
<Modal
isVisible={this.state.isModalVisible}
animationInTiming={1000}
animationOutTiming={800}
>
<View
style={{
flex: 1,
alignContent: "center",
margin: SCREEN_WIDTH * 0.1,
backgroundColor: "white",
marginBottom: SCREEN_HEIGHT * 0.1,
marginTop: SCREEN_HEIGHT * 0.1,
maxHeight: 400
}}
>
<ImageBackground
opacity={0.5}
source={require("../assets/img/bg_3.jpg")}
style={{
width: "96%",
height: "97.5%",
margin: 10
}}
>
<View style={{ width: "100%", margin: -10 }}>
<View style={{ width: 30 }}>
<Button
onPress={this._toggleModal}
title="X"
color="#CC1A17"
accessibilityLabel="Learn more about this purple button"
/>
</View>
</View>
<View
style={{
flex: 1,
alignContent: "center",
width: "96%",
alignItems: "center"
}}
>
<View style={{ paddingTop: 25, width: "40%" }}>
<FitImage
source={{
uri:
"https://upload.wikimedia.org/wikipedia/commons/8/8a/CSW_Gradiente_rgb.png"
}}
style={styles.fitImage}
/>
</View>
<View
style={{
width:'96%',
height:'97.5%',
margin:10
backgroundColor: "rgba(255,255,255,0.6)",
width: "100%",
marginTop: 35
}}
>
<View style={{width:'100%' ,margin:-10}}>
<View style={{width:30}}><Button
onPress={this._toggleModal}
title="X"
color="#CC1A17"
accessibilityLabel="Learn more about this purple button"
/>
</View>
</View>
<View style={{flex:1, alignContent:'center', width:'96%', alignItems:'center'}}>
<View style={{paddingTop:25,width:'40%',}}>
<FitImage
source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/8/8a/CSW_Gradiente_rgb.png' }}
style={styles.fitImage}
/>
</View>
<View style={{backgroundColor:'rgba(255,255,255,0.6)', width:'100%', marginTop:35}}>
<Text style={{padding:10}}>A CRITICAL Software fornece sistemas e serviços de software para segurança e
aplicações essenciais aos negócios, ajudando a garantir que os clientes atendam aos requisitos mais exigentes de qualidade - padrões de segurança, desempenho e fiabilidade</Text>
</View>
<View style={{width:'100%', marginTop:10}}><TouchableOpacity><Text style={{textAlign:'center', fontWeight:'bold', fontSize:18, color:'#CC1A17'}}>website</Text></TouchableOpacity></View>
</View>
</ImageBackground>
<Text style={{ padding: 10 }}>
A CRITICAL Software fornece sistemas e serviços de software
para segurança e aplicações essenciais aos negócios,
ajudando a garantir que os clientes atendam aos requisitos
mais exigentes de qualidade - padrões de segurança,
desempenho e fiabilidade
</Text>
</View>
</Modal>
<View style={{ width: "100%", marginTop: 10 }}>
<TouchableOpacity>
<Text
style={{
textAlign: "center",
fontWeight: "bold",
fontSize: 18,
color: "#CC1A17"
}}
>
website
</Text>
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
</Modal>
<View style={styles.header}>
<View style={styles.titleContainer}>
<Text style={styles.title}>Jogo do ENEI'19</Text>
</View>
</View>
<View style={{ height:50, backgroundColor:'white'}}>
<View style={{flex:1, justifyContent:'space-around', flexDirection:'row'}}>
<View style={{width:SCREEN_WIDTH*0.7, flex:1, flexDirection:'row',margin:10, marginLeft:SCREEN_WIDTH*0.10}}>
<IconFA name="trophy" size={30}/>
<Text style={{fontWeight:'bold', fontSize:20,marginLeft:10}}>45</Text>
<Text style={{margin:5}}>pontos</Text>
</View>
<View style={{width:SCREEN_WIDTH*0.3, marginTop:8, marginRight:SCREEN_WIDTH*0.1}}>
<Button
onPress={this._toggleModal}
title="Prémios"
color="#CC1A17"
accessibilityLabel="Learn more about this purple button"
/>
</View>
</View>
</View>
<View style={styles.progress}>
<View style={{ alignItems:'center'}}>
</View>
<View style={{backgroundColor:'#FDFDFD', shadowColor:"#000", shadowOffset:{height:2, width:0, shadowRadius:1}, elevation:3,}}>
<View style={{flex:1,margin: 20, alignItems:'center',flexDirection:'row', justifyContent: 'space-around',}}>
<Text style={{fontWeight:'bold'}} > 1 </Text>
<ProgressBarAnimated
width={barWidth*0.7}
value={this.state.progress}
backgroundColorOnComplete="#CC2A17"
/>
<Text style={{fontWeight:'bold'}}> 2 </Text>
</View>
<Text style={styles.title}>Jogo do ENEI'19</Text>
</View>
</View>
<ScrollView style={{backgroundColor:'#eeeeee',marginTop:10}} horizontal={true}>
<ScrollView>
<View style={{ height: 50, backgroundColor: "white" }}>
<View
style={{
flex: 1,
justifyContent: "space-around",
flexDirection: "row"
}}
>
<View
style={{
width: SCREEN_WIDTH * 0.7,
flex: 1,
flexDirection: "row",
margin: 10,
marginLeft: SCREEN_WIDTH * 0.1
}}
>
<IconFA name="trophy" size={30} />
<Text
style={{ fontWeight: "bold", fontSize: 20, marginLeft: 10 }}
>
45
</Text>
<Text style={{ margin: 5 }}>pontos</Text>
</View>
<View
style={{
width: SCREEN_WIDTH * 0.3,
marginTop: 8,
marginRight: SCREEN_WIDTH * 0.1
}}
>
<Button
onPress={this._toggleModal}
title="Prémios"
color="#CC1A17"
accessibilityLabel="Learn more about this purple button"
/>
</View>
</View>
</View>
<View style={styles.progress}>
<View style={{ alignItems: "center" }} />
<View
style={{
backgroundColor: "#FDFDFD",
shadowColor: "#000",
shadowOffset: { height: 2, width: 0, shadowRadius: 1 },
elevation: 3
}}
>
<View
style={{
flex: 1,
margin: 20,
alignItems: "center",
flexDirection: "row",
justifyContent: "space-around"
}}
>
<Text style={{ fontWeight: "bold" }}> 1 </Text>
<ProgressBarAnimated
width={barWidth * 0.7}
value={this.state.progress}
backgroundColorOnComplete="#CC2A17"
/>
<Text style={{ fontWeight: "bold" }}> 2 </Text>
</View>
</View>
</View>
<ScrollView
style={{ backgroundColor: "#eeeeee", marginTop: 10 }}
horizontal={true}
>
<ScrollView>
<View style={styles.cromosContainer}>
<FlatList
data={this.props.cromos}
renderItem={({item}) => <TouchableOpacity onPress={this._toggleModal}>
<View style={styles.cromo}>
<ImageBackground
source={require('../assets/img/jogo/critical.png')}
style={styles.imageBg}
>
<View style={[styles.triangle, this.props.style]} />
<Text style={styles.points}>15</Text>
<View style={[styles.triangleNumber, this.props.style]} />
<Text style={styles.number}>0</Text>
</ImageBackground>
</View>
</TouchableOpacity>}
numColumns={3} // Número de colunas
/>
</View>
</ScrollView>
<FlatList
data={this.props.cromos}
renderItem={({ item }) => (
<TouchableOpacity onPress={this._toggleModal}>
<View style={styles.cromo}>
<ImageBackground
source={require("../assets/img/jogo/critical.png")}
style={styles.imageBg}
>
<View style={[styles.triangle, this.props.style]} />
<Text style={styles.points}>15</Text>
<View
style={[styles.triangleNumber, this.props.style]}
/>
<Text style={styles.number}>0</Text>
</ImageBackground>
</View>
</TouchableOpacity>
)}
numColumns={3} // Número de colunas
/>
</View>
</ScrollView>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
fitImage: {},
points: {
marginTop: -25,
marginLeft: 10,
fontWeight: "bold",
color: "#CC1A17"
},
fitImage:{
},
points:{
marginTop:-25,
marginLeft:10,
fontWeight:'bold',
color:'#CC1A17'
},
cromosContainer:{
flex:1,
flexDirection:'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
marginLeft:10,
marginRight:10,
},
cromo:
{
backgroundColor:'white',
margin:3,
height:200,
width:130,
borderRadius:0}
,
imageBg:{
height:190,
margin:5
},
label:{
margin:10
cromosContainer: {
flex: 1,
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-around",
marginLeft: 10,
marginRight: 10
},
progress:{
backgroundColor:'#eeeeee',
shadowColor:'#000',
shadowOffset:{width:0, height:2},
shadowRadius:1,
elevation:1,
cromo: {
backgroundColor: "white",
margin: 3,
height: 200,
width: 130,
borderRadius: 0
},
title:{
fontWeight:'bold',
fontSize:25,
color:'white',
textAlign:'center'
imageBg: {
height: 190,
margin: 5
},
titleContainer:{
margin:10,
label: {
margin: 10
},
header:{
backgroundColor:'#CC2A17',
progress: {
backgroundColor: "#eeeeee",
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 1,
elevation: 1
},
title: {
fontWeight: "bold",
fontSize: 25,
color: "white",
textAlign: "center"
},
titleContainer: {
margin: 10
},
header: {
backgroundColor: "#CC2A17",
//alignItems:'center',
shadowColor:'#000',
shadowOffset:{width:0, height:2},
shadowRadius:1,
elevation:5,
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowRadius: 1,
elevation: 5
},
container: {
flex: 1,
backgroundColor: '#eeeeee',
// alignItems: 'center',
backgroundColor: "#eeeeee"
// alignItems: 'center',
//justifyContent: 'space-around',
},
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth:67,
backgroundColor: "transparent",
borderStyle: "solid",
borderLeftWidth: 67,
borderRightWidth: 0,
borderBottomWidth: 20,
transform: [{ rotate: '180deg'}],
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: 'white'
transform: [{ rotate: "180deg" }],
borderLeftColor: "transparent",
borderRightColor: "transparent",
borderBottomColor: "white"
},
triangleNumber: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth:67,
backgroundColor: "transparent",
borderStyle: "solid",
borderLeftWidth: 67,
borderRightWidth: 0,
borderBottomWidth: 20,
transform: [{ rotate: '0deg'}],
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: 'white',
marginLeft:54,
marginTop:156
transform: [{ rotate: "0deg" }],
borderLeftColor: "transparent",
borderRightColor: "transparent",
borderBottomColor: "white",
marginLeft: 54,
marginTop: 156
},
number:{
marginTop:-18,
marginLeft:103,
textAlign: 'center'
number: {
marginTop: -18,
marginLeft: 103,
textAlign: "center"
}
});
@ -344,10 +358,9 @@ function mapStateToProps(state, props) {
return {
token: state.apiReducer.token,
user: state.apiReducer.user,
internalToken: state.apiReducer.internalToken,
cromos:state.apiReducer.cromos
cromos: state.apiReducer.cromos
};
}
@ -358,4 +371,4 @@ function mapDispatchToProps(dispatch) {
export default connect(
mapStateToProps,
mapDispatchToProps
)(Jogo);
)(Jogo);

View File

@ -53,19 +53,21 @@ class teamDetail extends React.Component {
</View>
</View>
<View style={{height: SCREEN_HEIGHT * 0.15, paddingBottom: 10}}>
<View style={{ paddingBottom: 10}}>
<View style={styles.row}>
{this.props.team.membros &&
<FlatList
data={this.props.team.membros}
numColumns={6} // Número de colunas
renderItem={({member}) =>
<View style={styles.memberImage}>
<Image
style={{width: 50, height: 50}}
source={{uri: `${member.photo.Url}`}}
/>
style={{width: 50, height: 50}}
source={require('../assets/logo_black.jpg')}
/>
</View>
}
/>}