[Solved] Gomoku tutorials

[Carsiko]

Hi I'm a developer and I'm trying to learn how to develop games on BGA.
I am struggling with the Gomoku tutorial and I would like to know if there is a working project repository in which to see if I have followed the guide correctly. I'm having problems with the stones appearing (not a CSS problem) and I'm sure it's because I put some code in the wrong place, but the guide is sometimes not very clear. Thanks in advance

[TyrenDe]

I'm still pretty new, but first you need to figure out if this is an HTML/CSS thing, a template thing, or a data thing.

Let me try to explain what I understand. So, when you first load the game/refresh, it does a quick pull to get the "current state" (the getAllDatas) in PHP. This is called and you should have a javacscript function that uses that data (setup).

This renders the "intersection" template.

Code: Select all

var jstpl_intersection='<div class="gmk_intersection ${stone_type}" id="intersection_${x}_${y}"></div>';

That includes the "stone_type" class which is "no_stone" or 'stone_' + intersection.stone_color where stone color will be "white" or "black" which points to this CSS:

Code: Select all

.gmk_intersection {
    width: 30px;
    height: 30px;
    position: relative;
    background-image: url( 'img/stones.png' );
}
.no_stone { background-position: -60px 0px; }
.stone_black {  background-position: 0px 0px; }
.stone_white { 	background-position: -30px 0px; }

With all of this, it SHOULD create these divs and the styles should be correct. So, that's what I'd check first. Make sure the image is in the right place, uploaded too. Use the HTML dev tools to see if you can figure out of this is "server side" (php) or "client side" (html).

[Carsiko]

Thanks a lot for the tip. This morning I created a new project from scratch and now I can see the stones, but a new problem: they are always black, regardless of the player. It's very strange, because in the tutorial code it's quite reduced to a copy-paste, so I don't know where and what went wrong .

[TyrenDe]

Black happens to be the "default" that is, no offset value. So, I'm guessing your CSS isn't correct or updated. Again, use the browser dev tools and inspect the intersection divs. What styles does it have on it? "stone_black"? "stone_white"? "no_stone"? It should be one of those 3 right?

If it is no_stone or stone_white, does the CSS applied look correct (the offset background position to support CSS based sprites)?

[Carsiko]

I checked the css again and I confirm it is correct and correctly loaded. Before clicking on an intersection the class is no_stone, after clicking it becomes black_stone, regardless of the player. So at this point I think there is an error in the js file, which should be the one that decides the color of the stone in the setup function (if I understood correctly)

Code: Select all

setup: function( gamedatas )
        {
            console.log( "Starting game setup" );
            
            // assign the constants to this variable
            this.gameConstants = gamedatas.constants;

            // Setting up player boards
            for( var player_id in gamedatas.players )
            {
                var player = gamedatas.players[player_id];
                         
                // TODO: Setting up players boards if needed
            }
            
            // TODO: Set up your game interface here, according to "gamedatas"
                        // Setup intersections
                        for( var id in gamedatas.intersections )
                        {
                            var intersection = gamedatas.intersections[id];
            
                            dojo.place( this.format_block('jstpl_intersection', {
                                x:intersection.coord_x,
                                y:intersection.coord_y,
                               stone_type:(intersection.stone_color == null ? "no_stone" : 'stone_' + intersection.stone_color)
                            } ), $ ( 'gmk_background' ) );
            
                            var x_pix = this.getXPixelCoordinates(intersection.coord_x);
                            var y_pix = this.getYPixelCoordinates(intersection.coord_y);
                            
                            this.slideToObjectPos( $('intersection_'+intersection.coord_x+'_'+intersection.coord_y), $('gmk_background'), x_pix, y_pix, 10 ).play();
            
                            if (intersection.stone_color != null) {
                                // This intersection is taken, it shouldn't appear as clickable anymore
                                dojo.removeClass( 'intersection_' + intersection.coord_x + '_' + intersection.coord_y, 'clickable' );
                            }
                        } 

                         // Add events on active elements (the third parameter is the method that will be called when the event defined by the second parameter happens - this method must be declared beforehand)
                        this.addEventToClass( "gmk_intersection", "onclick", "onClickIntersection");
 
            // Setup game notifications to handle (see "setupNotifications" method below)
            this.setupNotifications();

            console.log( "Ending game setup" );
        },

[TyrenDe]

I'm more suspect of the data coming down. Again, using the browser dev tools you can use JS to dump the object:

Code: Select all

console.log(gamedatas);

Then in the dev console, inspect "gamedatas". What does it say? Does it have the correct colors or is it wrong?

I strongly suspect it is wrong, so that means your PHP side is wrong. Check the DB contents where that data is coming from, use a self::dump(variable) to look at the contents of the results, etc.

[Carsiko]

Thanks again. I solved. The problem was actually in the game.php file, in the player color assignment. While I replaced the default colors (red and green) with #000000 and #ffffff, there was a line of code calling up the previous default colors that I hadn't seen (and wasn't noted in the tutorial). So with the player colors being red and green, the default color for all stones was black.
I've wasted over 5 hours on a stupid problem, I hate being a newbie
Thanks again for the tips, very useful.

For those who will have the same problem, I highlight the parts to be eliminated in the game.php file:

protected function setupNewGame($players, $options = array())
{
// Set the colors of the players with HTML color code
// The default below is red/green/blue/orange/brown
// The number of colors defined here must correspond to the maximum number of players allowed for the gams
$gameinfos = self::getGameinfos();
//$default_colors = $gameinfos['player_colors'];
$default_colors = array("000000", "ffffff");

// Create players
// Note: if you added some extra field on "player" table in the database (dbmodel.sql), you can initialize it there.
$sql = "INSERT INTO player (player_id, player_color, player_canal, player_name, player_avatar) VALUES ";
$values = array();
foreach ($players as $player_id => $player) {
$color = array_shift($default_colors);
$values[] = "('" . $player_id . "','$color','" . $player['player_canal'] . "','" . addslashes($player['player_name']) . "','" . addslashes($player['player_avatar']) . "')";
}
$sql .= implode(',', $values);
self::DbQuery($sql);
//self::reattributeColorsBasedOnPreferences($players, $gameinfos['player_colors']);
self::reloadPlayersBasicInfos();

[Victoria_La]

The code in template is correct, you cannot change the colors in the .php file, you have to change it gameinfos.inc.php

Code: Select all

    // Colors attributed to players
        'player_colors' => array( "ff0000", "008000", "982fff", "ffa500", "ffffff" ), //#982fff - purple

The only reason to remove reattribute code is if in your game while always goes first (like in chess)