From 47bca7bd6534a81de62eef15d08d40e5c3989f05 Mon Sep 17 00:00:00 2001 From: CyberCitizen01 Date: Mon, 22 Feb 2021 21:13:43 +0530 Subject: [PATCH 1/3] Complete 2 player game anyone who comes first and starts the game at http://localhost:3000 is the first user and the someone who is already or who comes after game has started is notified of starting of the game and thus he can also participate in it by clicking GO. After that any of the two can either replay or replay by changing their name or just perform a rematch(rematch is in progress). Replay, simply make new guesses and replay by changing name option starts the game but let's you change your name. Note that, once a game starts a user cannot change his/her name until the game has ended, i.e. until the replay by changing button appears. This branch contains two-player game but the main branch will contain Multiplayer(Proposed to be at most 5)(still in progress as of now). --- public/index.html | 54 +++++++++++++------ public/js/index.js | 92 +++++++++++++++++++++++++++------ server/server.js | 126 ++++++++++++++++++++++++++++++++------------- 3 files changed, 202 insertions(+), 70 deletions(-) diff --git a/public/index.html b/public/index.html index 6bb94fa..dbffaf4 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,6 @@ - MyDice @@ -19,24 +18,45 @@

Hello, Let us play some dice game!

-
-
-
-
- ... -
-

Random Dice

-

The person who gets the largest number WINS!!

-

Write your name, and click GO to start the game

-

When someone starts the game, write your name and click GO to know who is the Lucky-Winner among two

-
- - -
-

+
+
+
+
+
+
+ ... +
+

Random Dice

+

The person who gets the largest number WINS!!

+

Write your name, and click GO to start the game

+

When someone starts the game, write your name and click GO to know who is the Lucky-Winner among two, and click replay if you want a rematch between you

+
+ + +
+
+
-
+
+
+
+
+
+
+
+
+

Hey..

+

+

+
+
+ +
+
+
+
+
diff --git a/public/js/index.js b/public/js/index.js index 996c709..85b8c4d 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -1,17 +1,41 @@ let socket = io(); var meUser; +var status='start'; + +window.onload=function(){ + document.getElementById("replay").style.display='none'; + document.getElementById("ch-name").style.display='none'; + document.getElementById("rematch").style.display='none'; + socket.emit('Cache'); + socket.on('call',function(data){ + console.log('Start play'); + document.getElementById('result').innerHTML = data+' has started the game!'; + }); +} socket.on('connect',function(){ console.log('You are connected to the server'); + // socket.on('call',function(data){ + // console.log('Start play'); + // document.getElementById('result').innerHTML = data.Name+' has started the game!'; + // }); + + document.querySelector('#GO-btn').addEventListener('click', function(event){ event.preventDefault(); console.log('Submit is cancelled'); meUser = document.getElementById("input").value; - socket.emit('myNum', { - Name: meUser, - Num: Math.floor((Math.random() * 6) + 1) - }); + document.getElementById("input").disabled = true; + if(status=='start'){ + console.log('play started'); + socket.emit('myNum',meUser); + document.getElementById('GO-btn').style.display='none'; + } + else if(status=='change'){ + console.log('ch-name'); + socket.emit('NameChange',meUser); + } }) }); @@ -23,19 +47,55 @@ socket.on('yourNum',function(data){ console.log(data); }); -socket.on('call',function(data){ - console.log('Start play'); - document.getElementById('result').innerHTML = data.Name+' has started the game!'; -}); +socket.on('winner',function(data){ + console.log('The winner is '+data.Name+' as he got '+data.Num); + document.getElementById('GO-btn').style.display='none'; + document.getElementById('result').innerHTML = 'The winner is '+data.Name+' as he got '+data.Num+'.\r'+data.User1.Name+' got '+data.User1.Num+' and '+data.User2.Name+' got '+data.User2.Num; + document.getElementById('replay').style.display='block'; + document.getElementById('ch-name').style.display='block'; -socket.on('re-evaluate',function(){ - socket.emit('myNum', { - Name: meUser, - Num: Math.floor((Math.random() * 6) + 1) + document.querySelector('#replay').addEventListener('click', function(event){ + event.preventDefault(); + console.log('Replay'); + document.getElementById('result').innerHTML =''; + socket.emit('replay-msg',meUser); + //socket.emit('myNum', meUser); + }); + + document.querySelector('#ch-name').addEventListener('click', function(event){ + event.preventDefault(); + document.getElementById('ch-name').style.display='none'; + document.getElementById('GO-btn').style.display='block'; + document.getElementById("input").disabled = false; + document.getElementById('msg').innerHTML = ''; + document.getElementById('result').innerHTML ='Change your name and hit GO'; + status='change'; + console.log(status); + + // console.log('ch-name & replay'); + // meUser = document.getElementById("input").value; + // socket.emit('replay-msg',meUser); + //socket.emit('myNum', meUser); }); +}); + +socket.on('replay-msg-a',function(data){ + if(data==meUser){ + document.getElementById('msg').innerHTML = 'You have restarted the game!'; + } + else if(data!=meUser){ + document.getElementById('msg').innerHTML = data+' has restarted the game!'; + } + + document.getElementById('replay').style.display='none'; +}); + +socket.on('NameReq',function(){ + socket.emit('NameReq-ans',meUser); }) -socket.on('winner',function(data){ - console.log('The winner is '+data.Name+' as he got '+data.Num); - document.getElementById('result').innerHTML = data.User1.Name+' got '+data.User1.Num+' and '+data.User2.Name+' got '+data.User2.Num+' and '+'The winner is '+data.Name+' as he got '+data.Num; -}); \ No newline at end of file + +// socket.on('call',function(data){ +// console.log('Start play'); +// document.getElementById('result').innerHTML = data.Name+' has started the game!'; +// }); \ No newline at end of file diff --git a/server/server.js b/server/server.js index e3931c2..5a9e0ca 100644 --- a/server/server.js +++ b/server/server.js @@ -12,58 +12,110 @@ let io = socketIO(server); app.use(express.static(publicpath)); -var User1 = { +var User1 ={ Name: '', - Num:0 -}; -var User2 = { + Num: 0 +} +var User2 ={ + Name: '', + Num: 0 +} +var WIN = { Name: '', - Num:0 + Num:0, + User1: User1, + User2: User2 }; +var u1 = '1', u2 = '1'; +var state = 'start'; +var chUser=''; + +function maxGen(U1, U2){ + var s1=U1; + var s2=U2; -var i = 0; + User1.Name=s1; + User1.Num=Math.floor((Math.random() * 6) + 1); + User2.Name=s2; + User2.Num=Math.floor((Math.random() * 6) + 1); -//console.log(WIN.Name == 'k' ); -//console.log(WIN.Num); + if(User1.Num==User2.Num){ + maxGen(s1, s2); + } + else if(User1.Num!=User2.Num){ + WIN.Num = Math.max(User1.Num, User2.Num); + if(WIN.Num == User1.Num && WIN.Num != User2.Num){ + WIN.Name = User1.Name; + } + else if(WIN.Num == User2.Num && WIN.Num != User1.Num){ + WIN.Name = User2.Name; + } + } +}; io.on('connection',function(socket){ - console.log('You are connected to the client'); + socket.on('Cache',function(){ + if(u1!='1'){ + socket.emit('call',u1) + } + }) + console.log('You are connected to the client!!!'); socket.on('myNum', function(data){ - console.log(data); - io.emit('yourNum',data); - if(i==0){ - User1 = data; - console.log('User1: ',User1); - i++; - io.emit('call',User1); + socket.emit('yourNum',data); + if(state=='start'){ + u1 = data; + console.log('User1: ',u1); + state='User1 started'; + io.emit('call',u1); } - else{ - User2 = data; - console.log('User2: ',User2); - i--; - var WIN = { - Name: '', - Num:0, - User1: User1, - User2: User2 - }; - WIN.Num = Math.max(User1.Num, User2.Num); - if(WIN.Num == User1.Num && WIN.Num != User2.Num){ - WIN.Name = User1.Name; - } - else if(WIN.Num == User2.Num && WIN.Num != User1.Num){ - WIN.Name = User2.Name; + else if(state=='User1 started'){ + u2 = data; + console.log('User2: ',u2); + state='win'; + if(state=='win'){ + maxGen(u1, u2); + io.emit('winner',WIN); + state='start' } - else{ - io.emit('re-evaluate'); - } - io.emit('winner',WIN); } + }); + + socket.on('replay-msg',function(data){ + if(data==u1 && data!=u2){ + u1=data; + maxGen(u1, u2); + io.emit('replay-msg-a',u1); + } + else if(data==u2 && data!=u1){ + u2=data; + maxGen(u1, u2); + io.emit('replay-msg-a',u2); + } + io.emit('winner',WIN); }); + socket.on('NameChange',function(data){ + chUser=data; + socket.broadcast.emit('NameReq'); + }) + + socket.on('NameReq-ans',function(data){ + if(data==u1 && data!=u2){ + u2=chUser; + maxGen(u1, u2); + io.emit('replay-msg-a',u2); + } + else if(data==u2 && data!=u1){ + u1=chUser; + maxGen(u1, u2); + io.emit('replay-msg-a',u1); + } + io.emit('winner',WIN); + }) + socket.on('disconnect',function(){ console.log('You are disconnected to the client'); - }) + }); }) server.listen(port, function(){ From 399d038be40cf687da1b5af5e778a31ce4338efe Mon Sep 17 00:00:00 2001 From: Mohammad Rafivulla <77384412+CyberCitizen01@users.noreply.github.com> Date: Mon, 22 Feb 2021 22:02:11 +0530 Subject: [PATCH 2/3] a little twikking --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 1311108..5d500a9 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,6 @@ # MyDice Uses socket.io + +- See the first comment on this [link](https://github.com/CyberCitizen01/MyDice/pull/2) to understand about two-player game(two-user game) + +***(Best for beginning on ``node.js`` and ``socket.io``)*** From f475d7fdbeaa4b60102169c10569f5d2ed26119d Mon Sep 17 00:00:00 2001 From: Mohammad Rafivulla <77384412+CyberCitizen01@users.noreply.github.com> Date: Mon, 22 Feb 2021 22:09:11 +0530 Subject: [PATCH 3/3] `` --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5d500a9..58c4d1b 100644 --- a/README.md +++ b/README.md @@ -3,4 +3,4 @@ Uses socket.io - See the first comment on this [link](https://github.com/CyberCitizen01/MyDice/pull/2) to understand about two-player game(two-user game) -***(Best for beginning on ``node.js`` and ``socket.io``)*** +***(Best for beginning on `node.js` and `socket.io`)***