Developing your own interface!

---

Develop your own interface!

---

This is not much of a tutorial because most of it is just a look on how data is received... but there are still a few things you need to do to make things working.

1. If you want your interface to launch directly on application launch, it must replace the current interface file with the name TF2LocalStat.html and must be kept within the same folder / directory of the application.

2. To get data from the server you must do a get request to the server with the following url:

http://yourserverip:6365/?message=tf2data

jQuery:

$.get( "http://yourserverip:6365", { message: "tf2data"}).done(function(receiveddata){ console.log(receiveddata); });

pure JavaScript:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
  if (this.readyState == 4 && this.status == 200) {
    var json = JSON.parse(this.responseText);
    console.log(json);
  }
};
xhttp.open("GET", "http://yourserverip:6365/?message=tf2data", true);
xhttp.send();

---

Received Data

---

###Due to the nature of the http server used within the application, the JSON might look a bit weird.

The data received looks as follows:

{
  "messages": [
    "NOMESSAGES"
  ],
  "rawjson": {
    "status": "recording",
    "ServerIP": "unknown command: reset_chart",
    "TotalKills": 17,
    "TotalPlayers": 10,
    "TotalSuicides": 0,
    "TotalAmountOfBackstabs": 2,
    "TotalAmountOfHeadshots": 2,
    "TotalAmountOfSentryKills": 0,
    "TotalAmountOfCrits": 5,
    "TotalAmountOfReflectKills": 0,
    "AllPlayers": [
      {
        "Player": "Kamikadza.",
        "totalKilled": 0,
        "killed": 2,
        "died": 1
      },
      {
        "Player": "Carlo",
        "totalKilled": 0,
        "killed": 1,
        "died": 2
      },
      {
        "Player": "Mr.Rare",
        "totalKilled": 0,
        "killed": 7,
        "died": 1
      },
      {
        "Player": "Alec#En panne d'inspi",
        "totalKilled": 0,
        "killed": 2,
        "died": 3
      },
      {
        "Player": "Kongstad :D",
        "totalKilled": 0,
        "killed": 2,
        "died": 0
      },
      {
        "Player": ">Tac<",
        "totalKilled": 0,
        "killed": 0,
        "died": 2
      },
      {
        "Player": "K.V. | trade.tf",
        "totalKilled": 0,
        "killed": 2,
        "died": 2
      },
      {
        "Player": "FreeSetHours",
        "totalKilled": 0,
        "killed": 0,
        "died": 2
      },
      {
        "Player": "Ɍṷӯ",
        "totalKilled": 0,
        "killed": 1,
        "died": 2
      },
      {
        "Player": "H@XX0RZ Da Bot",
        "totalKilled": 0,
        "killed": 0,
        "died": 2
      }
    ]
  }
}

The build up of information is quit obvious, so I do not think that I have to explain it. Just an example to get the player information of Mr.Rare. The only weird thing here is the json.rawjson.AllPlayers[2].totalkills field. When you join a server, the application makes direct contact with the server and gets the information about all the players currently on the server that you joined. Unfortunately, only the player name and the amount of players a player killed during his stay on the server are returned. Hence this field. The json.rawjson.AllPlayers[2].killed field only shows the amount of kills since you joined the server, same goes for every other information inside this json!.

pure JavaScript:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
  if (this.readyState == 4 && this.status == 200) {
    var json = JSON.parse(this.responseText);
    console.log(json.rawjson.AllPlayers[2].Player); //player name
    console.log(json.rawjson.AllPlayers[2].totalkills); //total kills a player has since he joined the server
    console.log(json.rawjson.AllPlayers[2].killed); //amount of times player killed someone
    console.log(json.rawjson.AllPlayers[2].died);   //amount of times player died

  }
};
xhttp.open("GET", "http://yourserverip:6365/?message=tf2data", true);
xhttp.send();