#!/usr/bin/perl
use warnings;
use strict;
use Tk;
# uncomment if module is installed
# use Tk::WidgetDump;

my ($dx,$dy);
my $mw  = Tk::MainWindow->new();
# kcot gently confirmed that 100x100 in geometry means 
# from 0,0 to 100,100 aka 101 pixels!!
$mw->geometry("99x99");

# main underlying canvas is filled with RED
my $can = $mw->Canvas(
                -height => 100,
                -width  => 100,
                -bg => 'red',
)->pack( );

# used to dump coordinates
my %board;

# alternate colors for tales
my @alt_col = qw(gold2 green);

# squares for tales starting at 0,0
my ($sq_x,$sq_y) = (0,0);

foreach my $letter (('A'..'B')){
    unshift @alt_col, pop @alt_col;
    foreach my $num (1..2){
        # cycle colors
        unshift @alt_col, pop @alt_col;
        $can->createRectangle($sq_x, $sq_y, $sq_x+49,$sq_y+49,
            -fill => $alt_col[0],
            # outline undef means ransparent outline
	    # if not specified defaults to black outline
	    -outline => undef ,
            -tags=> ['first']
		);
        $board{$letter.$num} = {tx=>$sq_x,ty=>$sq_y,bx=>$sq_x+49,by=>$sq_y+49};
	# add 50
	$sq_x += 50;          
    }
    # reset x to 0 for new row
    $sq_x = 0;
    # add 50 to y
    $sq_y += 50;
    print "\n";
}

# legenda
print "ty = top Y	tx = top X	by = bottom Y	bx = bottom X\n";

# dump board coordinates
foreach my $key (sort keys %board){
    print 	"$key -> ",
			( map{"$_ $board{$key}{$_} "} 
				reverse sort keys %{$board{$key}}
			),"\n";
}

$can->bind('first', '<1>', sub {&show_click();});
# uncomment if module is installed
# $mw->WidgetDump;
MainLoop;

sub show_click{
    my $ev = $can->XEvent;
    ($dx, $dy) = ($ev->x, $ev->y);
    print "CLICKED  $dx  $dy\n";
    my $cur_id = ($can->find('withtag','current'))[0];
    print "current canvas $cur_id\n\n";    
}



##</code><code>##

ty = top Y      tx = top X      by = bottom Y   bx = bottom X
A1 -> ty 0 tx 0 by 49 bx 49
A2 -> ty 0 tx 50 by 49 bx 99
B1 -> ty 50 tx 0 by 99 bx 49
B2 -> ty 50 tx 50 by 99 bx 99


##</code><code>##

# main canvas
width:	104
height:	99
reqwidth:	104
reqheight:	104

# squares coordinates dumped (from top left to bottom right) are:
0,0,49,49
50,0,99,49
0,50,49,99
50,50,99,99
# that reflect what I want