Merge remote-tracking branch 'origin/develop' into develop

client/index.html

@@ -37,15 +37,17 @@ <h1 class="rotating-text game-title">Meme: The Gathering</h1>
             </ul>
         </div>
         <div class="lastDetails">
-            <div id="lastCard">
-
-            </div>
+            <div id="lastCard"></div>
             <div class="lastMessage">
                 <div class="roomIdContainer">Invite your friends - Room ID: <span data-type="roomID"></span></div>
                 <div>
                     <button id="startGameButton">Start Game</button>
                 </div>
             </div>
+            <div id="deck">
+                <div id="cardInDeck"></div>
+                <img src="/static/reverse.png">
+            </div>
         </div>
     </div>
 

client/static/css/style.css

@@ -13,12 +13,12 @@ body {
     background-image: url("../../Background.webp");
     background-attachment: fixed;
     background-size: cover;
-    height: 98%;
+
 }
 
 #lobby {
 
-    background:  rgba(42,178,217, .6);    
+
     position: relative;
     width: 100%;
     min-height: 100%;
@@ -27,6 +27,7 @@ body {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
+
 }
 
 .game-title {
@@ -58,12 +59,12 @@ body {
     position: relative;
     overflow: auto;
     width: 100%;
-    height: 100%;
+
     background: linear-gradient(rgba(221,71,73, .6), rgba(42,178,217, .6) );
     z-index: 0;
     padding: 10px;
     box-sizing: border-box;
-
+    min-height: 100vh;
 }
 
 
@@ -83,6 +84,7 @@ body {
     z-index: 1;
     height: 200px;
     max-height: 200px;
+    max-height: 100%;
     overflow: auto;
     background: rgba(255,255,255,0.3);
 }
@@ -111,7 +113,7 @@ body {
 }
 
 #playersZones {
-    height: 230px;
+    height: 200px;
     display: flex;
     flex-direction: row;
 }
@@ -124,7 +126,7 @@ body {
 #playersZones .player {
     background: linear-gradient(rgba(221,71,73, .6), rgba(18, 77, 94, 0.6) );
     max-width: 33%;
-    height: 230px;
+    height: 200px;
     flex-grow: 1;
     margin: 10px;
     text-align: center;	
@@ -152,14 +154,15 @@ body {
 
 .laughIcon {
     margin-left: 10px;
-    background-image: url("../../smilewb.png");
+    background-image: url("../../smile.png");
     max-width: 30px;
 }
 
 .middle {
     flex-grow: 1;
     display: flex;
     flex-direction: row;
+    overflow: auto;
 }
 
 .middle .lastDetails {
@@ -168,13 +171,26 @@ body {
     flex-grow: 1;
 }
 
-.middle #lastCard {
-    width: 250px;
+.middle #lastCard, .middle #deck {
+    max-width: 250px;
+
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+#cardInDeck {
+    position: absolute;
+    background: white;
+    padding: 20px;
+    border-radius: 60px;
 }
 
-.middle #lastCard img {
-    width: 200px;
-    margin: 25px;
+.middle #lastCard img, .middle #deck img {
+    max-height: 200px;
+    margin: 0 25px;
 }
 
 .middle .lastMessage {
@@ -277,6 +293,7 @@ body {
 }
 
 .player.focus {
+    cursor: pointer;
     border: 3px solid aqua !important;
 }
 

client/static/js/main.js

@@ -131,6 +131,10 @@ function initReceiveMethods() {
         ShowLastPlayedCard(url);
     });
 
+    connection.on("CardsLeft", function (left) {
+        $('#cardInDeck').text(left);
+    });
+
     connection.on("TurnStarted", function () {
         yourTurn = true;
     });
@@ -265,7 +269,7 @@ function addPlayerZone(playerName) {
 
     const laughIconElement = document.createElement('img');
     laughIconElement.className = 'laughIcon';
-    laughIconElement.src='../../smilewb.png';
+    laughIconElement.src='../../smile.png';
 
     const laughElement = document.createElement('h3');
     laughElement.textContent = "LP: " + 0;