clean up rcon, fix a bunch of little things

Master/master/templates/layout.html

@@ -39,6 +39,7 @@
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"
             integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
             crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     {% block scripts %}{% endblock %}
 </body>
 </html>

Master/master/templates/serverlist.html

@@ -0,0 +1,113 @@
+{% extends "layout.html" %}
+
+{% block content %}
+<!-- todo: move this! -->
+<style>
+    .server-row {
+        cursor: pointer;
+    }
+
+    .modal-content, .nav-item {
+        background-color: #212529;
+        color: #fff;
+    }
+
+    .modal-header, .modal-footer {
+        border-color: #32383e !important;
+    }
+
+    .modal-dark button.close, a.nav-link {
+        color: #fff;
+    }
+</style>
+
+<div class="modal modal-dark" id="serverModalCenter" tabindex="-1" role="dialog" aria-labelledby="serverModalCenterTitle" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="serverModalTitle">Modal title</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="h5" id="server_socket"></div>
+            </div>
+            <div class="modal-footer">
+                <button id="connect_button" type="button" class="btn btn-dark">Connect</button>
+                <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-12">
+        <nav>
+            <div class="nav nav-tabs" id="server_game_tabs" role="tablist">
+                {% for game in games %}
+                <a class="nav-item nav-link {{'active' if loop.first else ''}}" id="{{game}}_servers_tab" data-toggle="tab" href="#{{game}}_servers" role="tab" aria-controls="{{game}}_servers" aria-selected="{{'true' if loop.first else 'false' }}">{{game}}</a>
+                {% endfor %}
+            </div>
+        </nav>
+        <div class="tab-content" id="server_game_tabs_content">
+            {% for game, servers in games.items() %}
+
+            <div class="tab-pane {{'show active' if loop.first else ''}}" id="{{game}}_servers" role="tabpanel" aria-labelledby="{{game}}_servers_tab">
+
+                <table class="table table-dark table-striped table-hover table-responsive-lg">
+                    <thead>
+                        <tr>
+                            <th>Server Name</th>
+                            <th>Map Name</th>
+                            <th>Players</th>
+                            <th>Mode</th>
+                            <th class="text-center">Connect</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+
+                        {% for server in servers %}
+
+                        <tr class="server-row" data-toggle="modal" data-target="#serverModalCenter"
+                            data-ip="{{server.ip}}" data-port="{{server.port}}">
+                            <td data-hostname="{{server.hostname}}" class="server-hostname">{{server.hostname}}</td>
+                            <td data-map="{{server.map}} " class="server-map">{{server.map}}</td>
+                            <td data-clientnum="{{server.clientnum}}" data-maxclientnum="{{server.maxclientnum}}"
+                                class="server-clientnum">
+                                {{server.clientnum}}/{{server.maxclientnum}}
+                            </td>
+                            <td data-gametype="{{server.gametype}}" class="server-gametype">{{server.gametype}}</td>
+                            <td class="text-center"><span class="oi oi-play-circle"></span></td>
+                        </tr>
+
+                        {% endfor %}
+
+                    </tbody>
+                </table>
+            </div>
+
+            {% endfor %}
+        </div>
+        <div class="w-100 small text-right  text-muted">
+            <span>Developed by RaidMax</span><br />
+            <span>PRERELEASE</span>
+        </div>
+    </div>
+</div>
+    {% endblock %}
+
+    {% block scripts %}
+<script>
+    $(document).ready(() => {
+        $('.server-row').off('click');
+        $('.server-row').on('click', function (e) {
+            $('#serverModalTitle').text($(this).find('.server-hostname').text());
+            $('#server_socket').text(`/connect ${$(this).data('ip')}:${$(this).data('port')}`);
+        });
+
+        $('#connect_button').off('click');
+        $('#connect_button').on('click', (e) => alert('soon...'));
+    });
+</script>
+    {% endblock %}