Ondersteuning voor local storage.

main
Roy 2 years ago
parent 73241fbfe7
commit a965706a35
  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

@ -77,8 +77,8 @@ my $counter;
my $action_limit = 100;
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 @default_iboard;
#my %default_iboard;
#my @default_iboard;
my %default_iboard;
my @session_iboard;
sub INTERRUPT {
$sth1->finish();
@ -140,32 +140,42 @@ if ($#_ != -1) {
$player = 1;
} else {
# $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;
}
if ($y*2 % 10 == 2) { # Pawn.
push @{$prop{$_}}, ($player, 'p', $x);
$pval{join '', @{$prop{$_}}} = 0.001;
$default_iboard{'pce'}[7-$x+8*$y] = join '', ($player, 'p', 7-$x);
} elsif ($x % 7 == 0) { # Rook.
push @{$prop{$_}}, ($player, 'r', $x / 7);
$pval{join '', @{$prop{$_}}} = 0.01;
$default_iboard{'pce'}[7-$x+8*$y] = join '', ($player, 'r', (7-$x) / 7);
} elsif ($x % 5 == 1) { # Knight.
push @{$prop{$_}}, ($player, 'n', ($x-1) / 5);
$pval{join '', @{$prop{$_}}} = 0.01;
$default_iboard{'pce'}[7-$x+8*$y] = join '', ($player, 'n', (6-$x) / 5);
} elsif ($x == 3) { # Queen.
push @{$prop{$_}}, ($player, 'q', 0);
$pval{join '', @{$prop{$_}}} = 0.1;
$default_iboard{'pce'}[6-$x+8*$y] = join '', ($player, 'q', 0);
} elsif ($x == 4) { # King.
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.
$default_iboard{'pce'}[8-$x+8*$y] = join '', ($player, 'k', 0);
} else { # Bishop.
push @{$prop{$_}}, ($player, 'b', $x % 2);
$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]{'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]{'pco'} = join '', $px[$x], ($y+1);
# $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{'pco'}[7-$x+8*$y] = join '', $px[7-$x], ($y+1);
} else { # Restore a previous state (from a session).
$session_iboard[$y][$x] = $h1{$_} // $h0{$_} // $_;
}
@ -918,44 +928,54 @@ print 'b ', $id[0], ' ', $id[1], "\n";
#my $jar = HTTP::Cookies->new;
get '/board/init' => sub {
encode_json(\%default_iboard);
};
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.
encode_json(\%diff);
}
#}
};
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};
}
get '/' => sub {
send_file '/index.html';
};
#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;

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

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

@ -5,15 +5,55 @@ var xhr = new XMLHttpRequest();
//var e = document.createElement('li');
//var f = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
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();
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;
console.log(this.id);
//console.log(this.id);
if (drag.length === 2 && drop.length === 2) { // Shouldn't rely on legal input here.
xhr.open('GET', 'move/' + drag + '/' + drop , true);
xhr.send(null);
@ -22,6 +62,22 @@ if (xhr.status === 200) {
responseObject = JSON.parse(xhr.responseText);
//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)?
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?
//}
//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) {I(this.id).style.position = 'absolute'; I(this.id).style.left = this.x + 'px'; I(this.id).style.up = this.y + 'px'}
//}}

@ -10,9 +10,46 @@ function T(a) {
return document.getElementsByTagName(a);
}
if (window.localStorage) {
var m = C('coord');
if (m.length === 64) {
function G(i, s, o, r) {
if (i % 8 === 0) {
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.
}
}
}
}

@ -11,7 +11,11 @@
</head>
<body>
<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>
<ul class="features">
<li>Options</li>
@ -42,9 +46,8 @@
</ul>
</ul>
</h3>
</ol>
</section>
<!--</ol>-->
<script type="text/javascript" src="js/dand.js"></script>
</body>
</html>
Loading…
Cancel
Save