diff --git a/twe/a_status.php b/twe/a_status.php
index 57c7357f..89916a00 100644
--- a/twe/a_status.php
+++ b/twe/a_status.php
@@ -18,12 +18,28 @@ $me = MYDB_fetch_array($result);
$con = checkLimit($me['userlevel'], $me['con'], $admin['conlimit']);
if($con >= 2) { printLimitMsg($me['turntime']); exit(); }
?>
+
-
-
+
+
세력도
-
+
+
+
+
+
+
+
@@ -37,8 +53,7 @@ if($con >= 2) { printLimitMsg($me['turntime']); exit(); }
-
+ =getMapHtml()?>
|
diff --git a/twe/css/map.css b/twe/css/map.css
new file mode 100644
index 00000000..10ed27c5
--- /dev/null
+++ b/twe/css/map.css
@@ -0,0 +1,464 @@
+.world_map{
+ background:black;
+ font-size:13px;
+ color:white;
+}
+
+.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;
+}
+
+.map_title_text{
+ margin:auto;
+ text-align:center;
+ width:160px;
+ display:block;
+ line-height:20px;
+ font-size:13px;
+ font-weight:bold;
+}
+
+.map_detail.map_spring .map_title_text{
+ background:
+ url('/images/ad.gif') no-repeat left,
+ url('/images/spring.gif') no-repeat right;
+}
+
+.map_detail.map_summer .map_title_text{
+ background:
+ url('/images/ad.gif') no-repeat left,
+ url('/images/summer.gif') no-repeat right;
+}
+
+.map_detail.map_fall .map_title_text{
+ background:
+ url('/images/ad.gif') no-repeat left,
+ url('/images/fall.gif') no-repeat right;
+}
+
+.map_detail.map_winter .map_title_text{
+ background:
+ url('/images/ad.gif') no-repeat left,
+ url('/images/winter.gif') no-repeat right;
+}
+
+.map_body{
+ width:700px;
+ height:500px;
+ position:relative;
+}
+
+.map_spring .map_body{
+ background: url('/images/map1.jpg') no-repeat;
+}
+
+.map_summer .map_body{
+ background: url('/images/map2.jpg') no-repeat;
+}
+
+.map_fall .map_body{
+ background: url('/images/map3.jpg') no-repeat;
+}
+
+.map_winter .map_body{
+ background: url('/images/map4.jpg') no-repeat;
+}
+
+.world_map .city_tooltip{
+ position: absolute;
+ z-index:6;
+ display:none;
+ width:120px;
+ border: 0.02em gray solid;
+}
+.world_map .city_name{
+ background-color: rgb(30, 164, 255);
+ z-index: 6;
+ line-height:15px;
+ height:15px;
+
+}
+.world_map .nation_name{
+ background-color: rgb(30, 164, 255);
+ z-index: 6;
+ line-height:15px;
+ height:15px;
+ border-top: 0.02em gray solid;
+ text-align:right;
+}
+
+.world_map .map_flag{
+ width:12px;
+ height:12px;
+}
+
+.world_map.map_detail .my_city{
+ border:solid 1px red;
+ outline:dotted 4px red;
+}
+
+
+.world_map.map_detail .city_filler{
+ position:absolute;
+ width:100%;
+ height:100%;
+ left:-1px;
+ top:-1px;
+ background:transparent;
+}
+
+
+.city_base{
+ position:absolute;
+ width:40px;
+ height:30px;
+}
+
+.city_base .city_bg{
+ z-index:1;
+ position:absolute;
+ 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;
+ left:-4px;
+ top:-7.5px;
+}
+
+.map_detail .city_base.city_level_2 .city_bg{
+ /*진*/
+ width:60px;
+ height:42px;
+ background-size:60px 42px;
+ left:-10px;
+ top:-6px;
+}
+
+.map_detail .city_base.city_level_3 .city_bg{
+ /*관*/
+ width:42px;
+ height:42px;
+ background-size:42px 42px;
+ left:-1px;
+ top:-6px;
+}
+
+.map_detail .city_base.city_level_4 .city_bg{
+ /*이*/
+ width:60px;
+ height:45px;
+ background-size:60px 45px;
+ left:-10px;
+ top:-7.5px;
+}
+
+.map_detail .city_base.city_level_5 .city_bg{
+ /*소*/
+ width:72px;
+ height:48px;
+ background-size:72px 48px;
+ left:-16px;
+ top:-9px;
+}
+
+.map_detail .city_base.city_level_6 .city_bg{
+ /*중*/
+ width:78px;
+ height:54px;
+ background-size:78px 54px;
+ left:-19px;
+ top:-12px;
+}
+
+.map_detail .city_base.city_level_7 .city_bg{
+ /*대*/
+ width:84px;
+ height:60px;
+ background-size:84px 60px;
+ left:-22px;
+ top:-15px;
+}
+
+.map_detail .city_base.city_level_8 .city_bg{
+ /*특*/
+ width:96px;
+ height:72px;
+ background-size:96px 72px;
+ left:-28px;
+ top:-21px;
+}
+
+.city_img{
+ position:absolute;
+}
+
+/*
+.map_detail .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;
+}
+*/
+
+
+.map_detail .city_base.city_level_1 .city_img{
+ width:16px;
+ height:15px;
+ left:12px;
+ top:7.5px;
+}
+
+.map_detail .city_base.city_level_2 .city_img{
+ width:20px;
+ height:14px;
+ left:10px;
+ top:8px;
+}
+
+.map_detail .city_base.city_level_3 .city_img{
+ width:14px;
+ height:14px;
+ left:13px;
+ top:8px;
+}
+
+.map_detail .city_base.city_level_4 .city_img{
+ width:20px;
+ height:15px;
+ left:10px;
+ top:7.5px;
+}
+
+.map_detail .city_base.city_level_5 .city_img{
+ width:24px;
+ height:16px;
+ left:8px;
+ top:7px;
+}
+
+.map_detail .city_base.city_level_6 .city_img{
+ width:26px;
+ height:18px;
+ left:7px;
+ top:6px;
+}
+
+.map_detail .city_base.city_level_7 .city_img{
+ width:28px;
+ height:20px;
+ left:6px;
+ top:5px;
+}
+
+.map_detail .city_base.city_level_8 .city_img{
+ width:32px;
+ height:24px;
+ left:4px;
+ top:3px;
+}
+
+.map_detail .city_base .city_state{
+ position: absolute;
+ top:5px; /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
+ left:0;
+}
+
+.map_detail .city_base .city_flag{
+ position: absolute;
+ width:12px;
+ height:12px;
+}
+
+.map_detail .city_base .city_flag > img{
+ width:12px;
+ height:12px;
+}
+
+.map_detail .city_base.city_level_1 .city_flag{
+ right:-8px;
+ top:-4px;
+}
+
+.map_detail .city_base.city_level_2 .city_flag{
+ right:-8px;
+ top:-4px;
+}
+
+.map_detail .city_base.city_level_3 .city_flag{
+ right:-8px;
+ top:-4px;
+}
+
+.map_detail .city_base.city_level_4 .city_flag{
+ right:-6px;
+ top:-3px;
+}
+
+.map_detail .city_base.city_level_5 .city_flag{
+ right:-6px;
+ top:-4px;
+}
+
+.map_detail .city_base.city_level_6 .city_flag{
+ right:-6px;
+ top:-4px;
+}
+
+.map_detail .city_base.city_level_7 .city_flag{
+ right:-6px;
+ top:-4px;
+}
+
+.map_detail .city_base.city_level_8 .city_flag{
+ right:-6px;
+ top:-3px;
+}
+
+.map_detail .city_base .city_flag .city_capital{
+ position: absolute;
+ width:10px;
+ height:10px;
+ top:0;
+ right:-1px;
+}
+
+.map_detail .city_base .city_flag .city_capital > img{
+ width:10px;
+ height:10px;
+}
+
+/* Basic */
+
+.world_map.map_basic .city_filler{
+ position:absolute;
+ width:100%;
+ height:100%;
+ left:0;
+ top:0;
+ background:transparent;
+}
+
+.world_map.map_basic .my_city{
+ outline:dotted 4px red;
+}
+
+.map_basic .city_base .city_img{
+ background-color:white;
+}
+
+.map_basic .city_base.city_level_1 .city_img{
+ width:12px;
+ height:12px;
+ left:14px;
+ top:9px;
+}
+
+.map_basic .city_base.city_level_2 .city_img{
+ width:12px;
+ height:12px;
+ left:14px;
+ top:9px;
+}
+
+.map_basic .city_base.city_level_3 .city_img{
+ width:14px;
+ height:14px;
+ left:13px;
+ top:8px;
+}
+
+.map_basic .city_base.city_level_4 .city_img{
+ width:16px;
+ height:14px;
+ left:12px;
+ top:8px;
+}
+
+.map_basic .city_base.city_level_5 .city_img{
+ width:18px;
+ height:16px;
+ left:11px;
+ top:7px;
+}
+
+.map_basic .city_base.city_level_6 .city_img{
+ width:20px;
+ height:16px;
+ left:10px;
+ top:7px;
+}
+
+.map_basic .city_base.city_level_7 .city_img{
+ width:22px;
+ height:18px;
+ left:9px;
+ top:6px;
+}
+
+.map_basic .city_base.city_level_8 .city_img{
+ width:24px;
+ height:18px;
+ left:8px;
+ top:6px;
+}
+
+
+.map_basic .city_base .city_capital{
+ position: absolute;
+ width:5px;
+ height:5px;
+ top:-2px;
+ right:-2px;
+ background-color:yellow;
+}
+
+.map_basic .city_base .city_state{
+ position: absolute;
+ width:10px;
+ height:10px;
+ top:-2px;
+ left:-4px;
+ background-color:white;
+}
+
+.map_basic .city_base .city_state.city_state_war{
+ background-color:red;
+}
+
+.map_basic .city_base .city_state.city_state_bad{
+ background-color:orange;
+}
+
+.map_basic .city_base .city_state.city_state_good{
+ background-color:blue;
+}
\ No newline at end of file
diff --git a/twe/func_template.php b/twe/func_template.php
index eb6a73f4..95d5e41f 100644
--- a/twe/func_template.php
+++ b/twe/func_template.php
@@ -149,3 +149,12 @@ function commandButton() {
return $result;
}
+
+
+
+function getMapHtml(){
+ //NOTE: 필요한가?
+ $templates = new League\Plates\Engine('templates');
+
+ return $templates->render('map');
+}
\ No newline at end of file
diff --git a/twe/j_map.php b/twe/j_map.php
new file mode 100644
index 00000000..b3d9bbc7
--- /dev/null
+++ b/twe/j_map.php
@@ -0,0 +1 @@
+0)?arr[3]:null,
+ region:arr[4],
+ supply:(arr[5]!=0)
+ };
+ }
+
+ function toNationObj(arr){
+ return {
+ id:arr[0],
+ name:arr[1],
+ color:arr[2],
+ capital:arr[3]
+ };
+ }
+
+ function convertSpyList(arr){
+ var result = [];
+ arr.forEach(function(v){
+ var cityId = (v / 10) | 0;
+ var spy = v % 10;
+ result[cityId] = spy;
+ });
+ 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 = convertSet(obj.shownByGeneralList);//Array -> Set
+
+ var myCity = obj.myCity;
+ var myNation = obj.myNation;
+
+ function formatCityInfo(city) {
+ var region_str = '';
+ var level_str = '';
+ switch(city.region) {
+ case 1: region_str = "【하북|"; break;
+ case 2: region_str = "【중원|"; break;
+ case 3: region_str = "【서북|"; break;
+ case 4: region_str = "【서촉|"; break;
+ case 5: region_str = "【남중|"; break;
+ case 6: region_str = "【 초|"; break;
+ case 7: region_str = "【오월|"; break;
+ case 8: region_str = "【동이|"; break;
+ }
+
+ switch(city.level) {
+ case 1: level_str = "수】"; break;
+ case 2: level_str = "진】"; break;
+ case 3: level_str = "관】"; break;
+ case 4: level_str = "이】"; break;
+ case 5: level_str = "소】"; break;
+ case 6: level_str = "중】"; break;
+ case 7: level_str = "대】"; break;
+ case 8: level_str = "특】"; break;
+ }
+
+ city.text = region_str + level_str + city.name;
+ 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;
+ }
+
+ function mergeNationInfo(city){
+ //nationId 값으로 isCapital, color, nation을 통합
+
+ var nationId = city.nationId;
+ if(nationId === null || !(nationId in nationList)){
+ city.nationId = null;
+ city.nation = null;
+ city.color = null;
+ city.isCapital = false;
+ return city;
+ }
+
+ var nationObj = nationList[nationId];
+ city.nation = nationObj.name;
+ city.color = nationObj.color;
+ city.isCapital = (nationObj.capital == city.id);
+
+ return city;
+ }
+
+ function mergeClickable(city){
+ //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] << 3;
+ }
+ if(nationId == myNation){
+ clickable |= 4;
+ }
+ if(shownByGeneralList.hasOwnProperty(id)){
+ clickable |= 2;
+ }
+ if(clickableAll){
+ clickable |= 1;
+ }
+
+
+ city.clickable = clickable;
+ return city;
+ }
+
+ cityList = cityList
+ .map(mergePositionInfo)
+ .map(mergeNationInfo)
+ .map(mergeClickable)
+ .map(formatCityInfo);
+
+ return {
+ 'cityList' : cityList,
+ 'myCity' : myCity
+ };
+ }
+
+ function drawDetailWorldMap(obj){
+
+ var $map_body = $('.world_map .map_body');
+
+ var cityList = obj.cityList;
+ var myCity = obj.myCity;
+
+ cityList.forEach(function(city){
+ var id = city.id;
+ $('.city_base_{0}'.format(id)).detach();
+ //이전 도시는 지운다.
+
+ var $cityObj = $(''.format(id));
+ $cityObj.addClass('city_level_{0}'.format(city.level));
+ $cityObj.data('obj', city).css({'left':city.x-20,'top':city.y-15});
+
+ if('color' in city && city.color !== null){
+ var $bgObj = $('');
+ $cityObj.append($bgObj);
+ $bgObj.css({'background-image':'url(/images/b{0}.png)'.format(convColorValue(city.color))});
+ }
+
+ var $linkObj = $('');
+ $linkObj.data({'text':city.text,'nation':city.nation,'id':city.id});
+ $cityObj.append($linkObj);
+
+ var $imgObj = $(''.format(city.level));
+ $linkObj.append($imgObj);
+
+
+
+ if(city.state > 0){
+ var $stateObj = $(''.format(city.state));
+ $linkObj.append($stateObj);
+ }
+
+ if(city.nationId && city.nationId > 0){
+ var flagType = city.supply?'f':'d';
+ var $flagObj = $(''.format(flagType, convColorValue(city.color)));
+ if(city.isCapital){
+ var $capitalObj = $('');
+ $flagObj.append($capitalObj);
+ }
+ $imgObj.append($flagObj);
+ }
+
+
+ $map_body.append($cityObj);
+
+
+ });
+
+ $world_map.find('.city_base_{0} .city_filler'.format(myCity)).addClass('my_city');
+
+ return obj;
+ }
+
+ function drawBasicWorldMap(obj){
+
+ var $map_body = $('.world_map .map_body');
+
+ var cityList = obj.cityList;
+ var myCity = obj.myCity;
+
+ cityList.forEach(function(city){
+ var id = city.id;
+ $('.city_base_{0}'.format(id)).detach();
+ //이전 도시는 지운다.
+
+ var $cityObj = $(''.format(id));
+ $cityObj.addClass('city_level_{0}'.format(city.level));
+ $cityObj.data('obj', city).css({'left':city.x-20,'top':city.y-15});
+
+ var $linkObj = $('');
+ $linkObj.data({'text':city.text,'nation':city.nation,'id':city.id});
+ $cityObj.append($linkObj);
+
+ var $imgObj = $('');
+ if('color' in city && city.color !== null){
+ $imgObj.css({'background-color':city.color});
+ }
+ $linkObj.append($imgObj);
+
+ if(city.state > 0){
+ var state_text = 'wrong';
+ if(city.state < 10){
+ state_text = 'good';
+ }
+ else if(city.state < 40){
+ state_text = 'bad';
+ }
+ else if(city.state < 50){
+ state_text = 'war';
+ }
+
+ var $stateObj = $(''.format(state_text));
+ $imgObj.append($stateObj);
+ }
+
+ //단순 표기에서는 깃발 여부가 없음
+ if(city.isCapital){
+ var $capitalObj = $('');
+ $imgObj.append($capitalObj);
+ }
+
+
+ $map_body.append($cityObj);
+ });
+
+ $world_map.find('.city_base_{0} .city_filler'.format(myCity)).addClass('my_city');
+
+ 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');
+
+ var $objs = $('.world_map .city_link');
+
+ var $map_body = $('.world_map .map_body');
+
+ //터치스크린 탭
+
+ $objs.on('touchstart', function(e){
+ var $this = $(this);
+
+ var touchMode = $this.data('touchMode');
+ if($tooltip_city.data('target') != $this.data('id')){
+ $this.data('touchMode', 1);
+ }
+ else if(touchMode === undefined){
+ $this.data('touchMode', 1);
+ }
+ else{
+ $this.data('touchMode', touchMode + 1);
+ }
+ $map_body.data('touchMode', 1);
+
+ $tooltip_city.data('target', $this.data('id'));
+
+
+ });
+
+ $objs.on('touchend', function(e){
+ var $this = $(this);
+ var position = $this.parent().position();
+ $tooltip_city.html($this.data('text'));
+ $tooltip_nation.html($this.data('nation'));
+ $tooltip.css({'top': position.top + 25, 'left': position.left + 35}).show();
+
+ var touchMode = $this.data('touchMode');
+ if(touchMode <= 1){
+ return false;
+ }
+
+ //xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다.
+ $this.data('touchMode', 0);
+ });
+
+ $map_body.on('touchend',function(e){
+
+ //위의 touchend bind에 해당하지 않는 경우 -> 빈 지도 터치
+ $tooltip.hide();
+ });
+
+ //Mouse over 모드 작동
+
+ $map_body.on('mousemove', function(e){
+ if($(this).data('touchMode')){
+ return true;
+ }
+
+ var parentOffset = $map_body.offset();
+ var relX = e.pageX - parentOffset.left;
+ var relY = e.pageY - parentOffset.top;
+
+ $tooltip.css({'top': relY + 10, 'left': relX + 10});
+ });
+
+ $objs.on('mouseenter', function(e){
+ if($map_body.data('touchMode')){
+ return true;
+ }
+
+ var $this = $(this);
+
+ $tooltip_city.data('target', $this.data('id'));
+ $tooltip_city.html($this.data('text'));
+ $tooltip_nation.html($this.data('nation'));
+
+ $tooltip.show();
+ });
+
+ $objs.on('mouseleave', function(event){
+ $tooltip.hide();
+ });
+
+ $objs.on('click', function(e){
+ //xxx: touchend 다음 click 이벤트가 갈 수도 있고, 안 갈 수도 있다.
+ var touchMode = $(this).data('touchMode');
+ if(touchMode === undefined){
+ return;
+ }
+
+ if(touchMode === 1){
+ return false;
+ }
+ });
+
+
+ return obj;
+ }
+
+ function setCityClickable(obj){
+
+ obj.cityList.forEach(function(city){
+ var $cityLink = $world_map.find('.city_base_{0} .city_link'.format(city.id));
+
+ if('clickable' in city && city.clickable > 0){
+ $cityLink.attr('href',hrefTemplate.format(city.id));
+ }
+
+ if(selectCallback){
+ $cityLink.click(function(){
+ return selectCallback(city);
+ });
+ }
+ });
+
+ 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.
+ $.ajax({
+ url: option.targetJson,
+ type: 'POST',
+ contentType: 'application/json',
+ data: {
+ neutralView:option.neutralView,
+ year:option.year,
+ month:option.month,
+ showMe:option.showMe,
+ aux:option.aux
+ },
+ dataType:'json'
+ })
+ .then(setMapBackground)
+ .then(convertCityObjs)
+ .then(isDetailMap?drawDetailWorldMap:drawBasicWorldMap)
+ .then(setMouseWork)
+ .then(setCityClickable)
+ .then(saveCityInfo);
+}
+
diff --git a/twe/templates/map.php b/twe/templates/map.php
new file mode 100644
index 00000000..41eb1142
--- /dev/null
+++ b/twe/templates/map.php
@@ -0,0 +1,17 @@
+
\ No newline at end of file