새메시지, 기본틀 완성.
This commit is contained in:
@@ -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
@@ -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>서신전달&갱신</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
@@ -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"><<%e(time)%>></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();
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
|
||||
}
|
||||
+36
-49
@@ -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"><<%e(time)%>></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"><<%e(time)%>></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
@@ -133,4 +133,9 @@ select { font-family:'굴림'; line-height:100%; }
|
||||
|
||||
.t_white{
|
||||
color:white;
|
||||
}
|
||||
}
|
||||
|
||||
.float_left{
|
||||
float:left;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user