Skip to content

Commit 3c3780c

Browse files
committedMay 17, 2019
feat: add player filtering
1 parent 0149d21 commit 3c3780c

8 files changed

+137
-48
lines changed
 

‎debug.html

+11-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107

108108
<div id="wrapper" class="container-fluid">
109109
<div id="control-wrapper" >
110-
<div id="sidebar" class="custom-menu col-md-2 col-sm-6 col-xs-12 float-left collapse">
110+
<div id="sidebar" class="custom-menu col-md-4 col-sm-3 col-xs-6 float-left collapse ">
111111
<div class="list-group border-0 card text-center text-md-left" style="padding: 8px 0;">
112112

113113
<a class="nav-header">Controls</a>
@@ -138,6 +138,16 @@
138138
<option></option>
139139
</select>
140140
</a>
141+
142+
<a class="list-group-item d-inline-block collapsed">
143+
<span class="d-md-inline">Filter</span>
144+
145+
<select id="filterOn" class="input-large form-control pull-right">
146+
<option></option>
147+
</select>
148+
<input type="text" id="onlyShow" class="input-large form-control pull-right" />
149+
</a>
150+
141151
</div>
142152

143153
<div class="list-group border-0 card text-center text-md-left" >

‎dist/first-bundle.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/last-bundle.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+11-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484

8585
<div id="wrapper" class="container-fluid">
8686
<div id="control-wrapper" >
87-
<div id="sidebar" class="custom-menu col-md-2 col-sm-6 col-xs-12 float-left collapse">
87+
<div id="sidebar" class="custom-menu col-md-4 col-sm-3 col-xs-6 float-left collapse">
8888
<div class="list-group border-0 card text-center text-md-left" style="padding: 8px 0;">
8989

9090
<a class="nav-header">Controls</a>
@@ -115,6 +115,16 @@
115115
<option></option>
116116
</select>
117117
</a>
118+
119+
<a class="list-group-item d-inline-block collapsed">
120+
<span class="d-md-inline">Filter</span>
121+
122+
<select id="filterOn" class="input-large form-control pull-right">
123+
<option></option>
124+
</select>
125+
<input type="text" id="onlyShow" class="input-large form-control pull-right" />
126+
</a>
127+
118128
</div>
119129

120130
<div class="list-group border-0 card text-center text-md-left" >

‎js/src/controls.2.js

+54-39
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,35 @@
1616
// along with this program in the file "LICENSE". If not, see <http://www.gnu.org/licenses/>.
1717
// ************************************************************************** //
1818

19-
function toggleBlips(){
20-
21-
clearAllMarkers();
22-
if(!_showBlips){
23-
return;
24-
}
19+
function toggleBlips(){ // _showBlips must be called before this function if you want to toggle all blips
2520

2621
for (var spriteId in _blips) {
2722
var blipArray = _blips[spriteId];
2823
console._log("Disabled (" + spriteId + ")? " + _disabledBlips.includes(spriteId));
2924

3025
if (_disabledBlips.indexOf(spriteId) != -1) {
3126
console._log("Blip " + spriteId + "'s are disabled..");
27+
28+
blipArray.forEach(blip => {
29+
console.log(blip);
30+
var marker = MarkerStore[blip.markerId];
31+
marker.remove();
32+
});
33+
3234
// If disabled, don't make a marker for it
3335
continue;
3436
}
3537

36-
for (var i in blipArray) {
37-
var blip = blipArray[i];
38-
39-
var obj = new MarkerObject(blip.name, new Coordinates(blip.pos.x, blip.pos.y, blip.pos.z), MarkerTypes[blip.type], blip.description, "", "");
40-
blip.markerId = createMarker(false, false, obj, "") - 1;
41-
}
38+
blipArray.forEach(blip => {
39+
console.log(blip);
40+
var marker = MarkerStore[blip.markerId];
41+
if (_showBlips){
42+
marker.addTo(Map);
43+
}else{
44+
marker.remove();
45+
}
46+
});
4247
}
43-
4448
}
4549

4650
$(document).ready(function(){
@@ -60,6 +64,30 @@ $(document).ready(function(){
6064
.text(_showBlips ? "on" : "off");
6165
});
6266

67+
$("#toggle-all-blips").on("click", function () {
68+
_blipControlToggleAll = !_blipControlToggleAll;
69+
console._log(_blipControlToggleAll + " showing blips?");
70+
// Toggle the classes and add/remove the blipIds from the array
71+
72+
$("#blip-control-container").find("a").each(function (index, ele) {
73+
var ele = $(ele);
74+
var blipId = ele.data("blip-number").toString();
75+
76+
if (_blipControlToggleAll) {
77+
// Showing them
78+
_disabledBlips.splice(_disabledBlips.indexOf(blipId), 1);
79+
ele.removeClass("blip-disabled").addClass("blip-enabled");
80+
} else {
81+
// Hiding them all
82+
_disabledBlips.push(blipId);
83+
ele.removeClass("blip-enabled").addClass("blip-disabled");
84+
}
85+
});
86+
87+
// Now we can refresh the markers
88+
toggleBlips();
89+
});
90+
6391

6492
$("#playerSelect").on("change", function(){
6593
if (this.value == ""){
@@ -71,6 +99,17 @@ $(document).ready(function(){
7199
_trackPlayer = this.value;
72100
});
73101

102+
$("#filterOn").on("change", function(){
103+
if (this.value == ""){
104+
window.Filter = undefined;
105+
return;
106+
}
107+
108+
window.Filter = {
109+
on: this.value
110+
}
111+
});
112+
74113
$("#refreshBlips").click(function(e){
75114
e.preventDefault();
76115

@@ -94,30 +133,6 @@ $(document).ready(function(){
94133

95134
connect();
96135
});
97-
98-
$("#toggle-all-blips").on("click", function(){
99-
_blipControlToggleAll = !_blipControlToggleAll;
100-
console._log(_blipControlToggleAll +" showing blips?");
101-
// Toggle the classes and add/remove the blipIds from the array
102-
103-
$("#blip-control-container").find("a").each(function(index, ele){
104-
var ele = $(ele);
105-
var blipId = ele.data("blip-number").toString();
106-
107-
if (_blipControlToggleAll){
108-
// Showing them
109-
_disabledBlips.splice(_disabledBlips.indexOf(blipId), 1);
110-
ele.removeClass("blip-disabled").addClass("blip-enabled");
111-
}else{
112-
// Hiding them all
113-
_disabledBlips.push(blipId);
114-
ele.removeClass("blip-enabled").addClass("blip-disabled");
115-
}
116-
});
117-
118-
// Now we can refresh the markers
119-
toggleBlips();
120-
});
121136
});
122137

123138
function initMapControl(Map){
@@ -156,10 +171,10 @@ function initPlayerMarkerControls(Map, PlayerMarkers){
156171
L.DomEvent.on(html, "click", function(e){
157172
var t = e.target;
158173
var attribute = t.getAttribute("data-identifier");
159-
var m = MarkerStore[localCache[attribute].marker]; // Get the marker using the localcache.
174+
var m = PopupStore[localCache[attribute].marker]; // Get the marker using the localcache.
160175

161176
Map.closePopup(Map._popup); //Close the currently open popup
162-
Map.openPopup(m.getPopup()); // Open the user's popup
177+
Map.openPopup(m); // Open the user's popup
163178
});
164179

165180
Map.openPopup(html, a.layer.getLatLng());

‎js/src/init.1.js

+4
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ var _overlays = [];
3636
var _disabledBlips = [];
3737
var _blipControlToggleAll = true; // Show all by default
3838

39+
window.Filter = undefined; // For filtering players
40+
window.CanFilterOn = []; // What can the user filter?
41+
3942
window.changeServer = function (nameOfServer) {
4043
console._log("Changing connected server to: " + nameOfServer);
4144

@@ -233,6 +236,7 @@ function blipError( textStatus, errorThrown){
233236
}
234237

235238
function initBlips(url){
239+
clearAllMarkers();
236240
_blipCount = 0;
237241
_blips = [];
238242

‎js/src/markers.1.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ function generateBlipControls(){
262262
}
263263

264264
// Refresh blips (there's probably a faster way..)
265-
clearAllMarkers();
265+
//clearAllMarkers();
266266
toggleBlips();
267267
});
268268
}

‎js/src/socket.1.js

+54-4
Original file line numberDiff line numberDiff line change
@@ -296,6 +296,32 @@ function getPlayerInfoHtml(plr) {
296296
return html;
297297
}
298298

299+
function getFilterProps(plr){
300+
var props = [];
301+
for (var key in plr) {
302+
//console._log("found key: "+ key);
303+
if (key == "name" || key == "pos" || key == "icon") { // I should probably turn this into a array or something
304+
continue; // We're already displaying this info
305+
}
306+
307+
if (!(key === "identifer")) {
308+
props.push(key);
309+
} else if (config.showIdentifiers && key == "identifer") {
310+
props.push(key);
311+
} else {
312+
continue;
313+
}
314+
}
315+
316+
return props;
317+
}
318+
319+
// Every minute, just clear what we can "filter". In case we get one player with a unique property that is never seen again.
320+
setInterval(()=> {
321+
window.CanFilterOn = [];
322+
$("#filterOn").innerHtml = "<option></option>";
323+
}, 60000);
324+
299325
function doPlayerUpdate(players) {
300326

301327
if (config.debug) {
@@ -309,6 +335,29 @@ function doPlayerUpdate(players) {
309335
localCache[plr.identifer] = { marker: null, lastHtml: null };
310336
}
311337

338+
// Filtering stuff
339+
340+
// If this player has a new property attached to them that we haven't seen before, add it to the filer
341+
var p = getFilterProps(plr);
342+
p.forEach((_p) => {
343+
if (!window.CanFilterOn.includes(_p)){
344+
window.CanFilterOn.push(_p);
345+
$("#filterOn").append(`<option value="${_p}">${_p}</option>`);
346+
}
347+
});
348+
349+
var opacity = 1.0;
350+
if (window.Filter){
351+
if (plr[window.Filter.on] == undefined) {
352+
opacity = 0.0;
353+
}else{
354+
var value = $("#onlyShow").val();
355+
if (value != "" && !plr[window.Filter.on].includes(value)){
356+
opacity = 0.0;
357+
}
358+
}
359+
}
360+
312361
if ($("#playerSelect option[value='" + plr.identifer + "']").length <= 0) {
313362
// Ooo look, we have players. Let's add them to the "tracker" drop-down
314363
$("#playerSelect").append($("<option>", {
@@ -344,6 +393,8 @@ function doPlayerUpdate(players) {
344393
var marker = MarkerStore[m];
345394
var popup = PopupStore[m];
346395

396+
marker.setOpacity(opacity);
397+
347398
if (infoContent != localCache[plr.identifer].lastHtml){
348399
popup.setContent(infoContent);
349400
localCache[plr.identifer].lastHtml = infoContent;
@@ -365,6 +416,8 @@ function doPlayerUpdate(players) {
365416
var m = localCache[plr.identifer].marker = createMarker(false, false, obj, plr.name) - 1;
366417

367418
MarkerStore[m].unbindPopup(); // We want to handle the popups ourselfs.
419+
MarkerStore[m].setOpacity(opacity);
420+
368421
PopupStore[m] = L.popup()
369422
.setContent(infoContent)
370423
.setLatLng(MarkerStore[m].getLatLng()); // Make a new marker
@@ -376,12 +429,9 @@ function doPlayerUpdate(players) {
376429
Map.openPopup(PopupStore[e.target.options.id]);
377430
});
378431
}
379-
380432
});
381433

382434
playerCount = Object.keys(localCache).length;
383-
if (config.debug) {
384-
console._log("playercount: " + playerCount);
385-
}
435+
console._log("playercount: " + playerCount);
386436
$("#player_count").text(playerCount);
387437
}

0 commit comments

Comments
 (0)