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

hwe/ts/components/MessagePanel.vue

@@ -1,64 +1,74 @@
 <template>
-  <div class="MessageInputForm">메시지 입력</div>
-  <div class="PublicTalk">
-    <div>전체 메시지</div>
-    <template v-if="messagePublic.length == 0">
-      <div>메시지가 없습니다.</div>
-    </template>
-    <MessagePlate
-      v-for="msg of messagePublic"
-      :key="msg.id"
-      :modelValue="msg"
-      :generalID="generalID"
-      :generalName="generalName"
-      :nationID="nationID"
-      :permissionLevel="permissionLevel"
-    ></MessagePlate>
-  </div>
-  <div class="NationalTalk">
-    <div>국가 메시지</div>
-    <template v-if="messageNational.length == 0">
-      <div>메시지가 없습니다.</div>
-    </template>
-    <MessagePlate
-      v-for="msg of messageNational"
-      :key="msg.id"
-      :modelValue="msg"
-      :generalID="generalID"
-      :generalName="generalName"
-      :nationID="nationID"
-      :permissionLevel="permissionLevel"
-    ></MessagePlate>
-  </div>
-  <div class="PrivateTalk">
-    <div>개인 메시지</div>
-    <template v-if="messagePrivate.length == 0">
-      <div>메시지가 없습니다.</div>
-    </template>
-    <MessagePlate
-      v-for="msg of messagePrivate"
-      :key="msg.id"
-      :modelValue="msg"
-      :generalID="generalID"
-      :generalName="generalName"
-      :nationID="nationID"
-      :permissionLevel="permissionLevel"
-    ></MessagePlate>
-  </div>
-  <div class="DiplomacyTalk">
-    <div>외교 메시지</div>
-    <template v-if="messageDiplomacy.length == 0">
-      <div>메시지가 없습니다.</div>
-    </template>
-    <MessagePlate
-      v-for="msg of messageDiplomacy"
-      :key="msg.id"
-      :modelValue="msg"
-      :generalID="generalID"
-      :generalName="generalName"
-      :nationID="nationID"
-      :permissionLevel="permissionLevel"
-    ></MessagePlate>
+  <div class="MessagePanel">
+    <div class="MessageInputForm">메시지 입력</div>
+    <div class="PublicTalk">
+      <div class="BoardHeader bg0">전체 메시지</div>
+      <template v-if="messagePublic.length == 0">
+        <div>메시지가 없습니다.</div>
+      </template>
+      <template v-else>
+        <MessagePlate
+          v-for="msg of messagePublic"
+          :key="msg.id"
+          :modelValue="msg"
+          :generalID="generalID"
+          :generalName="generalName"
+          :nationID="nationID"
+          :permissionLevel="permissionLevel"
+        ></MessagePlate>
+      </template>
+    </div>
+    <div class="NationalTalk">
+      <div class="BoardHeader bg0">국가 메시지</div>
+      <template v-if="messageNational.length == 0">
+        <div>메시지가 없습니다.</div>
+      </template>
+      <template v-else>
+        <MessagePlate
+          v-for="msg of messageNational"
+          :key="msg.id"
+          :modelValue="msg"
+          :generalID="generalID"
+          :generalName="generalName"
+          :nationID="nationID"
+          :permissionLevel="permissionLevel"
+        ></MessagePlate>
+      </template>
+    </div>
+    <div class="PrivateTalk">
+      <div class="BoardHeader bg0">개인 메시지</div>
+      <template v-if="messagePrivate.length == 0">
+        <div>메시지가 없습니다.</div>
+      </template>
+      <template v-else>
+        <MessagePlate
+          v-for="msg of messagePrivate"
+          :key="msg.id"
+          :modelValue="msg"
+          :generalID="generalID"
+          :generalName="generalName"
+          :nationID="nationID"
+          :permissionLevel="permissionLevel"
+        ></MessagePlate>
+      </template>
+    </div>
+    <div class="DiplomacyTalk">
+      <div class="BoardHeader bg0">외교 메시지</div>
+      <template v-if="messageDiplomacy.length == 0">
+        <div>메시지가 없습니다.</div>
+      </template>
+      <template v-else>
+        <MessagePlate
+          v-for="msg of messageDiplomacy"
+          :key="msg.id"
+          :modelValue="msg"
+          :generalID="generalID"
+          :generalName="generalName"
+          :nationID="nationID"
+          :permissionLevel="permissionLevel"
+        ></MessagePlate>
+      </template>
+    </div>
   </div>
 </template>
 
@@ -90,11 +100,6 @@ const generalName = toRef(props, "generalName");
 const nationID = toRef(props, "nationID");
 const permissionLevel = toRef(props, "permissionLevel");
 
-onMounted(() => {
-  console.log("MessagePanel mounted");
-  console.log(props);
-});
-
 const lastSequence = ref(-1);
 
 const initRefreshLimit = 20;
@@ -236,7 +241,7 @@ async function tryRefresh() {
     } catch (e) {
       if (isString(e)) {
         toasts.warning({
-          title: '갱신 실패',
+          title: "갱신 실패",
           body: e,
         });
       }
@@ -274,3 +279,38 @@ onMounted(async () => {
   await tryRefresh();
 });
 </script>
+
+<style lang="scss" scoped>
+@import "@scss/common/break_500px.scss";
+
+.BoardHeader {
+    color: white;
+    outline-style: solid;
+    outline-width: 1px;
+    outline-color: gray;
+}
+
+.PublicTalk {
+
+}
+
+@include media-1000px {
+  .MessagePanel{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .MessageInputForm{
+    grid-column: 1 / 3;
+  }
+
+  .PublicTalk{
+    border-right: 1px solid gray;
+  }
+
+  .PrivateTalk{
+    border-right: 1px solid gray;
+  }
+}
+
+</style>

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>