Merged branch 'development' into 'notification-view'

src/App.css

@@ -304,3 +304,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;
+} */

src/components/GameView.js

@@ -66,6 +66,37 @@ export default class GameView extends React.Component {
       });
   }
 
+  handleLeaveFaction = e => {
+    let token = sessionStorage.getItem("token");
+    let error = false;
+    fetch(
+      `${process.env.REACT_APP_API_URL}/faction/leave/${
+        this.state.gameInfo.id
+      }`,
+      {
+        method: "DELETE",
+        headers: {
+          Authorization: "Bearer " + token
+        }
+      }
+    )
+      .then(res => {
+        if (!res.ok) {
+          throw Error();
+        } else {
+          return res.json();
+        }
+      })
+      .then(res => {
+        alert(res.message);
+        this.getPlayerRole(this.state.gameInfo.id);
+      })
+      .catch(error => {
+        alert("Game not found");
+        window.document.location.href = "/";
+      });
+  };
+
   handleLeaveFaction = e => {
     if (window.confirm("Are you sure you want to leave your faction?")) {
       let token = sessionStorage.getItem("token");

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:
         '&copy; <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({

src/components/TaskItem.js

@@ -70,15 +70,11 @@ class TaskItem extends React.Component {
   };
 
   render() {
-    let factionlistItems = [];
-    for (let i = 0; i < this.state.factions.length; i++) {
-      const faction = this.state.factions[i];
-      factionlistItems.push(
-        <option key={faction.factionId} value={faction.factionId}>
-          {faction.factionName}
-        </option>
-      );
-    }
+    let factionlistItems = this.state.factions.map(faction => (
+      <option key={faction.factionId} value={faction.factionId}>
+        {faction.factionName}
+      </option>
+    ));
 
     return (
       <div className="tasklist-item">

src/components/UserMap.js

@@ -163,7 +163,6 @@ class UserMap extends Component {
           url={this.props.mapUrl}
         />
         <ZoomControl position="topright" />
-
         <DrawTools
           position={this.props.position}
           sendGeoJSON={this.sendGeoJSON}
@@ -171,7 +170,6 @@ class UserMap extends Component {
           currentGameId={this.props.currentGameId}
           role={this.props.role}
         />
-
         {this.state.ownLat !== null && (
           <Marker position={[this.state.ownLat, this.state.ownLng]}>
             <Popup>

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;
     // 播放结束后改变播放按钮样式

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;

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

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