diff --git a/src/MainUI.ts b/src/MainUI.ts index 5137f27..dfe139b 100644 --- a/src/MainUI.ts +++ b/src/MainUI.ts @@ -47,7 +47,7 @@ module TK.SpaceTac { super({ width: 1920, height: 1080, - type: testmode ? Phaser.CANVAS : Phaser.WEBGL, // cannot really use HEADLESS because of bugs + type: testmode ? Phaser.CANVAS : Phaser.AUTO, // cannot really use HEADLESS because of bugs backgroundColor: '#000000', parent: '-space-tac', disableContextMenu: true, diff --git a/src/ui/BaseView.ts b/src/ui/BaseView.ts index 8748041..bcaf6bc 100644 --- a/src/ui/BaseView.ts +++ b/src/ui/BaseView.ts @@ -50,6 +50,9 @@ module TK.SpaceTac.UI { getMidHeight(): number { return 540; } + isTintSupported() { + return this.game.renderer.type == Phaser.WEBGL; + } init(data: object) { console.log(`Starting scene ${classname(this)}`); diff --git a/src/ui/battle/ArenaShip.ts b/src/ui/battle/ArenaShip.ts index f803316..f93f7e9 100644 --- a/src/ui/battle/ArenaShip.ts +++ b/src/ui/battle/ArenaShip.ts @@ -14,7 +14,7 @@ module TK.SpaceTac.UI { enemy: boolean // Ship sprite - sprite: UIImage + sprite: UIContainer // Stasis effect stasis: UIImage @@ -50,13 +50,20 @@ module TK.SpaceTac.UI { // Add frame indicating which side this ship is on this.frame_owner = builder.image(this.enemy ? "battle-hud-ship-enemy" : "battle-hud-ship-own", 0, 0, true); + this.frame_owner.setVisible(this.ship.alive && !this.battleview.isTintSupported()); this.frame_selected = builder.image(this.enemy ? "battle-hud-ship-enemy-selected" : "battle-hud-ship-own-selected", 0, 0, true); this.setSelected(false); this.frame_hover = builder.image("battle-hud-ship-hover", 0, 0, true); this.frame_hover.setVisible(false); // Add ship sprite - this.sprite = builder.image(`ship-${ship.model.code}-sprite`, 0, 0, true); + this.sprite = builder.container("sprite"); + if (this.battleview.isTintSupported()) { + const outline = this.sprite.getBuilder().image(`ship-${ship.model.code}-sprite`, 0, 0, true); + outline.setScale(1.1); + outline.setTintFill(this.enemy ? 0xc06858 : 0x65a898); + } + this.sprite.getBuilder().image(`ship-${ship.model.code}-sprite`, 0, 0, true); this.sprite.setRotation(ship.arena_angle); // Add stasis effect @@ -230,7 +237,7 @@ module TK.SpaceTac.UI { * This will alter the HUD frame to show this state */ async setSelected(selected: boolean, animate = true): Promise { - this.frame_owner.setVisible(this.ship.alive); + this.frame_owner.setVisible(this.ship.alive && !this.battleview.isTintSupported()); this.frame_selected.setVisible(this.ship.alive && selected); if (selected && animate) { diff --git a/src/ui/battle/BattleSplash.ts b/src/ui/battle/BattleSplash.ts index d67c4da..a1b2402 100644 --- a/src/ui/battle/BattleSplash.ts +++ b/src/ui/battle/BattleSplash.ts @@ -21,8 +21,8 @@ module TK.SpaceTac.UI { builder.in(player1, builder => { builder.image("battle-splash-moving-part", 0, 0, true); - let player1_name = builder.text(this.fleet1.name, -224, 0, { size: 22, bold: true, color: "#154d13" }); - player1_name.angle = -48; + let player1_name = builder.text(this.fleet1.name, -224, 0, { size: 22, bold: true, color: "#65a898", shadow: true }); + player1_name.angle = -49; this.fleet1.ships.forEach((ship, index) => { let ship_card = builder.image("battle-splash-ship-card", -86 + index * 96, -72, true); @@ -38,8 +38,8 @@ module TK.SpaceTac.UI { builder.in(player2, builder => { builder.image("battle-splash-moving-part", 0, 0, true); - let player2_name = builder.text(this.fleet2.name, -224, 0, { size: 22, bold: true, color: "#651713" }); - player2_name.angle = -228; + let player2_name = builder.text(this.fleet2.name, -224, 0, { size: 22, bold: true, color: "#c06858", shadow: true }); + player2_name.angle = -229; this.fleet2.ships.forEach((ship, index) => { let ship_card = builder.image("battle-splash-ship-card", -86 + index * 96, -72, true); diff --git a/src/ui/battle/TurnPlanDisplay.ts b/src/ui/battle/TurnPlanDisplay.ts index 4976cb7..a9c07c8 100644 --- a/src/ui/battle/TurnPlanDisplay.ts +++ b/src/ui/battle/TurnPlanDisplay.ts @@ -55,20 +55,20 @@ module TK.SpaceTac.UI { if (ship) { const move = first(plan.actions, action => action.category === ActionCategory.MOVE); - this.updateMoveAction(ship, move, parent); - const final_location = (move && move.target) ? move.target : ship.location; - const active = first(plan.actions, action => action.category === ActionCategory.ACTIVE); + + this.updateMoveAction(ship, move, active, parent); this.updateActiveAction(ship, final_location, active, parent); } else { console.error("Ship not found to update actions", plan); } } - private updateMoveAction(ship: Ship, plan: ActionPlan | null, parent: UIContainer) { + private updateMoveAction(ship: Ship, plan: ActionPlan | null, active: ActionPlan | null, parent: UIContainer) { + let builder = parent.getBuilder(); let child = parent.getByName("moveline"); - const graphics = child ? as(UIGraphics, child) : parent.getBuilder().graphics("moveline"); + const graphics = child ? as(UIGraphics, child) : builder.graphics("moveline"); graphics.clear(); if (plan && plan.target) { graphics.addLine({ @@ -80,12 +80,17 @@ module TK.SpaceTac.UI { } child = parent.getByName("moveghost"); - const ghost = child ? as(UIImage, child) : parent.getBuilder().image(`ship-${ship.model.code}-sprite`, 0, 0, true); + const ghost = child ? as(UIImage, child) : builder.image(`ship-${ship.model.code}-sprite`, 0, 0, true); ghost.setName("moveghost"); if (plan && plan.target) { ghost.setVisible(true); ghost.setPosition(plan.target.x, plan.target.y); - ghost.setTint(PLAN_COLOR); + if (builder.view.isTintSupported()) { + ghost.setTintFill(PLAN_COLOR); + } else { + ghost.setAlpha(0.6); + } + ghost.setRotation((active && active.target) ? arenaAngle(plan.target, active.target) : arenaAngle(ship.location, plan.target)); } else { ghost.setVisible(false); } @@ -124,7 +129,16 @@ module TK.SpaceTac.UI { border: { color: PLAN_COLOR_HL, alpha: 0.2, width: 4 }, }); } else { - const center = plan ? plan.target : from; + const center = plan ? nn(plan.target) : from; + if (arenaDistance(from, center) > 0.0) { + graphics.addLine({ + start: from, + end: center, + width: 6, + alpha: 0.2, + color: PLAN_COLOR_HL + }); + } graphics.addCircle({ center, radius,