From 7b4d49153fad331b53d915d4f4b0004bd463102f Mon Sep 17 00:00:00 2001
From: L4168 <L4168@student.jamk.fi>
Date: Tue, 16 Jul 2019 13:08:59 +0300
Subject: [PATCH] player replay wip
---
public/{infantry-red.svg => infantry.svg} | 0
public/light-infantry.svg | 24 +++++++++++++++++
src/components/ReplayMap.js | 19 +++++++------
.../src/leaflet.trackplayback/draw.js | 27 ++++++++++++++++---
4 files changed, 57 insertions(+), 13 deletions(-)
rename public/{infantry-red.svg => infantry.svg} (100%)
create mode 100644 public/light-infantry.svg
diff --git a/public/infantry-red.svg b/public/infantry.svg
similarity index 100%
rename from public/infantry-red.svg
rename to public/infantry.svg
diff --git a/public/light-infantry.svg b/public/light-infantry.svg
new file mode 100644
index 0000000..4e7d1c7
--- /dev/null
+++ b/public/light-infantry.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="591.0625" height="372.0625" id="svg2">
+ <defs id="defs4">
+ <linearGradient id="linearGradient3777">
+ <stop id="stop3779" style="stop-color:#b35800;stop-opacity:1" offset="0"/>
+ </linearGradient>
+ </defs>
+ <metadata id="metadata7">
+ <rdf:RDF>
+ <cc:Work rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+ <dc:title/>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g transform="translate(-72.28125,-210.75)" id="layer1">
+ <path d="M 585.90976,366.37406 4.2663332,3.7357361" transform="translate(72.28125,210.75)" id="path3881" style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+ <path d="M 584.7946,6.0174311 5.6411055,365.7946" transform="translate(72.28125,210.75)" id="path3883" style="fill:none;stroke:#000000;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+ <rect width="583.06555" height="364.06042" x="76.266335" y="214.73877" id="rect3859" style="fill:none;stroke:#0b04fb;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
+ </g>
+ <text x="293.67578" y="344.20807" id="text2988" xml:space="preserve" style="font-size:50px;font-style:normal;font-weight:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"><tspan x="293.67578" y="344.20807" id="tspan2990" style="font-size:100px">L</tspan></text>
+</svg>
\ No newline at end of file
diff --git a/src/components/ReplayMap.js b/src/components/ReplayMap.js
index c1396c0..213652d 100644
--- a/src/components/ReplayMap.js
+++ b/src/components/ReplayMap.js
@@ -15,6 +15,8 @@ export default class ReplayMap extends React.Component {
this.state = {
// stores the playback object
playback: null,
+ // stores player locations from backend
+ data: null,
// stores all drawings from backend
allGeoJSON: [],
// stores all active drawings on the map
@@ -38,7 +40,7 @@ export default class ReplayMap extends React.Component {
await fetch(
`${
process.env.REACT_APP_API_URL
- }/replay/players/a1231e2b-aa29-494d-b687-ea2d48cc23df`,
+ }/replay/players/15e9563b-e621-4ba1-a440-1b21c7774923`,
{
method: "GET"
}
@@ -59,10 +61,9 @@ export default class ReplayMap extends React.Component {
fetchDrawingData = async () => {
await fetch(
- /* `${
+ `${
process.env.REACT_APP_API_URL
- }/replay/a1231e2b-aa29-494d-b687-ea2d48cc23df`, */
- `http://localhost:5000/replay/15e9563b-e621-4ba1-a440-1b21c7774923`,
+ }/replay/a1231e2b-aa29-494d-b687-ea2d48cc23df`,
{
method: "GET"
}
@@ -114,7 +115,7 @@ export default class ReplayMap extends React.Component {
// 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: "../infantry-red.svg",
+ imgUrl: "../light-infantry.svg",
// the width of target, unit: px
width: 60,
// the height of target, unit: px
@@ -160,11 +161,9 @@ export default class ReplayMap extends React.Component {
<DrawGeoJSON geoJSONLayer={this.state.activeGeoJSON} />
)}
</Map> */
- <div className="map" ref="map">
- {/* {this.state.activeGeoJSON.features && (
- <DrawGeoJSON geoJSONLayer={this.state.activeGeoJSON} />
- )} */}
- </div>
+ <React.Fragment>
+ <div className="map" ref="map" />
+ </React.Fragment>
);
}
}
diff --git a/src/track-playback/src/leaflet.trackplayback/draw.js b/src/track-playback/src/leaflet.trackplayback/draw.js
index 7100dc7..2664aed 100644
--- a/src/track-playback/src/leaflet.trackplayback/draw.js
+++ b/src/track-playback/src/leaflet.trackplayback/draw.js
@@ -176,8 +176,9 @@ export const Draw = L.Class.extend({
}
// 画船
let targetPoint = trackpoints[trackpoints.length - 1];
+ let info = trackpoints[0].info;
if (this.targetOptions.useImg && this._targetImg) {
- this._drawShipImage(targetPoint);
+ this._drawShipImage(targetPoint, info);
} else {
this._drawShipCanvas(targetPoint);
}
@@ -292,7 +293,27 @@ export const Draw = L.Class.extend({
this._ctx.restore();
},
- _drawShipImage: function(trackpoint) {
+ _drawShipImage: function(trackpoint, info) {
+ let point = this._getLayerPoint(trackpoint);
+ let width = this.targetOptions.width;
+ let height = this.targetOptions.height;
+ let offset = {
+ x: width / 2,
+ y: height / 2
+ };
+ this._ctx.save();
+ this._ctx.translate(point.x, point.y);
+ let svg = document.createElementNS(`../${info[0]["value"]}`, "svg");
+ let img = new Image();
+ img.onload = () => {
+ this._ctx.drawImage(img, 0 - offset.x, 0 - offset.y, width, height);
+ };
+ img.src = `../${info[0]["value"]}`;
+ console.log(img);
+ this._ctx.restore();
+ },
+
+ /* _drawShipImage: function(trackpoint) {
let point = this._getLayerPoint(trackpoint);
let width = this.targetOptions.width;
let height = this.targetOptions.height;
@@ -310,7 +331,7 @@ export const Draw = L.Class.extend({
height
);
this._ctx.restore();
- },
+ }, */
_getTooltipText: function(targetobj) {
let content = [];
--
GitLab