새 지도 코드에서 예제로 사용할 result.json 손봄
새 지도 코드에서 (detail, basic), (click, select)를 같이 사용할 수 있도록 정비
This commit is contained in:
+8
-5
@@ -7,10 +7,13 @@
|
||||
.map_title{
|
||||
width:700px;
|
||||
height:20px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.map_detail .map_title{
|
||||
background:
|
||||
url('/images/ltitle.jpg') no-repeat left,
|
||||
url('/images/rtitle.jpg') no-repeat right;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.map_title_text{
|
||||
@@ -23,25 +26,25 @@
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.map_spring .map_title_text{
|
||||
.map_detail.map_spring .map_title_text{
|
||||
background:
|
||||
url('/images/ad.gif') no-repeat left,
|
||||
url('/images/spring.gif') no-repeat right;
|
||||
}
|
||||
|
||||
.map_summer .map_title_text{
|
||||
.map_detail.map_summer .map_title_text{
|
||||
background:
|
||||
url('/images/ad.gif') no-repeat left,
|
||||
url('/images/summer.gif') no-repeat right;
|
||||
}
|
||||
|
||||
.map_fall .map_title_text{
|
||||
.map_detail.map_fall .map_title_text{
|
||||
background:
|
||||
url('/images/ad.gif') no-repeat left,
|
||||
url('/images/fall.gif') no-repeat right;
|
||||
}
|
||||
|
||||
.map_winter .map_title_text{
|
||||
.map_detail.map_winter .map_title_text{
|
||||
background:
|
||||
url('/images/ad.gif') no-repeat left,
|
||||
url('/images/winter.gif') no-repeat right;
|
||||
|
||||
+2
-2
@@ -11,14 +11,14 @@
|
||||
<link href="map.css" rel="stylesheet">
|
||||
</head>
|
||||
<body style="background-color:black;margin:50px;">
|
||||
<div class="world_map">
|
||||
<div class="world_map map_detail">
|
||||
<div class="map_title">
|
||||
<span class="map_title_text">
|
||||
217年 2月
|
||||
</span>
|
||||
</div>
|
||||
<div class="map_body">
|
||||
<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_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">
|
||||
|
||||
|
||||
+77
-37
@@ -2,29 +2,20 @@
|
||||
String.prototype.format = function() {
|
||||
var args = arguments;
|
||||
return this.replace(/{(\d+)}/g, function(match, number) {
|
||||
return typeof args[number] != 'undefined'
|
||||
? args[number]
|
||||
: match
|
||||
;
|
||||
return (typeof args[number] != 'undefined') ? args[number] : match;
|
||||
});
|
||||
};
|
||||
|
||||
jQuery(function($){
|
||||
|
||||
|
||||
|
||||
function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
|
||||
|
||||
var cityPosition = getCityPosition();
|
||||
|
||||
//OBJ : startYear, year, month, cityList, nationList, spyList, ourCityList, shownByGeneralList, myCity
|
||||
var $world_map = $('.world_map');
|
||||
|
||||
function clearWorldMap(obj){
|
||||
$world_map.find('.city_obj').detach();
|
||||
$world_map
|
||||
.removeClass('map_spring')
|
||||
.removeClass('map_summer')
|
||||
.removeClass('map_fall')
|
||||
.removeClass('map_winter');
|
||||
return obj;
|
||||
}
|
||||
|
||||
function setMapBackground(obj){
|
||||
var startYear = obj.startYear;
|
||||
var year = obj.year;
|
||||
@@ -43,6 +34,7 @@ jQuery(function($){
|
||||
}
|
||||
|
||||
|
||||
$world_map.removeClass('map_string map_summer map_fall map_winter');
|
||||
if(month <= 3){
|
||||
$world_map.addClass('map_spring');
|
||||
}
|
||||
@@ -67,12 +59,11 @@ jQuery(function($){
|
||||
function toCityObj(arr){
|
||||
return {
|
||||
"id":arr[0],
|
||||
"name":arr[1],
|
||||
"level":arr[2],
|
||||
"state":arr[3],
|
||||
"nationId":arr[4],
|
||||
"region":arr[5],
|
||||
"supply":arr[6]
|
||||
"level":arr[1],
|
||||
"state":arr[2],
|
||||
"nationId":(arr[3]>0)?arr[3]:null,
|
||||
"region":arr[4],
|
||||
"supply":arr[5]
|
||||
};
|
||||
}
|
||||
|
||||
@@ -81,7 +72,7 @@ jQuery(function($){
|
||||
"id":arr[0],
|
||||
"name":arr[1],
|
||||
"color":arr[2],
|
||||
"capital":(arr[3]!=0)
|
||||
"capital":(arr[3]!==0)
|
||||
};
|
||||
}
|
||||
|
||||
@@ -137,20 +128,21 @@ jQuery(function($){
|
||||
case 7: level_str = "대】"; break;
|
||||
case 8: level_str = "특】"; break;
|
||||
}
|
||||
|
||||
|
||||
city.text = region_str + city.name + level_str;
|
||||
city.region_str = region_str;
|
||||
city.level_str = level_str;
|
||||
|
||||
|
||||
return city;
|
||||
}
|
||||
|
||||
|
||||
function mergePositionInfo(city){
|
||||
var id = city.id;
|
||||
if(!(id in cityPosition)){
|
||||
return city;
|
||||
}
|
||||
var xy_val = cityPosition[id];
|
||||
city.name = xy_val[0];
|
||||
city.x = xy_val[1];
|
||||
city.y = xy_val[2];
|
||||
return city;
|
||||
@@ -160,7 +152,7 @@ jQuery(function($){
|
||||
//nationId 값으로 isCapital, color, nation을 통합
|
||||
|
||||
var nationId = city.nationId;
|
||||
if(nationId == null || !(nationId in nationList)){
|
||||
if(nationId === null || !(nationId in nationList)){
|
||||
city.nationId = null;
|
||||
city.nation = null;
|
||||
city.color = null;
|
||||
@@ -177,20 +169,24 @@ jQuery(function($){
|
||||
}
|
||||
|
||||
function mergeClickable(city){
|
||||
//clickable = (remainSpy << 2) | (ourCity << 1) | shownByGeneral
|
||||
//clickable = (remainSpy << 3) | (ourCity << 2) | (shownByGeneral << 1) | clickableAll
|
||||
var id = city.id;
|
||||
var nationId = city.nationId;
|
||||
var clickable = 0;
|
||||
if(id in spyList){
|
||||
clickable |= spyList[id] << 2;
|
||||
clickable |= spyList[id] << 3;
|
||||
}
|
||||
if(nationId == myNation){
|
||||
clickable |= 2;
|
||||
clickable |= 4;
|
||||
}
|
||||
if(id in shownByGeneralList){
|
||||
clickable |= 2;
|
||||
}
|
||||
if(clickableAll){
|
||||
clickable |= 1;
|
||||
}
|
||||
|
||||
|
||||
city.clickable = clickable;
|
||||
return city;
|
||||
}
|
||||
@@ -204,10 +200,10 @@ jQuery(function($){
|
||||
return {
|
||||
'cityList' : cityList,
|
||||
'myCity' : myCity
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function drawWorldMap(obj){
|
||||
function drawDetailWorldMap(obj){
|
||||
|
||||
var flagTemplate = '<div class="map_flag"></div>';
|
||||
var backgroundTemplate = '<div class="map_background"></div>';
|
||||
@@ -220,10 +216,26 @@ jQuery(function($){
|
||||
//도시 선택 크기는 동일하게 가고 도시 이미지는 div로 설정.
|
||||
|
||||
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
var setMouseWork = function(){
|
||||
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;
|
||||
}
|
||||
|
||||
function setMouseWork(obj){
|
||||
var $tooltip = $('.world_map .city_tooltip');
|
||||
var $tooltip_city = $tooltip.find('.city_name');
|
||||
var $tooltip_nation = $tooltip.find('.nation_name');
|
||||
@@ -231,7 +243,7 @@ jQuery(function($){
|
||||
var $objs = $('.world_map .city_obj');
|
||||
|
||||
var $map_body = $('.world_map .map_body');
|
||||
|
||||
|
||||
|
||||
$map_body.mousemove(function(e){
|
||||
var parentOffset = $map_body.offset();
|
||||
@@ -249,13 +261,41 @@ jQuery(function($){
|
||||
},function(event){
|
||||
$tooltip.hide();
|
||||
});
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
function setCityClickable(obj){
|
||||
return obj;
|
||||
}
|
||||
|
||||
function saveCityInfo(obj){
|
||||
$world_map.data('cityInfo', obj);
|
||||
return obj;
|
||||
}
|
||||
|
||||
if(isDetailMap){
|
||||
$world_map.addClass('map_detail');
|
||||
}
|
||||
else{
|
||||
$world_map.removeClass('map_datail');
|
||||
}
|
||||
|
||||
//deferred mode of jQuery. != promise-then.
|
||||
$.getJSON( 'result.json', {})
|
||||
.then(clearWorldMap)
|
||||
.then(setMapBackground)
|
||||
.then(convertCityObjs)
|
||||
.then(drawWorldMap)
|
||||
.then(setMouseWork);
|
||||
.then(isDetailMap?drawDetailWorldMap:drawBasicWorldMap)
|
||||
.then(setMouseWork)
|
||||
.then(setCityClickable)
|
||||
.then(saveCityInfo);
|
||||
}
|
||||
|
||||
$(function(){
|
||||
|
||||
var isDetailMap = true;
|
||||
var clickableAll = false;
|
||||
|
||||
reloadWorldMap(isDetailMap, clickableAll, console.log);
|
||||
|
||||
});
|
||||
+102
-7
@@ -1,16 +1,111 @@
|
||||
|
||||
{
|
||||
"staryYear":215,
|
||||
"startYear":215,
|
||||
"year":217,
|
||||
"month":5,
|
||||
"month":10,
|
||||
"cityList":[
|
||||
[1,"name","level","state","nationId","region","supply"]
|
||||
[1, 8, 0, 0, 1, 1],
|
||||
[2, 8, 0, 0, 2, 1],
|
||||
[3, 8, 0, 0, 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],
|
||||
[10, 7, 0, 0, 2, 1],
|
||||
[11, 7, 0, 0, 2, 1],
|
||||
[12, 7, 0, 0, 2, 1],
|
||||
[13, 7, 0, 1, 6, 1],
|
||||
[14, 7, 0, 1, 6, 1],
|
||||
[15, 7, 0, 1, 7, 1],
|
||||
[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],
|
||||
[22, 6, 0, 0, 3, 1],
|
||||
[23, 6, 0, 0, 3, 1],
|
||||
[24, 6, 0, 0, 4, 1],
|
||||
[25, 6, 0, 0, 4, 1],
|
||||
[26, 6, 0, 0, 4, 1],
|
||||
[27, 6, 0, 0, 4, 1],
|
||||
[28, 6, 0, 0, 5, 1],
|
||||
[29, 6, 0, 0, 5, 1],
|
||||
[30, 6, 0, 0, 6, 1],
|
||||
[31, 6, 0, 0, 7, 1],
|
||||
[32, 6, 0, 0, 8, 1],
|
||||
[33, 6, 0, 0, 8, 1],
|
||||
[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],
|
||||
[40, 5, 0, 0, 3, 1],
|
||||
[41, 5, 0, 0, 3, 1],
|
||||
[42, 5, 0, 0, 3, 1],
|
||||
[43, 5, 0, 0, 4, 1],
|
||||
[44, 5, 0, 0, 4, 1],
|
||||
[45, 5, 0, 0, 4, 1],
|
||||
[46, 5, 0, 0, 5, 1],
|
||||
[47, 5, 0, 0, 5, 1],
|
||||
[48, 5, 0, 0, 5, 1],
|
||||
[49, 5, 0, 0, 5, 1],
|
||||
[50, 5, 0, 0, 5, 1],
|
||||
[51, 5, 0, 0, 6, 1],
|
||||
[52, 5, 0, 0, 6, 1],
|
||||
[53, 5, 0, 0, 6, 1],
|
||||
[54, 5, 0, 0, 6, 1],
|
||||
[55, 5, 0, 0, 6, 1],
|
||||
[56, 5, 0, 0, 7, 1],
|
||||
[57, 5, 0, 0, 7, 1],
|
||||
[58, 5, 0, 0, 7, 1],
|
||||
[59, 5, 0, 0, 7, 1],
|
||||
[60, 5, 0, 0, 8, 1],
|
||||
[61, 5, 0, 0, 8, 1],
|
||||
[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],
|
||||
[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],
|
||||
[74, 3, 0, 0, 2, 1],
|
||||
[75, 3, 0, 0, 4, 1],
|
||||
[76, 3, 0, 0, 4, 1],
|
||||
[77, 2, 0, 0, 1, 1],
|
||||
[78, 2, 0, 0, 1, 1],
|
||||
[79, 2, 0, 0, 1, 1],
|
||||
[80, 2, 0, 2, 2, 1],
|
||||
[81, 2, 0, 2, 2, 1],
|
||||
[82, 2, 0, 2, 2, 1],
|
||||
[83, 2, 0, 2, 2, 1],
|
||||
[84, 2, 0, 0, 3, 1],
|
||||
[85, 2, 0, 0, 3, 1],
|
||||
[86, 2, 0, 3, 4, 1],
|
||||
[87, 3, 0, 3, 4, 1],
|
||||
[88, 2, 0, 3, 6, 1],
|
||||
[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]
|
||||
],
|
||||
"nationList":[
|
||||
["id","name","color","capital"]
|
||||
[1,"위","#0000ff",13],
|
||||
[2,"촉","#00ff00",83],
|
||||
[3,"오","#ff0000",89]
|
||||
],
|
||||
"spyList":[13, 22],
|
||||
"spyList":[133, 892],
|
||||
"shownByGeneralList":[65,33,73],
|
||||
"myCity":33,
|
||||
"myNation":1
|
||||
"myCity":83,
|
||||
"myNation":2
|
||||
}
|
||||
Reference in New Issue
Block a user