<(common.inc.plp)><:
Html({
- title => 'starcraft unit cheat sheets',
+ title => 'starcraft unit cheat sheet',
version => 'v1.0',
description => [
'Reference of StarCraft unit properties,'
});
:>
-<h1>StarCraft unit cheat sheet</h1>
+<h1>StarCraft units</h1>
<p>
Unit properties as seen or measured in Brood War
<style type="text/css">
.units {
+ border-collapse: separate;
border-spacing: 0;
- width: auto;
+ margin: 0 auto;
+ white-space: nowrap;
}
.units th, .units td {
- border-top: 1px solid #040;
+ border: 0;
padding: 0 0.2em;
- }
- .units {
- border-bottom: 1px solid #040;
+ background: transparent;
+ text-align: left;
}
tr.alt td {
font-size: 70%;
padding-left: 0;
}
.units tr:hover:not(.race) {
- background: #030;
+ background: #EEE;
}
- table h3 {
+ table h2 {
padding: 1ex 0;
margin: 0;
+ text-align: center;
}
.units th.cat {
font-size: 70%;
text-transform: uppercase;
}
- .units td.cat {
- border: 0;
- }
.units thead th, .units tfoot th {
- border: 0;
font-size: 70%;
font-weight: normal;
}
- thead + * + tbody tr:first-child th {
- border: 0; /* border below thead */
- }
- .unit-o {color: #FF8080} /* organic */
- .unit-u {color: #8080FF} /* mechanic */
+ .unit-o {color: #C08} /* organic */
+ .unit-u {color: #44C} /* mechanic */
img.unit-o, img.unit-u {
margin-left: 0.2em;
vertical-align: middle;
text-align: center;
white-space: nowrap;
}
- .unit.unit-s {color: #CC7}
- .unit.unit-m {color: #D86}
- .unit.unit-l {color: #D77}
+ .unit.unit-s {color: #770}
+ .unit.unit-m {color: #C70}
+ .unit.unit-l {color: #D22}
.hurt.unit-s::before {
content: '~';
- color: #CC9;
+ color: #773;
}
.hurt.unit-l::before {
content: '*';
- color: #D88;
+ color: #C66;
}
.hurt .unit-splash {
position: absolute;
.hurtrel, .units .hurtrel {
padding-left: 1em;
font-size: 70%;
- color: #AAA;
+ color: #778;
}
.unit-splash {
- color: #8C8;
+ color: #4A0;
}
.unit-detect::before {
content: '!';
- color: #4A4;
+ color: #0A8;
font-size: 70%;
vertical-align: super;
}
padding-left: 0.5em;
}
- .val {
+ .units .val {
text-align: right;
}
+
+ .legend dt {
+ float: none;
+ text-align: left;
+ margin-top: 1ex;
+ font-weight: bold;
+ }
+ .legend dd:before {
+ content: '• ';
+ }
+ .legend dd {
+ text-indent: -1em;
+ margin-left: 1em;
+ break-before: avoid;
+ -webkit-column-break-before: avoid;
+ }
+
+ .units, .legend {
+ display: table-cell;
+ }
+ .legend {
+ min-width: 15em;
+ padding-left: 2em;
+ text-align: left;
+ }
</style>
<:
<thead><tr>
<th></th>
<th><:= coltoggle('name', '') :></th>
- <th class="val min"><img src="minerals.png" alt="min"></th>
- <th class="val gas"><img src="gas.png" alt="gas"></th>
+ <th class="val min"><img src="/minerals.png" alt="min"></th>
+ <th class="val gas"><img src="/gas.png" alt="gas"></th>
<th class="val time"><:= coltoggle(qw'build cost') :></th>
<th class="unit" colspan="2"><:= coltoggle(qw'size size') :></th>
<th class="val unit-hp">HP</th>
<th class="val unit-speed">speed</th>
<th class="unit-magic">specials</th>
</tr></thead>
-<tbody>
<:
sub showrange {
my ($row, @elements) = @_;
my ($race, $cat) = ('', '');
for (@rows) {
$race = $_->{race},
- printf '</tbody><tbody id="%s"><tr class="race"><th colspan="18"><h2>%1$s</h2>'."\n", $race
+ printf '<tbody id="%s"><tr class="race"><th colspan="18"><h2>%s</h2>'."\n", $race, ucfirst $race
if $grouped and $race ne $_->{race};
$_->{cat} = $_->{race} if not $grouped;
my $sizechar = [qw/? s m l/]->[$_->{size}];
'<td class="val unit">' . join('',
$_->{unit} ? $_->{unit} == .5 ? '½' : $_->{unit} : ' ',
defined $_->{organic} && sprintf(
- '<img class="unit-%s" src="s%s.png" alt="%s">',
+ '<span class="unit-%s" title="%s">%s</span>',
$_->{organic} ? 'o' : 'u',
- $_->{race} . ($_->{organic} ? 'o' : ''),
- $_->{organic} ? 'o' : 'm'
+ $_->{organic} ? 'organic' : 'mechanic',
+ $_->{organic} ? 'o' : 'm',
),
),
'<td class="val unit-hp">' . $_->{hp},
}
}
:>
-</tbody>
</table>
+<div class="legend">
<h2>Legend</h2>
-<dl class="compact">
+<dl>
<dt>cost
<dd>minerals+gas required to create one unit
<dt>build
<dd>relative speed of movement (when in full motion, startup speed ignored)
<dt>specials
<dd>special abilities
- <dd>parentheses () indicated that it needs to be researched first
+ <dd>parentheses () indicate that it needs to be researched first
<dd>hover for description
<dd>range is maximum range required to activate
<dd>cost is percentage of total energy lost
possible upgrades.
</p>
-<: exit :>
-<h2>Magic</h2>
-
-<ul class="maps"><:
-for (@$units) {
- print '<li>', $_->{name};
- print '<br>';
-# my $units = {qw/protoss W zerg B terran R/}->{$_->{race}} x int($_->{unit} + .5);
-# my $cost = int(($_->{min} + $_->{gas}) / 50 - $_->{unit}) || '';
- my $units = {qw/protoss W zerg B terran R/}->{$_->{race}} x int($_->{gas} / 50) || '';
- my $cost = int($_->{min} / 50) || 0;
- my @desc;
- push @desc, "Flying" if $_->{flying};
- push @desc, "Cloaking" if $_->{cloak};
- push @desc, "First Strike" if $_->{range} and $_->{range} >= 4;
- my $att = $_->{attack}->{ground};
- push @desc, "Trample" if $att and $att->{splash};
- $att = $att->{damage} if $att;
- $att = $att->[0] if ref $att eq "ARRAY";
- $att = int($att / 5);
- my $def = int($_->{hp} / 45);
- printf "%s<br>%s<br>%s/%s", $cost . $units, join(",", @desc), $att, $def;
-}
-:></ul>
+</div>