minor ui improvements

frontend/src/components/Card.vue

@@ -20,6 +20,7 @@
       :style="`background-image: url(${card.avatar});`"
     ></div>
     <div :class="{ emoji: true, bottomed: card.avatar }">{{ emoji }}</div>
+    <div v-if="card.isMe" :class="{ emoji: true, bottomed: card.avatar, isMe: true }">🫵</div>
     <div class="alt_text">{{ card.alt_text }}</div>
     <div class="suit">
       {{ number
@@ -271,10 +272,22 @@ export default {
   font-size: 26pt;
   top: 35%;
 }
+.card .emoji.isMe {
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  font-size: 16pt;
+  top: 52%;
+  right: 12pt;
+}
 .emoji.bottomed {
   top: 45%;
   left: 8pt;
 }
+.emoji.bottomed.emoji.isMe {
+  top: 60%;
+  left: -5pt;
+}
 .card.must-be-used {
   filter: drop-shadow(0 0 5px red);
 }

frontend/src/components/Lobby.vue

@@ -47,12 +47,6 @@
           :value="$t('copy')"
         />
       </div>
-
-      <!-- <div class="players-table"> -->
-      <!-- <div style="position: relative;width:260pt;height:400pt;"> -->
-      <!-- :style="p.style"/> -->
-      <!-- </div> -->
-      <!-- </div> -->
       <div style="position: relative">
         <div
           v-if="showTurnFlow"
@@ -672,6 +666,7 @@ export default {
       let icon = "";
       let nonBots = this.players.filter((x) => !x.is_bot);
       let isOwner = nonBots.length > 0 && nonBots[0].name == player.name;
+      let isMe = this.username == player.name;
       if (!this.started) icon = "🤠";
       else
         icon =
@@ -685,11 +680,12 @@ export default {
       return {
         name: player.name,
         number:
-          (this.username == player.name
+          (isMe
             ? this.$t("you")
             : isOwner
             ? this.$t("owner")
             : "") + (player.dist ? `${player.dist}⛰` : ""),
+        isMe: isMe,
         icon: icon,
         is_character: true,
         avatar: player.avatar,
@@ -902,4 +898,9 @@ export default {
     transform: translateY(-5px) scale(1.05);
   }
 }
+@media only screen and (max-width: 500pt) {
+  .players-table {
+    border-bottom: dashed #ccc2;
+  }
+}
 </style>