json으로 받아온 내용을 출력하긴 위한 template 준비

common.js 파일 추가
메시지를 변환하기 위한 msg_template.html 작성

tmp_map/map.html

@@ -5,6 +5,7 @@
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <script src="../e_lib/jquery-3.2.1.min.js"></script>
+<script src="common.js"></script>
 <script src="base_map.js"></script>
 <script src="map.js"></script>
 <link href="../twe/css/normalize.css" rel="stylesheet">

tmp_msg/msg.html

@@ -5,6 +5,7 @@
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <script src="../e_lib/jquery-3.2.1.min.js"></script>
+<script src="../twe/js/template.js"></script>
 <script src="msg.js"></script>
 <link href="../twe/css/normalize.css" rel="stylesheet">
 <link href="../twe/css/common.css" rel="stylesheet">

tmp_msg/msg.js

@@ -1,11 +1,66 @@
+
+
+//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;"
+    data-id="<%id%>"
+>
+    <tbody><tr>
+        <td width="64px" height="64px">
+            <%if(src.iconPath !== null) { %>
+                <img src="<%urlencode(src.iconPath)%>">
+            <%} else {%>
+                <img src="/image/default.jpg"> /*NOTE: image 폴더는 어느 단에서 다뤄야하는가? */
+            <%}%>
+        </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') {%>
+                <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($datetime)%>&gt;</font>
+            <br>
+            <%e(message)%>
+        </td>
+    </tr></tbody>
+</table>
+`;
+
 jQuery(function($){
 
     var generalID=1;
     var sequence =null;
 
-});
-
-
-function refreshMsg(){
+    function refreshMsg(){
     
-}
+    }
+
+    refreshMsg();
+});

tmp_msg/tmp_template.html

@@ -0,0 +1,49 @@
+<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;"
+    data-id="<%id%>"
+>
+    <tbody><tr>
+        <td width="64px" height="64px">
+            <%if(src.iconPath !== null) { %>
+                <img src="<%urlencode(src.iconPath)%>">
+            <%} else {%>
+                <img src="/image/default.jpg"> /*NOTE: image 폴더는 어느 단에서 다뤄야하는가? */
+            <%}%>
+        </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') {%>
+                <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($datetime)%>&gt;</font>
+            <br>
+            <%e(message)%>
+        </td>
+    </tr></tbody>
+</table>

twe/a_status.php

@@ -25,6 +25,7 @@ if($con >= 2) { printLimitMsg($me['turntime']); exit(); }
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>세력도</title>
 <script src="../e_lib/jquery-3.2.1.min.js"></script>
+<script src="js/common.js"></script>
 <script src="js/base_map.js"></script>
 <script src="js/map.js"></script>
 <script>

twe/b_diplomacy.php

@@ -53,6 +53,7 @@ if($me['skin'] < 1) {
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>중원정보</title>
 <script src="../e_lib/jquery-3.2.1.min.js"></script>
+<script src="js/common.js"></script>
 <script src="js/base_map.js"></script>
 <script src="js/map.js"></script>
 <script>

twe/index.php

@@ -66,6 +66,7 @@ $scenario = getScenario();
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <script src="../e_lib/jquery-3.2.1.min.js"></script>
+<script src="js/common.js"></script>
 <script src="js/main.js"></script>
 <script src="js/base_map.js"></script>
 <script src="js/map.js"></script>

twe/js/base_map.js

@@ -1,40 +1,4 @@
-function convertDictById(arr){
-    var result = {};
-    arr.forEach(function(v, i){
-        result[v.id] = v;
-    });
-    return result;
-}
 
-function convertSet(arr){
-    var result = {};
-    arr.forEach(function(v){
-        result[v] = v;
-    });
-    return result;
-}
-
-function convColorValue(color){
-    if(color.charAt(0) == '#'){
-        color = color.substr(1);
-    }
-    color = color.toUpperCase();
-
-    var colorBase = convertSet([
-        '000080', '0000FF', '008000', '008080', '00BFFF', '00FF00', '00FFFF', '20B2AA',
-        '2E8B57', '483D8B', '6495ED', '7B68EE', '7CFC00', '7FFFD4', '800000', '800080',
-        '808000', '87CEEB', 'A0522D', 'A9A9A9', 'AFEEEE', 'BA55D3', 'E0FFFF', 'F5F5DC',
-        'FF0000', 'FF00FF', 'FF6347', 'FFA500', 'FFC0CB', 'FFD700', 'FFDAB9', 'FFFF00',
-        'FFFFFF'
-    ]);
-
-    if(!colorBase.hasOwnProperty(color)){
-        return '000000';
-    }
-
-    return color;
-    
-}
 
 function getCityPosition(){
     return {

twe/js/common.js

@@ -0,0 +1,109 @@
+/** 
+ * <>& 등을 html에서도 그대로 보이도록 escape주는 함수
+ * @see https://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery
+ * @param {string} string escape하고자 하는 문자열
+ * @returns {string}
+*/
+var escapeHtml = (function (string) {
+    var entityMap = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#39;',
+        '/': '&#x2F;',
+        '`': '&#x60;',
+        '=': '&#x3D;'
+    };
+
+    return function(string) {
+        return String(string).replace(/[&<>"'`=\/]/g, function(s) {
+            return entityMap[s];
+        });
+    }
+})();
+
+
+/**
+ * object의 array를 id를 key로 삼는 object로 재 변환
+ * @param {Array.{id: Object}} arr id를 가진 object의 array
+ * @returns {Object}
+ */
+function convertDictById(arr) {
+    var result = {};
+    arr.forEach(function (v, i) {
+        result[v.id] = v;
+    });
+    return result;
+}
+
+/**
+ * array를 set 형태의 object로 변환
+ * @param {Array} arr 값을 가진 array
+ * @returns {Object}
+ */
+function convertSet(arr) {
+    var result = {};
+    arr.forEach(function (v) {
+        result[v] = true;
+    });
+    return result;
+}
+
+/**
+ * 게임내에서 지원하는 color type만 선택할 수 있도록 해주는 함수
+ * @param {string} color #AAAAAA 또는 AAAAAA 형태로 작성된 RGB hex color string
+ * @returns {string}
+ */
+function convColorValue(color) {
+    if (color.charAt(0) == '#') {
+        color = color.substr(1);
+    }
+    color = color.toUpperCase();
+
+    var colorBase = convertSet([
+        '000080', '0000FF', '008000', '008080', '00BFFF', '00FF00', '00FFFF', '20B2AA',
+        '2E8B57', '483D8B', '6495ED', '7B68EE', '7CFC00', '7FFFD4', '800000', '800080',
+        '808000', '87CEEB', 'A0522D', 'A9A9A9', 'AFEEEE', 'BA55D3', 'E0FFFF', 'F5F5DC',
+        'FF0000', 'FF00FF', 'FF6347', 'FFA500', 'FFC0CB', 'FFD700', 'FFDAB9', 'FFFF00',
+        'FFFFFF'
+    ]);
+
+    if (!colorBase.hasOwnProperty(color)) {
+        return '000000';
+    }
+
+    return color;
+
+}
+
+/**
+ * 단순한 Template 함수.  <%변수명%>으로 template 가능
+ * @see  https://github.com/krasimir/absurd/blob/master/lib/processors/html/helpers/TemplateEngine.js
+ * @param {string} html 
+ * @param {object} options 
+ * @returns {string}
+ */
+var TemplateEngine = function (html, options) {
+    var re = /<%(.+?)%>/g,
+        reExp = /(^( )?(var|if|for|else|switch|case|break|{|}|;))(.*)?/g,
+        code = 'with(obj) { var r=[];\n',
+        cursor = 0,
+        result,
+        match;
+    var add = function (line, js) {
+        js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
+            (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
+        return add;
+    }
+    options.e = escapeHtml;
+    while (match = re.exec(html)) {
+        add(html.slice(cursor, match.index))(match[1], true);
+        cursor = match.index + match[0].length;
+    }
+    add(html.substr(cursor, html.length - cursor));
+    code = (code + 'return r.join(""); }').replace(/[\r\t\n]/g, ' ');
+    try { result = new Function('obj', code).apply(options, [options]); }
+    catch (err) { console.error("'" + err.message + "'", " in \n\nCode:\n", code, "\n"); }
+    return result;
+}

twe/processing.php

@@ -118,6 +118,7 @@ function starter($name, $type=0) {
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <script src="../e_lib/jquery-3.2.1.min.js"></script>
+<script src="js/common.js"></script>
 <script src="js/main.js"></script>
 <script src="js/base_map.js"></script>
 <script src="js/map.js"></script>