Added action tooltip (very WIP)
This commit is contained in:
parent
b3bb84b81a
commit
7eec39276e
130
graphics/logo.svg
Normal file
130
graphics/logo.svg
Normal file
|
@ -0,0 +1,130 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="210mm"
|
||||||
|
height="297mm"
|
||||||
|
id="svg2"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.48.4 r9939"
|
||||||
|
sodipodi:docname="logo.svg">
|
||||||
|
<defs
|
||||||
|
id="defs4">
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient3803">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#b99434;stop-opacity:1"
|
||||||
|
offset="0"
|
||||||
|
id="stop3805" />
|
||||||
|
<stop
|
||||||
|
id="stop3849"
|
||||||
|
offset="0.71379268"
|
||||||
|
style="stop-color:#907d4d;stop-opacity:0.78546715" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#6c6c6c;stop-opacity:0;"
|
||||||
|
offset="1"
|
||||||
|
id="stop3807" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient3803"
|
||||||
|
id="linearGradient4609"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="translate(3.326324,3.4488765)"
|
||||||
|
x1="395.9798"
|
||||||
|
y1="467.48386"
|
||||||
|
x2="684.88342"
|
||||||
|
y2="346.26553" />
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="0.98994949"
|
||||||
|
inkscape:cx="499.73794"
|
||||||
|
inkscape:cy="518.05435"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1030"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="25"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:snap-global="true"
|
||||||
|
inkscape:snap-object-midpoints="true"
|
||||||
|
inkscape:snap-nodes="true"
|
||||||
|
inkscape:snap-center="true"
|
||||||
|
inkscape:snap-bbox="false" />
|
||||||
|
<metadata
|
||||||
|
id="metadata7">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Calque 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
sodipodi:type="arc"
|
||||||
|
style="fill:#370e81;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:16.60000000000000142;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
id="path2985"
|
||||||
|
sodipodi:cx="392.85715"
|
||||||
|
sodipodi:cy="475.21933"
|
||||||
|
sodipodi:rx="212.85715"
|
||||||
|
sodipodi:ry="212.85715"
|
||||||
|
d="m 605.71429,475.21933 a 212.85715,212.85715 0 1 1 -425.71429,0 212.85715,212.85715 0 1 1 425.71429,0 z" />
|
||||||
|
<path
|
||||||
|
style="fill:#6c6c6c;fill-opacity:1;stroke:#000000;stroke-width:9.93900000000000006;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
|
||||||
|
d="m 255.83375,152.48166 286.90392,0 -56.25735,191.66626 -176.40603,0 z"
|
||||||
|
id="path3757"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
sodipodi:nodetypes="ccccc" />
|
||||||
|
<use
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
xlink:href="#path3757"
|
||||||
|
id="use3759"
|
||||||
|
transform="matrix(-0.76604444,0.64278761,-0.64278761,-0.76604444,1009.3727,567.31849)"
|
||||||
|
width="744.09448"
|
||||||
|
height="1052.3622" />
|
||||||
|
<use
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
xlink:href="#path3757"
|
||||||
|
id="use3761"
|
||||||
|
transform="matrix(-0.76604444,-0.64278761,0.64278761,-0.76604444,380.44982,1077.1097)"
|
||||||
|
width="744.09448"
|
||||||
|
height="1052.3622" />
|
||||||
|
<path
|
||||||
|
style="fill:url(#linearGradient4609);fill-opacity:1;stroke:none"
|
||||||
|
d="M 395.26551,473.96321 732.65646,423.45558 657.90517,265.87178 z"
|
||||||
|
id="path3801"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
<use
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
xlink:href="#path3801"
|
||||||
|
id="use3811"
|
||||||
|
transform="matrix(-1,0,0,1,790.23513,-1.428571)"
|
||||||
|
width="744.09448"
|
||||||
|
height="1052.3622" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/images/battle/action-tooltip.png
Normal file
BIN
src/assets/images/battle/action-tooltip.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 562 B |
|
@ -30,6 +30,7 @@ module SpaceTac.View {
|
||||||
this.loadImage("battle/action-inactive.png");
|
this.loadImage("battle/action-inactive.png");
|
||||||
this.loadImage("battle/action-active.png");
|
this.loadImage("battle/action-active.png");
|
||||||
this.loadImage("battle/action-fading.png");
|
this.loadImage("battle/action-fading.png");
|
||||||
|
this.loadImage("battle/action-tooltip.png");
|
||||||
this.loadImage("battle/actionpointsempty.png");
|
this.loadImage("battle/actionpointsempty.png");
|
||||||
this.loadImage("battle/actionpointsfull.png");
|
this.loadImage("battle/actionpointsfull.png");
|
||||||
this.loadImage("battle/arena/shipspritehover.png");
|
this.loadImage("battle/arena/shipspritehover.png");
|
||||||
|
|
|
@ -12,6 +12,9 @@ module SpaceTac.View {
|
||||||
// Progress bar displaying action points
|
// Progress bar displaying action points
|
||||||
actionpoints: ValueBar;
|
actionpoints: ValueBar;
|
||||||
|
|
||||||
|
// Tooltip to display hovered action info
|
||||||
|
tooltip: ActionTooltip;
|
||||||
|
|
||||||
// Current ship, whose actions are displayed
|
// Current ship, whose actions are displayed
|
||||||
ship: Game.Ship;
|
ship: Game.Ship;
|
||||||
|
|
||||||
|
@ -44,6 +47,10 @@ module SpaceTac.View {
|
||||||
this.cancel.visible = false;
|
this.cancel.visible = false;
|
||||||
this.cancel.input.useHandCursor = true;
|
this.cancel.input.useHandCursor = true;
|
||||||
this.addChild(this.cancel);
|
this.addChild(this.cancel);
|
||||||
|
|
||||||
|
// Tooltip
|
||||||
|
this.tooltip = new ActionTooltip(this);
|
||||||
|
this.addChild(this.tooltip);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear the action icons
|
// Clear the action icons
|
||||||
|
@ -59,6 +66,9 @@ module SpaceTac.View {
|
||||||
addAction(ship: Game.Ship, action: Game.BaseAction): ActionIcon {
|
addAction(ship: Game.Ship, action: Game.BaseAction): ActionIcon {
|
||||||
var icon = new ActionIcon(this, 90 + this.actions.length * 62, 2, ship, action);
|
var icon = new ActionIcon(this, 90 + this.actions.length * 62, 2, ship, action);
|
||||||
this.actions.push(icon);
|
this.actions.push(icon);
|
||||||
|
|
||||||
|
this.tooltip.bringToTop();
|
||||||
|
|
||||||
return icon;
|
return icon;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -64,11 +64,13 @@ module SpaceTac.View {
|
||||||
this.processClick();
|
this.processClick();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Range hints on hover
|
// Information on hover
|
||||||
this.onInputOver.add(() => {
|
this.onInputOver.add(() => {
|
||||||
|
this.bar.tooltip.setAction(this);
|
||||||
this.battleview.arena.range_hint.setSecondary(this.ship, this.action);
|
this.battleview.arena.range_hint.setSecondary(this.ship, this.action);
|
||||||
});
|
});
|
||||||
this.onInputOut.add(() => {
|
this.onInputOut.add(() => {
|
||||||
|
this.bar.tooltip.setAction(null);
|
||||||
this.battleview.arena.range_hint.clearSecondary();
|
this.battleview.arena.range_hint.clearSecondary();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
28
src/scripts/view/battle/ActionTooltip.ts
Normal file
28
src/scripts/view/battle/ActionTooltip.ts
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
module SpaceTac.View {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Tooltip to display action information
|
||||||
|
export class ActionTooltip extends Phaser.Sprite {
|
||||||
|
// Action name
|
||||||
|
title: Phaser.Text;
|
||||||
|
|
||||||
|
constructor(parent: ActionBar) {
|
||||||
|
super(parent.game, 0, 0, "battle-action-tooltip");
|
||||||
|
this.visible = false;
|
||||||
|
|
||||||
|
this.title = new Phaser.Text(this.game, 0, 0, "", {font: "14px Arial", fill: "#000000"});
|
||||||
|
this.addChild(this.title);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set current action to display, null to hide
|
||||||
|
setAction(action: ActionIcon): void {
|
||||||
|
if (action) {
|
||||||
|
this.position.set(action.x, action.y + action.height);
|
||||||
|
this.title.setText(action.action.code);
|
||||||
|
Animation.fadeIn(this.game, this, 200);
|
||||||
|
} else {
|
||||||
|
Animation.fadeOut(this.game, this, 200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue