Improving navigation and using an arrow icon instead of a circle for the player.

js-src/conquer/index.ts

@@ -32,6 +32,8 @@ type StylesInterface = Record<string, Style>
 export default class Conquer {
     private conquerContainer: HTMLDivElement
     private map: Map
+    private enabledOnRotate = true
+    private rotation = 0;
     private currentLongitude: number
     private intervalSendCoordinates: number | null = null;
     private currentLatitude: number
@@ -166,17 +168,15 @@ export default class Conquer {
         if (!(this.state & MapState.NORMAL)) {
             return
         }
-        const selfPlayerUI = new SelfPlayerUI(!!(this.getState() & (MapState.FREE_MOVE | MapState.FREE_ROTATION)))
+        const selfPlayerUI = new SelfPlayerUI(!!(this.getState() & (MapState.FREE_MOVE)))
         selfPlayerUI.on('close', () => {
             this.interfaceManager.remove(selfPlayerUI)
         })
         selfPlayerUI.on('enable-explorer-mode', () => {
             this.addState(MapState.FREE_MOVE);
-            this.addState(MapState.FREE_ROTATION);
         });
         selfPlayerUI.on('disable-explorer-mode', () => {
             this.removeState(MapState.FREE_MOVE);
-            this.removeState(MapState.FREE_ROTATION);
         });
         selfPlayerUI.on('createNodeStart', () => {
             this.addState(MapState.CREATE_NODE)
@@ -349,7 +349,7 @@ export default class Conquer {
 
     async run() {
         this.runPreStartState()
-        this.setState(MapState.NORMAL)
+        this.setState(MapState.NORMAL | MapState.FREE_ROTATION)
         const conquerContainer = this.conquerContainer
         //layer.on('prerender', (evt) => {
         //  // return
@@ -436,6 +436,8 @@ export default class Conquer {
                     src: '/img/arrow-player.svg',
                     color: color,
                     scale: 0.2,
+                    rotation: this.rotation,
+                    rotateWithView: true,
                 }),
                 zIndex: 4,
             })
@@ -517,13 +519,16 @@ export default class Conquer {
             console.error(error)
         })
     }
-    enabledOnRotate = true
     onRotate(alpha: number, beta: number, gamma: number) {
         if (this.enabledOnRotate) {
             this.alpha = alpha
             this.beta = beta 
             this.gamma = gamma 
             this.enabledOnRotate = false
+            this.rotation  = -(this.compassHeading(alpha, beta, gamma) - this.rotationOffset);
+            if (this.currentPositionFeature !== null) {
+                this.currentPositionFeature.changed();
+            }
             if (this.firstSetRotation || !(this.state & MapState.FREE_ROTATION)) {
                 this.map.getView().setRotation((this.compassHeading(alpha, beta, gamma) - this.rotationOffset))
                 this.firstSetRotation = false

js-src/conquer/map-node.ts

@@ -153,8 +153,8 @@ export default class MapNode {
                 radius: 14,
                 fill: new Fill({color: color}),
                 stroke: new Stroke({
-                    color: 'gray',
-                    width: 2,
+                    color: 'black',
+                    width: 5,
                 })
             })
         });

public/img/arrow-player.svg

@@ -25,10 +25,10 @@
      inkscape:document-units="px"
      showgrid="false"
      inkscape:zoom="4.3444444"
-     inkscape:cx="86.432225"
-     inkscape:cy="90"
+     inkscape:cx="86.777494"
+     inkscape:cy="90.000001"
      inkscape:window-width="1920"
-     inkscape:window-height="1043"
+     inkscape:window-height="1011"
      inkscape:window-x="0"
      inkscape:window-y="0"
      inkscape:window-maximized="1"
@@ -41,12 +41,12 @@
      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"
+       style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:10.6795;stroke-dasharray:none;stroke-opacity:1"
        id="path1514"
        cy="90"
        cx="90"
-       rx="87.179558"
-       ry="88.385521" />
+       rx="84.558273"
+       ry="84.660248" />
   </g>
   <g
      inkscape:groupmode="layer"