새 지도 이미지 준비. 아직 충돌 많음.

This commit is contained in:
2018-01-30 17:57:22 +09:00
parent f2f32347f1
commit 7542248641
5 changed files with 171 additions and 20 deletions
+22
View File
@@ -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],
+98
View File
@@ -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;
}
-1
View File
@@ -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
View File
@@ -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
View File
@@ -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],