src/network/standalone.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4 <meta charset="utf-8" http-equiv="Content-Language" content="en"/>
   5 <title>FreeSpace Standalone</title>
   6
   7 <script>
   8 var player_list;
   9
  10 var standalone_socket = new WebSocket("ws://" + document.URL.substr(7).split('/')[0], "standalone");
  11
  12 try {
  13     standalone_socket.onmessage = function got_packet(msg) {
  14         console.log(" <== " + msg.data);
  15         if (msg.data[0] == 'D') {
  16             document.getElementById("debug").textContent = msg.data.substr(2);
  17         } else if (msg.data[0] == 'T') {
  18             document.title = msg.data.substr(2);
  19         } else if (msg.data[0] == 'S') {
  20             do_server_tab(msg.data.substr(2));
  21         } else if (msg.data[0] == 'M') {
  22             do_multi_tab(msg.data.substr(2));
  23         } else if (msg.data[0] == 'P') {
  24             do_player_tab(msg.data.substr(2));
  25         } else if (msg.data[0] == 'G') {
  26             do_gs_tab(msg.data.substr(2));
  27         }
  28     }
  29 } catch (exception) {
  30     alert('<p>Error ' + exception);
  31 }
  32
  33 function shutdown() {
  34     standalone_socket.send("shutdown");
  35     console.log(" ==> shutdown");
  36 }
  37
  38 function do_general_msgs(msg) {
  39
  40 }
  41
  42 function do_server_tab(msg) {
  43     if (msg.substring(0, 5) == "name ") {
  44         document.getElementById("server_name").value = msg.substr(5);
  45     } else if (msg.substring(0, 5) == "pass ") {
  46         document.getElementById("host_pass").value = msg.substr(5);
  47     } else if (msg.substring(0, 5) == "ping ") {
  48         var conn_table = document.getElementById("connections");
  49         var ping_list = msg.substr(5).split(';');
  50         var j = 0;
  51
  52         while (j < ping_list.length - 1 && j < 12) {
  53             var ping = ping_list[j].split(',')
  54             var row = conn_table.rows.namedItem(ping[0]);
  55
  56             if (Boolean(row)) {
  57                 row.cells[1].innerHTML = ping[1];
  58             }
  59
  60             j++;
  61         }
  62     } else if (msg.substring(0, 5) == "conn ") {
  63         var conn_table = document.getElementById("connections");
  64         var players = document.getElementById("players");
  65         var gs_players = document.getElementById("gs_players");
  66         var connections = msg.substr(5).split(';');
  67         var j = 0;
  68
  69         while (j < connections.length - 1 && j < 12) {
  70             var conn = connections[j].split(',');
  71
  72             var option = document.createElement("option");
  73             option.text = conn[0];
  74             gs_players.add(option);
  75
  76             option = document.createElement("option");
  77             option.text = conn[0];
  78             players.add(option);
  79
  80             conn_table.rows[j+1].id = conn[1];
  81             conn_table.rows[j+1].cells[0].innerHTML = conn[1];
  82
  83             if (Boolean(conn[2])) {
  84                 conn_table.rows[j+1].cells[1].innerHTML = conn[2];
  85             }
  86
  87             j++;
  88         }
  89
  90         document.getElementById("n_conn").textContent = j;
  91     }
  92 /*
  93         var ip = msg.substr(5).split(';');
  94         var j = 0;
  95         var addr;
  96
  97         while (j < ip.length - 1 && j < 12) {
  98             addr = apair[j].split(',');
  99
 100             table.rows[j+1].cells[0].innerHTML = addr[0];
 101             table.rows[j+1].cells[1].innerHTML = addr[1];
 102
 103             j++;
 104         }
 105
 106         document.getElementById("n_conn").textContent = j;
 107
 108         while (j < table.rows.length - 1) {
 109             table.rows[j+1].cells[0].innerHTML = "&nbsp;";
 110             table.rows[j+1].cells[1].innerHTML = "";
 111
 112             j++;
 113         }
 114 */
 115 }
 116
 117 function do_player_tab(msg) {
 118     if (msg.substring(0, 5) == "info ") {
 119         var pinfo = msg.substr(5).split(';');
 120
 121         document.getElementById("ship_type").textContent = pinfo[0];
 122         document.getElementById("player_ping").textContent = pinfo[1];
 123
 124         var all_stats = pinfo[2].split(',');
 125         var mission_stats = pinfo[3].split(',');
 126         var table = document.getElementById("stats");
 127         var j = 0;
 128
 129         while (j < table.length - 1) {
 130             var row = table.rows[j+1];
 131
 132             row.cells[1] = all_stats[j];
 133             row.cells[2] = mission_stats[j];
 134
 135             j++;
 136         }
 137     }
 138 }
 139
 140 function do_gs_tab(msg) {
 141     if (msg.substring(0, 5) == "mesg ") {
 142         var smsg_box = document.getElementById("smsg_box");
 143
 144         smsg_box.value += msg.substr(5);
 145     }
 146 }
 147
 148 function testing() {
 149     standalone_socket.send("T:");
 150     console.log(" ==> test!");
 151 }
 152
 153 function change_server_name() {
 154     standalone_socket.send("S:name " + document.getElementById("server_name").value);
 155     console.log(" ==> S:name " + document.getElementById("server_name").value);
 156 }
 157
 158 function change_host_pass() {
 159     standalone_socket.send("S:pass " + document.getElementById("host_pass").value);
 160     console.log(" ==> S:pass " + document.getElementById("host_pass").value);
 161 }
 162
 163 function send_server_message() {
 164     var smsg = document.getElementById("server_message");
 165     standalone_socket.send("G:smsg " + smsg.value);
 166     console.log(" ==> G:smsg " + smsg.value);
 167     smsg.value = "";
 168 }
 169
 170 function refresh_missions() {
 171     standalone_socket.send("G:mrefresh");
 172 }
 173
 174 function switch_tab(tab) {
 175     var server_tab = document.getElementById("server_tab");
 176     var multi_tab = document.getElementById("multi_tab");
 177     var pilot_tab = document.getElementById("pilot_tab");
 178     var godstuff_tab = document.getElementById("godstuff_tab");
 179
 180     if (tab == 0) {
 181         multi_tab.style.display = 'none';
 182         pilot_tab.style.display = 'none';
 183         godstuff_tab.style.display = 'none';
 184
 185         server_tab.style.display = 'inline';
 186     } else if (tab == 1) {
 187         server_tab.style.display = 'none';
 188         pilot_tab.style.display = 'none';
 189         godstuff_tab.style.display = 'none';
 190
 191         multi_tab.style.display = 'inline';
 192     } else if (tab == 2) {
 193         server_tab.style.display = 'none';
 194         multi_tab.style.display = 'none';
 195         godstuff_tab.style.display = 'none';
 196
 197         pilot_tab.style.display = 'inline';
 198     } else if (tab == 3) {
 199         server_tab.style.display = 'none';
 200         multi_tab.style.display = 'none';
 201         pilot_tab.style.display = 'none';
 202
 203         godstuff_tab.style.display = 'inline';
 204     }
 205 }
 206
 207 function smsg_submit(e) {
 208     e = e || window.event;
 209
 210     if (e.keyCode == 13) {
 211         document.getElementById("smsg_submit").click();
 212         return false;
 213     }
 214
 215     return true;
 216 }
 217
 218 function get_player_info() {
 219     var n = document.getElementById("players").selectedIndex;
 220
 221     if (n != -1) {
 222         standalone_socket.send("P:info " + document.getElementById("players").options[n].text);
 223     }
 224 }
 225 </script>
 226
 227 <style type="text/css">
 228 body {
 229     font-family: Arial, Helvetica, sans-serif;
 230 }
 231 .container {
 232     display: inline-block;
 233 }
 234 .tab-box {
 235     background-color: #ddd;
 236     padding: 10px 25px;
 237 }
 238 .button {
 239     border: none;
 240     border-radius: 2px;
 241     background-color: #e7e7e7;
 242     color: #000000;
 243     padding: 10px 20px;
 244     text-align: center;
 245     text-decoration: none;
 246     display: inline-block;
 247     font-size: 16px;
 248 }
 249 ul.topnav {
 250     list-style-type: none;
 251     margin: 0;
 252     padding: 0;
 253     overflow: hidden;
 254     background-color: #3a3a3a;
 255 }
 256 ul.topnav li {
 257     float: left;
 258 }
 259 ul.topnav li a {
 260     display: inline-block;
 261     color: #f2f2f2;
 262     text-align: center;
 263     padding: 14px 16px;
 264     text-decoration: none;
 265     transition: 0.3s;
 266     font-size: 17px;
 267     cursor: pointer;
 268 }
 269 ul.topnav li a:hover,a:active {
 270     background-color: #111;
 271 }
 272 ul.topnav li.shutdown {
 273     float: right;
 274     padding-left: 40px;
 275 }
 276 ul.topnav li.shutdown a {
 277     background-color: darkred;
 278 }
 279 ul.topnav li.shutdown a:hover {
 280     background-color: red;
 281     color: #fff;
 282 }
 283 .debug_state {
 284     font-size: smaller;
 285     color: #696969;
 286     float: right;
 287     padding: 2px 4px;
 288 }
 289 .tab-box input#server_name,input#host_pass {
 290     width: 20em;
 291     border: none;
 292     padding: 5px 10px;
 293 }
 294 .tab-box table#connections,table#stats {
 295     border: 1px solid #444;
 296     border-spacing: 0px;
 297     border-collapse: collapse;
 298     width: 100%;
 299     min-height: 13em;
 300 }
 301 .tab-box table#connections th,table#stats th {
 302     background-color: #444;
 303     color: #fff;
 304     padding: 5px 10px;
 305     text-align: left;
 306     font-size: small;
 307 }
 308 .tab-box table#connections td,table#stats td {
 309     padding: 5px 15px;
 310     text-align: left;
 311     font-family: Courier New, Courier, monospace;
 312     font-size: small;
 313 }
 314 .tab-box table#connections tr:nth-child(odd),table#stats tr:nth-child(odd) {
 315     background-color: #d5d5d5;
 316 }
 317 table.name_pass td {
 318     padding: 5px 0px;
 319 }
 320 table.name_pass label {
 321     padding-right: 10px;
 322 }
 323 input#server_message {
 324     margin-top: 10px;
 325     padding: 5px 10px;
 326     border: none;
 327     width: 100%;
 328     box-sizing: border-box;
 329 }
 330 .players,.players option {
 331     min-width: 20em;
 332     padding: 2px 8px;
 333     margin-left: 10px;
 334 }
 335 #godstuff_tab textarea#smsg_box {
 336     width: 100%;
 337     box-sizing: border-box;
 338     resize: none;
 339     background-color: #fff;
 340     border: 1px solid #bbb;
 341     border-radius: 2px;
 342 }
 343 .pinfo {
 344     font-family: Courier New, Courier, monospace;
 345     font-size: small;
 346 }
 347 </style>
 348 </head>
 349
 350 <body>
 351
 352 <div class="container">
 353
 354 <ul class="topnav">
 355 <li><a onclick="switch_tab(0);" href="javascript:void(0);">Server</a></li>
 356 <li><a onclick="switch_tab(1);" href="javascript:void(0);">Multi-Player</a></li>
 357 <li><a onclick="switch_tab(2);" href="javascript:void(0);">Player Info</a></li>
 358 <li><a onclick="switch_tab(3);" href="javascript:void(0);">God Stuff</a></li>
 359 <li class="shutdown"><a onclick="shutdown();" href="javascript:void(0);">Shutdown</a></li>
 360 <!--
 361 <input type="button" value="Shutdown" onclick="shutdown();"></li>
 362 -->
 363 </ul>
 364
 365 <div class="tab-box">
 366
 367 <div id="server_tab" style="display:inline;">
 368 <table class="name_pass">
 369 <tr><td><label for="server_name">Server Name </label></td><td><input id="server_name" type="text" value="" maxlength="32" onchange="change_server_name();"></td></tr>
 370 <tr><td><label for="host_pass">Host Password </label></td><td><input id="host_pass" type="text" value="" maxlength="16" onchange="change_host_pass();"></td></tr>
 371 </table>
 372 <hr>
 373 <p>Connections : <span id="n_conn">0</span></p>
 374 <p>
 375   <table id="connections">
 376     <tr><th style="min-width:20em;">IP Address</th><th style="min-width:5em;">Ping</th></tr>
 377     <tr><td>&nbsp;</td><td></td></tr>
 378     <tr><td>&nbsp;</td><td></td></tr>
 379     <tr><td>&nbsp;</td><td></td></tr>
 380     <tr><td>&nbsp;</td><td></td></tr>
 381     <tr><td>&nbsp;</td><td></td></tr>
 382     <tr><td>&nbsp;</td><td></td></tr>
 383     <tr><td>&nbsp;</td><td></td></tr>
 384     <tr><td>&nbsp;</td><td></td></tr>
 385     <tr><td>&nbsp;</td><td></td></tr>
 386     <tr><td>&nbsp;</td><td></td></tr>
 387     <tr><td>&nbsp;</td><td></td></tr>
 388     <tr><td>&nbsp;</td><td></td></tr>
 389   </table>
 390 </p>
 391 </div>
 392
 393 <div id="multi_tab" style="display:none;">
 394 Multi-Player Tab
 395 </div>
 396
 397 <div id="pilot_tab" style="display:none;">
 398 <label for="players">Player</label>
 399 <select id="players" class="players" onchange="get_player_info();">
 400 </select>
 401 <p>Ship Type <span id="ship_type" class="pinfo"></span></p>
 402 <p>Avg Ping <span id="player_ping" class="pinfo"></span></p>
 403 <p>
 404     <table id="stats">
 405         <tr><th>Stats</th><th>All Time</th><th>Mission</th></tr>
 406         <tr><td>Primary Shots</td><td></td><td></td></tr>
 407         <tr><td>Primary Hits</td><td></td><td></td></tr>
 408         <tr><td>Primary BH Hits</td><td></td><td></td></tr>
 409         <tr><td>Primary Hit %</td><td></td><td></td></tr>
 410         <tr><td>Primary BH Hit %</td><td></td><td></td></tr>
 411         <tr><td>Secondary Shots</td><td></td><td></td></tr>
 412         <tr><td>Secondary Hits</td><td></td><td></td></tr>
 413         <tr><td>Secondary BH Hits</td><td></td><td></td></tr>
 414         <tr><td>Secondary Hit %</td><td></td><td></td></tr>
 415         <tr><td>Secondary BH Hit %</td><td></td><td></td></tr>
 416         <tr><td>Assists</td><td></td><td></td></tr>
 417     </table>
 418 </p>
 419 </div>
 420
 421 <div id="godstuff_tab" style="display:none;">
 422 <label for="gs_players">Player</label>
 423 <select id="gs_players" class="players">
 424 </select>
 425 <p>
 426 <input class="button" type="button" value="Refresh Missions" onclick="refresh_missions();">
 427 </p>
 428 <p>
 429 <label for="server_message">Server Message</label>
 430 <br>
 431 <input id="server_message" type="text" value="" onkeypress="return smsg_submit(event);">
 432 <input id="smsg_submit" type="button" onclick="send_server_message();" style="display:none;">
 433 </p>
 434 <p>
 435 <textarea readonly rows="20" id="smsg_box"></textarea>
 436 </p>
 437 </div>
 438
 439 </div>
 440
 441 <div id="debug" class="debug_state"></div>
 442
 443 </div>
 444 <input type="button" value="Test" onclick="testing();">
 445 </body>
 446 </html>