mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Merge pull request #362 from Pax1601/356-add-marker-for-deployed-smoke
Create colored smoke markers
This commit is contained in:
Pax1601
GitHub
commit
0b53fb19b7
@ -1031,13 +1031,41 @@ nav.ol-panel> :last-child {
|
||||
}
|
||||
|
||||
.ol-target-icon {
|
||||
background-image: url("/resources/theme/images/markers/target.svg");
|
||||
height: 52px;
|
||||
pointer-events: none;
|
||||
width: 52px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.ol-smoke-icon {
|
||||
background-image: url("/resources/theme/images/markers/smoke.svg");
|
||||
height: 52px;
|
||||
pointer-events: none;
|
||||
width: 52px;
|
||||
z-index: 9999;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.ol-smoke-icon[data-color="white"] {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.ol-smoke-icon[data-color="blue"] {
|
||||
fill: blue;
|
||||
}
|
||||
|
||||
.ol-smoke-icon[data-color="red"] {
|
||||
fill: red;
|
||||
}
|
||||
|
||||
.ol-smoke-icon[data-color="green"] {
|
||||
fill: green;
|
||||
}
|
||||
|
||||
.ol-smoke-icon[data-color="orange"] {
|
||||
fill: orange;
|
||||
}
|
||||
|
||||
.ol-draw-icon {
|
||||
background-image: url("/resources/theme/images/markers/draw.svg");
|
||||
height: 24px;
|
||||
|
||||
133
client/public/themes/olympus/images/markers/smoke.svg
Normal file
133
client/public/themes/olympus/images/markers/smoke.svg
Normal file
@ -0,0 +1,133 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="52"
|
||||
height="52"
|
||||
viewBox="0 0 13.758333 13.758333"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
|
||||
sodipodi:docname="smoke.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
width="52mm"
|
||||
units="px"
|
||||
inkscape:zoom="1.4823794"
|
||||
inkscape:cx="-107.59729"
|
||||
inkscape:cy="-51.268927"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="1912"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:deskcolor="#d1d1d1" />
|
||||
<defs
|
||||
id="defs2">
|
||||
<linearGradient
|
||||
id="linearGradient4717"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#0cffff;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop4715" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<circle
|
||||
style="stroke-width:13.3879;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901"
|
||||
cx="6.3892984"
|
||||
cy="12.526179"
|
||||
r="0.40000001" />
|
||||
<circle
|
||||
style="stroke-width:21.3082;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901-1"
|
||||
cx="6.1684337"
|
||||
cy="11.768929"
|
||||
r="0.63664067" />
|
||||
<circle
|
||||
style="stroke-width:28.7005;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901-5"
|
||||
cx="7.067668"
|
||||
cy="11.674273"
|
||||
r="0.85750532" />
|
||||
<circle
|
||||
style="stroke-width:28.1725;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901-4"
|
||||
cx="6.8468037"
|
||||
cy="10.711934"
|
||||
r="0.84172928" />
|
||||
<circle
|
||||
style="stroke-width:51.9334;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901-6"
|
||||
cx="8.7714815"
|
||||
cy="8.3928556"
|
||||
r="1.5516512" />
|
||||
<circle
|
||||
style="stroke-width:41.373;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901-2"
|
||||
cx="7.9037986"
|
||||
cy="10.159773"
|
||||
r="1.2361304" />
|
||||
<circle
|
||||
style="stroke-width:53.5174;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901-3"
|
||||
cx="7.320085"
|
||||
cy="7.6040535"
|
||||
r="1.5989795" />
|
||||
<circle
|
||||
style="fill-opacity:1;stroke:none;stroke-width:53.5174;stroke-linecap:round;stroke-opacity:1"
|
||||
id="path901-3-9"
|
||||
cx="7.05018"
|
||||
cy="9.5266676"
|
||||
r="1.5989795" />
|
||||
<circle
|
||||
style="stroke-width:60.3817;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901-20"
|
||||
cx="10.033565"
|
||||
cy="6.5155067"
|
||||
r="1.804068" />
|
||||
<circle
|
||||
style="stroke-width:60.9097;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901-15"
|
||||
cx="8.0300064"
|
||||
cy="4.9221258"
|
||||
r="1.819844" />
|
||||
<circle
|
||||
style="stroke-width:56.6856;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901-0"
|
||||
cx="11.800482"
|
||||
cy="2.3821828"
|
||||
r="1.6936357" />
|
||||
<circle
|
||||
style="stroke-width:56.1575;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901-0-9"
|
||||
cx="11.3272"
|
||||
cy="4.7801414"
|
||||
r="1.6778597" />
|
||||
<circle
|
||||
style="stroke-width:68.302;stroke-linecap:round;stroke:none;stroke-opacity:1;fill-opacity:1"
|
||||
id="path901-0-4"
|
||||
cx="9.8600283"
|
||||
cy="2.6345997"
|
||||
r="2.0407088" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
101
client/public/themes/olympus/images/markers/target - Copy.svg
Normal file
101
client/public/themes/olympus/images/markers/target - Copy.svg
Normal file
@ -0,0 +1,101 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="52"
|
||||
height="52"
|
||||
viewBox="0 0 13.758333 13.758333"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||
sodipodi:docname="target.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
width="52mm"
|
||||
units="px"
|
||||
inkscape:zoom="16.771208"
|
||||
inkscape:cx="31.989348"
|
||||
inkscape:cy="27.63665"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs2">
|
||||
<linearGradient
|
||||
id="linearGradient4717"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#0cffff;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop4715" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<ellipse
|
||||
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.03188;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="path5477"
|
||||
cx="6.8599777"
|
||||
cy="6.8209338"
|
||||
rx="1.9410306"
|
||||
ry="1.948356" />
|
||||
<rect
|
||||
style="fill:#ff5858;fill-opacity:1;stroke:#ffffff;stroke-width:0.79375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="rect3980"
|
||||
width="0.54935014"
|
||||
height="2.6236348"
|
||||
x="6.5846372"
|
||||
y="3.3855996"
|
||||
rx="0.29515001" />
|
||||
<rect
|
||||
style="fill:#ff5858;fill-opacity:1;stroke:#ffffff;stroke-width:0.79375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="rect3980-4"
|
||||
width="0.54935014"
|
||||
height="2.6236348"
|
||||
x="6.5858645"
|
||||
y="7.6347723"
|
||||
rx="0.29515001" />
|
||||
<rect
|
||||
style="fill:#ff5858;fill-opacity:1;stroke:#ffffff;stroke-width:0.79375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="rect3980-47"
|
||||
width="0.54935014"
|
||||
height="2.6236348"
|
||||
x="6.5517845"
|
||||
y="-10.252322"
|
||||
rx="0.29515001"
|
||||
transform="rotate(90)" />
|
||||
<rect
|
||||
style="fill:#ff5858;fill-opacity:1;stroke:#ffffff;stroke-width:0.79375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="rect3980-4-3"
|
||||
width="0.54935014"
|
||||
height="2.6236348"
|
||||
x="6.5530119"
|
||||
y="-6.003149"
|
||||
rx="0.29515001"
|
||||
transform="rotate(90)" />
|
||||
<ellipse
|
||||
style="fill:none;fill-opacity:1;stroke:#ff5858;stroke-width:0.449792;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:5.6;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
id="path5477-2"
|
||||
cx="6.8613305"
|
||||
cy="6.8167095"
|
||||
rx="1.9410306"
|
||||
ry="1.948356" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
@ -12,6 +12,7 @@ import { ftToM } from "../other/utils";
|
||||
import { GAME_MASTER } from "../constants/constants";
|
||||
import { navyUnitDatabase } from "../unit/navyunitdatabase";
|
||||
import { CoalitionArea } from "../map/coalitionarea";
|
||||
import { SmokeMarker } from "../map/smokemarker";
|
||||
|
||||
export class MapContextMenu extends ContextMenu {
|
||||
#coalitionSwitch: Switch;
|
||||
@ -158,6 +159,8 @@ export class MapContextMenu extends ContextMenu {
|
||||
document.addEventListener("contextMenuDeploySmoke", (e: any) => {
|
||||
this.hide();
|
||||
spawnSmoke(e.detail.color, this.getLatLng());
|
||||
var marker = new SmokeMarker(this.getLatLng(), e.detail.color);
|
||||
marker.addTo(getMap());
|
||||
});
|
||||
|
||||
document.addEventListener("contextMenuExplosion", (e: any) => {
|
||||
|
||||
31
client/src/map/smokemarker.ts
Normal file
31
client/src/map/smokemarker.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { DivIcon, LatLngExpression, MarkerOptions } from "leaflet";
|
||||
import { CustomMarker } from "./custommarker";
|
||||
import { SVGInjector } from "@tanem/svg-injector";
|
||||
import { getMap } from "..";
|
||||
|
||||
export class SmokeMarker extends CustomMarker {
|
||||
#color: string;
|
||||
|
||||
constructor(latlng: LatLngExpression, color: string, options?: MarkerOptions) {
|
||||
super(latlng, options);
|
||||
this.setZIndexOffset(9999);
|
||||
this.#color = color;
|
||||
window.setTimeout(() => { this.removeFrom(getMap()); }, 300000) /* Remove the smoke after 5 minutes */
|
||||
}
|
||||
|
||||
createIcon() {
|
||||
this.setIcon(new DivIcon({
|
||||
iconSize: [52, 52],
|
||||
iconAnchor: [26, 52],
|
||||
className: "leaflet-smoke-marker",
|
||||
}));
|
||||
var el = document.createElement("div");
|
||||
el.classList.add("ol-smoke-icon");
|
||||
el.setAttribute("data-color", this.#color);
|
||||
var img = document.createElement("img");
|
||||
img.src = "/resources/theme/images/markers/smoke.svg";
|
||||
img.onload = () => SVGInjector(img);
|
||||
el.appendChild(img);
|
||||
this.getElement()?.appendChild(el);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user