새메시지, 기본틀 완성.

This commit is contained in:
2018-02-12 02:53:08 +09:00
parent 4166093296
commit ff2d5373f0
6 changed files with 160 additions and 127 deletions
+61
View File
@@ -0,0 +1,61 @@
@charset "UTF-8";
/*임시용 */
#container{
width:1000px;
margin:auto;
font-size:13px;
}
/*임시용 끝*/
#message_board section{
width:498px;
}
.msg_plate{
width:100%;
border:groove 0.1em;
height:64px;
font-size:13px;
word-break:break-all;
color:white;
}
.msg_plate_private{
background-color:#cc6600;
}
.msg_plate_public{
background-color:#000055;
}
.msg_plate_national, .msg_plate_diplomacy{
background-color:#336600;
}
.msg_icon{
float:left;
width:64px;
height:64px;
border-right:groove 0.1em;
}
.msg_time{
font-size:0.7em;
font-weight:normal;
}
.msg_header{
font-weight: bold;
}
#msg_input{
color:white;
background-color:black;
font-size:13px;
width:720px;
height:15px;
}
+23 -14
View File
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>JSON 지</title>
<title>JSON 메시</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="../e_lib/jquery-3.2.1.min.js"></script>
@@ -9,7 +9,7 @@
<script src="msg.js"></script>
<link href="../twe/css/normalize.css" rel="stylesheet">
<link href="../twe/css/common.css" rel="stylesheet">
<link href="msg.css" ref="stylesheet">
<link href="msg.css" rel="stylesheet">
<script>
@@ -17,22 +17,31 @@
</head>
<body style="background-color: black;">
<div id="message_board">
<div class="float_left">
<section class="public_message">
<div id="container">
<div class="message_input_form bg0">
<select>
</section>
<section class="private_message">
</section>
</select>
<input type="textarea" id="msg_input" maxlength="99">
<button>서신전달&amp;갱신</button>
</div>
<div class="float_left">
<section class="diplomacy_message">
<div id="message_board">
<div class="float_left">
<section class="public_message">
</section>
<section class="national_message">
</section>
<section class="private_message">
</section>
</div>
<div class="float_left">
<section class="diplomacy_message">
</section>
</section>
<section class="national_message">
</section>
</div>
</div>
</div>
</body>
+31 -63
View File
@@ -1,66 +1,6 @@
//FIXME: ES6 template literal을 ES5에 맞게 변경
var messageTemplate = `
<table
width="498px"
border="1"
bordercolordark="gray"
bordercolorlight="black"
cellpadding="0"
cellspacing="0"
<%if(msgType == 'private') {%>
bgcolor="#CC6600"
<%} else if(msgType == 'national') {%>
bgcolor="#336600"
<%} else /*$msgType == 'public'*/ {%>
bgcolor="#000055"
<%} %>
style="font-size:13px;table-layout:fixed;word-break:break-all;"
id="msg_<%id%>"
>
<tbody><tr>
<td width="64px" height="64px">
<%if(src.icon) { %>
<img src="<%encodeURI(src.icon)%>">
<%} else {%>
<img src="/image/default.jpg">
<%}%>
</td>
<td width="434px" valign="top">
<%if(msgType == 'private') {%>
<b>[
<font color="<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></font>
<font color="<%dest.color%>"><%e(dest.name)%>:<%e(dest.nation)%></font>
]</b>
<%} else if(msgType == 'national' && src.nation_id == dest.nation_id){%>
<b>[
<font color="<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></font>
]</b>
<%} else if(msgType == 'national' || msgType == 'diplomacy'){%>
<b>[
<font color="<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></font>
<font color="<%dest.color%>"><%e(dest.nation)%></font>
]</b>
<%} else {%>
<b>[
<font color="<%src.color%>"><%e(src.name)%>:<%e(src.nation)%>
]</b>
<%} %>
<font size="1">&lt;<%e(time)%>&gt;</font>
<br>
<%e(text)%>
<%if(this.option){ console.log('HasOption!!'); %>
<div>
<button class="prompt_yes btn_prompt">수락</button><button class="prompt_no btn_prompt">거절</button>
</div>
<%} %>
</td>
</tr></tbody>
</table>
`;
var messageTemplate = '';
var refreshMsg = (function(){
var generalID=null;
@@ -89,6 +29,31 @@ var refreshMsg = (function(){
return obj;
}
function refineMessageObjs(obj){
var msgList = [obj.public, obj.private, obj.diplomacy, obj.national];
$.each(msgList, function(){
if(!this){
return true;
}
console.log(this);
$.each(this, function(){
var msg = this;
if(!msg.src.nation){
msg.src.nation = '재야';
msg.src.color = '#ffffff';
}
if(!msg.dest.nation){
msg.dest.nation = '재야';
msg.dest.color = '#ffffff';
}
});
});
return obj;
}
function printTemplate(obj){
var printList = [
[obj.public, $('#message_board .public_message'), 'public'],
@@ -124,6 +89,7 @@ var refreshMsg = (function(){
deferred
.then(registerGlobal)
.then(refineMessageObjs)
.then(printTemplate);
@@ -133,6 +99,8 @@ var refreshMsg = (function(){
})();
jQuery(function($){
refreshMsg();
$.get('tmp_template.html',function(obj){
messageTemplate = obj;
}).then(refreshMsg);
//refreshMsg();
});
+3
View File
@@ -0,0 +1,3 @@
{
}
+36 -49
View File
@@ -1,58 +1,45 @@
<table
width="498px"
border="1"
bordercolordark="gray"
bordercolorlight="black"
cellpadding="0"
cellspacing="0"
<%if(msgType == 'private') {%>
bgcolor="#CC6600"
<%} else if(msgType == 'national') {%>
bgcolor="#336600"
<%} else /*$msgType == 'public'*/ {%>
bgcolor="#000055"
<%} %>
style="font-size:13px;table-layout:fixed;word-break:break-all;"
<div
class="msg_plate msg_plate_<%msgType%>"
id="msg_<%id%>"
>
<tbody><tr>
<td width="64px" height="64px">
<%if(src.icon !== null) { %>
<img src="<%encodeURI(src.icon)%>">
<%} else {%>
<img src="/image/default.jpg">
<%}%>
</td>
<td width="434px" valign="top">
<div class="msg_icon">
<%if(src.icon) { %>
<img src="<%encodeURI(src.icon)%>">
<%} else {%>
<img src="/image/default.jpg">
<%}%>
</div>
<div class="msg_body">
<div class="msg_header">
<%if(msgType == 'private') {%>
<b>[
<font color="<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></font>
<span>[</span>
<span style="color:<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></span>
<font color="<%dest.color%>"><%e(dest.name)%>:<%e(dest.nation)%></font>
]</b>
<span style="color:<%dest.color%>"><%e(dest.name)%>:<%e(dest.nation)%></span>
]
<%} else if(msgType == 'national' && src.nation_id == dest.nation_id){%>
<b>[
<font color="<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></font>
]</b>
[
<span style="color:<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></span>
]
<%} else if(msgType == 'national' || msgType == 'diplomacy'){%>
<b>[
<font color="<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></font>
[
<span style="color:<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></span>
<font color="<%dest.color%>"><%e(dest.nation)%></font>
]</b>
<span style="color:<%dest.color%>"><%e(dest.nation)%></span>
]
<%} else {%>
<b>[
<font color="<%src.color%>"><%e(src.name)%>:<%e(src.nation)%>
]</b>
[
<span style="color:<%src.color%>"><%e(src.name)%>:<%e(src.nation)%></span>
]
<%} %>
<font size="1">&lt;<%e(time)%>&gt;</font>
<br>
<%e(text)%>
<%if(this.option){ console.log('HasOption!!'); %>
<div>
<button class="prompt_yes btn_prompt">수락</button><button class="prompt_no btn_prompt">거절</button>
</div>
<%} %>
</td>
</tr></tbody>
</table>
<span class="msg_time">&lt;<%e(time)%>&gt;</span>
</div>
<%e(text)%>
<%if(this.option){ console.log('HasOption!!'); %>
<div>
<button class="prompt_yes btn_prompt">수락</button><button class="prompt_no btn_prompt">거절</button>
</div>
<%} %>
</div>
</div>
+6 -1
View File
@@ -133,4 +133,9 @@ select { font-family:'굴림'; line-height:100%; }
.t_white{
color:white;
}
}
.float_left{
float:left;
}