games/spacetac
games/spacetac
1
0
Fork 0
Code Releases Activity

Improved tooltip positioning

Browse source
This commit is contained in:
Michaël Lemaire 2017-05-16 01:20:35 +02:00
parent 64befbfeeb
commit ff73114301
5 changed files with 69 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/ui/battle/ActionBar.ts
View file

@ -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.anchor.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);
// Tooltip
@ -105,7 +104,9 @@ module TS.SpaceTac.UI {
setInteractive(interactive: boolean) {
this.interactive = interactive;
this.game.tweens.removeFrom(this.icon_waiting);
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_power_capacity = ship.getAttribute("power_capacity");
this.ship_power_value = ship.getValue("power");
this.game.tweens.create(this).to({ "alpha": 1 }, 400).start();
} else {
this.ship = null;
this.ship_power_capacity = 0;
this.ship_power_value = 0;
this.game.tweens.create(this).to({ "alpha": 0.5 }, 400).start();
}
this.updatePower();

25
src/ui/battle/ShipTooltip.ts
View file

@ -13,20 +13,6 @@ module TS.SpaceTac.UI {
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
*/
@ -35,6 +21,8 @@ module TS.SpaceTac.UI {
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);
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);
}
let [x, y] = this.getPosition(ship);
this.container.show(x, y);
let sprite = this.battleview.arena.findShipSprite(ship);
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());
}
}
}
}

4
src/ui/common/Tooltip.spec.ts
View file

@ -21,8 +21,8 @@ module TS.SpaceTac.UI.Specs {
jasmine.clock().tick(1000);
container.update();
expect(container.visible).toBe(true);
expect(container.x).toEqual(154);
expect(container.y).toEqual(79);
expect(container.x).toEqual(109);
expect(container.y).toEqual(91);
button.onInputOut.dispatch();
expect(container.visible).toBe(false);

62
src/ui/common/Tooltip.ts
View file

@ -4,7 +4,10 @@ module TS.SpaceTac.UI {
view: BaseView
background: Phaser.Graphics
content: Phaser.Group
anchorpoint: [number, number] = [0, 0]
item: IBounded
border = 10
margin = 6
viewport: IBounded | null = null
constructor(view: BaseView) {
super(view.game);
@ -21,25 +24,51 @@ module TS.SpaceTac.UI {
this.view.tooltip_layer.add(this);
}
show(x: number, y: number) {
this.anchorpoint = [x, y];
show(item: IBounded) {
this.item = item;
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() {
if (this.visible) {
let bounds = this.content.getBounds();
let width = bounds.width + 20;
let height = bounds.height + 20;
let width = bounds.width + 2 * this.border;
let height = bounds.height + 2 * this.border;
if (this.background.width != width || this.background.height != height) {
this.background.clear();
this.background.lineStyle(2, 0x404450);
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();
}
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) {
this.position.set(x, y);
}
@ -48,6 +77,7 @@ module TS.SpaceTac.UI {
hide() {
this.content.removeAll();
this.background.clear();
this.visible = false;
}
}
@ -62,10 +92,21 @@ module TS.SpaceTac.UI {
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
*/
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);
image.scale.set(scale);
this.container.content.add(image);
@ -74,7 +115,7 @@ module TS.SpaceTac.UI {
/**
* 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 text = new Phaser.Text(this.container.game, x, y, content, style);
this.container.content.add(text);
@ -115,8 +156,7 @@ module TS.SpaceTac.UI {
() => {
this.hide();
if (func(this.getFiller())) {
let bounds = obj.getBounds();
this.container.show(bounds.x + bounds.width + 4, bounds.y + bounds.height + 4);
this.container.show(obj.getBounds());
}
},
// leave

10
src/ui/common/UITools.ts
View file

@ -1,9 +1,9 @@
module TS.SpaceTac.UI {
interface IBounded {
x: number;
y: number;
width: number;
height: number;
export type IBounded = {
x: number
y: number
width: number
height: number
}
// Common UI tools functions