2017-09-24 22:23:22 +00:00
|
|
|
|
module TK.SpaceTac.UI {
|
2018-05-15 14:57:45 +00:00
|
|
|
|
/**
|
|
|
|
|
* Group to display a star system
|
|
|
|
|
*/
|
|
|
|
|
export class StarSystemDisplay extends UIContainer {
|
2017-05-10 16:49:08 +00:00
|
|
|
|
view: UniverseMapView
|
2018-03-08 19:16:05 +00:00
|
|
|
|
builder: UIBuilder
|
2018-06-06 18:21:27 +00:00
|
|
|
|
background: UIImage
|
2018-05-15 14:57:45 +00:00
|
|
|
|
circles: UIContainer
|
2017-05-10 16:49:08 +00:00
|
|
|
|
starsystem: Star
|
|
|
|
|
player: Player
|
|
|
|
|
fleet_display: FleetDisplay
|
2018-05-15 14:57:45 +00:00
|
|
|
|
locations: [StarLocation, UIImage | UIButton, UIImage][] = []
|
|
|
|
|
label: UIButton
|
2017-01-26 00:01:31 +00:00
|
|
|
|
|
2017-02-09 00:00:35 +00:00
|
|
|
|
constructor(parent: UniverseMapView, starsystem: Star) {
|
2018-05-15 14:57:45 +00:00
|
|
|
|
super(parent, starsystem.x, starsystem.y);
|
2017-01-30 00:40:33 +00:00
|
|
|
|
|
2017-03-15 21:40:19 +00:00
|
|
|
|
this.view = parent;
|
2018-03-08 19:16:05 +00:00
|
|
|
|
this.builder = new UIBuilder(parent, this);
|
2017-03-15 21:40:19 +00:00
|
|
|
|
|
2018-06-06 18:21:27 +00:00
|
|
|
|
this.background = this.builder.image("map-starsystem-background", 0, 0, true);
|
|
|
|
|
this.setScale(starsystem.radius * 2 / this.background.width);
|
2017-01-26 00:01:31 +00:00
|
|
|
|
|
|
|
|
|
this.starsystem = starsystem;
|
2017-01-30 00:40:33 +00:00
|
|
|
|
this.player = parent.player;
|
|
|
|
|
this.fleet_display = parent.player_fleet;
|
2017-01-26 00:01:31 +00:00
|
|
|
|
|
2017-01-26 23:01:04 +00:00
|
|
|
|
// Show boundary
|
2018-05-15 14:57:45 +00:00
|
|
|
|
this.circles = this.builder.container("circles");
|
2018-03-08 19:16:05 +00:00
|
|
|
|
let boundaries = this.builder.in(this.circles).image("map-boundaries", 0, 0, true);
|
2018-05-15 14:57:45 +00:00
|
|
|
|
boundaries.setScale(starsystem.radius / (this.scaleX * 256));
|
2017-01-26 00:01:31 +00:00
|
|
|
|
|
2017-01-26 23:01:04 +00:00
|
|
|
|
// Show locations
|
2017-01-30 00:40:33 +00:00
|
|
|
|
starsystem.locations.map(location => {
|
2018-05-15 14:57:45 +00:00
|
|
|
|
let location_sprite: UIImage | UIButton | null = null;
|
|
|
|
|
let loctype = StarLocationType[location.type].toLowerCase();
|
|
|
|
|
|
|
|
|
|
location_sprite = this.builder.button(`map-location-${loctype}`, location.x / this.scaleX, location.y / this.scaleY,
|
|
|
|
|
() => this.view.moveToLocation(location),
|
2018-06-06 21:12:59 +00:00
|
|
|
|
() => {
|
2018-05-15 14:57:45 +00:00
|
|
|
|
let visited = this.player.hasVisitedLocation(location);
|
|
|
|
|
let shop = (visited && !location.encounter && location.shop) ? " (dockyard present)" : "";
|
|
|
|
|
|
|
|
|
|
if (location.is(this.player.fleet.location)) {
|
|
|
|
|
return `Current fleet location${shop}`;
|
|
|
|
|
} else {
|
|
|
|
|
let danger = (visited && location.encounter) ? " [enemy fleet detected !]" : "";
|
|
|
|
|
return `${visited ? "Visited" : "Unvisited"} ${loctype} - Move the fleet there${danger}${shop}`;
|
|
|
|
|
}
|
|
|
|
|
}, undefined, { center: true });
|
|
|
|
|
|
|
|
|
|
location_sprite.setRotation(Math.atan2(location.y, location.x));
|
|
|
|
|
if (location.type == StarLocationType.PLANET) {
|
|
|
|
|
this.addOrbit(location.x, location.y);
|
2017-01-29 18:34:38 +00:00
|
|
|
|
}
|
|
|
|
|
|
2018-05-15 14:57:45 +00:00
|
|
|
|
let status = this.getBadgeFrame(location);
|
|
|
|
|
let status_badge = this.builder.image(`map-status-${status}`, (location.x + 0.005) / this.scaleX, (location.y + 0.005) / this.scaleY, true);
|
|
|
|
|
this.locations.push([location, location_sprite, status_badge]);
|
2017-01-26 00:01:31 +00:00
|
|
|
|
});
|
2017-05-10 16:49:08 +00:00
|
|
|
|
|
|
|
|
|
// Show name
|
2018-05-15 14:57:45 +00:00
|
|
|
|
this.label = this.builder.button("map-name", 0, 460, undefined, `Level ${this.starsystem.level} starsystem`, undefined, { center: true });
|
2018-03-08 19:16:05 +00:00
|
|
|
|
this.builder.in(this.label, builder => {
|
|
|
|
|
builder.text(this.starsystem.name, -30, 0, { size: 32, color: "#b8d2f1" });
|
|
|
|
|
builder.text(this.starsystem.level.toString(), 243, 30, { size: 24, color: "#a0a0a0" });
|
|
|
|
|
});
|
2017-01-26 00:01:31 +00:00
|
|
|
|
}
|
|
|
|
|
|
2017-06-05 17:53:27 +00:00
|
|
|
|
/**
|
|
|
|
|
* Add an orbit marker
|
|
|
|
|
*/
|
2018-05-15 14:57:45 +00:00
|
|
|
|
addOrbit(x: number, y: number): void {
|
2017-06-05 17:53:27 +00:00
|
|
|
|
let radius = Math.sqrt(x * x + y * y);
|
|
|
|
|
let angle = Math.atan2(y, x);
|
|
|
|
|
|
2018-03-08 19:16:05 +00:00
|
|
|
|
let circle = this.builder.in(this.circles).image("map-orbit", 0, 0, true);
|
2018-05-15 14:57:45 +00:00
|
|
|
|
circle.setScale(radius / (this.scaleX * 198));
|
2017-06-05 17:53:27 +00:00
|
|
|
|
circle.rotation = angle - 0.01;
|
2017-01-26 23:01:04 +00:00
|
|
|
|
}
|
2017-01-30 00:40:33 +00:00
|
|
|
|
|
|
|
|
|
/**
|
2017-06-05 17:53:27 +00:00
|
|
|
|
* Return the frame to use for info badge.
|
2017-01-30 00:40:33 +00:00
|
|
|
|
*/
|
2017-08-21 22:41:44 +00:00
|
|
|
|
getBadgeFrame(location: StarLocation): string {
|
2017-03-23 18:58:09 +00:00
|
|
|
|
if (this.player.hasVisitedLocation(location)) {
|
|
|
|
|
if (location.encounter) {
|
2017-08-21 22:41:44 +00:00
|
|
|
|
return "enemy";
|
2017-03-23 18:58:09 +00:00
|
|
|
|
} else if (location.shop) {
|
2017-08-21 22:41:44 +00:00
|
|
|
|
return "dockyard";
|
2017-03-23 18:58:09 +00:00
|
|
|
|
} else {
|
2017-08-21 22:41:44 +00:00
|
|
|
|
return "clear";
|
2017-03-23 18:58:09 +00:00
|
|
|
|
}
|
|
|
|
|
} else {
|
2017-08-21 22:41:44 +00:00
|
|
|
|
return "unvisited";
|
2017-03-23 18:58:09 +00:00
|
|
|
|
}
|
2017-01-30 00:40:33 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Update displayed information, and fog of war
|
|
|
|
|
*/
|
2017-03-09 23:21:34 +00:00
|
|
|
|
updateInfo(level: number, focus: boolean) {
|
2017-01-30 00:40:33 +00:00
|
|
|
|
this.locations.forEach(info => {
|
2017-09-12 22:37:56 +00:00
|
|
|
|
let status = this.getBadgeFrame(info[0]);
|
|
|
|
|
this.view.changeImage(info[2], `map-status-${status}`);
|
2017-01-30 00:40:33 +00:00
|
|
|
|
});
|
2017-03-09 23:21:34 +00:00
|
|
|
|
|
|
|
|
|
// LOD
|
|
|
|
|
let detailed = focus && level == 2;
|
2018-05-15 14:57:45 +00:00
|
|
|
|
this.list.filter(child => child !== this.label).forEach(child => {
|
2018-06-06 18:21:27 +00:00
|
|
|
|
if (child !== this.label && child !== this.background && (child instanceof UIButton || child instanceof UIImage)) {
|
2018-05-15 14:57:45 +00:00
|
|
|
|
this.view.animations.setVisible(child, detailed, 300);
|
|
|
|
|
}
|
|
|
|
|
});
|
2017-05-10 16:49:08 +00:00
|
|
|
|
|
|
|
|
|
this.updateLabel(level);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Update label position and scaling
|
|
|
|
|
*/
|
|
|
|
|
updateLabel(zoom: number) {
|
|
|
|
|
this.label.visible = this.player.hasVisitedSystem(this.starsystem);
|
|
|
|
|
|
|
|
|
|
let factor = (zoom == 2) ? 1 : (zoom == 1 ? 5 : 15);
|
2018-02-08 15:16:03 +00:00
|
|
|
|
let position = (zoom == 2) ? { x: -680, y: 440 } : { x: 0, y: (zoom == 1 ? 180 : 100) * factor };
|
2018-05-15 14:57:45 +00:00
|
|
|
|
this.view.animations.addAnimation(this.label, { x: position.x, y: position.y, scaleX: factor, scaleY: factor }, 500, "Cubic.easeInOut");
|
2017-01-30 00:40:33 +00:00
|
|
|
|
}
|
2017-01-26 00:01:31 +00:00
|
|
|
|
}
|
|
|
|
|
}
|