céation de rooms fonctionelle

2 years ago · bc79be2430
parent 25ba189bfa
commit bc79be2430
8 changed files with 81 additions and 18 deletions
--- a/src/app.js
+++ b/src/app.js
@ -6,7 +6,7 @@ const http = require('http').createServer(app);
 const clientPath =  `${__dirname}/public/`;
 const port = 8080;

-let roomArray = ["test", "pomme"]
+let roomArray = []

 http.listen(port, () => {
    console.log(`Listening on http://localhost${port}`)
--- a/src/public/clientSocket.js
+++ b/src/public/clientSocket.js
@ -17,7 +17,12 @@ export default class ClientSocket{
    getRoomList(){
        sock.emit('get rooms');
        sock.on('list rooms', (roomArray) => {
-            console.log(roomArray);
+            let pageBuilder = new PageBuilder;
+            pageBuilder.displayRooms(roomArray);
        });
    }
+
+    sendPlayerData(player){
+        sock.emit('player data', player);
+    }
 }
--- a/src/public/main.js
+++ b/src/public/main.js
@ -1,25 +1,33 @@
 import Player from './player.js';
-import ClientSocket from './socket.js'
+import ClientSocket from './clientSocket.js'

+const HIDE_ELEMENT = 'hidden-element';

 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const roomId = urlParams.get('room');
-
 let socket = new ClientSocket();

 socket.getRoomList();

 const onCreateRoom = function (event){
    event.preventDefault();
-    const username = document.querySelector('#username').value;
+    const form = document.querySelector('#form');
+    const waitingArea = document.querySelector('#waiting-area');
+    const username = document.querySelector('#username');
+    let usernameValue = username.value;
+    let player;

    if(roomId){
-        console.log(new Player(false, roomId, username, socket.id));
+        player = new Player(false, roomId, usernameValue, socket.id);
    }else{
-        console.log(new Player(true, "", username, socket.id));
+        player = new Player(true, "", usernameValue, socket.id);
    }

+    socket.sendPlayerData(player)
+    
+    form.classList.add(HIDE_ELEMENT);
+    waitingArea.classList.remove(HIDE_ELEMENT);
 }

 document.querySelector('#form').addEventListener('submit',onCreateRoom);
--- a/src/public/multiplayerHomePage.html
+++ b/src/public/multiplayerHomePage.html
@ -6,7 +6,7 @@
    <title>StudentJS</title>
 </head>
 <body>
-    <div class="title">
+    <div class="centered-element">
        <h1>Student JS</h1>
        <h2>Partie multijoueurs</h2>
    </div>
@ -25,8 +25,8 @@
        </form>
    </div>

-    <div class="hidden-element" id="waiting-area">
-        <p>Waiting for other player</p>
+    <div id="waiting-area" class="centered-element hidden-element">
+        En attente d'autre joueur
    </div>

    <div id="share-card" class="hidden-element">
--- a/src/public/pageBuilder.js
+++ b/src/public/pageBuilder.js
@ -8,4 +8,26 @@ export default class PageBuilder{
        newElement.textContent = content;
        parent.appendChild(newElement);
    }
+
+    displayRooms(roomArray){
+        let html = "";
+        const roomsList = document.querySelector('#rooms-list');
+        const roomsCard = document.querySelector('#rooms-card');
+
+        console.log(roomArray);
+        console.log(roomArray.length);
+
+        if(roomArray.length > 0){
+            roomArray.forEach(room => {
+                if(room.players.length < 4){
+                    roomsCard.classList.remove('hidden-element');
+                    html += `<li>
+                            <p>Salon de ${room.players[0].username} - ${room.id}</p>
+                            <button class="join-room" data-room="${room.id}">Rejoindre</button>
+                            </li>`;
+                }
+            });
+        }
+        roomsList.innerHTML = html;
+    }
 }
--- a/src/public/styles/multiplayerHomePage.css
+++ b/src/public/styles/multiplayerHomePage.css
@ -1,4 +1,4 @@
-.title{
+.centered-element{
    display: flex;
    flex-direction: column;
    align-items: center;
--- a/src/room.js
+++ b/src/room.js
@ -1,10 +1,14 @@
-export default class Room{
+function roomId(){
+    return Math.random().toString(36).substr(2, 9);
+}
+
+class Room{
    constructor(){
-        this.id = roomId();
+        this.id = roomId()
        this.players = []
    }   
-
-    roomId(){
-        return Math.random().toString(36).substr(2, 9);
 }
+
+module.exports = {
+    Room,
 }
--- a/src/server-socket.js
+++ b/src/server-socket.js
@ -1,5 +1,6 @@
 const { io } = require(`${__dirname}/app.js`);
 const { roomArray } = require(`${__dirname}/app.js`);
+const { Room } = require(`${__dirname}/room.js`);

 // le socket s'ouvre lors de la connection d'un client
 io.on('connection', (socket) => {
@ -15,6 +16,29 @@ io.on('connection', (socket) => {
    });

    socket.on('get rooms', () => {
-        io.to(socket.id).emit('list room', roomArray);
+        io.to(socket.id).emit('list rooms', roomArray);
    })
+
+    socket.on('player data', (player) => {
+        console.log(`[connection] ${player.username}`);
+    
+        let room = null;
+
+        if(!player.roomId){
+            room = new Room()
+            roomArray.push(room);
+            console.log(`[create room] - ${room.id} - ${player.username}`);
+        }else{
+            room = roomArray.find(r => r.id === player.roomId);
+
+            if(room === undefined){
+                return;
+            }
+        }
+
+        player.roomId = room.id;
+        room.players.push(player);
+
+        socket.join(room.id);
+    });
 });