Skip to content

Commit

Permalink
Game interactions completed, todo : end of race condition
Browse files Browse the repository at this point in the history
  • Loading branch information
@OMeyer973
OMeyer973 committed Dec 27, 2017
1 parent eb4042c commit 6cea5f8
Show file tree
Hide file tree
Showing 3 changed files with 232 additions and 64 deletions.
45 changes: 26 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -378,40 +378,47 @@ <h3 class="rule-subtitle">Règle N°1</h3>

<div id="tracks-holder">
<div id="track-side" class="row-fixed"><!-- quand tout sera bien défini : recopier cette div le nombre de tours de la course -->
<div class="card-holder">
<div class="card-holder track-card">
<img class="card bottom-card" alt="a hidden card" src="img/BK.png"/>
<img class="card top-card" alt="a hidden card" src="img/BK.png"/>
<img class="card top-card hidden card-face-up" alt="a hidden card" src="img/AS.png"/>
<img class="card top-card drop-track-card hidden" alt="a hidden card" src="img/AS.png"/>
</div>
<div class="card-holder">
<div class="card-holder track-card">
<img class="card bottom-card" alt="a hidden card" src="img/BK.png"/>
<img class="card top-card" alt="a hidden card" src="img/BK.png"/>
<img class="card top-card hidden card-face-up" alt="a hidden card" src="img/AS.png"/>
<img class="card top-card drop-track-card hidden" alt="a hidden card" src="img/AS.png"/>
</div>
<div class="card-holder">
<div class="card-holder track-card">
<img class="card bottom-card" alt="a hidden card" src="img/BK.png"/>
<img class="card top-card" alt="a hidden card" src="img/BK.png"/>
<img class="card top-card hidden card-face-up" alt="a hidden card" src="img/AS.png"/>
<img class="card top-card drop-track-card hidden" alt="a hidden card" src="img/AS.png"/>
</div>
<div class="card-holder">
<div class="card-holder track-card">
<img class="card bottom-card" alt="a hidden card" src="img/BK.png"/>
<img class="card top-card" alt="a hidden card" src="img/BK.png"/>
<img class="card top-card hidden card-face-up" alt="a hidden card" src="img/AS.png"/>
<img class="card top-card drop-track-card hidden" alt="a hidden card" src="img/AS.png"/>
</div>
<div class="card-holder">
<div class="card-holder track-card">
<img class="card bottom-card" alt="a hidden card" src="img/BK.png"/>
<img class="card top-card" alt="a hidden card" src="img/BK.png"/>
<img class="card top-card hidden card-face-up" alt="a hidden card" src="img/AS.png"/>
<img class="card top-card drop-track-card hidden" alt="a hidden card" src="img/AS.png"/>
</div>

</div>
<div id="track1">
<div id="track1" class="row-fixed track">
<div class="card-holder">
<img class="card drop-track-card hidden" alt="a hidden card" src="img/BK.png"/>
</div>
</div>
<div id="track2">
<div id="track2" class="row-fixed track">
<div class="card-holder">
<img class="card drop-track-card hidden" alt="a hidden card" src="img/BK.png"/>
</div>
</div>
<div id="track3">
<div id="track3" class="row-fixed track">
<div class="card-holder">
<img class="card drop-track-card hidden" alt="a hidden card" src="img/BK.png"/>
</div>
</div>
<div id="track4">
<div id="track4" class="row-fixed track">
<div class="card-holder">
<img class="card drop-track-card hidden" alt="a hidden card" src="img/BK.png"/>
</div>
</div>
</div>
<div class="separator-wide"></div>
Expand Down
156 changes: 112 additions & 44 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,13 +71,22 @@ buttonNextTurn.addEventListener('click', nextTurn);
var buttonSeeResults = document.querySelector("#see-results");
buttonSeeResults.addEventListener('click', seeResults);

/*deck cards to animate*/
/*deck variables*/
var deckDiv = document.querySelector("#deck-face-down");
deckDiv.addEventListener('click', nextTurn);
var deckCardPick = document.querySelector("#deck-face-down .top-card");
var deckCardDropTop = document.querySelector("#deck-face-up .top-card");
var deckCardDropBottom = document.querySelector("#deck-face-up .bottom-card");
var deckCardId = 0; //Id of the next card to draw from the API deck

/*horses variables*/
/*track side variables*/
var trackSideCardsBottom = document.querySelectorAll('.track-card .bottom-card');
var trackSideCardsTop = document.querySelectorAll('.track-card .top-card');
var sideCardToTurn = 0; //Id of the next side card to turn

/*Aces variables*/
var aceHoldersSelector = document.querySelectorAll('.track .card-holder');
var acesSelector = document.querySelectorAll('.track .card');

/*API variables*/
var deckId = "";
Expand Down Expand Up @@ -189,18 +198,43 @@ function getPlayersData () {
}


/* ------------
API functions
--------------- */

/* -------------
game functions
---------------- */

function initGameScreen () {
showGameScreen();
activeScreen = "game";
setupAPI();
}

function showGameScreen() {
/*enable the game screen*/

setTimeout(function () {
gameScreenSelector.classList.remove("hidden");
insertCardsinDesk();
insertCardsinHolders();
},200);
}

function setupAPI() {
/*create a deck of cards with the API*/
APIState = "init";
request.open('GET', "https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1", true);
request.send();
}

request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
requestAnswered();
}
/*API request came back*/
if (request.readyState == 4 && request.status == 200) {
requestAnswered();
}
};

function requestAnswered(){
/*do stuff with the request*/
requestData = JSON.parse(request.responseText);
if (debug) {
console.log("APIState : " + APIState);
Expand All @@ -224,38 +258,25 @@ function requestAnswered(){
console.log("sideTrackDeck :");
console.log(sideTrackDeck);
}
loadSideTrackCards();
loadAces();
break;
default:
break;
}
}


/* -------------
game functions
---------------- */

function initGameScreen () {
showGameScreen();
activeScreen = "game";
setupAPI();
}

function showGameScreen() {
/*enable the game screen*/

setTimeout(function () {
gameScreenSelector.classList.remove("hidden");
insertCardsinDesk();
insertCardsinHolders();
},200);
function loadAces() {
for (i=0; i<4; i++) {
acesSelector[i].src = aces[i].image;
acesSelector[i].classList.remove("hidden");
}
}

function setupAPI() {
/*create a deck of cards with the API*/
APIState = "init";
request.open('GET', "https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1", true);
request.send();
function loadSideTrackCards() {
for (i=0; i<5; i++) {
trackSideCardsTop[i].src = sideTrackDeck[i].images.png;
}
}

function drawCards(x) {
Expand Down Expand Up @@ -330,9 +351,17 @@ function nextTurn () {
if (nextTurnAvailable) {
nextTurnAvailable = false;
if (debug) {console.log("nextTurn");}
takeCardFromDeck();
loadDropCard();
dropCardOnDeck();

updateDeck();

setTimeout(function () {
updateAces();
},800);

setTimeout(function () {
updateTrackSide();
},1600);
/*
- move forward the card with the color of the deck card face up that's been loaded
- check if someone won th race
Expand All @@ -344,34 +373,73 @@ function nextTurn () {
}
}

function takeCardFromDeck () {
/*animation for taking a card from the deck*/
deckCardPick.classList.remove("pick-deck-card");
function updateAces() {
//checks wich Ace needs to move fwd & moves it
for (i=0; i<4; i++) {
if (deckCards[deckCardId-1].suit == aces[i].suit) {
console.log("aces.suit");
console.log(aces[i].suit);
moveAceFwd(i);
}
}
}

function moveAceFwd(i) {
//move the ace with id i forward
aces[i].position++;
var marginLeftTmp = 14.29*aces[i].position;

aceHoldersSelector[i].classList.remove("move-card-right");


setTimeout(function () {
/*20ms of delay to prevent stupid lag*/
deckCardPick.classList.add("pick-deck-card");
aceHoldersSelector[i].style.marginLeft = ""+marginLeftTmp+"%";
aceHoldersSelector[i].classList.add("move-card-right");
},20);
}

function loadDropCard() {
/*load the next card to draw from the deck API*/
deckCardDropTop.src = deckCards[deckCardId].images.png;
deckCardId++;
}

function updateTrackSide() {
if (sideCardToTurn<5) {
trackSideCardsBottom[sideCardToTurn].classList.add("pick-track-card");
setTimeout(function () {
trackSideCardsTop[sideCardToTurn].classList.remove("hidden");
sideCardToTurn++;
},400);
}
}

function dropCardOnDeck () {
/*animation to drop the card face up on the deck*/
function updateDeck () {
/*animation for taking a card from the deck*/
deckCardPick.classList.remove("pick-deck-card");

setTimeout(function () {
deckCardDropTop.classList.remove("drop-deck-card");
},400);
/*20ms of delay to prevent stupid lag*/
deckCardPick.classList.add("pick-deck-card");
},20);

setTimeout(function () {
/*animation to drop the card face up on the deck*/
deckCardDropTop.classList.remove("drop-deck-card");
},420);

setTimeout(function () {
/*20ms of delay to prevent stupid lag*/
deckCardDropTop.classList.remove("hidden");
deckCardDropTop.classList.add("drop-deck-card");
copyTopBottomDeckCards();
},420);
},440);
}




function copyTopBottomDeckCards () {
/*copy the top card face up of the deck to bottom card face up
to prepare for next turn animation*/
Expand Down
Loading

0 comments on commit 6cea5f8

Please sign in to comment.