diff --git a/client/public/index.html b/client/public/index.html index f7fe5a7b7a65ac587b0aa4bd81eaa1b5fc6dbd0e..cab5423d9e456564f1b841a5f3ada33e149c2be3 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -10,6 +10,7 @@ <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Karantina&display=swap" rel="stylesheet"> + <script src="./build/index.bundle.js" defer></script> </head> <body> <section class="home"> diff --git a/client/src/Player.js b/client/src/Player.js index 5db79ee0b8f1826e83bb10d9482af5caca2dc1de..843be20727f1a211cebf1eef56531ecbdbce9fbc 100644 --- a/client/src/Player.js +++ b/client/src/Player.js @@ -1,6 +1,7 @@ class Player { image = new Image(); - constructor(x, y, radius, imageFolder) { + constructor(x, y, radius, imageFolder, id) { + this.id = id; this.x = x; this.y = y; this.radius = radius; diff --git a/client/src/main.js b/client/src/main.js index fbadd45d7a5723ff441ae750f01656877560210a..eae0349c44bef3df04398fdf81a0c2963fb83296 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -1,5 +1,6 @@ import Player from "./Player.js"; import { Sushi } from "./Ressources.js"; +import { io } from "socket.io-client"; const Main = (playerName, playerCharacter) => { const canvas = document.querySelector(".map"); @@ -9,6 +10,10 @@ const Main = (playerName, playerCharacter) => { canvas.height = document.documentElement.clientHeight; ctx.width = 6000; ctx.height = 3340; + const xStart = canvas.width / 2; + const xEnd = ctx.width - canvas.width / 2; + const yStart = canvas.height / 2; + const yEnd = ctx.height - canvas.height / 2; window.addEventListener("resize", (e) => { e.preventDefault(); @@ -16,15 +21,9 @@ const Main = (playerName, playerCharacter) => { canvas.height = document.documentElement.clientHeight; }); - const image = new Image(); - image.src = "/images/goku.png"; const backgroundImage = new Image(); backgroundImage.src = "/images/map.jpg"; - let folder = playerCharacter; - - const player = new Player(canvas.width / 2, canvas.height / 2, 20, folder); - document.addEventListener("keydown", (event) => { event.preventDefault(); // Mettre à jour la direction en fonction des touches enfoncées @@ -71,57 +70,94 @@ const Main = (playerName, playerCharacter) => { } }); - let sushis = []; - - for (let i = 0; i < 1500; i++) { - const xStart = canvas.width / 2; - const xEnd = ctx.width - canvas.width / 2; - const yStart = canvas.height / 2; - const yEnd = ctx.height - canvas.height / 2; - const x = Math.random() * (xEnd - xStart) + xStart; - const y = Math.random() * (-yStart + yEnd) + yStart; - console.log(x, y); - const sushi = new Sushi(x, y, 5); - sushis.push(sushi); - } - - let mouseX; - let mouseY; + const socket = io(); - canvas.addEventListener("mousemove", (event) => { - event.preventDefault(); - mouseX = event.clientX; - mouseY = event.clientY; - - player.moveTo(mouseX, mouseY, canvas); + let sushis = []; + socket.on("sushis", (data) => { + for (let i = 0; i < data?.length; i++) { + const sushi = new Sushi( + data[i].x * (xEnd - xStart) + xStart, + data[i].y * (-yStart + yEnd) + yStart, + 5 + ); + sushis.push(sushi); + } }); - function update() { - ctx.save(); - ctx.clearRect(0, 0, ctx.width, ctx.height); - ctx.beginPath(); - - // Déplacer le joueur en fonction de la direction - const cameraX = canvas.width / 2 - player.x; - const cameraY = canvas.height / 2 - player.y; - ctx.translate(cameraX, cameraY); - // Déplacer le contexte pour centrer la caméra ssur le joueur - // Dessiner le joueur et les autres éléments du jeu - ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height); - sushis.forEach((sushi) => { - sushi.draw(ctx); + let folder = playerCharacter; + let userId; + + function getUserId() { + return new Promise((resolve, reject) => { + socket.on("user", (data) => { + userId = data; + resolve(userId); + }); }); + } - //player.move(ctx); - player.eatSushi(sushis); - player.draw(ctx); - player.move(ctx, mouseX, mouseY); - ctx.restore(); - // Déplacer le contexte pour centrer la caméra sur le joueur - //ctx.translate(-cameraX, -cameraY); - requestAnimationFrame(update); + async function myFunction() { + try { + const userId = await getUserId(); + const player = new Player( + Math.random() * (xEnd - xStart) + xStart, + Math.random() * (-yStart + yEnd) + yStart, + 20, + folder, + userId + ); + + socket.emit("newUser", player); + + let allUsers = []; + socket.on("allUsers", (datas) => { + allUsers = datas; + }); + + let mouseX; + let mouseY; + + canvas.addEventListener("mousemove", (event) => { + event.preventDefault(); + mouseX = event.clientX; + mouseY = event.clientY; + + player.moveTo(mouseX, mouseY, canvas); + }); + + function update() { + ctx.save(); + ctx.clearRect(0, 0, ctx.width, ctx.height); + ctx.beginPath(); + const cameraX = canvas.width / 2 - player.x; + const cameraY = canvas.height / 2 - player.y; + ctx.translate(cameraX, cameraY); + ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height); + sushis.forEach((sushi) => { + sushi.draw(ctx); + }); + allUsers.forEach((user) => { + const otherPlayer = new Player( + user.x, + user.y, + user.radius, + user.imageFolder, + user.id + ); + otherPlayer.draw(ctx); + }); + player.eatSushi(sushis); + player.move(ctx, mouseX, mouseY); + ctx.restore(); + socket.emit("updateUser", player); + requestAnimationFrame(update); + } + update(); + } catch (error) { + console.error(error); + } } - update(); + myFunction(); }; export default Main; diff --git a/package.json b/package.json index d4cc7bad9c5acb5159b95c575d12c35a07250f12..3cd48cb5fee8e0f13dec38a1b6c33a78d0355780 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,9 @@ "@babel/preset-env": "^7.20.2", "@types/node": "^18.15.11", "babel-loader": "^9.1.2", + "nodemon": "^2.0.22", "prettier": "^2.8.3", + "ts-node": "^10.9.1", "webpack": "^5.75.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" @@ -29,6 +31,7 @@ "dotenv": "^16.0.3", "express": "^4.18.2", "fs": "^0.0.1-security", - "nodemon": "^2.0.22" + "socket.io": "^4.6.1", + "socket.io-client": "^4.6.1" } } diff --git a/server/index.js b/server/index.js index a953293e25ac3322923c7c74f8482fd8a1309ac7..bf2ed3a134596b60d959cc83c1d5cde3ac1770d2 100644 --- a/server/index.js +++ b/server/index.js @@ -2,11 +2,37 @@ import express from "express"; import http from "http"; const app = express(); const httpServer = http.createServer(app); +import { Server as IOServer } from "socket.io"; app.use("/", express.static("client/public")); +let users = []; + +let sushis = []; +for (let i = 0; i < 1500; i++) { + sushis.push({ x: Math.random(), y: Math.random() }); +} + +const io = new IOServer(httpServer); +io.on("connection", (socket) => { + io.emit("user", socket.id); + io.emit("sushis", sushis); + + socket.on("newUser", (data) => { + users.push(data); + socket.emit("allUsers", users); + }); + socket.on("updateUser", (data) => { + for (let i = 0; i < users.length; i++) { + if (users[i].id === data.id) { + users[i] = data; + } + } + socket.emit("allUsers", users); + }); +}); + const port = 8000; -console.log(port); httpServer.listen(port, () => { console.log(`Think http://localhost:${port}, Think !/`); }); diff --git a/webpack.config.js b/webpack.config.js index 11d9bf42d9ae0894a1aa7bdd4e4914b4ad656ba7..406671449465d4e65e72d1f6e0e9259608dd8bfe 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,11 +2,14 @@ import path from "path"; export default { // Fichier d'entrée : - entry: "./client/src/index.js", + entry: { + index: "./client/src/index.js", + main: "./client/src/main.js", + }, // Fichier de sortie : output: { path: path.resolve(process.cwd(), "./client/public/build"), - filename: "main.bundle.js", + filename: "[name].bundle.js", publicPath: "/build/", }, // compatibilité anciens navigateurs (si besoin du support de IE11 ou android 4.4) @@ -15,7 +18,7 @@ export default { module: { rules: [ { - test: /\.js$/, // tous les fichiers js ... + test: /.js$/, // tous les fichiers js ... exclude: /node_modules/, // ... sauf le dossier node_modules ... use: { // ... seront compilés par babel !