Improved tooltip positioning
This commit is contained in:
parent
64befbfeeb
commit
ff73114301
|
@ -50,7 +50,6 @@ module TS.SpaceTac.UI {
|
||||||
this.icon_waiting = new Phaser.Image(this.game, this.width / 2, 50, "common-waiting", 0);
|
this.icon_waiting = new Phaser.Image(this.game, this.width / 2, 50, "common-waiting", 0);
|
||||||
this.icon_waiting.anchor.set(0.5, 0.5);
|
this.icon_waiting.anchor.set(0.5, 0.5);
|
||||||
this.icon_waiting.scale.set(0.5, 0.5);
|
this.icon_waiting.scale.set(0.5, 0.5);
|
||||||
this.game.tweens.create(this.icon_waiting).to({ "angle": 360 }, 3000).loop().start();
|
|
||||||
this.addChild(this.icon_waiting);
|
this.addChild(this.icon_waiting);
|
||||||
|
|
||||||
// Tooltip
|
// Tooltip
|
||||||
|
@ -105,7 +104,9 @@ module TS.SpaceTac.UI {
|
||||||
setInteractive(interactive: boolean) {
|
setInteractive(interactive: boolean) {
|
||||||
this.interactive = interactive;
|
this.interactive = interactive;
|
||||||
|
|
||||||
|
this.game.tweens.removeFrom(this.icon_waiting);
|
||||||
this.battleview.animations.setVisible(this.icon_waiting, !this.interactive, 100);
|
this.battleview.animations.setVisible(this.icon_waiting, !this.interactive, 100);
|
||||||
|
this.game.tweens.create(this.icon_waiting).to({ "angle": 360 }, 3000).loop().start();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -206,12 +207,10 @@ module TS.SpaceTac.UI {
|
||||||
this.ship = ship;
|
this.ship = ship;
|
||||||
this.ship_power_capacity = ship.getAttribute("power_capacity");
|
this.ship_power_capacity = ship.getAttribute("power_capacity");
|
||||||
this.ship_power_value = ship.getValue("power");
|
this.ship_power_value = ship.getValue("power");
|
||||||
this.game.tweens.create(this).to({ "alpha": 1 }, 400).start();
|
|
||||||
} else {
|
} else {
|
||||||
this.ship = null;
|
this.ship = null;
|
||||||
this.ship_power_capacity = 0;
|
this.ship_power_capacity = 0;
|
||||||
this.ship_power_value = 0;
|
this.ship_power_value = 0;
|
||||||
this.game.tweens.create(this).to({ "alpha": 0.5 }, 400).start();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.updatePower();
|
this.updatePower();
|
||||||
|
|
|
@ -13,20 +13,6 @@ module TS.SpaceTac.UI {
|
||||||
this.battleview = parent;
|
this.battleview = parent;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Find ship sprite in the arena, to position next to it
|
|
||||||
*/
|
|
||||||
getPosition(ship: Ship): [number, number] {
|
|
||||||
let sprite = this.battleview.arena.findShipSprite(ship);
|
|
||||||
if (sprite) {
|
|
||||||
var x = sprite.worldPosition.x + sprite.width * sprite.worldScale.x * 0.5;
|
|
||||||
var y = sprite.worldPosition.y - sprite.height * sprite.worldScale.y * 0.5;
|
|
||||||
return [x, y];
|
|
||||||
} else {
|
|
||||||
return [0, 0];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set the current ship to display
|
* Set the current ship to display
|
||||||
*/
|
*/
|
||||||
|
@ -35,6 +21,8 @@ module TS.SpaceTac.UI {
|
||||||
|
|
||||||
let filler = this.getFiller();
|
let filler = this.getFiller();
|
||||||
|
|
||||||
|
filler.configure(10, 6, { x: 130, y: 140, width: 1920 - 138, height: 1080 - 148 });
|
||||||
|
|
||||||
filler.addImage(0, 0, `ship-${ship.model.code}-portrait`, 0.5);
|
filler.addImage(0, 0, `ship-${ship.model.code}-portrait`, 0.5);
|
||||||
|
|
||||||
let enemy = ship.getPlayer() != this.battleview.player;
|
let enemy = ship.getPlayer() != this.battleview.player;
|
||||||
|
@ -73,8 +61,13 @@ module TS.SpaceTac.UI {
|
||||||
filler.addText(140, 36, "Emergency Stasis Protocol\nship disabled", "#a899db", 20, true, true);
|
filler.addText(140, 36, "Emergency Stasis Protocol\nship disabled", "#a899db", 20, true, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
let [x, y] = this.getPosition(ship);
|
let sprite = this.battleview.arena.findShipSprite(ship);
|
||||||
this.container.show(x, y);
|
if (sprite) {
|
||||||
|
let bounds = sprite.getBounds();
|
||||||
|
bounds.x = sprite.worldPosition.x + sprite.width * sprite.worldScale.x * 0.5; // TODO Should not be necessary
|
||||||
|
bounds.y = sprite.worldPosition.y - sprite.height * sprite.worldScale.y * 0.5;
|
||||||
|
this.container.show(sprite.getBounds());
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,8 +21,8 @@ module TS.SpaceTac.UI.Specs {
|
||||||
jasmine.clock().tick(1000);
|
jasmine.clock().tick(1000);
|
||||||
container.update();
|
container.update();
|
||||||
expect(container.visible).toBe(true);
|
expect(container.visible).toBe(true);
|
||||||
expect(container.x).toEqual(154);
|
expect(container.x).toEqual(109);
|
||||||
expect(container.y).toEqual(79);
|
expect(container.y).toEqual(91);
|
||||||
|
|
||||||
button.onInputOut.dispatch();
|
button.onInputOut.dispatch();
|
||||||
expect(container.visible).toBe(false);
|
expect(container.visible).toBe(false);
|
||||||
|
|
|
@ -4,7 +4,10 @@ module TS.SpaceTac.UI {
|
||||||
view: BaseView
|
view: BaseView
|
||||||
background: Phaser.Graphics
|
background: Phaser.Graphics
|
||||||
content: Phaser.Group
|
content: Phaser.Group
|
||||||
anchorpoint: [number, number] = [0, 0]
|
item: IBounded
|
||||||
|
border = 10
|
||||||
|
margin = 6
|
||||||
|
viewport: IBounded | null = null
|
||||||
|
|
||||||
constructor(view: BaseView) {
|
constructor(view: BaseView) {
|
||||||
super(view.game);
|
super(view.game);
|
||||||
|
@ -21,25 +24,51 @@ module TS.SpaceTac.UI {
|
||||||
this.view.tooltip_layer.add(this);
|
this.view.tooltip_layer.add(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
show(x: number, y: number) {
|
show(item: IBounded) {
|
||||||
this.anchorpoint = [x, y];
|
this.item = item;
|
||||||
this.visible = true;
|
this.visible = true;
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
tryPosition(viewport: IBounded, tooltip: IBounded): [number, number, number] {
|
||||||
|
let [x, y] = UITools.positionInside(tooltip, viewport);
|
||||||
|
let distance = Math.max(Math.abs(x - tooltip.x), Math.abs(y - tooltip.y));
|
||||||
|
if (this.view.isMouseInside({ x: x, y: y, width: tooltip.width, height: tooltip.height })) {
|
||||||
|
distance += 1000;
|
||||||
|
}
|
||||||
|
return [x, y, distance];
|
||||||
|
}
|
||||||
|
|
||||||
|
getBestPosition(item: IBounded, width: number, height: number): [number, number] {
|
||||||
|
let viewport = this.viewport || { x: 0, y: 0, width: this.view.getWidth(), height: this.view.getHeight() };
|
||||||
|
let candidates = [
|
||||||
|
this.tryPosition(viewport, { x: item.x + item.width / 2 - width / 2, y: item.y + item.height + this.margin, width: width, height: height }),
|
||||||
|
this.tryPosition(viewport, { x: item.x + item.width + this.margin, y: item.y + item.height / 2 - height / 2, width: width, height: height }),
|
||||||
|
this.tryPosition(viewport, { x: item.x + item.width / 2 - width / 2, y: item.y - height - this.margin, width: width, height: height }),
|
||||||
|
this.tryPosition(viewport, { x: item.x - width - this.margin, y: item.y + item.height / 2 - height / 2, width: width, height: height }),
|
||||||
|
]
|
||||||
|
candidates[0][2] -= 1; // preference to down tooltip on equality
|
||||||
|
let [x, y, distance] = candidates.sort((a, b) => cmp(a[2], b[2]))[0];
|
||||||
|
return [x, y];
|
||||||
}
|
}
|
||||||
|
|
||||||
update() {
|
update() {
|
||||||
if (this.visible) {
|
if (this.visible) {
|
||||||
let bounds = this.content.getBounds();
|
let bounds = this.content.getBounds();
|
||||||
let width = bounds.width + 20;
|
let width = bounds.width + 2 * this.border;
|
||||||
let height = bounds.height + 20;
|
let height = bounds.height + 2 * this.border;
|
||||||
|
|
||||||
if (this.background.width != width || this.background.height != height) {
|
if (this.background.width != width || this.background.height != height) {
|
||||||
this.background.clear();
|
this.background.clear();
|
||||||
|
this.background.lineStyle(2, 0x404450);
|
||||||
this.background.beginFill(0x202225, 0.9);
|
this.background.beginFill(0x202225, 0.9);
|
||||||
this.background.drawRect(-10, -10, width, height);
|
this.background.drawRect(-this.border, -this.border, width, height);
|
||||||
this.background.endFill();
|
this.background.endFill();
|
||||||
}
|
}
|
||||||
|
|
||||||
let [x, y] = UITools.positionInside({ x: this.anchorpoint[0], y: this.anchorpoint[1], width: width, height: height }, { x: 0, y: 0, width: this.view.getWidth(), height: this.view.getHeight() });
|
let [x, y] = this.getBestPosition(this.item, width, height);
|
||||||
|
x += this.border;
|
||||||
|
y += this.border;
|
||||||
if (x != this.x || y != this.y) {
|
if (x != this.x || y != this.y) {
|
||||||
this.position.set(x, y);
|
this.position.set(x, y);
|
||||||
}
|
}
|
||||||
|
@ -48,6 +77,7 @@ module TS.SpaceTac.UI {
|
||||||
|
|
||||||
hide() {
|
hide() {
|
||||||
this.content.removeAll();
|
this.content.removeAll();
|
||||||
|
this.background.clear();
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -62,10 +92,21 @@ module TS.SpaceTac.UI {
|
||||||
this.container = container;
|
this.container = container;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Configure the positioning and base style of the tooltip
|
||||||
|
*/
|
||||||
|
configure(border = 10, margin = 6, viewport: IBounded | null = null): void {
|
||||||
|
this.container.border = border;
|
||||||
|
this.container.margin = margin;
|
||||||
|
if (viewport) {
|
||||||
|
this.container.viewport = viewport;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add an image to the content
|
* Add an image to the content
|
||||||
*/
|
*/
|
||||||
addImage(x: number, y: number, key: string, scale = 1) {
|
addImage(x: number, y: number, key: string, scale = 1): void {
|
||||||
let image = new Phaser.Image(this.container.game, x, y, key);
|
let image = new Phaser.Image(this.container.game, x, y, key);
|
||||||
image.scale.set(scale);
|
image.scale.set(scale);
|
||||||
this.container.content.add(image);
|
this.container.content.add(image);
|
||||||
|
@ -74,7 +115,7 @@ module TS.SpaceTac.UI {
|
||||||
/**
|
/**
|
||||||
* Add a text to the content
|
* Add a text to the content
|
||||||
*/
|
*/
|
||||||
addText(x: number, y: number, content: string, color = "#ffffff", size = 16, center = false, bold = false) {
|
addText(x: number, y: number, content: string, color = "#ffffff", size = 16, center = false, bold = false): void {
|
||||||
let style = { font: `${bold ? "bold " : ""}${size}pt Arial`, fill: color, align: center ? "center" : "left" };
|
let style = { font: `${bold ? "bold " : ""}${size}pt Arial`, fill: color, align: center ? "center" : "left" };
|
||||||
let text = new Phaser.Text(this.container.game, x, y, content, style);
|
let text = new Phaser.Text(this.container.game, x, y, content, style);
|
||||||
this.container.content.add(text);
|
this.container.content.add(text);
|
||||||
|
@ -115,8 +156,7 @@ module TS.SpaceTac.UI {
|
||||||
() => {
|
() => {
|
||||||
this.hide();
|
this.hide();
|
||||||
if (func(this.getFiller())) {
|
if (func(this.getFiller())) {
|
||||||
let bounds = obj.getBounds();
|
this.container.show(obj.getBounds());
|
||||||
this.container.show(bounds.x + bounds.width + 4, bounds.y + bounds.height + 4);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// leave
|
// leave
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
module TS.SpaceTac.UI {
|
module TS.SpaceTac.UI {
|
||||||
interface IBounded {
|
export type IBounded = {
|
||||||
x: number;
|
x: number
|
||||||
y: number;
|
y: number
|
||||||
width: number;
|
width: number
|
||||||
height: number;
|
height: number
|
||||||
}
|
}
|
||||||
|
|
||||||
// Common UI tools functions
|
// Common UI tools functions
|
||||||
|
|
Loading…
Reference in a new issue