Merge pull request #1402 from solaris-games/dev

Update 251.1

Author: SpacialCircumstances

client/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.5",
-    "axios": "^1.7.4",
+    "axios": "^1.8.3",
     "bootstrap": "^5.1.3",
     "chart.js": "^4.4.3",
     "jquery": "^3.6.0",

client/src/game/carrier.ts

@@ -1,18 +1,17 @@
 import { Container, Sprite, Graphics, BitmapText, Circle, TextStyle, Text } from 'pixi.js'
 import TextureService from './texture'
 import Helpers from './helpers'
-import {EventEmitter} from "./eventEmitter.js";
 import type PathManager from "./PathManager";
-import type {UserGameSettings} from "@solaris-common";
+import type {UserGameSettings, Location} from "@solaris-common";
 import type {Carrier as CarrierData, Player as PlayerData} from "../types/game";
 import type Star from "./star";
 import type {DrawingContext} from "./container";
+import { MapObject } from './mapObject';
 
-export class Carrier extends EventEmitter {
+export class Carrier extends MapObject {
   static zoomLevel = 140
 
   container: Container;
-  fixedContainer: Container;
   graphics_colour: Sprite | null;
   graphics_selected: Graphics;
   graphics_ship: Sprite;
@@ -39,7 +38,6 @@ export class Carrier extends EventEmitter {
   constructor ( pathManager: PathManager ) {
     super()
 
-    this.fixedContainer = new Container() // this container isnt affected by culling or user setting scalling
     this.container = new Container()
     this.container.zIndex = 1
     this.container.eventMode = 'static'
@@ -66,6 +64,14 @@ export class Carrier extends EventEmitter {
     this.zoomPercent = 100
   }
 
+    getContainer(): Container {
+      return this.container!;
+    }
+
+    getLocation(): Location {
+      return this.data!.location!;
+    }
+
   setup (data, userSettings, context: DrawingContext, stars, player, lightYearDistance) {
     this.data = data
     this.stars = stars
@@ -400,7 +406,6 @@ export class Carrier extends EventEmitter {
 
   destroy () {
     this.container.destroy()
-    this.fixedContainer.destroy()
   }
 
   select () {

client/src/game/chunks.ts

@@ -0,0 +1,157 @@
+import { Container, Graphics } from 'pixi.js';
+import type { Game } from '../types/game';
+import gameHelper from '../services/gameHelper'
+import type Star from './star';
+import type Carrier from './carrier';
+import type { MapObject } from './mapObject';
+
+const CHUNK_SIZE = 256
+
+class Chunk extends Container {
+  mapObjects: MapObject[] = [];
+  visualizer: Graphics | undefined = undefined;
+
+  constructor() {
+    super();
+
+    this.sortableChildren = true;
+  }
+}
+
+export class Chunks {
+  chunks: Chunk[][] = [];
+  numof_chunkX: number = 0;
+  numof_chunkY: number = 0;
+  firstChunkX: number = 0;
+  firstChunkY: number = 0;
+  lastChunkX: number = 0;
+  lastChunkY: number = 0;
+  minMouseChunkX: number = 0;
+  maxMouseChunkX: number = 0;
+  minMouseChunkY: number = 0;
+  maxMouseChunkY: number = 0;
+  chunksContainer: Container;
+
+  constructor() {
+    this.chunksContainer = new Container()
+    this.chunksContainer.zIndex = 7;
+  }
+
+  setup(game: Game, stars: Star[], carriers: Carrier[]) {
+    this.chunksContainer.removeChildren();
+
+    const carrierMinX = gameHelper.calculateMinCarrierX(game)
+    const carrierMinY = gameHelper.calculateMinCarrierY(game)
+    const carrierMaxX = gameHelper.calculateMaxCarrierX(game)
+    const carrierMaxY = gameHelper.calculateMaxCarrierY(game)
+
+    const starMinX = gameHelper.calculateMinStarX(game)
+    const starMinY = gameHelper.calculateMinStarY(game)
+    const starMaxX = gameHelper.calculateMaxStarX(game)
+    const starMaxY = gameHelper.calculateMaxStarY(game)
+
+    const minX = Math.min(carrierMinX, starMinX)
+    const minY = Math.min(carrierMinY, starMinY)
+    const maxX = Math.max(carrierMaxX, starMaxX)
+    const maxY = Math.max(carrierMaxY, starMaxY)
+
+    this.firstChunkX = Math.floor(minX / CHUNK_SIZE)
+    this.firstChunkY = Math.floor(minY / CHUNK_SIZE)
+
+    this.lastChunkX = Math.floor(maxX / CHUNK_SIZE)
+    this.lastChunkY = Math.floor(maxY / CHUNK_SIZE)
+
+    this.numof_chunkX = this.lastChunkX - this.firstChunkX + 1
+    this.numof_chunkY = this.lastChunkY - this.firstChunkY + 1
+
+    let chunkColumns = Array(this.numof_chunkX)
+    for (let i = 0; i < this.numof_chunkX; i++) { chunkColumns[i] = Array(this.numof_chunkY) }
+
+    this.chunks = chunkColumns
+
+    for (let ix = 0; ix < this.numof_chunkX; ix++) {
+      for (let iy = 0; iy < this.numof_chunkY; iy++) {
+        this.chunks[ix][iy] = new Chunk();
+        this.chunksContainer!.addChild(this.chunks[ix][iy])
+      }
+    }
+
+    stars.forEach(s => this.addContainerToChunk(s, this.firstChunkX, this.firstChunkY))
+    carriers.forEach(c => this.addContainerToChunk(c, this.firstChunkX, this.firstChunkY))
+  }
+
+  onTick (positionChanging: boolean, zoomChanging: boolean, zoomPercent: number, viewport: { left: number, right: number, bottom: number, top: number }) {
+    const firstX = Math.floor(viewport.left/CHUNK_SIZE)
+    const firstY = Math.floor(viewport.top/CHUNK_SIZE)
+
+    const lastX = Math.floor(viewport.right/CHUNK_SIZE)
+    const lastY = Math.floor(viewport.bottom/CHUNK_SIZE)
+
+    if (!positionChanging && !zoomChanging) {
+      return;
+    }
+
+    for(let ix=0; ix<this.numof_chunkX; ix++) {
+      for(let iy=0; iy<this.numof_chunkY; iy++) {
+        if(
+        (ix>=(firstX-this.firstChunkX))&&(ix<=(lastX-this.firstChunkX)) &&
+        (iy>=(firstY-this.firstChunkY))&&(iy<=(lastY-this.firstChunkY))
+        )
+        {
+          if( !this.chunks[ix][iy].visible ) {
+            this.chunks[ix][iy].visible = true
+            this.chunks[ix][iy].interactiveChildren = true
+            //this.chunks[ix][iy].visualizer.visible = true
+            for( let mapObject of this.chunks[ix][iy].mapObjects ) {
+              mapObject.onZoomChanging(zoomPercent)
+            }
+          }
+          else {
+            if( zoomChanging ) {
+              for( let mapObject of this.chunks[ix][iy].mapObjects ) {
+                mapObject.onZoomChanging(zoomPercent)
+              }
+            }
+          }
+        }
+        else {
+          this.chunks[ix][iy].visible = false
+          this.chunks[ix][iy].interactiveChildren = false
+          //this.chunks[ix][iy].visualizer.visible = false
+        }
+      }
+    }
+  }
+
+  addContainerToChunk(mapObject: MapObject, firstX: number, firstY: number) { // Star or carrier
+    const chunkX = Math.floor(mapObject.getLocation().x / CHUNK_SIZE)
+    const chunkY = Math.floor(mapObject.getLocation().y / CHUNK_SIZE)
+    const ix = chunkX - firstX
+    const iy = chunkY - firstY
+
+    this.chunks[ix][iy].addChild(mapObject.getContainer())
+    this.chunks[ix][iy].mapObjects.push(mapObject)
+  }
+
+  removeContainerFromChunk(mapObject: MapObject, chunks: Chunk[][], firstX: number, firstY: number) {
+    const chunkX = Math.floor(mapObject.getLocation().x / CHUNK_SIZE)
+    const chunkY = Math.floor(mapObject.getLocation().y / CHUNK_SIZE)
+    const ix = chunkX - firstX
+    const iy = chunkY - firstY
+
+    chunks[ix][iy].removeChild(mapObject.getContainer())
+    const index = chunks[ix][iy].mapObjects.indexOf(mapObject)
+    if (index > -1) { chunks[ix][iy].mapObjects.splice(index, 1) }
+  }
+
+  removeMapObjectFromChunks(mapObject: MapObject) {
+    for (let chunkX of this.chunks) {
+      for (let chunkY of chunkX) {
+        if (chunkY.mapObjects.indexOf(mapObject) > -1) {
+          chunkY.mapObjects.splice(chunkY.mapObjects.indexOf(mapObject), 1)
+          chunkY.removeChild(mapObject.getContainer())
+        }
+      }
+    }
+  }
+}