충돌 병함

tmp_map/goCity.php

@@ -0,0 +1,2 @@
+goCity.php, cityId is <?=$_GET['id']?>
+

tmp_map/map.css

@@ -100,11 +100,22 @@
     height:12px;
 }
 
-.world_map .my_city{
+.world_map.map_detail .my_city{
-    border:solid 0.02em red;/* Always 1px :) */
+    border:solid 1px red;
-    outline:dotted 3px 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;
@@ -209,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');
     //$parent = cssSelect('.city_base');
     width: $img.width;
@@ -218,120 +229,122 @@
     top: ($parent.height - $img.height)/2;
 }
 */
-.city_base.city_level_1 .city_img{
+
+
+.map_detail .city_base.city_level_1 .city_img{
     width:16px;
     height:15px;
     left:12px;
     top:7.5px;
 }
 
-.city_base.city_level_2 .city_img{
+.map_detail .city_base.city_level_2 .city_img{
     width:20px;
     height:14px;
     left:10px;
     top:8px;
 }
 
-.city_base.city_level_3 .city_img{
+.map_detail .city_base.city_level_3 .city_img{
     width:14px;
     height:14px;
     left:13px;
     top:8px;
 }
 
-.city_base.city_level_4 .city_img{
+.map_detail .city_base.city_level_4 .city_img{
     width:20px;
     height:15px;
     left:10px;
     top:7.5px;
 }
 
-.city_base.city_level_5 .city_img{
+.map_detail .city_base.city_level_5 .city_img{
     width:24px;
     height:16px;
     left:8px;
     top:7px;
 }
 
-.city_base.city_level_6 .city_img{
+.map_detail .city_base.city_level_6 .city_img{
     width:26px;
     height:18px;
     left:7px;
     top:6px;
 }
 
-.city_base.city_level_7 .city_img{
+.map_detail .city_base.city_level_7 .city_img{
     width:28px;
     height:20px;
     left:6px;
     top:5px;
 }
 
-.city_base.city_level_8 .city_img{
+.map_detail .city_base.city_level_8 .city_img{
     width:32px;
     height:24px;
     left:4px;
     top:3px;
 }
 
-.city_base .city_state{
+.map_detail .city_base .city_state{
     position: absolute;
     top:5px; /*TODO:도시 레벨 별로 다르게 위치 설정해볼 것*/
     left:0;
 }
 
-.city_base .city_flag{
+.map_detail .city_base .city_flag{
     position: absolute;
     width:12px;
     height:12px;
 }
 
-.city_base .city_flag > img{
+.map_detail .city_base .city_flag > img{
     width:12px;
     height:12px;
 }
 
-.city_base.city_level_1 .city_flag{
+.map_detail .city_base.city_level_1 .city_flag{
     right:-8px;
     top:-4px;
 }
 
-.city_base.city_level_2 .city_flag{
+.map_detail .city_base.city_level_2 .city_flag{
     right:-8px;
     top:-4px;
 }
 
-.city_base.city_level_3 .city_flag{
+.map_detail .city_base.city_level_3 .city_flag{
     right:-8px;
     top:-4px;
 }
 
-.city_base.city_level_4 .city_flag{
+.map_detail .city_base.city_level_4 .city_flag{
     right:-6px;
     top:-3px;
 }
 
-.city_base.city_level_5 .city_flag{
+.map_detail .city_base.city_level_5 .city_flag{
     right:-6px;
     top:-4px;
 }
 
-.city_base.city_level_6 .city_flag{
+.map_detail .city_base.city_level_6 .city_flag{
     right:-6px;
     top:-4px;
 }
 
-.city_base.city_level_7 .city_flag{
+.map_detail .city_base.city_level_7 .city_flag{
     right:-6px;
     top:-4px;
 }
 
-.city_base.city_level_8 .city_flag{
+.map_detail .city_base.city_level_8 .city_flag{
     right:-6px;
     top:-3px;
 }
 
-.city_base .city_flag .city_capital{
+.map_detail .city_base .city_flag .city_capital{
     position: absolute;
     width:10px;
     height:10px;
@@ -339,7 +352,113 @@
     right:-1px;
 }
 
-.city_base .city_flag .city_capital > img{
+.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;
 }

tmp_map/map.html

@@ -10,9 +10,44 @@
 <link href="../twe/css/normalize.css" rel="stylesheet">
 <link href="../twe/css/common.css" rel="stylesheet">
 <link href="map.css" rel="stylesheet">
+
+<script>
+function getQueryVariable(variable) {
+    var query = window.location.search.substring(1);
+    var vars = query.split('&');
+    for (var i = 0; i < vars.length; i++) {
+        var pair = vars[i].split('=');
+        if (decodeURIComponent(pair[0]) == variable) {
+            return decodeURIComponent(pair[1]);
+        }
+    }
+    return null;
+}
+
+var isDetailMap = getQueryVariable('detail');
+var clickableAll = false;
+
+if(isDetailMap === null){
+    isDetailMap = true;
+}
+else{
+    isDetailMap = (isDetailMap != '0');
+}
+
+$(function(){
+
+    function tmp(a){
+        console.log(a.text);
+        //return false;
+    }
+    reloadWorldMap(isDetailMap, clickableAll, tmp, 'goCity.php?id={0}');
+
+});
+
+</script>
 </head>
 <body style="background-color:black;">
-<div class="world_map map_detail">
+<div class="world_map">
     <div class="map_title">
         <span class="map_title_text">
         </span>

tmp_map/map.js

@@ -14,7 +14,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
 
     var cityPosition = getCityPosition();
 
-    //OBJ : startYear, year, month, cityList, nationList, spyList, ourCityList, shownByGeneralList, myCity
+    //OBJ : startYear, year, month, cityList, nationList, spyList, shownByGeneralList, myCity
     var $world_map = $('.world_map');
 
     function setMapBackground(obj){
@@ -22,6 +22,12 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
         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){
@@ -159,7 +165,6 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
             city.nation = nationObj.name;
             city.color = nationObj.color;
             city.isCapital = (nationObj.capital == city.id);
-            console.log(city.id, nationObj.capital, city.isCapital);
 
             return city;
         }
@@ -225,7 +230,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
             $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>'.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);
             
             
@@ -244,18 +249,72 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
                 }
                 $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;
     }
 
@@ -268,24 +327,95 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
 
         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;
+            }
 
-        $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'));
+        $objs.on('mouseenter', function(e){
-            $tooltip_nation.html($city.data('nation'));
+            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();
-        },function(event){
+        });
+
+        $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;
     }
 
@@ -330,6 +460,7 @@ function reloadWorldMap(isDetailMap, clickableAll, selectCallback, hrefTemplate)
         .then(saveCityInfo);    
 }
 
+<<<<<<< HEAD
 $(function(){
 
     var isDetailMap = true;
@@ -341,4 +472,6 @@ $(function(){
     }
     reloadWorldMap(isDetailMap, clickableAll, tmp, 'goCity.php?id={0}');
 
-});
+});
+=======
+>>>>>>> fd8ab0e4b0165b8ea13b39705ea58b0b76d4f7e9

tmp_map/result.json

@@ -16,7 +16,7 @@
         [10, 7, 0, 0, 2, 1],
         [11, 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],
         [15, 7, 0, 1, 7, 1],
         [16, 7, 0, 1, 8, 1],
@@ -105,7 +105,7 @@
         [3,"오","#ff0000",89]
     ],
     "spyList":[133, 892],
-    "shownByGeneralList":[65,33,73],
+    "shownByGeneralList":[3, 65,33,73],
-    "myCity":83,
+    "myCity":3,
     "myNation":2
 }