Adding initial arrow player support.

js-src/conquer/index.ts

@@ -13,6 +13,7 @@ import VectorSource from 'ol/source/Vector'
 import Stroke from 'ol/style/Stroke'
 import Fill from 'ol/style/Fill'
 import CircleStyle from 'ol/style/Circle'
+import Icon from 'ol/style/Icon'
 import Style from 'ol/style/Style'
 import ConquerLogin from '@burguillosinfo/conquer/login'
 import InterfaceManager from '@burguillosinfo/conquer/interface-manager'
@@ -127,20 +128,6 @@ export default class Conquer {
         })
         this.interfaceManager.push(newNodeUI)
         this.removeState(MapState.SELECT_WHERE_TO_CREATE_NODE)
-        // const style = new Style({
-        //     image: new CircleStyle({
-        //         radius: 14,
-        //         fill: new Fill({color: 'white'}),
-        //         stroke: new Stroke({
-        //             color: 'gray',
-        //             width: 2,
-        //         })
-        //     })
-        // })
-        // const mapNode = new MapNode(style, feature, `server-node-${++this.createNodeCounter}`)
-        // this.getServerNodes()[mapNode.getId()] = mapNode
-        // this.refreshLayers()
-
     }
 
     private isStateFillingFormCreateNode(): boolean {
@@ -444,17 +431,17 @@ export default class Conquer {
         }
         const styles: StylesInterface = {
             currentPositionFeature: new Style({
-                image: new CircleStyle({
-                    radius: 14,
-                    fill: new Fill({color: color}),
-                    stroke: new Stroke({
-                        color: 'beige',
-                        width: 2,
-                    })
-                })
+                image: new Icon({
+                    crossOrigin: 'anonymous',
+                    src: '/img/arrow-player.svg',
+                    color: color,
+                    scale: 0.2,
+                }),
+                zIndex: 4,
             })
         };
-        const features = [this.currentPositionFeature]
+        const features = [];
+        features.push(this.currentPositionFeature);
         for (const key in this.getServerNodes()) {
             styles[key] = await this.getServerNodes()[key].getStyle()
             features.push(this.getServerNodes()[key].getFeature())

public/img/arrow-player.svg

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="180"
+   height="180"
+   viewBox="0 0 180 180"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   sodipodi:docname="arrow-player.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="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="true"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="4.3444444"
+     inkscape:cx="86.432225"
+     inkscape:cy="90"
+     inkscape:window-width="1920"
+     inkscape:window-height="1043"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer3" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Layer 3"
+     style="stroke:none;stroke-opacity:1;fill:#000000;fill-opacity:0.99906439">
+    <ellipse
+       style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:3.22896;stroke-dasharray:none;stroke-opacity:1"
+       id="path1514"
+       cy="90"
+       cx="90"
+       rx="87.179558"
+       ry="88.385521" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Layer 2"
+     style="stroke:none;stroke-opacity:1;fill:#000000;fill-opacity:0.99906439">
+    <path
+       style="stroke:none;stroke-opacity:1;fill:#000000;fill-opacity:0.999064;display:inline;stroke-width:3.305;stroke-dasharray:none"
+       d="m 28.658815,141.34251 c -0.325678,6.15261 4.86944,12.88765 14.628956,8.97159 38.996707,-18.73253 63.312439,-19.63928 94.835559,1.74882 9.98035,3.8071 14.6147,-2.83203 15.90752,-6.31374 C 155.26857,105.50676 119.58918,11.778083 91.471615,7.1391499 64.56409,12.696105 28.358025,90.690537 28.658815,141.34251 Z"
+       id="path1682"
+       sodipodi:nodetypes="cccccc" />
+  </g>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <path
+       style="fill:#ffffff;fill-opacity:0.999064;stroke:#000000;stroke-width:2.88197;stroke-dasharray:none;stroke-opacity:1"
+       id="path7203"
+       sodipodi:type="arc"
+       sodipodi:cx="74.857635"
+       sodipodi:cy="50.984001"
+       sodipodi:rx="12.305052"
+       sodipodi:ry="10.465668"
+       sodipodi:start="6.0340459"
+       sodipodi:end="6.0280938"
+       sodipodi:open="true"
+       sodipodi:arc-type="arc"
+       d="M 86.782769,48.403481 A 12.305052,10.465668 0 0 1 77.909434,61.12269 12.305052,10.465668 0 0 1 62.941585,53.594694 12.305052,10.465668 0 0 1 71.770374,40.853082 12.305052,10.465668 0 0 1 86.764498,48.343158" />
+    <path
+       style="display:inline;fill:#ffffff;fill-opacity:0.999064;stroke:#000000;stroke-width:2.8579;stroke-dasharray:none;stroke-opacity:1"
+       id="path7203-7"
+       sodipodi:type="arc"
+       sodipodi:cx="110.57592"
+       sodipodi:cy="50.984138"
+       sodipodi:rx="12.09339"
+       sodipodi:ry="10.471755"
+       sodipodi:start="6.0340459"
+       sodipodi:end="6.0280938"
+       sodipodi:open="true"
+       sodipodi:arc-type="arc"
+       d="m 122.29593,48.402118 a 12.09339,10.471755 0 0 1 -8.72071,12.726606 12.09339,10.471755 0 0 1 -14.710381,-7.532374 12.09339,10.471755 0 0 1 8.676921,-12.749023 12.09339,10.471755 0 0 1 14.73621,7.494432" />
+    <path
+       style="fill:#000000;fill-opacity:0;stroke:#ffffff;stroke-width:2.26257;stroke-dasharray:none;stroke-opacity:1"
+       id="path7803"
+       sodipodi:type="arc"
+       sodipodi:cx="93.89315"
+       sodipodi:cy="100.6772"
+       sodipodi:rx="22.730469"
+       sodipodi:ry="15.978166"
+       sodipodi:start="0.031220556"
+       sodipodi:end="3.1729889"
+       sodipodi:open="true"
+       sodipodi:arc-type="arc"
+       d="M 116.61254,101.17597 A 22.730469,15.978166 0 0 1 104.63719,114.75778 22.730469,15.978166 0 0 1 81.91671,114.25759 22.730469,15.978166 0 0 1 71.173884,100.17563" />
+  </g>
+</svg>