새 지도에서 배경, 도시가 정상적으로 보이도록 수정
This commit is contained in:
+19
-3
@@ -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';
|
||||
}
|
||||
|
||||
|
||||
+99
-27
@@ -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;
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<title>JSON 지도</title>
|
||||
<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="base_map.js"></script>
|
||||
<script src="map.js"></script>
|
||||
|
||||
+12
-16
@@ -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 = $('<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});
|
||||
$cityObj.css({'left':city.x-20,'top':city.y-15});
|
||||
|
||||
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));
|
||||
$cityObj.data('obj', city);
|
||||
//$cityObj.append($bgObj);
|
||||
//$cityObj.append($linkObj);
|
||||
|
||||
if('color' in city && city.color !== null){
|
||||
var $bgObj = $('<div class="city_bg"></div>');
|
||||
$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);
|
||||
@@ -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');
|
||||
|
||||
|
||||
+19
-19
@@ -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],
|
||||
|
||||
Reference in New Issue
Block a user