Ignore:
Timestamp:
Sep 4, 2014, 5:45:22 PM (11 years ago)
Author:
alloc
Message:

fixes

Location:
binary-improvements/webserver
Files:
1226 added
3 edited

Legend:

Unmodified
Added
Removed

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

    r153 r163  
    11html, body {
    2   height: 100%;
    3   margin: 0px;
    4   padding: 0px;
    5   background-color: #230000;
     2        height: 100%;
     3        margin: 0px;
     4        padding: 0px;
     5        background-color: #230000;
    66}
    77#map {
    8   height: 100%;
    9   margin: 0px;
    10   padding: 0px;
    11   background-color: #230000;
     8        height: 100%;
     9        margin: 0px;
     10        padding: 0px;
     11        background-color: #230000;
    1212}
    1313#info {
    14   background-color: #aaaaaa;
    15   position: absolute;
    16   bottom: 10px;
    17   left: 10px;
     14        background-color: #aaaaaa;
     15        position: absolute;
     16        bottom: 10px;
     17        left: 10px;
    1818}
     19.invTable {
     20        table-layout: fixed;
     21        padding: 0px;
     22        margin: 0px;
     23        border-collapse: collapse;
     24        background-color: #303030;
     25}
     26.invField {
     27        width: 60px;
     28        height: 42px;
     29        padding: 1px 4px;
     30        margin: 0px;
     31        border: 1px solid gray;
     32        background-size: 58px;
     33        background-repeat: no-repeat;
     34        background-position: center;
     35        vertical-align: bottom;
     36        text-align: right;
     37        font-size: 14pt;
     38        color: #ffffff;
     39        text-shadow:
     40                -1px -1px 0 #000, 
     41                1px -1px 0 #000,
     42                -1px 1px 0 #000,
     43                1px 1px 0 #000;
     44}
     45

  • binary-improvements/webserver/index.html

    r153 r163  
    66        <link rel="stylesheet prefetch" href="leaflet/leaflet.css">
    77        <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
     8        <link rel="stylesheet" href="jquery-ui/jquery-ui.min.css" type="text/css" />
    89        <script type="text/javascript" src="leaflet/leaflet.js"></script>
    910        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
     11        <script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>
    1012        </head>
    1113<body>
    … …  
    1416                MouseCoords: <span id="pos"></span>
    1517        </div>
     18        <div id="dialog-message" title="Player inventory" style="display:none">
     19                Player: <span id="invPlayerName"></span>
     20                <table class="invTable" id="bagTable">
     21                </table>
     22                <br/>
     23                <table class="invTable" id="beltTable">
     24                </table>
     25        </div>
    1626
    1727        <script type="text/javascript" src="js/index.js"></script>

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

    r157 r163  
    33var TILESIZE = 128;
    44var MAXZOOM = 4;
     5
     6var BAG_COLS = 8;
     7var BAG_ROWS = 4;
     8var BELT_COLS = 8;
     9var INV_ITEM_WIDTH = 58;
     10var INV_ITEM_HEIGHT = 40;
    511
    612SDTD_Projection = {
    … …  
    148154var playersMappingList = {};
    149155
     156var showInv = function(steamid) {
     157        $.getJSON( "../api/getplayerinventory", { steamid: steamid  })
     158        .done(function(data) {
     159                $("#invPlayerName").text(playersMappingList[steamid].name);
     160                for (var y = 0; y < BAG_ROWS; y++) {
     161                        for (var x = 0; x < BAG_COLS; x++) {
     162                                if (data.bag[y*BAG_COLS+x].count > 0) {
     163                                        $("#bagField"+x+"_"+y).attr("style", "background-image: url(itemimages/" + data.bag[y*BAG_COLS+x].name + ".png);");
     164                                        $("#bagFieldText"+x+"_"+y).text(data.bag[y*BAG_COLS+x].count);
     165                                } else {
     166                                        $("#bagField"+x+"_"+y).attr("style", "background-image: none;");
     167                                        $("#bagFieldText"+x+"_"+y).text("");
     168                                }
     169                        }
     170                }
     171
     172                for (var x = 0; x < BELT_COLS; x++) {
     173                        if (data.belt[x].count > 0) {
     174                                $("#beltField"+x).attr("style", "background-image: url(itemimages/" + data.belt[x].name + ".png);");
     175                                $("#beltFieldText"+x).text(data.belt[x].count);
     176                        } else {
     177                                $("#beltField"+x).attr("style", "background-image: none;");
     178                                $("#beltFieldText"+x).text("");
     179                        }
     180                }
     181
     182                $( "#dialog-message" ).dialog({
     183                        modal: true,
     184                        width: BAG_COLS*INV_ITEM_WIDTH + 60,
     185                        buttons: {
     186                                Ok: function() {
     187                                        $( this ).dialog( "close" );
     188                                }
     189                        }
     190                });
     191        })
     192        .fail(function() {
     193                console.log("Error fetching player inventory");
     194        })
     195        .always(function() {
     196        });
     197};
     198
     199for (var y = 0; y < BAG_ROWS; y++) {
     200        $("#bagTable").append("<tr id=\"bagRow"+y+"\"></tr>");
     201        for (var x = 0; x < BAG_COLS; x++) {
     202                $("#bagRow"+y).append(
     203                        "<td class=\"invField\" id=\"bagField"+x+"_"+y+"\">" +
     204                        "<span class=\"invFieldText\" id=\"bagFieldText"+x+"_"+y+"\"></span>" +
     205                        "</td>");
     206        }
     207}
     208
     209$("#beltTable").append("<tr id=\"beltRow0\"></tr>");
     210for (var x = 0; x < BELT_COLS; x++) {
     211        $("#beltRow0").append(
     212                "<td class=\"invField\" id=\"beltField"+x+"\">" +
     213                "<span class=\"invFieldText\" id=\"beltFieldText"+x+"\"></span>" +
     214                "</td>");
     215}
     216
    150217var setPlayerMarkers = function(data) {
    151218        var online = 0;
    … …  
    157224                        marker.setLatLng([val.position.z, val.position.x]);
    158225                } else {
    159                         marker = L.marker([val.position.z, val.position.x]).bindPopup(val.name);
     226                        marker = L.marker([val.position.z, val.position.x]).bindPopup(
     227                                "Player: " + val.name + "<br/>" +
     228                                "<a onClick='showInv(\""+val.steamid+"\")'>Show inventory</a>"
     229                        );
    160230                        playersMappingList[val.steamid] = { online: !val.online };
    161231                }
Note: See TracChangeset for help on using the changeset viewer.