How to disable a picture box once I clicked a button and an image has been inserted

Question

I have created a grid in a panel and added 42 picture boxes for a 6x7 grid, Every time I click a button for the row it inserts an image of a red or yellow checker. I am trying to make the button add another image of the other image on the box on top. I have created an array as a check feature to see which player has won. My code is:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace Connect4
{
    public partial class Form2 : Form
    {
        int i = 1;

        int[,] a = new int[7, 6];
        public Form2()
        {
            InitializeComponent();
        }
        private void tableLayoutPanel1_MouseClick(object sender, MouseEventArgs e)
        {

        }


        private void button1_Click(object sender, EventArgs e)
        {
            if (i %2 == 1)
            {
                pictureBox1.Image = Image.FromFile(@"C:\ Documents\Desktop\PROJECT FOR LAPTOP\red.png");
                pictureBox1.Enabled = false;
            }
            else
            {
                pictureBox1.Image = Image.FromFile(@"C:\ Documents\Desktop\PROJECT FOR LAPTOP=\yellow.png");
                pictureBox1.Enabled = false;
            }
            i++;

           
        }

        private void panel1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            int cols = 7;
            int rows = 6;
            int width = panel1.Width / cols;
            int height = panel1.Height / rows;
            for (int col = 1; col < cols; col++)
            {
                e.Graphics.DrawLine(Pens.Black, new Point(col * width, 0), new Point(col * width, panel1.Height));
            }
            for (int row = 1; row < rows; row++)
            {
                e.Graphics.DrawLine(Pens.Black, new Point(0, row * height), new Point(panel1.Width, row * height));
            }
        }

        private void Form2_Load(object sender, EventArgs e)
        {
            panel1.SizeChanged += Panel1_SizeChanged;
            panel1.Paint += panel1_Paint;
        }

        private void Panel1_SizeChanged(object sender, EventArgs e)
        {
            panel1.Invalidate();
        }
    }
}

This is what my design looks like so far(https://i.stack.imgur.com/Rg8Vg.png) The red changes to a yellow circle one the button is clicked

I was expecting for it put in a red counter image first and then when I clicked the same button it would add a yellow counter on the picture box on top of it

This is the Upper right to bottom left code:

if (!winFound) //if win is not found on horizontal check Right Diagonals 
        {
            //Diagonal Upper right to bottom left(2D Array)
            for (int row = 3; row < 5 && !winFound; row++)
            {
                rowFound = row;
                for (int col = 0; col <= 3 && !winFound; col++)
                {
                    colFound = col;
                    if (board[row, col] != null)
                    {
                        temp = true;
                        winFound =
                            (board[row, col] == board[row + 1, col + 1]) &&
                            (board[row, col] == board[row + 2, col + 2]) &&
                            (board[row, col] == board[row + 3, col + 3]);
                    }
                }
            }
        }

I am unsure on why it doesnt check win

Answer 1

Assuming the first column on the left is pb1 at the bottom and pb7 at the bottom right, and button1 is on the left with button7 on the right.

Here's how you'd do it with just ONE set of buttons across the bottom to pick which column to drop the next piece into:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private String[,] board = new String[6,7]; // six rows by seven columns 
    private int i = 1; // odd = red, even = yellow
    private List<Button> buttons;
    private Image red;// = Image.FromFile(@"C:\Users\ogisi\OneDrive - Wilmslow High School\Desktop\PROJECT FOR LAPTOP\red.png");
    private Image yellow;// = Image.FromFile(@"C:\Users\ogisi\OneDrive - Wilmslow High School\Desktop\PROJECT FOR LAPTOP\yellow.png");

    private void Form1_Load(object sender, EventArgs e)
    {
        // only ONE row of buttons, from Left to Right, BELOW all the PictureBoxes
        // PBs are placed from left to right, bottom to top
        // pb1 is at bottom left, pb2 to its right, pb3 to its right, etc...
        // pb8 in second row from the bottom on the left, pb9 to its right, pb10 to its right, etc...
        // pb15 in third row from bottom on the left, etc..
        // pb42 is in the top row in the rightmost column
        buttons = new List<Button> { button1, button2, button3, button4, button5, button6, button7 };
        foreach (Button btn in buttons)
        {
            btn.Click += Btn_Click;
        }
        nextTurnColor();
    }

    private void Btn_Click(object sender, EventArgs e)
    {
        Button btn = (Button)sender;
        int column = buttons.IndexOf(btn);

        int rowPlaced = -1;
        for(int row=0; row<6; row++)
        {
            if(board[row,column] == null)
            {
                rowPlaced = row;
                board[row, column] = (i % 2 == 1) ? "R" : "Y";

                String pbPrefix = "pictureBox"; // "pb"
                String ctlName = pbPrefix + ((row * 7) + (column + 1));
                PictureBox pb = this.Controls.Find(ctlName, true).FirstOrDefault() as PictureBox;
                pb.BackColor = (i % 2 == 1) ? Color.Red : Color.Yellow;
                //pb.Image = (i % 2 == 1) ? red : yellow;
                if (row == 5)
                {
                    btn.Enabled = false; // column is full!
                }

                i++;                    
                break;
            }
        }
        if (rowPlaced != -1)
        {                
            // ... check "board" for a win condition ...

            // if no win, then change player
            nextTurnColor();
        }
    }

    private void nextTurnColor()
    {
        this.Text = (i % 2 == 1) ? "Red's turn." : "Yellow's turn.";
    }

}

Sample run: (*No win condition check being performed!)

Answer 2

Here's an example of checking for a horizontal win.

Read those comments carefully!

// an empty spot in the board will be null
// red spot will contain "R"
// yellow spot will contain "Y"
private String[,] board = new String[6, 7];

private void FooBar()
{
    // here is how to check for a horizontal win
    // we need to check each row, this is the outer loop
    // we need to check the columns, thus the inner loop
    // for four in a row, horizontally, we canstart anywhere
    // from column 0 up to  to column 3, but cannot start
    // from column 4 or above as there wouldn't be enough
    // room to finish the row of four
    //
    // 0 1 2 3 4 5 6
    // x x x x
    //       x x x x        
    //
    // board.getLength(0) tells us how many rows in 2D array
    // board.getLength(1) tells us how many columns in 2D array
    int rowFound = -1;
    int colFound = -1;
    bool winFound = false; // assume no win until proven otherwise
    for (int row = 0; row < board.GetLength(0) && !winFound; row++)
    {
        rowFound = row;
        for (int col = 0; col <= (board.GetLength(1) - 4) && !winFound; col++)
        {
            colFound = col;
            // we want to ignore any starting position that is blank
            // so we don't end up getting a four in a row "match"
            // because all of them are equal, but contain null
            if (board[row, col] != null)
            {
                // are the next 3 horizontally the same as the first?
                // we don't need to worry about an index out of bounds
                // here since we controlled the inner loop above
                // with "(board.GetLength(1) - 4)"
                // both loops will drop out if winFound becomes true!
                winFound =
                    (board[row, col] == board[row, col + 1]) &&
                    (board[row, col] == board[row, col + 2]) &&
                    (board[row, col] == board[row, col + 3]);                        
            }
        }        
    }      

    if (!winFound) {
        // ... check for vertical win in here ...
    }

    if (!winFound) {
        // ... check for diagonal win (upper left to bottom right) in here ...
    }

    if (!winFound) {
        // ... check for diagonal win (upper right to bottom left) in here ...
    }

    // if four in a row was never found, winFound will still be false
    if (winFound)
    {
        // ... there was a winner! ...
        String winner = board[rowFound, colFound];
        Console.WriteLine("The winner was: " + winner);
    }
}

Hopefully you can take this example and figure out how to apply it to a check for a vertical and/or diagonal win condition. Don't forget that when checking for a diagonal win you'd need to check for both an upper left to bottom right diagonal, and an upper right down to bottom left diagonal.

For the upper left to bottom right check, here's an image showing where possible starting positions could be:

For the rows, they only start between rows 3 and 5 inclusive. For the columns, they can only start between 0 and 3 inclusive. We need to take these constraints into account in our two for loops:

// Upper Left to Bottom Right Diagonal Check
for (int row = 3; row <= 5 && !winFound; row++)
{
    rowFound = row;
    for (int col = 0; col <= 3 && !winFound; col++)
    {
        colFound = col;
        if (board[row, col] != null)
        {
            // are the next 3 diagonal the same?
            // Upper Left to Bottom Right direction!
            winFound =
                (board[row, col] == board[row - 1, col + 1]) &&
                (board[row, col] == board[row - 2, col + 2]) &&
                (board[row, col] == board[row - 3, col + 3]);                        
        }
    }        
}

Here's one way to do the Upper Right to Bottom Left Diagonal check:

// Diagonal Check - Upper Right to Bottom Left:
for (int row = 3; row <= 5 && !winFound; row++)
{
    rowFound = row;
    for (int col = 3; col <= 6 && !winFound; col++)
    {
        colFound = col;
        if (board[row, col] != null)
        {
            // are the next 3 diagonal the same?
            // Upper Right to Bottom Left direction!
            winFound =
                (board[row, col] == board[row - 1, col - 1]) &&
                (board[row, col] == board[row - 2, col - 2]) &&
                (board[row, col] == board[row - 3, col - 3]);
        }
    }
}