From a965706a359a035d2b966c630e6f879ba5a47028 Mon Sep 17 00:00:00 2001 From: Roy Date: Thu, 4 May 2023 03:23:09 +0200 Subject: [PATCH] Ondersteuning voor local storage. --- chess_gui/lib/chess_gui.pm | 96 ++++++++++++++---------- chess_gui/public/css/index.css | 4 + chess_gui/public/index.html | 1 + chess_gui/public/js/dand.js | 63 +++++++++++++++- chess_gui/public/js/head.js | 45 ++++++++++- chess_gui/views/{index.tt => index.html} | 9 ++- 6 files changed, 169 insertions(+), 49 deletions(-) create mode 120000 chess_gui/public/index.html rename chess_gui/views/{index.tt => index.html} (62%) diff --git a/chess_gui/lib/chess_gui.pm b/chess_gui/lib/chess_gui.pm index ed28fbb..8761410 100644 --- a/chess_gui/lib/chess_gui.pm +++ b/chess_gui/lib/chess_gui.pm @@ -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; diff --git a/chess_gui/public/css/index.css b/chess_gui/public/css/index.css index 261662f..e52f1fa 100644 --- a/chess_gui/public/css/index.css +++ b/chess_gui/public/css/index.css @@ -66,3 +66,7 @@ img { border-color: #884b10; border-color: #592b07; } + +#emptyx { + width: 40px; +} diff --git a/chess_gui/public/index.html b/chess_gui/public/index.html new file mode 120000 index 0000000..3938661 --- /dev/null +++ b/chess_gui/public/index.html @@ -0,0 +1 @@ +../views/index.html \ No newline at end of file diff --git a/chess_gui/public/js/dand.js b/chess_gui/public/js/dand.js index 8560f1b..b556c4d 100644 --- a/chess_gui/public/js/dand.js +++ b/chess_gui/public/js/dand.js @@ -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'} //}} - diff --git a/chess_gui/public/js/head.js b/chess_gui/public/js/head.js index 4ac12eb..58d9812 100644 --- a/chess_gui/public/js/head.js +++ b/chess_gui/public/js/head.js @@ -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. +} +} } } diff --git a/chess_gui/views/index.tt b/chess_gui/views/index.html similarity index 62% rename from chess_gui/views/index.tt rename to chess_gui/views/index.html index 5fba479..d19f302 100644 --- a/chess_gui/views/index.tt +++ b/chess_gui/views/index.html @@ -11,7 +11,11 @@
-
    1. A
    2. B
    3. C
    4. D
    5. E
    6. F
    7. G
    8. H
    [% FOREACH row IN board %]
    1. [% FOREACH object IN row %][% IF object.isPiece %]
    1. [% GET object.prettyName %] on [% GET object.pco %]
      2. [% ELSE %]
    2. [% END %][% END %]
    2. [% END %] +
      + +
      2. A
      3. B
      4. C
      5. D
      6. E
      7. F
      8. G
      9. H
      +
    +

    • Options
      • @@ -42,9 +46,8 @@

    - -
    +