title: Making a robust, resizable Swing Chess GUI
body: <p>How would I go about making this resizable Chess GUI?</p>
  
  <hr>
  
  <p>Our company has been tasked with making a Chess game.  It needs to work on Windows, OS X and Linux/Unix machines, and we have chosen Java to achieve this, while maintaining a common code-base (handy for both maintenance, and keeping costs down).  </p>
  
  <p>My task is to create the GUI.  The User Design Team has cleared the following spec. with the client.  </p>
  
  <blockquote>
    <p>The chess game (Chess Champ) will be robust to resizing and straightforward, it includes:</p>
    
    <ul>
    <li>A tool-bar at the top, with UI components: 
    
    <ul>
    <li><kbd>New</kbd> button</li>
    <li><kbd>Save</kbd> button</li>
    <li><kbd>Restore</kbd> button</li>
    <li><kbd>Resign</kbd> button</li>
    <li>A label for providing messages to the player.</li>
    </ul></li>
    </ul>
    
    <p>On the left hand side of the game, we need an area which will be reserved for future use, it might include things like:</p>
    
    <ul>
    <li>Lists of captured pieces</li>
    <li>A selector for choice of piece when promoting pawns</li>
    <li>Game statistics </li>
    <li>Hints, etc.</li>
    </ul>
    
    <p>The details of this are are still being settled with the client and the Logic Team. So for the moment, simply mark it with a label containing <code>?</code> as text. </p>
    
    <p>The rest of the GUI will consist of the chess board itself.  It will have: </p>
    
    <ul>
    <li>The main area for the chess board. If the user points at a chess piece, it should show focus with a border.  It should also be keyboard accessible.  The client will be supplying multiple sprite sheets of chess pieces (of a variety of sizes, styles and colors) to allow the user to change the look of the game.</li>
    <li>The chess board will have labels indicating the columns (left to right: A, B, C, D, E, F, G &amp; H) and rows (top to bottom: 8, 7, 6, 5, 4, 3, 2 &amp; 1).</li>
    <li>The chess board and column/row labels will be bordered by a 1px black border, with an 8px padding around that.</li>
    <li>As the player increases the size of the game, the chess board should <em>remain square,</em> but otherwise <em>fill the available space.</em></li>
    <li>The background color behind the chess board should be ochre, but in the mock-ups below we have made the area behind the chess board green in order to highlight the resize behavior.</li>
    </ul>
  </blockquote>
  
  <h3>Chess Champ at minimum size, before a game is started</h3>
  
  <p><img src="https://i.stack.imgur.com/4qtfk.png" alt="ChessChamp at minimum size, before a game is started"></p>
  
  <h3>Chess Champ at minimum size, after the new game button is activated</h3>
  
  <p><img src="https://i.stack.imgur.com/733Zd.png" alt="Chess Champ at minimum size, after the new game button is activated"></p>
  
  <h3>Chess Champ stretched wider than minimum size</h3>
  
  <p><img src="https://i.stack.imgur.com/uglA1.png" alt="ChessChamp stretched wider than minimum size"></p>
  
  <h3>Chess Champ stretched taller than minimum size</h3>
  
  <p><img src="https://i.stack.imgur.com/54ref.png" alt="Chess Champ stretched taller than minimum size"></p>