Energy tooltip

src/components/effect/AnimatedFlask.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
+import { Animated, StyleSheet, TouchableOpacity, View } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useIsFocused } from '@react-navigation/native';
@@ -103,7 +103,8 @@ const AnimatedFlask = ({ color = Colors.purple2, size = 60 }) => {
       <View style={{
         borderBottomLeftRadius: 20,
         borderBottomRightRadius: 20,
-        ...Styles.center }}>
+        ...Styles.center,
+      }}>
         <View
           style={{
             ...styles.flaskContainer,

src/components/map/DropyMap.js

@@ -18,6 +18,7 @@ import MapLoadingOverlay from '../overlays/MapLoadingOverlay';
 import DebugText from '../other/DebugText';
 import FadeInWrapper from '../effect/FadeInWrapper';
 import EnergyPopup from '../overlays/EnergyPopup';
+import EnergyTooltip from './EnergyTooltip';
 import RetrievedDropyMapMarker from './RetrievedDropyMapMarker';
 import Sonar from './Sonar';
 import DropyMapMarker from './DropyMapMarker';
@@ -207,9 +208,14 @@ const DropyMap = ({
 
       <SafeAreaView style={styles.controlsView}>
         <FadeInWrapper visible={!museumVisible}>
-          <AnimatedFlask />
+          <EnergyTooltip style={{ marginLeft: 7 }}>
+            <AnimatedFlask />
+          </EnergyTooltip>
           <FadeInWrapper visible={currentZoom < Map.MAX_ZOOM - 0.1}>
-            <TouchableOpacity onPress={() => setMapCameraPosition(headingLocked, true)} style={styles.lockButton}>
+            <TouchableOpacity
+              onPress={() => setMapCameraPosition(headingLocked, true)}
+              style={styles.lockButton}
+            >
               <MaterialIcons name='my-location' size={20} color={Colors.darkGrey} />
             </TouchableOpacity>
           </FadeInWrapper>

src/components/map/EnergyTooltip.js

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import Styles, { Colors, Fonts } from '../../styles/Styles';
+import useCurrentUser from '../../hooks/useCurrentUser';
+import Storage from '../../utils/storage';
+
+const EnergyTooltip = ({ style, children }) => {
+  const { user } = useCurrentUser();
+  const tooltipAnimatedValue = useRef(new Animated.Value(0)).current;
+
+  const [isPressed, setIsPressed] = useState(false);
+
+  Storage.getItem('alreadyLaunched').then((value) => {
+    if (value === null) {
+      Storage.setItem('alreadyLaunched', true);
+      setIsPressed(true);
+    }
+  });
+
+  useEffect(() => {
+    const anim = Animated.timing(tooltipAnimatedValue, {
+      toValue: isPressed ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    });
+    anim.start();
+    return anim.stop;
+  }, [isPressed]);
+
+  return (
+    <View style={{ ...Styles.center, ...style }}>
+      <Animated.View style={{ ...styles.tooltipContainer, opacity: tooltipAnimatedValue }}>
+        <View style={styles.titleView}>
+          <MaterialCommunityIcons name='lightning-bolt' size={16} color={Colors.white} />
+          <Text style={styles.energyValue}>{user.energy} / 90</Text>
+        </View>
+        <View>
+          <Text style={styles.description}>Ton energie diminue en ramassant un drop, tu peux la remplir en posant des drops</Text>
+        </View>
+      </Animated.View>
+      <TouchableOpacity
+        delayPressOut={2000}
+        style={{ ...Styles.center, ...style }}
+        onPressIn={() => setIsPressed(true)}
+        onPressOut={() => setIsPressed(false)}
+      >
+        {children}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default EnergyTooltip;
+
+const styles = StyleSheet.create({
+  tooltipContainer: {
+    ...Styles.center,
+    position: 'absolute',
+    bottom: 20,
+    left: -200,
+    right: 0,
+    height: 90,
+    width: 200,
+    borderRadius: 10,
+    backgroundColor: Colors.purple2,
+    ...Styles.softShadows,
+    shadowOpacity: 0.2,
+  },
+  titleView: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    width: '90%',
+    marginTop: 5,
+  },
+  energyValue: {
+    ...Fonts.bold(11, Colors.white),
+  },
+  description: {
+    ...Fonts.bold(9, Colors.white),
+    margin: 10,
+  },
+});