Merge branch 'Persistance' of https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY into Persistance

bob_party/App.tsx

@@ -6,8 +6,6 @@ import { useFonts } from 'expo-font';
 
 
 
-
-
 export default function App() {
 
 

bob_party/initSocket.js

@@ -1,8 +0,0 @@
-const { io } = require("socket.io-client");
-
-
-
-export default socket = io("http://localhost:3000");
-
-    
-

bob_party/package.json

@@ -24,11 +24,14 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-typescript": "^7.0.0-alpha.19",
     "babel-test": "^0.2.4",
+    "cors": "^2.8.5",
     "expo": "^46.0.17",
     "expo-status-bar": "~1.4.0",
+    "express": "^4.18.2",
     "jest": "^29.3.1",
     "jquery": "^3.6.1",
     "node": "^18.10.0",
+    "nodemon": "^2.0.20",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-native": "^0.69.6",
@@ -40,6 +43,8 @@
     "react-native-safe-area-context": "4.3.1",
     "react-native-web": "~0.18.7",
     "react-redux": "^8.0.4",
+    "socket.io": "^4.5.4",
+    "socket.io-client": "^4.5.4",
     "ts-node": "^10.9.1",
     "zustand": "^4.1.4"
   },

bob_party/server.js

@@ -1,3 +1,4 @@
+
 const express = require('express');
 const app = express();
 const http = require('http');
@@ -5,16 +6,21 @@ const server = http.createServer(app);
 const { Server } = require("socket.io");
 const io = new Server(server);
 
-const connectUsers = []
+const connectUsers = [];
 
 io.on('connection', (socket) => {
   console.log(socket.id)  
 
-  socket.on('joinRoom', ({username}) => {
-    connectUsers.push(username)
 
-    socket.emit('roomJoined', connectUsers)
+  socket.on('inConv', (conv) => {
+    socket.join("C" + conv.id);
+  });
+
+  socket.on("messageSent", (conv) =>{
+    socket.to("C"+conv.id).emit("messageReceived");
+    console.log("Message envoyé");
   });
+  
 });
 
 server.listen(3000, () => {

bob_party/socketConfig.js

@@ -0,0 +1,4 @@
+const { io } = require("socket.io-client");
+
+
+export const socket = io("http://localhost:3000");

bob_party/src/Games/CookieClicker/cookieClicker.tsx

@@ -159,7 +159,7 @@ function CookieClicker(props: { navigation: any }) {
           </View>
 
           <TouchableHighlight onPress={onPressWizard}>
-            <Image style={styles.photo} source={{ uri: 'https://www.clasher.us/images/coc/units/Wizard_Tower7.png' }} />
+            <Image style={styles.photo} source={{ uri: 'https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY/raw/branch/Persistance/bob_party/assets/ImagesJeux/CookieClicker/ChristmasTower.png' }} />
           </TouchableHighlight>
           <View>
             <Text style={styles.cout}>
@@ -168,7 +168,7 @@ function CookieClicker(props: { navigation: any }) {
           </View>
 
           <TouchableHighlight onPress={onPressPortal}>
-            <Image style={styles.photo} source={{ uri: 'https://i.pinimg.com/originals/98/29/21/9829215db6f9210c0ae4e318e854cb1f.png' }} />
+            <Image style={styles.photo} source={{ uri: 'https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY/raw/branch/Persistance/bob_party/assets/ImagesJeux/CookieClicker/ChristmasPortal.png' }} />
           </TouchableHighlight>
           <View>
             <Text style={styles.cout}>
@@ -185,10 +185,12 @@ function CookieClicker(props: { navigation: any }) {
 
 const styles = StyleSheet.create({
   container: {
+    height: window.innerHeight,
+    width: window.innerWidth,
     flex: 1,
   },
   containerTop:{
-    top: 75,
+    top: "5%",
     margin: 10,
     flex: 1,
     justifyContent: 'center',

bob_party/src/components/BotBar.tsx

@@ -10,6 +10,7 @@ import { useStoreStore } from "../context/storeContext";
 import tabSkinApp from "../constSkin";
 import { useConversationStore } from "../context/conversationContext";
 import { MANAGER_CONVERSATION, MANAGER_USER } from "../../appManagers";
+import { socket } from "../../socketConfig";
 
 /* 
     Images that are required to create a bottom bar
@@ -30,23 +31,26 @@ const smessage = require('../../assets/Icons/Selected/SChat.png');
 const sstore = require('../../assets/Icons/Selected/SStore.png');
 
 
+
+
+
 export const BotBar:
     /* Parameters :
        * nav : tool needed to allow the navigation between the screens
        * state : optional parameter that indicates from which screen the component has been called
             (the string must be the name of the screen)
     */
+
+
     FC<{ nav: any, state?: String }> =
     ({ nav, state }) => {
 
+
         const setTabSkin = useStoreStore((state) => state.setTabSkin);
-        const setTabConv = useConversationStore((state) => state.setTabConv);
 
         const handleStoreChange = useCallback(async () => {
 
             let tabSkinStore = [...tabSkinApp];
-            //   const tmp=MANAGER_USER.getCurrentUser()?.getTabSkin();
-            //   if (tmp!==undefined){
             MANAGER_USER.getCurrentUser()?.getTabSkin()?.forEach(skin => {
                 for (let i = 0; i < tabSkinStore.length; i++) {
                     if (skin.isEqual(tabSkinStore[i])) {
@@ -55,19 +59,11 @@ export const BotBar:
                 }
             });
             setTabSkin(tabSkinStore);
-            //   }
         }, []);
 
-        const handleConversationChange = useCallback(async () => {
-            const tmp = MANAGER_USER.getCurrentUser();
-            if (tmp !== null) {
-                await MANAGER_CONVERSATION.getLoaderConversation().loadByUser(tmp).then((res) => {
-                    MANAGER_CONVERSATION.setCurrentTabConv(res);
-                    setTabConv(res);
-                });
-            }
 
-        }, []);
+
+        
 
         /* 
             By default, all the images are the white ones
@@ -100,7 +96,7 @@ export const BotBar:
         */
         return (
             <View style={styles.footer}>
-                <Pressable onPress={() => { handleConversationChange(); nav.navigate('ChatTab') }}>
+                <Pressable onPress={() => {  nav.navigate('ChatTab') }}>
                     <Image
                         style={styles.icon}
                         source={imgLeft}

bob_party/src/components/ConversationComponent.tsx

@@ -1,44 +0,0 @@
-import { FC, ReactNode } from "react"
-import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
-import React from "react"
-import { Skin } from "../core/skin"
-import { Conversation } from "../core/conversation"
-
-/*
-    Importing the correct stylesheet
-*/
-import styles from "./style/ConverstationComponent.style"
-import { SkinComponent } from "./Skin"
-
-export const ConversationComponent :
-/* Parameters : 
-    * skin : Skin to be displayed
-    * state : Indicates from wich screen the component has been called
-*/ 
-FC<{conv: Conversation, state: String, navigation: any}> = 
-({conv, state, navigation}) => 
-{ 
-    /* The display of this component depends of the screen from where it has been called:
-        * From the TopBar (icon) : Small image in a circle
-        * From the shop (shop) : Image + Name + Price, Pressable => Buy the skin
-        * From the profile (profile) : Name + Image, Pressable => Change the skin
-    */
-
-    
-    switch (state) {
-        case 'Preview':
-            return(
-                <View style={{flexDirection: 'row', height: 70, borderBottomWidth: 2,borderBottomColor: '#2D2C33', paddingLeft: '5%',}}>
-                    <View style={{alignSelf: 'center'}}>
-                        <SkinComponent skin={conv.getLastMessage().getMessageSender().getCurrentSkin()} state='icon' nav={navigation}/>
-                    </View>
-                    <View style={{marginLeft: '5%', justifyContent: 'space-evenly'}}>
-                        <Text style={styles.textNom}>{conv.getLastMessage().getMessageSender().getUsername()}</Text>
-                        <Text style={styles.textMess}>{conv.getLastMessage().getMessageContent()}</Text>
-                    </View>
-                </View>
-            )
-        default:
-            break;
-    }
-}

bob_party/src/components/ConversationPreviewComponent.tsx

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from "react"
+import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
+import React from "react"
+import { Skin } from "../core/skin"
+import { Conversation } from "../core/conversation"
+
+/*
+    Importing the correct stylesheet
+*/
+import styles from "./style/ConverstationPreviewComponent.style"
+import { SkinComponent } from "./Skin"
+import { MANAGER_USER } from "../../appManagers"
+import { User } from "../core/User/user"
+
+export const ConversationPreviewComponent :
+/* Parameters : 
+    * skin : Skin to be displayed
+*/ 
+FC<{conv: Conversation, navigation: any}> = 
+({conv, navigation}) => 
+{ 
+    const user1 = MANAGER_USER.getCurrentUser();
+    let tmp;
+
+    if (conv.getTabUser()[0] === user1) tmp = conv.getTabUser()[1];
+    else tmp = conv.getTabUser()[0];
+
+    const user2 = tmp;
+
+    
+
+    return(
+        <Pressable onPress={() => navigation.navigate(Conversation)}>
+            <View style={styles.conv}>
+                <View>
+                    <SkinComponent skin={user2.getCurrentSkin()} state='icon' nav={navigation}/>
+                </View>
+                <View style={{marginLeft: '5%', justifyContent: 'space-evenly'}}>
+                    <Text style={styles.textNom}>{conv.getLastMessage().getMessageSender().getUsername()}</Text>
+                    <Text style={styles.textMess}>{conv.getLastMessage().getMessageContent()}</Text>
+                </View>
+            </View>
+        </Pressable>
+    )
+}

bob_party/src/components/MessageComponent.tsx

@@ -0,0 +1,57 @@
+import { FC, ReactNode } from "react"
+import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
+import React from "react"
+import { Skin } from "../core/skin"
+import { Conversation } from "../core/conversation"
+
+/*
+    Importing the correct stylesheet
+*/
+import styles from "./style/MessageComponent.style.js"
+import { SkinComponent } from "./Skin"
+import { MANAGER_USER } from "../../appManagers"
+import { User } from "../core/User/user"
+import { Message } from "../core/message"
+
+export const MessageComponent :
+/* Parameters : 
+    * skin : Skin to be displayed
+*/ 
+FC<{mess: Message}> = 
+({mess}) => 
+{ 
+    let messStyle;
+    const user1 = MANAGER_USER.getCurrentUser();
+    if (mess.getMessageSender() === user1){
+        return(
+            
+            <View style={styles.mainRightView}>
+                <View style={styles.rightView}>    
+                    <View>
+                        <SkinComponent skin={mess.getMessageSender().getCurrentSkin()} state='icon'/>
+                    </View>
+                    <View style={styles.rightTextView}>
+                        <Text style={styles.text}>{mess.getMessageContent()}</Text>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+    else{
+        return(
+            <View style={styles.mainLeftView}>
+                <Text style={styles.senderUsername}>{mess.getMessageSender().getUsername()}</Text>
+                <View style={styles.leftView}>
+                    <View>
+                        <SkinComponent skin={mess.getMessageSender().getCurrentSkin()} state='icon'/>
+                    </View>
+                    <View style={styles.leftTextView}>
+                        <Text style={styles.text}>{mess.getMessageContent()}</Text>
+                    </View>
+                </View>
+            </View>
+        )
+    }
+
+    
+}

bob_party/src/components/Skin.tsx

@@ -26,7 +26,7 @@ export const SkinComponent:
         * skin : Skin to be displayed
         * state : Indicates from wich screen the component has been called
     */
-    FC<{ nav: any, skin: Skin, state: String }> =
+    FC<{  skin: Skin, state: String, nav?: any,}> =
     ({ nav, skin, state }) => {
 
         const navigation = nav;

bob_party/src/components/TopBar.tsx

@@ -11,6 +11,7 @@ import { User } from "../core/User/user"
 import styles from './style/TopBar.style';
 import { useMatchStore } from "../context/matchContext"
 import { MANAGER_USER } from "../../appManagers"
+import { useUserStore } from "../context/userContext"
 
 /* 
     Images required
@@ -68,7 +69,7 @@ FC<{nav: any, state?: string}> =
             return (
                 <View style={styles.header}>
                     <Pressable onPress={() => nav.navigate('ProfileTab', {screen: 'Profile'})}>
-                            <SkinComponent skin={MANAGER_USER.getCurrentUser().getCurrentSkin()} state='icon' nav={nav} />
+                            <SkinComponent skin={useUserStore().user?.getCurrentSkin()} state='icon' nav={nav} />
                         </Pressable>
                         <Text style={styles.titre}>BOB PARTY</Text>
                         <Pressable onPress={() => nav.navigate('Settings')}>

bob_party/src/components/style/ConverstationPreviewComponent.style.js

@@ -11,5 +11,13 @@ export default StyleSheet.create({
         fontSize: 15,
         letterSpacing: 0.25,
         color: '#D9D9D9',
+    },
+    conv: {
+        flexDirection: 'row',
+        height: 70,
+        borderBottomWidth: 2,
+        borderBottomColor: '#2D2C33',
+        paddingLeft: '5%',
+        alignItems: "center",
     }
 });

bob_party/src/components/style/MessageComponent.style.js

@@ -0,0 +1,55 @@
+import { StyleSheet } from "react-native";
+
+export default StyleSheet.create({
+    leftView: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-start',
+       
+    },
+    text: {
+        fontSize: 20,
+        lineHeight: 24,
+        letterSpacing: 0.25,
+        color: 'white',
+        
+    },
+    leftTextView: {
+        backgroundColor: '#888898',
+        padding: 15,
+        marginLeft: 5,
+        borderRadius: 15,
+        borderBottomLeftRadius: 0,
+    },
+    rightTextView: {
+        backgroundColor: '#0086FE',
+        padding: 15,
+        marginRight: 5,
+        borderRadius: 15,
+        borderBottomRightRadius: 0,
+    },
+    mainRightView: {
+        flexDirection: 'row-reverse',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-start',
+        margin: 10,
+    },
+    rightView: {
+        maxWidth: '75%',
+        flexDirection: 'row-reverse',
+        alignItems: 'flex-end',
+    },
+    senderUsername: {
+        marginLeft: 55,
+        marginBottom: 5,
+        fontSize: 20,
+        fontWeight: "800",
+        lineHeight: 24,
+        letterSpacing: 0.25,
+        color: 'white',
+    },
+    mainLeftView: {
+        margin: 10,
+        maxWidth: '75%',
+    }
+});

bob_party/src/context/conversationContext.tsx

@@ -5,15 +5,15 @@ import { Conversation } from "../core/conversation";
 
 // Define store types
 interface ConversationState {
-    tabConv: Conversation[] | undefined;
+    tabConv: Conversation[] | null;
     setTabConv: (tabConv: Conversation[]) => void;
     resetTabConv: () => void;
   }
 
 // Define store data and methods
 export const useConversationStore = create<ConversationState>()((set, get) => ({
-    tabConv: undefined,
+    tabConv: null,
     setTabConv: (tabConv) => set((state) => ({ tabConv: tabConv })),
-    resetTabConv: () => set((state) => ({tabConv: undefined})),
+    resetTabConv: () => set((state) => ({tabConv: null})),
 }));
 

bob_party/src/navigation/AppNavigator.tsx

@@ -14,6 +14,9 @@ import SignIn from '../screens/SignIn'
 import SignUp from '../screens/SignUp'
 import LobbySolo from '../screens/LobbySolo'
 import CookieClicker from '../Games/CookieClicker/cookieClicker'
+import Conversation from '../screens/Conversation'
+
+import Test from '../screens/Test'
 import MatchMaking from '../screens/MatchMaking'
 import TicTacToe from '../Games/Tic-Tac-Toe/Tic-Tac-Toe'
 
@@ -55,6 +58,7 @@ function ChatStackScreen() {
     <ChatStack.Navigator screenOptions={{headerShown: false}}>
       <ChatStack.Screen name="Chat" component={Chat} />
       <ChatStack.Screen name="Settings" component={Settings} />
+      <ChatStack.Screen name="Conversation" component={Conversation} />
     </ChatStack.Navigator>
   );
 }
@@ -126,4 +130,6 @@ function MainTabNavigator() {
 }
 
 
+
+
 export default MainTabNavigator

bob_party/src/redux/features/currentUserSlice.ts

@@ -1,10 +1,11 @@
+/*
 import { createSlice, PayloadAction } from "@reduxjs/toolkit"
 import { Skin } from "../../core/Skin";
 import { User } from "../../core/User/user";
 
 const dateNull = new Date();
 
-const userNull:User= new User("","","","","",dateNull);
+const userNull:User | null= null;
 
 var currentUser:User = userNull;
 
@@ -72,3 +73,4 @@ export const { updateNationality } = currentUserSlice.actions
 export const { updateSex } = currentUserSlice.actions
 
 export default currentUserSlice.reducer;
+*/

bob_party/src/screens/Chat.tsx

@@ -5,7 +5,7 @@ import stylesScreen from './style/screens.style';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { FlatList } from 'react-native-gesture-handler';
-import { ConversationComponent } from '../components/ConversationComponent';
+import { ConversationPreviewComponent } from '../components/ConversationPreviewComponent';
 import { useConversationStore } from '../context/conversationContext';
 
 function Chat(props: { navigation: any; }) {
@@ -20,7 +20,7 @@ function Chat(props: { navigation: any; }) {
 
         <FlatList 
           data={useConversationStore().tabConv}
-          renderItem={({item}) => <ConversationComponent conv={item} state='Preview' navigation={navigation}/>} 
+          renderItem={({item}) => <ConversationPreviewComponent conv={item} navigation={navigation}/>} 
         />
       </View>
       <BotBar 

bob_party/src/screens/Conversation.tsx

@@ -0,0 +1,53 @@
+import { StatusBar } from 'expo-status-bar'
+import {KeyboardAvoidingView, Platform, TextInput, View} from 'react-native'
+import React, { useCallback } from 'react';
+import stylesScreen from './style/screens.style';
+import { TopBar } from '../components/TopBar';
+import { BotBar } from '../components/BotBar';
+import { FlatList } from 'react-native-gesture-handler';
+import { MANAGER_CONVERSATION, MANAGER_USER } from '../../appManagers';
+import { MessageComponent } from '../components/MessageComponent';
+
+function Conversation(props: { navigation: any; }) {
+    const { navigation } = props
+    
+    const chosenConversation = MANAGER_CONVERSATION.getCurrentTabConv()[0].getTabMessage();
+
+    
+
+	const renderMessage = ({ item }) => {
+		return (
+			<MessageComponent mess={item}></MessageComponent>
+		);
+	};
+	return(
+		<KeyboardAvoidingView  behavior={Platform.OS == "ios" ? "padding" : "height"} style={stylesScreen.container}>
+				<View style={stylesScreen.bodyStart}>
+					<FlatList
+						data={chosenConversation.reverse()}
+						renderItem={renderMessage}
+						keyExtractor={item => item.getMessageId().toString()}
+						style={{flexDirection:'column-reverse'}}
+					/>
+					
+					<TextInput 
+						style={{height: '7%',
+						width: '90%',
+						borderRadius: '15%',
+						backgroundColor: 'white',
+						padding: 10,
+						marginBottom: '7%',
+						alignSelf: 'center',
+						marginTop: '3%',
+						}} 
+						placeholder='Votre message...' 
+						onChangeText={(val) => console.log("camarche")}
+						returnKeyType="send"
+						onSubmitEditing={() => console.log("oh oui")}
+					/>
+				</View>
+		</KeyboardAvoidingView>
+	);
+}
+
+export default Conversation

bob_party/src/screens/SignIn.tsx

@@ -5,12 +5,13 @@ import stylesScreen from './style/screens.style'
 import { TextInput } from 'react-native-gesture-handler';
 import styles from "./style/SignIn.style";
 import { useDispatch, useSelector } from 'react-redux';
-import { loginUser } from '../redux/features/currentUserSlice';
 import { RootState } from '../redux/store';
 import { updateIncorrectCredentials } from '../redux/features/credentialErrorsSlice';
 import Dialog from "react-native-dialog";
 import { useUserStore } from '../context/userContext';
-import { MANAGER_USER } from '../../appManagers';
+import { MANAGER_CONVERSATION, MANAGER_USER } from '../../appManagers';
+import { socket } from "../../socketConfig";
+import { useConversationStore } from '../context/conversationContext';
 
 
 
@@ -18,6 +19,8 @@ import { MANAGER_USER } from '../../appManagers';
 function SignIn(props: { navigation: any; }) {
     const { navigation } = props
     const setUser = useUserStore((state) => state.setUser);
+    const setTabConv = useConversationStore((state) => state.setTabConv);
+
 
     const errorList = useSelector((state: RootState) => state.credentialErrors.loginErrorList);
     const [pseudo, setPseudo] = useState('');
@@ -29,19 +32,46 @@ function SignIn(props: { navigation: any; }) {
             dispatch(updateIncorrectCredentials(true));
     }
 
+    let waitConnect=0;
 
-    const handleUserConnect = useCallback(async (pseudo: string, password: string) => {
+    async function handleUserConnect(username: string, password: string){
         
-        await MANAGER_USER.getLoaderUser().loadByUsernamePassword(pseudo, password).then((res) => {      
+        if (waitConnect==0){
+            waitConnect=1;
+            await MANAGER_USER.getLoaderUser().loadByUsernamePassword(username, password).then(async (res) => {   
                 if (res!=null){
                     MANAGER_USER.setCurrentUser(res);
                     setUser(MANAGER_USER.getCurrentUser());
+                    socket.emit("signIn", res);
+                    await handleConversationLoad();
+                    MANAGER_CONVERSATION.getCurrentTabConv()?.forEach( conv =>{
+                        socket.emit("inConv", conv);
+                        socket.emit("messageSent", conv);
+                    });
                     navigation.navigate('HomeTab');                
+
+                }
+
+            });
+            waitConnect=0;
+        }
+        return;      
     }
 
+    async function handleConversationLoad(){
+        const tmp = MANAGER_USER.getCurrentUser();
+        if (tmp !== null) {
+            await MANAGER_CONVERSATION.getLoaderConversation().loadByUser(tmp).then((res) => {
+                MANAGER_CONVERSATION.setCurrentTabConv(res);
+                setTabConv(res);
             });
+        }
+      }
 
-    }, []);
+    socket.on("messageReceived", () =>{
+        console.log("Message reçu");
+        handleConversationLoad();
+    });
 
 
     return (

bob_party/src/screens/Test.tsx

@@ -5,36 +5,28 @@ import React from 'react';
 import { FlatList } from 'react-native-gesture-handler';
 import { SkinComponent } from '../components/Skin';
 import { Skin } from '../core/skin';
+import { MessageComponent } from '../components/MessageComponent';
+import { MANAGER_CONVERSATION, MANAGER_USER } from '../../appManagers';
+import { Message } from '../core/message';
+import { User } from '../core/User/user';
 
-/*
-const skinTest = new Skin("S0001","Bob",require('../../assets/BobsSkins/BobClassic.png'));
-const skinBleu = new Skin("S0001","Bob Bleu", require('../../assets/BobsSkins/BobBlue.png'))
-const skinBW = new Skin("S0001","Bob BW", require('../../assets/BobsSkins/BobBW.png'))
-const skinGreen = new Skin("S0001","Bob Vert", require('../../assets/BobsSkins/BobGreen.png'))
-const skinPT = new Skin("S0001","Bob R&T", require('../../assets/BobsSkins/BobPinkTurquoise.png'))
-
-let listSkin: Array<Skin> = [skinTest, skinBleu, skinBW, skinGreen, skinPT]
 
 function Test(props: { navigation: any; }) {
+    
     const { navigation } = props
 
-    const ItemSeprator = () => <View style={{
+    let skin= new Skin(1, "Bob","https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY/raw/branch/typescript/bob_party/assets/BobsSkins/BobClassic.png", 0);
-        height: 2,
+    
-        width: "100%",
+    let user1 = new User(1, "Alban", "oui", "ouioui", "homme", new Date(2022,12,12), 555, 667, 12, skin, [skin]);
-        backgroundColor: "red",
+
-    }}/>
+    let message = new Message(1, "bonjour je m'appelle alban et blablablablablablablafkfjsbndfihbsfiusbdfisdubfsdijbfisdjfbsdiufbsdifbsdifbsdibfsdifbsdifbsdifbsdibfsdibfsdiubfsdibfsdiubfsdiubfsqhdbqshjdbsqhbdqshbdqksjb", user1, new Date(2022,12,12));
+
 
     return (
-        <View style={{backgroundColor: 'blue', flex: 0.7, alignSelf: 'center'}}>
+        <View style={{backgroundColor: '#45444D', flex: 1, flexDirection: 'column-reverse', paddingBottom: 50,}}>
-            <FlatList 
+            <MessageComponent mess={message}></MessageComponent>
-                data={listSkin}
-                numColumns={2}
-                columnWrapperStyle={{ flex: 1, justifyContent: "space-around"}}
-                keyExtractor={item =>item.getSkinName()}
-                renderItem={({item}) => <SkinComponent skin={item} state='shop'/>} />
         </View>
     );
 }
 
 export default Test
-*/

bob_party/src/screens/style/screens.style.js

@@ -2,17 +2,23 @@ import { StyleSheet } from "react-native";
 
 export default StyleSheet.create({
     container: {
+        top: window.innerHeight,
         flex: 1,
         backgroundColor: '#45444E',
         flexDirection: "column",
         justifyContent: "flex-start",
-        alignItems: "center",
     },
     bodyStart: {
         flex: 1,
         flexDirection: 'column',
         width: '100%',
     },
+    bodyStartReverse:{
+        flex: 1,
+        flexDirection: 'column-reverse',
+        justifyContent: 'flex-end',
+        width: '100%',
+    },
     bodyStartCenter: {
         flex: 1,
         alignItems: 'center',

bob_party/src/services/conversationService/loaderConversationApi.ts

@@ -27,7 +27,7 @@ export class LoaderConversationApi implements ILoaderConversation{
          })
          .then(function (response: any) {
             let skin= new Skin(1, "Bob","https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY/raw/branch/typescript/bob_party/assets/BobsSkins/BobClassic.png", 0);
-            tabConv=[new Conversation(1, 
+            tabConv=[new Conversation(40, 
             [new User(1, "Alban", "oui", "ouioui", "homme", new Date(2022,12,12), 555, 667, 12, skin, [skin]),
             new User(3, "Fefe63", "jesuishm", "ouioui", "homme", new Date(2022,12,12), 12222, 123324, 12, skin, [skin])],
             [new Message(1, "bonjour", new User(1, "Alban", "oui", "ouioui", "homme", new Date(2022,12,12), 555, 667, 12, skin, [skin]), new Date(2022,12,12)),

bob_party/src/services/userServices/loaderUserApi.ts

@@ -104,7 +104,7 @@ export default class LoaderUserApi implements ILoaderUser{
          .then(function (response: any) {
             const tabTest=[new Skin(1, "Bob","https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY/raw/branch/typescript/bob_party/assets/BobsSkins/BobClassic.png", 0),
             new Skin(2, "Bob Blue","https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY/raw/branch/typescript/bob_party/assets/BobsSkins/BobBlue.png", 100)];
-            user=new User(1, username, password, "ouioui", "homme", new Date(2022,12,12), 200, 123324, 12, new Skin(1, "Bob","https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY/raw/branch/typescript/bob_party/assets/BobsSkins/BobClassic.png", 0), tabTest);
+            user=new User(1, username, password, "ouioui", "homme", new Date(2022,12,12), 0, 0, 12, tabTest[0], tabTest);
         });
         return user;
     }

bob_party/tsconfig.json

@@ -22,6 +22,6 @@
   "include": [
     "**/*.ts",
     "**/*.tsx"
-  ],
+, "socketConfig.js", "server.js"  ],
   "extends": "expo/tsconfig.base"
 }