Add card preview match chat

game/fx/creature.go

@@ -616,15 +616,15 @@ func Creature(card *match.Card, ctx *match.Context) {
 
 			if attackerPower > defenderPower {
 				m.HandleFx(match.NewContext(m, &match.CreatureDestroyed{Card: defender, Source: attacker, Blocked: blocked}))
-				m.Chat("Server", fmt.Sprintf("%s (%v) was destroyed by %s (%v)", defender.Name, defenderPower, attacker.Name, attackerPower))
+				m.Chat("Server", fmt.Sprintf("%s (%v) was destroyed by %s (%v)", ctx.Match.FormatDisplayableCard(defender), defenderPower, ctx.Match.FormatDisplayableCard(attacker), attackerPower))
 			} else if attackerPower == defenderPower {
 				m.HandleFx(match.NewContext(m, &match.CreatureDestroyed{Card: attacker, Source: defender, Blocked: blocked}))
-				m.Chat("Server", fmt.Sprintf("%s (%v) was destroyed by %s (%v)", attacker.Name, attackerPower, defender.Name, defenderPower))
+				m.Chat("Server", fmt.Sprintf("%s (%v) was destroyed by %s (%v)", ctx.Match.FormatDisplayableCard(attacker), attackerPower, ctx.Match.FormatDisplayableCard(defender), defenderPower))
 				m.HandleFx(match.NewContext(m, &match.CreatureDestroyed{Card: defender, Source: attacker, Blocked: blocked}))
-				m.Chat("Server", fmt.Sprintf("%s (%v) was destroyed by %s (%v)", defender.Name, defenderPower, attacker.Name, attackerPower))
+				m.Chat("Server", fmt.Sprintf("%s (%v) was destroyed by %s (%v)", ctx.Match.FormatDisplayableCard(defender), defenderPower, ctx.Match.FormatDisplayableCard(attacker), attackerPower))
 			} else if attackerPower < defenderPower {
 				m.HandleFx(match.NewContext(m, &match.CreatureDestroyed{Card: attacker, Source: defender, Blocked: blocked}))
-				m.Chat("Server", fmt.Sprintf("%s (%v) was destroyed by %s (%v)", attacker.Name, attackerPower, defender.Name, defenderPower))
+				m.Chat("Server", fmt.Sprintf("%s (%v) was destroyed by %s (%v)", ctx.Match.FormatDisplayableCard(attacker), attackerPower, ctx.Match.FormatDisplayableCard(defender), defenderPower))
 			}
 		})
 	}

game/match/match.go

@@ -242,7 +242,7 @@ func (m *Match) MoveCard(card *Card, destination string, source *Card) {
 		return
 	}
 
-	m.Chat("Server", fmt.Sprintf("%s was moved to %s %s by %s", card.Name, card.Player.Username(), destination, source.Name))
+	m.Chat("Server", fmt.Sprintf("%s was moved to %s %s by %s", m.FormatDisplayableCard(card), card.Player.Username(), destination, m.FormatDisplayableCard(source)))
 
 }
 
@@ -422,6 +422,10 @@ func (m *Match) Chat(sender string, message string) {
 	m.ColorChat(sender, message, "#ccc")
 }
 
+func (m *Match) FormatDisplayableCard(card *Card) string {
+	return fmt.Sprintf("(%s;%s)", card.Name, card.ImageID)
+}
+
 func (m *Match) Broadcast(msg interface{}) {
 
 	defer func() {
@@ -925,7 +929,9 @@ func (m *Match) ChargeMana(p *PlayerReference, cardID string) {
 	if card, err := p.Player.MoveCard(cardID, HAND, MANAZONE, cardID); err == nil {
 		p.Player.HasChargedMana = true
 		m.BroadcastState()
-		m.Chat("Server", fmt.Sprintf("%s was added to %s's manazone", card.Name, p.Socket.User.Username))
+		m.Chat("Server", fmt.Sprintf("%s was added to %s's manazone",
+			m.FormatDisplayableCard(card),
+			p.Socket.User.Username))
 	}
 
 }

webapp/src/components/CardPreviewPopup.vue

@@ -0,0 +1,62 @@
+<template>
+  <span v-if="props.uid">
+    <div 
+      class="card-preview" 
+      :style="{
+        'top': previewCardTop + 'px', 
+        'left': previewCardLeft + 'px',
+      }" 
+    >
+      <img
+        :src="`https://scans.shobu.io/${uid}.jpg`"
+        alt="Full card"
+      />
+    </div>
+  </span>
+</template>
+
+<script setup>
+import { watchEffect } from 'vue'
+
+const props = defineProps(['uid', 'event', 'xPos', 'side']);
+let previewCardTop = 0;
+let previewCardLeft = 0;
+
+watchEffect(() => {
+  if (!props.uid) {
+    return
+  }  
+  let positionY = props.event.clientY - 420/2;
+  let positionX = props.xPos ? props.xPos : (props.event.clientX -  props.event.offsetX + props.event.target.offsetWidth);
+  if (props.side == "right") {
+    positionX += 5
+  }  
+  if (props.side == "left") {
+    positionX -= 300
+  }
+  if (positionY + 420 > window.innerHeight) {
+    positionY = window.innerHeight - 420;
+  }
+  if (positionY < 10) {
+    positionY = 10;
+  }
+  previewCardTop = positionY;
+  previewCardLeft = positionX;
+})
+</script>
+
+<style scoped lang="scss">
+.card-preview {
+  width: 300px;
+  text-align: center;
+  border-radius: 4px;
+  height: 420px;
+  z-index: 2005;
+  position: absolute;
+}
+
+.card-preview > img {
+  width: 300px;
+  border-radius: 15px;
+}
+</style>

webapp/src/views/DecksNew.vue

@@ -2,20 +2,12 @@
   <div>
     <div v-show="warning" @click="closeOverlay()" class="overlay"></div>
 
-    <span v-if="previewCard">
-      <div 
-        class="card-preview" 
-        :style="{
-          'top': previewCardTop + 'px', 
-          'left': previewCardLeft + 'px',
-        }" 
-      >
-        <img
-          :src="`https://scans.shobu.io/${previewCard.uid}.jpg`"
-          alt="Full card"
-        />
-      </div>
-    </span>
+    <CardPreviewPopup 
+      :uid = previewCard?.uid
+      :event = previewCardEvent
+      :xPos = previewCardX
+      :side = "'left'"
+    />
 
     <div v-show="warning" class="error">
       <p class="text-block">{{ warning }}</p>
@@ -240,6 +232,7 @@
 <script>
 import { call } from "../remote";
 import Header from "../components/Header.vue";
+import CardPreviewPopup from "../components/CardPreviewPopup.vue";
 import VLazyImage from "v-lazy-image";
 
 const ALL_FAMILIES = 'All Races';
@@ -285,6 +278,7 @@ export default {
   name: "decks",
   components: {
     Header,
+    CardPreviewPopup,
     VLazyImage,
 
   },
@@ -326,25 +320,16 @@ export default {
       deckCopy: null,
 
       previewCard: null,
-      previewCardTop: 0,
-      previewCardLeft: 0,
+      previewCardX: 0,
+      previewCardEvent: null,
 
       cardSize: 360,
     };
   },
   methods: {
     setPreviewCard(event, card) {
-      let positionY = event.clientY - 420/2;
-      console.log(this.$refs.rightSide);
-      let positionX = this.$refs.rightSide.getBoundingClientRect().x - 300;
-      if (positionY + 420 > window.innerHeight) {
-        positionY = window.innerHeight - 420;
-      }
-      if (positionY < 10) {
-        positionY = 10;
-      }
-      this.previewCardTop = positionY;
-      this.previewCardLeft = positionX;
+      this.previewCardEvent = event;
+      this.previewCardX = this.$refs.rightSide.getBoundingClientRect().x;
       this.previewCard = card;
     },
 

webapp/src/views/Match.vue

@@ -51,6 +51,12 @@
       </p>
     </div>
 
+    <CardPreviewPopup 
+      :uid = chatCardPreviewUID
+      :event = chatCardEvent
+      :side = "'right'"
+    />
+
     <div v-if="previewCard" class="card-preview">
       <img :src="`https://scans.shobu.io/${previewCard.uid}.jpg`" />
       <div @click="dismissLarge()" class="btn">Close</div>
@@ -201,7 +207,22 @@
                     : message.sender + ":"
                 }}
               </div>
-              <div class="message-text">{{ message.message }}</div>
+              <div class="message-text">
+                <template v-for="obj in message.message">
+                  <template v-if="obj.uid">
+                    <span
+                      @mouseover="chatCardEvent = $event; chatCardPreviewUID = obj.uid"
+                      @mouseleave="chatCardPreviewUID = null"
+                      class="chat-card"
+                    >
+                      {{ obj.text }}
+                    </span>
+                  </template>
+                  <template v-else>
+                    {{ obj.text }}
+                  </template> 
+                </template>
+              </div>
               <div class="mute-icon-container">
                 <MuteIcon
                   v-if="
@@ -673,6 +694,7 @@ import Username from "../components/Username.vue";
 import MuteIcon from "../components/MuteIcon.vue";
 import { getSettings, didSeeMuteWarning } from "../helpers/settings";
 import { store } from "../store";
+import CardPreviewPopup from "../components/CardPreviewPopup.vue";
 
 const send = (client, message) => {
   client.send(JSON.stringify(message));
@@ -697,11 +719,34 @@ function sound(src) {
 let turnSound = new sound("/assets/turn.mp3");
 let playerJoinedSound = new sound("/assets/player_joined.mp3");
 
+function splitServerMessage(text) {
+  let textParts = []
+  let currentIndex = 0
+  const regExp = /\(([^)]+)\)/g;
+  let parts;
+  let execResult = regExp.exec(text)
+  while (execResult !== null ) {
+    if (execResult.index > currentIndex) {
+      textParts.push({text: text.substring(currentIndex, execResult.index) })
+      currentIndex = execResult.index
+    }
+    parts = execResult[1].split(";")
+    textParts.push({text: parts[0], uid: parts[1]})
+    currentIndex += execResult[0].length
+    execResult = regExp.exec(text)
+  }
+  if (currentIndex < text.length) {
+    textParts.push({text: text.substring(currentIndex, text.length) })
+  }
+  return textParts;
+}
+
 export default {
   name: "game",
   components: {
     Username,
-    MuteIcon
+    MuteIcon,
+    CardPreviewPopup,
   },
   data() {
     return {
@@ -756,7 +801,10 @@ export default {
 
       TAPPED_FLAG: 1,
       PLAYABLE_FLAG: 2,
-      TAP_ABILITY_FLAG: 4
+      TAP_ABILITY_FLAG: 4,
+
+      chatCardPreviewUID: null,
+      chatCardEvent: null,
     };
   },
   computed: {
@@ -1197,7 +1245,7 @@ export default {
           }
 
           case "chat": {
-            this.chat(data.sender, data.color, data.message);
+            this.chat(data.sender, data.color, splitServerMessage(data.message));
             break;
           }
 
@@ -1786,10 +1834,6 @@ export default {
   margin-bottom: 3px;
 }
 
-.bt {
-  /* border-top: 1px solid #555; */
-}
-
 .hand {
   width: calc(100% - 301px);
   float: left;
@@ -1911,4 +1955,9 @@ export default {
 .card-action-group {
   display: flex;
 }
+
+.chat-card {
+  cursor: pointer;
+  font-weight: 600;
+}
 </style>