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

단순 모드도 추가

Browse Source
This commit is contained in:
Hide_D
2018-01-31 17:24:45 +09:00
parent 9efb83323a
commit 1352009350
4 changed files with 212 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tmp_map/map.css
+144 -24
View File
@@ -100,10 +100,22 @@
height:12px; height:12px;
} }
.world_map .my_city{ .world_map.map_detail .my_city{
outline:dotted 3px red; 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{ .city_base{
position:absolute; position:absolute;
width:40px; width:40px;
@@ -208,7 +220,7 @@
} }
/* /*
.city_base.city_level_{0} .city_img{ .map_detail .city_base.city_level_{0} .city_img{
//$img = loadImg('/images/cast_{0}.gif'); //$img = loadImg('/images/cast_{0}.gif');
//$parent = cssSelect('.city_base'); //$parent = cssSelect('.city_base');
width: $img.width; width: $img.width;
@@ -217,120 +229,122 @@
top: ($parent.height - $img.height)/2; top: ($parent.height - $img.height)/2;
} }
*/ */
.city_base.city_level_1 .city_img{
.map_detail .city_base.city_level_1 .city_img{
width:16px; width:16px;
height:15px; height:15px;
left:12px; left:12px;
top:7.5px; top:7.5px;
} }
.city_base.city_level_2 .city_img{ .map_detail .city_base.city_level_2 .city_img{
width:20px; width:20px;
height:14px; height:14px;
left:10px; left:10px;
top:8px; top:8px;
} }
.city_base.city_level_3 .city_img{ .map_detail .city_base.city_level_3 .city_img{
width:14px; width:14px;
height:14px; height:14px;
left:13px; left:13px;
top:8px; top:8px;
} }
.city_base.city_level_4 .city_img{ .map_detail .city_base.city_level_4 .city_img{
width:20px; width:20px;
height:15px; height:15px;
left:10px; left:10px;
top:7.5px; top:7.5px;
} }
.city_base.city_level_5 .city_img{ .map_detail .city_base.city_level_5 .city_img{
width:24px; width:24px;
height:16px; height:16px;
left:8px; left:8px;
top:7px; top:7px;
} }
.city_base.city_level_6 .city_img{ .map_detail .city_base.city_level_6 .city_img{
width:26px; width:26px;
height:18px; height:18px;
left:7px; left:7px;
top:6px; top:6px;
} }
.city_base.city_level_7 .city_img{ .map_detail .city_base.city_level_7 .city_img{
width:28px; width:28px;
height:20px; height:20px;
left:6px; left:6px;
top:5px; top:5px;
} }
.city_base.city_level_8 .city_img{ .map_detail .city_base.city_level_8 .city_img{
width:32px; width:32px;
height:24px; height:24px;
left:4px; left:4px;
top:3px; top:3px;
} }
.city_base .city_state{ .map_detail .city_base .city_state{
position: absolute; position: absolute;
top:5px; /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/ top:5px; /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
left:0; left:0;
} }
.city_base .city_flag{ .map_detail .city_base .city_flag{
position: absolute; position: absolute;
width:12px; width:12px;
height:12px; height:12px;
} }
.city_base .city_flag > img{ .map_detail .city_base .city_flag > img{
width:12px; width:12px;
height:12px; height:12px;
} }
.city_base.city_level_1 .city_flag{ .map_detail .city_base.city_level_1 .city_flag{
right:-8px; right:-8px;
top:-4px; top:-4px;
} }
.city_base.city_level_2 .city_flag{ .map_detail .city_base.city_level_2 .city_flag{
right:-8px; right:-8px;
top:-4px; top:-4px;
} }
.city_base.city_level_3 .city_flag{ .map_detail .city_base.city_level_3 .city_flag{
right:-8px; right:-8px;
top:-4px; top:-4px;
} }
.city_base.city_level_4 .city_flag{ .map_detail .city_base.city_level_4 .city_flag{
right:-6px; right:-6px;
top:-3px; top:-3px;
} }
.city_base.city_level_5 .city_flag{ .map_detail .city_base.city_level_5 .city_flag{
right:-6px; right:-6px;
top:-4px; top:-4px;
} }
.city_base.city_level_6 .city_flag{ .map_detail .city_base.city_level_6 .city_flag{
right:-6px; right:-6px;
top:-4px; top:-4px;
} }
.city_base.city_level_7 .city_flag{ .map_detail .city_base.city_level_7 .city_flag{
right:-6px; right:-6px;
top:-4px; top:-4px;
} }
.city_base.city_level_8 .city_flag{ .map_detail .city_base.city_level_8 .city_flag{
right:-6px; right:-6px;
top:-3px; top:-3px;
} }
.city_base .city_flag .city_capital{ .map_detail .city_base .city_flag .city_capital{
position: absolute; position: absolute;
width:10px; width:10px;
height:10px; height:10px;
@@ -338,7 +352,113 @@
right:-1px; right:-1px;
} }
.city_base .city_flag .city_capital > img{ .map_detail .city_base .city_flag .city_capital > img{
width:10px; width:10px;
height: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;
} }
tmp_map/map.html
+1 -1
View File
@@ -12,7 +12,7 @@
<link href="map.css" rel="stylesheet"> <link href="map.css" rel="stylesheet">
</head> </head>
<body style="background-color:black;"> <body style="background-color:black;">
<div class="world_map map_detail"> <div class="world_map">
<div class="map_title"> <div class="map_title">
<span class="map_title_text"> <span class="map_title_text">
</span> </span>
tmp_map/map.js
+64 -5
View File
@@ -22,6 +22,12 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
var year = obj.year; var year = obj.year;
var month = obj.month; 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'); var $map_title = $('.map_title_text');
if(year < startYear + 1){ if(year < startYear + 1){
@@ -224,7 +230,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
$linkObj.data({'text':city.text,'nation':city.nation,'id':city.id}); $linkObj.data({'text':city.text,'nation':city.nation,'id':city.id});
$cityObj.append($linkObj); $cityObj.append($linkObj);
var $imgObj = $('<div class="city_img"><img src="/images/cast_{0}.gif"></div>'.format(city.level)); var $imgObj = $('<div class="city_img"><img src="/images/cast_{0}.gif"><div class="city_filler"></div></div>'.format(city.level));
$linkObj.append($imgObj); $linkObj.append($imgObj);
@@ -243,20 +249,73 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
} }
$imgObj.append($flagObj); $imgObj.append($flagObj);
} }
$map_body.append($cityObj); $map_body.append($cityObj);
}); });
$world_map.find('.city_base_{0} .city_img'.format(myCity)).addClass('my_city'); $world_map.find('.city_base_{0} .city_filler'.format(myCity)).addClass('my_city');
return obj; return obj;
} }
function drawBasicWorldMap(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){
console.log(city.state);
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; return obj;
} }
@@ -405,7 +464,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
$(function(){ $(function(){
var isDetailMap = true; var isDetailMap = false;
var clickableAll = false; var clickableAll = false;
function tmp(a){ function tmp(a){
tmp_map/result.json
+3 -3
View File
@@ -16,7 +16,7 @@
[10, 7, 0, 0, 2, 1], [10, 7, 0, 0, 2, 1],
[11, 7, 0, 0, 2, 1], [11, 7, 0, 0, 2, 1],
[12, 7, 0, 0, 2, 1], [12, 7, 0, 0, 2, 1],
[13, 7, 0, 1, 6, 1], [13, 7, 43, 1, 6, 1],
[14, 7, 0, 1, 6, 0], [14, 7, 0, 1, 6, 0],
[15, 7, 0, 1, 7, 1], [15, 7, 0, 1, 7, 1],
[16, 7, 0, 1, 8, 1], [16, 7, 0, 1, 8, 1],
@@ -105,7 +105,7 @@
[3,"오","#ff0000",89] [3,"오","#ff0000",89]
], ],
"spyList":[133, 892], "spyList":[133, 892],
"shownByGeneralList":[65,33,73], "shownByGeneralList":[3, 65,33,73],
"myCity":83, "myCity":3,
"myNation":2 "myNation":2
} }