mersenneforum.org A Simple JavaScript Chess GUI
 User Name Remember Me? Password
 Register FAQ Search Today's Posts Mark Forums Read

2019-06-29, 05:14   #1
ewmayer
2ω=0

Sep 2002
República de California

3·29·113 Posts
A Simple JavaScript Chess GUI

This past week I've been taking a break from Mlucas coding work to pick up work on a little side project I took up over 10 years ago and have worked on occasionally since, a Javascript-based Chess GUI. Started it in order to teach myself the rudiments of JS coding, so experienced JS hands, please try not to laugh too hard at the code. :) There's no underlying algorithmic move-generating engine, perhaps eventually it could be hooked up to a freeware chess program. For now I find it useful to use when playing against my Mac's built-in Chess app, with its (to me) fugly UI, screenshotted below. It also has red-highlighting for unprotected pieces subject to next-move capture (that will eventually be made togglable), a very useful simple tool for a godawful Patzer like myself. It's a kind of visual-baed programming which makes for a nice break from computational number theory.

'tar xjf Mchess.tar.bz2' the tarball attachment, then open the html file therein in your favorite browser - I've only recently-tested under FF, but the JS is simple enough that I hope it's decently portable. To move a piece, click on the piece to highlight, then click on the destination square.

The current round of coding has been centered on adding algebraic-move-notation screen output - I've so far only managed to ugly-hack this as you will see, would really like a nicer 2-column (one for white, one for black) format but have not found a way to put such output to the right of the board display - help here would be appreciated.

Other future adds include ability to read a 'canned' game in algebraic notation from a text file, a move timer, etc.

Bug reports and add suggestions welcome! Hopefully those will be at least similar in number to video clips of users pointing at their browser display and laughing their butts off.
Attached Thumbnails

Attached Files
 Mchess.tar.bz2 (32.4 KB, 67 views)

Last fiddled with by ewmayer on 2019-07-25 at 22:53 Reason: Updated code as described in post #9; md5 = b53ba0c7423858906b72d4216ffad4bb

2019-07-05, 09:53   #2
lavalamp

Oct 2007
London, UK

5×263 Posts

Quote:
 Originally Posted by ewmayer The current round of coding has been centered on adding algebraic-move-notation screen output - I've so far only managed to ugly-hack this as you will see, would really like a nicer 2-column (one for white, one for black) format but have not found a way to put such output to the right of the board display - help here would be appreciated.
The way you currently have it, couldn't you just add another <td> for each line of the output? That would be an instant 2 column table for white/black moves.

The more modern CSS way would be to use a grid layout structure, where you could specify a two column layout of boxes, you could then add a box to the log after each move with JavaScript and it would be automagically fixed to the grid.

You can add HTML code to the page with JavaScript by doing something like the following:
Code:
document.getElementById("gamelog").innerHTML += "<p>1.c4</p>"
Edit: An simple example of a 3 column grid layout is here:
https://gridbyexample.com/examples/example1/

Many more examples here: https://gridbyexample.com/examples/ and a fairly decent guide to grid layouts here: https://css-tricks.com/snippets/css/...te-guide-grid/

Similarly, I would use a grid layout for the chess board, it would be easy to specify an 8x8 grid, populate it with 64 <div> elements, then walk along it with the DOM in JavaScript to alter them as needed. With some nice CSS rules, you could then set the background pictures of the cells according to the pieces and states of the game.

The CSS selectors :nth-child(even) and :nth-child(odd) would let you colour the board appropriately. If you then had a class for each piece, you could set the appropriate background picture for that and modify the div class property with JavaScript as needed, then further if you had classes for "selected" and "attacked" you could change the background position to reveal the appropriate image for those. That last trick is known as CSS image sprites, and requires you stitch the images together into one, like this:
https://www.tutorialrepublic.com/css...ss-sprites.php

Last fiddled with by lavalamp on 2019-07-05 at 10:01

 2019-07-06, 20:56 #3 ewmayer ∂2ω=0     Sep 2002 República de California 3·29·113 Posts Lavalamp, many thanks for the layout tips and references ... it's clear there's gonna be a major round of layout-code changes coming up. In the meantime, however, I been fixing bugs and adding more stuff to the game-play JS code: o Refined unprotected-piece highlighting: if player A gives check, only A's pieces which are eligible for unprotected-highlighting are those giving check. (Non-checking pieces protected by virtue of opponent needing to get out of check before doing anything else.) o Fixed several bugs in algebraic notation related to move disambiguation and pawn promotion. o Pawn promotion now must be to R,B,N, or Q. (Previously, 'promotion' to pawn was allowed.) o Several incorrect uses of Number() cast removed, in cases where string type is desired. The above source-tarball has been updated to reflect those fixes and also has some code I'm currently trying to debug, related to the new algebraic-notation support: One thing it's clear is desirable from both a regular-user and debug perspective is the ability for the user to enter a partial or complete stored game in algebraic-notation form. Past couple days I added basic support for that, but in my simple tests & debug have hit a weird issue that currently has me stumped. Specifically, after putting in place the basic new enter_game() functio, testing it one some simple pawn-only openings and preparing to add the code needed to move the other pieces in accordance with such a replay log, I realized that before parsing such a user-entered game log, I should first call the board_reset() function. As soon as I added a call to that function to the enter_game() function, the latter stopped working. Here's how to see the problem: E.g. in Firefox, Tools -> Web developer -> Debugger, click on the Mchess.js source file name, scroll down and set breakpoints at lines 265 and 1298, the call to board_reset() from enter_game() and the return statement at the end of board_reset(), respectively (The latter explicit return is unneeded and not present in the original version of the code I posted here, I added it as a handy place to set a breakpoint). Then over in the gameboard click "Enter Game" and load a simple 2-move opening, say "1.d4 d5". (No quotes in what you actually enter.) Entering , what you'll see happen in the debugger is this: You hit the bp at the call to board_reset() at line 265. F7, "step over" (you may have to hit this several times, not sure why), should cause that call to get made and return execution to line 266, at which point resume-execution (F6) should cause the entered 2-pawn-moves game to be reflected in the game board, but nothing happens - for some reason the call to board_reset() from enter_game() causes the latter function to immediately exit. Now open Mchess.js in an editor and comment out the 3 lines preceding the line 1298 return statement: // document.info_top.disp.value = ""; // document.info_bot.disp.value = "White to move"; // document.game_log.disp.value = ""; Save the file, reload the game, and again enter the same simple 2-pawn-move game. Now everything works as intended, except for the commented-out parts of the board display code. Why the difference?
2019-07-07, 16:32   #4
WraithX

Mar 2006

23×59 Posts

Quote:
 Originally Posted by ewmayer Now open Mchess.js in an editor and comment out the 3 lines preceding the line 1298 return statement: Code: // document.info_top.disp.value = ""; // document.info_bot.disp.value = "White to move"; // document.game_log.disp.value = ""; Save the file, reload the game, and again enter the same simple 2-pawn-move game. Now everything works as intended, except for the commented-out parts of the board display code. Why the difference?
The problem is you do not have a "game_log" variable in your web page, so Javascript is crashing when it reaches that line and does no further processing.

2019-07-07, 19:25   #5
ewmayer
2ω=0

Sep 2002
República de California

266716 Posts

Quote:
 Originally Posted by WraithX The problem is you do not have a "game_log" variable in your web page, so Javascript is crashing when it reaches that line and does no further processing.
Ah, thanks - fresh eyes, always helpful! I must've put that in there a few years ago during my last fiddling-binge as a placeholder for a future game-log display, but in my crude current-round attempts to emulate a 2-column game-log display, I replaced it on the html side with a set of numbered sub-logs.

Is there some way to get the FF debugger to help indicate "your JS script has crashed" and backtrace it, gdb-style? In my debug session, the unexplained execution jumps so far have been my only indicators, and that is a very crude tool.

I was still able to put in place the remaining missing replay-saved-game functionality yesterday despite the above issue, just left the 3 lines I had localized the crash to commented out.

2019-07-07, 21:02   #6
WraithX

Mar 2006

23·59 Posts

Quote:
 Originally Posted by ewmayer Is there some way to get the FF debugger to help indicate "your JS script has crashed" and backtrace it, gdb-style? In my debug session, the unexplained execution jumps so far have been my only indicators, and that is a very crude tool.
A good place to look for problems is in the "console". In FF you can right-click on a web page and select the "Inspect Element" option. In there you should see things like "Inspector", "Console", "Debugger", etc. I saw the following error in the FF console (my FF is old, error may be different now):
Code:
TypeError: document.game_log is undefined[Learn More]		mchess.js:1297:2
And I saw the following error in Chrome:
Code:
Uncaught TypeError: Cannot read property 'disp' of undefined	Mchess.js:1297
at board_reset (Mchess.js:1297)
at enter_game (Mchess.js:265)
at HTMLInputElement.onclick (Mchess.html:188)
The following may not be what you are looking for, but it has helped me many times. You can write information to the console with console.log("Helpful info! Variable x = " + x);. I will often use that to binary search my way to problem sections of code.

Actually, looking more online, I see that there are more functions available to the console. You may be interested in console.trace(); which should print out the list of function calls that got you to that location in the code. You can see more console options at these two links:
https://developer.mozilla.org/en-US/...eb/API/Console

Last fiddled with by WraithX on 2019-07-07 at 21:03

 2019-07-13, 23:46 #8 ewmayer ∂2ω=0     Sep 2002 República de California 231478 Posts p.s.: I've added a simple assert() function which allows me to set a single breakpoint inside it in the debugger and replaced a bunch of what were alert([some error message]) with calls to that, but that is only useful where cases where I explicitly check for the error condition in question. What I really need is a general way to break on unexpected-error, thus combining the console's error-messaging with the capability to backtrace such occurrences; will probably have to wrap all the major JS functions in try/catch to effect that.
 2019-07-25, 23:30 #10 paulunderwood     Sep 2002 Database er0rr 3,499 Posts I would play b3 in order to protect from the Black's white square bishop from coming down the queen's side. Last fiddled with by paulunderwood on 2019-07-25 at 23:41
2019-07-26, 03:10   #11
ewmayer
2ω=0

Sep 2002
República de California

231478 Posts

Quote:
 Originally Posted by paulunderwood I would play b3 in order to protect from the Black's white square bishop from coming down the queen's side.
16.b3 leads to same Evil-PC move as 16.Rac1: ...Bg4.

As I noted, Evil PC recommends 16.Rac1, which if taken leads it to respond Bg4 ... but I think I'm seeing a clear bias in the algorithm, against pawn moves, at least once it gets outside whatever opening book it's using. In the above case Bg4 seems a fairly aggressive move by computer, and asking it for White's recommended move, it suggests another piece move, Nc4, to which is responds by continuing on the offensive, via Rd5.

But the alternative simple pawn-move reply 17.h3 immediately sends Black's bishop scurrying back from g4 to e6.

Last fiddled with by ewmayer on 2019-07-26 at 03:16

 Similar Threads Thread Thread Starter Forum Replies Last Post alpertron Programming 61 2019-04-21 00:15 Raman Chess 6 2016-12-06 06:50 henryzz Chess 27 2014-04-20 16:52 ewmayer Programming 1 2006-10-07 21:23 ewmayer Programming 2 2006-02-04 19:22

All times are UTC. The time now is 22:37.

Thu Nov 26 22:37:38 UTC 2020 up 77 days, 19:48, 4 users, load averages: 1.75, 1.56, 1.59