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

map: Added action menu

Browse source
This commit is contained in:
Michaël Lemaire 2017-06-06 00:05:34 +02:00
parent 341719e962
commit 896265e102
14 changed files with 199 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
TODO
View file

@ -32,7 +32,7 @@
* Outcome: disable the loot button if there is no loot
* Ensure that tweens and particle emitters get destroyed once animation is done (or view changes)
* Controls: do not focus on ship while targetting for area effects (dissociate hover and target)
* Controls: fix hover being stuck when the cursor exits the window
* Controls: fix hover being stuck when the cursor exits the window, or the item moves or is hidden
* Drones: add hull points and take area damage
* Drones: find a way to avoid arena cluttering
* Add a battle log display
@ -51,7 +51,6 @@
* AI: new duel page with producers/evaluators tweaking
* AI: work in a dedicated process
* Map: remove jump links that cross the radius of other systems
* Map: disable interaction (zoom, selection) while moving/jumping
* Tutorial
* Campaign: Add ship personality (with icons to identify ?), with reaction to battle and map movements
* Campaign: Add factions and reputation

63
graphics/ui/map.svg
View file

@ -845,10 +845,10 @@
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="1.4142136"
inkscape:cx="927.30708"
inkscape:cy="480.99508"
inkscape:cx="338.69768"
inkscape:cy="912.57657"
inkscape:document-units="mm"
inkscape:current-layer="layer5"
inkscape:current-layer="layer2"
showgrid="false"
units="px"
inkscape:snap-bbox="true"
@ -1347,36 +1347,39 @@
inkscape:label="Buttons"
style="display:inline">
<g
style="display:inline"
id="g4944"
transform="translate(-16.445,-9.5133171)">
<circle
r="2.7127855"
cy="27.84827"
cx="29.653553"
id="path4936"
style="fill:none;fill-rule:evenodd;stroke:#6ba7ef;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
id="g4765">
<g
transform="translate(-16.445,-9.5133171)"
id="g4944"
style="display:inline">
<circle
style="fill:none;fill-rule:evenodd;stroke:#6ba7ef;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4936"
cx="29.653553"
cy="27.84827"
r="2.7127855" />
<path
style="fill:none;fill-rule:evenodd;stroke:#6ba7ef;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 31.679153,25.862046 7.606771,-7.60677 h 55.166455"
id="path4938"
inkscape:connector-curvature="0" />
</g>
<use
transform="rotate(180,73.423138,23.576806)"
height="100%"
width="100%"
id="use4946"
xlink:href="#g4944"
y="0"
x="0"
style="display:inline" />
<path
sodipodi:nodetypes="ccccccc"
inkscape:connector-curvature="0"
id="path4938"
d="m 31.679153,25.862046 7.606771,-7.60677 h 55.166455"
style="fill:none;fill-rule:evenodd;stroke:#6ba7ef;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
id="path4962"
d="m 128.41296,23.565172 -9.48927,9.51663 H 27.908258 l -9.489268,-9.51663 9.489268,-9.516629 h 91.015432 z"
style="display:inline;fill:#3b526d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter5500)" />
</g>
<use
style="display:inline"
x="0"
y="0"
xlink:href="#g4944"
id="use4946"
width="100%"
height="100%"
transform="rotate(180,73.423138,23.576806)" />
<path
style="display:inline;fill:#3b526d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.5291667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter5500)"
d="m 128.41296,23.565172 -9.48927,9.51663 H 27.908258 l -9.489268,-9.51663 9.489268,-9.516629 h 91.015432 z"
id="path4962"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:12.69999981px;line-height:6.61458302px;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#b8d2f1;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 375 KiB

After

Width:  |  Height:  |  Size: 375 KiB

BIN
out/assets/images/map/action.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
out/assets/images/map/button-jump.png
View file

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

BIN
out/assets/images/map/subname.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

3
src/ui/Preload.ts
View file

@ -70,10 +70,11 @@ module TS.SpaceTac.UI {
this.loadImage("map/starsystem-background.png");
this.loadImage("map/current-location.png");
this.loadImage("map/name.png");
this.loadImage("map/subname.png");
this.loadSheet("map/action.png", 323, 192);
this.loadImage("map/orbit.png");
this.loadImage("map/boundaries.png");
this.loadSheet("map/button-zoom.png", 115, 191);
this.loadImage("map/button-jump.png");
this.loadImage("map/location-star.png");
this.loadImage("map/location-planet.png");
this.loadImage("map/location-warp.png");

8
src/ui/battle/OutcomeDialog.ts
View file

@ -15,20 +15,20 @@ module TS.SpaceTac.UI {
this.addButton(502, 871, () => {
parent.character_sheet.show(nn(outcome.winner).ships[0]);
parent.character_sheet.setLoot(outcome.loot);
}, "battle-outcome-button-loot", undefined, "Open character sheet to loot equipment from defeated fleet");
}, "battle-outcome-button-loot", 0, 0, "Open character sheet to loot equipment from defeated fleet");
this.addButton(924, 871, () => {
parent.exitBattle();
}, "battle-outcome-button-map", undefined, "Exit the battle and go back to the map");
}, "battle-outcome-button-map", 0, 0, "Exit the battle and go back to the map");
} else {
this.addButton(502, 871, () => {
parent.revertBattle();
}, "battle-outcome-button-revert", undefined, "Go back to where the fleet was before the battle happened");
}, "battle-outcome-button-revert", 0, 0, "Go back to where the fleet was before the battle happened");
this.addButton(924, 871, () => {
// Quit the game, and go back to menu
parent.gameui.quitGame();
}, "battle-outcome-button-menu", undefined, "Quit the game, and go back to main menu");
}, "battle-outcome-button-menu", 0, 0, "Quit the game, and go back to main menu");
}
this.addText(780, 270, "You", "#ffffff", 20);

13
src/ui/common/UIComponent.ts
View file

@ -131,11 +131,20 @@ module TS.SpaceTac.UI {
}
}
/**
* Clear from all added content.
*/
clearContent(): void {
while (this.container.children.length > 0) {
this.container.removeChildAt(0);
}
}
/**
* Add a button in the component, positioning its center.
*/
addButton(x: number, y: number, on_click: Function, bg_normal: string, bg_hover = bg_normal, tooltip = "", angle = 0) {
let button = new Phaser.Button(this.view.game, x, y, bg_normal, on_click);
addButton(x: number, y: number, on_click: Function, background: string, frame_normal = 0, frame_hover = frame_normal, tooltip = "", angle = 0) {
let button = new Phaser.Button(this.view.game, x, y, background, on_click, undefined, frame_hover, frame_normal);
button.anchor.set(0.5, 0.5);
button.angle = angle;
if (tooltip) {

10
src/ui/map/CurrentLocationMarker.ts
View file

@ -25,8 +25,14 @@ module TS.SpaceTac.UI {
}
show() {
this.position.set(this.fleet.x, this.fleet.y);
let scale = (this.zoom >= 2) ? (this.fleet.scale.x * 4) : 0.002;
let scale = 1;
if (this.zoom == 2) {
this.position.set(this.fleet.x, this.fleet.y);
scale = this.fleet.scale.x * 4;
} else {
this.position.set(this.fleet.location.star.x, this.fleet.location.star.y);
scale = (this.zoom == 1) ? 0.002 : 0.016;
}
this.alpha = 0;
this.scale.set(scale * 10, scale * 10);

10
src/ui/map/FleetDisplay.ts
View file

@ -39,6 +39,10 @@ module TS.SpaceTac.UI {
this.loopOrbit();
}
get location(): StarLocation {
return this.fleet.location || new StarLocation();
}
/**
* Animate to a given position in orbit of its current star location
*/
@ -71,7 +75,7 @@ module TS.SpaceTac.UI {
/**
* Make the fleet move to another location in the same system
*/
moveToLocation(location: StarLocation, speed = 1, on_leave: ((duration: number) => any) | null = null) {
moveToLocation(location: StarLocation, speed = 1, on_leave: ((duration: number) => any) | null = null, on_finished: Function | null = null) {
if (this.fleet.location && location != this.fleet.location) {
let dx = location.universe_x - this.fleet.location.universe_x;
let dy = location.universe_y - this.fleet.location.universe_y;
@ -93,6 +97,10 @@ module TS.SpaceTac.UI {
this.map.updateInfo(location.star);
this.loopOrbit();
}
if (on_finished) {
on_finished();
}
});
tween.start();
}, true);

65
src/ui/map/MapLocationMenu.ts Normal file
View file

@ -0,0 +1,65 @@
/// <reference path="../common/UIComponent.ts" />
module TS.SpaceTac.UI {
/**
* Menu to display selected map location, and associated actions
*/
export class MapLocationMenu extends UIComponent {
constructor(view: BaseView) {
super(view, 478, 500);
}
/**
* Set information displayed, with title and actions to show in menu
*/
setInfo(title: string, actions: [string, Function][]) {
this.clearContent();
if (title) {
this.addImage(239, 57, "map-subname");
this.addText(239, 57, title, "#b8d2f1", 22, false, true);
}
for (let idx = actions.length - 1; idx >= 0; idx--) {
let [label, action] = actions[idx];
this.addButton(172, 48 + idx * 100 + 96, action, "map-action", 0, 1);
this.addText(186, 48 + idx * 100 + 136, label, "#b8d2f1", 20, false, true);
}
}
/**
* Automatically set menu content from current location
*/
setFromLocation(location: StarLocation | null, view: UniverseMapView) {
if (location) {
let actions: [string, Function][] = [];
if (location.shop) {
actions.push(["Go to dockyard", () => view.openShop()]);
}
switch (location.type) {
case StarLocationType.WARP:
this.setInfo("Warp-zone", actions.concat([["Engage jump drive", () => view.doJump()]]));
break;
case StarLocationType.STAR:
this.setInfo("Class II Star", actions);
break;
case StarLocationType.PLANET:
this.setInfo("Rock planet", actions);
break;
case StarLocationType.ASTEROID:
this.setInfo("Huge asteroid", actions);
break;
case StarLocationType.STATION:
this.setInfo("Space station", actions);
break;
default:
this.setInfo("Somewhere in space", actions);
break;
}
} else {
this.setInfo("", []);
}
}
}
}

11
src/ui/map/StarSystemDisplay.ts
View file

@ -33,16 +33,7 @@ module TS.SpaceTac.UI {
// Show locations
starsystem.locations.map(location => {
let location_sprite: Phaser.Image | null = null;
let fleet_move = () => {
if (location == this.player.fleet.location) {
if (location.shop) {
this.view.character_sheet.setShop(location.shop);
this.view.character_sheet.show(this.player.fleet.ships[0]);
}
} else {
this.fleet_display.moveToLocation(location);
}
}
let fleet_move = () => this.view.moveToLocation(location);
if (location.type == StarLocationType.STAR) {
location_sprite = this.addImage(location.x, location.y, "map-location-star", 0, fleet_move);

93
src/ui/map/UniverseMapView.ts
View file

@ -28,14 +28,16 @@ module TS.SpaceTac.UI {
// Frame to highlight current location
current_location: CurrentLocationMarker
// Button to jump to another system
button_jump: Phaser.Button
// Actions for selected location
actions: MapLocationMenu
// Character sheet
character_sheet: CharacterSheet
// Zoom level
zoom = 0
zoom_in: Phaser.Button
zoom_out: Phaser.Button
/**
* Init the view, binding it to a universe
@ -82,20 +84,18 @@ module TS.SpaceTac.UI {
this.current_location = new CurrentLocationMarker(this, this.player_fleet);
this.layer_universe.add(this.current_location);
this.button_jump = new Phaser.Button(this.game, 0, 0, "map-button-jump", () => this.doJump());
this.button_jump.anchor.set(0.5, 0.5);
this.button_jump.visible = false;
this.layer_universe.add(this.button_jump);
this.tooltip.bindStaticText(this.button_jump, "Engage warp drive to jump to another star system");
this.actions = new MapLocationMenu(this);
this.actions.setPosition(30, 30);
this.actions.moveToLayer(this.layer_overlay);
let button = new Phaser.Button(this.game, 1520, 100, "map-button-zoom", () => this.setZoom(this.zoom + 1), undefined, 1, 0);
button.anchor.set(0.5, 0.5);
this.layer_overlay.add(button);
this.tooltip.bindStaticText(button, "Zoom in");
button = new Phaser.Button(this.game, 1520, 980, "map-button-zoom", () => this.setZoom(this.zoom - 1), undefined, 3, 2);
button.anchor.set(0.5, 0.5);
this.layer_overlay.add(button);
this.tooltip.bindStaticText(button, "Zoom out");
this.zoom_in = new Phaser.Button(this.game, 1520, 100, "map-button-zoom", () => this.setZoom(this.zoom + 1), undefined, 1, 0);
this.zoom_in.anchor.set(0.5, 0.5);
this.layer_overlay.add(this.zoom_in);
this.tooltip.bindStaticText(this.zoom_in, "Zoom in");
this.zoom_out = new Phaser.Button(this.game, 1520, 980, "map-button-zoom", () => this.setZoom(this.zoom - 1), undefined, 3, 2);
this.zoom_out.anchor.set(0.5, 0.5);
this.layer_overlay.add(this.zoom_out);
this.tooltip.bindStaticText(this.zoom_out, "Zoom out");
this.character_sheet = new CharacterSheet(this, this.getWidth() - 307);
this.character_sheet.show(this.player.fleet.ships[0], false);
@ -133,7 +133,7 @@ module TS.SpaceTac.UI {
/**
* Update info on all star systems (fog of war, available data...)
*/
updateInfo(current_star: Star | null) {
updateInfo(current_star: Star | null, interactive = true) {
this.current_location.setZoom(this.zoom);
this.starlinks.forEach(linkgraphics => {
@ -143,14 +143,10 @@ module TS.SpaceTac.UI {
this.starsystems.forEach(system => system.updateInfo(this.zoom, system.starsystem == current_star));
let location = this.player.fleet.location;
if (location && location.type == StarLocationType.WARP && this.zoom >= 2) {
let angle = Math.atan2(location.y, location.x);
this.button_jump.scale.set(location.star.radius * 0.002, location.star.radius * 0.002);
this.button_jump.position.set(location.star.x + location.x + 0.02 * Math.cos(angle), location.star.y + location.y + 0.02 * Math.sin(angle));
this.animations.setVisible(this.button_jump, true, 300);
} else {
this.animations.setVisible(this.button_jump, false, 300);
this.actions.setFromLocation(this.player.fleet.location, this);
if (interactive) {
this.setInteractionEnabled(true);
}
}
@ -207,18 +203,55 @@ module TS.SpaceTac.UI {
/**
* Do the jump animation to another system
*
* This will only work if current location is a warp
*/
doJump() {
if (this.player.fleet.location && this.player.fleet.location.type == StarLocationType.WARP && this.player.fleet.location.jump_dest) {
this.animations.setVisible(this.button_jump, false, 300);
let dest_location = this.player.fleet.location.jump_dest;
doJump(): void {
let location = this.player.fleet.location;
if (location && location.type == StarLocationType.WARP && location.jump_dest) {
let dest_location = location.jump_dest;
let dest_star = dest_location.star;
this.player_fleet.moveToLocation(dest_location, 3, duration => {
this.timer.schedule(duration / 2, () => this.updateInfo(dest_star));
this.timer.schedule(duration / 2, () => this.updateInfo(dest_star, false));
this.setCamera(dest_star.x, dest_star.y, dest_star.radius * 2, duration, Phaser.Easing.Cubic.Out);
}, () => {
this.setInteractionEnabled(true);
});
this.setInteractionEnabled(false);
}
}
/**
* Open the dockyard interface
*
* This will only work if current location has a dockyard
*/
openShop(): void {
let location = this.player.fleet.location;
if (location && location.shop) {
this.character_sheet.setShop(location.shop);
this.character_sheet.show(this.player.fleet.ships[0]);
}
}
/**
* Move the fleet to another location
*/
moveToLocation(dest: StarLocation): void {
if (dest != this.player.fleet.location) {
this.setInteractionEnabled(false);
this.player_fleet.moveToLocation(dest, 1, null, () => this.updateInfo(dest.star));
}
}
/**
* Set the interactive state
*/
setInteractionEnabled(enabled: boolean) {
this.actions.setVisible(enabled && this.zoom == 2, 300);
this.animations.setVisible(this.zoom_in, enabled && this.zoom < 2, 300);
this.animations.setVisible(this.zoom_out, enabled && this.zoom > 0, 300);
this.animations.setVisible(this.character_sheet, enabled, 300);
}
}
}

4
src/ui/menu/LoadDialog.ts
View file

@ -13,8 +13,8 @@ module TS.SpaceTac.UI {
constructor(parent: MainMenu) {
super(parent, 1344, 566, "menu-load-bg");
this.addButton(600, 115, () => this.paginateSave(-1), "common-arrow", "common-arrow", "Scroll to newer saves", 180);
this.addButton(1038, 115, () => this.paginateSave(1), "common-arrow", "common-arrow", "Scroll to older saves", 0);
this.addButton(600, 115, () => this.paginateSave(-1), "common-arrow", 0, 0, "Scroll to newer saves", 180);
this.addButton(1038, 115, () => this.paginateSave(1), "common-arrow", 0, 0, "Scroll to older saves", 0);
this.addButton(1224, 115, () => this.load(), "common-button-ok");
this.addButton(1224, 341, () => this.join(), "common-button-ok");