StudentBrosJS
/
StudentBrosJS
3
0
Fork 0
Code Issues 16 Pull Requests Packages Projects 2 Releases Wiki Activity

céation de rooms fonctionelle

Browse Source
pull/27/head
Vincent ASTOLFI 2 years ago
parent 25ba189bfa
commit bc79be2430
8 changed files with 81 additions and 18 deletions
Show Stats Download Patch File Download Diff File

2
src/app.js
Unescape View File

@ -6,7 +6,7 @@ const http = require('http').createServer(app);
const clientPath = `${__dirname}/public/`; const clientPath = `${__dirname}/public/`;
const port = 8080; const port = 8080;
let roomArray = ["test", "pomme"] let roomArray = []
http.listen(port, () => { http.listen(port, () => {
console.log(`Listening on http://localhost${port}`) console.log(`Listening on http://localhost${port}`)

7
src/public/socket.js → src/public/clientSocket.js
Unescape View File

@ -17,7 +17,12 @@ export default class ClientSocket{
getRoomList(){ getRoomList(){
sock.emit('get rooms'); sock.emit('get rooms');
sock.on('list rooms', (roomArray) => { sock.on('list rooms', (roomArray) => {
console.log(roomArray); let pageBuilder = new PageBuilder;
pageBuilder.displayRooms(roomArray);
}); });
} }
sendPlayerData(player){
sock.emit('player data', player);
}
} }

18
src/public/main.js
Unescape View File

@ -1,25 +1,33 @@
import Player from './player.js'; 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 queryString = window.location.search;
const urlParams = new URLSearchParams(queryString); const urlParams = new URLSearchParams(queryString);
const roomId = urlParams.get('room'); const roomId = urlParams.get('room');
let socket = new ClientSocket(); let socket = new ClientSocket();
socket.getRoomList(); socket.getRoomList();
const onCreateRoom = function (event){ const onCreateRoom = function (event){
event.preventDefault(); 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){ if(roomId){
console.log(new Player(false, roomId, username, socket.id)); player = new Player(false, roomId, usernameValue, socket.id);
}else{ }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); document.querySelector('#form').addEventListener('submit',onCreateRoom);

6
src/public/multiplayerHomePage.html
Unescape View File

@ -6,7 +6,7 @@
<title>StudentJS</title> <title>StudentJS</title>
</head> </head>
<body> <body>
<div class="title"> <div class="centered-element">
<h1>Student JS</h1> <h1>Student JS</h1>
<h2>Partie multijoueurs</h2> <h2>Partie multijoueurs</h2>
</div> </div>
@ -25,8 +25,8 @@
</form> </form>
</div> </div>
<div class="hidden-element" id="waiting-area"> <div id="waiting-area" class="centered-element hidden-element">
<p>Waiting for other player</p> En attente d'autre joueur
</div> </div>
<div id="share-card" class="hidden-element"> <div id="share-card" class="hidden-element">

22
src/public/pageBuilder.js
Unescape View File

@ -8,4 +8,26 @@ export default class PageBuilder{
newElement.textContent = content; newElement.textContent = content;
parent.appendChild(newElement); 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;
}
} }

2
src/public/styles/multiplayerHomePage.css
Unescape View File

@ -1,4 +1,4 @@
.title{ .centered-element{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

16
src/room.js
Unescape View File

@ -1,10 +1,14 @@
export default class Room{ function roomId(){
return Math.random().toString(36).substr(2, 9);
}
class Room{
constructor(){ constructor(){
this.id = roomId(); this.id = roomId()
this.players = [] this.players = []
} }
}
roomId(){ module.exports = {
return Math.random().toString(36).substr(2, 9); Room,
}
} }

26
src/server-socket.js
Unescape View File

@ -1,5 +1,6 @@
const { io } = require(`${__dirname}/app.js`); const { io } = require(`${__dirname}/app.js`);
const { roomArray } = 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 // le socket s'ouvre lors de la connection d'un client
io.on('connection', (socket) => { io.on('connection', (socket) => {
@ -15,6 +16,29 @@ io.on('connection', (socket) => {
}); });
socket.on('get rooms', () => { 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);
});
}); });
Write Preview
Loading…
Cancel
Save