Merge pull request #1143 from solaris-games/feature/colour-overrides

Colour overrides and names

client/src/game/background.js

@@ -26,8 +26,9 @@ class Background {
     this.time = 0
   }
 
-  setup (game, userSettings) {
+  setup (game, userSettings, context) {
     this.game = game
+    this.context = context
     this.userSettings = userSettings
     this.rng = rng.create(game._id)
     // TODO: This should use the constant?
@@ -124,7 +125,7 @@ class Background {
           let sprite
           let nebulaTextureCount
           let textures
-          
+
           nebulaTextureCount = TextureService.STARLESS_NEBULA_TEXTURES.length
           textures = TextureService.STARLESS_NEBULA_TEXTURES
 

client/src/game/carrier.js

@@ -38,11 +38,12 @@ class Carrier extends EventEmitter {
     this.zoomPercent = 100
   }
 
-  setup (data, userSettings, stars, player, lightYearDistance) {
+  setup (data, userSettings, context, stars, player, lightYearDistance) {
     this.data = data
     this.stars = stars
     this.player = player
-    this.colour = player.colour.value
+    this.context = context
+    this.colour = context.getPlayerColour(player._id)
     this.lightYearDistance = lightYearDistance
 
     this.container.position.x = data.location.x

client/src/game/container.js

@@ -4,6 +4,16 @@ import Map from './map'
 import gameHelper from '../services/gameHelper'
 import textureService from './texture'
 
+class DrawingContext {
+  constructor (store) {
+    this.store = store;
+  }
+
+  getPlayerColour (playerId) {
+    return this.store.getters.getColourForPlayer(playerId).value
+  }
+}
+
 class GameContainer {
 
 
@@ -69,6 +79,8 @@ class GameContainer {
   setupApp (store, userSettings) {
     this.store = store
 
+    this.context = new DrawingContext(store)
+
     // Cleanup if the app already exists.
     this.destroy()
 
@@ -112,7 +124,7 @@ class GameContainer {
     this.app.stage.addChild(this.viewport)
 
     // Add a new map to the viewport
-    this.map = new Map(this.app, this.store, this)
+    this.map = new Map(this.app, this.store, this, this.context)
     this.viewport.addChild(this.map.container)
   }
 
@@ -173,11 +185,11 @@ class GameContainer {
     this.viewport.on('pointerdown', this.map.onViewportPointerDown.bind(this.map))
   }
 
-  setup (game, userSettings) {
+  setup (game, userSettings, context) {
     this.userSettings = userSettings
     textureService.initialize()
 
-    this.map.setup(this.game, userSettings)
+    this.map.setup(this.game, userSettings, context)
   }
 
   draw () {

client/src/game/map.js

@@ -21,11 +21,12 @@ class Map extends EventEmitter {
   // waypoints - Displays waypoints overlay for a given carrier
   mode = 'galaxy'
 
-  constructor (app, store, gameContainer) {
+  constructor (app, store, gameContainer, context) {
     super()
 
     this.app = app
     this.store = store
+    this.context = context
     this.gameContainer = gameContainer;
     this.container = new PIXI.Container()
     this.container.sortableChildren = true
@@ -107,7 +108,7 @@ class Map extends EventEmitter {
     }
 
     this.waypoints = new Waypoints()
-    this.waypoints.setup(game)
+    this.waypoints.setup(game, this.context)
     this.waypoints.onWaypointCreatedHandler = this.waypoints.on('onWaypointCreated', this.onWaypointCreated.bind(this))
     this.waypoints.onWaypointOutOfRangeHandler = this.waypoints.on('onWaypointOutOfRange', this.onWaypointOutOfRange.bind(this))
 
@@ -130,23 +131,23 @@ class Map extends EventEmitter {
     // -----------
     // Setup Territories
     this.territories = new Territories()
-    this.territories.setup(game, userSettings)
+    this.territories.setup(game, userSettings, this.context)
 
     this.territoryContainer.addChild(this.territories.container)
     this.territories.draw(userSettings)
 
     // -----------
     // Setup Player Names
     this.playerNames = new PlayerNames()
-    this.playerNames.setup(game, userSettings)
+    this.playerNames.setup(game, userSettings, this.context)
 
     this.playerNamesContainer.addChild(this.playerNames.container)
     this.playerNames.draw()
 
     // -----------
     // Setup Background
     this.background = new Background()
-    this.background.setup(game, userSettings)
+    this.background.setup(game, userSettings, this.context)
 
     this.backgroundContainer.addChild(this.background.container)
     this.backgroundContainer.addChild(this.background.starContainer)
@@ -173,7 +174,7 @@ class Map extends EventEmitter {
     this._setupChunks()
 
     this.tooltipLayer = new TooltipLayer()
-    this.tooltipLayer.setup(this.game)
+    this.tooltipLayer.setup(this.game, this.context)
     this.tooltipContainer.addChild(this.tooltipLayer.container)
   }
 
@@ -195,7 +196,7 @@ class Map extends EventEmitter {
       star.on('onUnselected', this.onStarUnselected.bind(this))
     }
 
-    star.setup(this.game, starData, userSettings, game.galaxy.players, game.galaxy.carriers, game.constants.distances.lightYear)
+    star.setup(this.game, starData, userSettings, this.context, game.galaxy.players, game.galaxy.carriers, game.constants.distances.lightYear)
 
     return star
   }
@@ -219,7 +220,7 @@ class Map extends EventEmitter {
 
     let player = gameHelper.getPlayerById(game, carrierData.ownedByPlayerId)
 
-    carrier.setup(carrierData, userSettings, this.stars, player, game.constants.distances.lightYear)
+    carrier.setup(carrierData, userSettings, this.context, this.stars, player, game.constants.distances.lightYear)
 
     return carrier
   }
@@ -394,7 +395,7 @@ class Map extends EventEmitter {
       let existing = this.stars.find(x => x.data._id === starData._id)
 
       if (existing) {
-        existing.setup(this.game, starData, userSettings, game.galaxy.players, game.galaxy.carriers, game.constants.distances.lightYear)
+        existing.setup(this.game, starData, userSettings, this.context, game.galaxy.players, game.galaxy.carriers, game.constants.distances.lightYear)
       } else {
         existing = this.setupStar(game, userSettings, starData)
       }
@@ -411,7 +412,7 @@ class Map extends EventEmitter {
       if (existing) {
         let player = gameHelper.getPlayerById(game, carrierData.ownedByPlayerId)
 
-        existing.setup(carrierData, userSettings, this.stars, player, game.constants.distances.lightYear)
+        existing.setup(carrierData, userSettings, this.context, this.stars, player, game.constants.distances.lightYear)
       } else {
         existing = this.setupCarrier(game, userSettings, carrierData)
       }
@@ -423,11 +424,11 @@ class Map extends EventEmitter {
     this.drawWormHoles()
     this.drawPlayerNames()
 
-    this.background.setup(game, userSettings)
+    this.background.setup(game, userSettings, this.context)
     this.background.draw(game, userSettings)
 
-    this.waypoints.setup(game)
-    this.tooltipLayer.setup(game)
+    this.waypoints.setup(game, this.context)
+    this.tooltipLayer.setup(game, this.context)
 
     this._setupChunks()
   }
@@ -567,7 +568,7 @@ class Map extends EventEmitter {
   }
 
   drawTerritories (userSettings) {
-    this.territories.setup(this.game, userSettings)
+    this.territories.setup(this.game, userSettings, this.context)
     this.territories.draw(userSettings)
   }
 
@@ -579,7 +580,7 @@ class Map extends EventEmitter {
   }
 
   drawPlayerNames () {
-    this.playerNames.setup(this.game, this.userSettings)
+    this.playerNames.setup(this.game, this.userSettings, this.context)
     this.playerNames.draw(this.userSettings)
   }
 

client/src/game/playerNames.js

@@ -11,17 +11,18 @@ class PlayerNames {
     this.zoomPercent = 0
   }
 
-  setup (game, userSettings) {
+  setup (game, userSettings, context) {
     this.game = game
 
     PlayerNames.zoomLevel = userSettings.map.zoomLevels.playerNames
+    this.context = context
   }
 
   draw () {
     this.container.removeChildren()
-    
+
     for (let player of this.game.galaxy.players) {
-      let empireCenter = gameHelper.getPlayerEmpireCenter(this.game, player)
+      const empireCenter = gameHelper.getPlayerEmpireCenter(this.game, player)
 
       if (empireCenter == null) {
         continue
@@ -41,7 +42,7 @@ class PlayerNames {
       text_name.zIndex = 10
 
       let graphics = new PIXI.Graphics()
-      graphics.beginFill(player.colour.value)
+      graphics.beginFill(this.context.getPlayerColour(player._id))
       graphics.drawRoundedRect(-10, -10, text_name.width + 20, text_name.height + 20, 10)
       graphics.endFill()
       graphics.alpha = 0.7

client/src/game/star.js

@@ -106,11 +106,12 @@ class Star extends EventEmitter {
     return this._getStarCarriers().reduce((sum, c) => sum + (c.ships || 0), 0)
   }
 
-  setup (game, data, userSettings, players, carriers, lightYearDistance) {
+  setup (game, data, userSettings, context, players, carriers, lightYearDistance) {
     this.game = game
     this.data = data
     this.players = players
     this.carriers = carriers
+    this.context = context
     this.lightYearDistance = lightYearDistance
     this.container.position.x = this.data.location.x
     this.container.position.y = this.data.location.y
@@ -212,7 +213,7 @@ class Star extends EventEmitter {
     Star.seededRNG.seed(seed)
 
     let player = this._getStarPlayer()
-    let playerColour = player ? player.colour.value : 0xFFFFFF
+    let playerColour = player ? this.context.getPlayerColour(player._id) : 0xFFFFFF
 
     this.pulsarGraphics = new PIXI.Graphics()
     this.pulsarGraphics.zIndex = -1
@@ -248,7 +249,7 @@ class Star extends EventEmitter {
     this.nebulaSprite.rotation = Star.seededRNG.random()*Math.PI*2.0
 
     let player = this._getStarPlayer()
-    let playerColour = player ? player.colour.value : 0xFFFFFF
+    let playerColour = player ? this.context.getPlayerColour(player._id): 0xFFFFFF
     this.nebulaSprite.tint = playerColour
     //this.nebulaSprite.blendMode = PIXI.BLEND_MODES.ADD // for extra punch
 
@@ -283,7 +284,7 @@ class Star extends EventEmitter {
     this.wormHoleSprite.alpha = 0.35
 
     let player = this._getStarPlayer()
-    let playerColour = player ? player.colour.value : 0xFFFFFF
+    let playerColour = player ? this.context.getPlayerColour(player._id) : 0xFFFFFF
     this.wormHoleSprite.tint = playerColour
     //this.asteroidFieldSprite.blendMode = PIXI.BLEND_MODES.ADD // for extra punch
 
@@ -310,7 +311,7 @@ class Star extends EventEmitter {
     this.asteroidFieldSprite.rotation = Star.seededRNG.random()*Math.PI*2.0
 
     let player = this._getStarPlayer()
-    let playerColour = player ? player.colour.value : 0xFFFFFF
+    let playerColour = player ? this.context.getPlayerColour(player._id) : 0xFFFFFF
     this.asteroidFieldSprite.tint = playerColour
     //this.asteroidFieldSprite.blendMode = PIXI.BLEND_MODES.ADD // for extra punch
 
@@ -390,7 +391,7 @@ class Star extends EventEmitter {
       }
 
       let player = this._getStarPlayer()
-      let playerColour = player ? player.colour.value : 0xFFFFFF
+      let playerColour = player ? this.context.getPlayerColour(player._id) : 0xFFFFFF
 
       let rotationDirection = this._getPlanetOrbitDirection()
       let rotationSpeedModifier = this._getPlanetOrbitSpeed()
@@ -525,8 +526,11 @@ class Star extends EventEmitter {
       this.graphics_shape_part = new PIXI.Sprite(TextureService.PLAYER_SYMBOLS[player.shape][2+this.data.warpGate])
       this.graphics_shape_full = new PIXI.Sprite(TextureService.PLAYER_SYMBOLS[player.shape][0+this.data.warpGate])
     }
-    this.graphics_shape_part.tint = player.colour.value
-    this.graphics_shape_full.tint = player.colour.value
+
+    const playerColour = this.context.getPlayerColour(player._id)
+
+    this.graphics_shape_part.tint = playerColour
+    this.graphics_shape_full.tint = playerColour
     this.graphics_shape_part.anchor.set(0.5)
     this.graphics_shape_full.anchor.set(0.5)
     this.graphics_shape_part.width = 28.0
@@ -536,7 +540,7 @@ class Star extends EventEmitter {
     this.container.addChild(this.graphics_shape_part)
     this.container.addChild(this.graphics_shape_full)
   }
-  
+
 
   _hasUnknownShips() {
       let carriersOrbiting = this._getStarCarriers()
@@ -690,7 +694,7 @@ class Star extends EventEmitter {
     let radius = ((this.data.effectiveTechs.scanning || 1) + 1) * this.lightYearDistance
 
     this.graphics_scanningRange.lineStyle(1, 0xFFFFFF, 0.2)
-    this.graphics_scanningRange.beginFill(player.colour.value, 0.075)
+    this.graphics_scanningRange.beginFill(this.context.getPlayerColour(player._id), 0.075)
     this.graphics_scanningRange.drawCircle(0, 0, radius)
     this.graphics_scanningRange.endFill()
     this.graphics_scanningRange.zIndex = -1
@@ -714,7 +718,7 @@ class Star extends EventEmitter {
     let radius = ((this.data.effectiveTechs.hyperspace || 1) + 1.5) * this.lightYearDistance
 
     this.graphics_hyperspaceRange.lineStyle(1, 0xFFFFFF, 0.2)
-    this.graphics_hyperspaceRange.beginFill(player.colour.value, 0.075)
+    this.graphics_hyperspaceRange.beginFill(this.context.getPlayerColour(player._id), 0.075)
     this.graphics_hyperspaceRange.drawStar(0, 0, radius, radius, radius - 3)
     this.graphics_hyperspaceRange.endFill()
     this.graphics_hyperspaceRange.zIndex = -1

client/src/game/territories.js

@@ -13,8 +13,9 @@ class Territories {
     this.zoomPercent = 0
   }
 
-  setup(game, userSettings) {
+  setup(game, userSettings, context) {
     this.game = game
+    this.context = context
 
     Territories.zoomLevel = userSettings.map.zoomLevels.territories
   }
@@ -169,7 +170,7 @@ class Territories {
     }
 
     for (let player of this.game.galaxy.players) {
-      let color = player.colour.value
+      let color = this.context.getPlayerColour(player._id)
       let territoryPolygons = new PIXI.Graphics()
       let territoryLines = new PIXI.Graphics()
       this.container.addChild(territoryPolygons)
@@ -304,7 +305,7 @@ class Territories {
       let colour = 0x000000
 
       if (star.ownedByPlayerId) {
-        colour = this.game.galaxy.players.find(p => p._id === star.ownedByPlayerId).colour.value
+        colour = this.context.getPlayerColour(star.ownedByPlayerId)
       }
 
       let points = []
@@ -358,7 +359,7 @@ class Territories {
       let colour = 0x000000
 
       if (border.lSite.playerID) {
-        colour = this.game.galaxy.players.find(p => p._id === border.lSite.playerID).colour.value
+        colour = this.context.getPlayerColour(border.lSite.playerID);
       }
 
       borderGraphics.lineStyle(borderWidth, colour)
@@ -368,7 +369,7 @@ class Territories {
       colour = 0x000000
 
       if (border.rSite.playerID) {
-        colour = this.game.galaxy.players.find(p => p._id === border.rSite.playerID).colour.value
+        colour = this.context.getPlayerColour(border.rSite.playerID)
       }
 
       borderGraphics.lineStyle(borderWidth, colour)