Merge pull request #146 from sh4rkman/dev

Weapon Numbers / Kohat heightmap fix
sh4rkman · May 25, 2024 · e588cb5 · e588cb5
2 parents 8cf4f22 + f50cfcb
commit e588cb5
Show file tree

Hide file tree

Showing 14 changed files with 749 additions and 727 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+# <img src="https://img.shields.io/badge/-minor%20release-%2337b6ff">  **24.1.0** *(2024-05-25)*
+
+<img src="https://img.shields.io/badge/-new-green"> Now displaying a weapon number next to calcs when using several weapons
+
+<img src="https://img.shields.io/badge/-%20fix%20-orange"> fixed dead pixels on Kohat heightmap
+
+<img src="https://img.shields.io/badge/-%20Improv%20-orange"> Scaled down Kohat heightmap
+
+<img src="https://img.shields.io/badge/-%20Improv%20-orange"> Code rewritting and three-shaking
+
+
+
+</br></br><!-- CHANGELOG SPLIT MARKER -->
 
 
 # <img src="https://img.shields.io/badge/-major%20release-blue?style=flat-square">  **24.0.0** *(2024-05-11)*

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "squadcalc",
-  "version": "24.0.0",
+  "version": "24.1.0",
   "description": "A Complete Mortar Calculator for Squad",
   "author": "Maxime 'sharkman' Boussard",
   "license": "MIT",

diff --git a/public/maps/kohat/heightmap.webp b/public/maps/kohat/heightmap.webp
diff --git a/src/app.js b/src/app.js
@@ -5,7 +5,7 @@ import "select2/dist/css/select2.min.css";
 import "select2/dist/js/select2.min.js";
 import "animate.css";
 import "leaflet/dist/leaflet.css";
-import "leaflet/dist/images/marker-shadow.png"; // fix
+//import "leaflet/dist/images/marker-shadow.png"; // fix
 
 // Local styles
 import "./css/styles.scss";

diff --git a/src/js/ellipse.js b/src/js/ellipse.js
@@ -13,58 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import L from "leaflet";
+import { LatLngBounds, Path, Canvas, SVG, Util, Point, Bounds } from "leaflet";
 
-L.SVG.include ({
-    _updateEllipse: function (layer) {
-        var rx = layer._radiusX;
-        var ry = layer._radiusY;
-        var phi = layer._tiltDeg;
-        var endPoint = layer._endPointParams;
-
-        var d = "M" + endPoint.x0 + "," + endPoint.y0 +
-            "A" + rx + "," + ry + "," + phi + "," +
-            endPoint.largeArc + "," + endPoint.sweep + "," +
-            endPoint.x1 + "," + endPoint.y1 + " z";
-        this._setPath(layer, d);
-    }
-});
-
-L.Canvas.include ({
-    _updateEllipse: function (layer) {
-        var p;
-        var ctx;
-        var r;
-        var s;
-
-        if (layer._empty()) { return; }
-
-        p = layer._point;
-        ctx = this._ctx;
-        r = layer._radiusX;
-        s = (layer._radiusY || r) / r;
 
-        this._drawnLayers[layer._leaflet_id] = layer;
+export var ellipse = function (latlng, radii, tilt, options) {
+    return new Ellipse(latlng, radii, tilt, options);
+};
 
-        ctx.save();
-
-        ctx.translate(p.x, p.y);
-        if (layer._tilt !== 0) {
-            ctx.rotate( layer._tilt );
-        }
-        if (s !== 1) {
-            ctx.scale(1, s);
-        }
-
-        ctx.beginPath();
-        ctx.arc(0, 0, r, 0, Math.PI * 2);
-        ctx.restore();
-
-        this._fillStroke(ctx, layer);
-    },
-});
-
-L.Ellipse = L.Path.extend({
+var Ellipse = Path.extend({
 
     options: {
         fill: true,
@@ -74,8 +30,8 @@ L.Ellipse = L.Path.extend({
 
     initialize: function (latlng, radii, tilt, options) {
 
-        L.setOptions(this, options);
-        this._latlng = L.latLng(latlng);
+        Util.setOptions(this, options);
+        this._latlng = latlng;
 
         if (tilt) {
             this._tiltDeg = tilt;
@@ -96,7 +52,7 @@ L.Ellipse = L.Path.extend({
     },
 
     getRadius: function () {
-        return new L.point(this._mRadiusX, this._mRadiusY);
+        return new Point(this._mRadiusX, this._mRadiusY);
     },
 
     setTilt: function (tilt) {
@@ -110,15 +66,15 @@ L.Ellipse = L.Path.extend({
             latRadius = this._getLatRadius(),
             latlng = this._latlng;
 
-        return new L.LatLngBounds(
+        return new LatLngBounds(
             [latlng.lat - latRadius, latlng.lng - lngRadius],
             [latlng.lat + latRadius, latlng.lng + lngRadius]);
     },
 
     // @method setLatLng(latLng: LatLng): this
     // Sets the position of a circle marker to a new location.
     setLatLng: function (latlng) {
-        this._latlng = L.latLng(latlng);
+        this._latlng = latlng;
         this.redraw();
         return this.fire("move", {latlng: this._latlng});
     },
@@ -129,7 +85,7 @@ L.Ellipse = L.Path.extend({
         return this._latlng;
     },
 
-    setStyle: L.Path.prototype.setStyle,
+    setStyle: Path.prototype.setStyle,
 
     _project: function () {
         var lngRadius = this._getLngRadius(),
@@ -158,7 +114,7 @@ L.Ellipse = L.Path.extend({
         var halfHeight = Math.sqrt(aSquare*sinSquare+bSquare*cosSquare);
         var w = this._clickTolerance();
         var p = [halfWidth + w, halfHeight + w];
-        this._pxBounds = new L.Bounds(this._point.subtract(p), this._point.add(p));
+        this._pxBounds = new Bounds(this._point.subtract(p), this._point.add(p));
     },
 
     _update: function () {
@@ -226,6 +182,52 @@ L.Ellipse = L.Path.extend({
     }
 });
 
-export default L.ellipse = function (latlng, radii, tilt, options) {
-    return new L.Ellipse(latlng, radii, tilt, options);
-};
+SVG.include ({
+    _updateEllipse: function (layer) {
+        var rx = layer._radiusX;
+        var ry = layer._radiusY;
+        var phi = layer._tiltDeg;
+        var endPoint = layer._endPointParams;
+
+        var d = "M" + endPoint.x0 + "," + endPoint.y0 +
+            "A" + rx + "," + ry + "," + phi + "," +
+            endPoint.largeArc + "," + endPoint.sweep + "," +
+            endPoint.x1 + "," + endPoint.y1 + " z";
+        this._setPath(layer, d);
+    }
+});
+
+Canvas.include ({
+    _updateEllipse: function (layer) {
+        var p;
+        var ctx;
+        var r;
+        var s;
+
+        if (layer._empty()) { return; }
+
+        p = layer._point;
+        ctx = this._ctx;
+        r = layer._radiusX;
+        s = (layer._radiusY || r) / r;
+
+        this._drawnLayers[layer._leaflet_id] = layer;
+
+        ctx.save();
+
+        ctx.translate(p.x, p.y);
+        if (layer._tilt !== 0) {
+            ctx.rotate( layer._tilt );
+        }
+        if (s !== 1) {
+            ctx.scale(1, s);
+        }
+
+        ctx.beginPath();
+        ctx.arc(0, 0, r, 0, Math.PI * 2);
+        ctx.restore();
+
+        this._fillStroke(ctx, layer);
+    },
+});
+
diff --git a/src/js/listeners.js b/src/js/listeners.js
@@ -39,7 +39,13 @@ $("#canvasControls button").on("click", function(){
 });
 
 $("#mapLayerMenu").find("button").on("click", function () {
-    App.minimap.reDraw($(this).attr("value"));
+    var val = $(this).attr("value");
+
+    $("#mapLayerMenu").find("button").removeClass("active");
+    $(".btn-"+val).addClass("active");
+    App.userSettings.layerMode = val;
+    localStorage.setItem("settings-map-mode", val);
+    App.minimap.changeLayer();
 });
 
 

diff --git a/src/js/maps.js b/src/js/maps.js
@@ -247,6 +247,7 @@ export function loadMapSelector() {
 
 export function loadMinimap(){
     var tileSize = 256;
-    App.minimap = new squadMinimap("map", tileSize);
-    App.minimap.draw(true);
+    var defaultMap = MAPS[11]; // Kohat
+    App.minimap = new squadMinimap("map", tileSize, defaultMap);
+    App.minimap.draw();
 }
diff --git a/src/js/squadFiringSolution.js b/src/js/squadFiringSolution.js
@@ -1,5 +1,5 @@
 import { App } from "./conf";
-import L from "leaflet";
+import { LatLng } from "leaflet";
 
 
 
@@ -41,8 +41,8 @@ export default class SquadFiringSolution {
      * @return {number} - distance in meter
      */
     getDist(){
-        const scaledWeaponLatLng = L.latLng([this.weaponLatLng.lng * this.map.mapToGameScale, this.weaponLatLng.lat * -this.map.mapToGameScale]);
-        const scaledTargetLatLng = L.latLng([this.targetLatLng.lng * this.map.mapToGameScale, this.targetLatLng.lat * -this.map.mapToGameScale]);
+        const scaledWeaponLatLng = new LatLng(this.weaponLatLng.lng * this.map.mapToGameScale, this.weaponLatLng.lat * -this.map.mapToGameScale);
+        const scaledTargetLatLng = new LatLng(this.targetLatLng.lng * this.map.mapToGameScale, this.targetLatLng.lat * -this.map.mapToGameScale);
         return Math.hypot(scaledWeaponLatLng.lat - scaledTargetLatLng.lat, scaledWeaponLatLng.lng - scaledTargetLatLng.lng);
     }
 
@@ -77,8 +77,8 @@ export default class SquadFiringSolution {
      * @returns {number} - bearing required to see B from A
      */
     getBearing() {
-        const scaledWeaponLatLng = L.latLng([this.weaponLatLng.lng * this.map.mapToGameScale, this.weaponLatLng.lat * -this.map.mapToGameScale]);
-        const scaledTargetLatLng = L.latLng([this.targetLatLng.lng * this.map.mapToGameScale, this.targetLatLng.lat * -this.map.mapToGameScale]);
+        const scaledWeaponLatLng = new LatLng(this.weaponLatLng.lng * this.map.mapToGameScale, this.weaponLatLng.lat * -this.map.mapToGameScale);
+        const scaledTargetLatLng = new LatLng(this.targetLatLng.lng * this.map.mapToGameScale, this.targetLatLng.lat * -this.map.mapToGameScale);
         var bearing = Math.atan2(scaledTargetLatLng.lng - scaledWeaponLatLng.lng, scaledTargetLatLng.lat - scaledWeaponLatLng.lat) * 180 / Math.PI + 90;
         if (bearing < 0) { bearing += 360; } // Avoid Negative Angle by adding a whole rotation
         return bearing;

diff --git a/src/js/squadHeightmaps.js b/src/js/squadHeightmaps.js
@@ -1,4 +1,4 @@
-import L from "leaflet";
+import { LatLng } from "leaflet";
 import { shoot } from "./utils";
 
 export default class SquadHeightmap {
@@ -46,8 +46,8 @@ export default class SquadHeightmap {
      */
     getHeightPath(mortarLatlng, targetLatlng, STEP = 100) {
         var heightPath = [];
-        var start = new L.latLng(mortarLatlng.lat, mortarLatlng.lng);
-        var end = new L.latLng(targetLatlng.lat, targetLatlng.lng);
+        var start = new LatLng(mortarLatlng.lat, mortarLatlng.lng);
+        var end = new LatLng(targetLatlng.lat, targetLatlng.lng);
         var latDiff =  end.lat - start.lat;
         var lngDiff =  end.lng - start.lng;
 

diff --git a/src/js/squadIcon.js b/src/js/squadIcon.js
@@ -1,4 +1,4 @@
-import L from "leaflet";
+import { Icon } from "leaflet";
 
 import shadowIconImg from "../img/icons/marker_shadow.webp";
 import mortarIconImg from "../img/icons/marker_mortar_0.webp";
@@ -7,7 +7,7 @@ import mortarIconImg2 from "../img/icons/marker_mortar_2.webp";
 import targetIconImg1 from "../img/icons/marker_target1.webp";
 
 
-export var mortarIcon = L.icon({
+export var mortarIcon = new Icon({
     iconUrl: mortarIconImg,
     shadowUrl: shadowIconImg,
     iconSize:     [38, 47], 
@@ -17,7 +17,7 @@ export var mortarIcon = L.icon({
     className: "animatedWeaponMarker"
 });
 
-export var mortarIcon1 = L.icon({
+export var mortarIcon1 = new Icon({
     iconUrl: mortarIconImg1,
     shadowUrl: shadowIconImg,
     iconSize:     [38, 47], 
@@ -27,7 +27,7 @@ export var mortarIcon1 = L.icon({
     className: "animatedWeaponMarker"
 });
 
-export var mortarIcon2 = L.icon({
+export var mortarIcon2 = new Icon({
     iconUrl: mortarIconImg2,
     shadowUrl: shadowIconImg,
     iconSize:     [38, 47], 
@@ -38,7 +38,7 @@ export var mortarIcon2 = L.icon({
 });
 
 
-export var targetIcon1 = L.icon({
+export var targetIcon1 = new Icon({
     iconUrl: targetIconImg1,
     shadowUrl: shadowIconImg,
     iconSize:     [28, 34], 
@@ -48,7 +48,7 @@ export var targetIcon1 = L.icon({
 });
 
 
-export var targetIconAnimated1 = L.icon({
+export var targetIconAnimated1 = new Icon({
     iconUrl: targetIconImg1,
     shadowUrl: shadowIconImg,
     iconSize:     [28, 34],