새 지도 이미지 준비. 아직 충돌 많음.
This commit is contained in:
@@ -1,3 +1,25 @@
|
||||
function convColorValue(color){
|
||||
if(color.startsWith('#')){
|
||||
color = color.substr(1);
|
||||
}
|
||||
color = color.toUpperCase();
|
||||
|
||||
var colorBase = new Set([
|
||||
'000080', '0000FF', '008000', '008080', '00BFFF', '00FF00', '00FFFF', '20B2AA',
|
||||
'2E8B57', '483D8B', '6495ED', '7B68EE', '7CFC00', '7FFFD4', '800000', '800080',
|
||||
'808000', '87CEEB', 'A0522D', 'A9A9A9', 'AFEEEE', 'BA55D3', 'E0FFFF', 'F5F5DC',
|
||||
'FF0000', 'FF00FF', 'FF6347', 'FFA500', 'FFC0CB', 'FFD700', 'FFDAB9', 'FFFF00',
|
||||
'FFFFFF'
|
||||
]);
|
||||
|
||||
if(!colorBase.has(color)){
|
||||
return '000000';
|
||||
}
|
||||
|
||||
return color;
|
||||
|
||||
}
|
||||
|
||||
function getCityPosition(){
|
||||
return {
|
||||
1: ["업", 345, 130],
|
||||
|
||||
@@ -103,3 +103,101 @@
|
||||
border:solid 0.02em red;/* Always 1px :) */
|
||||
outline:dotted 3px red;
|
||||
}
|
||||
|
||||
.city_base{
|
||||
position:absolute;
|
||||
width:40px;
|
||||
height:30px;
|
||||
margin-left:-20px;
|
||||
margin-top:-10px;
|
||||
}
|
||||
|
||||
.city_base .city_bg{
|
||||
position:absolute;
|
||||
left:10px;
|
||||
top:20px;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.map_detail .city_base.city_level_1 .city_bg{
|
||||
/*수*/
|
||||
width:48px;
|
||||
height:45px;
|
||||
background-size:48px 45px;
|
||||
margin-top:-24px;
|
||||
margin-left:-22.5px;
|
||||
}
|
||||
|
||||
.map_detail .city_base.city_level_2 .city_bg{
|
||||
/*진*/
|
||||
width:60px;
|
||||
height:42px;
|
||||
background-size:60px 42px;
|
||||
margin-top:-30px;
|
||||
margin-left:-21px;
|
||||
}
|
||||
|
||||
.map_detail .city_base.city_level_3 .city_bg{
|
||||
/*관*/
|
||||
width:42px;
|
||||
height:42px;
|
||||
background-size:42px 42px;
|
||||
margin-top:-21px;
|
||||
margin-left:-21px;
|
||||
}
|
||||
|
||||
.map_detail .city_base.city_level_4 .city_bg{
|
||||
/*이*/
|
||||
width:60px;
|
||||
height:45px;
|
||||
background-size:60px 45px;
|
||||
margin-top:-30px;
|
||||
margin-left:-22.5px;
|
||||
}
|
||||
|
||||
.map_detail .city_base.city_level_5 .city_bg{
|
||||
/*소*/
|
||||
width:72px;
|
||||
height:48px;
|
||||
background-size:72px 48px;
|
||||
margin-top:-36px;
|
||||
margin-left:-24px;
|
||||
}
|
||||
|
||||
.map_detail .city_base.city_level_6 .city_bg{
|
||||
/*중*/
|
||||
width:78px;
|
||||
height:54px;
|
||||
background-size:78px 54px;
|
||||
margin-top:-39px;
|
||||
margin-left:-27px;
|
||||
}
|
||||
|
||||
.map_detail .city_base.city_level_7 .city_bg{
|
||||
/*대*/
|
||||
width:84px;
|
||||
height:60px;
|
||||
background-size:84px 60px;
|
||||
margin-top:-42px;
|
||||
margin-left:-30px;
|
||||
}
|
||||
|
||||
.map_detail .city_base.city_level_8 .city_bg{
|
||||
/*특*/
|
||||
width:96px;
|
||||
height:72px;
|
||||
background-size:96px 72px;
|
||||
margin-top:-48px;
|
||||
margin-left:-36px;
|
||||
}
|
||||
|
||||
.city_img{
|
||||
display: table-cell;
|
||||
position:absolute;
|
||||
/*line-height:30px;*/
|
||||
vertical-align: middle;
|
||||
width:40px;
|
||||
height:30px;
|
||||
text-align:center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -18,7 +18,6 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="map_body">
|
||||
<a><div class="city_obj my_city" data-text="업" data-nation="우리나라" data-id="9" style="width:200px;height:200px;background:white;"></div></a>
|
||||
<div class="city_tooltip">
|
||||
<div class="city_name">
|
||||
|
||||
|
||||
+50
-18
@@ -129,7 +129,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
|
||||
case 8: level_str = "특】"; break;
|
||||
}
|
||||
|
||||
city.text = region_str + city.name + level_str;
|
||||
city.text = region_str + level_str + city.name;
|
||||
city.region_str = region_str;
|
||||
city.level_str = level_str;
|
||||
|
||||
@@ -179,7 +179,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
|
||||
if(nationId == myNation){
|
||||
clickable |= 4;
|
||||
}
|
||||
if(id in shownByGeneralList){
|
||||
if(shownByGeneralList.has(id)){
|
||||
clickable |= 2;
|
||||
}
|
||||
if(clickableAll){
|
||||
@@ -192,10 +192,10 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
|
||||
}
|
||||
|
||||
cityList = cityList
|
||||
.map(formatCityInfo)
|
||||
.map(mergePositionInfo)
|
||||
.map(mergeNationInfo)
|
||||
.map(mergeClickable);
|
||||
.map(mergeClickable)
|
||||
.map(formatCityInfo);
|
||||
|
||||
return {
|
||||
'cityList' : cityList,
|
||||
@@ -205,31 +205,63 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
|
||||
|
||||
function drawDetailWorldMap(obj){
|
||||
|
||||
var flagTemplate = '<div class="map_flag"></div>';
|
||||
var backgroundTemplate = '<div class="map_background"></div>';
|
||||
var $map_body = $('.world_map .map_body');
|
||||
|
||||
var cityList = obj.cityList;
|
||||
var myCity = obj.myCity;
|
||||
|
||||
//TODO: 도시를 그린다.........
|
||||
//
|
||||
//도시 선택 크기는 동일하게 가고 도시 이미지는 div로 설정.
|
||||
cityList.forEach(function(city){
|
||||
console.log(city);
|
||||
var id = city.id;
|
||||
$('.city_base_{0}'.format(id)).detach();
|
||||
var flagTemplate = '<div class="map_flag"><div class="map_flag_capital"></div></div>';
|
||||
var stateTemplate = '<div class="map_state"></div>';
|
||||
var backgroundTemplate = '<div class="map_background"></div>';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//TODO: 도시를 그린다.........
|
||||
//
|
||||
//도시 선택 크기는 동일하게 가고 도시 이미지는 div로 설정.
|
||||
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});
|
||||
|
||||
var $linkObj = $('<a class="city_link" href="#"></a>');
|
||||
var $bgObj = $('<div class="city_bg"></div>');
|
||||
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){
|
||||
$cityObj.append($bgObj);
|
||||
$bgObj.css({'background-image':"url('/images/b{0}.png')".format(convColorValue(city.color))});
|
||||
}
|
||||
|
||||
$cityObj.append($linkObj);
|
||||
|
||||
$linkObj.append($imgObj);
|
||||
$map_body.append($cityObj);
|
||||
|
||||
if(selectCallback){
|
||||
$linkObj.click(function(){
|
||||
selectCallback($cityObj);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
function drawBasicWorldMap(obj){
|
||||
|
||||
var flagTemplate = '<div class="map_flag"></div>';
|
||||
var backgroundTemplate = '<div class="map_background"></div>';
|
||||
|
||||
var cityList = obj.cityList;
|
||||
var myCity = obj.myCity;
|
||||
|
||||
//TODO: 도시를 그린다.........
|
||||
//
|
||||
//도시 선택 크기는 동일하게 가고 도시 이미지는 div로 설정.
|
||||
|
||||
|
||||
return obj;
|
||||
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
"year":217,
|
||||
"month":10,
|
||||
"cityList":[
|
||||
[1, 8, 0, 0, 1, 1],
|
||||
[1, 8, 0, 1, 1, 1],
|
||||
[2, 8, 0, 0, 2, 1],
|
||||
[3, 8, 0, 0, 2, 1],
|
||||
[4, 8, 0, 0, 3, 1],
|
||||
|
||||
Reference in New Issue
Block a user