devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

새 지도에서 배경, 도시가 정상적으로 보이도록 수정

Browse Source
This commit is contained in:
Hide_D
2018-01-31 02:32:37 +09:00
parent 7542248641
commit ce0fab873b
5 changed files with 150 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tmp_map/base_map.js
+19 -3
View File
@@ -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){ function convColorValue(color){
if(color.startsWith('#')){ if(color.charAt(0) == '#'){
color = color.substr(1); color = color.substr(1);
} }
color = color.toUpperCase(); color = color.toUpperCase();
var colorBase = new Set([ var colorBase = convertSet([
'000080', '0000FF', '008000', '008080', '00BFFF', '00FF00', '00FFFF', '20B2AA', '000080', '0000FF', '008000', '008080', '00BFFF', '00FF00', '00FFFF', '20B2AA',
'2E8B57', '483D8B', '6495ED', '7B68EE', '7CFC00', '7FFFD4', '800000', '800080', '2E8B57', '483D8B', '6495ED', '7B68EE', '7CFC00', '7FFFD4', '800000', '800080',
'808000', '87CEEB', 'A0522D', 'A9A9A9', 'AFEEEE', 'BA55D3', 'E0FFFF', 'F5F5DC', '808000', '87CEEB', 'A0522D', 'A9A9A9', 'AFEEEE', 'BA55D3', 'E0FFFF', 'F5F5DC',
@@ -12,7 +28,7 @@ function convColorValue(color){
'FFFFFF' 'FFFFFF'
]); ]);
if(!colorBase.has(color)){ if(!colorBase.hasOwnProperty(color)){
return '000000'; return '000000';
} }
tmp_map/map.css
+99 -27
View File
@@ -74,6 +74,7 @@
.world_map .city_tooltip{ .world_map .city_tooltip{
position: absolute; position: absolute;
z-index:6;
display:none; display:none;
width:120px; width:120px;
border: 0.02em gray solid; border: 0.02em gray solid;
@@ -108,24 +109,36 @@
position:absolute; position:absolute;
width:40px; width:40px;
height:30px; height:30px;
margin-left:-20px;
margin-top:-10px;
} }
.city_base .city_bg{ .city_base .city_bg{
z-index:1;
position:absolute; position:absolute;
left:10px;
top:20px;
background-position: center; 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{ .map_detail .city_base.city_level_1 .city_bg{
/*수*/ /*수*/
width:48px; width:48px;
height:45px; height:45px;
background-size:48px 45px; background-size:48px 45px;
margin-top:-24px; left:-4px;
margin-left:-22.5px; top:-7.5px;
} }
.map_detail .city_base.city_level_2 .city_bg{ .map_detail .city_base.city_level_2 .city_bg{
@@ -133,8 +146,8 @@
width:60px; width:60px;
height:42px; height:42px;
background-size:60px 42px; background-size:60px 42px;
margin-top:-30px; left:-10px;
margin-left:-21px; top:-6px;
} }
.map_detail .city_base.city_level_3 .city_bg{ .map_detail .city_base.city_level_3 .city_bg{
@@ -142,8 +155,8 @@
width:42px; width:42px;
height:42px; height:42px;
background-size:42px 42px; background-size:42px 42px;
margin-top:-21px; left:-1px;
margin-left:-21px; top:-6px;
} }
.map_detail .city_base.city_level_4 .city_bg{ .map_detail .city_base.city_level_4 .city_bg{
@@ -151,8 +164,8 @@
width:60px; width:60px;
height:45px; height:45px;
background-size:60px 45px; background-size:60px 45px;
margin-top:-30px; left:-10px;
margin-left:-22.5px; top:-7.5px;
} }
.map_detail .city_base.city_level_5 .city_bg{ .map_detail .city_base.city_level_5 .city_bg{
@@ -160,8 +173,8 @@
width:72px; width:72px;
height:48px; height:48px;
background-size:72px 48px; background-size:72px 48px;
margin-top:-36px; left:-16px;
margin-left:-24px; top:-9px;
} }
.map_detail .city_base.city_level_6 .city_bg{ .map_detail .city_base.city_level_6 .city_bg{
@@ -169,8 +182,8 @@
width:78px; width:78px;
height:54px; height:54px;
background-size:78px 54px; background-size:78px 54px;
margin-top:-39px; left:-19px;
margin-left:-27px; top:-12px;
} }
.map_detail .city_base.city_level_7 .city_bg{ .map_detail .city_base.city_level_7 .city_bg{
@@ -178,8 +191,8 @@
width:84px; width:84px;
height:60px; height:60px;
background-size:84px 60px; background-size:84px 60px;
margin-top:-42px; left:-22px;
margin-left:-30px; top:-15px;
} }
.map_detail .city_base.city_level_8 .city_bg{ .map_detail .city_base.city_level_8 .city_bg{
@@ -187,17 +200,76 @@
width:96px; width:96px;
height:72px; height:72px;
background-size:96px 72px; background-size:96px 72px;
margin-top:-48px; left:-28px;
margin-left:-36px; top:-21px;
} }
.city_img{ .city_img{
display: table-cell;
position:absolute; position:absolute;
/*line-height:30px;*/ }
vertical-align: middle;
width:40px; /*
height:30px; .city_base.city_level_{0} .city_img{
text-align:center; //$img = loadImg('/images/cast_{0}.gif');
align-items: center; //$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;
} }
tmp_map/map.html
+1
View File
@@ -3,6 +3,7 @@
<head> <head>
<title>JSON 지도</title> <title>JSON 지도</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="../e_lib/jquery-3.2.1.min.js"></script> <script src="../e_lib/jquery-3.2.1.min.js"></script>
<script src="base_map.js"></script> <script src="base_map.js"></script>
<script src="map.js"></script> <script src="map.js"></script>
tmp_map/map.js
+12 -16
View File
@@ -6,9 +6,6 @@ String.prototype.format = function() {
}); });
}; };
function reloadWorldMap(isDetailMap, clickableAll, selectCallback){ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
var cityPosition = getCityPosition(); var cityPosition = getCityPosition();
@@ -86,20 +83,14 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
return result; 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 cityList = obj.cityList.map(toCityObj);
var nationList = obj.nationList.map(toNationObj); var nationList = obj.nationList.map(toNationObj);
nationList = convertDictById(nationList); //array of object -> dict nationList = convertDictById(nationList); //array of object -> dict
var spyList = convertSpyList(obj.spyList);//Array -> 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 myCity = obj.myCity;
var myNation = obj.myNation; var myNation = obj.myNation;
@@ -179,7 +170,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
if(nationId == myNation){ if(nationId == myNation){
clickable |= 4; clickable |= 4;
} }
if(shownByGeneralList.has(id)){ if(shownByGeneralList.hasOwnProperty(id)){
clickable |= 2; clickable |= 2;
} }
if(clickableAll){ if(clickableAll){
@@ -228,18 +219,23 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
var $cityObj = $('<div class="city_base city_base_{0}"></div>'.format(id)); var $cityObj = $('<div class="city_base city_base_{0}"></div>'.format(id));
$cityObj.addClass('city_level_{0}'.format(city.level)); $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 = $('<a class="city_link" href="#"></a>'); var $linkObj = $('<a class="city_link" href="#"></a>');
var $bgObj = $('<div class="city_bg"></div>'); $linkObj.data({'text':city.text,'nation':city.nation});
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>'.format(city.level));
$cityObj.data('obj', city); $cityObj.data('obj', city);
//$cityObj.append($bgObj); //$cityObj.append($bgObj);
//$cityObj.append($linkObj); //$cityObj.append($linkObj);
if('color' in city && city.color !== null){ if('color' in city && city.color !== null){
var $bgObj = $('<div class="city_bg"></div>');
$cityObj.append($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 = $('<img class="city_state" src="/images/state_{0}.gif">'.format(city.state));
} }
$cityObj.append($linkObj); $cityObj.append($linkObj);
@@ -272,7 +268,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
var $tooltip_city = $tooltip.find('.city_name'); var $tooltip_city = $tooltip.find('.city_name');
var $tooltip_nation = $tooltip.find('.nation_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'); var $map_body = $('.world_map .map_body');
tmp_map/result.json
+19 -19
View File
@@ -5,14 +5,14 @@
"month":10, "month":10,
"cityList":[ "cityList":[
[1, 8, 0, 1, 1, 1], [1, 8, 0, 1, 1, 1],
[2, 8, 0, 0, 2, 1], [2, 8, 0, 2, 2, 1],
[3, 8, 0, 0, 2, 1], [3, 8, 0, 3, 2, 1],
[4, 8, 0, 0, 3, 1], [4, 8, 0, 0, 3, 1],
[5, 8, 0, 0, 4, 1], [5, 8, 0, 0, 4, 1],
[6, 8, 0, 0, 6, 1], [6, 8, 0, 0, 6, 1],
[7, 8, 0, 0, 7, 1], [7, 8, 0, 0, 7, 1],
[8, 7, 0, 0, 1, 1], [8, 7, 0, 2, 1, 1],
[9, 7, 0, 0, 1, 1], [9, 7, 0, 3, 1, 1],
[10, 7, 0, 0, 2, 1], [10, 7, 0, 0, 2, 1],
[11, 7, 0, 0, 2, 1], [11, 7, 0, 0, 2, 1],
[12, 7, 0, 0, 2, 1], [12, 7, 0, 0, 2, 1],
@@ -22,9 +22,9 @@
[16, 7, 0, 1, 8, 1], [16, 7, 0, 1, 8, 1],
[17, 6, 0, 0, 1, 1], [17, 6, 0, 0, 1, 1],
[18, 6, 0, 0, 2, 1], [18, 6, 0, 0, 2, 1],
[19, 6, 0, 0, 2, 1], [19, 6, 0, 1, 2, 1],
[20, 6, 0, 0, 2, 1], [20, 6, 0, 2, 2, 1],
[21, 6, 0, 0, 2, 1], [21, 6, 0, 3, 2, 1],
[22, 6, 0, 0, 3, 1], [22, 6, 0, 0, 3, 1],
[23, 6, 0, 0, 3, 1], [23, 6, 0, 0, 3, 1],
[24, 6, 0, 0, 4, 1], [24, 6, 0, 0, 4, 1],
@@ -40,9 +40,9 @@
[34, 6, 0, 0, 8, 1], [34, 6, 0, 0, 8, 1],
[35, 5, 0, 0, 1, 1], [35, 5, 0, 0, 1, 1],
[36, 5, 0, 0, 1, 1], [36, 5, 0, 0, 1, 1],
[37, 5, 0, 0, 1, 1], [37, 5, 0, 1, 1, 1],
[38, 5, 0, 0, 2, 1], [38, 5, 0, 2, 2, 1],
[39, 5, 0, 0, 2, 1], [39, 5, 0, 3, 2, 1],
[40, 5, 0, 0, 3, 1], [40, 5, 0, 0, 3, 1],
[41, 5, 0, 0, 3, 1], [41, 5, 0, 0, 3, 1],
[42, 5, 0, 0, 3, 1], [42, 5, 0, 0, 3, 1],
@@ -68,15 +68,15 @@
[62, 5, 0, 0, 8, 1], [62, 5, 0, 0, 8, 1],
[63, 4, 0, 0, 3, 1], [63, 4, 0, 0, 3, 1],
[64, 4, 0, 0, 3, 1], [64, 4, 0, 0, 3, 1],
[65, 4, 0, 0, 3, 1], [65, 4, 0, 1, 3, 1],
[66, 4, 0, 0, 5, 1], [66, 4, 0, 2, 5, 1],
[67, 4, 0, 0, 7, 1], [67, 4, 0, 3, 7, 1],
[68, 4, 0, 0, 8, 1], [68, 4, 0, 0, 8, 1],
[69, 4, 0, 0, 8, 1], [69, 4, 0, 0, 8, 1],
[70, 3, 0, 0, 1, 1], [70, 3, 0, 0, 1, 1],
[71, 3, 0, 0, 2, 1], [71, 3, 0, 1, 2, 1],
[72, 3, 0, 0, 3, 1], [72, 3, 0, 2, 3, 1],
[73, 3, 0, 0, 3, 1], [73, 3, 0, 3, 3, 1],
[74, 3, 0, 0, 2, 1], [74, 3, 0, 0, 2, 1],
[75, 3, 0, 0, 4, 1], [75, 3, 0, 0, 4, 1],
[76, 3, 0, 0, 4, 1], [76, 3, 0, 0, 4, 1],
@@ -95,9 +95,9 @@
[89, 2, 0, 3, 6, 1], [89, 2, 0, 3, 6, 1],
[90, 2, 0, 0, 8, 1], [90, 2, 0, 0, 8, 1],
[91, 1, 0, 0, 7, 1], [91, 1, 0, 0, 7, 1],
[92, 1, 0, 0, 7, 1], [92, 1, 0, 1, 7, 1],
[93, 1, 0, 0, 8, 1], [93, 1, 0, 2, 8, 1],
[94, 1, 0, 0, 8, 1] [94, 1, 0, 3, 8, 1]
], ],
"nationList":[ "nationList":[
[1,"위","#0000ff",13], [1,"위","#0000ff",13],