단순 모드도 추가

tmp_map/map.css

@@ -100,10 +100,22 @@
     height:12px;
 }
 
-.world_map .my_city{
-    outline:dotted 3px red;
+.world_map.map_detail .my_city{
+    border:solid 1px red;
+    outline:dotted 4px red;
 }
 
+
+.world_map.map_detail .city_filler{
+    position:absolute;
+    width:100%;
+    height:100%;
+    left:-1px;
+    top:-1px;
+    background:transparent;
+}
+
+
 .city_base{
     position:absolute;
     width:40px;
@@ -208,7 +220,7 @@
 }
 
 /*
-.city_base.city_level_{0} .city_img{
+.map_detail .city_base.city_level_{0} .city_img{
     //$img = loadImg('/images/cast_{0}.gif');
     //$parent = cssSelect('.city_base');
     width: $img.width;
@@ -217,120 +229,122 @@
     top: ($parent.height - $img.height)/2;
 }
 */
-.city_base.city_level_1 .city_img{
+
+
+.map_detail .city_base.city_level_1 .city_img{
     width:16px;
     height:15px;
     left:12px;
     top:7.5px;
 }
 
-.city_base.city_level_2 .city_img{
+.map_detail .city_base.city_level_2 .city_img{
     width:20px;
     height:14px;
     left:10px;
     top:8px;
 }
 
-.city_base.city_level_3 .city_img{
+.map_detail .city_base.city_level_3 .city_img{
     width:14px;
     height:14px;
     left:13px;
     top:8px;
 }
 
-.city_base.city_level_4 .city_img{
+.map_detail .city_base.city_level_4 .city_img{
     width:20px;
     height:15px;
     left:10px;
     top:7.5px;
 }
 
-.city_base.city_level_5 .city_img{
+.map_detail .city_base.city_level_5 .city_img{
     width:24px;
     height:16px;
     left:8px;
     top:7px;
 }
 
-.city_base.city_level_6 .city_img{
+.map_detail .city_base.city_level_6 .city_img{
     width:26px;
     height:18px;
     left:7px;
     top:6px;
 }
 
-.city_base.city_level_7 .city_img{
+.map_detail .city_base.city_level_7 .city_img{
     width:28px;
     height:20px;
     left:6px;
     top:5px;
 }
 
-.city_base.city_level_8 .city_img{
+.map_detail .city_base.city_level_8 .city_img{
     width:32px;
     height:24px;
     left:4px;
     top:3px;
 }
 
-.city_base .city_state{
+.map_detail .city_base .city_state{
     position: absolute;
     top:5px; /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
     left:0;
 }
 
-.city_base .city_flag{
+.map_detail .city_base .city_flag{
     position: absolute;
     width:12px;
     height:12px;
 }
 
-.city_base .city_flag > img{
+.map_detail .city_base .city_flag > img{
     width:12px;
     height:12px;
 }
 
-.city_base.city_level_1 .city_flag{
+.map_detail .city_base.city_level_1 .city_flag{
     right:-8px;
     top:-4px;
 }
 
-.city_base.city_level_2 .city_flag{
+.map_detail .city_base.city_level_2 .city_flag{
     right:-8px;
     top:-4px;
 }
 
-.city_base.city_level_3 .city_flag{
+.map_detail .city_base.city_level_3 .city_flag{
     right:-8px;
     top:-4px;
 }
 
-.city_base.city_level_4 .city_flag{
+.map_detail .city_base.city_level_4 .city_flag{
     right:-6px;
     top:-3px;
 }
 
-.city_base.city_level_5 .city_flag{
+.map_detail .city_base.city_level_5 .city_flag{
     right:-6px;
     top:-4px;
 }
 
-.city_base.city_level_6 .city_flag{
+.map_detail .city_base.city_level_6 .city_flag{
     right:-6px;
     top:-4px;
 }
 
-.city_base.city_level_7 .city_flag{
+.map_detail .city_base.city_level_7 .city_flag{
     right:-6px;
     top:-4px;
 }
 
-.city_base.city_level_8 .city_flag{
+.map_detail .city_base.city_level_8 .city_flag{
     right:-6px;
     top:-3px;
 }
 
-.city_base .city_flag .city_capital{
+.map_detail .city_base .city_flag .city_capital{
     position: absolute;
     width:10px;
     height:10px;
@@ -338,7 +352,113 @@
     right:-1px;
 }
 
-.city_base .city_flag .city_capital > img{
+.map_detail .city_base .city_flag .city_capital > img{
     width:10px;
     height:10px;
+}
+
+/* Basic */
+
+.world_map.map_basic .city_filler{
+    position:absolute;
+    width:100%;
+    height:100%;
+    left:0;
+    top:0;
+    background:transparent;
+}
+
+.world_map.map_basic .my_city{
+    outline:dotted 4px red;
+}
+
+.map_basic .city_base .city_img{
+    background-color:white;
+}
+
+.map_basic .city_base.city_level_1 .city_img{
+    width:12px;
+    height:12px;
+    left:14px;
+    top:9px;
+}
+
+.map_basic .city_base.city_level_2 .city_img{
+    width:12px;
+    height:12px;
+    left:14px;
+    top:9px;
+}
+
+.map_basic .city_base.city_level_3 .city_img{
+    width:14px;
+    height:14px;
+    left:13px;
+    top:8px;
+}
+
+.map_basic .city_base.city_level_4 .city_img{
+    width:16px;
+    height:14px;
+    left:12px;
+    top:8px;
+}
+
+.map_basic .city_base.city_level_5 .city_img{
+    width:18px;
+    height:16px;
+    left:11px;
+    top:7px;
+}
+
+.map_basic .city_base.city_level_6 .city_img{
+    width:20px;
+    height:16px;
+    left:10px;
+    top:7px;
+}
+
+.map_basic .city_base.city_level_7 .city_img{
+    width:22px;
+    height:18px;
+    left:9px;
+    top:6px;
+}
+
+.map_basic .city_base.city_level_8 .city_img{
+    width:24px;
+    height:18px;
+    left:8px;
+    top:6px;
+}
+
+
+.map_basic .city_base .city_capital{
+    position: absolute;
+    width:5px;
+    height:5px;
+    top:-2px;
+    right:-2px;
+    background-color:yellow;
+}
+
+.map_basic .city_base .city_state{
+    position: absolute;
+    width:10px;
+    height:10px;
+    top:-2px;
+    left:-4px;
+    background-color:white;
+}
+
+.map_basic .city_base .city_state.city_state_war{
+    background-color:red;
+}
+
+.map_basic .city_base .city_state.city_state_bad{
+    background-color:orange;
+}
+
+.map_basic .city_base .city_state.city_state_good{
+    background-color:blue;
 }

tmp_map/map.html

@@ -12,7 +12,7 @@
 <link href="map.css" rel="stylesheet">
 </head>
 <body style="background-color:black;">
-<div class="world_map map_detail">
+<div class="world_map">
     <div class="map_title">
         <span class="map_title_text">
         </span>

tmp_map/map.js

@@ -22,6 +22,12 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
         var year = obj.year;
         var month = obj.month;
 
+        if(isDetailMap){
+            $world_map.addClass('map_detail').removeClass('map_basic');
+        }
+        else{
+            $world_map.addClass('map_basic').removeClass('map_detail');
+        }
         
         var $map_title = $('.map_title_text');
         if(year < startYear + 1){
@@ -224,7 +230,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
             $linkObj.data({'text':city.text,'nation':city.nation,'id':city.id});
             $cityObj.append($linkObj);
 
-            var $imgObj = $('<div class="city_img"><img src="/images/cast_{0}.gif"></div>'.format(city.level));
+            var $imgObj = $('<div class="city_img"><img src="/images/cast_{0}.gif"><div class="city_filler"></div></div>'.format(city.level));
             $linkObj.append($imgObj);
             
             
@@ -243,20 +249,73 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
                 }
                 $imgObj.append($flagObj);
             }
-
-            
+         
 
             $map_body.append($cityObj);
             
             
         });
 
-        $world_map.find('.city_base_{0} .city_img'.format(myCity)).addClass('my_city');
+        $world_map.find('.city_base_{0} .city_filler'.format(myCity)).addClass('my_city');
         
         return obj;
     }
 
     function drawBasicWorldMap(obj){
+
+        var $map_body = $('.world_map .map_body');
+
+        var cityList = obj.cityList;
+        var myCity = obj.myCity;
+
+        cityList.forEach(function(city){
+            var id = city.id;
+            $('.city_base_{0}'.format(id)).detach();
+            //이전 도시는 지운다.
+
+            var $cityObj = $('<div class="city_base city_base_{0}"></div>'.format(id));
+            $cityObj.addClass('city_level_{0}'.format(city.level));
+            $cityObj.data('obj', city).css({'left':city.x-20,'top':city.y-15});
+
+            var $linkObj = $('<a class="city_link"></a>');
+            $linkObj.data({'text':city.text,'nation':city.nation,'id':city.id});
+            $cityObj.append($linkObj);
+
+            var $imgObj = $('<div class="city_img"><div class="city_filler"></div></div>');
+            if('color' in city && city.color !== null){
+                $imgObj.css({'background-color':city.color});
+            }
+            $linkObj.append($imgObj);
+
+            if(city.state > 0){
+                console.log(city.state);
+                var state_text = 'wrong';
+                if(city.state < 10){
+                    state_text = 'good';
+                }
+                else if(city.state < 40){
+                    state_text = 'bad';
+                }
+                else if(city.state < 50){
+                    state_text = 'war';
+                }
+                
+                var $stateObj = $('<div class="city_state city_state_{0}"></div>'.format(state_text));
+                $imgObj.append($stateObj);
+            }
+
+            //단순 표기에서는 깃발 여부가 없음
+            if(city.isCapital){
+                var $capitalObj = $('<div class="city_capital"></div>');
+                $imgObj.append($capitalObj);
+            }
+
+
+            $map_body.append($cityObj);
+        });
+
+        $world_map.find('.city_base_{0} .city_filler'.format(myCity)).addClass('my_city');
+
         return obj;
     }
 
@@ -405,7 +464,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
 
 $(function(){
 
-    var isDetailMap = true;
+    var isDetailMap = false;
     var clickableAll = false;
 
     function tmp(a){

tmp_map/result.json

@@ -16,7 +16,7 @@
         [10, 7, 0, 0, 2, 1],
         [11, 7, 0, 0, 2, 1],
         [12, 7, 0, 0, 2, 1],
-        [13, 7, 0, 1, 6, 1],
+        [13, 7, 43, 1, 6, 1],
         [14, 7, 0, 1, 6, 0],
         [15, 7, 0, 1, 7, 1],
         [16, 7, 0, 1, 8, 1],
@@ -105,7 +105,7 @@
         [3,"오","#ff0000",89]
     ],
     "spyList":[133, 892],
-    "shownByGeneralList":[65,33,73],
-    "myCity":83,
+    "shownByGeneralList":[3, 65,33,73],
+    "myCity":3,
     "myNation":2
 }