새 지도 이미지 준비. 아직 충돌 많음.

tmp_map/base_map.js

@@ -1,3 +1,25 @@
+function convColorValue(color){
+    if(color.startsWith('#')){
+        color = color.substr(1);
+    }
+    color = color.toUpperCase();
+
+    var colorBase = new Set([
+        '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.has(color)){
+        return '000000';
+    }
+
+    return color;
+    
+}
+
 function getCityPosition(){
     return {
         1: ["업", 345, 130],

tmp_map/map.css

@@ -103,3 +103,101 @@
     border:solid 0.02em red;/* Always 1px :) */
     outline:dotted 3px red;
 }
+
+.city_base{
+    position:absolute;
+    width:40px;
+    height:30px;
+    margin-left:-20px;
+    margin-top:-10px;
+}
+
+.city_base .city_bg{
+    position:absolute;
+    left:10px;
+    top:20px;
+    background-position: center;
+}
+
+.map_detail .city_base.city_level_1 .city_bg{
+    /*수*/
+    width:48px;
+    height:45px;
+    background-size:48px 45px;
+    margin-top:-24px;
+    margin-left:-22.5px;
+}
+
+.map_detail .city_base.city_level_2 .city_bg{
+    /*진*/
+    width:60px;
+    height:42px;
+    background-size:60px 42px;
+    margin-top:-30px;
+    margin-left:-21px;
+}
+
+.map_detail .city_base.city_level_3 .city_bg{
+    /*관*/
+    width:42px;
+    height:42px;
+    background-size:42px 42px;
+    margin-top:-21px;
+    margin-left:-21px;
+}
+
+.map_detail .city_base.city_level_4 .city_bg{
+    /*이*/
+    width:60px;
+    height:45px;
+    background-size:60px 45px;
+    margin-top:-30px;
+    margin-left:-22.5px;
+}
+
+.map_detail .city_base.city_level_5 .city_bg{
+    /*소*/
+    width:72px;
+    height:48px;
+    background-size:72px 48px;
+    margin-top:-36px;
+    margin-left:-24px;
+}
+
+.map_detail .city_base.city_level_6 .city_bg{
+    /*중*/
+    width:78px;
+    height:54px;
+    background-size:78px 54px;
+    margin-top:-39px;
+    margin-left:-27px;
+}
+
+.map_detail .city_base.city_level_7 .city_bg{
+    /*대*/
+    width:84px;
+    height:60px;
+    background-size:84px 60px;
+    margin-top:-42px;
+    margin-left:-30px;
+}
+
+.map_detail .city_base.city_level_8 .city_bg{
+    /*특*/
+    width:96px;
+    height:72px;
+    background-size:96px 72px;
+    margin-top:-48px;
+    margin-left:-36px;
+}
+
+.city_img{
+    display: table-cell;
+    position:absolute;
+    /*line-height:30px;*/
+    vertical-align: middle;
+    width:40px;
+    height:30px;
+    text-align:center;
+    align-items: center;
+}

tmp_map/map.html

@@ -18,7 +18,6 @@
         </span>
     </div>
     <div class="map_body">
-        <a><div class="city_obj my_city" data-text="업" data-nation="우리나라" data-id="9" style="width:200px;height:200px;background:white;"></div></a>
         <div class="city_tooltip">
             <div class="city_name">
 

tmp_map/map.js

@@ -129,7 +129,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
                 case 8: level_str = "특】"; break;
             }
 
-            city.text = region_str + city.name + level_str;
+            city.text = region_str + level_str + city.name;
             city.region_str = region_str;
             city.level_str = level_str;
 
@@ -179,7 +179,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
             if(nationId == myNation){
                 clickable |= 4;
             }
-            if(id in shownByGeneralList){
+            if(shownByGeneralList.has(id)){
                 clickable |= 2;
             }
             if(clickableAll){
@@ -192,10 +192,10 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
         }
 
         cityList = cityList
-            .map(formatCityInfo)
             .map(mergePositionInfo)
             .map(mergeNationInfo)
-            .map(mergeClickable);
+            .map(mergeClickable)
+            .map(formatCityInfo);
 
         return {
             'cityList' : cityList,
@@ -205,31 +205,63 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
 
     function drawDetailWorldMap(obj){
         
-        var flagTemplate = '<div class="map_flag"></div>';
+        var $map_body = $('.world_map .map_body');
-        var backgroundTemplate = '<div class="map_background"></div>';
 
         var cityList = obj.cityList;
         var myCity = obj.myCity;
 
-        //TODO: 도시를 그린다.........
+        cityList.forEach(function(city){
-        //
+            console.log(city);
-        //도시 선택 크기는 동일하게 가고 도시 이미지는 div로 설정.
+            var id = city.id;
+            $('.city_base_{0}'.format(id)).detach();
+            var flagTemplate = '<div class="map_flag"><div class="map_flag_capital"></div></div>';
+            var stateTemplate = '<div class="map_state"></div>';
+            var backgroundTemplate = '<div class="map_background"></div>';
 
             
+
+
+            
+            //TODO: 도시를 그린다.........
+            //
+            //도시 선택 크기는 동일하게 가고 도시 이미지는 div로 설정.
+            var $cityObj = $('<div class="city_base city_base_{0}"></div>'.format(id));
+            $cityObj.addClass('city_level_{0}'.format(city.level));
+
+            $cityObj.css({'left':city.x,'top':city.y});
+
+            var $linkObj = $('<a class="city_link" href="#"></a>');
+            var $bgObj = $('<div class="city_bg"></div>');
+            var $imgObj = $('<div class="city_img"><img src="/images/cast_{0}.gif"></div>'.format(city.level));
+            $cityObj.data('obj', city);
+            //$cityObj.append($bgObj);
+            //$cityObj.append($linkObj);
+
+            if('color' in city && city.color !== null){
+                $cityObj.append($bgObj);
+                $bgObj.css({'background-image':"url('/images/b{0}.png')".format(convColorValue(city.color))});
+            }
+
+            $cityObj.append($linkObj);
+
+            $linkObj.append($imgObj);
+            $map_body.append($cityObj);
+
+            if(selectCallback){
+                $linkObj.click(function(){
+                    selectCallback($cityObj);
+                    return false;
+                });
+            }
+            
+            
+        });
+        
         return obj;
     }
 
     function drawBasicWorldMap(obj){
         
-        var flagTemplate = '<div class="map_flag"></div>';
-        var backgroundTemplate = '<div class="map_background"></div>';
-
-        var cityList = obj.cityList;
-        var myCity = obj.myCity;
-
-        //TODO: 도시를 그린다.........
-        //
-        //도시 선택 크기는 동일하게 가고 도시 이미지는 div로 설정.
 
         
         return obj;

tmp_map/result.json

@@ -4,7 +4,7 @@
     "year":217,
     "month":10,
     "cityList":[
-        [1, 8, 0, 0, 1, 1],
+        [1, 8, 0, 1, 1, 1],
         [2, 8, 0, 0, 2, 1],
         [3, 8, 0, 0, 2, 1],
         [4, 8, 0, 0, 3, 1],