diff --git a/tmp_map/map.css b/tmp_map/map.css index dda721a7..10ed27c5 100644 --- a/tmp_map/map.css +++ b/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; } \ No newline at end of file diff --git a/tmp_map/map.html b/tmp_map/map.html index 6d447853..0109d556 100644 --- a/tmp_map/map.html +++ b/tmp_map/map.html @@ -12,7 +12,7 @@ -
+
diff --git a/tmp_map/map.js b/tmp_map/map.js index 6d12ce52..f6170fb3 100644 --- a/tmp_map/map.js +++ b/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 = $('
'.format(city.level)); + var $imgObj = $('
'.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 = $('
'.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 = $(''); + $linkObj.data({'text':city.text,'nation':city.nation,'id':city.id}); + $cityObj.append($linkObj); + + var $imgObj = $('
'); + 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 = $('
'.format(state_text)); + $imgObj.append($stateObj); + } + + //단순 표기에서는 깃발 여부가 없음 + if(city.isCapital){ + var $capitalObj = $('
'); + $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){ diff --git a/tmp_map/result.json b/tmp_map/result.json index 69d18f31..9c4e8d62 100644 --- a/tmp_map/result.json +++ b/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 } \ No newline at end of file