feat: MessagePanel, MessagePlate 색상 css 설정(wip)

hwe/ts/components/MessagePlate.vue

@@ -2,7 +2,7 @@
   <div
     :id="`msg_${msg.id}`"
     :class="['msg_plate', `msg_plate_${msg.msgType}`, `msg_plate_${nationType}`]"
-    data-id="${id}"
+    :data-id="msg.id"
   >
     <div class="msg_icon">
       <img v-if="src.icon" class="generalIcon" width="64" height="64" :src="encodeURI(src.icon)" />
@@ -54,7 +54,7 @@
           </template>
         </template>
         <template v-else>
-          <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: src.color }"
+          <span :class="`msg_target msg_${srcColorType}`" :style="{ backgroundColor: dest.color }"
             >{{ src.name }}:{{ src.nation }}</span
           >
         </template>
@@ -109,9 +109,9 @@ const emit = defineEmits<{
 }>();
 
 const src: Ref<MsgTarget> = ref(props.modelValue.src);
-const dest: Ref<MsgTarget> = ref(props.modelValue.src);
-const srcColorType = computed(() => isBrightColor(src.value.color)) ? "bright" : "dark";
-const destColorType = computed(() => isBrightColor(dest.value.color)) ? "bright" : "dark";
+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 msg = toRef(props, "modelValue");
 const defaultIcon = `${window.pathConfig.sharedIcon}/default.jpg`;
@@ -257,3 +257,104 @@ async function tryDecline() {
   emit("request-refresh");
 }
 </script>
+
+<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;
+}
+
+.msg_plate_private {
+    background-color: #5d1e1a;
+}
+
+.msg_plate_private.msg_plate_dest {
+    background-color: #5d461a;
+}
+
+.msg_plate_public {
+    background-color: #141c65;
+}
+
+.msg_plate_national,
+.msg_plate_diplomacy {
+    background-color: #00582c;
+}
+
+.msg_plate_national.msg_plate_dest,
+.msg_plate_diplomacy.msg_plate_dest {
+    background-color: #704615;
+}
+
+.msg_plate_national.msg_plate_src,
+.msg_plate_diplomacy.msg_plate_src {
+    background-color: #70153b;
+}
+
+.msg_icon {
+    width: 64px;
+    height: 64px;
+    border-right: solid 1px gray;
+}
+
+.msg_time {
+    font-size: 0.75em;
+    font-weight: normal;
+}
+
+.msg_header {
+    font-weight: bold;
+    margin-bottom: 3px;
+    color: white;
+    position: relative;
+}
+
+.msg_invalid {
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.msg_content {
+    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;
+}
+.msg_target.msg_bright {
+    color: black;
+}
+
+.msg_target.msg_dark {
+    color: white;
+}
+
+.msg_from_to {
+    display: inline-block;
+}
+
+.msg_prompt {
+    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;
+}
+
+</style>