From e29c702ae5170679c59b15c097a06d1620780876 Mon Sep 17 00:00:00 2001
From: L4168 <L4168@student.jamk.fi>
Date: Thu, 18 Jul 2019 09:27:42 +0300
Subject: [PATCH] can filter players based on their faction
---
src/components/ReplayMap.js | 28 +++++++++++++++++
.../control.trackplayback/control.playback.js | 30 +++++++++++++++++++
.../src/leaflet.trackplayback/draw.js | 17 +++++++++--
.../leaflet.trackplayback/trackplayback.js | 19 +++++++++++-
4 files changed, 91 insertions(+), 3 deletions(-)
diff --git a/src/components/ReplayMap.js b/src/components/ReplayMap.js
index fdaa06a..1e6305e 100644
--- a/src/components/ReplayMap.js
+++ b/src/components/ReplayMap.js
@@ -16,6 +16,8 @@ export default class ReplayMap extends React.Component {
playback: null,
// stores player locations from backend
data: null,
+ // stores all factions from the game
+ factions: [],
// stores all drawings from backend
allGeoJSON: [],
// stores all active drawings on the map
@@ -33,6 +35,10 @@ export default class ReplayMap extends React.Component {
await this.setState({
data: await this.fetchPlayerData()
});
+ // fetch factions from the game
+ await this.setState({
+ factions: await this.fetchFactions()
+ });
// fetch drawings with gameId
await this.setState({
allGeoJSON: await this.fetchDrawingData()
@@ -59,6 +65,25 @@ export default class ReplayMap extends React.Component {
}
};
+ fetchFactions = async () => {
+ let res = await fetch(
+ `${process.env.REACT_APP_API_URL}/game/${this.state.gameId}`
+ );
+ if (await res.ok) {
+ let data = await res.json();
+ let factions = data.factions.map(faction => {
+ return {
+ name: faction.factionName,
+ colour: faction.colour,
+ active: true
+ };
+ });
+ return await factions;
+ } else {
+ alert(res.statusText);
+ }
+ };
+
fetchDrawingData = async () => {
let res = await fetch(
`${process.env.REACT_APP_API_URL}/replay/${this.state.gameId}`
@@ -121,6 +146,9 @@ export default class ReplayMap extends React.Component {
offset: [0, 0],
direction: "top",
permanent: false
+ },
+ filterOptions: {
+ factions: this.state.factions
}
});
this.setState({
diff --git a/src/track-playback/src/control.trackplayback/control.playback.js b/src/track-playback/src/control.trackplayback/control.playback.js
index ae331f5..18ee33f 100644
--- a/src/track-playback/src/control.trackplayback/control.playback.js
+++ b/src/track-playback/src/control.trackplayback/control.playback.js
@@ -110,6 +110,7 @@ export const TrackPlayBackControl = L.Control.extend({
this._optionsContainer,
this._showTrackLine
); */
+ // create checkboxes for filtering persons based on their class
this._filterInfantry = this._createCheckbox(
"show infantry units",
"show-infantry",
@@ -128,6 +129,26 @@ export const TrackPlayBackControl = L.Control.extend({
this._filterContainer,
this._showMechanized
);
+ // show some text between class based and faction based filtering
+ this._factionText = this._createInfo(
+ "Faction filtering:",
+ "",
+ "faction-text-filter",
+ this._filterContainer
+ );
+ // create checkboxes for filtering persons based on their faction
+ let factions = this.trackPlayBack.passFactions();
+ let factionCheckboxes = [];
+ factions.map(faction => {
+ factionCheckboxes.push(
+ this._createCheckbox(
+ `show ${faction.name}`,
+ `show-${faction.name}`,
+ this._filterContainer,
+ this._showFaction
+ )
+ );
+ });
this._playBtn = this._createButton(
"play",
@@ -284,6 +305,15 @@ export const TrackPlayBackControl = L.Control.extend({
_showMechanized(e) {
this.trackPlayBack.toggleMechanized(e.target.checked);
},
+ _showFaction(e) {
+ this.trackPlayBack.toggleFactions(
+ e.target.checked,
+ e.target.parentNode.className.substring(
+ 5,
+ e.target.parentNode.className.indexOf(" ")
+ )
+ );
+ },
_play: function() {
let hasClass = L.DomUtil.hasClass(this._playBtn, "btn-stop");
diff --git a/src/track-playback/src/leaflet.trackplayback/draw.js b/src/track-playback/src/leaflet.trackplayback/draw.js
index 20517c1..9949f45 100644
--- a/src/track-playback/src/leaflet.trackplayback/draw.js
+++ b/src/track-playback/src/leaflet.trackplayback/draw.js
@@ -43,7 +43,8 @@ export const Draw = L.Class.extend({
filterOptions: {
infantry: true,
recon: true,
- mechanized: true
+ mechanized: true,
+ factions: []
},
initialize: function(map, options) {
@@ -51,6 +52,7 @@ export const Draw = L.Class.extend({
L.extend(this.trackLineOptions, options.trackLineOptions);
L.extend(this.targetOptions, options.targetOptions);
L.extend(this.toolTipOptions, options.toolTipOptions);
+ L.extend(this.filterOptions, options.filterOptions);
this._showTrackPoint = this.trackPointOptions.isDraw;
this._showTrackLine = this.trackLineOptions.isDraw;
@@ -196,8 +198,19 @@ export const Draw = L.Class.extend({
let targetPoint = trackpoints[trackpoints.length - 1];
// get info from first trackpoint
let info = trackpoints[0].info;
+ let skip = false;
+ // check if faction has been filtered and skip drawing if it is
+ this.filterOptions.factions.forEach(faction => {
+ if (
+ !faction.active &&
+ trackpoints[0].info[1]["value"] === faction.colour
+ ) {
+ skip = true;
+ }
+ });
+
// compare icon to filter, draw if true else skip
- if (this.filterOptions[info[0]["value"].slice(0, -4)]) {
+ if (!skip && this.filterOptions[info[0]["value"].slice(0, -4)]) {
this._drawShipImage(targetPoint, info);
}
/* else {
diff --git a/src/track-playback/src/leaflet.trackplayback/trackplayback.js b/src/track-playback/src/leaflet.trackplayback/trackplayback.js
index a118833..5aa35aa 100644
--- a/src/track-playback/src/leaflet.trackplayback/trackplayback.js
+++ b/src/track-playback/src/leaflet.trackplayback/trackplayback.js
@@ -21,7 +21,8 @@ export const TrackPlayBack = L.Class.extend({
trackPointOptions: options.trackPointOptions,
trackLineOptions: options.trackLineOptions,
targetOptions: options.targetOptions,
- toolTipOptions: options.toolTipOptions
+ toolTipOptions: options.toolTipOptions,
+ filterOptions: options.filterOptions
};
this.tracks = this._initTracks(data);
this.draw = new Draw(map, drawOptions);
@@ -89,18 +90,34 @@ export const TrackPlayBack = L.Class.extend({
this.draw.hideTrackLine();
return this;
},
+ // toggles the visibility of infantry units on the map
toggleInfantry: function(e) {
this.draw.filterOptions.infantry = e;
return this;
},
+ // toggles the visibility of recon units on the map
toggleRecon: function(e) {
this.draw.filterOptions.recon = e;
return this;
},
+ // toggles the visibility of mechanized units on the map
toggleMechanized: function(e) {
this.draw.filterOptions.mechanized = e;
return this;
},
+ // toggles the visibility of faction units on the map
+ toggleFactions: function(e, target) {
+ for (let faction of this.draw.filterOptions.factions) {
+ if (faction.name === target) {
+ faction.active = e;
+ break;
+ }
+ }
+ },
+ // pass the factions to control playback to show faction names on the control panel
+ passFactions: function() {
+ return this.draw.filterOptions.factions;
+ },
dispose: function() {
this.clock.off("tick", this._tick);
this.draw.remove();
--
GitLab