From 6177ea97d21cbce533e7b1ac24a6e75b7cbda331 Mon Sep 17 00:00:00 2001 From: hide_d Date: Tue, 30 Jan 2018 02:56:12 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8F=99=EC=A0=81=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=ED=95=98=EB=8A=94=20map=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=20=EC=A4=91=EA=B0=84=20=EC=9E=91=EC=97=85=EA=B9=8C=EC=A7=80=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tmp_map/base.css | 0 tmp_map/base_map.js | 98 +++++++++++++++++ tmp_map/map.css | 102 +++++++++++++++++ tmp_map/map.html | 34 ++++++ tmp_map/map.js | 261 ++++++++++++++++++++++++++++++++++++++++++++ tmp_map/result.js | 0 tmp_map/result.json | 16 +++ 7 files changed, 511 insertions(+) delete mode 100644 tmp_map/base.css create mode 100644 tmp_map/base_map.js create mode 100644 tmp_map/map.css delete mode 100644 tmp_map/result.js create mode 100644 tmp_map/result.json diff --git a/tmp_map/base.css b/tmp_map/base.css deleted file mode 100644 index e69de29b..00000000 diff --git a/tmp_map/base_map.js b/tmp_map/base_map.js new file mode 100644 index 00000000..760911be --- /dev/null +++ b/tmp_map/base_map.js @@ -0,0 +1,98 @@ +function getCityPosition(){ + return { + 1: ["업", 345, 130], + 2: ["허창", 330, 215], + 3: ["낙양", 275, 180], + 4: ["장안", 145, 165], + 5: ["성도", 25, 290], + 6: ["양양", 255, 290], + 7: ["건업", 505, 305], + 8: ["북평", 465, 65], + 9: ["남피", 395, 95], + 10: ["완", 270, 235], + 11: ["수춘", 395, 270], + 12: ["서주", 440, 250], + 13: ["강릉", 245, 335], + 14: ["장사", 255, 375], + 15: ["시상", 360, 360], + 16: ["위례", 620, 145], + 17: ["계", 365, 35], + 18: ["복양", 410, 170], + 19: ["진류", 365, 185], + 20: ["여남", 330, 260], + 21: ["하비", 480, 235], + 22: ["서량", 25, 50], + 23: ["하내", 230, 150], + 24: ["한중", 135, 205], + 25: ["상용", 185, 225], + 26: ["덕양", 85, 275], + 27: ["강주", 70, 310], + 28: ["건녕", 80, 400], + 29: ["남해", 245, 480], + 30: ["계양", 230, 400], + 31: ["오", 510, 345], + 32: ["평양", 590, 100], + 33: ["사비", 605, 205], + 34: ["계림", 655, 200], + 35: ["진양", 295, 60], + 36: ["평원", 440, 115], + 37: ["북해", 470, 155], + 38: ["초", 365, 230], + 39: ["패", 430, 220], + 40: ["천수", 70, 105], + 41: ["안정", 95, 145], + 42: ["홍농", 210, 175], + 43: ["하변", 45, 190], + 44: ["자동", 75, 245], + 45: ["영안", 115, 295], + 46: ["귀양", 90, 360], + 47: ["주시", 30, 345], + 48: ["운남", 30, 415], + 49: ["남영", 135, 405], + 50: ["교지", 130, 480], + 51: ["신야", 250, 260], + 52: ["강하", 315, 295], + 53: ["무릉", 195, 355], + 54: ["영릉", 190, 395], + 55: ["상동", 210, 435], + 56: ["여강", 380, 315], + 57: ["회계", 480, 395], + 58: ["고창", 350, 405], + 59: ["대", 450, 480], + 60: ["안평", 530, 80], + 61: ["졸본", 570, 65], + 62: ["이도", 680, 260], + 63: ["강", 95, 35], + 64: ["저", 25, 120], + 65: ["흉노", 180, 95], + 66: ["남만", 80, 455], + 67: ["산월", 425, 430], + 68: ["오환", 610, 20], + 69: ["왜", 680, 320], + 70: ["호관", 285, 140], + 71: ["호로", 285, 205], + 72: ["사곡", 240, 175], + 73: ["함곡", 180, 175], + 74: ["사수", 310, 185], + 75: ["양평", 90, 220], + 76: ["가맹", 45, 225], + 77: ["역경", 410, 65], + 78: ["계교", 405, 135], + 79: ["동황", 515, 145], + 80: ["관도", 340, 165], + 81: ["정도", 400, 210], + 82: ["합비", 435, 285], + 83: ["광릉", 490, 275], + 84: ["적도", 130, 75], + 85: ["가정", 40, 160], + 86: ["기산", 110, 180], + 87: ["면죽", 35, 255], + 88: ["이릉", 215, 295], + 89: ["장판", 280, 315], + 90: ["백랑", 530, 30], + 91: ["적벽", 330, 325], + 92: ["파양", 430, 350], + 93: ["탐라", 605, 260], + 94: ["유구", 625, 435], + }; +} \ No newline at end of file diff --git a/tmp_map/map.css b/tmp_map/map.css new file mode 100644 index 00000000..b57af0dd --- /dev/null +++ b/tmp_map/map.css @@ -0,0 +1,102 @@ +.world_map{ + background:black; + font-size:13px; + color:white; +} + +.map_title{ + width:700px; + height:20px; + background: + url('/images/ltitle.jpg') no-repeat left, + url('/images/rtitle.jpg') no-repeat right; + text-align:center; +} + +.map_title_text{ + margin:auto; + text-align:center; + width:160px; + display:block; + line-height:20px; + font-size:13px; + font-weight:bold; +} + +.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{ + background: + url('/images/ad.gif') no-repeat left, + url('/images/summer.gif') no-repeat right; +} + +.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{ + 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; + 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 .my_city{ + border:solid 0.02em red;/* Always 1px :) */ + outline:dotted 3px red; +} diff --git a/tmp_map/map.html b/tmp_map/map.html index e69de29b..81ba8bfa 100644 --- a/tmp_map/map.html +++ b/tmp_map/map.html @@ -0,0 +1,34 @@ + + + +JSON 지도 + + + + + + + + + +
+
+ + 217年 2月 + +
+
+
+
+
+ +
+
+ +
+
+ +
+
+ + \ No newline at end of file diff --git a/tmp_map/map.js b/tmp_map/map.js index e69de29b..888bdc73 100644 --- a/tmp_map/map.js +++ b/tmp_map/map.js @@ -0,0 +1,261 @@ + +String.prototype.format = function() { + var args = arguments; + return this.replace(/{(\d+)}/g, function(match, number) { + return typeof args[number] != 'undefined' + ? args[number] + : match + ; + }); +}; + +jQuery(function($){ + 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; + var month = obj.month; + + + var $map_title = $('.map_title_text'); + if(year < startYear + 1){ + $map_title.css('color', 'magenta'); + } + else if(year < startYear + 2){ + $map_title.css('color', 'orange'); + } + else if(year < startYear + 3){ + $map_title.css('color', 'yellow'); + } + + + if(month <= 3){ + $world_map.addClass('map_spring'); + } + else if(month <= 6){ + $world_map.addClass('map_summer'); + } + else if(month <= 6){ + $world_map.addClass('map_fall'); + } + else{ + $world_map.addClass('map_winter'); + } + + $map_title.html('{0}年 {1}月'.format(year, month)); + + return obj; + } + + function convertCityObjs(obj){ + //원본 Obj는 굉장히 간소하게 온다, Object 형태로 변환해서 사용한다. + + 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] + }; + } + + function toNationObj(arr){ + return { + "id":arr[0], + "name":arr[1], + "color":arr[2], + "capital":(arr[3]!=0) + }; + } + + function convertSpyList(arr){ + var result = []; + arr.forEach(function(v){ + var cityId = (v / 10) | 0; + var spy = v % 10; + result[cityId] = spy; + }); + return result; + } + + function convertDictById(arr){ + var result = []; + arr.forEach(function(v, i){ + result[v.id] = v; + }); + 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 = new Set(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 + 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.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 << 2) | (ourCity << 1) | shownByGeneral + var id = city.id; + var nationId = city.nationId; + var clickable = 0; + if(id in spyList){ + clickable |= spyList[id] << 2; + } + if(nationId == myNation){ + clickable |= 2; + } + if(id in shownByGeneralList){ + clickable |= 1; + } + + city.clickable = clickable; + return city; + } + + cityList = cityList + .map(formatCityInfo) + .map(mergePositionInfo) + .map(mergeNationInfo) + .map(mergeClickable); + + return { + 'cityList' : cityList, + 'myCity' : myCity + } + } + + function drawWorldMap(obj){ + + var flagTemplate = '
'; + var backgroundTemplate = '
'; + + var cityList = obj.cityList; + var myCity = obj.myCity; + + //TODO: 도시를 그린다......... + // + //도시 선택 크기는 동일하게 가고 도시 이미지는 div로 설정. + + + + } + + var setMouseWork = function(){ + 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_obj'); + + var $map_body = $('.world_map .map_body'); + + + $map_body.mousemove(function(e){ + 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.hover(function(event){ + var $city = $(this); + + $tooltip_city.html($city.data('text')); + $tooltip_nation.html($city.data('nation')); + $tooltip.show(); + },function(event){ + $tooltip.hide(); + }); + } + + + $.getJSON( 'result.json', {}) + .then(clearWorldMap) + .then(setMapBackground) + .then(convertCityObjs) + .then(drawWorldMap) + .then(setMouseWork); +}); \ No newline at end of file diff --git a/tmp_map/result.js b/tmp_map/result.js deleted file mode 100644 index e69de29b..00000000 diff --git a/tmp_map/result.json b/tmp_map/result.json new file mode 100644 index 00000000..cadedfa1 --- /dev/null +++ b/tmp_map/result.json @@ -0,0 +1,16 @@ + +{ + "staryYear":215, + "year":217, + "month":5, + "cityList":[ + [1,"name","level","state","nationId","region","supply"] + ], + "nationList":[ + ["id","name","color","capital"] + ], + "spyList":[13, 22], + "shownByGeneralList":[65,33,73], + "myCity":33, + "myNation":1 +} \ No newline at end of file