서버 선택 리스트 재작성

2018-03-17 05:12:11 +09:00
parent fc8dc09945
commit cd1456caa7
8 changed files with 238 additions and 93 deletions
@@ -36,9 +36,8 @@ div     {
    border-bottom-color: black;
 }

-/*
-div     {
-    width: 100px; height: 20px;
+
+.legacy_layout div     {
    border: solid 1px; border-spacing: 0px; border-collapse: separate; border-top-color: gray; border-left-color: gray; border-right-color: black; border-bottom-color: black;
    padding: 0px;
    font-size: 13px;
@@ -46,7 +45,7 @@ div     {
    text-align: center;
    font-family: '맑은 고딕'; line-height: 110%;
 }
-*/
+
 font    { font-family: '맑은 고딕'; line-height: 110%; }
 /*
 input   {
@@ -4,7 +4,7 @@ require_once('_common.php');
 class _Setting {
    private $basepath;
    private $settingFile;
-    private $exist = 0;
+    private $exist = false;

    public function __construct($basepath) {
        
@@ -13,7 +13,7 @@ class _Setting {
        $this->settingFile = realpath($basepath.'/d_setting/conf.php');

        if(file_exists($this->settingFile)) {
-            $this->exist = 1;
+            $this->exist = true;
        }
    }

@@ -1,3 +1,28 @@
+var serverListTemplate = "\
+<div class='Entrance_ServerList' data-server='<%name%>'>\
+    <div class='Entrance_ServerListServer'><br>\
+        <span style='font-weight:bold;font-size:1.4em;color:<%color%>'><%korName%>섭</span>\
+        <span class='n_country'></span>\
+    </div>\
+    <div class='Entrance_ServerListDown'><br>- 폐 쇄 중 -</div>\
+</div>\
+";
+
+var serverFullTemplate = "\
+<div class='Entrance_ServerListBlock'>- 장수 등록 마감 -</div>\
+";
+
+var serverCreateAndSelectTemplate = "\
+<div class='Entrance_ServerListNoRegister'>- 미 등 록 -</div>\
+<input class='GeneralSelect' type='button' value='장수선택'>\
+<input class='GeneralCreate' type='button' value='장수생성'>\
+";
+
+var serverCreateTemplate = "\
+<div class='Entrance_ServerListNoRegister'>- 미 등 록 -</div>\
+<input class='GeneralCreate' type='button' value='장수생성'>\
+";
+
 function Entrance_Import() {
    ImportAction(HOME+I+ENTRANCE+W+MANAGE+W+ACTION);

@@ -22,7 +47,8 @@ function Entrance_UpdateServer() {
            },
            function(response, textStatus) {
                if(response.result == "SUCCESS") {
-                    Entrance_ServerList(response.serverCount, response.servers);
+                    Entrance_drawServerList(response.server);
+                    //Entrance_ServerList(response.serverCount, response.servers);
                    Entrance_ServerListPosition();
                    Popup_WaitHide();
                } else {
@@ -33,6 +59,18 @@ function Entrance_UpdateServer() {
    });
 }

+function Entrance_drawServerList(serverInfos){
+    var $serverList = $('#Entrance_000002');
+    $.each(serverInfos, function(idx, serverInfo){
+        var serverHtml = TemplateEngine(serverListTemplate, serverInfo);
+        $serverList.append(serverHtml);
+        if(!serverInfo.enable){
+            return;
+        }
+    });
+    $serverList.height(serverInfos.length *64);
+}
+
 function Entrance_ServerList(serverCount, servers) {
    $("#Entrance_000002").html(servers);
    $("#Entrance_000002").height(serverCount*64);
@@ -1,65 +0,0 @@
-<?php
-require_once('_common.php');
-require_once(ROOT.'/f_config/DB.php');
-require_once(ROOT.'/f_config/SESSION.php');
-
-$db = getRootDB();
-$system = $db->queryFirstRow('SELECT `NOTICE` FROM `SYSTEM` WHERE `NO`=1');
-
-$member = $db->queryFirstRow('SELECT ID, GRADE FROM `MEMBER` WHERE `NO` = %i', $SESSION->NoMember());
-
-?>
-
-<?php include(MANAGE.W.FRAME); ?>
-<?php
-if($member['GRADE'] >= 6) {
-    include(MEMBER.W.FRAME);
-}
-?>
-
-<div id="Entrance_00">
-
-    <div id="Entrance_0007"><font color=orange size=6><?=$system['NOTICE'];?></font></div>
-    <div id="Entrance_0004"></div>
-<?php $banner_id = $member['ID']; ?>
-    <div id="Entrance_0005">
-    </div>
-    <div id="Entrance_0006">
-    </div>
-
-    <div id="Entrance_0000" class="bg0">
-        <div id="Entrance_000000" class="bg2">서 버 선 택</div>
-        <div id="Entrance_000001">
-            <div id="Entrance_00000000" class="bg1">서 버</div>
-            <div id="Entrance_00000001" class="bg1">정 보</div>
-            <div id="Entrance_00000002" class="bg1">캐 릭 터</div>
-            <div id="Entrance_00000003" class="bg1">선 택</div>
-        </div>
-        <div id="Entrance_000002">
-        </div>
-        <div id="Entrance_000003">
-<pre><font class="Entrance_Alert">★ 1명이 1개 넘는 계정을 접속하거나 대턴(대신 턴 입력)행위는 당연히 불법입니다.</font>
-<font class="Entrance_Alert">★ 접속장소를 못적고 로그인 한 경우, 바로 다시 잘 적고 로그인 하시면 문제없습니다.</font>
-계정은 한번 등록으로 계속 사용합니다. 각 서버 리셋시 캐릭터만 새로 생성하면 됩니다.
-
-<font class="Entrance_Che">체섭</font> : 메인서버입니다. 천하통일에 도전하여 왕조일람과 명예의전당에 올라봅시다! (주로 1턴=60분)
-<font class="Entrance_Kwe">퀘섭</font> : 역사의 한 순간에 뛰어들어, 실제 장수가 되어 가상의 역사를 만들어 봅시다! (주로 1턴=30분)
-<font class="Entrance_Pwe">풰섭</font> : 역사의 한 순간에 뛰어들어, 실제 장수들과 어울려 사실적 역사를 체험해 봅시다! (주로 1턴=20분)
-<font class="Entrance_Twe">퉤섭</font> : 주로 패치사항 미리보기 테스트 서버입니다. 600여명의 NPC들과 경쟁해 보세요! (주로 1턴=10분)
-<font class="Entrance_Hwe">훼섭</font> : 1일천하 서버. 또는 운영자 테스트용 서버입니다. (주로 1턴=1분)</pre>
-        </div>
-    </div>
-    <div id="Entrance_0001" class="bg0">
-        <div id="Entrance_000100" class="bg2">계 정 관 리</div>
-        <input id="Entrance_000101" type="button" value="비밀번호 & 전콘 & 탈퇴">
-        <input id="Entrance_000102" type="button" value="로 그 아 웃">
-    </div>
-
-<?php
-if($member['GRADE'] >= 6) {
-    include(ADMIN.INC);
-}
-?>
-
-</div>
-
@@ -119,12 +119,19 @@
    line-height: 64px;
 }

+
 .Entrance_ServerListSelect {
    width: 120px; height: 32px;
    float: left;
 }

-.Entrance_ServerListLogin {
+.Entrance_ServerCreateAndSelect .GeneralCreate,
+.Entrance_ServerCreateAndSelect .GeneralSelect {
+    width: 120px; height: 32px;
+    float: left;
+}
+
+.GeneralCreate {
    width: 120px; height: 64px;
    float: left;
 }
@@ -1,7 +1,13 @@
 <?php
 require_once('_common.php');
-?>
+require_once(ROOT.'/f_config/DB.php');
+require_once(ROOT.'/f_config/SESSION.php');

+$db = getRootDB();
+$system = $db->queryFirstRow('SELECT `NOTICE` FROM `SYSTEM` WHERE `NO`=1');
+$member = $db->queryFirstRow('SELECT ID, GRADE FROM `MEMBER` WHERE `NO` = %i', $SESSION->NoMember());
+
+?>
 <!DOCTYPE html>
 <html>

@@ -17,8 +23,8 @@ require_once('_common.php');
        <link type="text/css" rel="stylesheet" href='../i_entrance/Style.css'>

        <!-- 액션 -->
+        <script type="text/javascript" src='../js/common.js'></script>
        <script type="text/javascript" src='../e_lib/jquery-3.2.1.min.js'></script>
-        <script type="text/javascript" src='../e_lib/md5-min.js'></script>
        <script type="text/javascript" src='../f_config/config.js'></script>
        <script type="text/javascript" src='../f_config/app.js'></script>
        <script type="text/javascript" src='../f_func/func.js'></script>
@@ -30,7 +36,7 @@ $(document).ready(Entrance);

 function Entrance() {
    ImportView("body", "../i_popup/Frame.php");
-    ImportView("body", FRAME);
+    //ImportView("body", FRAME);

    Popup_Import();
    Popup_Init();
@@ -42,8 +48,53 @@ function Entrance() {
 }
        </script>
    </head>
-
    <body>
+<?php include(MANAGE.W.FRAME); ?>
+<?php
+if($member['GRADE'] >= 6) {
+    include(MEMBER.W.FRAME);
+}
+?>
+<div id="Entrance_00" class="legacy_layout">
+
+<div id="Entrance_0007"><span style="color:orange;font-size:2em;"><?=$system['NOTICE'];?></span></div>
+
+<div id="Entrance_0000" class="bg0">
+    <div id="Entrance_000000" class="bg2">서 버 선 택</div>
+    <div id="Entrance_000001">
+        <div id="Entrance_00000000" class="bg1">서 버</div>
+        <div id="Entrance_00000001" class="bg1">정 보</div>
+        <div id="Entrance_00000002" class="bg1">캐 릭 터</div>
+        <div id="Entrance_00000003" class="bg1">선 택</div>
+    </div>
+    <div id="Entrance_000002">
+    </div>
+    <div id="Entrance_000003">
+<pre><span class="Entrance_Alert">★ 1명이 1개 넘는 계정을 접속하거나 대턴(대신 턴 입력)행위는 당연히 불법입니다.</span>
+<span class="Entrance_Alert">★ 접속장소를 못적고 로그인 한 경우, 바로 다시 잘 적고 로그인 하시면 문제없습니다.</span>
+계정은 한번 등록으로 계속 사용합니다. 각 서버 리셋시 캐릭터만 새로 생성하면 됩니다.
+
+<span class="Entrance_Che">체섭</span> : 메인서버입니다. 천하통일에 도전하여 왕조일람과 명예의전당에 올라봅시다! (주로 1턴=60분)
+<span class="Entrance_Kwe">퀘섭</span> : 역사의 한 순간에 뛰어들어, 실제 장수가 되어 가상의 역사를 만들어 봅시다! (주로 1턴=30분)
+<span class="Entrance_Pwe">풰섭</span> : 역사의 한 순간에 뛰어들어, 실제 장수들과 어울려 사실적 역사를 체험해 봅시다! (주로 1턴=20분)
+<span class="Entrance_Twe">퉤섭</span> : 주로 패치사항 미리보기 테스트 서버입니다. 600여명의 NPC들과 경쟁해 보세요! (주로 1턴=10분)
+<span class="Entrance_Hwe">훼섭</span> : 1일천하 서버. 또는 운영자 테스트용 서버입니다. (주로 1턴=1분)</pre>
+    </div>
+</div>
+<div id="Entrance_0001" class="bg0">
+    <div id="Entrance_000100" class="bg2">계 정 관 리</div>
+    <input id="Entrance_000101" type="button" value="비밀번호 & 전콘 & 탈퇴">
+    <input id="Entrance_000102" type="button" value="로 그 아 웃">
+</div>
+
+<?php
+if($member['GRADE'] >= 6) {
+include(ADMIN.INC);
+}
+?>
+
+</div>
+
    </body>

 </html>
@@ -6,28 +6,22 @@ require_once(ROOT.'/f_config/SESSION.php');
 // 외부 파라미터
 $response['serverCount'] = count($serverList);
 $response['servers'] = '';
+$response['server'] = [];

 foreach($serverList as $serverInfo){
    list($serverKorName, $serverColor, $setting) = $serverInfo;

-    $serverText = "<span style='font-weight:bold;font-size:1.4em;color:{$serverColor}'>{$serverKorName}</span>";
-    if(!$serverInfo->isExist()) {
-        $response['servers'] .= "
-<div class='Entrance_ServerList'>
-    <div class='Entrance_ServerListServer'><br>{$serverText}</div>
-    <div class='Entrance_ServerListDown'><br>- 폐 쇄 중 -</div>
-</div>
-";
-    } else {
-        $response['servers'] .= "
-<div class='Entrance_ServerList ServerActive' data-server='{$serverInfo->getServerName()}>
-    <div class='Entrance_ServerListServer'><br>{$serverText}</div>
-</div>";
-        //TODO: 이에 대해 동적으로 j_server_basic_info.php 를 불러서 기록해야함.
-    }
+    $serverObj = [
+        'color'=>$serverColor,
+        'korName'=>$serverKorName,
+        'name'=>$setting->getShortName(),
+        'enable'=>$setting->isExist()
+    ];
+
+    $response['server'][] = $serverObj;
 }

 $response['result'] = 'SUCCESS';
-echo json_encode($response);
+returnJson($response);


@@ -0,0 +1,121 @@
+/** 
+ * <>& 등을 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;
+}
+
+
+/** 
+ * {0}, {1}, {2}형태로 포맷해주는 함수
+*/
+String.prototype.format = function() {
+    var args = arguments;
+    return this.replace(/{(\d+)}/g, function(match, number) { 
+        return (typeof args[number] != 'undefined') ? args[number] : match;
+    });
+};
+
+
+/**
+ * 게임내에서 지원하는 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;
+}