Ignore:
Timestamp:
Jul 26, 2015, 4:47:49 PM (9 years ago)
Author:
alloc
Message:

Fixes

Location:
binary-improvements/webserver
Files:
6 added
1 deleted
4 edited

Legend:

Unmodified
Added
Removed

  • binary-improvements/webserver/css/style.css

    r244 r245  
    1 /* Generic page layout */
     1/*========================================
     2-   Generic page layout
     3*/
    24
    35body {
    … …  
    1214}
    1315
    14 .adminmenu,
     16.adminnavbar,
    1517.admincontent {
    1618        position: absolute;
    … …  
    1921}
    2022
    21 .adminmenu {
     23
     24/*========================================
     25-   Menu bar
     26*/
     27
     28.adminnavbar {
    2229        width: 200px;
    2330        left: 0;
    … …  
    2532}
    2633
    27 .adminmenu .current_tab {
     34.adminnavbar > div {
     35        margin: 5px;
     36}
     37
     38/*----------------------------------------
     39-   Menu entries
     40*/
     41
     42.adminnavbar ul {
     43        margin-top: 5px;
     44}
     45
     46.adminnavbar #adminmenu .menu_button {
     47        display: none;
     48}
     49
     50.adminnavbar #adminmenu .menu_button.allowed {
     51        display: inline;
     52}
     53
     54.adminnavbar #adminmenu .menu_button a {
     55        color: #000;
     56        text-decoration: none;
     57}
     58
     59.adminnavbar #adminmenu .current_tab {
    2860        font-weight: bold;
    2961        text-transform: uppercase;
    3062}
    3163
    32 .adminmenu .menu_button a {
     64/*----------------------------------------
     65-   Server stats
     66*/
     67
     68.adminnavbar #serverstats {
     69        margin-bottom: 20px;
     70        display: none;
    3371        color: #000;
    34 }
    35 
    36 .adminmenu #userstate {
    37         position: absolute;
    38         bottom: 5px;
    39         left: 5px;
    40         right: 5px;
     72        text-decoration: none;
     73}
     74
     75.adminnavbar #serverstats #stats_time {
     76        white-space: nowrap;
     77}
     78
     79/*----------------------------------------
     80-   Session state box
     81*/
     82
     83.adminnavbar #userstate {
     84        position: absolute;
     85        bottom: 0px;
     86        left: 0px;
     87        right: 0px;
    4188        background-color: green;
    4289}
    4390
    44 .adminmenu #userstate #username {
     91.adminnavbar #userstate #username {
    4592        padding-left: 10px;
    4693}
    4794
    48 .adminmenu #userstate > div {
    49         display: none;
    50 }
     95.adminnavbar #userstate > div {
     96        display: none;
     97}
     98
     99
     100/*========================================
     101-   Content area
     102*/
    51103
    52104.admincontent {
    … …  
    54106        right: 0;
    55107        left: 200px;
    56         background-color: #fff;
     108        background-color: #a04;
     109}
     110
     111.admincontent #nopermissionwarning {
     112        margin: 20px 50px;
    57113}
    58114
    … …  
    78134
    79135
    80 /* Inventory dialog overlay */
     136/*========================================
     137-   Inventory dialog
     138*/
    81139
    82140#info {
    … …  
    91149        margin: 0px;
    92150        border-collapse: collapse;
    93         background-color: #303030;
    94151}
    95152.invField {
    … …  
    99156        margin: 0px;
    100157        border: 1px solid gray;
     158        background-color: #303030;
    101159        background-size: 58px;
    102160        background-repeat: no-repeat;
    … …  
    112170                1px 1px 0 #000;
    113171}
     172
     173#equipmentTable .invFieldText {
     174        display: none;
     175}
     176
    114177.inventoryButton {
    115178        color: #00ff00;
    … …  
    126189        z-index:1010 !important;
    127190}
     191
    128192
    129193

  • binary-improvements/webserver/index.html

    r244 r245  
    3333        <script type="text/javascript" src="js/leaflet.control.coordinates.js"></script>
    3434        <script type="text/javascript" src="js/leaflet.control.reloadtiles.js"></script>
    35         <script type="text/javascript" src="js/leaflet.control.gametime.js"></script>
     35        <script type="text/javascript" src="js/leaflet.layer.landclaims.js"></script>
     36        <script type="text/javascript" src="js/inventory_dialog.js"></script>
    3637        <script type="text/javascript" src="js/util.js"></script>
     38        <script type="text/javascript" src="js/stats.js"></script>
     39        <script type="text/javascript" src="js/tabs.js"></script>
     40        <script type="text/javascript" src="js/permissions.js"></script>
     41        <script type="text/javascript" src="js/map.js"></script>
    3742
    3843        <!-- Own stylesheet -->
    … …  
    4449
    4550        <div class="adminwrapper">
    46                 <div class="adminmenu">
    47                         <ul>
    48                                 <li><a href="#tab_map" data-permission="web.map">Map</a></li>
    49                                 <li><a href="#tab_log" data-permission="web.log">Log</a></li>
    50                         </ul>
     51                <div class="adminnavbar">
     52                        <div id="serverstats">
     53                                <span id="stats_time">-</span><br/>
     54                                <span id="stats_players">-</span> Players
     55                        </div>
     56
     57                        <div id="adminmenu">
     58                                Menu
     59                                <ul>
     60                                        <li><a href="#tab_map" data-permission="web.map">Map</a></li>
     61                                        <li><a href="#tab_log" data-permission="web.log">Log</a></li>
     62                                </ul>
     63                        </div>
    5164                       
    5265                        <div id="userstate">
    … …  
    6780                </div>
    6881                <div class="admincontent">
     82                        <h1 id="nopermissionwarning" style="display:none">An error occured or you do not have any permissions on this WebPanel. Log in with the link on the lower left!</h1>
    6983                        <div id="tab_map" class="adminmap"></div>
    7084                        <div id="tab_log" class="adminlog"></div>
    … …  
    7488
    7589        <div id="playerInventoryDialog" title="Player inventory">
    76                 Player: <span id="invPlayerName"></span>
    77                 <table class="invTable" id="bagTable">
     90                Player: <span id="invPlayerName"></span><br/>
     91                <table>
     92                        <tr>
     93                                <td>
     94                                        Inventory:<br/>
     95                                        <table class="invTable" id="bagTable">
     96                                        </table>
     97                                </td>
     98                                <td rowspan="2">
     99                                        Equipment:<br/>
     100                                        <table class="invTable" id="equipmentTable">
     101                                        </table>
     102                                </td>
     103                        </tr>
     104                        <tr>
     105                                <td>
     106                                        Belt:<br/>
     107                                        <table class="invTable" id="beltTable">
     108                                        </table>
     109                                </td>
     110                        </tr>
    78111                </table>
    79                 <br/>
    80                 <table class="invTable" id="beltTable">
    81                 </table>
     112
    82113        </div>
    83114       

  • binary-improvements/webserver/js/index.js

    r244 r245  
    1 // ===============================================================================================
    2 // Constants
     1InitializeTabs ();
     2SetupInventoryDialog ();
     3InitPermissions ();
    34
    4 var mapinfo = {
    5         regionsize: 512,
    6         chunksize: 16,
    7         tilesize: 128,
    8         maxzoom: 4
    9 }
    10 
    11 var BAG_COLS = 8;
    12 var BAG_ROWS = 4;
    13 var BELT_COLS = 8;
    14 var INV_ITEM_WIDTH = 58;
    15 var INV_ITEM_HEIGHT = 40;
    16 
    17 var userdata = false;
    18 
    19 
    20 function initMap() {
    21         // ===============================================================================================
    22         // 7dtd coordinate transformations
    23 
    24         SDTD_Projection = {
    25                 project: function (latlng) {
    26                         return new L.Point(
    27                                 (latlng.lat) / Math.pow(2, mapinfo.maxzoom),
    28                                 (latlng.lng) / Math.pow(2, mapinfo.maxzoom) );
    29                 },
    30                
    31                 unproject: function (point) {
    32                         return new L.LatLng(
    33                                 point.x * Math.pow(2, mapinfo.maxzoom),
    34                                 point.y * Math.pow(2, mapinfo.maxzoom) );
    35                 }
    36         };
    37 
    38         SDTD_CRS = L.extend({}, L.CRS.Simple, {
    39                 projection: SDTD_Projection,
    40                 transformation: new L.Transformation(1, 0, -1, 0),
    41 
    42                 scale: function (zoom) {
    43                         return Math.pow(2, zoom);
    44                 }
    45         });
    46 
    47 
    48 
    49 
    50         // ===============================================================================================
    51         // Map and basic tile layers
    52 
    53         var initTime = new Date().getTime();
    54 
    55         map = L.map('tab_map', {
    56                 zoomControl: false, // Added by Zoomslider
    57                 zoomsliderControl: true,
    58                 attributionControl: false,
    59                 crs: SDTD_CRS
    60         }).setView([0, 0], Math.max(0, mapinfo.maxzoom - 5));
    61 
    62         var tileLayer = L.tileLayer('../map/{z}/{x}/{y}.png?t={time}', {
    63                 maxZoom: mapinfo.maxzoom + 1,
    64                 minZoom: Math.max(0, mapinfo.maxzoom - 5),
    65                 maxNativeZoom: mapinfo.maxzoom,
    66                 tileSize: mapinfo.tilesize,
    67                 continuousWorld: true,
    68                 tms: true,
    69                 unloadInvisibleTiles: false,
    70                 time: initTime
    71         });
    72        
    73         // TileLayer w/ TMS=true fix for zoomlevel >= 8
    74         tileLayer._getWrapTileNum = function () {
    75                 return L.point(0, 0);
    76         };
    77 
    78         var tileLayerMiniMap = L.tileLayer('../map/{z}/{x}/{y}.png?t={time}', {
    79                 maxZoom: mapinfo.maxzoom,
    80                 minZoom: 0,
    81                 maxNativeZoom: mapinfo.maxzoom,
    82                 tileSize: mapinfo.tilesize,
    83                 continuousWorld: true,
    84                 tms: true,
    85                 unloadInvisibleTiles: false,
    86                 time: initTime
    87         });
    88 
    89 
    90 
    91 
    92 
    93 
    94 
    95         // ===============================================================================================
    96         // Overlays and controls
    97 
    98         var playersOnlineMarkerGroup = L.layerGroup();
    99         var playersOfflineMarkerGroup = L.markerClusterGroup({
    100                 maxClusterRadius: function(zoom) { return zoom == mapinfo.maxzoom ? 10 : 50; }
    101         });
    102 
    103 
    104         var landClaimsGroup = L.layerGroup();
    105         var landClaimsClusterGroup = L.markerClusterGroup({
    106                 disableClusteringAtZoom: mapinfo.maxzoom,
    107                 singleMarkerMode: true,
    108                 maxClusterRadius: 50
    109         });
    110         var landClaimsRectGroup = L.layerGroup();
    111         landClaimsGroup.addLayer(landClaimsClusterGroup);
    112         landClaimsGroup.addLayer(landClaimsRectGroup);
    113         var maxZoomForCluster = 4;
    114 
    115         var baseLayers = {
    116                 //"Map": tileLayer
    117         };
    118 
    119         var layerControl = L.control.layers(baseLayers, null, {
    120                 collapsed: false
    121         });
    122        
    123         var layerCount = 0;
    124 
    125 
    126         if (hasPermission ("web.map")) {
    127                 tileLayer.addTo(map);
    128                 new L.Control.Coordinates({}).addTo(map);
    129                 new L.Control.ReloadTiles({layers: [tileLayer, tileLayerMiniMap]}).addTo(map);
    130                 layerControl.addOverlay (GetRegionLayer (mapinfo), "Region files");
    131                 var miniMap = new L.Control.MiniMap(tileLayerMiniMap, {
    132                         zoomLevelOffset: -6,
    133                         toggleDisplay: true
    134                 }).addTo(map);
    135                
    136                 if (hasPermission ("webapi.getstats")) {
    137                         new L.Control.GameTime({}).addTo(map);
    138                 }
    139         }
    140         if (hasPermission ("webapi.getlandclaims")) {
    141                 layerControl.addOverlay (landClaimsGroup, "Land claims");
    142                 layerCount++;
    143         }
    144         if (hasPermission ("webapi.getplayerslocation")) {
    145                 layerControl.addOverlay (playersOfflineMarkerGroup, "Players (offline) (<span id='mapControlOfflineCount'>0</span>)");
    146                 layerControl.addOverlay (playersOnlineMarkerGroup, "Players (online) (<span id='mapControlOnlineCount'>0</span>)");
    147                 layerCount++;
    148         }
    149 
    150         if (layerCount > 0) {
    151                 layerControl.addTo(map);
    152         }
    153 
    154 
    155         var playersMappingList = {};
    156 
    157 
    158 
    159         // ===============================================================================================
    160         // Inventory dialog
    161 
    162         var showInv = function(steamid) {
    163                 $.getJSON( "../api/getplayerinventory", { steamid: steamid  })
    164                 .done(function(data) {
    165                         $("#invPlayerName").text(playersMappingList[steamid].name);
    166                         for (var y = 0; y < BAG_ROWS; y++) {
    167                                 for (var x = 0; x < BAG_COLS; x++) {
    168                                         if (data.bag[y*BAG_COLS+x].count > 0) {
    169                                                 $("#bagField"+x+"_"+y).attr("style", "background-image: url(../itemicons/" + data.bag[y*BAG_COLS+x].name + ".png);").attr("title", data.bag[y*BAG_COLS+x].name);
    170                                                 $("#bagFieldText"+x+"_"+y).text(data.bag[y*BAG_COLS+x].count);
    171                                         } else {
    172                                                 $("#bagField"+x+"_"+y).attr("style", "background-image: none;");
    173                                                 $("#bagFieldText"+x+"_"+y).text("");
    174                                         }
    175                                 }
    176                         }
    177 
    178                         for (var x = 0; x < BELT_COLS; x++) {
    179                                 if (data.belt[x].count > 0) {
    180                                         $("#beltField"+x).attr("style", "background-image: url(../itemicons/" + data.belt[x].name + ".png);").attr("title", data.belt[x].name);
    181                                         $("#beltFieldText"+x).text(data.belt[x].count);
    182                                 } else {
    183                                         $("#beltField"+x).attr("style", "background-image: none;");
    184                                         $("#beltFieldText"+x).text("");
    185                                 }
    186                         }
    187 
    188                         $( "#playerInventoryDialog" ).css("z-index", "1010").dialog({
    189                                 modal: true,
    190                                 width: BAG_COLS*(INV_ITEM_WIDTH+14) + 20,
    191                                 buttons: {
    192                                         Ok: function() {
    193                                                 $( this ).dialog( "close" );
    194                                         }
    195                                 }
    196                         });
    197                 })
    198                 .fail(function(jqxhr, textStatus, error) {
    199                         console.log("Error fetching player inventory");
    200                 })
    201                 .always(function() {
    202                 });
    203         };
    204 
    205         for (var y = 0; y < BAG_ROWS; y++) {
    206                 $("#bagTable").append("<tr id=\"bagRow"+y+"\"></tr>");
    207                 for (var x = 0; x < BAG_COLS; x++) {
    208                         $("#bagRow"+y).append(
    209                                 "<td class=\"invField\" id=\"bagField"+x+"_"+y+"\">" +
    210                                 "<span class=\"invFieldText\" id=\"bagFieldText"+x+"_"+y+"\"></span>" +
    211                                 "</td>");
    212                 }
    213         }
    214 
    215         $("#beltTable").append("<tr id=\"beltRow0\"></tr>");
    216         for (var x = 0; x < BELT_COLS; x++) {
    217                 $("#beltRow0").append(
    218                         "<td class=\"invField\" id=\"beltField"+x+"\">" +
    219                         "<span class=\"invFieldText\" id=\"beltFieldText"+x+"\"></span>" +
    220                         "</td>");
    221         }
    222 
    223 
    224 
    225         // ===============================================================================================
    226         // Player markers
    227 
    228         $(".leaflet-popup-pane").on('click.action', '.inventoryButton', function(event) {
    229                 showInv($(this).data('steamid'));
    230         });
    231 
    232         var setPlayerMarkers = function(data) {
    233                 var online = 0;
    234                 var offline = 0;
    235                 $.each( data, function( key, val ) {
    236                         var marker;
    237                         if (playersMappingList.hasOwnProperty(val.steamid)) {
    238                                 marker = playersMappingList[val.steamid].currentPosMarker;
    239                                 marker.setLatLng([val.position.x, val.position.z]);
    240                         } else {
    241                                 marker = L.marker([val.position.x, val.position.z]).bindPopup(
    242                                         "Player: " + val.name +
    243                                         (hasPermission ("webapi.getplayerinventory") ?
    244                                                 "<br/><a class='inventoryButton' data-steamid='"+val.steamid+"'>Show inventory</a>"
    245                                                 : "")
    246                                 );
    247                                 playersMappingList[val.steamid] = { online: !val.online };
    248                         }
    249                         if (playersMappingList[val.steamid].online != val.online) {
    250                                 if (val.online) {
    251                                         marker.setOpacity(1.0);
    252                                         playersOfflineMarkerGroup.removeLayer(marker);
    253                                         playersOnlineMarkerGroup.addLayer(marker);
    254                                 } else {
    255                                         marker.setOpacity(0.5);
    256                                         playersOnlineMarkerGroup.removeLayer(marker);
    257                                         playersOfflineMarkerGroup.addLayer(marker);
    258                                 }
    259                         }
    260                         val.currentPosMarker = marker;
    261                         playersMappingList[val.steamid] = val;
    262                
    263                         if (val.online)
    264                                 online++;
    265                         else
    266                                 offline++;
    267                 });
    268                 $( "#mapControlOnlineCount" ).text( online );
    269                 $( "#mapControlOfflineCount" ).text( offline );
    270         }
    271 
    272         var updatePlayerEvent = function() {
    273                 $.getJSON( "../api/getplayerslocation")
    274                 .done(setPlayerMarkers)
    275                 .fail(function(jqxhr, textStatus, error) {
    276                         console.log("Error fetching players list");
    277                 })
    278                 .always(function() {
    279                         window.setTimeout(updatePlayerEvent, 2000);
    280                 });
    281         }
    282 
    283         if (hasPermission ("webapi.getplayerslocation")) {
    284                 window.setTimeout(updatePlayerEvent, 0);
    285         }
    286 
    287 
    288 
    289         // ===============================================================================================
    290         // Land claim markers
    291 
    292         var setLandClaims = function(data) {
    293                 landClaimsClusterGroup.clearLayers();
    294                 landClaimsRectGroup.clearLayers();
    295        
    296                 var claimPower = Math.floor(Math.log(data.claimsize) / Math.LN2);
    297                 var maxClusterZoomUnlimited = mapinfo.maxzoom - (claimPower - 3);
    298                 var maxClusterZoomLimitedMax = Math.min(maxClusterZoomUnlimited, mapinfo.maxzoom+1);
    299                 maxZoomForCluster = Math.max(maxClusterZoomLimitedMax, 0);
    300        
    301                 checkClaimClustering({target: map});
    302 
    303                 var sizeHalf = Math.floor(data.claimsize / 2);
    304 
    305                 $.each( data.claimowners, function( key, val ) {
    306                         var steamid = val.steamid;
    307                         var active = val.claimactive;
    308                         var color = active ? "#55ff55" : "#ff0000";
    309                
    310                         $.each( val.claims, function( key, val ) {
    311                                 var pos = L.latLng(val.x, val.z);
    312                                 var bounds = L.latLngBounds(L.latLng(val.x - sizeHalf, val.z - sizeHalf), L.latLng(val.x + sizeHalf, val.z + sizeHalf));
    313                                 var r = L.rectangle(bounds, {color: color, weight: 1, opacity: 0.8, fillOpacity: 0.15});
    314                                 var m = L.marker(pos, { clickable: false, keyboard: false, zIndexOffset:-1000, iconSize: [0,0], icon: L.divIcon({className: 'invisIcon', iconSize:[0,0]}) });
    315                                 if (playersMappingList.hasOwnProperty(steamid)) {
    316                                         var name = playersMappingList[steamid].name;
    317                                 } else {
    318                                         var name = "unknown"
    319                                 }
    320                                 r.bindPopup("Owner: " + name + " ("+steamid+")<br/>Position: " + val.x + " / " + val.y + " / " + val.z);
    321                                 landClaimsRectGroup.addLayer(r);
    322                                 landClaimsClusterGroup.addLayer(m);
    323                         });
    324                 });
    325         }
    326 
    327         var updateClaimsEvent = function() {
    328                 $.getJSON( "../api/getlandclaims")
    329                 .done(setLandClaims)
    330                 .fail(function(jqxhr, textStatus, error) {
    331                         console.log("Error fetching land claim list");
    332                 })
    333                 .always(function() {
    334                         //updateClaimTimer = window.setTimeout(updateClaimsEvent, 3000);
    335                 });
    336         }
    337 
    338 
    339 
    340         // ===============================================================================================
    341         // Layer events
    342 
    343         var updateClaimTimer;
    344         map.on('overlayadd', function(e) {
    345                 if (e.layer == landClaimsGroup) {
    346                         updateClaimsEvent();
    347                 }
    348         });
    349 
    350         map.on('overlayremove', function(e) {
    351                 if (e.layer == landClaimsGroup) {
    352                         //window.clearTimeout(updateClaimTimer);
    353                 }
    354         });
    355 
    356         var checkClaimClustering = function(e) {
    357                 if (e.target._zoom >= maxZoomForCluster) {
    358                         landClaimsGroup.removeLayer(landClaimsClusterGroup);   
    359                 } else {
    360                         landClaimsGroup.addLayer(landClaimsClusterGroup);       
    361                 }
    362         };
    363 
    364         map.on('zoomend', checkClaimClustering);
    365 
    366 }
    367 
    368 
    369 
    370 
    371 function doTabs () {
    372         $(".adminmenu > ul > li").addClass ("menu_button");
    373         $(".admincontent > div").addClass ("contenttab");
    374         $(".adminmenu .menu_button").first ().addClass ("current_tab");
    375         $(".menu_button").on ('click.action', null, function (event) {
    376                 var menuElement = $(this);
    377                 var linkElement = menuElement.children ("a");
    378                 var linkName = linkElement.attr ("href");
    379                
    380                 $("*").removeClass ("current_tab");
    381                 menuElement.addClass ("current_tab");
    382                 $(linkName).addClass ("current_tab");
    383         });
    384        
    385         $(".adminmenu .menu_button").first ().click ();
    386 }
    387 
    388 function initMapInfo () {
    389         $.getJSON( "../map/mapinfo.json")
    390         .done(function(data) {
    391                 mapinfo.tilesize = data.blockSize;
    392                 mapinfo.maxzoom = data.maxZoom;
    393         })
    394         .fail(function(jqxhr, textStatus, error) {
    395                 console.log("Error fetching map information");
    396         })
    397         .always(function() {
    398                 initMap();
    399         });
    400 }
    401 
    402 function initUser () {
    403         $.getJSON( "../userstatus")
    404         .done(function(data) {
    405                 userdata = data;
    406                
    407                 var userdataDiv = $("#userstate");
    408                 if (userdata.loggedin == true) {
    409                         var data = userdataDiv.children ("#userstate_loggedin");
    410                         data.attr ("style", "display: block");
    411                         data.children ("#username").attr ("href", "http://steamcommunity.com/profiles/" + userdata.username);
    412                         data.children ("#username").html (userdata.username);
    413                 } else {
    414                         var data = userdataDiv.children ("#userstate_loggedout");
    415                         data.attr ("style", "display: block");
    416                 }
    417 
    418                 initMapInfo ();
    419         })
    420         .fail(function(jqxhr, textStatus, error) {
    421                 console.log("Error fetching user data");
    422         })
    423 }
    424 
    425 doTabs ();
    426 initUser ();

  • binary-improvements/webserver/js/util.js

    r244 r245  
    1111}
    1212
    13 function hasPermission (modulename) {
    14         for (var i = 0; i < userdata.permissions.length; i++) {
    15                 if (userdata.permissions [i].module == modulename) {
    16                         return userdata.permissions [i].allowed;
    17                 }
    18         }
    19         return false;
    20 }
    21 
Note: See TracChangeset for help on using the changeset viewer.