The Uglyboard Project
Intro | Uglyboard II| Misc | Using | History| End notes | Source Code
Run Uglyboard II!
Look at some chess games on the program itself. And if you wish to learn more about it, and why I wrote it, please read the rest of the page.
Click Here to run Uglyboard II
Introduction
Since finishing University, I have taken advantage of the free time available to me, to start to learn to program.
The language I decided to start with was Java, as it is (I believe) simpler than C++ and the ability to write Java Applets for web-pages seemed an excellent practical use of any new skills I acquired.
I soon tired of working through the examples, simply copying text is not programming, and the simple examples were lifeless and dull. I felt the need to try writing a real
program of my own. Therefore the 'Uglyboard' Project. By writing an applet to display chess games on web-pages I hoped:
- To learn how to write my own programs.
- To learn more Java, and to become comfortable with standard programming techniques.
- To have fun.
- And to produce a good way to put chess games on my web-pages.
Perhaps the most important distinction between writing this program and the book examples, is that here from the start I had
a good idea of what I wanted to produce, but no idea how to do it. Whereas with examples, you start with the skills, and then find artificial ways of using them.
On starting the project I had absolutely no knowledge of the majority of code I would eventually use.
Uglyboard II
The current version of the program:
- The chess games (PGN-Format) are passed to the Applet as 'parameters' from the HTML page.
- This provides a very simple way for the games to be added / deleted / changed without requirement for alterations to
the program itself and provides the biggest technical change from Uglyboard version 1, which could only handle one game, which would have to
be embedded within the Java Applet itself before compilation.
- The games are then 'read'.
- The players' names, date, result etc... are stored. The moves are then converted into a standardised format (an array of integers, with seven components).
- An array of virtual chessboards are set up.
- As a three dimensional character array, with the same number of 'boards' as positions in the game.
- The moves go into a single formula and the boards are updated to show the positions.
- This is the part I am most proud of. Rather than say, a king moves like this, a bishop like that, a knight like this etc... and writing a separate formula for each one, the same
formula handles all the pieces (including knights and pawns) calling up suitable variables for each piece.
- A graphical interface then displays the 'boards'
- With all the standard buttons and options required. Skip to start/end, skip to move, flip board (look at it from the other side) and of course the
ability to switch between games.
Misc. & Limitations
- Games are used in PGN - File format (portable game notation)
- The standard way of transferring chess games on the net.
- The name Uglyboard comes from my first attempt.
- The first applet used letters to represent pieces, and looked hideous (you can check this out in the project history page). My friend Mark Watkins suggest I stick
with the name and I haven't thought of anything better. (Certainly beats Java Chess Game Displayer)
- Uglyboard II was written in Internet Explorer 5
- To my surprise it took only a few extra lines to get it working on my copy of Netscape Communicator 4.7! (although it looks UGLIER!) I have little experience with other browsers, please
notify me with any compatibility problems you have. However the program itself should be far more compatible with different Java capable browsers than my JavaScript riddled web-pages (a seriously IE only zone!)
- Sometimes a couple of the graphics fail to load.
- This is a problem with the geocities website, as soon as I can find a way of coding the question, "has the picture failed to load?", I will be able to get the program to load a
second set of back-up pictures. However all the approaches I've tried so far have failed (and as I don't know any Java programmers it may take a little while. For the moment please
bear with me and try reloading the applet from scratch, which usually works.) I have tried several attempts along the line of 'is the image loaded the same as the same image from a control folder?' Sadly this approach doesn't work; I have a feeling technical knowledge is required over creativity here.
- All 'returns/line breaks' must be removed from the PGN-file before use.
- The game is passed as a 'String', which must be a single line of text. It can be a very long line... This is simply done by loading the PGN-File into Word and using the search and replace function to
replace ^p (the symbol for line breaks) with a space.
- Each game must be put in as a separate parameter.
- This was easily the simplest way to handle multiple games. The cutting and pasting required is not much extra. However I may add support for
multiple games per PGN-file in later versions.
- You can not use apostrophes in the annotations!
- The Parameter is defined either by ' or ", in the same way spoken English is written down. (e.g. 'This program is stupid!' said the boy.) The computer will stop reading the file as soon as the
next ' or " is reached. Uglyboard II uses 's to define the parameter (which allows "s to be used within the parameter) which means they can't be used within the annotations. (Again a search and replace using Word is the recommended
solution.)
How to Use Uglyboard II
- If you'd like a copy feel free to e-mail me.
- You need to add a simple couple of lines of Javascript to the page you want to run it from.
- This then means the applet is loaded into a correctly sized frame.
- You need to turn the chess games you want to display into PGN-Format.
- This is easily done with most pieces of chess software (e.g. Winboard, Fritz etc...), however
the notation can be written 'by hand'. Again any difficulties please feel free to e-mail me.
- Load the PGN-File into a word processor and use the 'search and replace' function to change all returns(^p in Word) to spaces.
- And use the search function to find all apostrophes and remove them! I foresee this as being the biggest problem people might face using Uglyboard II.
- Cut and paste the file into the Parameter tags in the Uglyboard page.
- In between PARAM NAME=File3 VALUE=' and the next '. The names of the Parameters must run consecutively from 'File1' until 'FileX' when you stop. The number of games you can add is unlimited.
- Sit back and enjoy!
- As the applet gets the games from the HTML file, you can have several different Uglyboards, each with a different set of games, all using the same '.class' file for the applet. I think the program is pretty solid, and shouldn't
have many significant bugs. If anything does happen, please e-mail me so I can iron out any problems.
- The program should be VERY intuitive to use. However here is a quick summary of the features.
- The game is selected from the 'drop down menu' at the top.
- The four arrow buttons are the rather standard skip to start, go back one move, go forwards one move and skip to end.
- You can toggle the radio buttons, clicking the white one will go back one move, clicking the black one will go forwards one move.
- The 'Flip' button changes the side you watch from.
- You can use the small text box, which usually displays the last move to skip to any individual move you choose. It will skip to the move number entered displaying the
same side to move as the board was previously set for. E.g. If you've just loaded a game, it is move 1 with white to move. If you type 25 into the box the game will skip to the position after blacks 24th move.
History of Uglyboard
Why not take the time for a good laugh! Have a look at the earlier versions including my first ever applet.
Take me to something UGLY!
End notes
Outside debugging bugs I haven't yet found and a few tweaks, Uglyboard II is now finished. This version is (for the moment at any rate)
the end of the Uglyboard project, as it has fulfilled my original plans. So here are a few notes on my feelings and what I think I've learnt:
- I am very happy with the finished product. I've seen a similar program, by someone with far better Java programming experience and knowledge and I feel that my program
is much more user friendly and fun.
- For most programming problems I faced, I found there were several ways around them. e.g. Not knowing how to find out how many characters there were in a string, I produced a similar line to this: Int stringlength = string.toCharArray().length; The string is (completely unnecessarily) converted
into an array of characters, which I know how to find the length of. I have found that such 'sleight of hand' is often far more effective than trying to find the correct way of doing something from a book or the internet, unless you can phrase your question correctly (with the correct terms you don't know) non-human references are sometimes completely useless.
If I had known someone who knew Java, then writing the program would have been far easier, (but arguably less satisfying.)
- I have really enjoyed the programming experience, wheels within wheels, loops within loops, and bizarre plans to shove the data around. There is something rather Machiavellian and a little insane in the method of programming, which rather reminds me of chess.
- If the programs not working, taking a break (even going for a seven mile run) and coming back more relaxed is more productive than getting annoyed.
- Please give me feedback!
The Code itself
Feel free to look at the code itself. As some of the lines are far longer than any width of
webpage they're likely to be viewed on, they will wrap onto the next line making the code harder to follow. However if the
reader has the ability to understand the code they won't have any difficulty with working out a way to solve this (e.g. Select all the text, copy it and paste in notepad.)
The program has grown to a rather large amount of text, which is not thoroughly annotated. However at the top of the file there is an explanation of what each
individual 'Method' does.
Okay lets see it then!