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

Implement Multiplayer Support #81

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Implement Multiplayer Support #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f0f874d
add multiplayer support
huiyun862 Oct 10, 2020
a290834
reset highest score on new game
huiyun862 Oct 10, 2020
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
160 changes: 90 additions & 70 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,59 @@
GAME RULES:

- The game has 2 players, playing in rounds
- In each turn, a player rolls a dice as many times as he whishes. Each result get added to his ROUND score
- In each turn, a player rolls a dice as many times as he wishes. Each result get added to his ROUND score
- BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn
- The player can choose to 'Hold', which means that his ROUND score gets added to his GLBAL score. After that, it's the next player's turn
- The first player to reach 100 points on GLOBAL score wins the game

*/

function generatePlayerList() {
let playersWindow = document.getElementById('players-window');
playersWindow.innerHTML = '';
for(let i = 0; i < scores.length; i++) {
let playerItem = document.createElement('div');
if(i == 0) {
playerItem.setAttribute('class', 'player-item active');
}else{
playerItem.setAttribute('class', 'player-item');
}
playerItem.setAttribute('id', 'player-' + i);
let playerName = document.createElement('div');
playerName.setAttribute('class', 'player-name');
playerName.innerHTML = 'Player ' + (i+1);
playerItem.appendChild(playerName);
let playerScore = document.createElement('div');
playerScore.setAttribute('class', 'player-score');
playerScore.setAttribute('id', 'score-' + i);
playerScore.innerHTML = '0';
playerItem.appendChild(playerScore);
playersWindow.appendChild(playerItem);
}
}

console.log("start");
let scores = [0, 0];
let activeScores = 0;
let activePlayer = 0;
let activePlayer = 0; //index for scores
let doubleSix = false;
let highestScore = 0;
generatePlayerList();

// console.log(dice)
// document.querySelector("#current-" + activePlayer).textContent = dice
// document.querySelector('#current-'+ activePlayer).innerHTML = '<em>' + dice + '</em>';
let score0 = document.getElementById('score-0');
let score1 = document.getElementById('score-1');
let current0 = document.getElementById('current-0');
let current1 = document.getElementById('current-1');
let activeScoreDom = document.getElementById('current-player-score');
let currentScoreDom = document.getElementById('current-player-temp-score');
// let score0 = document.getElementById('score-0');
// let score1 = document.getElementById('score-1');
// let current0 = document.getElementById('current-0');
// let current1 = document.getElementById('current-1');
let newGame = document.querySelector('.btn-new');

let highestScoreEl = document.querySelector('.highest-score span');
let x = document.querySelector('#current-' + activePlayer).textContent;
console.log('x is ' + x);
document.querySelector('.dice').style.display = 'none';
let bottomRoll = document.querySelector('.btn-roll');
console.log(bottomRoll);



bottomRoll.addEventListener('click', function () {
Expand All @@ -47,19 +71,13 @@ bottomRoll.addEventListener('click', function () {
} else {
if (dice == 6){
if (doubleSix){
looseScore()
looseScore();
}
doubleSix = true
}
doubleSix = false;
activeScores += dice;

if (activePlayer == 0) {
current0.textContent = activeScores;
} else {
current1.textContent = activeScores;
}

currentScoreDom.textContent = activeScores;
}

});
Expand All @@ -69,82 +87,84 @@ buttonHold.addEventListener('click', function () {
updateHighestScore(scores[activePlayer]);
checkWinner();
activeScores = 0;
if (activePlayer == 0) {
score0.textContent = scores[0].toString();
current0.textContent = '0'
} else {
score1.textContent = scores[1].toString();
current1.textContent = '0'
}
nextPlayer()
// if (activePlayer == 0) {
// score0.textContent = scores[0].toString();
// current0.textContent = '0'
// } else {
// score1.textContent = scores[1].toString();
// current1.textContent = '0'
// }
//maybe have nextplayer updating UI
nextPlayer();
});

newGame.addEventListener('click', function () {
scores = [0, 0];
let playerCount = Number(document.getElementById('player-count').value);
if (isNaN(playerCount) || playerCount < 2 ) {
playerCount = 2;
}
scores = new Array(playerCount).fill(0);
activeScores = 0;
activePlayer = 0;
score0.textContent = '0';
score1.textContent = '0';
current0.textContent = '0';
current1.textContent = '0';
document.querySelector('.player-0-panel').classList.add('active');
document.querySelector('.player-1-panel').classList.remove('active');
document.querySelector('.dice').style.display = 'none'
highestScore = 0;
highestScoreEl.textContent = '0';
activeScoreDom.textContent = '0';
currentScoreDom.textContent = '0';
generatePlayerList();
document.querySelector('.dice').style.display = 'none';
});


function nextPlayer() {
if (activePlayer == 0) {

score0.textContent = scores[0].toString();
activeScores = 0;
current0.textContent = '0';
document.getElementById('score-' + activePlayer).textContent = scores[activePlayer].toString();
if(activePlayer >= scores.length - 1){
//switch player
activePlayer = 1;
//switch active state
changeActiveState();
} else {

score1.textContent = scores[1].toString();
activeScores = 0;
current1.textContent = '0';
activePlayer = 0;
}else{
//switch player
activePlayer = 0;
//switch active state
changeActiveState()
activePlayer++;
}
activeScoreDom.textContent = scores[activePlayer].toString();
activeScores = 0;
currentScoreDom.textContent = '0';
document.getElementById('current-player-name').textContent = 'Player ' + (activePlayer + 1);
//switch active state
changeActiveState(activePlayer);
}

function checkWinner() {
if (scores[0] >= 100) {
// if (scores[0] >= 100) {

document.querySelector('.player-0-panel').classList.add('winner');
document.querySelector('.player-0-panel').classList.add('active')
} else if (scores[1] >= 100) {
// // document.querySelector('.player-0-panel').classList.add('winner');
// // document.querySelector('.player-0-panel').classList.add('active')
// } else if (scores[1] >= 100) {

document.querySelector('.player-1-panel').classList.add('winner');
document.querySelector('.player-1-panel').classList.add('active')
// // document.querySelector('.player-1-panel').classList.add('winner');
// // document.querySelector('.player-1-panel').classList.add('active')
// }
if(scores[activePlayer] >= 100) {
document.getElementById('player-' + activePlayer).classList.add('winner');
}
}

function changeActiveState() {
document.querySelector('.player-0-panel').classList.toggle('active');
document.querySelector('.player-1-panel').classList.toggle('active');
document.querySelector('.dice').style.display = 'none'
function changeActiveState(playerIndex) {
// document.querySelector('.player-0-panel').classList.toggle('active');
// document.querySelector('.player-1-panel').classList.toggle('active');
if(playerIndex == 0){
document.getElementById('player-' + (scores.length - 1)).classList.remove('active');
}else{
document.getElementById('player-' + (playerIndex - 1)).classList.remove('active');
}
document.getElementById('player-' + playerIndex).classList.add('active');
document.querySelector('.dice').style.display = 'none';
}

function looseScore() {
console.log('loosing score');
activeScores = 0;
if (activePlayer == 0) {
scores[0] = 0;
score0.textContent = scores[0].toString();
current0.textContent = '0';
} else {
scores[1] = 0;
score1.textContent = scores[1].toString();
current1.textContent = '0';
}
scores[activePlayer] = 0;
activeScoreDom.textContent = scores[activePlayer].toString();
currentScoreDom.textContent = '0';
}


Expand All @@ -154,4 +174,4 @@ function changeTheme(checked) {
function updateHighestScore(score) {
if (score > highestScore) highestScore = score;
highestScoreEl.textContent = highestScore;
}
}
38 changes: 26 additions & 12 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,25 +23,39 @@

<div class="wrapper clearfix">
<span class="highest-score"><i class="ion-ios-flag"></i>Highest score : <span>0</span></span>
<div class="player-0-panel active">
<div class="player-name" id="name-0">Player 1</div>
<div class="player-score" id="score-0">0</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-0">0</div>
<div class="player-list-panel">
<div class="player-list" id="players-window">
<div class="player-item" id="player-0">
<div class="player-name" >Player 1</div>
<div class="player-score" id="score-0">0</div>
</div>
<div class="player-item"></div>
<div class="player-item"></div>
<div class="player-item"></div>
<div class="player-item"></div>
<div class="player-item"></div>
<div class="player-item"></div>
<div class="player-item"></div>
<div class="player-item"></div>
<div class="player-item"></div>
</div>
<div class="new-game-config">
<button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
<div>
<label >players:</label>
<input id="player-count" type="text">
</div>
</div>
</div>

<div class="player-1-panel">
<div class="player-name" id="name-1">Player 2</div>
<div class="player-score" id="score-1">0</div>
<div class="player-panel">
<div class="player-name" id="current-player-name">Player 1</div>
<div class="player-score" id="current-player-score">0</div>
<div class="player-current-box">
<div class="player-current-label">Current</div>
<div class="player-current-score" id="current-1">0</div>
<div class="player-current-score" id="current-player-temp-score">0</div>
</div>
</div>

<button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
<button class="btn-roll"><i class="ion-ios-loop"></i>Roll dice</button>
<button class="btn-hold"><i class="ion-ios-download-outline"></i>Hold</button>

Expand Down
Loading