Place objects in tablelayoutpanel cells in specific order

Question

Im currently stuck on a part of my assignment that i can't seem to figure out. It involves me setting up a game board, using a tablelayoutpanel as the gameboard.

So far, I have displayed the tile "Squares" on the board, but the tiles (cells) are not in order as so:

I need the start tile to be displayed in the bottom left, and the finish to be in the top right, with the cells in the middle in order as so:

The methods which pertain to this part are these:

/////This method sets up the game board using and array of "Squares", (still a work in progress, but mostly done)

private void SetupGameBoard() {

                    for (int i = 0; i <= 41; i++) {

            SquareControl squareCreate = new SquareControl(Board.Squares[i], null);

            int coloumn = 0;
            int row = 0;

            MapSquareNumToScreenRowAndColumn(i, out coloumn, out row);

            boardTableLayoutPanel.Controls.Add(squareCreate, coloumn, row);

        }


    }// SetupGameBaord

And this,

 private static void MapSquareNumToScreenRowAndColumn(int squareNumber, out int rowNumber, out int columnNumber) {



            // ######################## Add more code to this method and replace the next two lines by something more sensible.  ###############################
            rowNumber = 0;      // Use 0 to make the compiler happy for now.
            columnNumber = 0;   // Use 0 to make the compiler happy for now.                  



        }//end MapSquareNumToScreenRowAndColumn

What I've grasped so far is that in MapSquareToScreenRowandcColumn is where my calculation of figuring out where the squares fall into place needs to happen.

Would really love some tips/advice/help/anything on this.

If you guys need more info, let me know.

Thanks!

EDIT:

So I've figured out sort of how to do, just wondering about a better way to do it. In MapSqauretoScreenRowandColumn I put this little if statement just to test:

if (squareNumber >= 0 && squareNumber <= 5) {

                rowNumber = 6;


            }

So if the sqaurenumber is more than 0 and less than 5, its placed in the right row. My question is, is there a better way to do this for the rest? instead of writing a bunch of lines for this, is there are way to do it in a few?

Answer 1

Your parameters want the row, then the column

private static void MapSquareNumToScreenRowAndColumn(int squareNumber,
                                    out int rowNumber, out int columnNumber) {

but you have it backwards:

MapSquareNumToScreenRowAndColumn(i, out coloumn, out row);

Answer 2

I can give you a hit, but I cant tell you everything cause im in the same class. haha.

Basically:

the coordinates (x,y) is the same as (columnNumber,rowNumber) be careful not to confuse these. Where columnNumber = x and rowNumber = y.

Now to work out what x and y we are in, we just do simple math.

Table size: (6,7) (6 wide by 7 high),

we can calculate what x and y are according to index.

so lets start with x:

to solve for what x is, all we need to do is find out how many across it is at any given time. So simply:

x = index % table.width

now we solve for y this requires that we count back from max to min. so:

 y = table.height - (index/table.width)

Also we divide in int for so that the decimals just fall of the end which is what we want in this situation. we are dividing by the width, because we want to work out how many columns it has gone through to get to the current location.

Now to get the reversing effect, we basically want this to happen every odd column so all we need to do is basically:

 if (y % 2 != 0) { //if it is an odd number
    x = table.width - x;
 }

to create that inverse effect;

ALSO, remember KEY POINT, table.width and table.height = keys, so if table.width = 6 then the key is 5 because of the array starting at 0...

Hope that helps.