로그인 form draw 예시

css/login.css

@@ -1,4 +1,5 @@
-body, html{
+body,
+html {
     height: 100%;
     background-repeat: no-repeat;
 }
@@ -41,7 +42,6 @@ input::-webkit-input-placeholder {
     -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
     -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
     box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-
 }
 
 .main-center {
@@ -49,7 +49,6 @@ input::-webkit-input-placeholder {
     margin: 0 auto;
     max-width: 330px;
     padding: 40px 40px;
-
 }
 
 .login_btn_group {
@@ -61,43 +60,38 @@ input::-webkit-input-placeholder {
     text-align: center;
 }
 
-
 .col-form-label {
     text-align: center;
 }
 
 .terms {
-    max-height: 200px; overflow-y: auto;
+    max-height: 200px;
+    overflow-y: auto;
 }
 
 .terms pre {
     width: 100%;
-    white-space: pre-wrap;       /* Since CSS 2.1 */
+    white-space: pre-wrap;
-    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    /* Since CSS 2.1 */
-    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -moz-pre-wrap;
-    white-space: -o-pre-wrap;    /* Opera 7 */
+    /* Mozilla, since 1999 */
-    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+    white-space: -pre-wrap;
+    /* Opera 4-6 */
+    white-space: -o-pre-wrap;
+    /* Opera 7 */
+    word-wrap: break-word;
+    /* Internet Explorer 5.5+ */
 }
 
 .vertical-center {
-    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
+    min-height: 100%;
-    min-height: 100vh; /* These two lines are counted as one :-)       */
+    /* Fallback for browsers do NOT support vh unit */
-
+    min-height: 100vh;
+    /* These two lines are counted as one :-)       */
     display: flex;
     align-items: center;
 }
 
-.full-content {
-    position:fixed;
-    left:0;
-    top:0;
-    width:100%;
-    height:100%;
-    margin:0;
-    padding:0;
-    z-index:800;
-}
-
 #login_card {
     z-index: 801;
 }
@@ -109,7 +103,8 @@ input::-webkit-input-placeholder {
     background-color: transparent;
     color: transparent;
     border: 0;
-    background-size: 100%; /* To fill the dimensions of container (button), or */
+    background-size: 100%;
+    /* To fill the dimensions of container (button), or */
     background-repeat: no-repeat;
     background-position: bottom center;
     margin-top: 5px;
@@ -120,12 +115,18 @@ input::-webkit-input-placeholder {
     background-image: url('../oauth_kakao/kakao_login_join_ov.png');
 }
 
-#bottom_box{
-    position:fixed;
-    bottom:0;
-    width:100%;
-    left:0;
-}
 #bottom_box .container {
     text-align: center;
 }
+
+.btn-group-xs>.btn,
+.btn-xs {
+    padding: .25rem .4rem;
+    font-size: .875rem;
+    line-height: .5;
+    border-radius: .2rem;
+}
+
+#running_map {
+    margin-top: 20px;
+}

hwe/j_map_recent.php

@@ -54,7 +54,7 @@ $defaultPost = [
     'showMe' => false,
 ];
 
-$history = getGlobalHistoryLogRecent(15);
+$history = formatHistoryToHTML(getGlobalHistoryLogRecent(10));
 $rawMap = getWorldMap([
     'year' => null,
     'month' => null,
@@ -63,7 +63,12 @@ $rawMap = getWorldMap([
     'showMe' => false,
 ]);
 
+$db = DB::db();
+$gameStor = KVStorage::getStorage($db, 'game_env');
+$mapTheme = $gameStor->map_theme ?? 'che';
+
 $rawMap['history'] = $history;
+$rawMap['theme'] = $mapTheme;
 
 $etag = hash('sha256', $serverID.$now);
 $map = [

hwe/js/map.js

@@ -1,4 +1,3 @@
-
 function is_touch_device() {
     var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
     var mq = function(query) {
@@ -16,8 +15,11 @@ function is_touch_device() {
     return mq(query);
 }
 
-function reloadWorldMap(option){
+function reloadWorldMap(option, drawTarget) {
-    var $world_map = $('.world_map');
+    if (drawTarget === undefined || drawTarget === null) {
+        drawTarget = '.world_map'
+    }
+    var $world_map = $(drawTarget);
 
     if ($world_map.length == 0) {
         return;
@@ -36,7 +38,11 @@ function reloadWorldMap(option){
         aux: null, //기타 넣고 싶은 값을 입력
         neutralView: false, //clickable, 소속 국가, 첩보 여부 등을 반환여부를 설정
         showMe: true, //반환 값에 본인이 위치한 도시 값을 반환하도록 설정. neutralView와 별개
+
         targetJson: 'j_map.php',
+        reqType: 'post',
+        dynamicMapTheme: false,
+        callback: null,
 
         //기타 보조 값
         startYear: null,
@@ -63,9 +69,9 @@ function reloadWorldMap(option){
             return obj.promise();
         }
 
-        if(!$.isNumeric(obj.startYear)
+        if (!$.isNumeric(obj.startYear) ||
-            ||!$.isNumeric(obj.year)
+            !$.isNumeric(obj.year) ||
-            ||!$.isNumeric(obj.month)
+            !$.isNumeric(obj.month)
         ) {
             var obj = $.Deferred();
             obj.reject('fail');
@@ -82,26 +88,40 @@ function reloadWorldMap(option){
         return obj;
     }
 
+
+
     function setMapBackground(obj) {
+        function setTheme() {
+            var oldTheme = $world_map.data('currentTheme');
+            var newTheme = obj.theme;
+            if (oldTheme === newTheme) {
+                return;
+            }
+            if (oldTheme) {
+                $world_map.removeClass('map_theme_' + oldTheme);
+            }
+            $world_map.addClass('map_theme_' + newTheme);
+            $world_map.data('currentTheme', newTheme);
+        }
+        if (option.dynamicMapTheme) {
+            setTheme();
+        }
         var startYear = obj.startYear;
         var year = obj.year;
         var month = obj.month;
 
         if (isDetailMap) {
             $world_map.addClass('map_detail').removeClass('map_basic');
-        }
+        } else {
-        else{
             $world_map.addClass('map_basic').removeClass('map_detail');
         }
 
         var $map_title = $('.map_title_text');
         if (year < startYear + 1) {
             $map_title.css('color', 'magenta');
-        }
+        } else if (year < startYear + 2) {
-        else if(year < startYear + 2){
             $map_title.css('color', 'orange');
-        }
+        } else if (year < startYear + 3) {
-        else if(year < startYear + 3){
             $map_title.css('color', 'yellow');
         }
 
@@ -135,14 +155,11 @@ function reloadWorldMap(option){
         $world_map.removeClass('map_string map_summer map_fall map_winter');
         if (month <= 3) {
             $world_map.addClass('map_spring');
-        }
+        } else if (month <= 6) {
-        else if(month <= 6){
             $world_map.addClass('map_summer');
-        }
+        } else if (month <= 9) {
-        else if(month <= 9){
             $world_map.addClass('map_fall');
-        }
+        } else {
-        else{
             $world_map.addClass('map_winter');
         }
 
@@ -257,7 +274,7 @@ function reloadWorldMap(option){
 
     function drawDetailWorldMap(obj) {
 
-        var $map_body = $('.world_map .map_body');
+        var $map_body = $(drawTarget + ' .map_body');
 
         var cityList = obj.cityList;
         var myCity = obj.myCity;
@@ -317,7 +334,7 @@ function reloadWorldMap(option){
 
     function drawBasicWorldMap(obj) {
 
-        var $map_body = $('.world_map .map_body');
+        var $map_body = $(drawTarget + ' .map_body');
 
         var cityList = obj.cityList;
         var myCity = obj.myCity;
@@ -345,11 +362,9 @@ function reloadWorldMap(option){
                 var state_text = 'wrong';
                 if (city.state < 10) {
                     state_text = 'good';
-                }
+                } else if (city.state < 40) {
-                else if(city.state < 40){
                     state_text = 'bad';
-                }
+                } else if (city.state < 50) {
-                else if(city.state < 50){
                     state_text = 'war';
                 }
 
@@ -375,13 +390,13 @@ function reloadWorldMap(option){
     }
 
     function setMouseWork(obj) {
-        var $tooltip = $('.world_map .city_tooltip');
+        var $tooltip = $(drawTarget + ' .city_tooltip');
         var $tooltip_city = $tooltip.find('.city_name');
         var $tooltip_nation = $tooltip.find('.nation_name');
 
-        var $objs = $('.world_map .city_link');
+        var $objs = $(drawTarget + ' .city_link');
 
-        var $map_body = $('.world_map .map_body');
+        var $map_body = $(drawTarget + ' .map_body');
 
         //터치스크린 탭
 
@@ -395,11 +410,9 @@ function reloadWorldMap(option){
                 var touchMode = $this.data('touchMode');
                 if ($tooltip_city.data('target') != $this.data('id')) {
                     $this.data('touchMode', 1);
-                }
+                } else if (touchMode === undefined) {
-                else if(touchMode === undefined){
                     $this.data('touchMode', 1);
-                }
+                } else {
-                else{
                     $this.data('touchMode', touchMode + 1);
                 }
                 $map_body.data('touchMode', 1);
@@ -420,12 +433,20 @@ function reloadWorldMap(option){
                 var nation_text = $this.data('nation');
                 if (nation_text) {
                     $tooltip_nation.html(nation_text).show();
-                }
+                } else {
-                else{
                     $tooltip_nation.html('').hide();
                 }
 
-                $tooltip.css({'top': position.top + 25, 'left': position.left + 35}).show();
+                var left = position.left;
+                var top = position.top;
+
+                var scale = $map_body.data('scale');
+                if (scale) {
+                    left /= scale;
+                    top /= scale;
+                }
+
+                $tooltip.css({ 'top': top + 25, 'left': left + 35 }).show();
 
                 var touchMode = $this.data('touchMode');
                 if (touchMode <= 1) {
@@ -453,11 +474,17 @@ function reloadWorldMap(option){
                 return true;
             }
 
-            var parentOffset = $map_body.offset(); 
+            var rect = this.getBoundingClientRect();
-            var relX = e.pageX - parentOffset.left;
+            var left = (e.clientX - rect.left - this.clientLeft + this.scrollLeft);
-            var relY = e.pageY - parentOffset.top;
+            var top = (e.clientY - rect.top - this.clientTop + this.scrollTop);
 
-            $tooltip.css({'top': relY + 10, 'left': relX + 10});
+            var scale = $map_body.data('scale');
+            if (scale) {
+                left /= scale;
+                top /= scale;
+            }
+
+            $tooltip.css({ 'top': top + 10, 'left': left + 10 });
         });
 
         $objs.on('mouseenter', function(e) {
@@ -472,8 +499,7 @@ function reloadWorldMap(option){
             var nation_text = $this.data('nation');
             if (nation_text) {
                 $tooltip_nation.html(nation_text).show();
-            }
+            } else {
-            else{
                 $tooltip_nation.html('').hide();
             }
 
@@ -536,8 +562,7 @@ function reloadWorldMap(option){
         if (state) {
             $world_map.addClass('hide_cityname');
             localStorage.setItem('sam.hideMapCityName', 'yes');
-        }
+        } else {
-        else{
             $world_map.removeClass('hide_cityname');
             localStorage.setItem('sam.hideMapCityName', 'no');
         }
@@ -547,12 +572,11 @@ function reloadWorldMap(option){
     if (localStorage.getItem('sam.toggleSingleTap') == 'yes') {
         window.sam_toggleSingleTap = true;
         $toggleSingleTapBtn.addClass('active').attr('aria-pressed', 'true');
-    }
+    } else {
-    else{
         window.sam_toggleSingleTap = false;
     }
 
-    var $map_body = $('.world_map .map_body');
+    var $map_body = $(drawTarget + ' .map_body');
 
     $toggleSingleTapBtn.click(function() {
         //이전 상태 확인
@@ -561,8 +585,7 @@ function reloadWorldMap(option){
             $map_body.removeData('touchMode');
             localStorage.setItem('sam.toggleSingleTap', 'yes');
             window.sam_toggleSingleTap = true;
-        }
+        } else {
-        else{
             localStorage.setItem('sam.toggleSingleTap', 'no');
             window.sam_toggleSingleTap = false;
         }
@@ -570,16 +593,16 @@ function reloadWorldMap(option){
 
     if (isDetailMap) {
         $world_map.addClass('map_detail');
-    }
+    } else {
-    else{
         $world_map.removeClass('map_datail');
     }
 
     //deferred mode of jQuery. != promise-then.
     var deferred = $.ajax({
         url: option.targetJson,
-        type: 'post',
+        type: option.reqType,
         dataType: 'json',
+        ifModified: true,
         data: {
             data: JSON.stringify({
                 neutralView: option.neutralView,
@@ -591,14 +614,26 @@ function reloadWorldMap(option){
         }
     });
 
+    var rawObject = null;
+
     deferred
+        .then(function(data) {
+            rawObject = data;
+            return data;
+        })
         .then(checkReturnObject)
         .then(setMapBackground)
         .then(convertCityObjs)
         .then(isDetailMap ? drawDetailWorldMap : drawBasicWorldMap)
         .then(setMouseWork)
         .then(setCityClickable)
-        .then(saveCityInfo);    
+        .then(saveCityInfo)
+        .then(function(data) {
+            if (option.callback) {
+                option.callback(data, rawObject);
+            }
+
+        });
 
     if ($world_map.hasClass('draw_required')) {
         if (useCachedMap) {
@@ -619,21 +654,18 @@ function reloadWorldMap(option){
                 storedMap = convertCityObjs(storedMap);
                 if (isDetailMap) {
                     storedMap = drawDetailWorldMap(storedMap);
-                }
+                } else {
-                else{
                     storedMap = drawBasicWorldMap(storedMap);
                 }
                 storedMap = setMouseWork(storedMap);
                 storedMap = setCityClickable(storedMap);
                 storedMap = saveCityInfo(storedMap);
             } while (false);
-        }
+        } else if (option.year && option.month) {
-        else if(option.year && option.month){
             var startYear = localStorage.getItem(storedStartYear);
             if (startYear) {
                 startYear = JSON.parse(startYear);
-            }
+            } else {
-            else{
                 startYear = option.year;
             }
             var tmp = {

index.php

@@ -19,6 +19,28 @@ if ($session->isLoggedIn()) {
     die();
 }
 
+$runningServer = null;
+
+foreach(ServConfig::getServerList() as $setting){
+    if(!$setting->isExists()){
+        continue;
+    }
+    if(!$setting->isRunning()){
+        continue;
+    }
+    $runningServer = [
+        'color'=>$setting->getColor(),
+        'korName'=>$setting->getKorName(),
+        'name'=>$setting->getShortName(),
+        'exists'=>$setting->isExists(),
+        'enable'=>$setting->isRunning()
+    ];
+}
+
+if($runningServer){
+    $subTemplates = new \League\Plates\Engine(__DIR__.'/'.$runningServer['name'].'/templates');
+}
+
 ?>
 <!DOCTYPE html>
 <html lang="ko">
@@ -28,14 +50,27 @@ if ($session->isLoggedIn()) {
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>삼국지 모의전투 HiDCHe</title>
+    <script>
+        var runningServer = <?=Json::encode($runningServer)?>;
+    </script>
     <?= WebUtil::printJS('e_lib/jquery-3.3.1.min.js') ?>
     <?= WebUtil::printJS('e_lib/bootstrap.bundle.min.js') ?>
     <?= WebUtil::printJS('e_lib/jquery.validate.min.js') ?>
     <?= WebUtil::printJS('e_lib/sha512.min.js') ?>
     <?= WebUtil::printJS('js/common.js') ?>
     <?= WebUtil::printJS('js/login.js') ?>
+    <?= WebUtil::printJS('d_shared/common_path.js') ?>
+    <?= WebUtil::printCSS('d_shared/common.css') ?>
     <?= WebUtil::printCSS('e_lib/bootstrap.min.css') ?>
     <?= WebUtil::printCSS('css/login.css') ?>
+<?php if($runningServer): ?>
+    <script>
+        var serverNick = '<?=$runningServer['korName']?>';
+    </script>
+    <?= WebUtil::printJS($runningServer['name'].'/d_shared/base_map.js') ?>
+    <?= WebUtil::printJS($runningServer['name'].'/js/map.js') ?>
+    <?= WebUtil::printCSS($runningServer['name'].'/css/map.css') ?>
+<?php endif; ?>
     <meta name="description" content="실시간으로 진행되는 삼국지 웹게임(삼모전)입니다">
     <meta name="keywords" content="삼국지,삼모전,웹게임,힏체,힏체섭,히데체,히데체섭,HiDCHe,체섭">
     <meta property="og:type" content="website">
@@ -139,9 +174,7 @@ if ($session->isLoggedIn()) {
             </ul>
         </div>
     </nav>
-    <div class="full-content">
+        <div class="container" style="margin-top:120px;">
-        <div class="vertical-center">
-            <div class="container">
             <h1 class="row justify-content-md-center">삼국지 모의전투 HiDCHe</h1>
             <div class="row justify-content-md-center">
                 <div class="col" style="max-width:450px;">
@@ -187,13 +220,29 @@ if ($session->isLoggedIn()) {
                     </div>
                 </div>
             </div>
+<?php if($runningServer): ?>
+            <div class="row justify-content-md-center" id="running_map">
+                <div class="col" style="max-width:700px;">
+                    <div class="card" style="width:700px;">
+                        <h3 class="card-header">
+                            <?=$runningServer['korName']?> 현황
+                        </h3>
+                        <div class='map-container' style='position:relative;'>
+                            <?=$subTemplates->render('map', [
+                                'mapTheme' => ''
+                            ])?>
                         </div>
+                        <div class="card-body">
+                        </div>
+                    </div>
+                </div>
+            </div>
+<?php endif; ?>
         </div>
         <div id="bottom_box">
             <div class="container"><a href="terms.2.html">개인정보처리방침</a> &amp; <a href="terms.1.html">이용약관</a><br>© 2020 • HideD
                 <br>크롬과 파이어폭스에 최적화되어있습니다.</div>
         </div>
-    </div>
 
     <div class="modal fade" id="modalOTP" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
         <div class="modal-dialog" role="document">

js/login.js

@@ -89,5 +89,29 @@ $(document).ready( function () {
             }
         });
         return false;
-    })
+    });
+
+
+    if (document.body.clientWidth < 700) {
+        var targetWidth = document.body.clientWidth * 0.9;
+        var scale = targetWidth / 700;
+        var $map = $('#running_map');
+        $map.find('.col').css('max-width', targetWidth);
+        $map.find('.card').css('width', targetWidth);
+        $map.find('.map-container').css({
+            'transform-origin': 'top left',
+            'transform': 'scale({0}, {0})'.format(scale),
+            'height': 500 * scale,
+        });
+        $map.find('.map_body').data('scale', scale);
+    }
+
+    reloadWorldMap({
+        targetJson: "{0}/j_map_recent.php".format(runningServer.name),
+        reqType: 'get',
+        dynamicMapTheme: true,
+        callback: function(data, rawObject) {
+            $('#running_map .card-body').html(rawObject.history);
+        }
+    });
 });