Improve movelog, add status messages, and fix incorrect insertion of prio(rity) entries (post-game).

chess_gui/lib/chess_gui.pm

@@ -680,7 +680,7 @@ sub POSTCHESS_CALC {
 my ($pval, $called_player, $reason, $session) = @_; # Arguments: (Value of all pieces of $player - $not_player[$player], $player, reason for exiting the game (did a $player win?)).
     foreach my $current_player (@player) {
         my $mpval;
-        my $sth4 = $dbh->prepare(q/UPDATE context SET /.$pplayer[$not_player[$current_player]].q/prio = ? FROM black, white WHERE black.id = bid and white.id = wid and white.b0 = ? and white.b1 = ? and white.k0 = ? and white.n0 = ? and white.n1 = ? and white.p0 = ? and white.p1 = ? and white.p2 = ? and white.p3 = ? and white.p4 = ? and white.p5 = ? and white.p6 = ? and white.p7 = ? and white.q0 = ? and white.r0 = ? and white.r1 = ? and black.b0 = ? and black.b1 = ? and black.k0 = ? and black.n0 = ? and black.n1 = ? and black.p0 = ? and black.p1 = ? and black.p2 = ? and black.p3 = ? and black.p4 = ? and black.p5 = ? and black.p6 = ? and black.p7 = ? and black.q0 = ? and black.r0 = ? and black.r1 = ?/);
+        my $sth4 = $dbh->prepare(q/UPDATE context SET /.$pplayer[$current_player].q/prio = ? FROM black, white WHERE black.id = bid and white.id = wid and white.b0 = ? and white.b1 = ? and white.k0 = ? and white.n0 = ? and white.n1 = ? and white.p0 = ? and white.p1 = ? and white.p2 = ? and white.p3 = ? and white.p4 = ? and white.p5 = ? and white.p6 = ? and white.p7 = ? and white.q0 = ? and white.r0 = ? and white.r1 = ? and black.b0 = ? and black.b1 = ? and black.k0 = ? and black.n0 = ? and black.n1 = ? and black.p0 = ? and black.p1 = ? and black.p2 = ? and black.p3 = ? and black.p4 = ? and black.p5 = ? and black.p6 = ? and black.p7 = ? and black.q0 = ? and black.r0 = ? and black.r1 = ?/);
         if ($reason == 0) { # Stalemate. Various causes.
             if ($current_player == 0) {
                 $mpval = -1; # Try out other selections (if the next game is similar) for benefit of player 1. #TODO: Remove in production.
@@ -704,16 +704,17 @@ my ($pval, $called_player, $reason, $session) = @_; # Arguments: (Value of all p
                 }
             }
         }
-        foreach my $anothervar (keys %{$what_i_did{$session}[$current_player]}) {
+        foreach my $match_keys (keys %{$what_i_did{$session}[$current_player]}) {
-            $what_i_did{$session}[$current_player]{$anothervar} += $mpval;
+            $what_i_did{$session}[$current_player]{$match_keys} += $mpval;
-            $sth4->execute($what_i_did{$session}[$current_player]{$anothervar}, @keys);
+            my @keys = map {$_ eq '' ? $_ = undef : $_} split /,/, $match_keys;
+            $sth4->execute($what_i_did{$session}[$current_player]{$match_keys}, @keys);
         }
     }
-    #undef %what_i_did{$session};
+    undef $what_i_did{$session};
-    #undef %user_mode{$session};
+    undef $user_mode{$session};
-    #undef %player_turn{$session};
+    undef $player_turn{$session};
-    #undef %counter{$session};
+    undef $counter{$session};
-    #undef %pseudoinfinite_loop_check{$session};
+    undef $pseudoinfinite_loop_check{$session};
 }
 
 sub PROGRAM {
@@ -758,7 +759,7 @@ $user_mode{$_[2]} = 0;
                     if (!defined($ids[0])) { # Default state.
                     %prop = %default_prop;
                     @keys = @default_keys;
-                    } else { # Restore arbitrary states.
+                    } else { # Restore arbitrary states. TODO: OO-approach (for each session a board w/ expiry (at which point we'll flush to the DB (if it weren't for localStorage))).
                     $sth8->execute($ids[1]);
                     $sth9->execute($ids[0]);
                     &CLEANUP_POSTGAME;
@@ -883,7 +884,7 @@ $user_mode{$_[2]} = 0;
 #            push @{$diff{$pplayer[$player]}{'moveno'}}, ($ice+1) . '/' . $n_o_selections;
 #            @{$diff{'msg'}{'verbose'}}[$player] = $selection[$ice];
 
-            $what_i_did{$_[2]}[$player]{$selection} = $prio;
+            $what_i_did{$_[2]}[$player]{$selection} = $prio if $prio != 'Inf';
             my $c = 0;
             my $adest;
             foreach (split /,/, $selection) {

chess_gui/public/css/index.css

@@ -1,3 +1,5 @@
+/* (C) Roy van Lunsen */
+
 a {
     display: block;
     text-decoration: none;
@@ -14,10 +16,15 @@ ol > li li {
 
 #y-co {
     display: flex;
-    flex-flow: column-reverse;
+    flex-flow: column-reverse; /* Order depends on player side #1/3 */
     width: max-content;
 }
 
+.x-row {
+    display: flex;
+    flex-flow: row; /* Order depends on player side #2/3 */
+}
+
 #x-co {
     display: inline-flex;
     flex-flow: row;
@@ -70,3 +77,50 @@ img {
 #emptyx {
     width: 40px;
 }
+
+dl {
+    display: flex;
+    flex-flow: column-reverse;
+    max-height: 50vh;
+    width: max-content;
+    overflow-y: scroll;
+    scrollbar-width: thin;
+}
+
+dl li {
+    display: flex;
+    flex-flow: column-reverse; /* Order depends on player side #3/3 */
+}
+
+figure {
+    display: flex;
+    flex-flow: row;
+    margin-top: 0.1em;
+    margin-bottom: 0.1em;
+}
+
+figure img {
+    height: 20px;
+    padding: 1px;
+}
+
+.white {
+    background-color: white;
+    color: black;
+}
+
+.black {
+    background-color: black;
+    color: white;
+}
+
+/*img.black, img.white {*/
+/*    border-width: 1px;*/
+/*    border-color: red;*/
+/*}*/
+
+dd.noimg { /* Display text of <dd> and <dt> at the same height when there's no image in <dd> */
+    display: flex;
+    flex-wrap: wrap;
+    align-content: end;
+}

chess_gui/public/js/dand.js

@@ -1,9 +1,18 @@
+// (C) Roy van Lunsen
+
 var xhr = new XMLHttpRequest();
+var h1 = document.createElement('h1');
+var h2 = document.createElement('h2');
+var count = 1;
 //var e = document.createElement('li');
 //var f = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
 var d = document.createElement('dl');
+//var ol = document.createElement('ol');
 var pn = {b:'bishop',k:'king',q:'queen',n:'knight',p:'pawn',r:'rook'};
 var pp = ['White','Black'];
+var statusm = ['Your turn','Opponent\'s turn','Suggestion','You failed in deceiving your opponent.','You won','You lost','Stalemate','Confirmation','Notice','Connection lost','You resigned','Opponent resigned','Server maintenance'];
+var nrsuffix = ['st', 'nd', 'rd'];
+var defsuffix = 'th';
 
 //x = 25;
 //console.log(x.toString(36));
@@ -45,11 +54,70 @@ i++;
 function dragAndDrop(drag, drop) {
 xhr.open('GET', 'move/' + drag + '/' + drop + '/' + localStorage.state, true);
 xhr.send(null);
+
+var h1TN = statusm[1];
+var h2TN = statusm[2];
+h2.innerHTML = h2TN;
+document.body.insertBefore(h2, I('board'));
+h1.innerHTML = h1TN;
+document.body.insertBefore(h1, h2);
+
 xhr.onload = function () {
 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)?
+count = 1;
+if (responseObject.White.status.length === 6) {
+if (responseObject.White.status[5] === 4) {
+var h1TN = statusm[6];
+var h2TN = 'Only kings can act.';
+} else if (responseObject.White.status[5] === 3) {
+var h1TN = statusm[6];
+var h2TN = 'Turn limit exceeded.';
+} else if (responseObject.White.status[5] === 2) {
+var h1TN = statusm[6];
+var h2TN = 'Loop limit exceeded.';
+} else if (responseObject.White.status[5] === 1) {
+var h1TN = statusm[4];
+var h2TN = 'White took your king.';
+}
+} else {
+var h1TN = statusm[0];
+var h2TN = statusm[2];
+}
+h2.innerHTML = h2TN;
+document.body.insertBefore(h2, I('board'));
+h1.innerHTML = h1TN;
+document.body.insertBefore(h1, h2);
+
+if (responseObject.Black.status.length === 6) {
+if (responseObject.Black.status[5] === 4) {
+var h1TN = statusm[6];
+var h2TN = 'Only kings can act.';
+} else if (responseObject.Black.status[5] === 3) {
+var h1TN = statusm[6];
+var h2TN = 'Turn limit exceeded.';
+} else if (responseObject.Black.status[5] === 2) {
+var h1TN = statusm[6];
+var h2TN = 'Loop limit exceeded.';
+} else if (responseObject.Black.status[5] === 1) {
+var h1TN = statusm[5];
+var h2TN = 'Black took your king.';
+}
+h2.innerHTML = h2TN;
+document.body.insertBefore(h2, I('board'));
+h1.innerHTML = h1TN;
+document.body.insertBefore(h1, h2);
+}
+// else {
+//var h1TN = statusm[1];
+//var h2TN = statusm[2];
+//}
+//h2.innerHTML = h2TN;
+//document.body.insertBefore(h2, I('board'));
+//h1.innerHTML = h1TN;
+//document.body.insertBefore(h1, h2);
+
 localStorage.removeItem(responseObject.White.src[0]);
 localStorage.setItem(responseObject.White.dst[0], responseObject.White.src[1]);
 localStorage.removeItem(responseObject.Black.src[0]);
@@ -97,24 +165,27 @@ var srci = I(responseObject.Black.src[0]).innerHTML; // Duplicate.
 I(responseObject.Black.src[0]).innerHTML = ''; // Remove.
 I(responseObject.Black.dst[0]).innerHTML = srci; // Add.
 
-if (responseObject.White.status[0] === 1) { // black.status[0] should be 1, too.
+if (responseObject.White.status[0] === 1) { // TODO: Replace for a (temporary) session flag whether initialized (more reliable). Also: Shall we store the move history in localStorage?
+//ol.setAttribute('id', 'moves');
 var section = document.createElement('section');
 section.setAttribute('id', 'log');
 document.body.insertBefore(section, T('script')[1]);
 //d = document.createElement('ol');
 section.appendChild(d);
+//d.appendChild(ol);
 }
 var li = document.createElement('li');
 var dt = document.createElement('dt');
 var figure = document.createElement('figure');
+figure.setAttribute('class', 'white');
 var i = document.createElement('img');
 var figcaption = document.createElement('figcaption');
 var dd = document.createElement('dd');
 d.appendChild(li);
 li.appendChild(figure);
 i.setAttribute('src', 'i/' + responseObject.White.src[1].substring(0, 2) + '.png');
-figure.appendChild(i);
 figure.appendChild(dt);
+dt.appendChild(i);
 //e.setAttribute('class', 'movement');
 //d = document.createElement('img');
 //d.setAttribute('class', 'ooc');
@@ -128,28 +199,70 @@ dt.appendChild(figcaption);
 //dd.appendChild(document.createTextNode(f[Math.floor(responseObject.White.src[0])] + ((responseObject.White.src[0]) * 10 + 1 - Math.floor(responseObject.White.src[0]) * 10))); // Convert x-coordinate to the chess' counterpart (while avoiding (inaccurate) floats).
 //var dd2 = document.createElement('dd');
 //dd.setAttribute('class', 'new');
+if (responseObject.White.dst.length === 2) {
+var i = document.createElement('img');
+i.setAttribute('class', 'black');
+var figcaption = document.createElement('figcaption');
+i.setAttribute('src', 'i/' + responseObject.White.dst[1].substring(0, 2) + '.png');
+figure.appendChild(dd);
+dd.appendChild(i);
+dd.appendChild(figcaption);
+figcaption.appendChild(document.createTextNode(responseObject.White.dst[0]));
+} else {
+dd.setAttribute('class', 'noimg');
 figure.appendChild(dd);
 //dd.appendChild(document.createTextNode(f[responseObject.White.dst[0])] + ((responseObject.White.dst[0]) * 10 + 1 - Math.floor(responseObject.White.dst[0]) * 10)));
 dd.appendChild(document.createTextNode(responseObject.White.dst[0]));
+}
 d.appendChild(li);
 
 var dt = document.createElement('dt');
 var figure = document.createElement('figure');
+figure.setAttribute('class', 'black');
 var i = document.createElement('img');
 var figcaption = document.createElement('figcaption');
 var dd = document.createElement('dd');
 
 li.appendChild(figure);
 i.setAttribute('src', 'i/' + responseObject.Black.src[1].substring(0, 2) + '.png');
-figure.appendChild(i);
 figure.appendChild(dt);
+dt.appendChild(i);
 //figcaption.appendChild(document.createTextNode(f[Math.floor(responseObject.Black.src[0])] + ((responseObject.Black.src[0]) * 10 + 1 - Math.floor(responseObject.Black.src[0]) * 10)));
 figcaption.appendChild(document.createTextNode(responseObject.Black.src[0]));
 dt.appendChild(figcaption);
+if (responseObject.Black.dst.length === 2) {
+var i = document.createElement('img');
+i.setAttribute('class', 'white');
+var figcaption = document.createElement('figcaption');
+i.setAttribute('src', 'i/' + responseObject.Black.dst[1].substring(0, 2) + '.png');
+figure.appendChild(dd);
+dd.appendChild(i);
+dd.appendChild(figcaption);
+figcaption.appendChild(document.createTextNode(responseObject.Black.dst[0]));
+} else {
+dd.setAttribute('class', 'noimg');
 figure.appendChild(dd);
 //dd.appendChild(document.createTextNode(f[Math.floor(responseObject.Black.dst[0])] + ((responseObject.Black.dst[0]) * 10 + 1 - Math.floor(responseObject.Black.dst[0]) * 10)));
 dd.appendChild(document.createTextNode(responseObject.Black.dst[0]));
+}
 d.appendChild(li);
+} else {
+var h1TN = statusm[0];
+h1.innerHTML = h1TN;
+document.body.insertBefore(h1, h2);
+var h2TN = statusm[3];
+if (count > 1) {
+if (count > 3) {
+var suffix = defsuffix;
+} else {
+var suffix = nrsuffix[count-1];
+}
+h2.innerHTML = h2TN + ' for the ' + count + '<sup>' + suffix + '</sup>' + ' time.';
+} else {
+h2.innerHTML = h2TN;
+}
+document.body.insertBefore(h2, I('board'));
+count++;
 }
 // TODO: Display status and/or sleep.
 //I('title').innerHTML = responseObject.Black.src[1] + ' moves from ' + responseObject.Black.src[0] + ' to ' + responseObject.Black.dst[0];
@@ -157,6 +270,13 @@ d.appendChild(li);
 //I('description').innerHTML = 'Turn ' + responseObject.White.status.length + ' of white.';
 //I('title').innerHTML = responseObject.Black.status[0];
 //I('description').innerHTML = responseObject.Black.status[1];
+} else {
+var h1TN = statusm[8];
+var h2TN = statusm[9];
+h2.innerHTML = h2TN;
+document.body.insertBefore(h2, I('board'));
+h1.innerHTML = h1TN;
+document.body.insertBefore(h1, h2);
 }
 }
 }

chess_gui/public/js/head.js

@@ -1,3 +1,5 @@
+// (C) Roy van Lunsen
+
 function I(a) {
         return document.getElementById(a);
 }

chess_gui/views/index.html

@@ -10,11 +10,8 @@
 <title>Game of chess</title>
 </head>
 <body>
-<section id="board">
+<h1>New game</h1>
-<ol id="y-co"></ol>
+<h2>Replays</h2>
-<!-- [% 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">
@@ -47,6 +44,11 @@
 </ul>
 </h3>
 </section>
+<section id="board">
+<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>
 <!--</ol>-->
 <script type="text/javascript" src="js/dand.js"></script>
 </body>