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

Using UIBuilder for tooltips

Browse source
This commit is contained in:
Michaël Lemaire 2017-10-11 00:32:46 +02:00
parent bad46f5712
commit ce9eb7456e
9 changed files with 93 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/ui/BaseView.ts
View file

@ -252,11 +252,10 @@ module TK.SpaceTac.UI {
}
/**
* Get the first image found in atlases
* Returns the first image found in atlases
*/
getFirstImage(...names: string[]): { key: string, frame: number } {
let infos = names.map(name => this.getImageInfo(name));
return first(infos, info => info.key.substr(0, 9) != "-missing-") || infos[0];
getFirstImage(...names: string[]): string {
return first(names, name => this.getImageInfo(name).key.substr(0, 9) != '-missing-') || names[names.length - 1];
}
}
}

2
src/ui/battle/ActionIcon.ts
View file

@ -47,7 +47,7 @@ module TK.SpaceTac.UI {
// Action icon
let icon = this.view.getFirstImage(`action-${action.code}`, `equipment-${action.equipment ? action.equipment.code : "---"}`);
this.img_action = new Phaser.Image(bar.game, 0, 0, icon.key, icon.frame);
this.img_action = this.view.newImage(icon);
this.img_action.anchor.set(0.5);
this.img_action.scale.set(0.35);
this.img_action.alpha = 0.2;

22
src/ui/battle/ActionTooltip.ts
View file

@ -7,10 +7,12 @@ module TK.SpaceTac.UI {
* Fill the tooltip
*/
static fill(filler: TooltipFiller, ship: Ship, action: BaseAction, position: number) {
let icon = filler.view.getFirstImage(`equipment-${action.equipment ? action.equipment.code : "---"}`, `action-${action.code}`);
filler.addImage(0, 0, icon.key, icon.frame, 0.5);
let builder = filler.styled({ size: 20 });
filler.addText(150, 0, action.equipment ? action.equipment.name : action.name, "#ffffff", 24);
let icon = builder.image([`equipment-${action.equipment ? action.equipment.code : "---"}`, `action-${action.code}`]);
icon.scale.set(0.5);
builder.text(action.equipment ? action.equipment.name : action.name, 150, 0, { size: 24 });
let cost = "";
if (action instanceof MoveAction) {
@ -30,28 +32,28 @@ module TK.SpaceTac.UI {
}
}
if (cost) {
filler.addText(150, 40, cost, "#ffdd4b", 20);
builder.text(cost, 150, 40, { color: "#ffdd4b" });
}
if (action.equipment && action.equipment.cooldown.overheat) {
let cooldown = action.equipment.cooldown;
if (cooldown.heat > 0) {
filler.addText(150, 80, "Cooling down ...", "#c9604c", 20);
builder.text("Cooling down ...", 150, 80, { color: "#c9604c" });
} else if (cooldown.willOverheat() && cost != "Not enough power") {
if (cooldown.cooling > 1) {
let turns = cooldown.cooling - 1;
filler.addText(150, 80, `Unavailable for ${turns} turn${turns > 1 ? "s" : ""} if used`, "#c9604c", 20);
builder.text(`Unavailable for ${turns} turn${turns > 1 ? "s" : ""} if used`, 150, 80, { color: "#c9604c" });
} else {
filler.addText(150, 80, "Unavailable until next turn if used", "#c9604c", 20);
builder.text("Unavailable until next turn if used", 150, 80, { color: "#c9604c" });
}
}
} else if (action instanceof ToggleAction && action.activated) {
filler.addText(150, 80, `Activated`, "#b1d549", 20);
builder.text(`Activated`, 150, 80, { color: "#c9604c" });
}
let description = action.getEffectsDescription();
if (description) {
filler.addText(30, 170, description, "#ffffff", 16);
builder.text(description, 30, 170, { size: 16 });
}
let shortcut = "";
@ -63,7 +65,7 @@ module TK.SpaceTac.UI {
shortcut = `[ ${position + 1} ]`;
}
if (shortcut) {
filler.addText(150, 120, shortcut, "#aaaaaa", 12);
builder.text(shortcut, 150, 120, { color: "#aaaaaa", size: 12 });
}
}
}

4
src/ui/battle/ArenaDrone.ts
View file

@ -42,8 +42,8 @@ module TK.SpaceTac.UI {
this.activation.visible = false;
this.add(this.activation);
let info = battleview.getFirstImage(`equipment-${drone.code}`, `battle-actions-deploy-${drone.code}`);
this.sprite = new Phaser.Button(this.game, 0, 0, info.key, undefined, undefined, info.frame, info.frame);
let name = this.view.getFirstImage(`equipment-${drone.code}`, `battle-actions-deploy-${drone.code}`);
this.sprite = this.view.newButton(name);
this.sprite.anchor.set(0.5, 0.5);
this.sprite.scale.set(0.1, 0.1);
this.add(this.sprite);

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

@ -24,28 +24,30 @@ module TK.SpaceTac.UI {
filler.configure(10, 6, this.battleview.arena.getBoundaries());
filler.addImageA(0, 0, `ship-${ship.model.code}-portrait`, 0.5);
let portrait = filler.image(`ship-${ship.model.code}-portrait`);
portrait.scale.set(0.5);
let enemy = ship.getPlayer() != this.battleview.player;
filler.addText(140, 0, ship.getFullName(), enemy ? "#cc0d00" : "#ffffff", 22, false, true);
filler.text(ship.getFullName(), 140, 0, { color: enemy ? "#cc0d00" : "#ffffff", size: 22, bold: true });
if (ship.alive) {
let turns = this.battleview.battle.getTurnsBefore(ship);
filler.addText(140, 36, (turns == 0) ? "Playing" : ((turns == 1) ? "Plays next" : `Plays in ${turns} turns`), "#cccccc", 18);
filler.text((turns == 0) ? "Playing" : ((turns == 1) ? "Plays next" : `Plays in ${turns} turns`), 140, 36, { color: "#cccccc", size: 18 });
filler.addText(140, 72, `Hull\n${ship.getValue("hull")}/${ship.getAttribute("hull_capacity")}`, "#eb4e4a", 20, true, true);
filler.addText(288, 72, `Shield\n${ship.getValue("shield")}/${ship.getAttribute("shield_capacity")}`, "#2ad8dc", 20, true, true);
filler.addText(408, 72, `Power\n${ship.getValue("power")}/${ship.getAttribute("power_capacity")}`, "#ffdd4b", 20, true, true);
let hsp_builder = filler.styled({ color: "#eb4e4a", size: 20, center: true, vcenter: true, bold: true });
hsp_builder.text(`Hull\n${ship.getValue("hull")}/${ship.getAttribute("hull_capacity")}`, 200, 106, { color: "#eb4e4a" });
hsp_builder.text(`Shield\n${ship.getValue("shield")}/${ship.getAttribute("shield_capacity")}`, 340, 106, { color: "#2ad8dc" });
hsp_builder.text(`Power\n${ship.getValue("power")}/${ship.getAttribute("power_capacity")}`, 480, 106, { color: "#ffdd4b" });
let iy = 148;
if (sprite) {
let effects = sprite.active_effects.area.concat(sprite.active_effects.sticky);
if (effects.length > 0) {
filler.addText(0, iy, "Active effects", "#ffffff", 18, false, true);
filler.text("Active effects", 0, iy, { color: "#ffffff", size: 18, bold: true });
iy += 30;
effects.forEach(effect => {
filler.addText(0, iy, `• ${effect.getDescription()}`, effect.isBeneficial() ? "#afe9c6" : "#e9afaf", 16);
filler.text(`• ${effect.getDescription()}`, 0, iy, { color: effect.isBeneficial() ? "#afe9c6" : "#e9afaf" });
iy += 26;
});
}
@ -53,15 +55,15 @@ module TK.SpaceTac.UI {
let weapons = ship.listEquipment(SlotType.Weapon);
if (weapons.length > 0) {
filler.addText(0, iy, "Weapons", "#ffffff", 18, false, true);
filler.text("Weapons", 0, iy, { size: 18, bold: true });
iy += 30;
weapons.forEach(weapon => {
filler.addText(0, iy, `• ${weapon.getFullName()}`, "#ffffff", 16);
filler.text(`• ${weapon.getFullName()}`, 0, iy);
iy += 26;
});
}
} else {
filler.addText(140, 36, "Emergency Stasis Protocol\nship disabled", "#a899db", 20, true, true);
filler.text("Emergency Stasis Protocol\nship disabled", 140, 36, { color: "#a899db", size: 20, center: true, vcenter: true });
}
if (sprite) {

4
src/ui/character/CharacterEquipment.ts
View file

@ -164,8 +164,8 @@ module TK.SpaceTac.UI {
if (this.item.slot_type !== null) {
title += ` (${SlotType[this.item.slot_type]})`;
}
filler.addText(0, 0, title, "#cccccc", 20, false, true);
filler.addText(0, 40, this.item.getFullDescription(), "#cccccc", 18, false, false, 700);
filler.text(title, 0, 0, { color: "#cccccc", size: 20, bold: true });
filler.text(this.item.getFullDescription(), 0, 40, { color: "#cccccc", size: 18, width: 700 });
return true;
}
}

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

@ -1,3 +1,5 @@
/// <reference path="UIBuilder.ts" />
module TK.SpaceTac.UI {
class TooltipContainer extends Phaser.Group {
@ -75,15 +77,16 @@ module TK.SpaceTac.UI {
/**
* Functions used to fill a tooltip content
*/
export class TooltipFiller {
export class TooltipFiller extends UIBuilder {
private container: TooltipContainer;
constructor(container: TooltipContainer) {
this.container = container;
}
let style = new UITextStyle();
style.center = false;
style.vcenter = false;
super(container.view, container.content, style);
get view(): BaseView {
return this.container.view;
this.container = container;
}
/**
@ -96,39 +99,6 @@ module TK.SpaceTac.UI {
this.container.viewport = viewport;
}
}
/**
* Add an image to the content
*/
addImage(x: number, y: number, key: string, frame = 0, scale = 1): void {
let image = new Phaser.Image(this.container.game, x, y, key, frame);
image.data.key = key;
image.scale.set(scale);
this.container.content.add(image);
}
/**
* Add an image to the content, coming from an atlas
*/
addImageA(x: number, y: number, name: string, scale = 1): void {
let image = this.view.newImage(name, x, y);
image.scale.set(scale);
this.container.content.add(image);
}
/**
* Add a text to the content
*/
addText(x: number, y: number, content: string, color = "#ffffff", size = 16, center = false, bold = false, width = 0): void {
let style = { font: `${bold ? "bold " : ""}${size}pt SpaceTac`, fill: color, align: center ? "center" : "left" };
let text = new Phaser.Text(this.container.game, x, y, content, style);
if (width) {
text.wordWrap = true;
text.wordWrapWidth = width;
}
text.setShadow(3, 4, "rgba(0,0,0,0.6)", 6);
this.container.content.add(text);
}
}
/**
@ -183,7 +153,7 @@ module TK.SpaceTac.UI {
this.bind(obj, filler => {
let content = text_getter();
if (content) {
filler.addText(0, 0, content, "#cccccc", 20);
filler.text(content, 0, 0, { color: "#cccccc", size: 20 });
return true;
} else {
return false;

48
src/ui/common/UIBuilder.spec.ts
View file

@ -64,14 +64,58 @@ module TK.SpaceTac.UI.Specs {
it("can create texts", function () {
let builder = new UIBuilder(testgame.view);
builder.text("Test content", 12, 41, { size: 61 });
check(["View layers", "base", 0], Phaser.Text, "", { text: "Test content", x: 12, y: 41, cssFont: "61pt 'SpaceTac'" });
builder.text("Test content", 12, 41);
check(["View layers", "base", 0], Phaser.Text, "", { text: "Test content", x: 12, y: 41 });
builder.clear();
builder.text("", 0, 0, {});
builder.text("", 0, 0, { size: 61 });
check(["View layers", "base", 0], Phaser.Text, "", { cssFont: "16pt 'SpaceTac'" });
check(["View layers", "base", 1], Phaser.Text, "", { cssFont: "61pt 'SpaceTac'" });
builder.clear();
builder.text("", 0, 0, {});
builder.text("", 0, 0, { color: "#252627" });
check(["View layers", "base", 0], Phaser.Text, "", { fill: "#ffffff" });
check(["View layers", "base", 1], Phaser.Text, "", { fill: "#252627" });
builder.clear();
builder.text("", 0, 0, {});
builder.text("", 0, 0, { shadow: true });
check(["View layers", "base", 0], Phaser.Text, "", { shadowColor: "rgba(0,0,0,0)" });
check(["View layers", "base", 1], Phaser.Text, "", { shadowColor: "rgba(0,0,0,0.6)", shadowFill: true, shadowOffsetX: 3, shadowOffsetY: 4, shadowBlur: 6, shadowStroke: true });
builder.clear();
builder.text("", 0, 0, {});
builder.text("", 0, 0, { bold: true });
check(["View layers", "base", 0], Phaser.Text, "", { fontWeight: "normal" });
check(["View layers", "base", 1], Phaser.Text, "", { fontWeight: "bold" });
builder.clear();
builder.text("", 0, 0, {});
builder.text("", 0, 0, { center: false });
builder.text("", 0, 0, { vcenter: false });
builder.text("", 0, 0, { center: false, vcenter: false });
check(["View layers", "base", 0], Phaser.Text, "", { anchor: new Phaser.Point(0.5, 0.5), align: "center" });
check(["View layers", "base", 1], Phaser.Text, "", { anchor: new Phaser.Point(0, 0.5), align: "left" });
check(["View layers", "base", 2], Phaser.Text, "", { anchor: new Phaser.Point(0.5, 0), align: "center" });
check(["View layers", "base", 3], Phaser.Text, "", { anchor: new Phaser.Point(0, 0), align: "left" });
builder.clear();
builder.text("", 0, 0, { width: 0 });
builder.text("", 0, 0, { width: 1100 });
check(["View layers", "base", 0], Phaser.Text, "", { wordWrap: false });
check(["View layers", "base", 1], Phaser.Text, "", { wordWrap: true, wordWrapWidth: 1100 });
})
it("can create images", function () {
let builder = new UIBuilder(testgame.view);
builder.image("test-image", 100, 50);
check(["View layers", "base", 0], Phaser.Image, "test-image", { x: 100, y: 50, key: "__missing", inputEnabled: null });
spyOn(testgame.view, "getFirstImage").and.callFake((...images: string[]) => images[1]);
builder.image(["test-image1", "test-image2", "test-image3"]);
check(["View layers", "base", 1], Phaser.Image, "test-image2");
})
it("can create buttons", function () {

6
src/ui/common/UIBuilder.ts
View file

@ -140,7 +140,11 @@ module TK.SpaceTac.UI {
/**
* Add an image
*/
image(name: string, x = 0, y = 0): UIImage {
image(name: string | string[], x = 0, y = 0): UIImage {
if (typeof name != "string") {
name = this.view.getFirstImage(...name);
}
let info = this.view.getImageInfo(name);
let result = this.game.add.image(x, y, info.key, info.frame);
result.name = name;