Merge pull request #26 from Taraman17/dev

V 0.9.0 - Add Map Details from Steam-Workshop API and Filtering
Taraman17 · Jan 5, 2022 · ffac995 · ffac995
2 parents 4cf302e + d0d3ab9
commit ffac995
Show file tree

Hide file tree

Showing 11 changed files with 556 additions and 2,572 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+package-lock.json
diff --git a/OfficialMaps.json b/OfficialMaps.json
@@ -0,0 +1,31 @@
+{ 
+  "ar_baggage": 125440026,
+  "ar_monastery": 125440154,
+  "ar_shoots": 125440261,
+  "cs_agency": 1464919827,
+  "cs_assault": 125432575,
+  "cs_insertion2": 2650330155,
+  "cs_italy": 125436057,
+  "cs_militia": 133256570,
+  "cs_office": 125444404,
+  "de_ancient": 2627571649,
+  "de_bank": 125440342,
+  "de_basalt": 2627569615,
+  "de_cache": 2606407435,
+  "de_canals": 951287718,
+  "de_cbble": 205239595,
+  "de_dust2": 125438255,
+  "de_extraction": 2650340943,
+  "de_inferno": 125438669,
+  "de_lake": 125440557,
+  "de_mirage": 152508932,
+  "de_nuke": 125439125,
+  "de_overpass": 205240106,
+  "de_ravine": 2615546425,
+  "de_safehouse": 125440714,
+  "de_shortnuke": 2131550446,
+  "de_stmarc": 125441004,
+  "de_sugarcane": 125440847,
+  "de_train": 125438372,
+  "de_vertigo": 125439851
+}
diff --git a/README.MD b/README.MD
@@ -65,6 +65,30 @@ If you use the API in a web interface, you can set 'redirectPage' in the config
 
 If you want to have a manual logout in your client, call '/csgoapi/v1.0/logout', which will redirect to '/csgoapi/v1.0/loginStatus' to confirm the success.
 
+### Map filtering
+Filters are used to limit the maps that are transmitted to clients with the serverInfo. Filtering here consists of filter strings and a filter type. The strings are matched as parts against the maps filenames. 'cs_' would match all hostage rescue maps, 'dust' would match all maps that have dust in their names (de_dust2, de_dust, etc.).
+The filter type controls if the matched maps are shown or hidden. 'inlcude' will include all matched maps in the mapsAvail and mapsDetails arrays of serverInfo, 'exclude' will hide them. For Example, if you want to play only bomb-defuse maps, you could set the filter type to 'include' and filter to 'de_'.
+The filter type can only be set globally and not per filter string.
+
+Current filter settings can be queried with
+```javascript
+$.get('http://<your-servers-address>:<your-port>/csgoapi/v1.0/filter')
+```
+Return value is JSON: { "type": {string}, "filters": {array of strings} }
+
+Filter control works like this:
+```javascript
+$.get('http://<your-servers-address>:<your-port>/csgoapi/v1.0/filter/reset')
+$.post('http://<your-servers-address>:<your-port>/csgoapi/v1.0/filter/<anAction>')
+```
+actions can be:
+- reset (get) -> Resets the filter to tpye 'exclude' and no filter strings.
+- add?filter= (post) -> Adds the given string to the filters.
+- remove?filter= (post) -> Removes the given string, if it exists.
+- type (post) -> Sets the filter type ('include' or 'exclude');
+
+If successful, the call will return the new filter-info, else a JSON error string. E.g.: { "error": "No filter was removed." }
+
 ### Server Control
 ```javascript
 $.get('http://<your-servers-address>:<your-port>/csgoapi/v1.0/control/<anAction>')
@@ -73,7 +97,7 @@ The /control message will return a JSON-String.
 'action' can have the following values:
 - status -> fetch the servers running status: { "running": true/false }
 - update -> update the server (may take quite some time): { "success": true/false }
-- start -> optional additional argument "startmap" (&startmap=mapname): { "success": true/false }
+- start -> optional additional argument "startmap" (?startmap=mapname): { "success": true/false }
 If run without startmap, server will be started with de_dust2.
 - stop -> stop the server with RCON 'quit': { "success": true/false }
 - kill -> use 'kill' command to shutdown the server, if RCON connection is not working: { "success": true/false }

diff --git a/example/gameserver.css b/example/gameserver.css
@@ -31,6 +31,11 @@ p {
     align-items: center;
     justify-content: space-around;
 }
+#klosser-augen {
+    width: 40%;
+    min-width: 250px;
+    max-width: 400px;
+}
 #header-text {
     font-size: 2.5em;
     text-align: center;
@@ -59,6 +64,7 @@ p {
     display: none;
 }
 #startMap {
+
 }
 #addControl {
     display: flex;
@@ -91,7 +97,6 @@ p {
 #players h3 {
     margin-top: 10px;
     margin-bottom: 10px;
-    margin-bottom: 10px;
 }
 #players h4 {
     margin: 10px 0px;
@@ -128,6 +133,11 @@ p {
 #mapSelector {
     display: none;
 }
+#bottraining {
+    display: none;
+    float: left;
+    width: 100%;
+}
 
 .text {
     text-align: center;
@@ -167,29 +177,39 @@ select {
     margin-left: 2em;
 }
 
-#mapSelector ul {
-    width: 100%;
-    list-style-type: none;
-    border: 1px solid;
-    padding: 0;
+#mapSelector {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 10px;
+    margin-top: 10px;
 }
-#mapSelector li {
-    margin: 10px 1%;
-    padding: 7px;
+.map {
+    padding: 4px;
+    flex-basis: 400px;
+    max-width: 500px;
+    flex-grow: 1;
+    flex-shrink: 1;
+    aspect-ratio: 3 / 2;
     border: 1px solid;
-    font-size: 25px;
-    display: block;
-    min-width: 230px;
-    width: 30%;
-    max-width: 320px;
+}
+.map.active{
+    background: #222222;
+}
+.mapname {
     float: left;
+    font-size: 30px;
+    margin-bottom: 10px;
 }
-#mapSelector li.active {
-    background-color: #222222;
-    background-image: url(pic/playicon.png);
-    background-repeat: no-repeat;
-    background-position: right;
-    background-size: contain;
+.playicon {
+    float: right;
+    width: 7%;
+    display: none;
+}
+.mapimg {
+    width: 100%;
+    height: auto;
+    left: 0%;
+    bottom: 100%;
 }
 
 /* wait popup */

diff --git a/example/gameserver.htm b/example/gameserver.htm
@@ -98,9 +98,7 @@ <h4>Spectators</h4>
         <input type="button" id="restart" class="text" onclick="restartRound()" value="Restart Round"/>
         <input type="button" id="changeMap" class="text" onclick="toggleMaplist()" value="Change Map"/>
         <div id="mapSelector">
-            <ul id="mapList">
-                <li id="noMaps">No maps loaded.</li>
-            </ul>
+            <!-- Map DIVs will be added here by javascript -->
         </div>
     </div>
     <div id="playerDropdown" class="dropdown-menu">
@@ -113,4 +111,11 @@ <h4>Spectators</h4>
     <script type="text/javascript" src="js/gameserver.js"></script>
     <script type="text/javascript" src="js/onload.js"></script>
 </body>
+<template id="maptemplate">
+    <div class="map" onclick="showPlay(event);" ondblclick="changeMap(event);">
+        <p class="mapname"></p>
+        <img class="playicon" src="pic/playicon.png"/>
+        <img class="mapimg"/>
+    </div>
+</template>
 </html>
diff --git a/example/js/gameserver.js b/example/js/gameserver.js
@@ -97,12 +97,10 @@ function setupServerRunning() {
     $('#power-image').attr('src', 'pic/power-on.png');
     if (socket.readyState != 1) { // if websocket not connected
         getMaps();
-    } else if ($("#mapList li").length < 2) {
+    } else if ($("#mapSelector div").length < 2) {
         socket.send('infoRequest');
     }
     $('#startMap').hide(0);
-    $('#mapList').on( 'click', showPlay);
-    $('#mapList').on( 'dblclick', changeMap);
     $('#buttonStop').show(0);
     $('#buttonStart').hide(0);
     $('#buttonUpdate').hide(0);
@@ -145,6 +143,7 @@ function clickButton(aButton) {
             alert(`${operation} running.\nTry again in a moment.`);
         } else {
             alert(`command ${action} failed!\nError: ${errorText}`);
+            window.location.href = './notauth.htm';
         }
         if (socket.readyState != 1) {
             $('.container-popup').css('display', 'none');
@@ -182,13 +181,20 @@ function getMaps() {
     let serverInfo = getServerInfo();
     serverInfo.then((data) => {
         $("#currentMap").html(`Current map: ${data.map}`);
-        maplist = data.mapsAvail;
-        $("#mapList").empty();
-        for (map of maplist) {
-            var li = document.createElement("li");
-            li.appendChild(document.createTextNode(map));
-            $("#mapList").append(li);
-        }
+        maplist = data.mapsDetails;
+        $("#mapSelector").empty();
+        maplist.forEach( (map) => {
+           if ('content' in document.createElement('template')) {
+                var mapDiv = document.querySelector('#maptemplate');
+                mapDiv.content.querySelector('.mapname').textContent = map.name;
+                mapDiv.content.querySelector('.mapimg').setAttribute("src", map.previewLink);
+                $('#mapSelector').append(document.importNode(mapDiv.content, true));
+            } else {
+                let alttext = createElement('h2');
+                text.html("Your browser does not have HTML template support - please use another browser.");
+                $('#mapSelector').append(alttext);
+            }
+        });
     }).catch((error) => {
         // do nothing for now
     });
@@ -199,17 +205,19 @@ function toggleMaplist() {
 }
 
 function showPlay(event) {
-    if (event.target.classList.contains('active')) {
+    if (event.currentTarget.classList.contains('active')) {
         changeMap(event);
-        $('#mapSelector li').removeClass('active');
+        $('.map').removeClass('active');
     } else {
-        $('#mapSelector li').removeClass('active');
-        event.target.classList.add('active');
+        $('.active > .playicon').hide(0);
+        $('.active').removeClass('active');
+        event.currentTarget.classList.add('active');
+        event.currentTarget.children[1].style.display = 'block';
     }
 }
 
 function changeMap(event) {
-    let map = event.target.innerText;
+    let map = event.currentTarget.firstElementChild.textContent;
     $('#mapSelector').hide('fast');
     $('#popupCaption').text(titles['mapchange']);
     $('.container-popup').css('display', 'flex');
@@ -220,7 +228,9 @@ function changeMap(event) {
             $('#popupText').html(`Mapchange failed!`);
             window.setTimeout( () => {
                 $('.container-popup').css('display', 'none');
+                window.location.href = './notauth.htm';
             }, 2000);
+
         }
     });
 }
@@ -254,4 +264,20 @@ function kill(caller) {
         caller.disabled = true;
         $('#killerror').show('fast');
     });
+}
+
+
+// Bot Training functions
+function setBotRules() {
+    sendGet(`${address}/rcon`, `message=mp_autoteambalance 0`);
+    sendGet(`${address}/rcon`, `message=mp_limitteams 0`);
+    sendGet(`${address}/rcon`, `message=bot_difficulty 3`);
+}
+function addBots(team, quantity) {
+    for(let i=0; i < quantity; i++) {
+        setTimeout(sendGet(`${address}/rcon`, `message=bot_add_${team}`), 100);
+    }
+}
+function kickBots() {
+    sendGet(`${address}/rcon`, `message=bot_kick all`);
 }
diff --git a/example/js/onload.js b/example/js/onload.js
@@ -34,15 +34,22 @@ $( document ).ready(() => {
                         $(`#${player.team.toLowerCase()}Players`).show(0);
                     }
                 }
-                if ($('#mapList li').length != serverInfo.mapsAvail.length) {
-                    if (serverInfo.mapsAvail) {
-                        let maplist = serverInfo.mapsAvail;
-                        $("#mapList").empty();
-                        for (map of maplist) {
-                            var li = document.createElement("li");
-                            li.appendChild(document.createTextNode(map));
-                            $("#mapList").append(li);
-                        }
+                if ($('#mapSelector .map').length != serverInfo.mapsDetails.length) {
+                    if (serverInfo.mapsDetails) {
+                        let maplist = serverInfo.mapsDetails;
+                        $("#mapSelector").empty();
+                        maplist.forEach( (map) => {
+                            if ('content' in document.createElement('template')) {
+                                var mapDiv = document.querySelector('#maptemplate');
+                                mapDiv.content.querySelector('.mapname').textContent = map.name;
+                                mapDiv.content.querySelector('.mapimg').setAttribute("src", map.previewLink ? map.previewLink : '');
+                                $('#mapSelector').append(document.importNode(mapDiv.content, true));
+                            } else {
+                                let alttext = document.createElement('h2');
+                                text.html("Your browser does not have HTML template support - please use another browser.");
+                                $('#mapSelector').append(alttext);
+                            }
+                        });
                     }
                 }
             } else if (data.type == "commandstatus") {
@@ -56,6 +63,12 @@ $( document ).ready(() => {
                         $('.container-popup').css('display', 'none');
                         setupPage();
                     }, 1500);
+                } else if (data.payload.state == 'fail') {
+                    $('#popupText').html(`${data.payload.operation} failed!`);
+                    setTimeout( () => {
+                        $('.container-popup').css('display', 'none');
+                        window.location.href = './notauth.htm';
+                    }, 1500);
                 }
             } else if (data.type == "progress") {
                 $('#popupText').html(`${data.payload.step}: ${data.payload.progress}%`);