COTW and resources ui

app/ChallengeWeek.js

@@ -7,6 +7,9 @@ import {
   Text,
   StatusBar,
   Linking,
+  Animated,
+  TouchableOpacity,
+  Image
 } from 'react-native';
 
 import {
@@ -23,7 +26,8 @@ class ChallengeWeek extends React.Component {
 	constructor(props) {
 		super(props)
 		this.state = {
-			isLoading: true
+			isLoading: true,
+			flip: true
 		}
 	}
 	
@@ -37,17 +41,84 @@ class ChallengeWeek extends React.Component {
 		}).then((json) => {
 			this.setState({data: JSON.parse(json),isLoading:false});
 		}).catch((error) => console.error(error))
+
+		this.animatedValue=new Animated.Value(0);
+		this.value=0;
+		this.animatedValue.addListener(({value}) => {
+			this.value=value;
+		})
+		this.frontInterpolate = this.animatedValue.interpolate({
+			inputRange:[0,180],
+			outputRange:['0deg', '180deg'],
+		})
+		this.backInterpolate = this.animatedValue.interpolate({
+			inputRange:[0,180],
+			outputRange: ['180deg','360deg']
+		})
+	}
+
+	flipCard() {
+		if (this.value >= 90) {
+			Animated.spring(this.animatedValue, {
+				toValue:0,
+				friction:8,
+				tension: 10
+			}).start();
+		}
+		else {
+			Animated.spring(this.animatedValue, {
+				toValue:180,
+				friction: 8,
+				tension: 10
+			}).start();
+		}
+		this.setState({flip:!this.state.flip})
 	}
 	
 	render() {
+		const frontAnimatedStyle = {
+			transform: [
+				{rotateY:this.frontInterpolate}
+			]
+		}
+		const backAnimatedStyle = {
+			transform: [
+				{rotateY:this.backInterpolate}
+			]
+		}
+		var styling={}
+		var styling2={}
+		if (this.state.flip) {
+			styling=({height: '100%', width: '100%', backgroundColor: 'white', borderRadius: 20, textAlign: 'center', display: 'flex', alignContent: 'center', padding: '5%', paddingTop: '15%', borderColor: 'red', borderWidth: 1})
+			styling2=({display:'none'})
+		}
+		else {
+			styling=({display:'none'})
+			styling2=({height: '100%', width: '100%', backgroundColor: 'white', borderRadius: 20, textAlign: 'center', display: 'flex', alignContent: 'center', padding: '5%', paddingTop: '15%', borderColor: 'red', borderWidth: 1})
+		}
+		
 		if (this.state.isLoading) {
 			return <View/>
 		} else {
 			return (
-				<View style={{alignItems:'center',paddingTop:'5%',paddingiorizontal:'10%', height: '100%', backgroundColor: 'white'}}>
-					<Text style={{fontSize: 32, fontWeight: 'bold', marginBottom: '10%', color: 'red'}}>{this.state.data.title}</Text>
-					<Text style={{textAlign:'center', fontSize: 24, marginBottom: '5%'}}>{this.state.data.text}</Text>
-					<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000",}} onPress={() => Linking.openURL(this.state.data.link)}>{this.state.data.link}</Text>
+				<View style={{alignItems:'center',paddingiorizontal:'10%', height: '100%', backgroundColor: 'white', justifyContent: 'center'}}>
+					<TouchableOpacity onPress={()=>this.flipCard()} style={{height: '70%', width: '80%', borderRadius: 20, shadowColor: 'red', shadowOffset: {width: 0, height: 2}, shadowOpacity: 0.5, shadowRadius: 7, alignSelf: 'center'}}>
+						<Animated.View style={{backfaceVisibility: 'hidden'}, frontAnimatedStyle}>
+							<View style={styling}>
+								<View>{this.state.flip?<Text style={{textAlign: 'center', fontSize: 28}}>{this.state.data.title}</Text>:<></>}</View>
+								<Image source={require('./assets/blair_logo.png')} style = {{height: 200, width: 200, alignSelf: 'center', position: 'absolute', bottom: '20%'}}/>
+								<Image source={require('./assets/arrow_right.png')} style = {{alignSelf: 'center', position: 'absolute', bottom: '5%'}}/>
+							</View>
+						</Animated.View>
+						<Animated.View style={backAnimatedStyle}>
+							<View style={styling2}>
+								{!this.state.flip?<Text style={{textAlign: 'center', fontSize: 28}}>{this.state.data.text}</Text>:<></>}
+								<Text style={{textAlign:'center', fontSize: 20, textDecorationLine: 'underline', textDecorationStyle: "solid", textDecorationColor: "#000",}} onPress={() => Linking.openURL(this.state.data.link)}>{'\n'}Link</Text>
+							</View>
+							
+						</Animated.View>
+					</TouchableOpacity>
+					
 				</View>
 			)
 		}

app/Resources.js

@@ -8,7 +8,8 @@ import {
   StatusBar,
   Linking,
   Image,
-  TouchableOpacity
+  TouchableOpacity,
+  Dimensions
 } from 'react-native';
 
 import {
@@ -20,27 +21,37 @@ import {
 } from 'react-native/Libraries/NewAppScreen';
 import styles from './styles/morestyles';
 
+const windowWidth = Dimensions.get('window').width*.80/2;
+
 function ResourceLink(props) { 
 	return (
-		<TouchableOpacity style={styles.resourceContainer} onPress={() => Linking.openURL(props.url)}>
-          <Image source={props.img} style={styles.image}/>
-		      <View style={styles.textContainer}>
-            <Text style={styles.resourceText}>{props.name}</Text> 
-          </View>		  
-        </TouchableOpacity>
+		<TouchableOpacity style={styles.resourceContainer, {paddingHorizontal: '5%', paddingBottom: '5%'}} onPress={() => Linking.openURL(props.url)}>
+      <View style={{display: 'flex', textAlign: 'center', width: windowWidth}}>
+        <View style={{aspectRatio: 1}}>
+          <Image source={props.img} style={{width: '100%', height: '100%', borderRadius: 30}}/>
+        </View>
+        <Text style={{fontColor: 'black', alignSelf: 'center', marginTop: '2%', fontSize: 16}}>{props.name}</Text>
+      </View>
+    </TouchableOpacity>
 	)
 }
 
 class Resources extends React.Component {
 	render() {
 		return (
-			<ScrollView style = {{backgroundColor: 'white'}}>
-				<ResourceLink url='https://classroom.mcpsmd.org/' img={require('./assets/canvaslogo.png')} name='MyMCPS Classroom'/>
-				<ResourceLink url='https://md-mcps-psv.edupoint.com/Home_PXP2.aspx' img={require('./assets/studentvue.jpg')} name='StudentVUE'/>
-				<ResourceLink url='https://student.naviance.com/mbhs' img={require('./assets/naviance.png')} name='Naviance'/>
-				<ResourceLink url='https://blairblazersathletics.com/' img={require('./assets/athletics.jpg')} name='Blair Athletics'/>
-				<ResourceLink url='https://classroom.google.com/u/0/h' img={require('./assets/googleclassroom.jpg')} name='Google Classroom'/>
-			</ScrollView>
+      <ScrollView style = {{backgroundColor: 'white'}}>
+        <View style = {{display: 'flex', flexDirection: 'row', flexWrap: 'wrap', paddingVertical: '5%'}}>
+          <ResourceLink url='https://classroom.mcpsmd.org/' img={require('./assets/canvas.jpeg')} name='MyMCPS Classroom'/>
+          <ResourceLink url='https://md-mcps-psv.edupoint.com/Home_PXP2.aspx' img={require('./assets/studentvue.png')} name='StudentVUE'/>
+          <ResourceLink url='https://student.naviance.com/mbhs' img={require('./assets/naviance.png')} name='Naviance'/>
+          <ResourceLink url='https://classroom.google.com/u/0/h' img={require('./assets/gc.png')} name='Google Classroom'/>
+          <ResourceLink url='https://mbhs.edu/' img={require('./assets/blair_logo.png')} name='MBHS'/>
+          <ResourceLink url='https://sites.google.com/mcpsmd.net/mbhs-schoolcounseling-team/home/mbhs-school-counseling-team' img={require('./assets/counselor.jpeg')} name='Counseling Team'/>
+          <ResourceLink url='http://bnconline.net/c/infoflow/' img={require('./assets/infoflow.jpeg')} name='Infoflow'/>
+          <ResourceLink url='https://silverchips.mbhs.edu/' img={require('./assets/sco.jpeg')} name='Silver Chips Online'/>
+			  </View>
+      </ScrollView>
+			
 		)
 	}
 }