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

Multiplayer Support with More features #85

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

Multiplayer Support with More features #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 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
656316a
add setting goal score and show rules
huiyun862 Oct 17, 2020
7e7ecd4
add extra dice; display rules; goal score
huiyun862 Oct 25, 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
223 changes: 132 additions & 91 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,107 @@
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;

// 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 goal = 100;
let multiDice = false;
let die = [document.getElementById("dice-0"), document.getElementById("dice-1")];
generatePlayerList();

// console.log(die)
let activeScoreDom = document.getElementById('current-player-score');
let currentScoreDom = document.getElementById('current-player-temp-score');
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';
die[0].style.display = die[1].style.display = 'none';
let bottomRoll = document.querySelector('.btn-roll');
console.log(bottomRoll);



bottomRoll.addEventListener('click', function () {
var dice = Math.floor(Math.random() * 6 + 1);
var diceDom = document.querySelector('.dice');
diceDom.style.display = 'block';
diceDom.src = "images/dice-" + dice + ".png";
diceDom.alt = "You rolled :" + dice;


if (dice == 1) {
console.log("1 rolled");
nextPlayer();
} else {
if (dice == 6){
if (doubleSix){
looseScore()
}
doubleSix = true
}
doubleSix = false;
activeScores += dice;
if (!document.getElementById('score-goal-box').readOnly) {
document.getElementById('score-goal-box').readOnly = true;
goal = parseInt(document.getElementById('score-goal-box').value);
console.log(goal);
}

if (activePlayer == 0) {
current0.textContent = activeScores;
} else {
current1.textContent = activeScores;
let s = 0;
for(let i = 0; i < 2; i++){
let diceVal = Math.floor(Math.random() * 6 + 1);
die[i].style.display = "block";
die[i].src = "images/dice-" + diceVal + ".png";
die[i].alt = "You rolled :" + diceVal;

if(diceVal == 1){
nextPlayer();
return;
}else{
s += diceVal;
}

if(!multiDice){
break;
}
}
activeScores += s;
currentScoreDom.textContent = activeScores;

// var dice = Math.floor(Math.random() * 6 + 1);
// var diceDom = document.querySelector('.dice');
// diceDom.style.display = 'block';
// diceDom.src = "images/dice-" + dice + ".png";
// diceDom.alt = "You rolled :" + dice;


// if (dice == 1) {
// console.log("1 rolled");
// nextPlayer();
// } else {
// if (dice == 6){
// if (doubleSix){
// looseScore();
// }
// doubleSix = true
// }
// doubleSix = false;
// activeScores += dice;
// currentScoreDom.textContent = activeScores;
// }

});
let buttonHold = document.querySelector('.btn-hold');
Expand All @@ -69,89 +111,88 @@ 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()
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();
die[0].style.display = die[1].style.display = 'none';
document.getElementById('score-goal-box').readOnly = false;
});


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++;
}
multiDice = false;
document.getElementById('dice-toggle').checked = false;
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) {

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')
if(scores[activePlayer] >= goal) {
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) {
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');
die[0].style.display = die[1].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';
}


function changeTheme(checked) {
document.querySelector('body').classList.toggle('dark-theme');
}
function toggleDiceCount(){
multiDice = !multiDice;
if(multiDice == false){
die[1].style.display = 'none';
}else{
die[1].style.display = 'block';
}
}
function updateHighestScore(score) {
if (score > highestScore) highestScore = score;
highestScoreEl.textContent = highestScore;
}

function toggleRulesModal() {
document.querySelector('.wrapper').classList.toggle('blur');
document.querySelector('.modal.rules').classList.toggle('hidden');
}
Binary file added images/logo-designs/logo-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/logo-designs/logo-2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading