Roy
/
chess-gui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ondersteuning voor local storage.

Browse Source
main
Roy 2 years ago
parent 73241fbfe7
commit a965706a35
6 changed files with 169 additions and 49 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 96
      chess_gui/lib/chess_gui.pm
  2. 4
      chess_gui/public/css/index.css
  3. 1
      chess_gui/public/index.html
  4. 63
      chess_gui/public/js/dand.js
  5. 45
      chess_gui/public/js/head.js
  6. 9
      chess_gui/views/index.html

96
chess_gui/lib/chess_gui.pm
Unescape View File

@ -77,8 +77,8 @@ my $counter;
my $action_limit = 100; my $action_limit = 100;
my $loop_limit = 6; my $loop_limit = 6;
my @direction = qw/1 1 1 -1 -1 -1 -1 1 0 1 0 -1 1 0 -1 0 0.5 2 0.5 -2 -0.5 -2 -0.5 2/; # Diagonal direction modifiers: $direction[0..7]. Straight direction modifiers: $direction[8..15]. Knight direction modifiers: $direction[0..7,16..23]. my @direction = qw/1 1 1 -1 -1 -1 -1 1 0 1 0 -1 1 0 -1 0 0.5 2 0.5 -2 -0.5 -2 -0.5 2/; # Diagonal direction modifiers: $direction[0..7]. Straight direction modifiers: $direction[8..15]. Knight direction modifiers: $direction[0..7,16..23].
my @default_iboard; #my @default_iboard;
#my %default_iboard; my %default_iboard;
my @session_iboard; my @session_iboard;
sub INTERRUPT { sub INTERRUPT {
$sth1->finish(); $sth1->finish();
@ -140,32 +140,42 @@ if ($#_ != -1) {
$player = 1; $player = 1;
} else { } else {
# $default_iboard[$y][$x] = $_; # $default_iboard[$y][$x] = $_;
$default_iboard[$y][$x]{'pco'} = join '', $px[$x], ($y+1); # $default_iboard[$y][$x]{'pco'} = join '', $px[$x], ($y+1);
$default_iboard{'pce'}[7-$x+8*$y] = undef;
$default_iboard{'pco'}[7-$x+8*$y] = join '', $px[7-$x], ($y+1);
next; next;
} }
if ($y*2 % 10 == 2) { # Pawn. if ($y*2 % 10 == 2) { # Pawn.
push @{$prop{$_}}, ($player, 'p', $x); push @{$prop{$_}}, ($player, 'p', $x);
$pval{join '', @{$prop{$_}}} = 0.001; $pval{join '', @{$prop{$_}}} = 0.001;
$default_iboard{'pce'}[7-$x+8*$y] = join '', ($player, 'p', 7-$x);
} elsif ($x % 7 == 0) { # Rook. } elsif ($x % 7 == 0) { # Rook.
push @{$prop{$_}}, ($player, 'r', $x / 7); push @{$prop{$_}}, ($player, 'r', $x / 7);
$pval{join '', @{$prop{$_}}} = 0.01; $pval{join '', @{$prop{$_}}} = 0.01;
$default_iboard{'pce'}[7-$x+8*$y] = join '', ($player, 'r', (7-$x) / 7);
} elsif ($x % 5 == 1) { # Knight. } elsif ($x % 5 == 1) { # Knight.
push @{$prop{$_}}, ($player, 'n', ($x-1) / 5); push @{$prop{$_}}, ($player, 'n', ($x-1) / 5);
$pval{join '', @{$prop{$_}}} = 0.01; $pval{join '', @{$prop{$_}}} = 0.01;
$default_iboard{'pce'}[7-$x+8*$y] = join '', ($player, 'n', (6-$x) / 5);
} elsif ($x == 3) { # Queen. } elsif ($x == 3) { # Queen.
push @{$prop{$_}}, ($player, 'q', 0); push @{$prop{$_}}, ($player, 'q', 0);
$pval{join '', @{$prop{$_}}} = 0.1; $pval{join '', @{$prop{$_}}} = 0.1;
$default_iboard{'pce'}[6-$x+8*$y] = join '', ($player, 'q', 0);
} elsif ($x == 4) { # King. } elsif ($x == 4) { # King.
push @{$prop{$_}}, ($player, 'k', 0); push @{$prop{$_}}, ($player, 'k', 0);
$pval{join '', @{$prop{$_}}} = '1'; # Instead of skipping if the allied king is taken in a branch, we can assign infinite value to the king. That doesn't work well with premature calculations, though, so we assign it (more than) the combined value of all other allied pieces at this point. $pval{join '', @{$prop{$_}}} = '1'; # Instead of skipping if the allied king is taken in a branch, we can assign infinite value to the king. That doesn't work well with premature calculations, though, so we assign it (more than) the combined value of all other allied pieces at this point.
$default_iboard{'pce'}[8-$x+8*$y] = join '', ($player, 'k', 0);
} else { # Bishop. } else { # Bishop.
push @{$prop{$_}}, ($player, 'b', $x % 2); push @{$prop{$_}}, ($player, 'b', $x % 2);
$pval{join '', @{$prop{$_}}} = 0.01; $pval{join '', @{$prop{$_}}} = 0.01;
$default_iboard{'pce'}[7-$x+8*$y] = join '', ($player, 'b', (7-$x) % 2);
} }
# if (exists($prop{$_})) {$default_iboard[$y][$x] = join '', @{$prop{$_}}} # if (exists($prop{$_})) {$default_iboard[$y][$x] = join '', @{$prop{$_}}}
# if (exists($prop{$_})) {$default_iboard[$y][$x]{'isPiece'} = 1; $default_iboard[$y][$x]{'value'} = join '', @{$prop{$_}}; $default_iboard[$y][$x]{'prettyName'} = join ' ', $pplayer[$prop{$_}[0]], $ppiece{$prop{$_}[1]}} else {$default_iboard[$y][$x]{'isPiece'} = 0; $default_iboard[$y][$x]{'value'} = undef}; # HoA for Template Toolkit. # if (exists($prop{$_})) {$default_iboard[$y][$x]{'isPiece'} = 1; $default_iboard[$y][$x]{'value'} = join '', @{$prop{$_}}; $default_iboard[$y][$x]{'prettyName'} = join ' ', $pplayer[$prop{$_}[0]], $ppiece{$prop{$_}[1]}} else {$default_iboard[$y][$x]{'isPiece'} = 0; $default_iboard[$y][$x]{'value'} = undef}; # HoA for Template Toolkit.
$default_iboard[$y][$x]{'isPiece'} = 1; $default_iboard[$y][$x]{'id'} = join '', @{$prop{$_}}; $default_iboard[$y][$x]{'img'} = join '', @{$prop{$_}}[0..1]; $default_iboard[$y][$x]{'prettyName'} = join ' ', $pplayer[$prop{$_}[0]], $ppiece{$prop{$_}[1]}; # HoA for Template Toolkit. # $default_iboard[$y][$x]{'isPiece'} = 1; $default_iboard[$y][$x]{'id'} = join '', @{$prop{$_}}; $default_iboard[$y][$x]{'img'} = join '', @{$prop{$_}}[0..1]; $default_iboard[$y][$x]{'prettyName'} = join ' ', $pplayer[$prop{$_}[0]], $ppiece{$prop{$_}[1]}; # HoA for Template Toolkit.
$default_iboard[$y][$x]{'pco'} = join '', $px[$x], ($y+1); # $default_iboard[$y][$x]{'pco'} = join '', $px[$x], ($y+1);
$default_iboard{'pco'}[7-$x+8*$y] = join '', $px[7-$x], ($y+1);
} else { # Restore a previous state (from a session). } else { # Restore a previous state (from a session).
$session_iboard[$y][$x] = $h1{$_} // $h0{$_} // $_; $session_iboard[$y][$x] = $h1{$_} // $h0{$_} // $_;
} }
@ -918,44 +928,54 @@ print 'b ', $id[0], ' ', $id[1], "\n";
#my $jar = HTTP::Cookies->new; #my $jar = HTTP::Cookies->new;
get '/board/init' => sub {
encode_json(\%default_iboard);
};
get '/move/:src/:dst' => sub { get '/move/:src/:dst' => sub {
if (session('init')) { #if (session('init')) {
my %diff = &PROGRAM(route_parameters->get('src'), route_parameters->get('dst'), session); # Includes player input. my %diff = &PROGRAM(route_parameters->get('src'), route_parameters->get('dst'), session); # Includes player input.
encode_json(\%diff); encode_json(\%diff);
} #}
}; };
any ['get', 'post'] => '/' => sub { get '/' => sub {
my $session = session; # TODO: I only want %{session}{'id'}. send_file '/index.html';
$session = %{$session}{'id'};
$sth11->execute($session);
print $session, "\n";
my @sth11 = $sth11->fetchrow_array();
print $#sth11, "\n";
if (session('init') or defined($sth11[0])) {
if (request->method() eq "POST") {
if (length(body_parameters->get('id')) == 1 and body_parameters->get('id') =~ m/\A[1-7]\z/) { # Sanitize user input (even if in a session).
my $setting_id = body_parameters->get('id');
redirect '/aaaaa';
}
} else {
# $sth8->execute($session); # TODO: The column name in the hash is without the table name, even if the SQL query includes table names for tables with the same column name (resulting in silently overwritten keys). Workaround with multiple queries.
$sth8->execute($sth11[1]);
$sth9->execute($sth11[0]);
# &INIT_BOARD($sth8->fetchrow_hashref(), $sth9->fetchrow_hashref()); # Complains about attempted modification of RO-value when a piece takes an enemy piece.
my $r1 = $sth8->fetchrow_hashref();
my $r2 = $sth9->fetchrow_hashref();
&INIT_BOARD($r1, $r2);
# $sth8->execute($session);
# my $hr = $sth8->fetchrow_hashref();
# &INIT_BOARD($hr);
template 'index' => {board => \@session_iboard};
}
} elsif (request->method() eq "GET") {
session 'init' => true;
#$jar->add_cookie_header($session);
template 'index' => {board => \@default_iboard};
}
}; };
#any ['get', 'post'] => '/' => sub {
# my $session = session; # TODO: I only want %{session}{'id'}.
# $session = %{$session}{'id'};
# $sth11->execute($session);
#print $session, "\n";
# my @sth11 = $sth11->fetchrow_array();
#print $#sth11, "\n";
# if (session('init') or defined($sth11[0])) {
# if (request->method() eq "POST") {
# if (length(body_parameters->get('id')) == 1 and body_parameters->get('id') =~ m/\A[1-7]\z/) { # Sanitize user input (even if in a session).
# my $setting_id = body_parameters->get('id');
# redirect '/aaaaa';
# }
# } else {
## $sth8->execute($session); # TODO: The column name in the hash is without the table name, even if the SQL query includes table names for tables with the same column name (resulting in silently overwritten keys). Workaround with multiple queries.
# $sth8->execute($sth11[1]);
# $sth9->execute($sth11[0]);
## &INIT_BOARD($sth8->fetchrow_hashref(), $sth9->fetchrow_hashref()); # Complains about attempted modification of RO-value when a piece takes an enemy piece.
# my $r1 = $sth8->fetchrow_hashref();
# my $r2 = $sth9->fetchrow_hashref();
# &INIT_BOARD($r1, $r2);
## $sth8->execute($session);
## my $hr = $sth8->fetchrow_hashref();
## &INIT_BOARD($hr);
# template 'index' => {board => \@session_iboard};
# }
# } elsif (request->method() eq "GET") {
# session 'init' => true;
##$jar->add_cookie_header($session);
## template 'index' => {board => \@default_iboard};
# send_file '/index.html';
# }
#};
#true; #true;

4
chess_gui/public/css/index.css
Unescape View File

@ -66,3 +66,7 @@ img {
border-color: #884b10; border-color: #884b10;
border-color: #592b07; border-color: #592b07;
} }
#emptyx {
width: 40px;
}

1
chess_gui/public/index.html
Unescape View File

@ -0,0 +1 @@
../views/index.html

63
chess_gui/public/js/dand.js
Unescape View File

@ -5,15 +5,55 @@ var xhr = new XMLHttpRequest();
//var e = document.createElement('li'); //var e = document.createElement('li');
//var f = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']; //var f = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
var d = document.createElement('dl'); var d = document.createElement('dl');
var pn = {b:'bishop',k:'king',q:'queen',n:'knight',p:'pawn',r:'rook'};
var pp = ['White','Black'];
for (b=0; C('coord').length > b; b++) {C('coord')[b].onmousedown = function () { //x = 25;
//console.log(x.toString(36));
if (!window.localStorage || !localStorage.init) { // Use AJAX.
console.log(localStorage.length);
var xhr = new XMLHttpRequest();
xhr.open('GET', 'board/init' , true); // Returns coordinate & piece.
xhr.send(null);
xhr.onload = function () {
if (xhr.status === 200) {
responseObject = JSON.parse(xhr.responseText);
var ol;
var array = [];
for (var i=0; responseObject.pco.length > i; i++) {
array.push(responseObject.pco[i], responseObject.pce[i]);
G(i, responseObject.pco[i], responseObject.pce[i]);
}
localStorage.init = [array];
}
}
} else { // Use localStorage.
var ol;
var javascript = localStorage.init.split(','); // TODO: There should be a cleaner way to store/retrieve multidimensional data structures in localStorage.
for (var i=j=0; javascript.length > j; j += 2) {
//if (!localStorage.getItem(javascript[j+1])) {
if (localStorage.getItem(javascript[j]) === null && !localStorage.getItem(javascript[j+1]) && (javascript[j+1] === '' || I(javascript[j+1]) === null)) {
G(i, javascript[j], javascript[j+1]);
} else {
//console.log(javascript[j], localStorage.getItem(javascript[j]));
G(i, javascript[j], localStorage.getItem(javascript[j]), 1);
}
//}
i++;
}
}
onload = function () {
for (var b=0; C('coord').length > b; b++) {C('coord')[b].onmousedown = function () {
event.preventDefault(); event.preventDefault();
drag = this.id; drag = this.id;
}} }}
}
for (c=0; C('coord').length > c; c++) {C('coord')[c].onmouseup = function () { for (var c=0; C('coord').length > c; c++) {C('coord')[c].onmouseup = function () {
drop = this.id; drop = this.id;
console.log(this.id); //console.log(this.id);
if (drag.length === 2 && drop.length === 2) { // Shouldn't rely on legal input here. if (drag.length === 2 && drop.length === 2) { // Shouldn't rely on legal input here.
xhr.open('GET', 'move/' + drag + '/' + drop , true); xhr.open('GET', 'move/' + drag + '/' + drop , true);
xhr.send(null); xhr.send(null);
@ -22,6 +62,22 @@ if (xhr.status === 200) {
responseObject = JSON.parse(xhr.responseText); responseObject = JSON.parse(xhr.responseText);
//if (responseObject.White.status.length === 2 && responseObject.Black.status.length === 2) {} //if (responseObject.White.status.length === 2 && responseObject.Black.status.length === 2) {}
if (responseObject.White.status[1] === 0 && responseObject.Black.status[1] === 0) { // Legal move(s)? if (responseObject.White.status[1] === 0 && responseObject.Black.status[1] === 0) { // Legal move(s)?
localStorage.removeItem(responseObject.White.src[0]);
localStorage.setItem(responseObject.White.dst[0], responseObject.White.src[1]);
localStorage.removeItem(responseObject.Black.src[0]);
localStorage.setItem(responseObject.Black.dst[0], responseObject.Black.src[1]);
//localStorage.setItem(responseObject.White.src[1], responseObject.White.dst[0]);
//localStorage.setItem(responseObject.Black.src[1], responseObject.Black.dst[0]);
if (responseObject.White.dst[1]) {
localStorage.setItem(responseObject.White.dst[1], undefined);
//localStorage.removeItem(responseObject.White.dst[1]);
}
if (responseObject.Black.dst[1]) {
localStorage.setItem(responseObject.Black.dst[1], undefined);
//localStorage.removeItem(responseObject.Black.dst[1]);
}
//if (responseObject.White.status[5] === 1) { // Won? //if (responseObject.White.status[5] === 1) { // Won?
//} //}
//I(drag).setAttribute('src', 'i/' + responseObject.White.src[0] + '.png'); //I(drag).setAttribute('src', 'i/' + responseObject.White.src[0] + '.png');
@ -123,4 +179,3 @@ d.appendChild(li);
//if (drag !== null && drag !== undefined) {console.log(this.x + '.' + this.y)} //if (drag !== null && drag !== undefined) {console.log(this.x + '.' + this.y)}
//if (drag !== null && drag !== undefined) {I(this.id).style.position = 'absolute'; I(this.id).style.left = this.x + 'px'; I(this.id).style.up = this.y + 'px'} //if (drag !== null && drag !== undefined) {I(this.id).style.position = 'absolute'; I(this.id).style.left = this.x + 'px'; I(this.id).style.up = this.y + 'px'}
//}} //}}

45
chess_gui/public/js/head.js
Unescape View File

@ -10,9 +10,46 @@ function T(a) {
return document.getElementsByTagName(a); return document.getElementsByTagName(a);
} }
if (window.localStorage) { function G(i, s, o, r) {
var m = C('coord'); if (i % 8 === 0) {
if (m.length === 64) { var li = document.createElement('li');
ol = document.createElement('ol');
I('y-co').appendChild(li);
li.appendChild(ol);
}
var li = document.createElement('li');
li.setAttribute('id', s);
if (null === o || undefined === o || '' === o) {
li.setAttribute('class', 'coord empty');
ol.appendChild(li);
} else {
li.setAttribute('class', 'coord piece');
ol.appendChild(li);
if (r === undefined) {
var img = document.createElement('img');
var prop = o.substring(1, 2);
img.setAttribute('id', o);
img.setAttribute('src', 'i/' + o.substring(0, 2) + '.png');
img.setAttribute('alt', pp[o.substring(0, 1)] + ' ' + pn[prop] + ' on ' + s);
li.appendChild(img);
} else {
var pce = I(o);
console.log(i, s, o, pce, r);
if (pce === null) {
var img = document.createElement('img');
var prop = o.substring(1, 2);
img.setAttribute('id', o);
img.setAttribute('src', 'i/' + o.substring(0, 2) + '.png');
img.setAttribute('alt', pp[o.substring(0, 1)] + ' ' + pn[prop] + ' on ' + s);
li.appendChild(img);
} else {
var salt = pce.getAttribute('alt');
salt = salt.substring(0, salt.length-2) + s;
pce.setAttribute('alt', salt);
var srci = pce.parentNode.innerHTML; // Duplicate.
pce.parentNode.innerHTML = ''; // Remove.
li.innerHTML = srci; // Add.
}
}
} }
} }

9
chess_gui/views/index.tt → chess_gui/views/index.html
Unescape View File

@ -11,7 +11,11 @@
</head> </head>
<body> <body>
<section id="board"> <section id="board">
<ol id="y-co"><ol id="x-co"><li class="x-co">A</li><li class="x-co">B</li><li class="x-co">C</li><li class="x-co">D</li><li class="x-co">E</li><li class="x-co">F</li><li class="x-co">G</li><li class="x-co">H</li></ol>[% FOREACH row IN board %]<li><ol>[% FOREACH object IN row %][% IF object.isPiece %]<li id="[% GET object.pco %]" class="coord piece"><img id="[% GET object.id %]" src="i/[% GET object.img %].png" alt="[% GET object.prettyName %] on [% GET object.pco %]" width="32px"></li>[% ELSE %]<li id="[% GET object.pco %]" class="coord empty"></li>[% END %][% END %]</ol></li>[% END %] <ol id="y-co"></ol>
<!-- [% FOREACH row IN board %]<li><ol>[% FOREACH object IN row %][% IF object.isPiece %]<li id="[% GET object.pco %]" class="coord piece"><img id="[% GET object.id %]" src="i/[% GET object.img %].png" alt="[% GET object.prettyName %] on [% GET object.pco %]" width="32px"></li>[% ELSE %]<li id="[% GET object.pco %]" class="coord empty"></li>[% END %][% END %]</ol></li>[% END %] -->
<ol id="x-co"><li id="emptyx" class="x-co"></li><li class="x-co">A</li><li class="x-co">B</li><li class="x-co">C</li><li class="x-co">D</li><li class="x-co">E</li><li class="x-co">F</li><li class="x-co">G</li><li class="x-co">H</li></ol>
</section>
<section>
<h3> <h3>
<ul class="features"> <ul class="features">
<li>Options</li> <li>Options</li>
@ -42,9 +46,8 @@
</ul> </ul>
</ul> </ul>
</h3> </h3>
</ol>
</section> </section>
<!--</ol>-->
<script type="text/javascript" src="js/dand.js"></script> <script type="text/javascript" src="js/dand.js"></script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save