From a0e0dfc2d58e1e98b1afab06e3ee3747074c4d8a Mon Sep 17 00:00:00 2001
From: L4168 <L4168@student.jamk.fi>
Date: Fri, 19 Jul 2019 10:02:25 +0300
Subject: [PATCH] cleaning up code
---
src/components/ReplayMap.js | 89 +++----------------
.../leaflet.trackplayback/trackcontroller.js | 2 +-
.../leaflet.trackplayback/trackplayback.js | 9 +-
3 files changed, 19 insertions(+), 81 deletions(-)
diff --git a/src/components/ReplayMap.js b/src/components/ReplayMap.js
index 2a16aeb..cee0f20 100644
--- a/src/components/ReplayMap.js
+++ b/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:
'© <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='© <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>
diff --git a/src/track-playback/src/leaflet.trackplayback/trackcontroller.js b/src/track-playback/src/leaflet.trackplayback/trackcontroller.js
index c2d53d9..b623033 100644
--- a/src/track-playback/src/leaflet.trackplayback/trackcontroller.js
+++ b/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;
diff --git a/src/track-playback/src/leaflet.trackplayback/trackplayback.js b/src/track-playback/src/leaflet.trackplayback/trackplayback.js
index c26733c..3d40db1 100644
--- a/src/track-playback/src/leaflet.trackplayback/trackplayback.js
+++ b/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);
};
--
GitLab