Go to:  Site entry | Site contents | Site index | Internet | JavaScript | Text bottom

Go  Board  Position  Generation  JavaScript

POSITION JavaScript (stand-alone) is a function that generates and returns a table representing a Go board position, which is simply a two-dimensional array of Go board elements.  POSITION JavaScript is intended for usage in HTML texts describing the game of Go.

Script generates HTML text for the table that gets displayed by the browser as a position of stones on a piece of Go board.  Position is described as a series of arguments each of which represents a list of board row elements (names of corresponding *.JPG files).  Each element might be accompanied by a Foreground text to be overlaid on it and optional alignment attributes for this Foreground.  The order of elements is straightforward: left to right and top to bottom — exactly the way you see them when board position gets displayed.

POSITION JavaScript is a stand-alone one, which means that it's kept in a separate POSITION.JS file, that gets included into HTML <HEAD> (normally at its end) using the following operator (directory levelling may vary): 


       <SCRIPT LANGUAGE=JavaScript SRC=../../GO/POSITION.JS></SCRIPT>
Included function is used in the <BODY> of HTML to display a Go board position in a way shown below in this text. 


<!-- Go Board Position Generation  09/19/2000–01/18/2001 -->
<!-- ---------------------------------------- 12/07/2000 -->
<!-- www.davar.net/GO/POSITION.JS                        -->
<!-- Copyright (C) 2000–2001 by Vladimir Veytsel         -->
<!--

// Generates HTML table of Go board position presentation to be used
// in texts that discuss those positions.  Serves merely as a shorthand
// to save typing as well as page loading time by eliminating massive
// HTML repetitions.

// The position description is a straightforward one - each argument
// is a string corresponding to one row of Go board elements that are
// listed from left to right (delimited by "_") being the data items
// of the cells of a table representing required position.

// Two types of items are possible:

// 1. Simple item:  Image
//                  Image is a Foreground occupying the entire cell

// 2. Complex item: Image-Foreground[-Alignment]
//                  Image is a Background for the specified Foreground
//                  (Used to mark board elements with symbols,
//                   E.g.: mark stones with move numbers)

//    Where: Image      - Name of JPG file representing required image
//                        E.g.: ETL  - Empty Top Left corner of Go board
//                        Note: Though it is not a requirement, it makes
//                              sense to have images in HTML text directory
//                              to avoid specification of their paths.
//           Foreground - Specification of Foreground to be overlaid
//                        on the Background Image
//                        E.g.: <FONT COLOR=Red><B>5</B></FONT>
//           Alignment  - Specification of horizontal and vertical alignments
//                        of specified Foreground within Image background
//                        (HTML defaults: ALIGN=Right VALIGN=Center)
//                        E.g.: ALIGN=Center to achieve both horizontal and
//                                           vertical centering of specified
//                                           Foreground over Image background
//                        Note: When both horizontal and vertical alignments
//                              are specified they should be separated by " ".

//    Note:  In a complex item alignment specification is optional,
//           while foreground should always be present.

//    E.g.:  document.write(POSITION("EL_EC_EC_EC",
//                                   "BS_BS_BS_EC",
//                                   "WS_WS_BS_EC",
//                                   "EBL-<FONT COLOR=Red>A</FONT>-ALIGN=Center_WS_BS_EB",
//                                   "RB_RB_RB_RB"))
//    Notes:

//     - Each argument describes position row; it should be contained
//       within ONE line of HTML text.
//     - Symbols "_" and "-" are reserved as delimiters within an argument.

// The returned value is the HTML text of a table representing Go position
// to be used in the "document.write".

   function POSITION(Pos)
            {// Pos   - Go board position description (multiple arguments)
             Pos_Table="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>"
             for (i=0;i<arguments.length;i++)
                 {Pos_Table=Pos_Table+"<TR>"
                  Pos_Row  =arguments[i]
                  Item     =Pos_Row.split("_")
                  for (j=0;j<Item.length;j++)
                      {if (Item[j].length<4)
                          Image=Item[j]
                       else
                          {// Parse complex Item: Image-Foreground[-Alignment]
                           Complex   =Item[j].split("-")
                           Image     =Complex[0]
                           Foreground=Complex[1]
                           Alignment =""
                           if (Complex.length>2)
                               Alignment=Complex[2]
                          }
                       // Form values of Width and Height of element Image
                       Width=33; Height=33
                       if ((Image=="RTL")||
                           (Image=="RTR")||
                           (Image=="RBR")||
                           (Image=="RBL"))
                           {Width=8; Height=8}
                       if ((Image=="RT")||
                           (Image=="RB"))
                           Height=8
                       if ((Image=="RL")||
                           (Image=="RR"))
                           Width=8
                       // Form table data cell (simple/complex)
                       if (Item[j].length<4)
                          Pos_Table=Pos_Table+"<TD><IMG SRC='"+Image+
                                    ".JPG' WIDTH="+Width+" HEIGHT="+Height+"></TD>"
                       else
                          Pos_Table=Pos_Table+"<TD BACKGROUND='"+Image+
                                    ".JPG' WIDTH="+Width+" HEIGHT="+Height+
                                    " "+Alignment+">"+Foreground+"</TD>"
                      }
                  Pos_Table=Pos_Table+"</TR>"
                 }
             Pos_Table=Pos_Table+"</TABLE>"
             return Pos_Table
            }
//-->

Below there is a comparison of a direct HTML presentation of Go board position with presentation of the same position using POSITION JavaScript function.

The Go Board position can be presented as a table of Go elements in a way similar to the following: 


       <CENTER>
         <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
           <TR>
             <TD><IMG SRC="RL.JPG" WIDTH= 8 HEIGHT=33></TD>
             <TD><IMG SRC="EL.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
           </TR>
           <TR>
             <TD><IMG SRC="RL.JPG" WIDTH= 8 HEIGHT=33></TD>
             <TD><IMG SRC="EL.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD BACKGROUND="WS.JPG" WIDTH=33 HEIGHT=33 ALIGN=Center><I>A</I></TD>
             <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
           </TR>
           <TR>
             <TD><IMG SRC="RL.JPG" WIDTH= 8 HEIGHT=33></TD>
             <TD><IMG SRC="EL.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
           </TR>
           <TR>
             <TD><IMG SRC="RL.JPG" WIDTH= 8 HEIGHT=33></TD>
             <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EC.JPG" WIDTH=33 HEIGHT=33></TD>
           </TR>
           <TR>
             <TD><IMG SRC="RL.JPG" WIDTH= 8 HEIGHT=33></TD>
             <TD BACKGROUND="WS.JPG" WIDTH=33 HEIGHT=33 ALIGN=Center><I>A</I></TD>
             <TD><IMG SRC="EB.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EB.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD BACKGROUND="WS.JPG" WIDTH=33 HEIGHT=33 ALIGN=Center><I>A</I></TD>
             <TD BACKGROUND="WS.JPG" WIDTH=33 HEIGHT=33 ALIGN=Center><I>A</I></TD>
             <TD><IMG SRC="BS.JPG" WIDTH=33 HEIGHT=33></TD>
             <TD><IMG SRC="EB.JPG" WIDTH=33 HEIGHT=33></TD>
           </TR>
           <TR>
             <TD><IMG SRC="RBL.JPG" WIDTH= 8 HEIGHT= 8></TD>
             <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
             <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
             <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
             <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
             <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
             <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
             <TD><IMG SRC= "RB.JPG" WIDTH=33 HEIGHT= 8></TD>
             <TD></TD>
           </TR>
         </TABLE>
       </CENTER>
The code above gets displayed by the browser as follows (presuming that all images are in the same directory with the HTML text being browsed):
 
A
A A A


The drawback of the direct HTML presentation is that it's excessively bulky.  This bulk of repetitive HTML text complicates coding and results in long transfers.

In order to have a fully functional Go board position description facility, while avoiding massive HTML code repetitions, the POSITION JavaScript was developed as a substitute for the corresponding HTML.  The code below is functionally identical to the full HTML position description, but it is substantially shorter (note, that each argument should be contained within one line of text): 


       <CENTER>
         <NOSCRIPT>Please enable JavaScript in your browser and reload this page</NOSCRIPT>
         <SCRIPT LANGUAGE=JavaScript>
           <!--
             document.write(POSITION("RL_EL_EC_EC_EC_EC_EC_EC",
                                     "RL_EL_BS_WS-<I>A</I>-ALIGN=Center_BS_EC_EC_EC",
                                     "RL_EL_EC_BS_EC_EC_EC_EC",
                                     "RL_BS_EC_EC_BS_BS_EC_EC",
                                     "RL_WS-<I>A</I>-ALIGN=Center_EB_EB_WS-<I>A</I>-ALIGN=Center_WS-<I>A</I>-ALIGN=Center_BS_EB",
                                     "RBL_RB_RB_RB_RB_RB_RB_RB"))
           //-->
         </SCRIPT>
       </CENTER>
This code gets displayed by the browser in the form identical to the full HTML presentation:

 


As can be seen from the above example, the POSITION JavaScript provides a complete substitute for directly written HTML and permits to keep a fully functional Go board description within a reasonable size, saving both coding and transfer time.

View Go Glossary (built with POSITION.JS)       View [and save] POSITION.TXT text
(Use [Back] button or [Alt]+[CL] to return here from the viewed page/text)
To make text executable rename it to *.JS and make a global change of "&lt;" into "<" signs.
Copyright © 2000–2001 by
Go to:  Site entry | Site contents | Site index | Internet | JavaScript | Text top