[Solved] Grid building doesn't work as intended by tutorial, insert_block loop only inserts last block

[Tichodrome Colvert]

Hi,

I'm a new developer and I'm trying to learn how to develop games on Board Game Arena Studio. For that and to get a grasp on how the framework works I'm currently following the Reversi tutorial.

I'm currently trying to create the grid using the insert_block function. I've copy-pasted the code from the tutorial:

HTML in .tpl file:

Code: Select all

 <div id="board">
    <!-- BEGIN square -->
        <div id="square_{X}_{Y}" class="square" style="left: {LEFT}px; top: {TOP}px;"></div>
    <!-- END square -->
 </div>

PHP:

Code: Select all

$this->page->begin_block( "reversi_reversi", "square" );
        
        $hor_scale = 64.8;
        $ver_scale = 64.4;
        for( $x=1; $x<=8; $x++ )
        {
            for( $y=1; $y<=8; $y++ )
            {
                $this->page->insert_block( "square", array(
                    'X' => $x,
                    'Y' => $y,
                    'LEFT' => round( ($x-1)*$hor_scale+10 ),
                    'TOP' => round( ($y-1)*$ver_scale+7 )
                ) );
            }        
        }

And the result is this visually:



Only the bottom red block appears as a red square, even though from the tutorial I should have expected a grid full of red squares. You can see using my browser's developer tools:



I do not understand why that is the case. It seems like every time the insert_block functions is called it overrides the last inserted block instead of adding it. So I add the following lines of code after the unedited PHP code from the tutorial:

Code: Select all

 $this->page->insert_block( "square", array(
                    'X' => 1,
                    'Y' => 1,
                    'LEFT' => 10,
                    'TOP' => 70
                ) );

It gave the following result:



The bottom right square is replaced by a top left square which is exactly as expected.

How to make sure that the function insert_block adds a block instead Is the tutorial out of date? Or did I miss something obvious to make sure that blocks are added instead of overwritten?

Worst case scenario as a workaround I define all blocks in the .tpl file but I'd like to avoid that especially if at some point I ever have to make a game with dynamic and variable block insertion.

Thanks for your help!

[Ditto11]

I just completed the tutorial myself a few weeks ago, so it shouldn't be that out of date .. as it worked for me then.

I cannot, however, remember exactly what I did around that point, except I learned that with this stuff, any chance to .css and such, you have to force refresh (ie Shift + Refresh) (or Shift - F5). It starts becoming a habit while you're doing development If that doesn't work .. not sure, I'd have to go through the tutorial again myself hoping that works for you.

[Tichodrome Colvert]

I solved the problem! It was because of this line:

$this->page->begin_block( "reversi_reversi", "square" );

Then I realized that I'm following the tutorial in a project named "truc" (French slang for "thing") instead of "reversi", so I changed the line to the following:

$this->page->begin_block( "truc_truc", "square" );

And now it works!

I can now follow the tutorial and keep learning to develop with BGA Studio! Hopefully I won't have to ask for help again too early!

[jpGamerX]

Hey there. I am new to the BGA platform and following the Reversi tutorial.
I am encountering an error in the section this post deals with, specifically the "begin_block" to build out the 8x8 grid over the board image.

I've nailed it down to the line in the file `testreversijtp.view.php`:

Code: Select all

$this->page->begin_block( "testreversijtp_testreversijtp", "square" );

I am getting the error: Template Error: set_block: unable to set block square.

The CSS:

Code: Select all

#board {
    width: 536px;
    height: 528px;
    background-image: url('img/board.jpg');
    position: relative;
}

.square {
    width: 62px;
    height: 62px;
    position: absolute;
    background-color: red;
}

The PHP:

Code: Select all

        $this->page->begin_block( "testreversijtp_testreversijtp", "square" );
        $hor_scale = 64.8;
        $ver_scale = 64.4;
        for ($x = 1; $x <= 2; $x++ ) {
            for ($y = 3; $y <= 4; $y++ ) {
                $this->page->insert_block( "square", array(
                    'X' => $x,
                    'Y' => $y,
                    'LEFT' => round( ($x-1) * $hor_scale + 10 ),
                    'TOP'  => round( ($y-1) * $ver_scale + 7 )
                    )
                );
            }
        }

The TPL:

Code: Select all

<div id="board">
    <!-- BEGIN square -->
        <div id="square_{X}_{Y}" class="square" style="left: {LEFT}px; top: {TOP}px;"></div>
    <!-- END   square -->
</div>

If I comment out that line I will see that the for loops are executing, but generating an error for Notice: Undefined index: square in APP_Template.inc.php on line 179. It occurs 64 times as expected. It also renders the board image with the lower right square red. In dev tools i see:

Code: Select all

<div id="board">
    <!-- BEGIN square -->
        <div id="square_8_8" class="square" style="left: 464px; top: 458px;"></div>
    <!-- END   square -->
</div>

Like in this post, if I edit the .tpl file and add divs with the X, Y, LEFT, and TOP set the block will render.
I also tried putting 4 divs in and looping over just 2 x and y values to see if I could get 4 blocks. I get 4 divs, but all with the same left and top:

Code: Select all

<div id="board">
    <!-- BEGIN square -->
        <div id="square_1_3" class="square" style="left: {LEFT}px; top: {TOP}px;"></div>
        <div id="square_1_4" class="square" style="left: {LEFT}px; top: {TOP}px;"></div>
        <div id="square_2_3" class="square" style="left: {LEFT}px; top: {TOP}px;"></div>
        <div id="square_2_4" class="square" style="left: {LEFT}px; top: {TOP}px;"></div>
    <!-- END   square -->
</div>

with this code in the view.php file:

Code: Select all

        // causes error Template Error: set_block: unable to set block square.
        //$this->page->begin_block( "testreversijtp_testreversijtp", "square" );
        $hor_scale = 64.8;
        $ver_scale = 64.4;
        for ($x = 1; $x <= 2; $x++ ) {
            for ($y = 3; $y <= 4; $y++ ) {
                $this->page->insert_block( "square", array(
                    //'X' => $x,
                    //'Y' => $y,
                    'LEFT' => round( ($x-1) * $hor_scale + 10 ),
                    'TOP'  => round( ($y-1) * $ver_scale + 7 )
                    )
                );
            }
        }

with element code:

Code: Select all

<div id="board">
    <!-- BEGIN square -->
        <div id="square_1_3" class="square" style="left: 75px; top: 200px;"></div>
        <div id="square_1_4" class="square" style="left: 75px; top: 200px;"></div>
        <div id="square_2_3" class="square" style="left: 75px; top: 200px;"></div>
        <div id="square_2_4" class="square" style="left: 75px; top: 200px;"></div>
    <!-- END   square -->
</div>

Environment: tested with both Chrome and Firefox latest with many refresh:

• Windows 10 Pro build 19045.4291
• Firefox 125.0.3 (64 bit)
• Chrome 124.0.6367.119 (Official Build) (64-bit)
• IDE VSCode latest

[xiongmao1298]

It's because of extra spaces in

Code: Select all

<!-- END   square -->

This should make the template parser work properly.

Code: Select all

<!-- END square -->

[jpGamerX]

It's because of extra spaces in

Code: Select all

<!-- END   square -->

This should make the template parser work properly.

Code: Select all

<!-- END square -->

Ah! Got it. Surprising that the extra spaces between END and block name was the issue.
Thanks!
Cheers.