diff --git a/src/App.css b/src/App.css
index 34db93f0603adb9bfbc0f58926129cbb81607c49..bc9556dc36b07c79980b0602f863690d34a151e9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -288,3 +288,50 @@ div.login button:hover {
.filterContainer input:hover {
cursor: pointer;
}
+
+/* Score Counter */
+/* div.scoreContainer {
+ border-radius: 8px;
+ position: absolute;
+ display: flex;
+ flex-direction: row;
+ color: white;
+ background-color: #1d1d1b;
+ opacity: 0.9;
+ height: 50px;
+ max-width: 400px;
+ margin: auto;
+ top: 5px;
+ left: calc(50vw - 100px);
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+div.scoreBlock {
+ flex: 1;
+ padding: 5px;
+ max-width: 120px;
+ text-align: center;
+ justify-content: center;
+ letter-spacing: 0.05em;
+ font-size: 1.5em;
+}
+
+div.scoreDivider {
+ background-color: white;
+ float: left;
+ flex: 1;
+ width: 2px;
+ height: 70%;
+ margin: 5px;
+}
+
+span.scoreCircle {
+ margin: 10px;
+ height: 25px;
+ width: 25px;
+ background-color: red;
+ border-radius: 50%;
+ display: inline-block;
+} */
diff --git a/src/components/ReplayMap.js b/src/components/ReplayMap.js
index 1e6305e1fe5e32757d3f78f8884f188aa862153a..2a16aeb726086efcf62f2b866d61cb8024dad537 100644
--- a/src/components/ReplayMap.js
+++ b/src/components/ReplayMap.js
@@ -15,9 +15,11 @@ export default class ReplayMap extends React.Component {
// stores the playback object
playback: null,
// stores player locations from backend
- data: null,
+ players: [],
// stores all factions from the game
factions: [],
+ // stores all scores from the game
+ scores: [],
// stores all drawings from backend
allGeoJSON: [],
// stores all active drawings on the map
@@ -30,32 +32,19 @@ export default class ReplayMap extends React.Component {
await this.setState({
gameId: await new URL(window.location.href).searchParams.get("id")
});
- // fetch player data with gameId
- // throws error if game is not found and redirects back to game selection
+ // fetch all data and set it to state
+ let replaydata = await this.fetchReplayData();
await this.setState({
- data: await this.fetchPlayerData()
+ players: replaydata.players,
+ factions: replaydata.factions,
+ scores: replaydata.scores
});
- // fetch factions from the game
- await this.setState({
- factions: await this.fetchFactions()
- });
- // fetch drawings with gameId
- await this.setState({
- allGeoJSON: await this.fetchDrawingData()
- });
- // WIP, map only active drawings to activeGeoJSON state
- await this.setState({
- activeGeoJSON: this.tickDrawings()
- });
- // if game was found but game has no replay data, alert the user
- this.state.data.length > 1
- ? this.replay()
- : alert("No replay data was found");
+ replaydata ? this.replay() : alert("No replay data was found");
}
- fetchPlayerData = async () => {
+ fetchReplayData = async () => {
let res = await fetch(
- `${process.env.REACT_APP_API_URL}/replay/players/${this.state.gameId}`
+ `${process.env.REACT_APP_API_URL}/replay/${this.state.gameId}`
);
if (await res.ok) {
return await res.json();
@@ -65,36 +54,6 @@ 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}`
- );
- if (await res.ok) {
- return await res.json();
- } else {
- alert(res.statusText);
- }
- };
-
tickDrawings = () => {
return this.state.allGeoJSON.map(drawing => {
return drawing[0];
@@ -107,7 +66,7 @@ export default class ReplayMap extends React.Component {
attribution:
'© <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
}).addTo(this.map);
- this.trackplayback = new L.TrackPlayBack(this.state.data, this.map, {
+ this.trackplayback = new L.TrackPlayBack(this.state.players, this.map, {
trackPointOptions: {
// whether to draw track point
isDraw: true,
@@ -149,6 +108,9 @@ export default class ReplayMap extends React.Component {
},
filterOptions: {
factions: this.state.factions
+ },
+ scoreOptions: {
+ scores: this.state.scores
}
});
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 18ee33f079993f32cc1b92a2d197f82845cb0776..2d2e9f5ddd0da2e61f9ed56fe45e862ac53f84a7 100644
--- a/src/track-playback/src/control.trackplayback/control.playback.js
+++ b/src/track-playback/src/control.trackplayback/control.playback.js
@@ -136,17 +136,29 @@ export const TrackPlayBackControl = L.Control.extend({
"faction-text-filter",
this._filterContainer
);
- // create checkboxes for filtering persons based on their faction
+ // get factions in replay
let factions = this.trackPlayBack.passFactions();
- let factionCheckboxes = [];
- factions.map(faction => {
- factionCheckboxes.push(
- this._createCheckbox(
- `show ${faction.name}`,
- `show-${faction.name}`,
- this._filterContainer,
- this._showFaction
- )
+ // create checkboxes for filtering persons based on their faction
+ this._factionCheckboxes = factions.map(faction => {
+ return this._createCheckbox(
+ `show ${faction.name}`,
+ `show-${faction.name}`,
+ this._filterContainer,
+ this._showFaction
+ );
+ });
+ // create a div container for score replay
+ this._scoreContainer = this._createContainer(
+ "scoreContainer",
+ this._container
+ );
+ // create score blocks for each faction
+ this._factionScoreboxes = factions.map(faction => {
+ return this._createInfo(
+ `${faction.name}: `,
+ 0,
+ "scoreBlock",
+ this._scoreContainer
);
});
@@ -367,6 +379,10 @@ export const TrackPlayBackControl = L.Control.extend({
// 更新时间
let time = this.getTimeStrFromUnix(e.time);
this._infoCurTime.innerHTML = time;
+ // tick scores
+ for (let i = 0; i < this._factionScoreboxes.length; i++) {
+ this._factionScoreboxes[i].innerHTML = this.trackPlayBack.passScores(i);
+ }
// 更新时间轴
this._slider.value = e.time;
// æ’放结æŸåŽæ”¹å˜æ’æ”¾æŒ‰é’®æ ·å¼
diff --git a/src/track-playback/src/leaflet.trackplayback/draw.js b/src/track-playback/src/leaflet.trackplayback/draw.js
index 9949f45fd090be1efdf684b9fcc556ee0eb66ac6..8fdfefcb7a6e9813126ec42f006944ab3854bd53 100644
--- a/src/track-playback/src/leaflet.trackplayback/draw.js
+++ b/src/track-playback/src/leaflet.trackplayback/draw.js
@@ -53,6 +53,7 @@ export const Draw = L.Class.extend({
L.extend(this.targetOptions, options.targetOptions);
L.extend(this.toolTipOptions, options.toolTipOptions);
L.extend(this.filterOptions, options.filterOptions);
+ L.extend(this.scoreOptions, options.scoreOptions);
this._showTrackPoint = this.trackPointOptions.isDraw;
this._showTrackLine = this.trackLineOptions.isDraw;
diff --git a/src/track-playback/src/leaflet.trackplayback/trackcontroller.js b/src/track-playback/src/leaflet.trackplayback/trackcontroller.js
index 2e8157437f541500e2aa0774329d2c9969a7d6ce..c2d53d9a230b2ae1e81fddc2c3d2cbba02470af0 100644
--- a/src/track-playback/src/leaflet.trackplayback/trackcontroller.js
+++ b/src/track-playback/src/leaflet.trackplayback/trackcontroller.js
@@ -8,10 +8,11 @@ import { Track } from "./track";
* 控制轨迹和绘制
*/
export const TrackController = L.Class.extend({
- initialize: function(tracks = [], draw, options) {
+ initialize: function(tracks = [], draw, allScores, options) {
L.setOptions(this, options);
-
+ this._activeScores = [0, 0];
this._tracks = [];
+ this._scores = allScores.scores;
this.addTrack(tracks);
this._draw = draw;
@@ -49,6 +50,16 @@ export const TrackController = L.Class.extend({
let tps = track.getTrackPointsBeforeTime(time);
if (tps && tps.length) this._draw.drawTrack(tps);
}
+ for (let i = 0; i < this._scores.length; i++) {
+ let newScore = 0;
+ let scores = this._scores[i];
+ for (let j = 0; j < scores.length; j++) {
+ if (scores[j].timestamp < time) {
+ newScore = scores[j].score;
+ }
+ }
+ this._activeScores[i] = newScore;
+ }
},
_updateTime: function() {
diff --git a/src/track-playback/src/leaflet.trackplayback/trackplayback.js b/src/track-playback/src/leaflet.trackplayback/trackplayback.js
index 5aa35aa0cabe74f17ee026b3108bc55bacad4b45..c26733cbfdc9f6056af2ca68b39e62d5de358654 100644
--- a/src/track-playback/src/leaflet.trackplayback/trackplayback.js
+++ b/src/track-playback/src/leaflet.trackplayback/trackplayback.js
@@ -23,10 +23,15 @@ export const TrackPlayBack = L.Class.extend({
targetOptions: options.targetOptions,
toolTipOptions: options.toolTipOptions,
filterOptions: options.filterOptions
+ //scoreOptions: options.scoreOptions
};
this.tracks = this._initTracks(data);
this.draw = new Draw(map, drawOptions);
- this.trackController = new TrackController(this.tracks, this.draw);
+ this.trackController = new TrackController(
+ this.tracks,
+ this.draw,
+ options.scoreOptions
+ );
this.clock = new Clock(this.trackController, options.clockOptions);
this.clock.on("tick", this._tick, this);
@@ -118,6 +123,9 @@ export const TrackPlayBack = L.Class.extend({
passFactions: function() {
return this.draw.filterOptions.factions;
},
+ passScores: function(i) {
+ return this.trackController._activeScores[i];
+ },
dispose: function() {
this.clock.off("tick", this._tick);
this.draw.remove();