paintComponent does not paint correctly

Question

I'm trying to make checkers game but the following architecture does not show on JFrame what I'm doing wrong

//base class

import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;

import javax.swing.*;

public abstract class   Case extends JComponent implements MouseListener {
    
     /**
     * 
     */
    private static final long serialVersionUID = 1L;
    protected static final int LONGUEUR=40; 
    protected  int x,y,width,height;   
    
     
    @Override
    public void mouseClicked(MouseEvent arg0) {
        // TODO Auto-generated method stub
        
    }

    @Override
    public void mouseEntered(MouseEvent arg0) {
        // TODO Auto-generated method stub
        
    }

    @Override
    public void mouseExited(MouseEvent arg0) {
        // TODO Auto-generated method stub
        
    }

    @Override
    public void mousePressed(MouseEvent arg0) {
        // TODO Auto-generated method stub
        
    }
    @Override
    public void mouseReleased(MouseEvent e) {
        // TODO Auto-generated method stub
        
    }
}

//black rectangle

import java.awt.Color;
import java.awt.Graphics;


public class CaseNoire extends Case
{
/**
     * 
     */
    private static final long serialVersionUID = 1L;
    public CaseNoire(int x, int y,int width,int height)
    {

        this.x=x;
        this.y=y;  
        this.width = width;   
        this.height= height;
    }

@Override
protected void paintComponent(Graphics g)
{   
    g.setColor(Color.black);      
    g.fillRect(x, y,width,height);  
}
}

//white rectangle

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;


public class CaseBlanche extends Case {
    
    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    public CaseBlanche(int x, int y,int width,int height)
    {

        this.x=x;
        this.y=y;  
        this.width = width;   
        this.height= height;
    
    }

    @Override
    public void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        g.setColor(Color.white);      
        g.fillRect(x, y,width,height);   
    }

}

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Paint;

import javax.swing.JComponent;
import javax.swing.JPanel;

public class Plateau extends JComponent
{
    private Case[][] cases= new Case[10][10];  
    @Override
    protected void paintComponent(Graphics g) {
        // TODO Auto-generated method stub
        super.paintComponent(g);                
           for(int i=0; i<10;  i++)
           {
               for(int j=0;j<10;j++)
               {
                   if((i+j)%2==0)
                   {
                       CaseBlanche blanche= new CaseBlanche(j*Case.LONGUEUR,i*Case.LONGUEUR,Case.LONGUEUR, Case.LONGUEUR);
                       //cases[i][j]=blanche;
                       add(blanche); 
                       //g.setColor(Color.white);      
                       // g.fillRect(j*40, i*40,40,40); 
                   }
                   else
                   {
                       CaseNoire caseNoire=new CaseNoire(j*Case.LONGUEUR,i*Case.LONGUEUR,Case.LONGUEUR, Case.LONGUEUR);
                   add(caseNoire);
                     
                     
                   }                   
                  
               }
           }                        
    }
}

and here the Main Class
import javax.swing.JFrame;

public class MainDamesFrame extends JFrame {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    
    public static void main(String[] args )
    {
        MainDamesFrame damesFrame = new MainDamesFrame(); 

        
    } 
    public  MainDamesFrame()    
    {
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setTitle("Jeu de Dames");                           
        this.getContentPane().add(new Plateau());       
        setSize(800, 600);
        setVisible(true);                   
        
    }

}

I expect something like this

So what's wrong with my code? why paintComponent in CaseBlanche and CaseNoire does not behave as expected?
Please help

Answer 1

public void paintComponents(Graphics g)

You have a typo. Get rid of the "s" in paintComponents().

setSize(800, 600);

This won't work as you expected because the (880, 600) included the title bar and borders, so some of the squares will not be painted properly.

So, your custom painting classes should override the getPreferredSize() method to return the size of each component. Then you can use the pack() method to make sure the components are properly sized.

There is no need for the CaseNoir and CaseBlanche classes. When you create the Case object you can just use:

setBackground(Color.BLACK);

Then when you paint the component you just use:

g.setColor( getBackground() );

Also, your Plateau class is wrong. The paintComponent() method is for painting. Your code is creating and adding components components. If you want to add components then you should be using a layout manager. The GridLayout will easily add components in a grid as long as the getPreferredSize() method has been implemented. You create the component with a specified width/height, so to implement this method you do something like:

@Override
public Dimension getPreferredSize()
{
    return new Dimension(width, height)
}

Check out this Chessboard Example for a way to add components in a grid.