From 2db446a06d2f6a4094fc76c75ac97b00074e71db Mon Sep 17 00:00:00 2001 From: hide_d Date: Thu, 1 Feb 2018 17:39:57 +0900 Subject: [PATCH] =?UTF-8?q?json=20=EA=B8=B0=EB=B0=98=20=EC=A7=80=EB=8F=84?= =?UTF-8?q?=EB=A5=BC=20=EC=B6=9C=EB=A0=A5=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=EB=A5=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- twe/a_status.php | 25 ++- twe/css/map.css | 464 +++++++++++++++++++++++++++++++++++++++ twe/func_template.php | 9 + twe/j_map.php | 1 + twe/js/base_map.js | 136 ++++++++++++ twe/js/map.js | 494 ++++++++++++++++++++++++++++++++++++++++++ twe/templates/map.php | 17 ++ 7 files changed, 1141 insertions(+), 5 deletions(-) create mode 100644 twe/css/map.css create mode 100644 twe/j_map.php create mode 100644 twe/js/base_map.js create mode 100644 twe/js/map.js create mode 100644 twe/templates/map.php 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(); } - + 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