cleaning up code

src/components/ReplayMap.js

@@ -7,13 +7,14 @@ import "../track-playback/src/leaflet.trackplayback/clock";
 import "../track-playback/src/leaflet.trackplayback/index";
 import "../track-playback/src/control.trackplayback/control.playback";
 import "../track-playback/src/control.trackplayback/index";
+import options from "./ReplayConfig";
 
 export default class ReplayMap extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      // stores the playback object
-      playback: null,
+      // stores game's initial location
+      location: [62.3, 25.7],
       // stores player locations from backend
       players: [],
       // stores all factions from the game
@@ -21,9 +22,7 @@ export default class ReplayMap extends React.Component {
       // stores all scores from the game
       scores: [],
       // stores all drawings from backend
-      allGeoJSON: [],
-      // stores all active drawings on the map
-      activeGeoJSON: []
+      drawings: []
     };
   }
 
@@ -35,9 +34,11 @@ export default class ReplayMap extends React.Component {
     // fetch all data and set it to state
     let replaydata = await this.fetchReplayData();
     await this.setState({
+      location: replaydata.location,
       players: replaydata.players,
       factions: replaydata.factions,
-      scores: replaydata.scores
+      scores: replaydata.scores,
+      drawings: replaydata.drawings
     });
     replaydata ? this.replay() : alert("No replay data was found");
   }
@@ -61,85 +62,23 @@ export default class ReplayMap extends React.Component {
   };
 
   replay = () => {
-    this.map = L.map(this.refs.map).setView([62.3, 25.7], 15);
+    // create a map for the replay, setView to game's center cords
+    this.map = L.map(this.refs.map).setView(
+      this.state.location || [62.3, 25.7],
+      14
+    );
     L.tileLayer("https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg", {
       attribution:
         '&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
     }).addTo(this.map);
-    this.trackplayback = new L.TrackPlayBack(this.state.players, this.map, {
-      trackPointOptions: {
-        // whether to draw track point
-        isDraw: true,
-        // whether to use canvas to draw it, if false, use leaflet api `L.circleMarker`
-        useCanvas: false,
-        stroke: true,
-        color: "#000000",
-        fill: true,
-        fillColor: "rgba(0,0,0,0)",
-        opacity: 0,
-        radius: 12
-      },
-      targetOptions: {
-        // whether to use an image to display target, if false, the program provides a default
-        useImg: true,
-        // if useImg is true, provide the imgUrl
-        imgUrl: "../light-infantry.svg",
-        // the width of target, unit: px
-        width: 60,
-        // the height of target, unit: px
-        height: 40,
-        // the stroke color of target, effective when useImg set false
-        color: "#00f",
-        // the fill color of target, effective when useImg set false
-        fillColor: "#9FD12D"
-      },
-      clockOptions: {
-        // the default speed
-        // caculate method: fpstime * Math.pow(2, speed - 1)
-        // fpstime is the two frame time difference
-        speed: 10,
-        // the max speed
-        maxSpeed: 100
-      },
-      toolTipOptions: {
-        offset: [0, 0],
-        direction: "top",
-        permanent: false
-      },
-      filterOptions: {
-        factions: this.state.factions
-      },
-      scoreOptions: {
-        scores: this.state.scores
-      }
-    });
-    this.setState({
-      playback: this.trackplayback
-    });
+    // import options from ReplayConfig.js
+    this.trackplayback = new L.TrackPlayBack(this.state, this.map, options);
     this.trackplaybackControl = L.trackplaybackcontrol(this.trackplayback);
     this.trackplaybackControl.addTo(this.map);
   };
 
   render() {
     return (
-      /*       <Map
-        className="map"
-        ref={this.map}
-        center={[62.3, 25.7]}
-        zoom={15}
-        minZoom="7"
-        maxZoom="17"
-        zoomControl={false}
-      >
-        <TileLayer
-          attribution='&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
-          url={"https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"}
-        />
-        <ZoomControl position="topright" />
-        {this.state.activeGeoJSON.features && (
-          <DrawGeoJSON geoJSONLayer={this.state.activeGeoJSON} />
-        )}
-      </Map> */
       <React.Fragment>
         <Link to="/">
           <button>Game selection</button>

src/track-playback/src/leaflet.trackplayback/trackcontroller.js

@@ -12,7 +12,7 @@ export const TrackController = L.Class.extend({
     L.setOptions(this, options);
     this._activeScores = [0, 0];
     this._tracks = [];
-    this._scores = allScores.scores;
+    this._scores = allScores;
     this.addTrack(tracks);
 
     this._draw = draw;

src/track-playback/src/leaflet.trackplayback/trackplayback.js

@@ -22,15 +22,14 @@ export const TrackPlayBack = L.Class.extend({
       trackLineOptions: options.trackLineOptions,
       targetOptions: options.targetOptions,
       toolTipOptions: options.toolTipOptions,
-      filterOptions: options.filterOptions
-      //scoreOptions: options.scoreOptions
+      filterOptions: { factions: data.factions }
     };
-    this.tracks = this._initTracks(data);
+    this.tracks = this._initTracks(data.players);
     this.draw = new Draw(map, drawOptions);
     this.trackController = new TrackController(
       this.tracks,
       this.draw,
-      options.scoreOptions
+      data.scores
     );
     this.clock = new Clock(this.trackController, options.clockOptions);
 
@@ -155,5 +154,5 @@ export const TrackPlayBack = L.Class.extend({
 });
 
 export const trackplayback = function(data, map, options) {
-  return new TrackPlayBack(data, map, options);
+  return new TrackPlayBack(data.players, map, options);
 };