Browse files

[generate-board] push button -> polygon moves

Now all that remains is making the polygons move in the right way,
i.e. rotate in the direction indicated by the arrow.
  • Loading branch information...
1 parent f054dad commit b2f6c896d251278c12bb0cbfa377f9854da030fd @masak committed Jun 22, 2009
Showing with 18 additions and 10 deletions.
  1. +18 −10 bin/generate-board
View
28 bin/generate-board
@@ -10,8 +10,9 @@ sub header {
'
}
-sub polygon($color, @coords) {
+sub polygon($id, $color, @coords) {
qq[ <path
+ id="$id"
style="fill:$color;stroke:none"
d="] ~ pathspec(@coords) ~ '" />
'
@@ -68,26 +69,33 @@ sub translate3d(@coords3d, $dx, $dy, $dz) {
return map -> $x,$y,$z { $x+$dx, $y+$dy, $z+$dz }, @coords3d;
}
-sub block($color, @one-corner, @other-corner) {
+sub block($name, $color, @one-corner, @other-corner) {
my ($x1,$y1,$z1) = @one-corner;
my ($x2,$y2,$z2) = @other-corner;
my $c = $color.substr(1);
my $brighter-color = [~] '#', map { sprintf '%x', :16($_)+3 }, $c.comb;
my $darker-color = [~] '#', map { sprintf '%x', :16($_)-3 }, $c.comb;
# RAKUDO: Multi-arg return
return [
- $darker-color, [$x1,$y2,$z1, $x1,$y2,$z2, $x2,$y2,$z2, $x2,$y2,$z1],
- $color, [$x1,$y1,$z1, $x1,$y1,$z2, $x1,$y2,$z2, $x1,$y2,$z1],
- $brighter-color, [$x1,$y1,$z2, $x1,$y2,$z2, $x2,$y2,$z2, $x2,$y1,$z2],
+ $name~'-ns', $darker-color,
+ [$x1,$y2,$z1, $x1,$y2,$z2, $x2,$y2,$z2, $x2,$y2,$z1],
+
+ $name~'-ew', $color,
+ [$x1,$y1,$z1, $x1,$y1,$z2, $x1,$y2,$z2, $x1,$y2,$z1],
+
+ $name~'-top', $brighter-color,
+ [$x1,$y1,$z2, $x1,$y2,$z2, $x2,$y2,$z2, $x2,$y1,$z2],
].list;
}
sub board {
- return block('#999999', [0,0,-.25], [8,8,0]);
+ return block('board', '#999999', [0,0,-.25], [8,8,0]);
}
sub piece($color, $row, $column, $height) {
- return block(($color eq 'black' ?? '#553333' !! '#aaaacc'),
+ state $n = 0;
+ return block("piece{++$n}",
+ ($color eq 'black' ?? '#553333' !! '#aaaacc'),
[$column-1,8-$row,$height-1],
[$column, 9-$row,$height ]);
}
@@ -96,7 +104,7 @@ sub rotate-widget {
' <script type="text/ecmascript"> <![CDATA[
function rotate(evt) {
var arrow = evt.target;
- arrow.setAttribute("style", "fill:#880000;stroke:#000000;stroke-width:0.5px");
+ document.getElementById("board-top").setAttribute("d", "M 83.647,217.186 L 171.448,412.607 L 439.538,308.781 L 304.701,153.729 z");
}
]]> </script>
<path
@@ -144,14 +152,14 @@ my @pieces = map {
};
print header;
-for board() -> $color, @coords3d {
+for board() -> $id, $color, @coords3d {
my @center-board = translate3d(@coords3d, -4, -4, 0);
my @rotated-coords3d = rot-x(rot-z(@center-board, -25), 45);
my @move-board-back = translate3d(@rotated-coords3d, 0, 0, -20);
my @projected-coords = project(@move-board-back, 1);
my @scaled-coords = scale(@projected-coords, 700);
my @coords2d = translate(@scaled-coords, 250, 250);
- print polygon($color, @coords2d);
+ print polygon($id, $color, @coords2d);
}
print rotate-widget;
print footer;

0 comments on commit b2f6c89

Please sign in to comment.