From cc386e86b9ebe0f45c50c1dbc144d39f51bf7b69 Mon Sep 17 00:00:00 2001 From: Pax1601 Date: Tue, 29 Aug 2023 10:02:18 +0200 Subject: [PATCH] Create colored smoke markers --- client/public/stylesheets/olympus.css | 30 +++- .../themes/olympus/images/markers/smoke.svg | 133 ++++++++++++++++++ .../olympus/images/markers/target - Copy.svg | 101 +++++++++++++ .../olympus/images/markers/temporary-icon.png | Bin 2538 -> 0 bytes client/src/controls/mapcontextmenu.ts | 3 + client/src/map/smokemarker.ts | 31 ++++ 6 files changed, 297 insertions(+), 1 deletion(-) create mode 100644 client/public/themes/olympus/images/markers/smoke.svg create mode 100644 client/public/themes/olympus/images/markers/target - Copy.svg delete mode 100644 client/public/themes/olympus/images/markers/temporary-icon.png create mode 100644 client/src/map/smokemarker.ts diff --git a/client/public/stylesheets/olympus.css b/client/public/stylesheets/olympus.css index fabc3105..9c40b7f1 100644 --- a/client/public/stylesheets/olympus.css +++ b/client/public/stylesheets/olympus.css @@ -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; diff --git a/client/public/themes/olympus/images/markers/smoke.svg b/client/public/themes/olympus/images/markers/smoke.svg new file mode 100644 index 00000000..4c058371 --- /dev/null +++ b/client/public/themes/olympus/images/markers/smoke.svg @@ -0,0 +1,133 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/public/themes/olympus/images/markers/target - Copy.svg b/client/public/themes/olympus/images/markers/target - Copy.svg new file mode 100644 index 00000000..7afbf612 --- /dev/null +++ b/client/public/themes/olympus/images/markers/target - Copy.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + diff --git a/client/public/themes/olympus/images/markers/temporary-icon.png b/client/public/themes/olympus/images/markers/temporary-icon.png deleted file mode 100644 index 712221a037440b8ec733699557345d0a48851823..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2538 zcmV%$WAf1p#$bTT!hGBHbX8|B!=xZUQ z8q%&thj$YhBu5?xu+Sbgde<5WxW*ot zK+w$&sK<{3Tw9B?lJOp5G9)1KP{zQ(zyXiP^Qt(Y_QM8w@BM1?^OD8+vS!sv87r{% zYgqdLbTQSEv4CWP!Qers*Z6U3n_9bRo64EDFie)MT4z2RM@tQ6*Jv=}5D}UOWcJ|g z{8k*WeDykMZTlqZv!|bWQfkhglCc7o`ia-;JwkT)YI;xP7*DJpb96^X$1FE)_TJfZ zG070EZU2*#6;(1;P#5ZCgb>yBq7tG>i;IhmDO0AD%g`<#6Sei1#Bt1r&SP9)s?X;; zE?V!9p~8_6?N_AV+uQqHe0)~M2~&I-QSToweOvs2F4^NI{B#r8&lHzfv$_z0|HYWknH08cdNJz#HLD7d-k%p=W~R6Wb-Q=(9`^(4A3KdB zZa5&Rr>Cb%jSx)D%T}$O$g~}X{{DVe>Io_$g%9R+oi)6bm6ciR*RTInMv0RZ?@Dva z4e3N&Gt!b7xgm)!YpmHr&Nm#*(r>v`UM_+qZ9T zi}z-(HMOX1-`=I>FIr)~{h$8)Rn_VDtMS0vjYAvrnX~5{$HVQuA)&-JXeBetS=NDg zGBPq&#Cj`D&DUk!=5G#u_Xh&zTW!96UCK(|8c`fXL#A)&_kMrCaeQiO>I<`H&#t_A z^JdVxXXSItLSAII`LQPW*(=3S?>9By7?+Ln^+N}x011LA+{xt#Y_u~$#x#U=&%O_t zge1;J+JxAM`K&qiGq+&Y`$y@YT#rvoO#G^7&w^0~=xHW1UB&XV2es0d<#Ph)&3*;- z9*iOT=44t3X7t6Hpa92#SXdJ0nOiU>i*|fpX5~I7>oygc@fi=AP?*cv33((=u}aX# zqivwy+wm<|KJNq;xplfOqTagI!ootMy1LpxhV!6A_s6mleVp0s zFW4)tVL@MJhIxP+4>Ck#0qgg7#T`#waq--`bt}9K0wEG(^*94X>Bnl4@IhUDSe0?C z^zFFgA3b_>4LWB-(lv*Wg#v+q6;vLSJx$0SPs=2LH60Iv+yeO7DK2sN^rxq%%Yz3G zL~}4$3(3lrE3L9Yb#-;M!S%!~*h8QKK5UBP(L)&qPy!kokJ)MNMZry4UvZrafo2sa&@WYHP;(&NZ z>UjNy@HrZWjXn8}yAtaD{rm5imzTFosLEC+PMk1ZjwJ*82mHbkJcy(aJbn7~n@$tP zD@1+1%wdY}eYsd(`_=1Vn`N{)+!nYE4GoplSLMZ7*xrbnVD%whqQZUdwcuwsZ*!M-3(ZNS(SEP?wl}}p?fV~{q?vsKsZ#WX=l0J47lAhxISB7Uw>GQ0Zid^#qnsG)Ya9o zeZ^kkGuqwKB}Q-2B1E@Kft&G=_Y`CvB>&2lD}PpF012G=*Eus*MvJRgufBznEFadf zk^yy05r-4PU~=Fli|Z^1PlbywU%q@yO%k{^bR`)0hsQgwWv^ z;_WP%3{slR637CC!B@}%rcTr?S;BiFajitZOhaS*3%GtsyB^Dor57$-DCz6#3#bVO z*QlwfDdCIMYtPfVP^UDBXkW#I(i^SidPtF368fKmT#MAMUAwk)c6R<(O%U$hy?c4* z&YeunOZA$$T8At*t`^NgqRp9G%6T#dgqGQc}`bTU*P` z+boVb48KDsptlEPP_{j?DgjEr9upIeeyE9gwBm`HM2ePV{hjwcnwVG5Yk-IW63V^~ z?uou<3f!t6BnNN};>z8>mx3434HvW%>6gf+{3r?881ou#UA3t-sQzOW+M-d^Nb}y5;5lh0fl=52zJxm;I;!G)8E?KYFRBPLvb>; z{~8$y)X<+`tTr-T%uE_+%`#!6W@l%!8qVNeCZP>6T}vv*i_@% diff --git a/client/src/controls/mapcontextmenu.ts b/client/src/controls/mapcontextmenu.ts index 1d51952c..1dd906ad 100644 --- a/client/src/controls/mapcontextmenu.ts +++ b/client/src/controls/mapcontextmenu.ts @@ -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) => { diff --git a/client/src/map/smokemarker.ts b/client/src/map/smokemarker.ts new file mode 100644 index 00000000..678912c2 --- /dev/null +++ b/client/src/map/smokemarker.ts @@ -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); + } +}