Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Ship selector

  • Loading branch information...
commit 02926adcc81e8c8177b001c2c42e2a76c785dc8d 1 parent 6e0377b
@caseman authored
View
96 art/selection.svg
@@ -0,0 +1,96 @@
+<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="502"
+ height="502"
+ id="svg2"
+ version="1.1"
+ inkscape:version="0.47pre3 r22311"
+ sodipodi:docname="selection.svg">
+ <defs
+ id="defs4">
+ <inkscape:perspective
+ sodipodi:type="inkscape:persp3d"
+ inkscape:vp_x="0 : 526.18109 : 1"
+ inkscape:vp_y="0 : 1000 : 0"
+ inkscape:vp_z="744.09448 : 526.18109 : 1"
+ inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+ id="perspective10" />
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="0.70710678"
+ inkscape:cx="248.37395"
+ inkscape:cy="191"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="true"
+ inkscape:window-width="901"
+ inkscape:window-height="834"
+ inkscape:window-x="48"
+ inkscape:window-y="0"
+ inkscape:window-maximized="0">
+ <inkscape:grid
+ type="xygrid"
+ id="grid2818"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true" />
+ </sodipodi:namedview>
+ <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" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(-69,-221.36218)">
+ <path
+ style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.84515423px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ d="m 570,312.36218 -50,160 50,160 0,-160 0,-160 z"
+ id="path2820" />
+ <path
+ id="path3597"
+ d="m 480,722.36218 -160,-50 -160,50 160,0 160,0 z"
+ style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.84515423px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+ <path
+ id="path3610"
+ d="m 570,312.36218 -50,160 50,160 0,-160 0,-160 z"
+ style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+ <path
+ style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+ d="m 480,722.36218 -160,-50 -160,50 160,0 160,0 z"
+ id="path3612" />
+ <path
+ id="path3614"
+ d="m 70,632.36218 50,-160 -50,-160 0,160 0,160 z"
+ style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+ <path
+ style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+ d="m 160,222.36218 160,50 160,-50 -160,0 -160,0 z"
+ id="path3616" />
+ </g>
+</svg>
View
16 gravita/www/gravita.css
@@ -108,3 +108,19 @@ label {
position: absolute;
}
+@-webkit-keyframes spin {
+ 0% { -webkit-transform: rotate(-180deg); }
+ 100% { -webkit-transform: rotate(180deg); }
+}
+
+#ship-selection {
+ display: none;
+ z-index: 999;
+ width: 68px;
+ height: 68px;
+ opacity: 0.7;
+ -webkit-animation-duration: 5s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear;
+}
+
View
15 gravita/www/gravita.js
@@ -40,10 +40,23 @@ $gravita.placeShips = function() {
for (id in $gravita.ships) {
var ship = $gravita.ships[id];
var sector_offset = $("#sector-" + ship.x + "-" + ship.y).offset();
- var ship_div = $("#ship-" + id)
+ var ship_div = $("#ship-" + id);
ship_div.offset({
left: sector_offset.left + (64 - ship_div.width()) / 2,
top: sector_offset.top + (64 - ship_div.height()) / 2,
});
}
}
+
+$gravita.selectShip = function(id) {
+ var ship = $("#ship-" + id);
+ var ship_offset = ship.offset();
+ var selection = $("#ship-selection");
+ selection.css("webkitAnimationName", "");
+ selection.show();
+ selection.offset({
+ left: ship_offset.left + (ship.width() - selection.width()) / 2,
+ top: ship_offset.top + (ship.height() - selection.height()) / 2,
+ });
+ selection.css("webkitAnimationName", "spin");
+}
View
BIN  gravita/www/images/selection.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
4 gravita/www/index.html
@@ -13,6 +13,8 @@
<div id="content"></div>
+<img id="ship-selection" src="/static/images/selection.png"/>
+
<script id="title-template" type="text/x-jquery-template">
<div id="title-screen" class="panel">
<h1 class="title">Welcome to Gravita, ${name}</h1>
@@ -78,7 +80,7 @@ <h2 class="title">Planet Density</h2>
</script>
<script id="ship-template" type="text/x-jquery-template">
- <div id="ship-${id}" class="${race}" onClick="alert('${id}')">
+ <div id="ship-${id}" class="${race}" onClick="$gravita.selectShip('${id}')">
<div class="C${cls} L${level} V${variant}">
<div class="nose"></div>
<div class="front">
Please sign in to comment.
Something went wrong with that request. Please try again.