새메시지, 출력 방식 수정

This commit is contained in:
2018-02-12 21:41:11 +09:00
parent 63be06c98f
commit e864af0b6d
4 changed files with 109 additions and 28 deletions
+62 -5
View File
@@ -17,22 +17,22 @@
width:100%;
border:groove 0.1em;
height:64px;
font-size:13px;
font-size:12px;
word-break:break-all;
color:white;
}
.msg_plate_private{
background-color:#cc6600;
background-color:#5d1e1a;
}
.msg_plate_public{
background-color:#000055;
background-color:#141c65;
}
.msg_plate_national, .msg_plate_diplomacy{
background-color:#336600;
background-color:#00582c;
}
@@ -50,12 +50,69 @@
.msg_header{
font-weight: bold;
margin-bottom:3px;
color:white;
}
#msg_input{
color:white;
background-color:black;
font-size:13px;
font-size:12px;
width:720px;
height:15px;
}
#mailbox_list{
color:white;
background-color:black;
font-size:12px;
}
.board_header{
color:white;
border:groove 0.1em;
}
.board_side{
width:50%;
float:left;
}
.msg_body{
padding-left:64px;
}
.msg_target{
margin:2px 2px 0 2px;
padding:2px 3px;
display:inline-block;
box-shadow: 2px 2px black;
border-radius: 3px;
}
.public_message .msg_target{
box-shadow: 2px 2px darkslategrey;
}
.msg_target.msg_bright{
color:black;
}
.msg_target.msg_dark{
color:white;
}
.msg_from_to{
display:inline-block;
}
.msg_content{
margin-left:10px;
margin-right:5px;
}
.msg_prompt{
text-align:right;
margin-top:5px;
margin-right:5px;
}
+10 -3
View File
@@ -19,25 +19,32 @@
<body style="background-color: black;">
<div id="container">
<div class="message_input_form bg0">
<select>
<select id="mailbox_list" size="1">
<select name="genlist" size="1" style="color:white;background-color:black;font-size:13">
</select>
<input type="textarea" id="msg_input" maxlength="99">
<button>서신전달&amp;갱신</button>
</div>
<div id="message_board">
<div class="float_left">
<div class="board_side">
<div class="board_header bg0">전체 메시지(최고99자)</div>
<section class="public_message">
</section>
<div class="board_header bg0">개인 메시지(최고99자)</div>
<section class="private_message">
</section>
</div>
<div class="float_left">
<div class="board_side">
<section class="diplomacy_message">
</section>
<div class="board_header bg0">국가 메시지(최고99자)</div>
<section class="national_message">
</section>
+23
View File
@@ -1,5 +1,25 @@
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function isBrightColor(color){
color = hexToRgb(color);
if ((color.r*0.299 + color.g*0.587 + color.b*0.114) > 186){
return true;
}
else{
return false;
}
}
var messageTemplate = '';
var refreshMsg = (function(){
@@ -49,6 +69,9 @@ var refreshMsg = (function(){
msg.dest.nation = '재야';
msg.dest.color = '#ffffff';
}
msg.src.colorType = isBrightColor(msg.src.color)?'bright':'dark';
msg.dest.colorType = isBrightColor(msg.dest.color)?'bright':'dark';
});
});
return obj;
+14 -20
View File
@@ -12,34 +12,28 @@
<div class="msg_body">
<div class="msg_header">
<%if(msgType == 'private') {%>
<span>[</span>
<span style="color:<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></span>
<span style="color:<%dest.color%>"><%e(dest.name)%>:<%e(dest.nation)%></span>
]
<span class="msg_target msg_<%src.colorType%>" style="background-color:<%src.color%>;"><%e(src.name)%>:<%e(src.nation)%></span
><span class="msg_from_to"></span
><span class="msg_target msg_<%dest.colorType%>" style="background-color:<%dest.color%>;"><%e(dest.name)%>:<%e(dest.nation)%></span>
<%} else if(msgType == 'national' && src.nation_id == dest.nation_id){%>
[
<span style="color:<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></span>
]
<span class="msg_target msg_<%src.colorType%>" style="background-color:<%src.color%>;"><%e(src.name)%>:<%e(src.nation)%></span>
<%} else if(msgType == 'national' || msgType == 'diplomacy'){%>
[
<span style="color:<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></span>
<span style="color:<%dest.color%>"><%e(dest.nation)%></span>
]
<span class="msg_target msg_<%src.colorType%>" style="background-color:<%src.color%>;"><%e(src.name)%>:<%e(src.nation)%></span
><span class="msg_from_to"></span
><span class="msg_target msg_<%dest.colorType%>" style="background-color:<%dest.color%>;"><%e(dest.nation)%></span>
<%} else {%>
[
<span style="color:<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></span>
]
<span class="msg_target msg_<%src.colorType%>" style="background-color:<%src.color%>;"><%e(src.name)%>:<%e(src.nation)%></span>
<%} %>
<span class="msg_time">&lt;<%e(time)%>&gt;</span>
</div>
<%e(text)%>
<div class="msg_content">
<%e(text)%>
</div>
<%if(this.option){ console.log('HasOption!!'); %>
<div>
<button class="prompt_yes btn_prompt">수락</button><button class="prompt_no btn_prompt">거절</button>
</div>
<div class="msg_prompt">
<button class="prompt_yes btn_prompt">수락</button> <button class="prompt_no btn_prompt">거절</button>
</div>
<%} %>
</div>
</div>