Fog of War

Author: Prince527GitHub

.github/workflows/build-dev.yml

@@ -0,0 +1,48 @@
+name: Build Development
+
+on:
+  push:
+    branches: [master]
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup bun
+        uses: oven-sh/setup-bun@v2
+
+      - name: Install bun dependencies
+        run: cd web && bun install
+
+      - name: Build frontend
+        run: cd web && bun run build
+
+      - name: Set up JDK 21
+        uses: actions/setup-java@v4
+        with:
+          java-version: 21
+          distribution: temurin
+
+      - name: Setup Gradle
+        uses: gradle/actions/setup-gradle@v4
+
+      - name: Build
+        run: ./gradlew shadowJar
+
+      - name: Extract repository name
+        run: echo "NAME=$(basename ${{ github.repository }})" >> $GITHUB_ENV
+
+      - name: Upload Build
+        uses: marvinpinto/action-automatic-releases@master
+        with:
+          title: "${{ env.NAME }}"
+          automatic_release_tag: "latest"
+          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          files: "build/libs/*.jar"
+          prerelease: false

web/src/js/FogOfWar.js

@@ -0,0 +1,75 @@
+import L from "leaflet";
+import { S } from "./Squaremap.js";
+
+export const FogOfWar = L.Layer.extend({
+    onAdd: function (map) {
+        this._map = map;
+        this._canvas = L.DomUtil.create("canvas", "leaflet-fog-of-war");
+        this._canvas.style.position = "absolute";
+        this._canvas.style.top = "0";
+        this._canvas.style.left = "0";
+        this._canvas.style.pointerEvents = "none";
+        this._canvas.style.zIndex = "400";
+
+        const pane = map.getPane("overlayPane");
+        pane.appendChild(this._canvas);
+
+        this._ctx = this._canvas.getContext("2d");
+
+        map.on("moveend resize zoomend", this._update, this);
+        map.on("viewreset", this._update, this);
+
+        this._update();
+    },
+
+    onRemove: function (map) {
+        L.DomUtil.remove(this._canvas);
+        map.off("moveend resize zoomend viewreset", this._update, this);
+    },
+
+    _update: function () {
+        if (!this._map || !S.playerList) return;
+
+        const size = this._map.getSize();
+        this._canvas.width = size.x;
+        this._canvas.height = size.y;
+        this._canvas.style.width = size.x + "px";
+        this._canvas.style.height = size.y + "px";
+
+        this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+
+        // Fill entire canvas with dark overlay
+        this._ctx.fillStyle = "rgba(0, 0, 0, 0.85)";
+        this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
+
+        // Clear circles around each player (flashlight effect)
+        this._ctx.globalCompositeOperation = "destination-out";
+
+        const radius = 80; // pixels - adjust for flashlight size
+
+        if (S.playerList.markers) {
+            S.playerList.markers.forEach((marker, uuid) => {
+                const player = S.playerList.players.get(uuid);
+                if (!player) return;
+
+                const pos = this._map.latLngToContainerPoint(marker.getLatLng());
+
+                // Create radial gradient for soft edge
+                const gradient = this._ctx.createRadialGradient(pos.x, pos.y, radius * 0.3, pos.x, pos.y, radius);
+                gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
+                gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
+
+                this._ctx.fillStyle = gradient;
+                this._ctx.beginPath();
+                this._ctx.arc(pos.x, pos.y, radius, 0, Math.PI * 2);
+                this._ctx.fill();
+            });
+        }
+
+        this._ctx.globalCompositeOperation = "source-over";
+    },
+});
+
+export function fogOfWar() {
+    return new FogOfWar();
+}

web/src/js/Squaremap.js

@@ -4,6 +4,7 @@ import { WorldList } from "./WorldList.js";
 import { UICoordinates } from "./UICoordinates.js";
 import { UILink } from "./UILink.js";
 import { LayerControl } from "./LayerControl.js";
+import { FogOfWar } from "./FogOfWar.js";
 import L from "leaflet";
 import "./addons/Ellipse.js";
 import "./addons/RotateMarker.js";
@@ -33,6 +34,8 @@ class SquaremapMap {
     tick_count;
     /** @type {boolean} */
     showControls;
+    /** @type {FogOfWar} */
+    fogOfWar;
 
     constructor() {
         this.map = L.map("map", {
@@ -58,6 +61,8 @@ class SquaremapMap {
         this.tick_count = 1;
 
         this.layerControl = new LayerControl();
+        this.fogOfWar = new FogOfWar();
+        this.fogOfWar.addTo(this.map);
 
         this.init();
     }
@@ -73,6 +78,10 @@ class SquaremapMap {
         this.playerList.tick();
         // tick world
         this.worldList.curWorld.tick();
+        // update fog of war
+        if (this.fogOfWar) {
+            this.fogOfWar._update();
+        }
     }
     init() {
         this.getJSON(