feat: 메시지 빠른 답장 대상 지정

hwe/ts/components/MessagePlate.vue

@@ -25,13 +25,21 @@
           <template v-if="src.name == generalName">
             <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }">나</span
             ><span class="msg_from_to">▶</span
-            ><span :class="`msg_target msg_${destColorType}`" :style="{ backgroundColor: dest.color }"
-              >{{ dest.name }}:{{ dest.nation }}</span
-            >
+            ><span
+              role="button"
+              :class="`msg_target msg_${destColorType}`"
+              :style="{ backgroundColor: dest.color }"
+              @click="emit('setTarget', msg.msgType, dest)"
+              >{{ dest.name }}:{{ dest.nation }} | <i class="bi bi-reply-fill"
+            /></span>
           </template>
           <template v-else>
-            <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }"
-              >{{ src.name }}:{{ src.nation }}</span
+            <span
+              role="button"
+              :class="`msg_target msg_${srcColorType}`"
+              :style="{ backgroundColor: src.color }"
+              @click="emit('setTarget', msg.msgType, src)"
+              >{{ src.name }}:{{ src.nation }} | <i class="bi bi-reply-fill" /></span
             ><span class="msg_from_to">▶</span
             ><span :class="`msg_target msg_${destColorType}`" :style="{ backgroundColor: dest.color }">나</span>
           </template>
@@ -39,6 +47,28 @@
         <template v-else-if="msg.msgType == 'national' && src.nation_id === dest.nation_id">
           <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }">{{ src.name }}</span>
         </template>
+        <template v-else-if="(msg.msgType == 'national' || msg.msgType == 'diplomacy') && permissionLevel >= 4">
+          <template v-if="src.nation_id == nationID">
+            <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }">{{ src.name }}</span
+            ><span class="msg_from_to">▶</span
+            ><span
+              role="button"
+              :class="`msg_target msg_${destColorType}`"
+              :style="{ backgroundColor: dest.color }"
+              @click="emit('setTarget', msg.msgType, dest)"
+              >{{ dest.nation }} | <i class="bi bi-reply-fill"
+            /></span>
+          </template>
+          <template v-else>
+            <span
+              role="button"
+              :class="`msg_target msg_${srcColorType}`"
+              :style="{ backgroundColor: src.color }"
+              @click="emit('setTarget', msg.msgType, src)"
+              >{{ src.name }}:{{ src.nation }} | <i class="bi bi-reply-fill" /></span
+            ><span class="msg_from_to"></span>
+          </template>
+        </template>
         <template v-else-if="msg.msgType == 'national' || msg.msgType == 'diplomacy'">
           <template v-if="src.nation_id == nationID">
             <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }">{{ src.name }}</span
@@ -53,15 +83,24 @@
             ><span class="msg_from_to"></span>
           </template>
         </template>
+        <template v-else-if="src.id != props.generalID">
+          <span
+            role="button"
+            :class="`msg_target msg_${srcColorType}`"
+            :style="{ backgroundColor: src.color }"
+            @click="emit('setTarget', msg.msgType, src)"
+            >{{ src.name }}:{{ src.nation }} | <i class="bi bi-reply-fill"
+          /></span>
+        </template>
         <template v-else>
-          <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: dest.color }"
-            >{{ src.name }}:{{ src.nation }}</span
-          >
+          <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }">{{ src.name }}</span>
         </template>
         <span class="msg_time">&lt;{{ msg.time }}&gt;</span>
       </div>
       <!-- eslint-disable-next-line vue/no-v-html vue/max-attributes-per-line -->
-      <div :class="['msg_content', isValidMsg ? 'msg_valid' : 'msg_invalid']" v-html="isValidMsg ? linkifyStr(msg.text) : '삭제된 메시지입니다'"
+      <div
+        :class="['msg_content', isValidMsg ? 'msg_valid' : 'msg_invalid']"
+        v-html="isValidMsg ? linkifyStr(msg.text) : '삭제된 메시지입니다'"
       ></div>
       <div v-if="msg.option.action" class="msg_prompt">
         <button
@@ -86,7 +125,7 @@
 </template>
 
 <script setup lang="ts">
-import type { MsgItem, MsgTarget } from "@/defs/API/Message";
+import type { MsgItem, MsgTarget, MsgType } from "@/defs/API/Message";
 import { parseTime } from "@/util/parseTime";
 import { differenceInMilliseconds, addMinutes } from "date-fns/esm";
 import { computed, ref, toRef, watch, type ComputedRef, type Ref } from "vue";
@@ -106,13 +145,14 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (event: "response"): void;
+  (event: "setTarget", type: MsgType, target: MsgTarget): void;
   (event: "request-refresh"): void;
 }>();
 
 const src: Ref<MsgTarget> = ref(props.modelValue.src);
 const dest: Ref<MsgTarget> = ref(props.modelValue.dest ?? props.modelValue.src);
-const srcColorType = computed(() => isBrightColor(src.value.color) ? "bright" : "dark");
-const destColorType = computed(() => isBrightColor(dest.value.color) ? "bright" : "dark");
+const srcColorType = computed(() => (isBrightColor(src.value.color) ? "bright" : "dark"));
+const destColorType = computed(() => (isBrightColor(dest.value.color) ? "bright" : "dark"));
 
 const msg = toRef(props, "modelValue");
 const defaultIcon = `${window.pathConfig.sharedIcon}/default.jpg`;
@@ -128,23 +168,20 @@ watch(
   }
 );
 
-watch(
-  msg,
-  (msg) => {
-    isValidMsg.value = testValidMsg(msg);
-    deletable.value = testDeletable(msg);
+watch(msg, (msg) => {
+  isValidMsg.value = testValidMsg(msg);
+  deletable.value = testDeletable(msg);
 
-    src.value = msg.src;
-    dest.value = msg.dest ?? {
-      id: 0,
-      name: "",
-      nation: "재야",
-      nation_id: 0,
-      color: "#000000",
-      icon: defaultIcon,
-    };
-  },
-);
+  src.value = msg.src;
+  dest.value = msg.dest ?? {
+    id: 0,
+    name: "",
+    nation: "재야",
+    nation_id: 0,
+    color: "#000000",
+    icon: defaultIcon,
+  };
+});
 
 const deletableTimer: Ref<number | undefined> = ref();
 const allowButton = computed(() => {
@@ -264,101 +301,100 @@ async function tryDecline() {
 
 <style lang="scss" scoped>
 .msg_plate {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 64px 1fr;
-    border-bottom: solid 1px gray;
-    min-height: 64px;
-    font-size: 12.5px;
-    word-break: break-all;
-    color: white;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  border-bottom: solid 1px gray;
+  min-height: 64px;
+  font-size: 12.5px;
+  word-break: break-all;
+  color: white;
 }
 
 .msg_plate_private {
-    background-color: #5d1e1a;
+  background-color: #5d1e1a;
 }
 
 .msg_plate_private.msg_plate_dest {
-    background-color: #5d461a;
+  background-color: #5d461a;
 }
 
 .msg_plate_public {
-    background-color: #141c65;
+  background-color: #141c65;
 }
 
 .msg_plate_national,
 .msg_plate_diplomacy {
-    background-color: #00582c;
+  background-color: #00582c;
 }
 
 .msg_plate_national.msg_plate_dest,
 .msg_plate_diplomacy.msg_plate_dest {
-    background-color: #704615;
+  background-color: #704615;
 }
 
 .msg_plate_national.msg_plate_src,
 .msg_plate_diplomacy.msg_plate_src {
-    background-color: #70153b;
+  background-color: #70153b;
 }
 
 .msg_icon {
-    width: 64px;
-    height: 64px;
-    border-right: solid 1px gray;
+  width: 64px;
+  height: 64px;
+  border-right: solid 1px gray;
 }
 
 .msg_time {
-    font-size: 0.75em;
-    font-weight: normal;
+  font-size: 0.75em;
+  font-weight: normal;
 }
 
 .msg_header {
-    font-weight: bold;
-    margin-bottom: 3px;
-    color: white;
-    position: relative;
+  font-weight: bold;
+  margin-bottom: 3px;
+  color: white;
+  position: relative;
 }
 
 .msg_invalid {
-    color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.5);
 }
 
 .msg_content {
-    margin-left: 10px;
-    margin-right: 5px;
-    overflow: hidden;
+  margin-left: 10px;
+  margin-right: 5px;
+  overflow: hidden;
 }
 
 .msg_target {
-    margin: 2px 2px 0 2px;
-    padding: 2px 3px;
-    display: inline-block;
-    box-shadow: 2px 2px black;
-    border-radius: 3px;
+  margin: 2px 2px 0 2px;
+  padding: 2px 3px;
+  display: inline-block;
+  box-shadow: 2px 2px black;
+  border-radius: 3px;
 }
 .msg_target.msg_bright {
-    color: black;
+  color: black;
 }
 
 .msg_target.msg_dark {
-    color: white;
+  color: white;
 }
 
 .msg_from_to {
-    display: inline-block;
+  display: inline-block;
 }
 
 .msg_prompt {
-    text-align: right;
-    margin-top: 5px;
-    margin-right: 5px;
+  text-align: right;
+  margin-top: 5px;
+  margin-right: 5px;
 }
 .btn-delete-msg {
-    position: absolute;
-    right: 0;
-    top: 0;
-    margin: 2px 2px 0 2px;
-    font-size: 8px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin: 2px 2px 0 2px;
+  font-size: 8px;
 }
-
-</style>
+</style>