Liaison serveur app

(c'est pas trop vrai vu qu'on a pas accès aux dockers)

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/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/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/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/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/style/screens.style.js

@@ -2,6 +2,7 @@ import { StyleSheet } from "react-native";
 
 export default StyleSheet.create({
     container: {
+        top: window.innerHeight,
         flex: 1,
         backgroundColor: '#45444E',
         flexDirection: "column",

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"
 }