Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Complete 2 player game #2

Closed
wants to merge 3 commits into from
Closed

Complete 2 player game #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
47bca7b
Complete 2 player game
CyberCitizen01 Feb 22, 2021
399d038
a little twikking
CyberCitizen01 Feb 22, 2021
f475d7f
``
CyberCitizen01 Feb 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`)***
54 changes: 37 additions & 17 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<script src='/socket.io/socket.io.js'></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="/style/style.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<title>MyDice</title>
Expand All @@ -19,24 +18,45 @@
</div>
</nav>
<div><h1>Hello, Let us play some dice game!</h1></div>
<div class="mx-5">
<div class="ps-0">
<div class="card text-center" style="width: 20rem;">
<div class="shadow-lg p-3 mb-5 bg-body rounded">
<img src="/style/dice.svg.png" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="card-title">Random Dice</h2>
<p class="card-text">The person who gets the largest number WINS!!</p>
<p class="fs-5">Write your name, and click GO to start the game</p>
<p class="fs-5">When someone starts the game, write your name and click GO to know who is the Lucky-Winner among two</p>
<form>
<input type="text" id="input" name="user" placeholder="Call me as">
<button id="GO-btn" type="submit" class="btn btn-dark">GO</button>
</form>
<h3 id="result"></h3>
<div class="row">
<div class="col-sm-5">
<div class="mx-5">
<div class="ps-0">
<div class="card text-center" style="width: 30rem;">
<div class="shadow-lg p-3 mb-5 bg-body rounded">
<img src="/style/dice.svg.png" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="card-title">Random Dice</h2>
<p class="card-text">The person who gets the largest number WINS!!</p>
<p class="fs-5">Write your name, and click GO to start the game</p>
<p class="fs-5">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</p>
<form>
<input type="text" id="input" name="user" placeholder="Call me as">
<button id="GO-btn" type="submit" class="btn btn-dark">GO</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="mx-5">
<div class="ps-0">
<div class="card text-center" style="width: 30rem;">
<div class="shadow-lg p-3 mb-5 bg-body rounded">
<div class="card-body">
<h2 class="card-title">Hey..</h2>
<h4 id="msg"></h4>
<h3 id="result"></h3>
<button id="replay" type="submit" class="btn btn-dark">PLAY AGAIN</button><br>
<button id="ch-name" type="submit" class="btn btn-dark">CHANGE NAME AND PLAY AGAIN</button><br>
<input type="button" id="rematch" value = "PLAY A NEW MATCH" class="btn btn-dark" onclick="history.go(0)" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript' src="/js/index.js"></script>
Expand Down
92 changes: 76 additions & 16 deletions public/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
})
});

Expand All @@ -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;
});

// socket.on('call',function(data){
// console.log('Start play');
// document.getElementById('result').innerHTML = data.Name+' has started the game!';
// });
126 changes: 89 additions & 37 deletions server/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand Down