Added Favorite Page and Card Music, also i updated the README.md ✅

README.md

@@ -23,34 +23,58 @@ La racine de notre gitlab est composée de deux dossiers essentiels au projet:
 
 [**doc**](doc) : **Documentation de l'application**
 
-# Fonctionnement
+## Fonctionnement
 
 - ### Comment lancer le projet ? 
 
+Tout d'abord si ce n'est pas fait cloner le dépôt de la branche **master/main**, pour cela copier le lien URL du dépôt git :
 
-cd /home/scratch/compte
+<div align = center>
+
+![Comment cloner](doc/Images/HowToClone.png)
+
+</div>
+
+Puis, dans un terminal dans le répertoire que vous souhaiter taper la commande : **git clone https://codefirst.iut.uca.fr/git/FLAD_Dev/FLAD.git**
 
-echo $http_proxy
+Ensuite dans un terminal, assurer vous que vous possédez node.js, pour cela il existe la commande : **npm -v**
 
-http://193.49.118.36:8080
 
-vim ~/.npmrc
+:information_source: *Si vous ne disposez pas de node.js, allé sur le site [Download Node.js](https://nodejs.org/en/download/) pour pouvoir le télécharger, vous pouvez aussi utiliser nvm qui est un outil de gestion des versions de Node.js sur votre appareil, pour en savoir plus il existe le site [Guide NVM](https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/) !!!*
+<br>
+
+Pour la suite, il suffit seulement de vérifier que node.js est à jour et installer le client expo-cli via la commande : **npm install expo-cli** 
+
+Maintenant vous pouvez à tout moment lancer l'application grâce à la commande : **npx expo start :sunglasses:**
+<br>
+:information_source: *Cliquer sur la touche 'w' si vous voulez le visualiser sur un navigateur (ce que je ne conseille pas) ou installer l'application 'Expo go' de votre téléphone et scanner le QR code proposer pour le visualiser (à noter que l'ordinateur dans lequel il se voit lancer doit être dans le même réseau local que votre téléphone)*
 
-Dedans :
+- ### Comment le lancer à partir de l'iut d'Aubière ?
 
+Cela est un peu plus difficile mais faisable !!!
+<br>
+Tout d'abord aller dans votre compte scratch : **cd home/scratch/compte**
+
+Puis récupérer votre adresse IP via la commande : **echo $http_proxy**
+
+Exemple : http://193.49.118.36:8080
+
+Maintenant aller dans le fichier ~/.npmrc (**vim ~/.npmrc**) et noter les informations suivantes (bien entendu remplacer l'IP ci-dessous par l'IP que vous avez récupérer juste avant) :
+
+``` bash
 proxy=http://193.49.118.36:8080
 http_proxy=http://193.49.118.36:8080
 https_proxy=http://193.49.118.36:8080
-	cache=/home/scratch/emkartal1/npmcache
-
+cache=/home/scratch/compte/npmcache
+```
 
-npm install expo-cli
+Puis installer le client expo-cli via la commande : **npm install expo-cli**
 
-export NODES_OPTIONS=--openssl-legacy-provider
+Et entrer la commande : **export NODE_OPTIONS=--openssl-legacy-provider**
 
-npx expo start
-
-De plus, cliquer sur la touche w lors du lancement
+Maintenant vous pouvez à tout moment lancer l'application grâce à la commande : **npx expo start :sunglasses:**
+<br>
+:information_source: *Cliquer sur la touche 'w' si vous voulez le visualiser sur un navigateur (ce que je ne conseille pas) ou installer l'application 'Expo go' de votre téléphone et scanner le QR code proposer pour le visualiser (à noter que l'ordinateur dans lequel il se voit lancer doit être dans le même réseau local que votre téléphone)*
 
 
 ## Environnement de Travail

src/FLAD/App.tsx

@@ -1,8 +1,7 @@
 import { StatusBar } from 'expo-status-bar';
 import { useState, useTransition } from 'react';
 import { Animated, StyleSheet, Text, View } from 'react-native';
-import Card from './components/Card';
-
+import FavoritePage from './pages/favoritePage';
 import { cards as cardArray } from './FakeData/data'
 
  
@@ -28,7 +27,7 @@ const onSwipe = (index: number, direction: 'left' | 'right') => {
 
   return (
 
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',  position : 'absolute', backgroundColor : '' }}>
+    /*<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',  position : 'absolute', backgroundColor : '' }}>
       {cards.map((card, index) => (
         <View key={card.name}>
           <Card
@@ -38,6 +37,10 @@ const onSwipe = (index: number, direction: 'left' | 'right') => {
           />
         </View>
       ))}
+    </View>*/
+
+    <View style={{backgroundColor: '#141414'}}>
+      <FavoritePage/>
     </View>
 
 
@@ -67,7 +70,7 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#fff',
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
   card: {
     borderRadius : 8,

src/FLAD/app.json

@@ -9,7 +9,7 @@
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#141414"
     },
     "updates": {
       "fallbackToCacheTimeout": 0

src/FLAD/components/CardMusic.tsx

@@ -1,9 +1,8 @@
 import React, {Component} from 'react';
 import { Animated, StyleSheet, Text, View, FlatList , Image} from 'react-native';
 
-
 type CustomCardMusic = { //Props
-    image: string;
+    image: any;
     title: string;
     description: string;
 }
@@ -12,7 +11,7 @@ export default function CardMusic(CBP: CustomCardMusic) {
     return (
       <View style={styles.container}>
           <View style={styles.imageContainer}>
-              <Image source={{uri: CBP.image}} style={styles.image} borderRadius={50}/>
+              <Image source={require('../assets/jul.png')} style={styles.image}/>
           </View>
           <View style={styles.textContainer}>
               <Text style={styles.title}>{CBP.title}</Text>
@@ -39,7 +38,8 @@ export default function CardMusic(CBP: CustomCardMusic) {
     image: {
       width: '100%',
       height: '100%',
-      borderRadius: 50
+      borderRadius: 10
+
     },
     textContainer: {
       flex: 1,

src/FLAD/package.json

@@ -12,7 +12,7 @@
     "@react-navigation/native": "^6.1.2",
     "@react-navigation/native-stack": "^6.9.8",
     "expo": "~47.0.12",
-    "expo-cli": "^6.1.0",
+    "expo-cli": "^6.2.1",
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",
     "react-dom": "18.1.0",

src/FLAD/pages/favoritePage.tsx

@@ -1,3 +1,41 @@
 import React, {Component} from 'react';
-import { Animated, StyleSheet, Text, View, FlatList } from 'react-native';
+import { Animated, StyleSheet, Text, View, FlatList, ScrollView } from 'react-native';
+import Card from '../components/Card';
+import CardMusic from '../components/CardMusic';
 
+
+export default function favoritePage() {
+    return (
+        <View>
+            <View style={styles.titleContainer}>
+                <Text style={styles.title}>Favoris</Text>
+                <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
+            </View>
+            <ScrollView>
+                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
+                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
+                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
+                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
+                <CardMusic image="../assets/jul.png" title="La pharmacie" description="Jul"/>
+                <CardMusic image="../assets/pnl.png" title="deux frères" description="PNL"/> 
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    titleContainer: {
+        marginLeft: 20,
+        marginVertical: 50,
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        color: 'white',
+    },
+    description: {
+        marginTop: 10,
+        fontSize: 18,
+        color: '#787878',
+    },
+});