show results-screen at click + create exit-screen-left and enter-scre…

…en-right in css to use in js (for buttons)
chadek · Dec 31, 2017 · f972221 · f972221
1 parent 568ff8b
commit f972221
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -458,7 +458,7 @@ <h3 id="game-commentary">La course va bientôt commencer...</h3>
                 </div>
             </div>
 
-            <div id="results-screen" class="results-hidden">
+            <div id="results-screen" class="results-hidden hidden">
                 <div id="results-board">
                     <!--<span id="result-player1-name">Player1</span>
                     <span id="result-player1-score">bois 1000</span>-->

diff --git a/main.js b/main.js
@@ -80,7 +80,6 @@ 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
 
-
 var gameBoardSelector = document.querySelector("#game-board");
 
 /*track side variables*/
@@ -118,6 +117,19 @@ Object.assign(prevRaceInfos,raceInfos); //copy
 
 var gameCommentary = document.querySelector('#game-commentary');
 
+/* ---------------------------------
+ results screen variables & listeners
+------------------------------------ */
+
+var resultsScreenSelector = document.querySelector("#results-screen");
+
+/*buttons*/
+
+var backToRace = document.querySelector("#back-to-race");
+backToRace.addEventListener('click', backTo);
+var newRace = document.querySelector("#new-race");
+newRace.addEventListener('click', backToMenu);
+
 /* ---------------
  common functions
 ------------------ */
@@ -375,8 +387,6 @@ function resizeGameBoard() {
 	gameBoardSelector.style.width = (parseInt(cardStyle.getPropertyValue('height'))*7)+"px";
 }
 
-
-
 function nextTurn () {
 	if (nextTurnAvailable) {
 		nextTurnAvailable = false;
@@ -529,8 +539,6 @@ function updateDeck () {
 }
 
 
-
-
 function copyTopBottomDeckCards () {
 	/*copy the top card face up of the deck to bottom card face up 
 	to prepare for next turn animation*/
@@ -554,9 +562,52 @@ function endRace() {
 }
 
 function seeResults() {
-	/*Load the resulsts screen*/
-	var resultsScreen = document.querySelector("#results-screen");
-	event.preventDefault();
-	resultsScreen.classList.remove("hidden");
-
+	/*Load the results screen*/
+	activeScreen = "results";
+
+	gameScreenSelector.classList.add("exit-screen-left");
+	setTimeout(function () {
+		gameScreenSelector.classList.add("hidden");
+   	}, 200);
+
+	setTimeout(function () {
+		resultsScreenSelector.classList.remove("hidden");
+	}, 200);
+	resultsScreenSelector.classList.add("enter-screen-right");
+	console.log("porrrrr");
+
+}
+
+/* Functions for buttons in results sreen */
+
+function backTo() {
+	/* Back to Race */
+	activeScreen="game";
+
+	setTimeout(function () {
+		gameScreenSelector.classList.remove("hidden");
+	}, 200);
+	gameScreenSelector.classList.add("enter-screen-left");
+
+	resultsScreenSelector.classList.add("exit-screen-right");
+	setTimeout(function () {
+		resultsScreenSelector.classList.add("hidden");
+	}, 200);
+
 }
+
+function backToMenu () {
+
+	activeScreen="menu";
+
+	resultsScreenSelector.classList.add("exit-screen-right");
+	setTimeout(function () {
+		resultsScreenSelector.classList.add("hidden");
+	}, 200);
+
+	menuScreenSelector.classList.add("enter-screen-left");
+	setTimeout(function () {	
+		menuScreenSelector.classList.remove("hidden");
+	}, 200);
+
+}	
diff --git a/style.css b/style.css
@@ -48,12 +48,7 @@ body {
  common layout
 --------------- */
 
-.row {
-	display: flex;
-	flex-direction: row;
-}
-
-.row-fixed {
+.row, .row-fixed{
 	/*will not turn into a column in mobile*/
 	display: flex;
 	flex-direction: row;
@@ -79,10 +74,9 @@ body {
 }
 
 .hidden {
-	display: none;
+	display: none !important;
 }
 
-
 /* -------------
  common buttons
 ---------------- */
@@ -135,12 +129,31 @@ body {
 	box-shadow: inset 0px 0px 5px rgba(0,50,0,1);
 }
 
+.exit-screen-right {
+    animation-name: exitScreenRight;
+    animation-duration: 0.5s;
+    opacity: 0;
+}
+
 .exit-screen-left {
     animation-name: exitScreenLeft;
     animation-duration: 0.5s;
     opacity: 0;
 }
 
+
+@keyframes exitScreenRight {
+	0% {
+		transform: scale(0.9) translateX(500px);
+		opacity: 0;	
+	}
+
+	100% { 
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
 @keyframes exitScreenLeft {
 	0% {
 		transform: scale(1);
@@ -158,6 +171,12 @@ body {
     opacity: 1;
 }
 
+.enter-screen-left {
+    animation-name: enterScreenLeft;
+    animation-duration: 0.5s;
+    opacity: 1;
+}
+
 @keyframes enterScreenRight {
 	0% {
 		transform: scale(0.9) translateX(500px);
@@ -170,6 +189,18 @@ body {
 	}
 }
 
+@keyframes enterScreenLeft {
+	0% {
+		transform: scale(0.9) translateX(-500px);
+		opacity: 0;	
+	}
+
+	100% { 
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
 
 /* ---------
  Menu stuff
@@ -528,11 +559,10 @@ body {
  Results screen
 -------------- */	
 
-#results-screen {
+.results-hidden {
 	display: block;
 	text-align: center;
 	color: #FFFFFF;
-	display: none;
 }
 
 .winner, .other-players {