From ce0fab873b401fe6dbb8d7c442507a5cbb900119 Mon Sep 17 00:00:00 2001 From: hide_d Date: Wed, 31 Jan 2018 02:32:37 +0900 Subject: [PATCH] =?UTF-8?q?=EC=83=88=20=EC=A7=80=EB=8F=84=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EB=B0=B0=EA=B2=BD,=20=EB=8F=84=EC=8B=9C=EA=B0=80?= =?UTF-8?q?=20=EC=A0=95=EC=83=81=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EB=B3=B4?= =?UTF-8?q?=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tmp_map/base_map.js | 22 ++++++-- tmp_map/map.css | 126 ++++++++++++++++++++++++++++++++++---------- tmp_map/map.html | 1 + tmp_map/map.js | 28 +++++----- tmp_map/result.json | 38 ++++++------- 5 files changed, 150 insertions(+), 65 deletions(-) diff --git a/tmp_map/base_map.js b/tmp_map/base_map.js index 6ce82a0a..3acfb72b 100644 --- a/tmp_map/base_map.js +++ b/tmp_map/base_map.js @@ -1,10 +1,26 @@ +function convertDictById(arr){ + var result = {}; + arr.forEach(function(v, i){ + result[v.id] = v; + }); + return result; +} + +function convertSet(arr){ + var result = {}; + arr.forEach(function(v){ + result[v] = v; + }); + return result; +} + function convColorValue(color){ - if(color.startsWith('#')){ + if(color.charAt(0) == '#'){ color = color.substr(1); } color = color.toUpperCase(); - var colorBase = new Set([ + 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', @@ -12,7 +28,7 @@ function convColorValue(color){ 'FFFFFF' ]); - if(!colorBase.has(color)){ + if(!colorBase.hasOwnProperty(color)){ return '000000'; } diff --git a/tmp_map/map.css b/tmp_map/map.css index 57946321..6ce9a19b 100644 --- a/tmp_map/map.css +++ b/tmp_map/map.css @@ -74,6 +74,7 @@ .world_map .city_tooltip{ position: absolute; + z-index:6; display:none; width:120px; border: 0.02em gray solid; @@ -108,24 +109,36 @@ position:absolute; width:40px; height:30px; - margin-left:-20px; - margin-top:-10px; } .city_base .city_bg{ + z-index:1; position:absolute; - left:10px; - top:20px; background-position: center; } +.city_base div{ + z-index:2; +} + +/* +.map_detail .city_base.city_level_{0} .city_bg{ + //$img = loadImg('/images/cast_{0}.gif'); + //$parent = cssSelect('.city_base'); + width: $img.width; + height: $img.height; + left: ($parent.width - $img.width)/2; + top: ($parent.height - $img.height)/2; +} +*/ + .map_detail .city_base.city_level_1 .city_bg{ /*수*/ width:48px; height:45px; background-size:48px 45px; - margin-top:-24px; - margin-left:-22.5px; + left:-4px; + top:-7.5px; } .map_detail .city_base.city_level_2 .city_bg{ @@ -133,8 +146,8 @@ width:60px; height:42px; background-size:60px 42px; - margin-top:-30px; - margin-left:-21px; + left:-10px; + top:-6px; } .map_detail .city_base.city_level_3 .city_bg{ @@ -142,8 +155,8 @@ width:42px; height:42px; background-size:42px 42px; - margin-top:-21px; - margin-left:-21px; + left:-1px; + top:-6px; } .map_detail .city_base.city_level_4 .city_bg{ @@ -151,8 +164,8 @@ width:60px; height:45px; background-size:60px 45px; - margin-top:-30px; - margin-left:-22.5px; + left:-10px; + top:-7.5px; } .map_detail .city_base.city_level_5 .city_bg{ @@ -160,8 +173,8 @@ width:72px; height:48px; background-size:72px 48px; - margin-top:-36px; - margin-left:-24px; + left:-16px; + top:-9px; } .map_detail .city_base.city_level_6 .city_bg{ @@ -169,8 +182,8 @@ width:78px; height:54px; background-size:78px 54px; - margin-top:-39px; - margin-left:-27px; + left:-19px; + top:-12px; } .map_detail .city_base.city_level_7 .city_bg{ @@ -178,8 +191,8 @@ width:84px; height:60px; background-size:84px 60px; - margin-top:-42px; - margin-left:-30px; + left:-22px; + top:-15px; } .map_detail .city_base.city_level_8 .city_bg{ @@ -187,17 +200,76 @@ width:96px; height:72px; background-size:96px 72px; - margin-top:-48px; - margin-left:-36px; + left:-28px; + top:-21px; } .city_img{ - display: table-cell; position:absolute; - /*line-height:30px;*/ - vertical-align: middle; - width:40px; - height:30px; - text-align:center; - align-items: center; +} + +/* +.city_base.city_level_{0} .city_img{ + //$img = loadImg('/images/cast_{0}.gif'); + //$parent = cssSelect('.city_base'); + width: $img.width; + height: $img.height; + left: ($parent.width - $img.width)/2; + top: ($parent.height - $img.height)/2; +} +*/ +.city_base.city_level_1 .city_img{ + width:16px; + height:15px; + left:12px; + top:7.5px; +} + +.city_base.city_level_2 .city_img{ + width:20px; + height:14px; + left:10px; + top:8px; +} + +.city_base.city_level_3 .city_img{ + width:14px; + height:14px; + left:13px; + top:8px; +} + +.city_base.city_level_4 .city_img{ + width:20px; + height:15px; + left:10px; + top:7.5px; +} + +.city_base.city_level_5 .city_img{ + width:24px; + height:16px; + left:8px; + top:7px; +} + +.city_base.city_level_6 .city_img{ + width:26px; + height:18px; + left:7px; + top:6px; +} + +.city_base.city_level_7 .city_img{ + width:28px; + height:20px; + left:6px; + top:5px; +} + +.city_base.city_level_8 .city_img{ + width:32px; + height:24px; + left:4px; + top:3px; } \ No newline at end of file diff --git a/tmp_map/map.html b/tmp_map/map.html index a521a94d..973e5e51 100644 --- a/tmp_map/map.html +++ b/tmp_map/map.html @@ -3,6 +3,7 @@ JSON 지도 + diff --git a/tmp_map/map.js b/tmp_map/map.js index 7095226a..f2279850 100644 --- a/tmp_map/map.js +++ b/tmp_map/map.js @@ -6,9 +6,6 @@ String.prototype.format = function() { }); }; - - - function reloadWorldMap(isDetailMap, clickableAll, selectCallback){ var cityPosition = getCityPosition(); @@ -86,20 +83,14 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){ return result; } - function convertDictById(arr){ - var result = []; - arr.forEach(function(v, i){ - result[v.id] = v; - }); - return result; - } + var cityList = obj.cityList.map(toCityObj); var nationList = obj.nationList.map(toNationObj); nationList = convertDictById(nationList); //array of object -> dict var spyList = convertSpyList(obj.spyList);//Array -> Dict - var shownByGeneralList = new Set(obj.shownByGeneralList);//Array -> Set + var shownByGeneralList = convertSet(obj.shownByGeneralList);//Array -> Set var myCity = obj.myCity; var myNation = obj.myNation; @@ -179,7 +170,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){ if(nationId == myNation){ clickable |= 4; } - if(shownByGeneralList.has(id)){ + if(shownByGeneralList.hasOwnProperty(id)){ clickable |= 2; } if(clickableAll){ @@ -228,18 +219,23 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){ var $cityObj = $('
'.format(id)); $cityObj.addClass('city_level_{0}'.format(city.level)); - $cityObj.css({'left':city.x,'top':city.y}); + $cityObj.css({'left':city.x-20,'top':city.y-15}); var $linkObj = $(''); - var $bgObj = $('
'); + $linkObj.data({'text':city.text,'nation':city.nation}); var $imgObj = $('
'.format(city.level)); $cityObj.data('obj', city); //$cityObj.append($bgObj); //$cityObj.append($linkObj); if('color' in city && city.color !== null){ + var $bgObj = $('
'); $cityObj.append($bgObj); - $bgObj.css({'background-image':"url('/images/b{0}.png')".format(convColorValue(city.color))}); + $bgObj.css({'background-image':'url(/images/b{0}.png)'.format(convColorValue(city.color))}); + } + + if(city.state > 0){ + var $imgObj = $(''.format(city.state)); } $cityObj.append($linkObj); @@ -272,7 +268,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){ var $tooltip_city = $tooltip.find('.city_name'); var $tooltip_nation = $tooltip.find('.nation_name'); - var $objs = $('.world_map .city_obj'); + var $objs = $('.world_map .city_link'); var $map_body = $('.world_map .map_body'); diff --git a/tmp_map/result.json b/tmp_map/result.json index 31946aad..a9a35df9 100644 --- a/tmp_map/result.json +++ b/tmp_map/result.json @@ -5,14 +5,14 @@ "month":10, "cityList":[ [1, 8, 0, 1, 1, 1], - [2, 8, 0, 0, 2, 1], - [3, 8, 0, 0, 2, 1], + [2, 8, 0, 2, 2, 1], + [3, 8, 0, 3, 2, 1], [4, 8, 0, 0, 3, 1], [5, 8, 0, 0, 4, 1], [6, 8, 0, 0, 6, 1], [7, 8, 0, 0, 7, 1], - [8, 7, 0, 0, 1, 1], - [9, 7, 0, 0, 1, 1], + [8, 7, 0, 2, 1, 1], + [9, 7, 0, 3, 1, 1], [10, 7, 0, 0, 2, 1], [11, 7, 0, 0, 2, 1], [12, 7, 0, 0, 2, 1], @@ -22,9 +22,9 @@ [16, 7, 0, 1, 8, 1], [17, 6, 0, 0, 1, 1], [18, 6, 0, 0, 2, 1], - [19, 6, 0, 0, 2, 1], - [20, 6, 0, 0, 2, 1], - [21, 6, 0, 0, 2, 1], + [19, 6, 0, 1, 2, 1], + [20, 6, 0, 2, 2, 1], + [21, 6, 0, 3, 2, 1], [22, 6, 0, 0, 3, 1], [23, 6, 0, 0, 3, 1], [24, 6, 0, 0, 4, 1], @@ -40,9 +40,9 @@ [34, 6, 0, 0, 8, 1], [35, 5, 0, 0, 1, 1], [36, 5, 0, 0, 1, 1], - [37, 5, 0, 0, 1, 1], - [38, 5, 0, 0, 2, 1], - [39, 5, 0, 0, 2, 1], + [37, 5, 0, 1, 1, 1], + [38, 5, 0, 2, 2, 1], + [39, 5, 0, 3, 2, 1], [40, 5, 0, 0, 3, 1], [41, 5, 0, 0, 3, 1], [42, 5, 0, 0, 3, 1], @@ -68,15 +68,15 @@ [62, 5, 0, 0, 8, 1], [63, 4, 0, 0, 3, 1], [64, 4, 0, 0, 3, 1], - [65, 4, 0, 0, 3, 1], - [66, 4, 0, 0, 5, 1], - [67, 4, 0, 0, 7, 1], + [65, 4, 0, 1, 3, 1], + [66, 4, 0, 2, 5, 1], + [67, 4, 0, 3, 7, 1], [68, 4, 0, 0, 8, 1], [69, 4, 0, 0, 8, 1], [70, 3, 0, 0, 1, 1], - [71, 3, 0, 0, 2, 1], - [72, 3, 0, 0, 3, 1], - [73, 3, 0, 0, 3, 1], + [71, 3, 0, 1, 2, 1], + [72, 3, 0, 2, 3, 1], + [73, 3, 0, 3, 3, 1], [74, 3, 0, 0, 2, 1], [75, 3, 0, 0, 4, 1], [76, 3, 0, 0, 4, 1], @@ -95,9 +95,9 @@ [89, 2, 0, 3, 6, 1], [90, 2, 0, 0, 8, 1], [91, 1, 0, 0, 7, 1], - [92, 1, 0, 0, 7, 1], - [93, 1, 0, 0, 8, 1], - [94, 1, 0, 0, 8, 1] + [92, 1, 0, 1, 7, 1], + [93, 1, 0, 2, 8, 1], + [94, 1, 0, 3, 8, 1] ], "nationList":[ [1,"위","#0000ff",13],