Merge pull request #45 from AlecM33/pr/44

Pr/44

static/game.js

@@ -234,7 +234,12 @@ function renderDeadAndAliveInformation() {
     alivePlayers.forEach((player) => {
         const alivePlayer = document.createElement("div");
         alivePlayer.setAttribute("class", "alive-player");
-        alivePlayer.innerText = player.card.role;
+        alivePlayer.innerHTML = "<p>" + player.card.role + "</p><img src='../assets/images/info.svg'/>";
+        //Add hidden description span - RTM 4/18/2020
+        let playerCardInfo=document.createElement("span");
+        playerCardInfo.setAttribute("class","tooltiptext");
+        playerCardInfo.innerText=player.card.description;
+        alivePlayer.appendChild(playerCardInfo);
         aliveContainer.appendChild(alivePlayer);
     });
     if (infoContainer === null) {

static/styles.css

@@ -120,6 +120,14 @@
         margin: 0 0.5em;
         font-size: 2em;
     }
+
+    #game-container .alive-player .tooltiptext {
+        width: 12em;
+        right: 45%;
+        bottom: 80%;
+        font-size: 12px;
+    }
+
 }
 
 @media(min-width: 750.01px) {
@@ -238,6 +246,13 @@
         align-items: center;
     }
 
+    #game-container .alive-player .tooltiptext {
+        width: 15em;
+        font-size: 14px;
+        right: 106%;
+        bottom: -36%;
+    }
+
 }
 
 @media(max-width: 1225px) and (min-width: 750.01px) {
@@ -1137,8 +1152,16 @@ label {
     background-color: #494f52;
     border-radius: 5px;
     padding: 5px;
-    filter: drop-shadow(3px 10px 10px rgba(0,0,0,0.6));
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    box-shadow: 3px 10px 10px rgba(0,0,0,0.6);
     margin: 0.3em;
+    position: relative;
+}
+
+#game-container .killed-player p, #game-container .alive-player p {
+    margin: 0;
 }
 
 #play-pause {
@@ -1517,3 +1540,25 @@ color: #333243;
 text-decoration: none;
 cursor: pointer;
 }
+
+/*Tooltip styles. Taken from w3schools*/
+#game-container .alive-player .tooltiptext {
+    visibility: hidden;
+    background-color: black;
+    color: #fff;
+    text-align: left;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+}
+
+#game-container .alive-player img {
+    width: 25px;
+    height: 25px;
+}
+
+#game-container .alive-player:hover .tooltiptext, #game-container .alive-player:focus .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}