better visibility

frontend/src/components/Lobby.vue

@@ -69,16 +69,6 @@
             style="position: relative"
             class="player-in-table"
           >
-            <transition-group
-              v-if="p.gold_nuggets && p.gold_nuggets > 0"
-              name="list"
-              tag="div"
-              style="position: absolute; top: -10pt; font-size: 9pt"
-            >
-              <span v-for="(n, i) in p.gold_nuggets" v-bind:key="i" :alt="i"
-                >💵️</span
-              >
-            </transition-group>
             <transition-group
               v-if="p.max_lives && !p.is_ghost"
               name="list"
@@ -116,6 +106,12 @@
               class="character tiny-character"
               @click.native="selectedInfo = [p.character]"
             />
+            <div
+              v-if="p.gold_nuggets && p.gold_nuggets > 0"
+              style="position: absolute; top: 45pt; left: -5pt; font-size: 9pt;"
+            >
+              <h3 style="background:gold;border-radius:15pt;padding:0pt 2pt;color:black"> 💵️ {{ p.gold_nuggets }} </h3>
+            </div>
             <tiny-hand
               :id="p.name + '-hand'"
               :ncards="p.ncards"
@@ -444,7 +440,6 @@ export default {
     DeadRoleNotification,
     AnimatedCard,
     AnimatedEffect,
-    Card,
   },
   data: () => ({
     username: "",
@@ -573,6 +568,23 @@ export default {
       }, 1800);
     },
     chat_message(msg) {
+      if (typeof msg !== "string") {
+        let key = Math.random();
+        let username = msg.text.substring(1, msg.text.indexOf(":")-1);
+        setTimeout(() => {
+            this.fullScreenEffects.push({
+              key: key,
+              text: '💬',
+              startPosition: cumulativeOffset(document.getElementById(username)),
+            });
+          }, 50);
+          setTimeout(() => {
+            this.fullScreenEffects = this.fullScreenEffects.filter(
+                (x) => x.key !== key
+            );
+          }, 3000);
+        return;
+      }
       let params = msg.split('|')
       let type = params.shift().substring(1)
       let messageMap = {

frontend/src/components/Player.vue

@@ -11,11 +11,8 @@
 				<span v-for="(n, i) in (max_lives-lives)" v-bind:key="`${i}-sk`" :alt="i">💀</span>
 				<span v-for="(n, i) in lives" v-bind:key="i" :alt="i">❤️</span>
 			</transition-group>
-			<div v-if="gold_nuggets > 0" style="display: flex;align-items: center;margin-left: 12pt;margin-right: -10pt;justify-content: space-evenly;width: 25pt;">
+			<div v-if="gold_nuggets > 0" style="position:relative;left:-90pt;top:65pt;justify-content: space-evenly;width: 25pt;">
-				<transition name="list">
+				<h3 style="background:gold;border-radius:15pt;padding:2pt 2pt;color:black;text-align:center"> 💵️ {{ gold_nuggets }} </h3>
-					<span :key="gold_nuggets">{{gold_nuggets}}</span>
-				</transition>
-				<span>💵️</span>
 			</div>
 			<transition-group v-if="lives > 0 || is_ghost" name="list" id="equipment" tag="div" style="margin: 0 0 0 10pt; display:flex;">
 				<Card v-for="card in equipmentComputed" v-bind:key="card.name+card.number" :card="card" 
@@ -503,7 +500,7 @@ export default {
 	padding: 10pt 40pt 0pt 40pt;
 	overflow:auto;
 	border-radius: 4pt;
-	min-height: 40pt;
+	min-height: 122pt;
 }
 @media not all and (min-resolution:.001dpcm)
 { @supports (-webkit-appearance:none) and (stroke-color:transparent) {