Hide locked summaries (wip)

eleurent · Nov 13, 2023 · 6ef3c0b · 6ef3c0b
1 parent e1f1c80
commit 6ef3c0b
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 4 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -46,7 +46,9 @@
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-swiper": "github:kateengland-moore/react-native-swiper#master",
-    "react-native-web": "~0.18.10"
+    "react-native-web": "~0.18.10",
+    "expo-linear-gradient": "~12.1.2",
+    "@react-native-masked-view/masked-view": "0.2.8"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/frontend/screens/SpeciesDetail.js b/frontend/screens/SpeciesDetail.js
@@ -7,12 +7,43 @@ import ObservationCarousel from '../components/ObservationCarousel';
 import ImageModal from '../components/ImageModal';
 import Animated from 'react-native-reanimated';
 import { Badge } from '@rneui/themed';
+import { LinearGradient } from 'expo-linear-gradient';
+import MaskedView from '@react-native-masked-view/masked-view';
 
 const API_URL = Constants.expoConfig.extra.API_URL;
 const SPECIES_DETAILS_URL = (id) => API_URL + `api/species/${id}/`
 const SPECIES_OBSERVATIONS_URL = (id) => API_URL + `api/species/${id}/observations/`
 
 
+
+const GradientText = ({ children, style, ...rest }) => {
+    const gradientColors = ['rgba(0,0,0,0.5)', 'rgba(0,0,0,0)'];
+    const B = (props) => <Text style={{fontWeight: 'bold'}}>{props.children}</Text>
+
+    return (
+    <View>
+      <MaskedView
+        maskElement={
+          <Text style={style} {...rest}>
+            {children}
+          </Text>
+        }>
+        <LinearGradient
+          colors={gradientColors}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 0, y: 1 }}>
+          <Text style={[style, { opacity: 0 }]} {...rest}>
+            {children}
+          </Text>
+        </LinearGradient>
+      </MaskedView>
+      <Text style={{ color: 'black', marginTop: -40, fontSize: 16, paddingHorizontal: 20, textAlign: 'center', }}>
+        <B>1</B> more observation needed.
+      </Text>
+      </View>
+    );
+  };
+
 const RarityBadge = ({ rarity }) => {
 
     const rarityStyles = {
@@ -59,6 +90,14 @@ export default function SpeciesDetailScreen({ navigation, route }) {
 
     let illustration_url = ("illustration_url" in speciesDetails) ? 
                            speciesDetails.illustration_url.replace('http://localhost/', API_URL) : null;
+    const unlockedSummaries = speciesDetails.descriptions ? speciesDetails.descriptions.slice(0, speciesObservations.length) : null;
+    const lockedSummary = speciesDetails.descriptions && (speciesDetails.descriptions.length > speciesObservations.length) ? speciesDetails.descriptions[speciesObservations.length] : null;
+    let observationDate = (speciesObservations && speciesObservations[0]) ? new Date(speciesObservations[0].datetime) : null;
+    if (observationDate) {
+        observationDate.setFullYear(observationDate.getFullYear() - 200);
+        observationDate = observationDate.toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"});
+    }
+
     return (
         <View style={styles.container}>
             <ImageBackground source={require('../assets/images/page-background.png')} style={styles.containerImage}>
@@ -75,20 +114,22 @@ export default function SpeciesDetailScreen({ navigation, route }) {
                     <Text style={[styles.speciesScientificName, styles.nameContainer, {marginBottom: 5}]}>{speciesDetails.scientificNameWithoutAuthor ? speciesDetails.scientificNameWithoutAuthor : "Scientific name"}</Text>
                     {speciesDetails.rarity ? <RarityBadge rarity={speciesDetails.rarity} /> : null}
                     <FlatList
-                        style={{ marginBottom: 20 }}
                         vertical
                         scrollEnabled={false}
                         showsVerticalScrollIndicator={Platform.OS === 'web'}
-                        data={speciesDetails.descriptions}
+                        data={unlockedSummaries}
                         contentContainerStyle={{}}
                         renderItem={({ item, index }) => {
                             return (
                                 <Text key={index} style={styles.descriptionText}>
-                                    { item }
+                                    { item.replace('[DATE]', 'On ' + observationDate) }
                                 </Text>
                             );
                         }}
                     />
+
+                    <GradientText style={[styles.descriptionText, {height: 50}]}>{ lockedSummary }</GradientText>
+                    <View style = {{ marginBottom: 20 }}></View>
                 </View>
                 <ImageModal modalVisible={modalVisible} setModalVisible={setModalVisible} modalImage={modalImage}/>
                 <ObservationCarousel observations={speciesObservations} onImagePress={(image) => {setModalImage(image); setModalVisible(true);}}/>