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

새 지도 코드에서 예제로 사용할 result.json 손봄

Browse Source 
새 지도 코드에서 (detail, basic), (click, select)를 같이 사용할 수 있도록 정비
This commit is contained in:
Hide_D
2018-01-30 15:28:43 +09:00
parent 783400d071
commit f2f32347f1
4 changed files with 189 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tmp_map/map.css
+8 -5
View File
@@ -7,10 +7,13 @@
.map_title{ .map_title{
width:700px; width:700px;
height:20px; height:20px;
text-align:center;
}
.map_detail .map_title{
background: background:
url('/images/ltitle.jpg') no-repeat left, url('/images/ltitle.jpg') no-repeat left,
url('/images/rtitle.jpg') no-repeat right; url('/images/rtitle.jpg') no-repeat right;
text-align:center;
} }
.map_title_text{ .map_title_text{
@@ -23,25 +26,25 @@
font-weight:bold; font-weight:bold;
} }
.map_spring .map_title_text{ .map_detail.map_spring .map_title_text{
background: background:
url('/images/ad.gif') no-repeat left, url('/images/ad.gif') no-repeat left,
url('/images/spring.gif') no-repeat right; url('/images/spring.gif') no-repeat right;
} }
.map_summer .map_title_text{ .map_detail.map_summer .map_title_text{
background: background:
url('/images/ad.gif') no-repeat left, url('/images/ad.gif') no-repeat left,
url('/images/summer.gif') no-repeat right; url('/images/summer.gif') no-repeat right;
} }
.map_fall .map_title_text{ .map_detail.map_fall .map_title_text{
background: background:
url('/images/ad.gif') no-repeat left, url('/images/ad.gif') no-repeat left,
url('/images/fall.gif') no-repeat right; url('/images/fall.gif') no-repeat right;
} }
.map_winter .map_title_text{ .map_detail.map_winter .map_title_text{
background: background:
url('/images/ad.gif') no-repeat left, url('/images/ad.gif') no-repeat left,
url('/images/winter.gif') no-repeat right; url('/images/winter.gif') no-repeat right;
tmp_map/map.html
+2 -2
View File
@@ -11,14 +11,14 @@
<link href="map.css" rel="stylesheet"> <link href="map.css" rel="stylesheet">
</head> </head>
<body style="background-color:black;margin:50px;"> <body style="background-color:black;margin:50px;">
<div class="world_map"> <div class="world_map map_detail">
<div class="map_title"> <div class="map_title">
<span class="map_title_text"> <span class="map_title_text">
217年 2月 217年 2月
</span> </span>
</div> </div>
<div class="map_body"> <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_tooltip">
<div class="city_name"> <div class="city_name">
tmp_map/map.js
+77 -37
View File
@@ -2,29 +2,20 @@
String.prototype.format = function() { String.prototype.format = function() {
var args = arguments; var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) { return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' return (typeof args[number] != 'undefined') ? args[number] : match;
? args[number]
: match
;
}); });
}; };
jQuery(function($){
function reloadWorldMap(isDetailMap, clickableAll, selectCallback){
var cityPosition = getCityPosition(); var cityPosition = getCityPosition();
//OBJ : startYear, year, month, cityList, nationList, spyList, ourCityList, shownByGeneralList, myCity //OBJ : startYear, year, month, cityList, nationList, spyList, ourCityList, shownByGeneralList, myCity
var $world_map = $('.world_map'); 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){ function setMapBackground(obj){
var startYear = obj.startYear; var startYear = obj.startYear;
var year = obj.year; var year = obj.year;
@@ -43,6 +34,7 @@ jQuery(function($){
} }
$world_map.removeClass('map_string map_summer map_fall map_winter');
if(month <= 3){ if(month <= 3){
$world_map.addClass('map_spring'); $world_map.addClass('map_spring');
} }
@@ -67,12 +59,11 @@ jQuery(function($){
function toCityObj(arr){ function toCityObj(arr){
return { return {
"id":arr[0], "id":arr[0],
"name":arr[1], "level":arr[1],
"level":arr[2], "state":arr[2],
"state":arr[3], "nationId":(arr[3]>0)?arr[3]:null,
"nationId":arr[4], "region":arr[4],
"region":arr[5], "supply":arr[5]
"supply":arr[6]
}; };
} }
@@ -81,7 +72,7 @@ jQuery(function($){
"id":arr[0], "id":arr[0],
"name":arr[1], "name":arr[1],
"color":arr[2], "color":arr[2],
"capital":(arr[3]!=0) "capital":(arr[3]!==0)
}; };
} }
@@ -137,20 +128,21 @@ jQuery(function($){
case 7: level_str = "대】"; break; case 7: level_str = "대】"; break;
case 8: level_str = "특】"; break; case 8: level_str = "특】"; break;
} }
city.text = region_str + city.name + level_str; city.text = region_str + city.name + level_str;
city.region_str = region_str; city.region_str = region_str;
city.level_str = level_str; city.level_str = level_str;
return city; return city;
} }
function mergePositionInfo(city){ function mergePositionInfo(city){
var id = city.id; var id = city.id;
if(!(id in cityPosition)){ if(!(id in cityPosition)){
return city; return city;
} }
var xy_val = cityPosition[id]; var xy_val = cityPosition[id];
city.name = xy_val[0];
city.x = xy_val[1]; city.x = xy_val[1];
city.y = xy_val[2]; city.y = xy_val[2];
return city; return city;
@@ -160,7 +152,7 @@ jQuery(function($){
//nationId 값으로 isCapital, color, nation을 통합 //nationId 값으로 isCapital, color, nation을 통합
var nationId = city.nationId; var nationId = city.nationId;
if(nationId == null || !(nationId in nationList)){ if(nationId === null || !(nationId in nationList)){
city.nationId = null; city.nationId = null;
city.nation = null; city.nation = null;
city.color = null; city.color = null;
@@ -177,20 +169,24 @@ jQuery(function($){
} }
function mergeClickable(city){ function mergeClickable(city){
//clickable = (remainSpy << 2) | (ourCity << 1) | shownByGeneral //clickable = (remainSpy << 3) | (ourCity << 2) | (shownByGeneral << 1) | clickableAll
var id = city.id; var id = city.id;
var nationId = city.nationId; var nationId = city.nationId;
var clickable = 0; var clickable = 0;
if(id in spyList){ if(id in spyList){
clickable |= spyList[id] << 2; clickable |= spyList[id] << 3;
} }
if(nationId == myNation){ if(nationId == myNation){
clickable |= 2; clickable |= 4;
} }
if(id in shownByGeneralList){ if(id in shownByGeneralList){
clickable |= 2;
}
if(clickableAll){
clickable |= 1; clickable |= 1;
} }
city.clickable = clickable; city.clickable = clickable;
return city; return city;
} }
@@ -204,10 +200,10 @@ jQuery(function($){
return { return {
'cityList' : cityList, 'cityList' : cityList,
'myCity' : myCity 'myCity' : myCity
} };
} }
function drawWorldMap(obj){ function drawDetailWorldMap(obj){
var flagTemplate = '<div class="map_flag"></div>'; var flagTemplate = '<div class="map_flag"></div>';
var backgroundTemplate = '<div class="map_background"></div>'; var backgroundTemplate = '<div class="map_background"></div>';
@@ -220,10 +216,26 @@ jQuery(function($){
//도시 선택 크기는 동일하게 가고 도시 이미지는 div로 설정. //도시 선택 크기는 동일하게 가고 도시 이미지는 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 = $('.world_map .city_tooltip');
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');
@@ -231,7 +243,7 @@ jQuery(function($){
var $objs = $('.world_map .city_obj'); var $objs = $('.world_map .city_obj');
var $map_body = $('.world_map .map_body'); var $map_body = $('.world_map .map_body');
$map_body.mousemove(function(e){ $map_body.mousemove(function(e){
var parentOffset = $map_body.offset(); var parentOffset = $map_body.offset();
@@ -249,13 +261,41 @@ jQuery(function($){
},function(event){ },function(event){
$tooltip.hide(); $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', {}) $.getJSON( 'result.json', {})
.then(clearWorldMap)
.then(setMapBackground) .then(setMapBackground)
.then(convertCityObjs) .then(convertCityObjs)
.then(drawWorldMap) .then(isDetailMap?drawDetailWorldMap:drawBasicWorldMap)
.then(setMouseWork); .then(setMouseWork)
.then(setCityClickable)
.then(saveCityInfo);
}
$(function(){
var isDetailMap = true;
var clickableAll = false;
reloadWorldMap(isDetailMap, clickableAll, console.log);
}); });
tmp_map/result.json
+102 -7
View File
@@ -1,16 +1,111 @@
{ {
"staryYear":215, "startYear":215,
"year":217, "year":217,
"month":5, "month":10,
"cityList":[ "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":[ "nationList":[
["id","name","color","capital"] [1,"위","#0000ff",13],
[2,"촉","#00ff00",83],
[3,"오","#ff0000",89]
], ],
"spyList":[13, 22], "spyList":[133, 892],
"shownByGeneralList":[65,33,73], "shownByGeneralList":[65,33,73],
"myCity":33, "myCity":83,
"myNation":1 "myNation":2
} }