can filter players based on their faction

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({

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");

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 {

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();