From 0a178d17b9980dfca1ddcc6511e3603b3837bc5b Mon Sep 17 00:00:00 2001 From: oOHiyoriOo Date: Sat, 13 Jun 2026 17:51:50 +0200 Subject: [PATCH] feat: full de-Angularization with Bootstrap 5 migration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Removed AngularJS 1.4.8 completely — no more framework dependency - Extracted core RCON logic into pure vanilla JS (js/rcon.js) - Added lightweight hash-based SPA router (js/router.js) - Rewrote all 6 pages as vanilla JS modules in js/pages/ - Migrated Bootstrap 3 → Bootstrap 5 (cards instead of panels, bootstrap-icons instead of glyphicons) - Removed jQuery dependency (Bootstrap 5 is vanilla JS) - Purged all Angular templates from html/ - Removed npm artifacts (package.json, node_modules) - Added nginx.example.conf for static hosting - Updated rcon.css dark theme for BS5 variables - Static file only — no Node.js backend required Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- html/chat.html | 17 -- html/connect.html | 54 ----- html/console.html | 11 - html/header.html | 40 ---- html/playerInfo.html | 41 ---- html/playerlist.html | 84 ------- html/serverInfo.html | 92 -------- image/arrow-right-bold-hexagon-outline.svg | 1 - image/menu.svg | 1 - index.html | 97 ++++---- js/app.js | 190 ++++++++-------- js/chat.js | 87 ------- js/connection.js | 135 ----------- js/console.js | 147 ------------ js/linq.min.js | 10 - js/pages/chat.js | 73 ++++++ js/pages/connect.js | 142 ++++++++++++ js/pages/console.js | 80 +++++++ js/pages/playerInfo.js | 70 ++++++ js/pages/playerlist.js | 141 ++++++++++++ js/pages/serverInfo.js | 188 ++++++++++++++++ js/playerInfo.js | 55 ----- js/playerlist.js | 50 ----- js/rcon.js | 181 +++++++++++++++ js/rconService.js | 131 ----------- js/router.js | 80 +++++++ js/serverInfo.js | 231 ------------------- js/utils.js | 47 ++++ nginx.example.conf | 24 ++ package-lock.json | 250 --------------------- package.json | 15 -- rcon.css | 179 +++++++-------- 32 files changed, 1242 insertions(+), 1702 deletions(-) delete mode 100644 html/chat.html delete mode 100644 html/connect.html delete mode 100644 html/console.html delete mode 100644 html/header.html delete mode 100644 html/playerInfo.html delete mode 100644 html/playerlist.html delete mode 100644 html/serverInfo.html delete mode 100644 image/arrow-right-bold-hexagon-outline.svg delete mode 100644 image/menu.svg delete mode 100644 js/chat.js delete mode 100644 js/connection.js delete mode 100644 js/console.js delete mode 100644 js/linq.min.js create mode 100644 js/pages/chat.js create mode 100644 js/pages/connect.js create mode 100644 js/pages/console.js create mode 100644 js/pages/playerInfo.js create mode 100644 js/pages/playerlist.js create mode 100644 js/pages/serverInfo.js delete mode 100644 js/playerInfo.js delete mode 100644 js/playerlist.js create mode 100644 js/rcon.js delete mode 100644 js/rconService.js create mode 100644 js/router.js delete mode 100644 js/serverInfo.js create mode 100644 js/utils.js create mode 100644 nginx.example.conf delete mode 100644 package-lock.json delete mode 100644 package.json diff --git a/html/chat.html b/html/chat.html deleted file mode 100644 index 5ab4c69..0000000 --- a/html/chat.html +++ /dev/null @@ -1,17 +0,0 @@ -
- -
-
- {{(line.Time * 1000) | date:'shortTime'}} - {{line.Username}} : - {{line.Message}} -
-
- -
-
- -
-
- -
\ No newline at end of file diff --git a/html/connect.html b/html/connect.html deleted file mode 100644 index 56edec3..0000000 --- a/html/connect.html +++ /dev/null @@ -1,54 +0,0 @@ -
- -
- -

Connect

- -
- {{LastErrorMessage}} -
- -

Enter the address (including rcon port) and the rcon password below to connect.

- -
- -
- - -
- -
- - -
- -
- -
- - - -
-
- -
- -
-

Saved Connections

- -
- -
-
- -
- -
diff --git a/html/console.html b/html/console.html deleted file mode 100644 index e5ed7e6..0000000 --- a/html/console.html +++ /dev/null @@ -1,11 +0,0 @@ -
- -
-
{{line.Message}}
-
- -
- -
- -
\ No newline at end of file diff --git a/html/header.html b/html/header.html deleted file mode 100644 index d6825a1..0000000 --- a/html/header.html +++ /dev/null @@ -1,40 +0,0 @@ - diff --git a/html/playerInfo.html b/html/playerInfo.html deleted file mode 100644 index f3a211e..0000000 --- a/html/playerInfo.html +++ /dev/null @@ -1,41 +0,0 @@ - -
- -
- -
- -

- Player: {{getUsername()}} -
- -
-

- -
-
- - - Steam Profile - -
-
- -
- -
-

- Info -

- -
- This Player is currently not connected to this server! -
-
- -
-

{{key}}: {{value}}

-
-
- -
\ No newline at end of file diff --git a/html/playerlist.html b/html/playerlist.html deleted file mode 100644 index 297abea..0000000 --- a/html/playerlist.html +++ /dev/null @@ -1,84 +0,0 @@ -
- -
-
- -
-
- -
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ActionsUsernameSteam IDViolation LevelAddressPingDuration
-
- - -
- 		- {{line.DisplayName}} - - {{line.SteamID}} - - {{line.VoiationLevel}} - - {{line.Address}} - - {{line.Ping}} - - {{line.ConnectedSeconds | SecondsToDuration}} -
-
-
-
- -
\ No newline at end of file diff --git a/html/serverInfo.html b/html/serverInfo.html deleted file mode 100644 index ecdd567..0000000 --- a/html/serverInfo.html +++ /dev/null @@ -1,92 +0,0 @@ -
- -
- -
-

{{serverinfo.Hostname}}

-
- -
-

- {{key}}: - {{value}} -

-
- -
-
- -
- -
-
- -

- Server Performance -

-
-
-
- -
-
-
- -
-
- - -

- Server Networking -

-
-
-
- -
-
-
- -
-
- -

- Players -

-
-
-
- -
-
-
- -
- -
- -
diff --git a/image/arrow-right-bold-hexagon-outline.svg b/image/arrow-right-bold-hexagon-outline.svg deleted file mode 100644 index 2e71c09..0000000 --- a/image/arrow-right-bold-hexagon-outline.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/image/menu.svg b/image/menu.svg deleted file mode 100644 index 64844e7..0000000 --- a/image/menu.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/index.html b/index.html index 76ecddf..95c7eee 100644 --- a/index.html +++ b/index.html @@ -1,71 +1,68 @@ - + - Websocket Rcon - - + + - - -
- -
- -
- -
- - + + + -
- -

{{$route.current.Title}}

-
- + + - + +
- - - - - - - - - - - + + + - - - - - - + + + + + + + + + + - - - - - - - diff --git a/js/app.js b/js/app.js index 8e03643..762096b 100644 --- a/js/app.js +++ b/js/app.js @@ -1,114 +1,110 @@ -var app = angular.module('RconApp', ['ngRoute', 'nvd3']); +/** + * Main application — layout management, header updates, sidebar nav, routing. + */ +(function () { + 'use strict'; -app.service('rconService', [RconService]); + var elConnect = document.getElementById('app-connect'); + var elConnected = document.getElementById('app-connected'); + var elHeader = document.getElementById('server-header'); + var elSidebar = document.getElementById('sidebar-nav'); + var elTitle = document.getElementById('page-title'); -app.config(function($routeProvider) { - $routeProvider.when("/home", {Title: "Home"}); - $routeProvider.when("/:address/info", { - Title: "Server", - templateUrl: "html/serverInfo.html", - Nav: true - }); - $routeProvider.when("/:address/console", { - Title: "Console", - templateUrl: "html/console.html", - Nav: true - }); - $routeProvider.when("/:address/chat", { - Title: "Chat", - templateUrl: "html/chat.html", - Nav: true - }); - $routeProvider.when("/:address/playerlist", { - Title: "Player List", - templateUrl: "html/playerlist.html", - Nav: true - }); - $routeProvider.when("/:address/player/:userid", { - Title: "Player Info", - templateUrl: "html/playerInfo.html" - }); - $routeProvider.otherwise({redirectTo: '/home'}); -}); + // ---- Sidebar navigation ---- + var navPages = [ + { title: 'Server', path: '/:address/info' }, + { title: 'Console', path: '/:address/console' }, + { title: 'Chat', path: '/:address/chat' }, + { title: 'Player List', path: '/:address/playerlist' } + ]; -app.controller('RconController', RconController); - -function RconController($scope, $rootScope, rconService, $timeout, $route) { - $scope.$route = $route; - - $scope.pages = $.map($route.routes, function(value, index) { - if (value.Nav) { - return [value]; + function renderSidebar(address) { + var html = ''; + for (var i = 0; i < navPages.length; i++) { + var url = navPages[i].path.replace(':address', address); + var linkCls = (window._currentPage === navPages[i].title) ? ' nav-link active' : 'nav-link'; + html += '
  • ' + navPages[i].title + '
    • '; } - }); - - $scope.OpenLeftMenu = function() { - $mdSidenav('left').toggle(); - }; - - $scope.IsConnected = function() { - return rconService.IsConnected(); + elSidebar.innerHTML = html; } - $rootScope.Nav = function(url) { - return url.replace(":address", rconService.Address); + function setActivePage(title) { + window._currentPage = title; + elTitle.textContent = title; + if (Rcon.isConnected()) renderSidebar(Rcon.getAddress()); } - $rootScope.$on('$stateChangeStart', function(next, current) { - console.log(next); - }); + // ---- Header update ---- + var headerTimer = null; - rconService.OnOpen = function() { - $scope.Connected = true; - $scope.$broadcast("OnConnected"); - $scope.$digest(); - $scope.address = rconService.Address; - } - - rconService.OnClose = function(ev) { - $scope.$broadcast("OnDisconnected", ev); - $scope.$digest(); - } - - rconService.OnError = function(ev) { - $scope.$broadcast("OnConnectionError", ev); - $scope.$digest(); - } - - rconService.OnMessage = function(msg) { - $scope.$apply(function() { - $scope.$broadcast("OnMessage", msg); + function updateHeader() { + Rcon.request('serverinfo', function (msg) { + var data = JSON.parse(msg.Message); + document.getElementById('header-hostname').textContent = data.Hostname || 'Rust Server'; + document.getElementById('header-uptime').innerHTML = ' ' + secondsToDuration(data.Uptime); + document.getElementById('header-map').innerHTML = ' ' + (data.Map || ''); + document.getElementById('header-players').innerHTML = ' ' + formatNumber(data.Players) + '/' + formatNumber(data.MaxPlayers); + document.getElementById('header-fps').innerHTML = ' ' + formatNumber(data.Framerate) + 'fps'; + document.getElementById('header-entities').innerHTML = ' ' + formatNumber(data.EntityCount); }); } - $scope.Disconnect = function() { + function startHeaderUpdates() { + updateHeader(); + headerTimer = setInterval(updateHeader, 1000); + } + + function stopHeaderUpdates() { + if (headerTimer) { clearInterval(headerTimer); headerTimer = null; } + } + + // ---- Disconnect button ---- + document.getElementById('btn-disconnect').addEventListener('click', function () { if (confirm('Do you really want to disconnect?')) { - rconService.Disconnect(); - $scope.Connected = false; - - $scope.address = '#/home'; + Rcon.disconnect(); } + }); + + // ---- Layout toggling ---- + function showConnected(address) { + elConnect.innerHTML = ''; + elConnect.style.display = 'none'; + elConnected.style.display = 'block'; + elHeader.style.display = 'block'; + renderSidebar(address); + startHeaderUpdates(); } -} -app.filter('SecondsToDuration', [SecondsToDuration]); - -function SecondsToDuration() { - return function(input) { - input = parseInt(input); - - var out = ""; - var hours = Math.floor(input / 3600); - if (input > 3600) - out += hours + "h"; - - var minutes = Math.floor(input / 60) % 60; - if (input > 60) - out += minutes + "m"; - - var seconds = input % 60; - out += seconds + "s"; - - return out; + function showDisconnected() { + stopHeaderUpdates(); + elConnected.style.display = 'none'; + elHeader.style.display = 'none'; + elConnect.style.display = 'block'; + // Clear any stale router content + document.getElementById('app-view').innerHTML = ''; + ConnectPage([], elConnect); } -} + + // ---- Events ---- + Rcon.on('connected', function () { + var addr = Rcon.getAddress(); + showConnected(addr); + Router.go('#/' + addr + '/info'); + }); + + Rcon.on('disconnected', function () { + showDisconnected(); + }); + + // ---- Router setup ---- + Router.add(/^\/([^/]+)\/info$/, 'Server', function (p, c) { setActiveSidebar('Server'); ServerInfoPage(p, c); }); + Router.add(/^\/([^/]+)\/console$/, 'Console', function (p, c) { setActiveSidebar('Console'); ConsolePage(p, c); }); + Router.add(/^\/([^/]+)\/chat$/, 'Chat', function (p, c) { setActiveSidebar('Chat'); ChatPage(p, c); }); + Router.add(/^\/([^/]+)\/playerlist$/, 'Player List', function (p, c) { setActiveSidebar('Player List'); PlayerListPage(p, c); }); + Router.add(/^\/([^/]+)\/player\/(.+)$/, 'Player Info', function (p, c) { setActiveSidebar('Player Info'); PlayerInfoPage(p, c); }); + + Router.start('#app-view'); + + // ---- Initial state ---- + showDisconnected(); +})(); diff --git a/js/chat.js b/js/chat.js deleted file mode 100644 index 1a2fdd5..0000000 --- a/js/chat.js +++ /dev/null @@ -1,87 +0,0 @@ - -app.controller( 'ChatController', ChatController ); - -function ChatController( $scope, rconService, $timeout ) -{ - $scope.Output = []; - - $scope.SubmitCommand = function () - { - rconService.Command( "say " + $scope.Command, 1 ); - $scope.Command = ""; - } - - $scope.$on( "OnMessage", function ( event, msg ) - { - if ( msg.Type !== "Chat" ) return; - - $scope.OnMessage( JSON.parse( msg.Message ) ); - }); - - $scope.OnMessage = function( msg ) - { - msg.Message = stripHtml(msg.Message); - msg.Username = stripHtml(msg.Username); - - $scope.Output.push( msg ); - - if($scope.isOnBottom()) { - $scope.ScrollToBottom(); - } - } - - $scope.ScrollToBottom = function() - { - var element = $( "#ChatController .Output" ); - - $timeout( function() { - element.scrollTop( element.prop('scrollHeight') ); - }, 50 ); - } - - $scope.isOnBottom = function() - { - // get jquery element - var element = $( "#ChatController .Output" ); - - // height of the element - var height = element.height(); - - // scroll position from top position - var scrollTop = element.scrollTop(); - - // full height of the element - var scrollHeight = element.prop('scrollHeight'); - - if((scrollTop + height) > (scrollHeight - 10)) { - return true; - } - - return false; - } - - // - // Calls console.tail - which returns the last 256 entries from the console. - // This is then added to the console - // - $scope.GetHistory = function () - { - rconService.Request( "chat.tail 512", $scope, function ( msg ) - { - var messages = JSON.parse( msg.Message ); - - messages.forEach( function ( message ) { - $scope.OnMessage( message ); - }); - - $scope.ScrollToBottom(); - } ); - } - - rconService.InstallService( $scope, $scope.GetHistory ) -} - -function stripHtml( text ) -{ - return text ? String(text).replace( /<[^>]+>/gm, '' ) : ''; -} \ No newline at end of file diff --git a/js/connection.js b/js/connection.js deleted file mode 100644 index f11882d..0000000 --- a/js/connection.js +++ /dev/null @@ -1,135 +0,0 @@ - -app.controller( 'ConnectionController', ConnectionController ); - -function ConnectionController( $scope, rconService, $routeParams, $timeout, $location ) -{ - $scope.Address = ""; - $scope.Password = ""; - $scope.SaveConnection = true; - - $scope.connectionsLimit = 5; - - function _loadFromLocalStorage() { - var connections = []; - - // load and parse from local storage - if ( localStorage && localStorage.previousConnections ) { - connections = angular.fromJson( localStorage.previousConnections ); - } - - // double check - if ( !connections ) { - connections = []; - } - - return connections; - } - - function _addWithoutDuplicates(connections, connection) { - // prepare new array - var filteredConnections = []; - - for(var i in connections) { - if(connections[i].Address !== connection.Address && connections[i].Password !== connection.Password) { - // add old connection info to our new array - filteredConnections.push(connections[i]); - } - } - - // add new connection - filteredConnections.push(connection); - - return filteredConnections; - } - - $scope.toggleConnectionsLimit = function () - { - // toggle limit between undefined and 5 - // undefined sets limit to max - if($scope.connectionsLimit === undefined) { - $scope.connectionsLimit = 5; - } else { - $scope.connectionsLimit = undefined; - } - } - - $scope.Connect = function () - { - $scope.Address = $scope.Address.trim(); - $scope.Password = $scope.Password.trim(); - - $scope.LastErrorMessage = null; - rconService.Connect( $scope.Address, $scope.Password ); - - $location.path('/' + $scope.Address + '/info'); - } - - $scope.ConnectTo = function ( c ) - { - $scope.SaveConnection = false; - $scope.LastErrorMessage = null; - rconService.Connect( c.Address, c.Password ); - } - - $scope.$on( "OnDisconnected", function ( x, ev ) - { - console.log( ev ); - $scope.LastErrorMessage = "Connection was closed - Error " + ev.code; - $scope.$digest(); - } ); - - $scope.$on( "OnConnected", function ( x, ev ) - { - if ( $scope.SaveConnection ) - { - // new connection to add - var connection = { Address: $scope.Address, Password: $scope.Password, date: new Date() }; - - // remove old entries and add our new connection info - var connections = _addWithoutDuplicates(_loadFromLocalStorage(), connection); - - // push to scope and save data - $scope.PreviousConnects = connections; - localStorage.previousConnections = angular.toJson( $scope.PreviousConnects ); - } - } ); - - $scope.PreviousConnects = _loadFromLocalStorage(); - - // - // If a server address is passed in.. try to connect if we have a saved entry - // - $timeout( function () - { - $scope.Address = $routeParams.address; - - // - // If a password was passed as a search param, use that - // - var pw = $location.search().password; - if ( pw ) - { - $scope.Password = pw; - $location.search( "password", null ); - } - - if ( $scope.Address != null ) - { - // If we have a password (passed as a search param) then connect using that - if ( $scope.Password != "" ) - { - $scope.Connect(); - return; - } - - var foundAddress = Enumerable.From( $scope.PreviousConnects ).Where( function ( x ) { return x.Address == $scope.Address } ).First(); - if ( foundAddress != null ) - { - $scope.ConnectTo( foundAddress ); - } - - } - - }, 20 ); - -} diff --git a/js/console.js b/js/console.js deleted file mode 100644 index 2acd395..0000000 --- a/js/console.js +++ /dev/null @@ -1,147 +0,0 @@ - -app.controller( 'ConsoleController', ConsoleController ); - -function ConsoleController( $scope, rconService, $timeout ) -{ - $scope.Output = []; - $scope.commandHistory = []; - $scope.commandHistoryIndex = 0; - - $scope.KeyUp = function (event) - { - switch(event.keyCode) { - - // Arrow Key Up - case 38: - - // rotate through commandHistory - $scope.commandHistoryIndex--; - if($scope.commandHistoryIndex < 0) { - $scope.commandHistoryIndex = $scope.commandHistory.length; - } - - // set command from history - if($scope.commandHistory[$scope.commandHistoryIndex]) { - $scope.Command = $scope.commandHistory[$scope.commandHistoryIndex]; - } - - break; - - // Arrow Key Down - case 40: - - // rotate through commandHistory - $scope.commandHistoryIndex++; - if($scope.commandHistoryIndex >= $scope.commandHistory.length) { - $scope.commandHistoryIndex = 0; - } - - // set command from history - if($scope.commandHistory[$scope.commandHistoryIndex]) { - $scope.Command = $scope.commandHistory[$scope.commandHistoryIndex]; - } - - break; - - default: - // reset command history index - $scope.commandHistoryIndex = $scope.commandHistory.length; - break; - } - } - - $scope.SubmitCommand = function () - { - $scope.OnMessage( { Message: $scope.Command, Type: 'Command' } ); - - $scope.commandHistory.push($scope.Command); - - rconService.Command( $scope.Command, 1 ); - $scope.Command = ""; - $scope.commandHistoryIndex = 0; - } - $scope.$on( "OnMessage", function ( event, msg ) { $scope.OnMessage( msg ); } ); - - $scope.OnMessage = function( msg ) - { - - if ( msg.Message.startsWith( "[rcon] " ) ) { - return; - } - - switch(msg.Type) { - case 'Generic': - case 'Log': - case 'Error': - case 'Warning': - $scope.addOutput(msg); - break; - - default: - console.log( msg ); - return; - } - } - - $scope.ScrollToBottom = function() - { - var element = $( "#ConsoleController .Output" ); - - $timeout( function() { - element.scrollTop( element.prop('scrollHeight') ); - }, 50 ); - } - - $scope.isOnBottom = function() - { - // get jquery element - var element = $( "#ConsoleController .Output" ); - - // height of the element - var height = element.height(); - - // scroll position from top position - var scrollTop = element.scrollTop(); - - // full height of the element - var scrollHeight = element.prop('scrollHeight'); - - if((scrollTop + height) > (scrollHeight - 10)) { - return true; - } - - return false; - } - - // - // Calls console.tail - which returns the last 128 entries from the console. - // This is then added to the console - // - $scope.GetHistory = function () - { - rconService.Request( "console.tail 128", $scope, function ( msg ) - { - var messages = JSON.parse( msg.Message ); - - messages.forEach( function ( msg ) { - $scope.OnMessage( msg ); - }); - - $scope.ScrollToBottom(); - } ); - } - - $scope.addOutput = function (msg) - { - msg.Class = msg.Type; - msg.Message = stripHtml(msg.Message); - - $scope.Output.push( msg ); - - if($scope.isOnBottom()) { - $scope.ScrollToBottom(); - } - } - - rconService.InstallService( $scope, $scope.GetHistory ) -} \ No newline at end of file diff --git a/js/linq.min.js b/js/linq.min.js deleted file mode 100644 index 7fe4ee1..0000000 --- a/js/linq.min.js +++ /dev/null @@ -1,10 +0,0 @@ -/*-------------------------------------------------------------------------- -* linq.js - LINQ for JavaScript -* ver 2.2.0.2 (Jan. 21th, 2011) -* -* created and maintained by neuecc -* licensed under Microsoft Public License(Ms-PL) -* http://neue.cc/ -* http://linqjs.codeplex.com/ -*--------------------------------------------------------------------------*/ -Enumerable=function(){var m="Single:sequence contains more than one element.",e=true,b=null,a=false,c=function(a){this.GetEnumerator=a};c.Choice=function(){var a=arguments[0]instanceof Array?arguments[0]:arguments;return new c(function(){return new f(g.Blank,function(){return this.Yield(a[Math.floor(Math.random()*a.length)])},g.Blank)})};c.Cycle=function(){var a=arguments[0]instanceof Array?arguments[0]:arguments;return new c(function(){var b=0;return new f(g.Blank,function(){if(b>=a.length)b=0;return this.Yield(a[b++])},g.Blank)})};c.Empty=function(){return new c(function(){return new f(g.Blank,function(){return a},g.Blank)})};c.From=function(j){if(j==b)return c.Empty();if(j instanceof c)return j;if(typeof j==i.Number||typeof j==i.Boolean)return c.Repeat(j,1);if(typeof j==i.String)return new c(function(){var b=0;return new f(g.Blank,function(){return b=e})};c.Repeat=function(d,a){return a!=b?c.Repeat(d).Take(a):new c(function(){return new f(g.Blank,function(){return this.Yield(d)},g.Blank)})};c.RepeatWithFinalize=function(a,e){a=d.CreateLambda(a);e=d.CreateLambda(e);return new c(function(){var c;return new f(function(){c=a()},function(){return this.Yield(c)},function(){if(c!=b){e(c);c=b}})})};c.Generate=function(a,e){if(e!=b)return c.Generate(a).Take(e);a=d.CreateLambda(a);return new c(function(){return new f(g.Blank,function(){return this.Yield(a())},g.Blank)})};c.ToInfinity=function(d,a){if(d==b)d=0;if(a==b)a=1;return new c(function(){var b;return new f(function(){b=d-a},function(){return this.Yield(b+=a)},g.Blank)})};c.ToNegativeInfinity=function(d,a){if(d==b)d=0;if(a==b)a=1;return new c(function(){var b;return new f(function(){b=d+a},function(){return this.Yield(b-=a)},g.Blank)})};c.Unfold=function(h,b){b=d.CreateLambda(b);return new c(function(){var d=e,c;return new f(g.Blank,function(){if(d){d=a;c=h;return this.Yield(c)}c=b(c);return this.Yield(c)},g.Blank)})};c.prototype={CascadeBreadthFirst:function(g,b){var h=this;g=d.CreateLambda(g);b=d.CreateLambda(b);return new c(function(){var i,k=0,j=[];return new f(function(){i=h.GetEnumerator()},function(){while(e){if(i.MoveNext()){j.push(i.Current());return this.Yield(b(i.Current(),k))}var f=c.From(j).SelectMany(function(a){return g(a)});if(!f.Any())return a;else{k++;j=[];d.Dispose(i);i=f.GetEnumerator()}}},function(){d.Dispose(i)})})},CascadeDepthFirst:function(g,b){var h=this;g=d.CreateLambda(g);b=d.CreateLambda(b);return new c(function(){var j=[],i;return new f(function(){i=h.GetEnumerator()},function(){while(e){if(i.MoveNext()){var f=b(i.Current(),j.length);j.push(i);i=c.From(g(i.Current())).GetEnumerator();return this.Yield(f)}if(j.length<=0)return a;d.Dispose(i);i=j.pop()}},function(){try{d.Dispose(i)}finally{c.From(j).ForEach(function(a){a.Dispose()})}})})},Flatten:function(){var h=this;return new c(function(){var j,i=b;return new f(function(){j=h.GetEnumerator()},function(){while(e){if(i!=b)if(i.MoveNext())return this.Yield(i.Current());else i=b;if(j.MoveNext())if(j.Current()instanceof Array){d.Dispose(i);i=c.From(j.Current()).SelectMany(g.Identity).Flatten().GetEnumerator();continue}else return this.Yield(j.Current());return a}},function(){try{d.Dispose(j)}finally{d.Dispose(i)}})})},Pairwise:function(b){var e=this;b=d.CreateLambda(b);return new c(function(){var c;return new f(function(){c=e.GetEnumerator();c.MoveNext()},function(){var d=c.Current();return c.MoveNext()?this.Yield(b(d,c.Current())):a},function(){d.Dispose(c)})})},Scan:function(i,g,j){if(j!=b)return this.Scan(i,g).Select(j);var h;if(g==b){g=d.CreateLambda(i);h=a}else{g=d.CreateLambda(g);h=e}var k=this;return new c(function(){var b,c,j=e;return new f(function(){b=k.GetEnumerator()},function(){if(j){j=a;if(!h){if(b.MoveNext())return this.Yield(c=b.Current())}else return this.Yield(c=i)}return b.MoveNext()?this.Yield(c=g(c,b.Current())):a},function(){d.Dispose(b)})})},Select:function(b){var e=this;b=d.CreateLambda(b);return new c(function(){var c,g=0;return new f(function(){c=e.GetEnumerator()},function(){return c.MoveNext()?this.Yield(b(c.Current(),g++)):a},function(){d.Dispose(c)})})},SelectMany:function(g,e){var h=this;g=d.CreateLambda(g);if(e==b)e=function(b,a){return a};e=d.CreateLambda(e);return new c(function(){var j,i=undefined,k=0;return new f(function(){j=h.GetEnumerator()},function(){if(i===undefined)if(!j.MoveNext())return a;do{if(i==b){var f=g(j.Current(),k++);i=c.From(f).GetEnumerator()}if(i.MoveNext())return this.Yield(e(j.Current(),i.Current()));d.Dispose(i);i=b}while(j.MoveNext());return a},function(){try{d.Dispose(j)}finally{d.Dispose(i)}})})},Where:function(b){b=d.CreateLambda(b);var e=this;return new c(function(){var c,g=0;return new f(function(){c=e.GetEnumerator()},function(){while(c.MoveNext())if(b(c.Current(),g++))return this.Yield(c.Current());return a},function(){d.Dispose(c)})})},OfType:function(c){var a;switch(c){case Number:a=i.Number;break;case String:a=i.String;break;case Boolean:a=i.Boolean;break;case Function:a=i.Function;break;default:a=b}return a===b?this.Where(function(a){return a instanceof c}):this.Where(function(b){return typeof b===a})},Zip:function(e,b){b=d.CreateLambda(b);var g=this;return new c(function(){var i,h,j=0;return new f(function(){i=g.GetEnumerator();h=c.From(e).GetEnumerator()},function(){return i.MoveNext()&&h.MoveNext()?this.Yield(b(i.Current(),h.Current(),j++)):a},function(){try{d.Dispose(i)}finally{d.Dispose(h)}})})},Join:function(m,i,h,k,j){i=d.CreateLambda(i);h=d.CreateLambda(h);k=d.CreateLambda(k);j=d.CreateLambda(j);var l=this;return new c(function(){var n,q,o=b,p=0;return new f(function(){n=l.GetEnumerator();q=c.From(m).ToLookup(h,g.Identity,j)},function(){while(e){if(o!=b){var c=o[p++];if(c!==undefined)return this.Yield(k(n.Current(),c));c=b;p=0}if(n.MoveNext()){var d=i(n.Current());o=q.Get(d).ToArray()}else return a}},function(){d.Dispose(n)})})},GroupJoin:function(l,h,e,j,i){h=d.CreateLambda(h);e=d.CreateLambda(e);j=d.CreateLambda(j);i=d.CreateLambda(i);var k=this;return new c(function(){var m=k.GetEnumerator(),n=b;return new f(function(){m=k.GetEnumerator();n=c.From(l).ToLookup(e,g.Identity,i)},function(){if(m.MoveNext()){var b=n.Get(h(m.Current()));return this.Yield(j(m.Current(),b))}return a},function(){d.Dispose(m)})})},All:function(b){b=d.CreateLambda(b);var c=e;this.ForEach(function(d){if(!b(d)){c=a;return a}});return c},Any:function(c){c=d.CreateLambda(c);var b=this.GetEnumerator();try{if(arguments.length==0)return b.MoveNext();while(b.MoveNext())if(c(b.Current()))return e;return a}finally{d.Dispose(b)}},Concat:function(e){var g=this;return new c(function(){var i,h;return new f(function(){i=g.GetEnumerator()},function(){if(h==b){if(i.MoveNext())return this.Yield(i.Current());h=c.From(e).GetEnumerator()}return h.MoveNext()?this.Yield(h.Current()):a},function(){try{d.Dispose(i)}finally{d.Dispose(h)}})})},Insert:function(h,b){var g=this;return new c(function(){var j,i,l=0,k=a;return new f(function(){j=g.GetEnumerator();i=c.From(b).GetEnumerator()},function(){if(l==h&&i.MoveNext()){k=e;return this.Yield(i.Current())}if(j.MoveNext()){l++;return this.Yield(j.Current())}return!k&&i.MoveNext()?this.Yield(i.Current()):a},function(){try{d.Dispose(j)}finally{d.Dispose(i)}})})},Alternate:function(a){a=c.Return(a);return this.SelectMany(function(b){return c.Return(b).Concat(a)}).TakeExceptLast()},Contains:function(f,b){b=d.CreateLambda(b);var c=this.GetEnumerator();try{while(c.MoveNext())if(b(c.Current())===f)return e;return a}finally{d.Dispose(c)}},DefaultIfEmpty:function(b){var g=this;return new c(function(){var c,h=e;return new f(function(){c=g.GetEnumerator()},function(){if(c.MoveNext()){h=a;return this.Yield(c.Current())}else if(h){h=a;return this.Yield(b)}return a},function(){d.Dispose(c)})})},Distinct:function(a){return this.Except(c.Empty(),a)},Except:function(e,b){b=d.CreateLambda(b);var g=this;return new c(function(){var h,i;return new f(function(){h=g.GetEnumerator();i=new n(b);c.From(e).ForEach(function(a){i.Add(a)})},function(){while(h.MoveNext()){var b=h.Current();if(!i.Contains(b)){i.Add(b);return this.Yield(b)}}return a},function(){d.Dispose(h)})})},Intersect:function(e,b){b=d.CreateLambda(b);var g=this;return new c(function(){var h,i,j;return new f(function(){h=g.GetEnumerator();i=new n(b);c.From(e).ForEach(function(a){i.Add(a)});j=new n(b)},function(){while(h.MoveNext()){var b=h.Current();if(!j.Contains(b)&&i.Contains(b)){j.Add(b);return this.Yield(b)}}return a},function(){d.Dispose(h)})})},SequenceEqual:function(h,f){f=d.CreateLambda(f);var g=this.GetEnumerator();try{var b=c.From(h).GetEnumerator();try{while(g.MoveNext())if(!b.MoveNext()||f(g.Current())!==f(b.Current()))return a;return b.MoveNext()?a:e}finally{d.Dispose(b)}}finally{d.Dispose(g)}},Union:function(e,b){b=d.CreateLambda(b);var g=this;return new c(function(){var j,h,i;return new f(function(){j=g.GetEnumerator();i=new n(b)},function(){var b;if(h===undefined){while(j.MoveNext()){b=j.Current();if(!i.Contains(b)){i.Add(b);return this.Yield(b)}}h=c.From(e).GetEnumerator()}while(h.MoveNext()){b=h.Current();if(!i.Contains(b)){i.Add(b);return this.Yield(b)}}return a},function(){try{d.Dispose(j)}finally{d.Dispose(h)}})})},OrderBy:function(b){return new j(this,b,a)},OrderByDescending:function(a){return new j(this,a,e)},Reverse:function(){var b=this;return new c(function(){var c,d;return new f(function(){c=b.ToArray();d=c.length},function(){return d>0?this.Yield(c[--d]):a},g.Blank)})},Shuffle:function(){var b=this;return new c(function(){var c;return new f(function(){c=b.ToArray()},function(){if(c.length>0){var b=Math.floor(Math.random()*c.length);return this.Yield(c.splice(b,1)[0])}return a},g.Blank)})},GroupBy:function(i,h,e,g){var j=this;i=d.CreateLambda(i);h=d.CreateLambda(h);if(e!=b)e=d.CreateLambda(e);g=d.CreateLambda(g);return new c(function(){var c;return new f(function(){c=j.ToLookup(i,h,g).ToEnumerable().GetEnumerator()},function(){while(c.MoveNext())return e==b?this.Yield(c.Current()):this.Yield(e(c.Current().Key(),c.Current()));return a},function(){d.Dispose(c)})})},PartitionBy:function(j,i,g,h){var l=this;j=d.CreateLambda(j);i=d.CreateLambda(i);h=d.CreateLambda(h);var k;if(g==b){k=a;g=function(b,a){return new o(b,a)}}else{k=e;g=d.CreateLambda(g)}return new c(function(){var b,n,o,m=[];return new f(function(){b=l.GetEnumerator();if(b.MoveNext()){n=j(b.Current());o=h(n);m.push(i(b.Current()))}},function(){var d;while((d=b.MoveNext())==e)if(o===h(j(b.Current())))m.push(i(b.Current()));else break;if(m.length>0){var f=k?g(n,c.From(m)):g(n,m);if(d){n=j(b.Current());o=h(n);m=[i(b.Current())]}else m=[];return this.Yield(f)}return a},function(){d.Dispose(b)})})},BufferWithCount:function(e){var b=this;return new c(function(){var c;return new f(function(){c=b.GetEnumerator()},function(){var b=[],d=0;while(c.MoveNext()){b.push(c.Current());if(++d>=e)return this.Yield(b)}return b.length>0?this.Yield(b):a},function(){d.Dispose(c)})})},Aggregate:function(c,b,a){return this.Scan(c,b,a).Last()},Average:function(a){a=d.CreateLambda(a);var c=0,b=0;this.ForEach(function(d){c+=a(d);++b});return c/b},Count:function(a){a=a==b?g.True:d.CreateLambda(a);var c=0;this.ForEach(function(d,b){if(a(d,b))++c});return c},Max:function(a){if(a==b)a=g.Identity;return this.Select(a).Aggregate(function(a,b){return a>b?a:b})},Min:function(a){if(a==b)a=g.Identity;return this.Select(a).Aggregate(function(a,b){return aa(c)?b:c})},MinBy:function(a){a=d.CreateLambda(a);return this.Aggregate(function(b,c){return a(b)")})},Force:function(){var a=this.GetEnumerator();try{while(a.MoveNext());}finally{d.Dispose(a)}},Let:function(b){b=d.CreateLambda(b);var e=this;return new c(function(){var g;return new f(function(){g=c.From(b(e)).GetEnumerator()},function(){return g.MoveNext()?this.Yield(g.Current()):a},function(){d.Dispose(g)})})},Share:function(){var e=this,d;return new c(function(){return new f(function(){if(d==b)d=e.GetEnumerator()},function(){return d.MoveNext()?this.Yield(d.Current()):a},g.Blank)})},MemoizeAll:function(){var h=this,e,d;return new c(function(){var c=-1;return new f(function(){if(d==b){d=h.GetEnumerator();e=[]}},function(){c++;return e.length<=c?d.MoveNext()?this.Yield(e[c]=d.Current()):a:this.Yield(e[c])},g.Blank)})},Catch:function(b){b=d.CreateLambda(b);var e=this;return new c(function(){var c;return new f(function(){c=e.GetEnumerator()},function(){try{return c.MoveNext()?this.Yield(c.Current()):a}catch(d){b(d);return a}},function(){d.Dispose(c)})})},Finally:function(b){b=d.CreateLambda(b);var e=this;return new c(function(){var c;return new f(function(){c=e.GetEnumerator()},function(){return c.MoveNext()?this.Yield(c.Current()):a},function(){try{d.Dispose(c)}finally{b()}})})},Trace:function(c,a){if(c==b)c="Trace";a=d.CreateLambda(a);return this.Do(function(b){console.log(c,":",a(b))})}};var g={Identity:function(a){return a},True:function(){return e},Blank:function(){}},i={Boolean:typeof e,Number:typeof 0,String:typeof"",Object:typeof{},Undefined:typeof undefined,Function:typeof function(){}},d={CreateLambda:function(a){if(a==b)return g.Identity;if(typeof a==i.String)if(a=="")return g.Identity;else if(a.indexOf("=>")==-1)return new Function("$,$$,$$$,$$$$","return "+a);else{var c=a.match(/^[(\s]*([^()]*?)[)\s]*=>(.*)/);return new Function(c[1],"return "+c[2])}return a},IsIEnumerable:function(b){if(typeof Enumerator!=i.Undefined)try{new Enumerator(b);return e}catch(c){}return a},Compare:function(a,b){return a===b?0:a>b?1:-1},Dispose:function(a){a!=b&&a.Dispose()}},k={Before:0,Running:1,After:2},f=function(d,f,g){var c=new p,b=k.Before;this.Current=c.Current;this.MoveNext=function(){try{switch(b){case k.Before:b=k.Running;d();case k.Running:if(f.apply(c))return e;else{this.Dispose();return a}case k.After:return a}}catch(g){this.Dispose();throw g;}};this.Dispose=function(){if(b!=k.Running)return;try{g()}finally{b=k.After}}},p=function(){var a=b;this.Current=function(){return a};this.Yield=function(b){a=b;return e}},j=function(f,b,c,e){var a=this;a.source=f;a.keySelector=d.CreateLambda(b);a.descending=c;a.parent=e};j.prototype=new c;j.prototype.CreateOrderedEnumerable=function(a,b){return new j(this.source,a,b,this)};j.prototype.ThenBy=function(b){return this.CreateOrderedEnumerable(b,a)};j.prototype.ThenByDescending=function(a){return this.CreateOrderedEnumerable(a,e)};j.prototype.GetEnumerator=function(){var h=this,d,c,e=0;return new f(function(){d=[];c=[];h.source.ForEach(function(b,a){d.push(b);c.push(a)});var a=l.Create(h,b);a.GenerateKeys(d);c.sort(function(b,c){return a.Compare(b,c)})},function(){return e0:c.prototype.Any.apply(this,arguments)};h.prototype.Count=function(a){return a==b?this.source.length:c.prototype.Count.apply(this,arguments)};h.prototype.ElementAt=function(a){return 0<=a&&a0?this.source[0]:c.prototype.First.apply(this,arguments)};h.prototype.FirstOrDefault=function(a,d){return d!=b?c.prototype.FirstOrDefault.apply(this,arguments):this.source.length>0?this.source[0]:a};h.prototype.Last=function(d){var a=this;return d==b&&a.source.length>0?a.source[a.source.length-1]:c.prototype.Last.apply(a,arguments)};h.prototype.LastOrDefault=function(d,e){var a=this;return e!=b?c.prototype.LastOrDefault.apply(a,arguments):a.source.length>0?a.source[a.source.length-1]:d};h.prototype.Skip=function(d){var b=this.source;return new c(function(){var c;return new f(function(){c=d<0?0:d},function(){return c0?this.Yield(b[--c]):a},g.Blank)})};h.prototype.SequenceEqual=function(d,e){return(d instanceof h||d instanceof Array)&&e==b&&c.From(d).Count()!=this.Count()?a:c.prototype.SequenceEqual.apply(this,arguments)};h.prototype.ToString=function(a,d){if(d!=b||!(this.source instanceof Array))return c.prototype.ToString.apply(this,arguments);if(a==b)a="";return this.source.join(a)};h.prototype.GetEnumerator=function(){var b=this.source,c=0;return new f(g.Blank,function(){return c' + + '
    ' + + '
    ' + + '' + + '
    ' + + '
    '; + container.innerHTML = html; + + var outputEl = document.getElementById('chat-output'); + var inputEl = document.getElementById('chat-input'); + + function addMessage(msg) { + var div = document.createElement('div'); + var t = new Date((msg.Time || 0) * 1000); + var timeStr = t.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); + + var ts = document.createElement('span'); + ts.style.cssText = 'min-width:60px;display:inline-block;'; + ts.textContent = timeStr; + div.appendChild(ts); + + var ns = document.createElement('span'); + ns.style.cssText = 'min-width:130px;display:inline-block;text-align:right;'; + var a = document.createElement('a'); + a.href = '#/' + address + '/player/' + (msg.UserId || ''); + a.textContent = stripHtml(msg.Username || '') + ' :'; + ns.appendChild(a); + div.appendChild(ns); + + var ms = document.createElement('span'); + ms.style.display = 'inline-block'; + ms.textContent = stripHtml(msg.Message || ''); + div.appendChild(ms); + + outputEl.appendChild(div); + if (isScrolledToBottom(outputEl)) outputEl.scrollTop = outputEl.scrollHeight; + } + + function onSubmit() { + var cmd = inputEl.value.trim(); + if (!cmd) return; + Rcon.command('say ' + cmd, 1); + inputEl.value = ''; + } + + function onMessage(msg) { + if (msg.Type !== 'Chat') return; + addMessage(JSON.parse(msg.Message)); + } + + function fetchHistory() { + Rcon.request('chat.tail 512', function (response) { + var messages = JSON.parse(response.Message); + for (var i = 0; i < messages.length; i++) addMessage(messages[i]); + outputEl.scrollTop = outputEl.scrollHeight; + }); + } + + document.getElementById('chat-form').addEventListener('submit', function (e) { e.preventDefault(); onSubmit(); }); + Rcon.on('message', onMessage); + + if (Rcon.isConnected()) fetchHistory(); + else { var _c = function () { fetchHistory(); Rcon.off('connected', _c); }; Rcon.on('connected', _c); } + + return function cleanup() { Rcon.off('message', onMessage); }; +} diff --git a/js/pages/connect.js b/js/pages/connect.js new file mode 100644 index 0000000..ae63127 --- /dev/null +++ b/js/pages/connect.js @@ -0,0 +1,142 @@ +/** + * Connection page — connect form with localStorage persistence. + */ +function ConnectPage(params, container) { + var html = + '
    ' + + '
    ' + + '
    ' + + '

    Connect

    ' + + '' + + '

    Enter the address (including rcon port) and the rcon password below to connect.

    ' + + '
    ' + + '
    ' + + '' + + '' + + '
    ' + + '
    ' + + '' + + '' + + '
    ' + + '
    ' + + '' + + '' + + '
    ' + + '' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    '; + + container.innerHTML = html; + + var addrInput = document.getElementById('connection-address'); + var passInput = document.getElementById('connection-password'); + var saveCheck = document.getElementById('connection-save'); + var errorDiv = document.getElementById('connect-error'); + var savedDiv = document.getElementById('saved-connections'); + var connectionsLimit = 5; + + function loadConnections() { + try { return JSON.parse(localStorage.previousConnections || '[]'); } + catch (e) { return []; } + } + + function saveConnections(conns) { + localStorage.previousConnections = JSON.stringify(conns); + } + + function showError(msg) { + errorDiv.textContent = msg; + errorDiv.style.display = 'block'; + } + + function hideError() { errorDiv.style.display = 'none'; } + + function addConnection(addr, pass) { + var conns = loadConnections(); + conns = conns.filter(function (c) { return c.Address !== addr; }); + conns.push({ Address: addr, Password: pass, date: new Date().toISOString() }); + saveConnections(conns); + } + + function doConnect(addr, pass) { + hideError(); + Rcon.connect(addr, pass); + } + + function renderSaved() { + var conns = loadConnections(); + if (conns.length === 0) { savedDiv.innerHTML = ''; return; } + var display = conns.slice().reverse(); + var shown = connectionsLimit || display.length; + var h = '

    Saved Connections

      '; + for (var i = 0; i < Math.min(shown, display.length); i++) { + var c = display[i]; + h += '
    • ' + c.Address + ' — ' + new Date(c.date).toLocaleString() + '
      • '; + } + h += '
    '; + if (conns.length > 5) { + h += ''; + } + savedDiv.innerHTML = h; + + var links = savedDiv.querySelectorAll('.saved-conn'); + for (var j = 0; j < links.length; j++) { + links[j].addEventListener('click', function (e) { + e.preventDefault(); + doConnect(this.dataset.addr, this.dataset.pass); + }); + } + var toggle = document.getElementById('toggle-conn-limit'); + if (toggle) { + toggle.addEventListener('click', function () { + connectionsLimit = connectionsLimit ? undefined : 5; + renderSaved(); + }); + } + } + + document.getElementById('connect-form').addEventListener('submit', function (e) { + e.preventDefault(); + var addr = addrInput.value.trim(); + var pass = passInput.value.trim(); + if (!addr || !pass) return; + if (saveCheck.checked) addConnection(addr, pass); + doConnect(addr, pass); + }); + + function onConnected() { + window.location.hash = '#/' + Rcon.getAddress() + '/info'; + } + function onDisconnected(ev) { + showError('Connection was closed — Error ' + (ev ? ev.code : 'unknown')); + } + + Rcon.on('connected', onConnected); + Rcon.on('disconnected', onDisconnected); + renderSaved(); + + // Auto-connect from URL — check hash for address and password + var hash = window.location.hash; + var pwMatch = hash.match(/[?&]password=([^&]+)/); + if (pwMatch) { + passInput.value = decodeURIComponent(pwMatch[1]); + window.location.hash = hash.replace(/[?&]password=[^&]+/, ''); + } + var addrMatch = hash.match(/^#\/([^/]+)\//); + if (addrMatch) addrInput.value = addrMatch[1]; + + if (addrInput.value && passInput.value) { + if (saveCheck.checked) addConnection(addrInput.value.trim(), passInput.value.trim()); + doConnect(addrInput.value.trim(), passInput.value.trim()); + } + + return function cleanup() { + Rcon.off('connected', onConnected); + Rcon.off('disconnected', onDisconnected); + }; +} diff --git a/js/pages/console.js b/js/pages/console.js new file mode 100644 index 0000000..6b12434 --- /dev/null +++ b/js/pages/console.js @@ -0,0 +1,80 @@ +/** + * Console page — live console output with command input and history. + */ +function ConsolePage(params, container) { + var html = + '
    ' + + '
    ' + + '
    ' + + '' + + '
    ' + + '
    '; + container.innerHTML = html; + + var outputEl = document.getElementById('console-output'); + var inputEl = document.getElementById('console-input'); + var commandHistory = []; + var historyIndex = 0; + + function addOutput(msg) { + var div = document.createElement('div'); + div.className = msg.Type; + div.textContent = stripHtml(msg.Message); + outputEl.appendChild(div); + if (isScrolledToBottom(outputEl)) outputEl.scrollTop = outputEl.scrollHeight; + } + + function onSubmit() { + var cmd = inputEl.value.trim(); + if (!cmd) return; + addOutput({ Message: cmd, Type: 'Command' }); + commandHistory.push(cmd); + historyIndex = commandHistory.length; + Rcon.command(cmd, 1); + inputEl.value = ''; + } + + function onKeyDown(e) { + if (commandHistory.length === 0) return; + if (e.keyCode === 38) { // Up + historyIndex--; + if (historyIndex < 0) historyIndex = commandHistory.length - 1; + inputEl.value = commandHistory[historyIndex] || ''; + e.preventDefault(); + } else if (e.keyCode === 40) { // Down + historyIndex++; + if (historyIndex >= commandHistory.length) historyIndex = 0; + inputEl.value = commandHistory[historyIndex] || ''; + e.preventDefault(); + } else { + historyIndex = commandHistory.length; + } + } + + function onMessage(msg) { + if (msg.Message && msg.Message.indexOf('[rcon] ') === 0) return; + switch (msg.Type) { + case 'Generic': case 'Log': case 'Error': case 'Warning': + addOutput(msg); break; + } + } + + function fetchHistory() { + Rcon.request('console.tail 128', function (response) { + var messages = JSON.parse(response.Message); + for (var i = 0; i < messages.length; i++) onMessage(messages[i]); + outputEl.scrollTop = outputEl.scrollHeight; + }); + } + + document.getElementById('console-form').addEventListener('submit', function (e) { + e.preventDefault(); onSubmit(); + }); + inputEl.addEventListener('keydown', onKeyDown); + Rcon.on('message', onMessage); + + if (Rcon.isConnected()) fetchHistory(); + else { var _c = function () { fetchHistory(); Rcon.off('connected', _c); }; Rcon.on('connected', _c); } + + return function cleanup() { Rcon.off('message', onMessage); }; +} diff --git a/js/pages/playerInfo.js b/js/pages/playerInfo.js new file mode 100644 index 0000000..1eb9cb7 --- /dev/null +++ b/js/pages/playerInfo.js @@ -0,0 +1,70 @@ +/** + * Player info page — single player detail with quirk fixes. + */ +function PlayerInfoPage(params, container) { + var userid = params[2]; // SteamID from URL + + var html = + '
    ' + + '
    ' + + '
    ' + + '

    ' + + 'Player: ' + userid + '' + + '' + + '

    ' + + '
    ' + + '' + + ' Steam Profile' + + '' + + '
    ' + + '
    ' + + '
    ' + + '

    Info

    ' + + '' + + '
    ' + + '
    ' + + '
    ' + + '
    '; + container.innerHTML = html; + + function refresh() { + Rcon.getPlayers(function (players) { + var info = null; + for (var i = 0; i < players.length; i++) { + if (players[i].SteamID === userid) { info = players[i]; break; } + } + + if (!info) { + document.getElementById('pi-notfound').style.display = 'block'; + document.getElementById('pi-fields').innerHTML = ''; + return; + } + document.getElementById('pi-notfound').style.display = 'none'; + + // Fix known Rust RCON quirk: VoiationLevel → ViolationLevel + if (info.VoiationLevel !== undefined) { + info.ViolationLevel = info.VoiationLevel; + delete info.VoiationLevel; + } + + // Remove XP remnants + delete info.CurrentLevel; + delete info.UnspentXp; + + document.getElementById('pi-username').textContent = info.DisplayName || userid; + + var fieldsHtml = ''; + for (var key in info) { + if (info.hasOwnProperty(key)) { + fieldsHtml += '

    ' + key + ': ' + info[key] + '

    '; + } + } + document.getElementById('pi-fields').innerHTML = fieldsHtml; + }); + } + + document.getElementById('pi-refresh').addEventListener('click', refresh); + + if (Rcon.isConnected()) refresh(); + else { var _c = function () { refresh(); Rcon.off('connected', _c); }; Rcon.on('connected', _c); } +} diff --git a/js/pages/playerlist.js b/js/pages/playerlist.js new file mode 100644 index 0000000..2667f41 --- /dev/null +++ b/js/pages/playerlist.js @@ -0,0 +1,141 @@ +/** + * Player list page — table with sort, filter, and kick. + */ +function PlayerListPage(params, container) { + var address = Rcon.getAddress() || ''; + + var html = + '
    ' + + '
    ' + + '
    ' + + '' + + '
    ' + + '
    ' + + '' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '
    ActionsUsernameSteam IDViolation LevelAddressPingDuration
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    '; + container.innerHTML = html; + + var players = []; + var orderBy = '-ConnectedSeconds'; + var filterText = ''; + + function sortPlayers(a, b) { + var desc = orderBy[0] === '-'; + var field = desc ? orderBy.substring(1) : orderBy; + var va = a[field], vb = b[field]; + if (typeof va === 'string') va = va.toLowerCase(); + if (typeof vb === 'string') vb = vb.toLowerCase(); + if (va < vb) return desc ? 1 : -1; + if (va > vb) return desc ? -1 : 1; + return 0; + } + + function matchesFilter(p) { + if (!filterText) return true; + var ft = filterText.toLowerCase(); + return (p.DisplayName && p.DisplayName.toLowerCase().indexOf(ft) !== -1) || + (p.SteamID && p.SteamID.indexOf(ft) !== -1) || + (p.Address && p.Address.toLowerCase().indexOf(ft) !== -1); + } + + function render() { + var filtered = players.filter(matchesFilter).sort(sortPlayers); + var tbody = document.getElementById('player-tbody'); + var html = ''; + for (var i = 0; i < filtered.length; i++) { + var p = filtered[i]; + var fadeClass = (p.VoiationLevel === 0) ? ' class="fade"' : ''; + html += + '' + + '' + + '
    ' + + '' + + '' + + '
    ' + + '' + + '' + (p.DisplayName || '') + '' + + '' + p.SteamID + '' + + '' + (p.VoiationLevel || 0) + '' + + '' + (p.Address || '') + '' + + '' + (p.Ping || 0) + '' + + '' + secondsToDuration(p.ConnectedSeconds || 0) + '' + + ''; + } + tbody.innerHTML = html; + + // Bind kick buttons + var kicks = tbody.querySelectorAll('.kick-player'); + for (var j = 0; j < kicks.length; j++) { + kicks[j].addEventListener('click', function (e) { + e.preventDefault(); + Rcon.command('kick ' + this.dataset.id); + refresh(); + }); + } + } + + function refresh() { + Rcon.getPlayers(function (list) { + players = list; + render(); + }); + } + + function updateSortHeaders() { + var headers = document.querySelectorAll('#player-table .sortable'); + for (var i = 0; i < headers.length; i++) { + headers[i].className = headers[i].className.replace(/sorting(\s+descending)?/g, '').trim(); + var field = headers[i].dataset.field; + if (orderBy === field) headers[i].className += ' sorting'; + else if (orderBy === '-' + field) headers[i].className += ' sorting descending'; + } + } + + document.getElementById('player-refresh').addEventListener('click', refresh); + document.getElementById('player-filter').addEventListener('input', function () { + filterText = this.value; + render(); + }); + + // Sort header clicks + var sortHeaders = document.querySelectorAll('#player-table .sortable'); + for (var k = 0; k < sortHeaders.length; k++) { + sortHeaders[k].addEventListener('click', function () { + var field = this.dataset.field; + orderBy = (orderBy === field) ? '-' + field : field; + updateSortHeaders(); + render(); + }); + } + + if (Rcon.isConnected()) { refresh(); updateSortHeaders(); } + else { var _c = function () { refresh(); updateSortHeaders(); Rcon.off('connected', _c); }; Rcon.on('connected', _c); } +} diff --git a/js/pages/serverInfo.js b/js/pages/serverInfo.js new file mode 100644 index 0000000..a9617bc --- /dev/null +++ b/js/pages/serverInfo.js @@ -0,0 +1,188 @@ +/** + * Server info page — live dashboard with D3/NVD3 charts. + */ +function ServerInfoPage(params, container) { + var DATA_LIMIT = 100; + var recordedData = []; + + var html = + '
    ' + + '
    ' + + '

    Server Info

    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '' + + '

    Server Performance

    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '' + + '

    Server Networking

    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '' + + '

    Players

    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    ' + + '
    '; + container.innerHTML = html; + + // ---- NVD3 Charts ---- + nv.addGraph(function () { + var perfChart = nv.models.multiChart() + .margin({ top: 30, right: 75, bottom: 40, left: 75 }) + .color(['darkred', 'yellowgreen']) + .useInteractiveGuideline(true) + .duration(0); + perfChart.yAxis1.axisLabel('Framerate').tickFormat(d3.format(',d')); + perfChart.yAxis2.axisLabel('Entities').tickFormat(d3.format(',d')); + perfChart.xAxis.axisLabel('Time').tickFormat(function (d) { return d3.time.format('%H:%M:%S')(new Date(d)); }); + perfChart.lines1.duration(0); + perfChart.lines2.duration(0); + + d3.select('#chart-performance').datum([ + { key: 'Framerate', type: 'line', yAxis: 1, values: [] }, + { key: 'Entities', type: 'line', yAxis: 2, values: [] } + ]).call(perfChart); + + window._perfChart = perfChart; + }); + + nv.addGraph(function () { + var netChart = nv.models.stackedAreaChart() + .margin({ top: 0, right: 75, bottom: 40, left: 75 }) + .useInteractiveGuideline(true) + .duration(0); + netChart.yAxis.axisLabel('Network').tickFormat(function (bytes) { + var fmt = d3.format('.0f'); + if (bytes < 1024) return fmt(bytes) + 'B'; + if (bytes < 1048576) return fmt(bytes / 1024) + 'kB'; + if (bytes < 1073741824) return fmt(bytes / 1048576) + 'MB'; + return fmt(bytes / 1073741824) + 'GB'; + }); + netChart.xAxis.axisLabel('Time').tickFormat(function (d) { return d3.time.format('%H:%M:%S')(new Date(d)); }); + + d3.select('#chart-network').datum([ + { key: 'IN', values: [] }, + { key: 'OUT', values: [] } + ]).call(netChart); + + window._netChart = netChart; + }); + + nv.addGraph(function () { + var playersChart = nv.models.pieChart() + .x(function (d) { return d.key; }) + .y(function (d) { return d.y; }) + .showLabels(true) + .donut(true) + .duration(500) + .height(250) + .margin({ top: 0, right: 75, bottom: 0, left: 75 }); + playersChart.pie.startAngle(function (d) { return d.startAngle / 2 - Math.PI / 2; }); + playersChart.pie.endAngle(function (d) { return d.endAngle / 2 - Math.PI / 2; }); + + d3.select('#chart-players').datum([]).call(playersChart); + + window._playersChart = playersChart; + }); + + // ---- Data polling ---- + var pollTimer = null; + + function refresh() { + Rcon.request('serverinfo', function (msg) { + updateData(JSON.parse(msg.Message)); + }); + } + + function updateData(data) { + // Update text fields + var fieldsHtml = ''; + for (var key in data) { + if (data.hasOwnProperty(key)) { + var val = data[key]; + if (typeof val === 'number') val = formatNumber(val); + fieldsHtml += '

    ' + key + ': ' + val + '

    '; + } + } + document.getElementById('si-fields').innerHTML = fieldsHtml; + if (data.Hostname) document.getElementById('si-hostname').textContent = data.Hostname; + + // Collect chart data + recordedData.push({ ts: Date.now(), data: data }); + if (recordedData.length > DATA_LIMIT) { + recordedData = recordedData.slice(recordedData.length - DATA_LIMIT); + } + updateCharts(data); + } + + function updateCharts(data) { + // Players pie chart + if (window._playersChart) { + d3.select('#chart-players').datum([ + { key: 'Queued', y: data.Queued || 0 }, + { key: 'Joining', y: data.Joining || 0 }, + { key: 'Players', y: data.Players || 0 }, + { key: 'Free', y: (data.MaxPlayers || 0) - ((data.Joining || 0) + (data.Players || 0)) } + ]).call(window._playersChart); + } + + // Performance chart + var fpsVals = [], entVals = [], netInVals = [], netOutVals = []; + for (var i = 0; i < recordedData.length; i++) { + var r = recordedData[i]; + fpsVals.push({ x: r.ts, y: r.data.Framerate || 0 }); + entVals.push({ x: r.ts, y: r.data.EntityCount || 0 }); + netInVals.push({ x: r.ts, y: r.data.NetworkIn || 0 }); + netOutVals.push({ x: r.ts, y: r.data.NetworkOut || 0 }); + } + + if (window._perfChart) { + d3.select('#chart-performance').datum([ + { key: 'Framerate', type: 'line', yAxis: 1, values: fpsVals }, + { key: 'Entities', type: 'line', yAxis: 2, values: entVals } + ]).call(window._perfChart); + } + + if (window._netChart) { + d3.select('#chart-network').datum([ + { key: 'IN', values: netInVals }, + { key: 'OUT', values: netOutVals } + ]).call(window._netChart); + } + } + + function startPolling() { + refresh(); + pollTimer = setInterval(refresh, 1000); + } + + if (Rcon.isConnected()) startPolling(); + else { var _c = function () { startPolling(); Rcon.off('connected', _c); }; Rcon.on('connected', _c); } + + return function cleanup() { + if (pollTimer) clearInterval(pollTimer); + window._perfChart = null; + window._netChart = null; + window._playersChart = null; + }; +} diff --git a/js/playerInfo.js b/js/playerInfo.js deleted file mode 100644 index aebbdca..0000000 --- a/js/playerInfo.js +++ /dev/null @@ -1,55 +0,0 @@ - -app.controller( 'PlayerInfoController', PlayerInfoController ); - -function PlayerInfoController( $scope, rconService, $routeParams ) -{ - $scope.userid = $routeParams.userid; - - $scope.info = null; - - $scope.refresh = function () - { - rconService.getPlayers($scope, function(players) { - - for(var i in players) { - if(players[i].SteamID === $scope.userid){ - - // set player data - $scope.info = players[i]; - - // remove xp remnants - if ($scope.info['CurrentLevel'] !== undefined) - delete $scope.info['CurrentLevel']; - if ($scope.info['UnspentXp'] !== undefined) - delete $scope.info['UnspentXp']; - - // fix violation level - if ($scope.info['VoiationLevel'] !== undefined){ - var violationLevel = $scope.info['VoiationLevel']; - delete $scope.info['VoiationLevel']; - $scope.info['ViolationLevel'] = violationLevel; - } - - return; - } - } - - // player not found - // reset data to null - $scope.info = null; - }); - } - - $scope.getUsername = function () - { - // try to find players name in info - if($scope.info && $scope.info.DisplayName) { - return $scope.info.DisplayName; - } - - // otherwise show the id - return $scope.userid; - } - - rconService.InstallService( $scope, $scope.refresh ) -} \ No newline at end of file diff --git a/js/playerlist.js b/js/playerlist.js deleted file mode 100644 index 013dfcb..0000000 --- a/js/playerlist.js +++ /dev/null @@ -1,50 +0,0 @@ - -app.controller( 'PlayerListController', PlayerListController ); - -function PlayerListController( $scope, rconService, $interval ) -{ - $scope.Output = []; - $scope.OrderBy = '-ConnectedSeconds'; - - $scope.Refresh = function () - { - rconService.getPlayers($scope, function ( players ) - { - $scope.Players = players; - }); - } - - $scope.Order = function( field ) - { - if ( $scope.OrderBy === field ) - { - field = '-' + field; - } - - $scope.OrderBy = field; - } - - $scope.SortClass = function( field ) - { - if ( $scope.OrderBy === field ) return "sorting"; - if ( $scope.OrderBy === "-" + field ) return "sorting descending"; - - return null; - } - - $scope.KickPlayer = function ( id ) - { - rconService.Command( 'kick ' + id ); - - $scope.Refresh(); - } - - rconService.InstallService( $scope, $scope.Refresh ) - - // var timer = $interval( function () - // { - // //$scope.Refresh(); - // }.bind( this ), 1000 ); - - //$scope.$on( '$destroy', function () { $interval.cancel( timer ) } ) -} \ No newline at end of file diff --git a/js/rcon.js b/js/rcon.js new file mode 100644 index 0000000..d83c8ed --- /dev/null +++ b/js/rcon.js @@ -0,0 +1,181 @@ +/** + * Rust WebSocket RCON Client — pure vanilla JS, zero dependencies. + * + * Protocol: + * - Connect: ws://host:port/password + * - Outgoing: { Identifier: int, Message: string, Name: "WebRcon" } + * - Identifier > 1000 → request/response (callback tracked) + * - Identifier <= 1000 → unsolicited server push (Generic/Log/Error/Warning/Chat) + * + * Usage: + * Rcon.on('connected', () => { ... }); + * Rcon.on('disconnected', (ev) => { ... }); + * Rcon.on('message', (msg) => { ... }); + * Rcon.connect('192.168.1.100:28016', 'mypassword'); + * Rcon.request('serverinfo', (msg) => { console.log(JSON.parse(msg.Message)); }); + * Rcon.command('say Hello world'); + * Rcon.getPlayers((players) => { ... }); + */ +var Rcon = (function () { + 'use strict'; + + var ConnectionStatus = { + CONNECTING: 0, + OPEN: 1, + CLOSING: 2, + CLOSED: 3 + }; + + var socket = null; + var address = null; + var callbacks = {}; + var lastIndex = 1001; + var listeners = {}; + + /** + * Simple pub/sub event emitter. + */ + function emit(event, data) { + var cbs = listeners[event]; + if (cbs) { + for (var i = 0; i < cbs.length; i++) { + cbs[i](data); + } + } + } + + /** + * Connect to a Rust server's WebSocket RCON. + * @param {string} addr - "host:port" + * @param {string} pass - RCON password + */ + function connect(addr, pass) { + disconnect(); + address = addr; + socket = new WebSocket('ws://' + addr + '/' + pass); + + socket.onopen = function () { + emit('connected'); + }; + + socket.onclose = function (ev) { + emit('disconnected', ev); + }; + + socket.onerror = function (ev) { + emit('error', ev); + }; + + socket.onmessage = function (e) { + var data = JSON.parse(e.data); + + // Targeted response — match to pending callback + if (data.Identifier > 1000) { + var cb = callbacks[data.Identifier]; + if (cb) { + cb(data); + } + delete callbacks[data.Identifier]; + return; + } + + // Unsolicited server push (console, chat, etc.) + emit('message', data); + }; + } + + /** + * Disconnect from the server. + */ + function disconnect() { + callbacks = {}; + if (socket) { + socket.close(); + socket = null; + } + address = null; + } + + /** + * Send a fire-and-forget command (no response expected). + * @param {string} msg - RCON command + * @param {number} [identifier] - Defaults to -1 + */ + function command(msg, identifier) { + if (!socket || !isConnected()) return; + if (identifier === undefined || identifier === null) { + identifier = -1; + } + socket.send(JSON.stringify({ + Identifier: identifier, + Message: msg, + Name: 'WebRcon' + })); + } + + /** + * Send a command and invoke callback with the response. + * @param {string} msg - RCON command + * @param {function} cb - callback(response) + */ + function request(msg, cb) { + lastIndex++; + callbacks[lastIndex] = cb; + command(msg, lastIndex); + } + + /** + * Returns true if the WebSocket is open. + */ + function isConnected() { + return socket !== null && socket.readyState === ConnectionStatus.OPEN; + } + + /** + * Get the current connected address (host:port). + */ + function getAddress() { + return address; + } + + /** + * Convenience: fetch the player list. + * @param {function} cb - callback(playersArray) + */ + function getPlayers(cb) { + request('playerlist', function (response) { + cb(JSON.parse(response.Message)); + }); + } + + /** + * Register an event listener. + * Events: 'connected', 'disconnected', 'error', 'message' + */ + function on(event, cb) { + if (!listeners[event]) listeners[event] = []; + listeners[event].push(cb); + } + + /** + * Remove an event listener. + */ + function off(event, cb) { + var cbs = listeners[event]; + if (cbs) { + listeners[event] = cbs.filter(function (f) { return f !== cb; }); + } + } + + return { + connect: connect, + disconnect: disconnect, + command: command, + request: request, + isConnected: isConnected, + getAddress: getAddress, + getPlayers: getPlayers, + on: on, + off: off + }; +})(); diff --git a/js/rconService.js b/js/rconService.js deleted file mode 100644 index 7750daa..0000000 --- a/js/rconService.js +++ /dev/null @@ -1,131 +0,0 @@ -function RconService() { - - var ConnectionStatus = { - 'CONNECTING': 0, - 'OPEN': 1, - 'CLOSING': 2, - 'CLOSED': 3 - }; - - var Service = { - Socket: null, - Address: null, - Callbacks: {} - }; - - var LastIndex = 1001; - - Service.Connect = function(addr, pass) { - this.Socket = new WebSocket("ws://" + addr + "/" + pass); - this.Address = addr; - - this.Socket.onmessage = function(e) { - var data = angular.fromJson(e.data); - - // - // This is a targetted message, it has an identifier - // So feed it back to the right callback. - // - if (data.Identifier > 1000) { - var cb = Service.Callbacks[data.Identifier]; - if (cb != null) { - cb.scope.$apply(function() { - cb.callback(data); - }); - } - Service.Callbacks[data.Identifier] = null; - - return; - } - - // - // Generic console message, let OnMessage catch it - // - if (Service.OnMessage != null) { - Service.OnMessage(data); - } - }; - - this.Socket.onopen = this.OnOpen; - this.Socket.onclose = this.OnClose; - this.Socket.onerror = this.OnError; - } - - Service.Disconnect = function() { - if (this.Socket) { - this.Socket.close(); - this.Socket = null; - } - - this.Callbacks = {}; - } - - Service.Command = function(msg, identifier) { - if (this.Socket === null) - return; - - if (!this.IsConnected()) - return; - - if (identifier === null) - identifier = -1; - - var packet = { - Identifier: identifier, - Message: msg, - Name: "WebRcon" - }; - - this.Socket.send(JSON.stringify(packet)); - }; - - // - // Make a request, call this function when it returns - // - Service.Request = function(msg, scope, callback) { - LastIndex++; - this.Callbacks[LastIndex] = { - scope: scope, - callback: callback - }; - Service.Command(msg, LastIndex); - } - - // - // Returns true if websocket is connected - // - Service.IsConnected = function() { - if (this.Socket == null) - return false; - - return this.Socket.readyState === ConnectionStatus.OPEN; - } - - // - // Helper for installing connectivity logic - // - // Basically if not connected, call this function when we are - // And if we are - then call it right now. - // - Service.InstallService = function(scope, func) { - scope.$on("OnConnected", function() { - func(); - }); - - if (this.IsConnected()) { - func(); - } - } - - Service.getPlayers = function(scope, success) { - this.Request("playerlist", scope, function(response) { - var players = JSON.parse(response.Message); - - if (typeof success === 'function') { - success.call(scope, players); - } - }); - } - - return Service; -} diff --git a/js/router.js b/js/router.js new file mode 100644 index 0000000..ea0f72a --- /dev/null +++ b/js/router.js @@ -0,0 +1,80 @@ +/** + * Minimal hash-based SPA router. + * + * Route format: { pattern: RegExp, title: string, template: string, onEnter: function(params, container) } + * + * The first matching route's onEnter is called with parsed params and a container element. + * The container is cleared before each navigation. + * + * Usage: + * Router.add(/^\/(.+)\/info$/, 'Server', 'html/serverInfo.html', ServerInfoPage); + * Router.add(/^\/(.+)\/player\/(.+)$/, 'Player Info', 'html/playerInfo.html', PlayerInfoPage); + * Router.start('#app-view'); + */ +var Router = (function () { + 'use strict'; + + var routes = []; + var viewSelector = null; + var currentCleanup = null; + + function add(pattern, title, template, onEnter) { + routes.push({ pattern: pattern, title: title, template: template, onEnter: onEnter }); + } + + function navigate(hash) { + // strip leading # and optional / + var path = (hash || '').replace(/^#\/?/, '/'); + if (!path || path === '/') path = '/home'; + + for (var i = 0; i < routes.length; i++) { + var r = routes[i]; + var match = path.match(r.pattern); + if (match) { + // Store params for later use + var container = document.querySelector(viewSelector); + if (!container) return; + + // Cleanup previous page + if (currentCleanup && typeof currentCleanup === 'function') { + currentCleanup(); + currentCleanup = null; + } + + // Clear container + container.innerHTML = ''; + + // Call onEnter with match groups + container + if (typeof r.onEnter === 'function') { + var result = r.onEnter(match, container); + if (typeof result === 'function') { + currentCleanup = result; + } + } + return; + } + } + } + + function start(selector) { + viewSelector = selector; + window.addEventListener('hashchange', function () { + navigate(window.location.hash); + }); + // Initial navigation + if (window.location.hash) { + navigate(window.location.hash); + } + } + + function go(hash) { + window.location.hash = hash; + } + + return { + add: add, + start: start, + go: go, + navigate: navigate + }; +})(); diff --git a/js/serverInfo.js b/js/serverInfo.js deleted file mode 100644 index 8dacc45..0000000 --- a/js/serverInfo.js +++ /dev/null @@ -1,231 +0,0 @@ -app.controller('ServerInfoController', ServerInfoController); - -var DATA_LIMIT = 100; -var recordedData = []; - -function ServerInfoController($scope, rconService, $routeParams, $interval) { - $scope.useCharts = false; - - // TODO: move serverinfo to service - $scope.serverinfo = {}; - - $scope.playersChart = { - options: { - chart: { - type: 'pieChart', - height: 250, - margin: { - top: 0, - right: 75, - bottom: 0, - left: 75 - }, - donut: true, - x: function(d) { - return d.key; - }, - y: function(d) { - return d.y; - }, - yAxis: { - axisLabel: 'Slots', - tickFormat: function(d) { - return d3.format('.d')(d); - } - }, - showLabels: true, - pie: { - startAngle: function(d) { - return d.startAngle / 2 - Math.PI / 2 - }, - endAngle: function(d) { - return d.endAngle / 2 - Math.PI / 2 - } - }, - duration: 500 - } - }, - data: [] - }; - - $scope.performanceChart = { - options: { - chart: { - type: 'multiChart', - height: 200, - margin: { - top: 30, - right: 75, - bottom: 40, - left: 75 - }, - color: [ - 'darkred', 'yellowgreen' - ], - duration: 0, - lines1: { - duration: 0 - }, - lines2: { - duration: 0 - }, - useInteractiveGuideline: true, - yAxis1: { - axisLabel: 'Framerate', - tickFormat: function(d) { - return d3.format(',d')(d); - } - }, - yAxis2: { - axisLabel: 'Entities', - tickFormat: function(d) { - return d3.format(',d')(d); - }, - // axisLabelDistance: 12 - }, - xAxis: { - axisLabel: "Time", - tickFormat: function(d) { - return d3.time.format('%H:%M:%S')(new Date(d)) - } - } - } - }, - data: [ - { - key: 'Framerate', - type: "line", - duration: 0, - yAxis: 1, - values: [] - }, { - key: 'Entities', - type: 'line', - duration: 0, - yAxis: 2, - values: [] - } - ] - }; - - $scope.netChart = { - options: { - chart: { - type: 'stackedAreaChart', - height: 250, - margin: { - top: 0, - right: 75, - bottom: 40, - left: 75 - }, - useVoronoi: false, - duration: 0, - useInteractiveGuideline: true, - yAxis: { - axisLabel: 'Network', - tickFormat: function(bytes) { - var fmt = d3.format('.0f'); - if (bytes < 1024) { - return fmt(bytes) + 'B'; - } else if (bytes < 1024 * 1024) { - return fmt(bytes / 1024) + 'kB'; - } else if (bytes < 1024 * 1024 * 1024) { - return fmt(bytes / 1024 / 1024) + 'MB'; - } else { - return fmt(bytes / 1024 / 1024 / 1024) + 'GB'; - } - } - }, - xAxis: { - axisLabel: "Time", - tickFormat: function(d) { - return d3.time.format('%H:%M:%S')(new Date(d)) - } - } - } - }, - data: [ - { - key: 'IN', - values: [] - }, { - key: 'OUT', - values: [] - } - ] - }; - - rconService.InstallService($scope, _refresh); - - // TODO: move updateinterval to service - var timer = $interval(_refresh, 1000); - $scope.$on("$destroy", function() { - $interval.cancel(timer); - $scope.serverinfo = {}; - }); - - function _refresh() { - rconService.Request('serverinfo', $scope, function(msg) { - _updateData(JSON.parse(msg.Message)); - }); - } - - function _updateData(data) { - $scope.serverinfo = data; - - if ($scope.useCharts) { - _collectChartData(data); - _generateChartData(); - } - } - - function _collectChartData(data) { - // player chart - $scope.playersChart.data = [ - { - key: 'Queued', - y: data.Queued - }, { - key: 'Joining', - y: data.Joining - }, { - key: 'Players', - y: data.Players - }, { - key: 'Free', - y: (data.MaxPlayers - (data.Joining + data.Players)) - } - ]; - - recordedData.push({ts: Date.now(), data: data}); - if (recordedData.length > DATA_LIMIT) { - recordedData = recordedData.slice(Math.max(recordedData.length - DATA_LIMIT, 1)); - } - } - - function _generateChartData() { - - var fpsChartValues = []; - var entChartValues = []; - - var netInChartValues = []; - var netOutChartValues = []; - - for (var i = 0; i < recordedData.length; i++) { - var record = recordedData[i]; - fpsChartValues.push({x: record.ts, y: record.data.Framerate}); - entChartValues.push({x: record.ts, y: record.data.EntityCount}); - - netInChartValues.push({x: record.ts, y: record.data.NetworkIn}); - netOutChartValues.push({x: record.ts, y: record.data.NetworkOut}); - } - - $scope.performanceChart.data[0].values = fpsChartValues; - $scope.performanceChart.data[1].values = entChartValues; - - $scope.netChart.data[0].values = netInChartValues; - $scope.netChart.data[1].values = netOutChartValues; - } - -} diff --git a/js/utils.js b/js/utils.js new file mode 100644 index 0000000..5b39be3 --- /dev/null +++ b/js/utils.js @@ -0,0 +1,47 @@ +/** + * Utility functions shared across pages. + */ + +/** + * Convert seconds to a human-readable duration string. + * e.g., 3723 → "1h2m3s" + */ +function secondsToDuration(input) { + input = parseInt(input, 10); + if (isNaN(input)) return '0s'; + + var out = ''; + var hours = Math.floor(input / 3600); + if (hours > 0) out += hours + 'h'; + + var minutes = Math.floor((input % 3600) / 60); + if (minutes > 0) out += minutes + 'm'; + + var seconds = input % 60; + out += seconds + 's'; + + return out; +} + +/** + * Strip HTML tags from a string. + */ +function stripHtml(text) { + return text ? String(text).replace(/<[^>]+>/gm, '') : ''; +} + +/** + * Format a number with locale-aware separators (fallback). + */ +function formatNumber(n) { + n = parseInt(n, 10); + if (isNaN(n)) return '0'; + return n.toLocaleString ? n.toLocaleString() : String(n); +} + +/** + * Check if user is scrolled to the bottom of an element. + */ +function isScrolledToBottom(el) { + return (el.scrollTop + el.clientHeight) >= (el.scrollHeight - 10); +} diff --git a/nginx.example.conf b/nginx.example.conf new file mode 100644 index 0000000..5c7871b --- /dev/null +++ b/nginx.example.conf @@ -0,0 +1,24 @@ +# Example nginx config for WebRcon +# Copy the project files to /var/www/webrcon (or wherever you like) +# and symlink this file into /etc/nginx/sites-enabled/ + +server { + listen 80; + server_name rcon.yourdomain.com; + + root /var/www/webrcon; + index index.html; + + # SPA routing — all paths serve index.html + location / { + try_files $uri $uri/ /index.html; + } + + # Cache static assets aggressively (all deps are CDN-loaded anyway) + location ~* \.(css|js|svg|png|jpg|jpeg|gif|ico)$ { + expires 30d; + add_header Cache-Control "public, immutable"; + } + + # No backend — browser talks WebSocket directly to the game server +} diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 115c6ed..0000000 --- a/package-lock.json +++ /dev/null @@ -1,250 +0,0 @@ -{ - "name": "webrcon", - "lockfileVersion": 3, - "requires": true, - "packages": { - "": { - "name": "webrcon", - "devDependencies": { - "http-server": "^0.9.0" - } - }, - "node_modules/async": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz", - "integrity": "sha512-XQJ3MipmCHAIBBMFfu2jaSetneOrXbSyyqeU3Nod867oNOpS+i9FEms5PWgjMxSgBybRf2IVVLtr1YfrDO+okg==", - "dev": true - }, - "node_modules/colors": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz", - "integrity": "sha512-pFGrxThWcWQ2MsAz6RtgeWe4NK2kUE1WfsrvvlctdII745EW9I0yflqhe7++M5LEc7bV2c/9/5zc8sFcpL0Drw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.1.90" - } - }, - "node_modules/corser": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", - "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.4.0" - } - }, - "node_modules/ecstatic": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-1.4.1.tgz", - "integrity": "sha512-VC4nmLt4/3KmKbSXxREmJMs+iAB+VdOzMyugV4YzG6d/2NcHa+b0J5/zKGRWS7efwNLEZP2AIodUUm12wOglng==", - "deprecated": "This package is unmaintained and deprecated. See the GH Issue 259.", - "dev": true, - "license": "MIT", - "dependencies": { - "he": "^0.5.0", - "mime": "^1.2.11", - "minimist": "^1.1.0", - "url-join": "^1.0.0" - }, - "bin": { - "ecstatic": "lib/ecstatic.js" - } - }, - "node_modules/eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", - "dev": true, - "license": "MIT" - }, - "node_modules/follow-redirects": { - "version": "1.16.0", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz", - "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==", - "dev": true, - "funding": [ - { - "type": "individual", - "url": "https://github.com/sponsors/RubenVerborgh" - } - ], - "license": "MIT", - "engines": { - "node": ">=4.0" - }, - "peerDependenciesMeta": { - "debug": { - "optional": true - } - } - }, - "node_modules/he": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/he/-/he-0.5.0.tgz", - "integrity": "sha512-DoufbNNOFzwRPy8uecq+j+VCPQ+JyDelHTmSgygrA5TsR8Cbw4Qcir5sGtWiusB4BdT89nmlaVDhSJOqC/33vw==", - "dev": true, - "license": "MIT", - "bin": { - "he": "bin/he" - } - }, - "node_modules/http-proxy": { - "version": "1.18.1", - "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", - "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "eventemitter3": "^4.0.0", - "follow-redirects": "^1.0.0", - "requires-port": "^1.0.0" - }, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/http-server": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/http-server/-/http-server-0.9.0.tgz", - "integrity": "sha512-ufsBg3xl4RRokW37Kg1uGS4MKkpfXqRrtuKYDT9QaBxqix9IHZ2QbOk2RDTOM8MJjWRzjozCC5heZX/azjKB6Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "colors": "1.0.3", - "corser": "~2.0.0", - "ecstatic": "^1.4.0", - "http-proxy": "^1.8.1", - "opener": "~1.4.0", - "optimist": "0.6.x", - "portfinder": "0.4.x", - "union": "~0.4.3" - }, - "bin": { - "hs": "bin/http-server", - "http-server": "bin/http-server" - } - }, - "node_modules/mime": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", - "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", - "dev": true, - "license": "MIT", - "bin": { - "mime": "cli.js" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/minimist": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", - "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", - "dev": true, - "license": "MIT", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/mkdirp": { - "version": "0.5.6", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", - "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", - "dev": true, - "license": "MIT", - "dependencies": { - "minimist": "^1.2.6" - }, - "bin": { - "mkdirp": "bin/cmd.js" - } - }, - "node_modules/opener": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz", - "integrity": "sha512-4Im9TrPJcjAYyGR5gBe3yZnBzw5n3Bfh1ceHHGNOpMurINKc6RdSIPXMyon4BZacJbJc36lLkhipioGbWh5pwg==", - "dev": true, - "license": "(WTFPL OR MIT)", - "bin": { - "opener": "opener.js" - } - }, - "node_modules/optimist": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", - "integrity": "sha512-snN4O4TkigujZphWLN0E//nQmm7790RYaE53DdL7ZYwee2D8DDo9/EyYiKUfN3rneWUjhJnueija3G9I2i0h3g==", - "dev": true, - "license": "MIT/X11", - "dependencies": { - "minimist": "~0.0.1", - "wordwrap": "~0.0.2" - } - }, - "node_modules/optimist/node_modules/minimist": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", - "integrity": "sha512-iotkTvxc+TwOm5Ieim8VnSNvCDjCK9S8G3scJ50ZthspSxa7jx50jkhYduuAtAjvfDUwSgOwf8+If99AlOEhyw==", - "dev": true, - "license": "MIT" - }, - "node_modules/portfinder": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-0.4.0.tgz", - "integrity": "sha512-SZ3hp61WVhwNSS0gf0Fdrx5Yb/wl35qisHuPVM1S0StV8t5XlVZmmJy7/417OELJA7t6ecEmeEzvOaBwq3kCiQ==", - "dev": true, - "license": "MIT/X11", - "dependencies": { - "async": "0.9.0", - "mkdirp": "0.5.x" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/qs": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz", - "integrity": "sha512-f5M0HQqZWkzU8GELTY8LyMrGkr3bPjKoFtTkwUEqJQbcljbeK8M7mliP9Ia2xoOI6oMerp+QPS7oYJtpGmWe/A==", - "dev": true - }, - "node_modules/requires-port": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", - "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", - "dev": true, - "license": "MIT" - }, - "node_modules/union": { - "version": "0.4.6", - "resolved": "https://registry.npmjs.org/union/-/union-0.4.6.tgz", - "integrity": "sha512-2qtrvSgD0GKotLRCNYkIMUOzoaHjXKCtbAP0kc5Po6D+RWTBb+BxlcHlHCYcf+Y+YM7eQicPgAg9mnWQvtoFVA==", - "dev": true, - "dependencies": { - "qs": "~2.3.3" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/url-join": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/url-join/-/url-join-1.1.0.tgz", - "integrity": "sha512-zz1wZk4Lb5PTVwZ3HWDmm8XnlPvmOof6/fjdDPA5yBrUcbtV64U6bV832Zf1BtU2WkBBWaUT46wCs+l0HP5nhg==", - "dev": true, - "license": "MIT" - }, - "node_modules/wordwrap": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", - "integrity": "sha512-1tMA907+V4QmxV7dbRvb4/8MaRALK6q9Abid3ndMYnbyo8piisCmeONVqVSXqQA3KaP4SLt5b7ud6E2sqP8TFw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.4.0" - } - } - } -} diff --git a/package.json b/package.json deleted file mode 100644 index ff94bf2..0000000 --- a/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "webrcon", - "description": "Game server Rcon, using websockets", - "repository": { - "type": "git", - "url": "https://github.com/Facepunch/webrcon" - }, - "scripts": { - "server": "http-server -p 8888", - "start": "npm run server" - }, - "devDependencies": { - "http-server": "^0.9.0" - } -} diff --git a/rcon.css b/rcon.css index 90b6a00..9690e01 100644 --- a/rcon.css +++ b/rcon.css @@ -1,79 +1,63 @@ @import url(https://fonts.googleapis.com/css?family=Roboto:400,700); -body -{ +:root { + --rcon-bg: #252830; + --rcon-text: #cfd2da; + --rcon-accent: #1ca8dd; + --rcon-card-bg: #434857; +} + +body { font-family: "Roboto", sans-serif; font-size: 14px; font-weight: 300; - line-height: 1.5; - color: #cfd2da; - background-color: #252830; } -a -{ - color: #1ca8dd; +a { color: var(--rcon-accent); } +a:hover { color: #fff; text-decoration: none; } + +/* Console output */ +#ConsoleController .Output { + font-family: monospace; + font-size: 12px; + white-space: pre-wrap; } -a:hover -{ - color: #fff; - text-decoration: none; +.scrollable { overflow: auto; } + +/* Sidebar navigation */ +.nav-sidebar { + margin-top: 64px; } -.center -{ - text-align: center; -} - -#ConsoleController .Output -{ - font-family: monospace; - font-size: 12px; - white-space: pre-wrap; -} - -.scrollable -{ - overflow: auto; -} - - -.nav-sidebar -{ - margin-top: 64px; - margin-right: 16px; -} - -.nav-sidebar > li > a -{ - padding-right: 20px; - padding-left: 20px; +.nav-sidebar .nav-link { + padding: 8px 20px; border-radius: 5px; + color: var(--rcon-text); } -.nav-sidebar > .active > a, -.nav-sidebar > .active > a:hover, -.nav-sidebar > .active > a:focus -{ +.nav-sidebar .nav-link:hover, +.nav-sidebar .nav-link.active { color: #fff; background-color: #428bca; } -.fade -{ - opacity: 0.5; +/* Fade utility */ +.fade { opacity: 0.5; } + +/* Table styles */ +.table > tbody > tr:hover { + background-color: rgba(255, 255, 255, 0.15); } -.table > tbody > tr:hover -{ - background-color: rgba( 255, 255, 255, 0.3 ); +.table > thead > tr > th.sorting { + color: #1bc98e; + border-color: #1bc98e; } -.table > thead > tr > th.sorting -{ - color: #1bc98e; - border-color: #1bc98e; +.table > thead > tr > th.sorting.descending { + color: #e05d6f; + border-color: #e05d6f; } .table-responsive { @@ -81,71 +65,60 @@ a:hover overflow-y: visible !important; } -.btn-default, .btn-default:active, .form-control -{ - background: rgba( 255, 255, 255, 0.3 ); - border: none; - color: #cfd2da; - text-shadow: none; +/* Form controls dark theme */ +.form-control { + background: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.2); + color: var(--rcon-text); } -.btn-default:hover -{ - background: #1ca8dd; - color: #fff; +.form-control:focus { + background: rgba(255, 255, 255, 0.2); + color: #fff; + border-color: var(--rcon-accent); + box-shadow: 0 0 0 0.2rem rgba(28, 168, 221, 0.25); } -.panel -{ - background-color: #434857; +/* Card dark theme */ +.card { + background-color: var(--rcon-card-bg); + border-color: rgba(255, 255, 255, 0.1); } -.chatname -{ - display: block; - width: 200px; - float: left; - text-align: right; - padding-right: 8px; +/* Dropdown dark theme */ +.dropdown-menu { + background-color: var(--rcon-card-bg); + border-color: rgba(255, 255, 255, 0.1); } -.navbar-default -{ - background-color: #428bca; - background-image: none; - border: none; - border-radius: 0; - color: white; +.dropdown-menu .dropdown-item { + color: var(--rcon-text); } -.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover -{ - color: #fff; +.dropdown-menu .dropdown-item:hover { + background-color: rgba(255, 255, 255, 0.15); + color: #fff; } -.navbar-default .navbar-text, -.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus -{ - color: #fff; +.dropdown-menu .dropdown-divider { + border-color: rgba(255, 255, 255, 0.15); } -.navbar-default .navbar-nav > li > a:hover -{ - background-color: rgba( 255, 255, 255, 0.25 ); +/* Navbar text color override for dark theme */ +.navbar-dark .navbar-text { + color: rgba(255, 255, 255, 0.85); } -.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a -{ - background-color: white; - background-image: none; - border: none; - color: #428bca; +/* Page title */ +#page-title { + padding-bottom: 0.5rem; + margin-bottom: 1rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); } -.navbar-info -{ - position: relative; - display: block; - padding: 15px; - line-height: 20px; +/* Chart panels */ +#chart-performance, +#chart-network, +#chart-players { + min-height: 200px; } \ No newline at end of file