Answers.Body: <p>Your GUI design is bad. I'd just do this:</p>
  
  <pre><code>White pawn x3
  White queen x1
  Black pawn x2
  ....
  </code></pre>
  
  <p>Draw a chess piece and add a number to it's top-right corner. It's like how iOS and Android show the number of unread SMS messages you have.</p>
  
  <p>Nobody wants to count the number of pawns in your panel. Just add a number.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-12T19:44:15.770Z
Answers.Text: And to make it even simpler, you could also just display the difference of captured pieces, e.g. if white captured 3 pawns and black captured 2 pawns, white is one pawn ahead, so you'd just display one pawn for white. Similarly for the other pieces.
Answers.UserDisplayName: user1583209
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-13T00:39:36.220Z
Answers.Text: As a user, I'd prefer the options @user1583209 gives. However, this might create a problem with if you have 2 queens on the board, e.g. trying to display -1 queens might cause a runtime error.
  
  Other nice touches might be to mention if bishops were opposite colors or to allow for lumping bishops/knights together.
  
  However, I think it would be nice to allow the player an option to switch between the two views, as both have their respective virtues. I think it would be a good (nontrivial) coding exercise.
Answers.UserDisplayName: aschultz
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-13T15:14:52.003Z
Answers.Text: @SmallChess So the panel displays all the distinct piece types with a x0 initially?
Answers.UserDisplayName: Srikara Krishna Kanduri
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-12T15:52:21.990Z
Answers.LastActivityDate: 2017-04-12T15:52:21.990Z
Answers.UserDisplayName: SmallChess
Body: <p>My Taken Pieces Panel clusters ugly with the pieces.<a href="https://i.sstatic.net/a35ul.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/a35ul.png" alt="GUI bug"></a></p>
  
  <p>Here's my code :</p>
  
  <pre><code>class TakenPiecesPanel extends JPanel {
  private final JPanel northPanel;
  private final JPanel southPanel;
  private final Dimension TAKEN_PIECES_DIMENSION = new Dimension(80, 80);
  
  TakenPiecesPanel(){
      super(new BorderLayout());
      this.setBorder(PANEL_BORDER);
      this.northPanel = new JPanel(new GridLayout(8, 2));
      this.southPanel = new JPanel(new GridLayout(8, 2));
      this.add(this.northPanel, BorderLayout.NORTH);
      this.add(this.southPanel, BorderLayout.SOUTH);
      setPreferredSize(TAKEN_PIECES_DIMENSION);
  }
  
  void redo(final MoveLog movelog){
      this.northPanel.removeAll();
      this.southPanel.removeAll();
  
      for(final Piece takenPiece: whiteTakenPieces){
              final BufferedImage image = ImageIO.read(new File(BoardUtils.ICONS_PATH +
                      takenPiece.getPieceColor().toString().substring(0,1)+
                      takenPiece.toString()+".gif"));
              final ImageIcon icon = new ImageIcon(image);
              /*This didn't work too 
              final JLabel imageLabel = new JLabel(new ImageIcon(ic.getImage().getScaledInstance(
                      ic.getIconWidth() - 15, ic.getIconWidth() - 15, Image.SCALE_SMOOTH)));*/
              this.southPanel.add(imageLabel);
              this.southPanel.add(new JLabel(icon));
      }
      validate();
  }
  }
  </code></pre>
  
  <p>The images are displayed in a single column and when the number exceeds the column limit, they are displayed in the adjacent column. This is when the panel gets ugly.</p>
  
  <p>I'm a beginner in GUI programming. I've tried increasing the panel size but it won't work. Please help me out.</p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-12T15:50:27.057Z
Comments.Text: I think you're asking about GUI design. No need to show your code. Nobody will read it anyway.
Comments.UserDisplayName: SmallChess
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-13T00:44:14.253Z
Comments.Text: You probably noticed that there are 4 white knights and 3 bishops in the taken panel. Fixing that might give some space, too.
  
  Also, it looks like 2 black rooks are in the taken panel, though there's a rook in the actual game.
  
  I suppose you could have a default icon size, and it could be defined by how many pieces are taken e.g. for up to 20, use the default, but for every 2 pieces taken you decrease it by 5%. That's just a guesstimate, but it seems like a good first step.
Comments.UserDisplayName: aschultz
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-13T15:21:52.763Z
Comments.Text: @Bad_Bishop I need to show the captured pieces coz its for my project. And no, I can't show how many have been captured so, I might have to start with a 0 counter and add it every time a piece has been removed.
Comments.UserDisplayName: Srikara Krishna Kanduri
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-13T15:22:54.600Z
Comments.Text: @aschultz Your idea looks feasible but I'm a beginner in GUI programming and can't code what you just suggested.
Comments.UserDisplayName: Srikara Krishna Kanduri
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-04-16T10:25:11.987Z
Comments.Text: Thank you all. Fixed it. Missed this line earlier - this.northPanel.updateUI();
Comments.UserDisplayName: Srikara Krishna Kanduri
Tags: <engines><software>
Title: Chess GUI Java Swings code needs fixing
ThreadText: # Chess GUI Java Swings code needs fixing
  
  (Asked by: username_0 on 2017-04-12)
  
  My Taken Pieces Panel clusters ugly with the pieces.[![GUI bug](https://i.sstatic.net/a35ul.png)](https://i.sstatic.net/a35ul.png)
  
  Here's my code :
  
  ```
  class TakenPiecesPanel extends JPanel {
  private final JPanel northPanel;
  private final JPanel southPanel;
  private final Dimension TAKEN_PIECES_DIMENSION = new Dimension(80, 80);
  
  TakenPiecesPanel(){
      super(new BorderLayout());
      this.setBorder(PANEL_BORDER);
      this.northPanel = new JPanel(new GridLayout(8, 2));
      this.southPanel = new JPanel(new GridLayout(8, 2));
      this.add(this.northPanel, BorderLayout.NORTH);
      this.add(this.southPanel, BorderLayout.SOUTH);
      setPreferredSize(TAKEN_PIECES_DIMENSION);
  }
  
  void redo(final MoveLog movelog){
      this.northPanel.removeAll();
      this.southPanel.removeAll();
  
      for(final Piece takenPiece: whiteTakenPieces){
              final BufferedImage image = ImageIO.read(new File(BoardUtils.ICONS_PATH +
                      takenPiece.getPieceColor().toString().substring(0,1)+
                      takenPiece.toString()+".gif"));
              final ImageIcon icon = new ImageIcon(image);
              /*This didn't work too 
              final JLabel imageLabel = new JLabel(new ImageIcon(ic.getImage().getScaledInstance(
                      ic.getIconWidth() - 15, ic.getIconWidth() - 15, Image.SCALE_SMOOTH)));*/
              this.southPanel.add(imageLabel);
              this.southPanel.add(new JLabel(icon));
      }
      validate();
  }
  }
  
  ```
  
  The images are displayed in a single column and when the number exceeds the column limit, they are displayed in the adjacent column. This is when the panel gets ugly.
  
  I'm a beginner in GUI programming. I've tried increasing the panel size but it won't work. Please help me out.
  
  **Tags:** engines, software
  
  > **Comments:**
  > **username_1**: I think you're asking about GUI design. No need to show your code. Nobody will read it anyway.  
  > **username_2**: You probably noticed that there are 4 white knights and 3 bishops in the taken panel. Fixing that might give some space, too.  Also, it looks like 2 black rooks are in the taken panel, though there's a rook in the actual game.  I suppose you could have a default icon size, and it could be defined by how many pieces are taken e.g. for up to 20, use the default, but for every 2 pieces taken you decrease it by 5%. That's just a guesstimate, but it seems like a good first step.  
  > **username_0**: @Bad_Bishop I need to show the captured pieces coz its for my project. And no, I can't show how many have been captured so, I might have to start with a 0 counter and add it every time a piece has been removed.  
  > **username_0**: @username_2 Your idea looks feasible but I'm a beginner in GUI programming and can't code what you just suggested.  
  > **username_0**: Thank you all. Fixed it. Missed this line earlier - this.northPanel.updateUI();  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2017-04-12. Score: 2 | Accepted answer
  
  Your GUI design is bad. I'd just do this:
  
  ```
  White pawn x3
  White queen x1
  Black pawn x2
  ....
  
  ```
  
  Draw a chess piece and add a number to it's top-right corner. It's like how iOS and Android show the number of unread SMS messages you have.
  
  Nobody wants to count the number of pawns in your panel. Just add a number.
  
  > **Comments:**
  > **username_3**: And to make it even simpler, you could also just display the difference of captured pieces, e.g. if white captured 3 pawns and black captured 2 pawns, white is one pawn ahead, so you'd just display one pawn for white. Similarly for the other pieces.  
  > **username_2**: As a user, I'd prefer the options @username_3 gives. However, this might create a problem with if you have 2 queens on the board, e.g. trying to display -1 queens might cause a runtime error.  Other nice touches might be to mention if bishops were opposite colors or to allow for lumping bishops/knights together.  However, I think it would be nice to allow the player an option to switch between the two views, as both have their respective virtues. I think it would be a good (nontrivial) coding exercise.  
  > **username_0**: @username_1 So the panel displays all the distinct piece types with a x0 initially?  
  
  ---
  
  