diff --git a/src/app.ts b/src/app.ts index 123085bc..07ff1b7b 100644 --- a/src/app.ts +++ b/src/app.ts @@ -30,6 +30,11 @@ const params = window.location.search.slice(1).split('&') G.renderOnly = params.includes('renderOnly') +if (params.includes('lightTheme')) { + G.UIColors.primary = 0xAAAAAA + G.UIColors.secondary = 0xCCCCCC +} + const keybinds = { rotate: 'r', pippete: 'q', diff --git a/src/containers/blueprint.ts b/src/containers/blueprint.ts index 7153c5b3..b5387811 100644 --- a/src/containers/blueprint.ts +++ b/src/containers/blueprint.ts @@ -48,9 +48,9 @@ export class BlueprintContainer extends PIXI.Container { for (let i = 0, l = G.sizeBPContainer.width; i < l; i += G.cellSize) { for (let j = 0, l2 = G.sizeBPContainer.height; j < l2; j += G.cellSize) { if ((i + j) / G.cellSize % 2) { - ggrid.beginFill(0x303030) + ggrid.beginFill(G.UIColors.primary) } else { - ggrid.beginFill(0x181818) + ggrid.beginFill(G.UIColors.secondary) } ggrid.drawRect(i, j, G.cellSize, G.cellSize) ggrid.endFill() diff --git a/src/containers/editEntity.ts b/src/containers/editEntity.ts index eca01ee5..30c1c76f 100644 --- a/src/containers/editEntity.ts +++ b/src/containers/editEntity.ts @@ -87,7 +87,7 @@ export class EditEntityContainer extends PIXI.Container { this.iWidth / 2, this.iHeight / 2 - 18 ) - recipeText.style.fill = 0xFFFFFF + recipeText.style.fill = G.UIColors.text this.content.addChild(recipeText) } @@ -149,7 +149,7 @@ export class EditEntityContainer extends PIXI.Container { this.iWidth / 2, this.iHeight / 2 + 18 ) - recipeText.style.fill = 0xFFFFFF + recipeText.style.fill = G.UIColors.text this.content.addChild(recipeText) } diff --git a/src/containers/info.ts b/src/containers/info.ts index 6e352744..655d3832 100644 --- a/src/containers/info.ts +++ b/src/containers/info.ts @@ -3,7 +3,7 @@ import G from '../globals' export class InfoContainer extends PIXI.Container { iWidth = 32 * 18 - iHeight = 32 * 27 + iHeight = 32 * 28 constructor() { super() @@ -26,7 +26,7 @@ export class InfoContainer extends PIXI.Container { text.position.set(this.iWidth / 2, 4) text.style.fontSize = 24 text.style.fontWeight = 'bold' - text.style.fill = 0xFFFFFF + text.style.fill = G.UIColors.text text.anchor.set(0.5, 0) this.addChild(text) @@ -100,6 +100,7 @@ export class InfoContainer extends PIXI.Container { 'You can also add ?source= to the url', ' to make sharing easier.', 'Adding renderOnly as an url query parameter will only render the bp.', + 'You can also add lightTheme as an url query parameter.', 'I don\'t show network or parsing errors in the app yet, you can open the console', ' (F12) to check if something is wrong.', 'Entities with placeable-off-grid flag will not be added to the positionGrid', @@ -108,13 +109,13 @@ export class InfoContainer extends PIXI.Container { this.writeColumn([ 'Please leave your suggestions, ideas, new features or bug reports here:' - ], { x: this.iWidth / 2, y: 710 }, 0.5, true) + ], { x: this.iWidth / 2, y: 730 }, 0.5, true) const link = new PIXI.Text('Reddit Post') link.interactive = true link.buttonMode = true link.on('click', () => window.open('https://redd.it/87zysk', '_blank')) - link.position.set(this.iWidth / 2, 730) + link.position.set(this.iWidth / 2, 750) link.style.fontSize = 16 link.style.fill = 0x079DD8 link.anchor.set(0.5, 0) @@ -124,7 +125,7 @@ export class InfoContainer extends PIXI.Container { link2.interactive = true link2.buttonMode = true link2.on('click', () => window.open('https://github.com/Teoxoy/factorio-blueprint-editor', '_blank')) - link2.position.set(this.iWidth / 2, 750) + link2.position.set(this.iWidth / 2, 770) link2.style.fontSize = 16 link2.style.fill = 0x0AA0DB link2.anchor.set(0.5, 0) @@ -134,7 +135,7 @@ export class InfoContainer extends PIXI.Container { 'Copyright © 2018 Tanasoaia Teodor Andrei', 'All art assets, spritesheets and other Factorio game data used in this project', 'belong to Wube Software Ltd and are not for redistribution.' - ], { x: this.iWidth / 2, y: 790 }, 0.5, true, 14) + ], { x: this.iWidth / 2, y: 810 }, 0.5, true, 14) } writeColumn(data: string[], offset: IPoint, anchorX = 0, bold = false, fontSize = 16) { @@ -144,7 +145,7 @@ export class InfoContainer extends PIXI.Container { text.position.set(offset.x, nextY++ * 20 + offset.y) text.style.fontSize = fontSize if (bold) text.style.fontWeight = 'bold' - text.style.fill = 0xFFFFFF + text.style.fill = G.UIColors.text text.anchor.set(anchorX, 0) this.addChild(text) } diff --git a/src/containers/inventory.ts b/src/containers/inventory.ts index 7b767471..2f2e6111 100644 --- a/src/containers/inventory.ts +++ b/src/containers/inventory.ts @@ -65,7 +65,7 @@ export class InventoryContainer extends PIXI.Container { this.addChild(this.inventoryContents) this.itemTooltip = new PIXI.Text('') - this.itemTooltip.style.fill = 0xFFFFFF + this.itemTooltip.style.fill = G.UIColors.text this.itemTooltip.y = 352 this.addChild(this.itemTooltip) @@ -221,7 +221,7 @@ export class InventoryContainer extends PIXI.Container { const text = new PIXI.Text(`=${time}s>`) text.style.fontSize = 13 text.style.fontWeight = 'bold' - text.style.fill = 0xFFFFFF + text.style.fill = G.UIColors.text text.anchor.set(0.5, 0.5) text.x = nextX++ * 36 this.recipeVisualization.addChild(text) @@ -237,7 +237,7 @@ export class InventoryContainer extends PIXI.Container { const text = new PIXI.Text(amount) text.style.fontSize = 13 text.style.fontWeight = 'bold' - text.style.fill = 0xFFFFFF + text.style.fill = G.UIColors.text text.anchor.set(1, 1) text.position.set(nextX * 36 + 16, 16) return text diff --git a/src/containers/toolbar.ts b/src/containers/toolbar.ts index 9fe93a12..757927bd 100644 --- a/src/containers/toolbar.ts +++ b/src/containers/toolbar.ts @@ -22,30 +22,30 @@ export class ToolbarContainer extends PIXI.Container { this.info.position.set(G.app.renderer.width - 100, background.height) }, false) background.height = 32 - background.tint = 0x303030 + background.tint = G.UIColors.primary this.addChild(background) this.gridposGUIText = new PIXI.Text('') this.gridposGUIText.anchor.set(0, 0.5) this.gridposGUIText.position.set(0, background.height / 2) - this.gridposGUIText.style.fill = 0xFFFFFF + this.gridposGUIText.style.fill = G.UIColors.text this.addChild(this.gridposGUIText) this.fpsGUIText = new PIXI.Text('') this.fpsGUIText.anchor.set(1, 0.5) - this.fpsGUIText.style.fill = 0xFFFFFF + this.fpsGUIText.style.fill = G.UIColors.text this.fpsGUIText.position.set(G.app.renderer.width, background.height / 2) this.addChild(this.fpsGUIText) this.logo = new PIXI.Text('Factorio Blueprint Editor') this.logo.anchor.set(0.5, 0.5) - this.logo.style.fill = 0xFFFFFF + this.logo.style.fill = G.UIColors.text this.logo.position.set(G.app.renderer.width / 2, background.height / 2) this.addChild(this.logo) this.info = new PIXI.Text('Press I for info') this.info.anchor.set(1, 1) - this.info.style.fill = 0xFFFFFF + this.info.style.fill = G.UIColors.text this.info.style.fontSize = 13 this.info.position.set(G.app.renderer.width - 100, background.height) this.addChild(this.info) diff --git a/src/globals.ts b/src/globals.ts index 21e196b9..caee1e98 100644 --- a/src/globals.ts +++ b/src/globals.ts @@ -62,6 +62,12 @@ const copyData = { let renderOnly = false +let UIColors = { + primary: 0x303030, + secondary: 0x181818, + text: 0xFFFFFF +} + export default { renderOnly, copyData, @@ -81,5 +87,6 @@ export default { gridCoords16, bp, mouseStates, - currentMouseState + currentMouseState, + UIColors }