json 기반 지도를 출력하도록 코드를 추가
This commit is contained in:
+20
-5
@@ -18,12 +18,28 @@ $me = MYDB_fetch_array($result);
|
|||||||
$con = checkLimit($me['userlevel'], $me['con'], $admin['conlimit']);
|
$con = checkLimit($me['userlevel'], $me['con'], $admin['conlimit']);
|
||||||
if($con >= 2) { printLimitMsg($me['turntime']); exit(); }
|
if($con >= 2) { printLimitMsg($me['turntime']); exit(); }
|
||||||
?>
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=utf-8'>
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<title>세력도</title>
|
<title>세력도</title>
|
||||||
<link rel=stylesheet href=css/common.css type=text/css>
|
<script src="../e_lib/jquery-3.2.1.min.js"></script>
|
||||||
|
<script src="js/base_map.js"></script>
|
||||||
|
<script src="js/map.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function(){
|
||||||
|
|
||||||
|
reloadWorldMap({
|
||||||
|
neutralView:true,
|
||||||
|
showMe:true
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<link href="css/normalize.css" rel="stylesheet">
|
||||||
|
<link href="css/common.css" rel="stylesheet">
|
||||||
|
<link href="css/map.css" rel="stylesheet">
|
||||||
<?php require('analytics.php'); ?>
|
<?php require('analytics.php'); ?>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@@ -37,8 +53,7 @@ if($con >= 2) { printLimitMsg($me['turntime']); exit(); }
|
|||||||
<?php AllLog(34, $me['skin']); ?>
|
<?php AllLog(34, $me['skin']); ?>
|
||||||
</td>
|
</td>
|
||||||
<td width=698>
|
<td width=698>
|
||||||
<iframe src='map.php?type=2&graphic=<?=$me['map'];?>' width=698 height=520 frameborder=0 marginwidth=0 marginheight=0 topmargin=0 scrolling=no>
|
<?=getMapHtml()?>
|
||||||
</iframe>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
|||||||
+464
@@ -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;
|
||||||
|
}
|
||||||
@@ -149,3 +149,12 @@ function commandButton() {
|
|||||||
|
|
||||||
return $result;
|
return $result;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function getMapHtml(){
|
||||||
|
//NOTE: 필요한가?
|
||||||
|
$templates = new League\Plates\Engine('templates');
|
||||||
|
|
||||||
|
return $templates->render('map');
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<?php
|
||||||
@@ -0,0 +1,136 @@
|
|||||||
|
function convertDictById(arr){
|
||||||
|
var result = {};
|
||||||
|
arr.forEach(function(v, i){
|
||||||
|
result[v.id] = v;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertSet(arr){
|
||||||
|
var result = {};
|
||||||
|
arr.forEach(function(v){
|
||||||
|
result[v] = v;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function convColorValue(color){
|
||||||
|
if(color.charAt(0) == '#'){
|
||||||
|
color = color.substr(1);
|
||||||
|
}
|
||||||
|
color = color.toUpperCase();
|
||||||
|
|
||||||
|
var colorBase = convertSet([
|
||||||
|
'000080', '0000FF', '008000', '008080', '00BFFF', '00FF00', '00FFFF', '20B2AA',
|
||||||
|
'2E8B57', '483D8B', '6495ED', '7B68EE', '7CFC00', '7FFFD4', '800000', '800080',
|
||||||
|
'808000', '87CEEB', 'A0522D', 'A9A9A9', 'AFEEEE', 'BA55D3', 'E0FFFF', 'F5F5DC',
|
||||||
|
'FF0000', 'FF00FF', 'FF6347', 'FFA500', 'FFC0CB', 'FFD700', 'FFDAB9', 'FFFF00',
|
||||||
|
'FFFFFF'
|
||||||
|
]);
|
||||||
|
|
||||||
|
if(!colorBase.hasOwnProperty(color)){
|
||||||
|
return '000000';
|
||||||
|
}
|
||||||
|
|
||||||
|
return color;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
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],
|
||||||
|
};
|
||||||
|
}
|
||||||
+494
@@ -0,0 +1,494 @@
|
|||||||
|
|
||||||
|
String.prototype.format = function() {
|
||||||
|
var args = arguments;
|
||||||
|
return this.replace(/{(\d+)}/g, function(match, number) {
|
||||||
|
return (typeof args[number] != 'undefined') ? args[number] : match;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function reloadWorldMap(option){
|
||||||
|
|
||||||
|
var defaultOption = {
|
||||||
|
isDetailMap:true, //복잡 지도, 단순 지도
|
||||||
|
clickableAll:false, //어떤 경우든 클릭을 가능하게 함. 해당 동작의 동작 가능성 여부와는 별도.
|
||||||
|
selectCallback:null, //callback을 지정시 clickable과 관계 없이 해당 함수를 실행.
|
||||||
|
hrefTemplate:'#', //도시가 클릭가능할 경우 지정할 href값. {0}은 도시 id로 변환됨
|
||||||
|
|
||||||
|
//아래부터는 post query에 들어갈 녀석
|
||||||
|
year:null, //year값, 연감등에 사용
|
||||||
|
month:null, //month값, 연감등에 사용
|
||||||
|
aux:null, //기타 넣고 싶은 값을 입력
|
||||||
|
neutralView:false, //clickable, 소속 국가, 첩보 여부 등을 반환여부를 설정
|
||||||
|
showMe:true, //반환 값에 본인이 위치한 도시 값을 반환하도록 설정. neutralView와 별개
|
||||||
|
targetJson:'j_map.php'
|
||||||
|
};
|
||||||
|
|
||||||
|
option = $.extend(defaultOption, option);
|
||||||
|
|
||||||
|
var isDetailMap = option.isDetailMap;
|
||||||
|
var clickableAll = option.clickableAll;
|
||||||
|
var selectCallback = option.selectCallback;
|
||||||
|
var hrefTemplate = option.hrefTemplate;
|
||||||
|
|
||||||
|
var cityPosition = getCityPosition();
|
||||||
|
|
||||||
|
//OBJ : startYear, year, month, cityList, nationList, spyList, shownByGeneralList, myCity
|
||||||
|
var $world_map = $('.world_map');
|
||||||
|
|
||||||
|
function setMapBackground(obj){
|
||||||
|
var startYear = obj.startYear;
|
||||||
|
var year = obj.year;
|
||||||
|
var month = obj.month;
|
||||||
|
|
||||||
|
if(isDetailMap){
|
||||||
|
$world_map.addClass('map_detail').removeClass('map_basic');
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$world_map.addClass('map_basic').removeClass('map_detail');
|
||||||
|
}
|
||||||
|
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$world_map.removeClass('map_string map_summer map_fall map_winter');
|
||||||
|
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],
|
||||||
|
level:arr[1],
|
||||||
|
state:arr[2],
|
||||||
|
nationId:(arr[3]>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 = $('<div class="city_base city_base_{0}"></div>'.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 = $('<div class="city_bg"></div>');
|
||||||
|
$cityObj.append($bgObj);
|
||||||
|
$bgObj.css({'background-image':'url(/images/b{0}.png)'.format(convColorValue(city.color))});
|
||||||
|
}
|
||||||
|
|
||||||
|
var $linkObj = $('<a class="city_link"></a>');
|
||||||
|
$linkObj.data({'text':city.text,'nation':city.nation,'id':city.id});
|
||||||
|
$cityObj.append($linkObj);
|
||||||
|
|
||||||
|
var $imgObj = $('<div class="city_img"><img src="/images/cast_{0}.gif"><div class="city_filler"></div></div>'.format(city.level));
|
||||||
|
$linkObj.append($imgObj);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if(city.state > 0){
|
||||||
|
var $stateObj = $('<div class="city_state"><img src="/images/event{0}.gif"></div>'.format(city.state));
|
||||||
|
$linkObj.append($stateObj);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(city.nationId && city.nationId > 0){
|
||||||
|
var flagType = city.supply?'f':'d';
|
||||||
|
var $flagObj = $('<div class="city_flag"><img src="/images/{0}{1}.gif"></div>'.format(flagType, convColorValue(city.color)));
|
||||||
|
if(city.isCapital){
|
||||||
|
var $capitalObj = $('<div class="city_capital"><img src="/images/event51.gif"></div>');
|
||||||
|
$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 = $('<div class="city_base city_base_{0}"></div>'.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 = $('<a class="city_link"></a>');
|
||||||
|
$linkObj.data({'text':city.text,'nation':city.nation,'id':city.id});
|
||||||
|
$cityObj.append($linkObj);
|
||||||
|
|
||||||
|
var $imgObj = $('<div class="city_img"><div class="city_filler"></div></div>');
|
||||||
|
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 = $('<div class="city_state city_state_{0}"></div>'.format(state_text));
|
||||||
|
$imgObj.append($stateObj);
|
||||||
|
}
|
||||||
|
|
||||||
|
//단순 표기에서는 깃발 여부가 없음
|
||||||
|
if(city.isCapital){
|
||||||
|
var $capitalObj = $('<div class="city_capital"></div>');
|
||||||
|
$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);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
<div class="world_map">
|
||||||
|
<div class="map_title">
|
||||||
|
<span class="map_title_text">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="map_body">
|
||||||
|
<div class="city_tooltip">
|
||||||
|
<div class="city_name">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="nation_name">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user