Ajoue du serveur et du client qui marche

bob_party/App.tsx

@@ -7,8 +7,10 @@ import { useFonts } from 'expo-font';
 
 
 
+
 export default function App() {
 
+
   const [fontsLoaded] = useFonts({
     'Helvetica': require('./assets/fonts/Helvetica.ttf'),
   });

bob_party/index.js

@@ -1,40 +0,0 @@
-const express = require("express");
-const app = express();
-const PORT = 4000;
-
-
-app.use(express.urlencoded({ extended: true }));
-app.use(express.json());
-
-const http = require("http").Server(app);
-const cors = require("cors");
-
-const socketIO = require('socket.io')(http, {
-  cors: {
-    origin: "<http://localhost:3000>"
-  }
-});
-
-//👇🏻 Add this before the app.get() block
-socketIO.on('connection', (socket) => {
-  console.log(`⚡: ${socket.id} user just connected!`);
-
-  socket.on("singIn", (test) => {
-    console.log(test);
-  });
-
-  socket.on('disconnect', () => {
-    socket.disconnect()
-    console.log('🔥: A user disconnected');
-  });
-});
-
-app.get("/api", (req, res) => {
-  res.json({
-    message: "Hello world",
-  });
-});
-
-app.listen(PORT, () => {
-  console.log(`Server listening on ${PORT}`);
-});

bob_party/initSocket.js

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

bob_party/server.js

@@ -0,0 +1,22 @@
+const express = require('express');
+const app = express();
+const http = require('http');
+const server = http.createServer(app);
+const { Server } = require("socket.io");
+const io = new Server(server);
+
+const connectUsers = []
+
+io.on('connection', (socket) => {
+  console.log(socket.id)  
+
+  socket.on('joinRoom', ({username}) => {
+    connectUsers.push(username)
+
+    socket.emit('roomJoined', connectUsers)
+  });
+});
+
+server.listen(3000, () => {
+  console.log('listening on *:3000');
+});

bob_party/src/Games/CookieClicker/cookieClicker.tsx

@@ -8,6 +8,7 @@ import {
   Image,
   TouchableHighlight,
   Alert,
+  ImageBackground,
 } from 'react-native'
 import { MANAGER_MATCH, MANAGER_USER } from '../../../appManagers';
 import { useMatchStore } from '../../context/matchContext';
@@ -114,20 +115,21 @@ function CookieClicker(props: { navigation: any}){
 
   return (
     <View style={styles.container}>
-          <View >
+      <ImageBackground source={{ uri: "https://i0.wp.com/lesfoliesdejenny.fr/wp-content/uploads/2021/12/5.png?w=1080&ssl=1" }} resizeMode="cover" style={styles.image}>
-            <Text>
+        <View style={styles.containerTop}>
+          <Text style={styles.cout}>
             Timer: {timer}
           </Text>
           <TouchableHighlight onPress={onPressCookie} >
             <Image style={styles.photo} source={{ uri: 'https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY/raw/branch/Persistance/bob_party/assets/ImagesJeux/CookieClicker/ChristmasCookie.png' }} />
           </TouchableHighlight>
-            <Text>
+          <Text style={styles.cout}>
             Argent {money}
           </Text>
-            <Text>
+          <Text style={styles.cout}>
             Points {count}
           </Text>
-          </View>
+        
         <View style={styles.containerRight}>
           <TouchableHighlight onPress={onPressGrandma}>
             <Image style={styles.photo} source={{ uri: 'https://codefirst.iut.uca.fr/git/BOB_PARTEAM/BOB_PARTY/raw/branch/Persistance/bob_party/assets/ImagesJeux/CookieClicker/ChristmasGrandma.png' }} />
@@ -173,14 +175,19 @@ function CookieClicker(props: { navigation: any}){
               Cost {portalCost}
             </Text>
           </View>
+          </View>
 
         </View>
+      </ImageBackground>
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
+  },
+  containerTop:{
     top: 75,
     margin: 10,
     flex: 1,
@@ -190,7 +197,6 @@ const styles = StyleSheet.create({
   containerRight: {
     flex: 1,
     flexWrap: "wrap",
-    top: 100,
     marginBottom: 20,
     left: 100,
   },
@@ -208,12 +214,18 @@ const styles = StyleSheet.create({
     marginBottom: 10
   },
   photo: {
-    width: 50,
+    width: 75,
-    height: 100
+    height: 75
   },
   cout: {
-    marginBottom: 20
+    marginBottom: 20,
-  }
+    color: "white",
+    fontSize: 15
+  },
+  image: {
+    flex: 1,
+    justifyContent: "center"
+  },
 
 })