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

Added active temporary effects on ship tooltip and in ship list

Browse source
This commit is contained in:
Michaël Lemaire 2017-01-17 00:20:33 +01:00
parent cde4b2fdf1
commit da0b8dc870
16 changed files with 149 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
TODO
View file

@ -1,7 +1,9 @@
* Floor movement power usage, and show it on the displayed line
* Add auto-move to attack
* Re-style cancel button and allow to cancel by clicking the action again
* Add equipment and active effects on ship tooltip
* Fix "thinking" icon in actionbar not rotating
* Add equipment info (or summary) in ship tooltip
* Handle effects overflowing ship tooltip when too numerous
* Add effect description on action tooltip
* Mobile: display tooltips on hold
* Mobile: targetting in two times, using a draggable target indicator

85
graphics/ui/battle.svg
View file

@ -17,7 +17,7 @@
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="battle.svg"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/actionbar.png"
inkscape:export-filename="/tmp/whole.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
@ -396,18 +396,21 @@
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="2.8284272"
inkscape:cx="182.77595"
inkscape:cy="695.32256"
inkscape:zoom="11.313709"
inkscape:cx="56.720009"
inkscape:cy="752.24415"
inkscape:document-units="px"
inkscape:current-layer="layer19"
inkscape:current-layer="layer14"
showgrid="false"
units="px"
showguides="true"
inkscape:snap-bbox="false"
inkscape:bbox-nodes="true"
inkscape:bbox-paths="true"
inkscape:snap-to-guides="true">
inkscape:snap-to-guides="true"
inkscape:object-nodes="false"
inkscape:snap-intersection-paths="false"
inkscape:object-paths="false">
<sodipodi:guide
position="0,0"
orientation="0,1920"
@ -798,6 +801,38 @@
sodipodi:type="star" />
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer25"
inkscape:label="Ship list effects">
<ellipse
style="opacity:1;fill:#afe9c6;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:10.39999962;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4455"
cx="53.669197"
cy="328.125"
rx="2.4911165"
ry="3.9937184"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/shiplist-effect-good.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<ellipse
ry="3.9937184"
rx="2.4911165"
cy="328.125"
cx="60.254128"
id="ellipse4478"
style="opacity:1;fill:#afe9c6;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:10.39999962;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<ellipse
ry="3.9937184"
rx="2.4911165"
cy="328.125"
cx="47.084263"
id="ellipse4480"
style="opacity:1;fill:#e9afaf;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:10.39999962;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/shiplist-effect-bad.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
</g>
</g>
<g
inkscape:groupmode="layer"
@ -1623,14 +1658,20 @@
width="444"
height="57"
x="166"
y="379" />
y="379"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/ship-tooltip-effect.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<rect
style="display:inline;opacity:1;fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.5999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4596"
width="43.5"
height="43.5"
x="174"
y="386" />
y="386"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/ship-tooltip-effect.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
@ -1673,6 +1714,34 @@
x="226.24536"
y="483.41992"
style="font-size:20px;fill:#e9afaf">Power recovery -1 (2 turns)</tspan></text>
<use
x="0"
y="0"
xlink:href="#rect4594"
id="use4423"
transform="translate(0,137.17871)"
width="100%"
height="100%" />
<use
x="0"
y="0"
xlink:href="#rect4596"
id="use4425"
transform="translate(0,136.92871)"
width="100%"
height="100%" />
<text
sodipodi:linespacing="125%"
id="text4445"
y="550.18652"
x="226.24536"
style="font-style:normal;font-weight:normal;font-size:20px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;display:inline;fill:#e9afaf;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
style="font-size:20px;fill:#afe9c6;fill-opacity:1"
y="550.18652"
x="226.24536"
id="tspan4447"
sodipodi:role="line">Shield +50 (1 turn)</tspan></text>
</g>
</g>
<g

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 80 KiB

BIN
out/assets/images/battle/ship-tooltip-effect.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 418 B

BIN
out/assets/images/battle/shiplist-effect-bad.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 253 B

BIN
out/assets/images/battle/shiplist-effect-good.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 256 B

BIN
out/assets/images/battle/shiplist-normal.png
View file

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
out/assets/images/battle/shiplist-playing.png
View file

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.6 KiB

5
src/game/Attribute.spec.ts
View file

@ -29,6 +29,11 @@ module SpaceTac.Game {
]);
});
it("gets human readable name", function () {
expect(ATTRIBUTE_NAMES[AttributeCode.Initiative]).toEqual("initiative");
expect(ATTRIBUTE_NAMES[AttributeCode.AP]).toEqual("power");
});
it("applies minimal and maximal value", function () {
var attr = new Attribute(AttributeCode.Misc, 50, 100);
expect(attr.current).toBe(50);

16
src/game/Attribute.ts
View file

@ -43,6 +43,22 @@ module SpaceTac.Game {
Misc
}
// Name mapping for attributes
export const ATTRIBUTE_NAMES = [
"initiative",
"hull",
"shield",
"power",
"power recovery",
"initial power",
"materials",
"energy",
"electronics",
"human",
"time",
"gravity"
]
// Value computed from equipment
// This value can be altered by effects
// Example attributes are health points, action points recovery...

4
src/game/effects/AttributeLimitEffect.ts
View file

@ -27,5 +27,9 @@ module SpaceTac.Game {
getFullCode(): string {
return this.code + "-" + AttributeCode[this.attrcode].toLowerCase().replace("_", "");
}
getDescription(): string {
return `limit ${ATTRIBUTE_NAMES[this.attrcode]} to ${this.value}`;
}
}
}

10
src/game/effects/BaseEffect.ts
View file

@ -19,5 +19,15 @@ module SpaceTac.Game {
applyOnShip(ship: Ship): boolean {
return false;
}
// Return true if the effect is beneficial to the ship, false if it's a drawback
isBeneficial(): boolean {
return false;
}
// Return a human readable description
getDescription(): string {
return "unknown effect";
}
}
}

4
src/view/Preload.ts
View file

@ -20,6 +20,8 @@ module SpaceTac.View {
this.loadImage("battle/shiplist-own.png");
this.loadImage("battle/shiplist-enemy.png");
this.loadImage("battle/shiplist-damage.png");
this.loadImage("battle/shiplist-effect-good.png");
this.loadImage("battle/shiplist-effect-bad.png");
this.loadImage("battle/shiplist-energy-empty.png");
this.loadImage("battle/shiplist-energy-full.png");
this.loadImage("battle/shiplist-hull-empty.png");
@ -32,7 +34,6 @@ module SpaceTac.View {
this.loadImage("battle/actionbar-cancel.png");
this.loadImage("battle/action-inactive.png");
this.loadImage("battle/action-active.png");
this.loadImage("battle/action-fading.png");
this.loadImage("battle/action-tooltip.png");
this.loadImage("battle/actionpointsnone.png");
this.loadImage("battle/actionpointsempty.png");
@ -40,6 +41,7 @@ module SpaceTac.View {
this.loadImage("battle/actionpointspart.png");
this.loadImage("battle/ship-tooltip-own.png");
this.loadImage("battle/ship-tooltip-enemy.png");
this.loadImage("battle/ship-tooltip-effect.png");
this.loadImage("battle/arena/ship-hover.png");
this.loadImage("battle/arena/ship-normal-enemy.png");
this.loadImage("battle/arena/ship-normal-own.png");

9
src/view/battle/ActionIcon.ts
View file

@ -28,9 +28,6 @@ module SpaceTac.View {
// Layer applied when the action is active
private layer_active: Phaser.Image;
// Layer applied when the action will become unavailable if another action is played
private layer_fading: Phaser.Image;
// Create an icon for a single ship action
constructor(bar: ActionBar, x: number, y: number, ship: Game.Ship, action: Game.BaseAction) {
super(bar.game, x, y, "battle-action-inactive");
@ -54,12 +51,6 @@ module SpaceTac.View {
this.layer_icon.scale.set(0.25, 0.25);
this.addChild(this.layer_icon);
// Fading layer
this.fading = false;
this.layer_fading = new Phaser.Image(this.game, 0, 0, "battle-action-fading", 0);
this.layer_fading.visible = false;
this.addChild(this.layer_fading);
// Click process
this.onInputUp.add(() => {
this.processClick();

13
src/view/battle/EffectDisplay.ts
View file

@ -1,13 +0,0 @@
module SpaceTac.View {
// Icon to display an effect currently applied on a ship
export class EffectDisplay extends Phaser.Image {
constructor(game: Phaser.Game, effect: Game.TemporaryEffect) {
var key = "battle-effect-" + effect.getFullCode();
super(game, 0, 0, key, 0);
var style = {font: "bold 12px Arial", fill: "#d0d020"};
var duration = new Phaser.Text(this.game, 0, 0, effect.duration.toString(), style);
this.addChild(duration);
}
}
}

11
src/view/battle/ShipListItem.ts
View file

@ -61,7 +61,6 @@ module SpaceTac.View {
this.addChild(this.energy);
this.active_effects = new Phaser.Group(this.game);
this.active_effects.position.set(63, 9);
this.addChild(this.active_effects);
this.updateAttributes();
@ -78,9 +77,13 @@ module SpaceTac.View {
// Update effects applied on the ship
updateEffects() {
this.active_effects.removeAll(true);
this.ship.temporary_effects.forEach((effect: Game.TemporaryEffect) => {
var icon = new EffectDisplay(this.game, effect);
this.active_effects.addChild(icon);
var count = this.ship.temporary_effects.length;
var spacing = (8 * (count - 1) > 72) ? 72 / (count - 1) : 8;
this.ship.temporary_effects.forEach((effect, index) => {
var x = 46 - (count - 1) * spacing / 2 + index * spacing;
var badge = new Phaser.Image(this.game, x, 85, `battle-shiplist-effect-${effect.isBeneficial() ? "good" : "bad"}`);
badge.anchor.set(0.5, 0.5);
this.active_effects.addChild(badge);
});
}

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

@ -12,6 +12,7 @@ module SpaceTac.View {
attr_human: Phaser.Text;
attr_gravity: Phaser.Text;
attr_time: Phaser.Text;
active_effects: Phaser.Group;
constructor(parent: BattleView) {
super(parent.game, 0, 0, "battle-ship-tooltip-own");
@ -58,6 +59,9 @@ module SpaceTac.View {
this.attr_time.anchor.set(0.5, 0.5);
this.addChild(this.attr_time);
this.active_effects = new Phaser.Group(this.game);
this.addChild(this.active_effects);
parent.ui.add(this);
}
@ -97,11 +101,31 @@ module SpaceTac.View {
this.attr_human.setText(ship.cap_human.current.toString());
this.attr_gravity.setText(ship.cap_gravity.current.toString());
this.attr_time.setText(ship.cap_time.current.toString());
this.active_effects.removeAll(true);
ship.temporary_effects.forEach((effect, index) => {
this.addEffect(effect, index);
});
Animation.fadeIn(this.game, this, 200, 0.9);
} else {
Animation.fadeOut(this.game, this, 200);
}
}
// Add a temporary effect display
addEffect(effect: Game.TemporaryEffect, index = 0) {
var effect_group = new Phaser.Image(this.game, 27, 243 + 60 * index, "battle-ship-tooltip-effect");
this.active_effects.addChild(effect_group);
var effect_icon = new Phaser.Image(this.game, 30, effect_group.height / 2, `battle-effect-${effect.getFullCode()}`);
effect_icon.anchor.set(0.5, 0.5);
effect_group.addChild(effect_icon);
var text = `${effect.getDescription()} (${effect.duration} turns)`;
var color = effect.isBeneficial() ? "afe9c6" : "#e9afaf";
var effect_text = new Phaser.Text(this.game, 60, effect_group.height / 2, text, { font: "16pt Arial", fill: color });
effect_text.anchor.set(0, 0.5);
effect_group.addChild(effect_text);
}
}
}