From f682e3eef4994ac352b29d39cd93dc9328d69956 Mon Sep 17 00:00:00 2001
From: Alec Maier <Maier.144@osu.edu>
Date: Sun, 19 Apr 2020 15:15:09 -0400
Subject: [PATCH] Fix tooltip on mobile, set dynamic width, add info svg

---
 assets/images/info.svg | 14 ++++++++++
 static/game.js         |  2 +-
 static/styles.css      | 60 +++++++++++++++++++++++++++++-------------
 3 files changed, 56 insertions(+), 20 deletions(-)
 create mode 100644 assets/images/info.svg

diff --git a/assets/images/info.svg b/assets/images/info.svg
new file mode 100644
index 0000000..8a71b01
--- /dev/null
+++ b/assets/images/info.svg
@@ -0,0 +1,14 @@
+<svg width="223" height="223" xmlns="http://www.w3.org/2000/svg">
+ <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
+ <g>
+  <title>background</title>
+  <rect fill="none" id="canvas_background" height="225" width="225" y="-1" x="-1"/>
+  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
+   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
+  </g>
+ </g>
+ <g>
+  <title>Layer 1</title>
+  <path id="svg_1" d="m111.499982,3.500023c-59.646658,0 -107.999967,48.353386 -107.999967,107.999967c0,59.647903 48.353308,107.999993 107.999967,107.999993c59.647946,0 107.999993,-48.352082 107.999993,-107.999993c0,-59.646581 -48.352047,-107.999967 -107.999993,-107.999967zm-9.236728,48.553238l17.983007,0l0,19.128161l-17.983007,0l0,-19.128161zm29.760957,116.085726l-19.780144,0c-7.684691,0 -10.961591,-3.269729 -10.961591,-11.117474l0,-51.012233c0,-2.452006 -1.306774,-3.597168 -3.595768,-3.597168l-6.539459,0l0,-17.662679l19.781535,0c7.690393,0 10.953072,3.432714 10.953072,11.116049l0,51.176601c0,2.296157 1.306782,3.597237 3.595768,3.597237l6.539537,0l0,17.499659l0.00705,0l0,0.000009z" stroke-width="1.5" stroke="#000" fill="#bbb8b8"/>
+ </g>
+</svg>
diff --git a/static/game.js b/static/game.js
index d3ab04a..18dc559 100644
--- a/static/game.js
+++ b/static/game.js
@@ -234,7 +234,7 @@ 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");
diff --git a/static/styles.css b/static/styles.css
index 2c05b90..814253f 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -115,6 +115,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) {
@@ -229,6 +237,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) {
@@ -1066,8 +1081,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 {
@@ -1446,26 +1469,25 @@ color: #333243;
 text-decoration: none;
 cursor: pointer;
 }
+
 /*Tooltip styles. Taken from w3schools*/
 #game-container .alive-player .tooltiptext {
-  visibility: hidden;
-  width: 120px;
-  background-color: black;
-  color: #fff;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px 0;
-  position: absolute;
-  z-index: 1;
-  bottom: 50%;
-  left: 150%;
-  margin-left: -60px;
-  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
-  /*opacity: 0;*/
-  /*transition: opacity 1s;*/
+    visibility: hidden;
+    background-color: black;
+    color: #fff;
+    text-align: left;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
 }
 
-#game-container .alive-player:hover .tooltiptext {
-  visibility: visible;
-  opacity: 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;
 }