Javascript this.placeOnObject

[Cowseye]

Hi all,

Would like to clarify the meaning of the variables in the Javascript method for placeOnObject. I will be using the scripts example from reversi.

Code: Select all

this.placeOnObject( 'disc_'+x+''+y, 'overall_player_board_'+player );

I assume the first value 'disc_'+x+''+y is the id of the disc that to be place on the board in define in both the tpl file and created via the dojo.place method within the addDiscOnBoard. Do correct me if I am wrong.

The second variable 'overall_player_board_'+player, however, I do not understand where this 'overall_player_board_' had been define. in the tpl file and css file, the reversi board was name 'board'.

With regards to this script for my own project, if I am adding tokens on board that is a part of the setup and these tokens do not belong to any player, what should I state as the second variable for this.placeOnObject?

[Andy_K]

The overall player board is the summary in the top right. It won't exist in the template file.

The second variable in the call is the object you're putting the disc on, so this could be the player summary, an individual player board, token stack, etc. Typically what I would do is most situations is drop the object on an appropriate 'source' (e.g stack of tokens, or overall player summary) and then animate it to it's desired destination. This is easier for players to keep track of than stuff just appearing on the board

[Cowseye]

Thank you for your reply! If the token I am dropping is on the main player board, in a div I defined in the tpl file, I should just write the div ID?

[Andy_K]

Yeah, the div id is what the function uses to define the target.

If I remember correctly, it will by default position the centre of the object you're dropping on the centre of the target div, but I'd have to double check this. So assuming there is a particular point on the target div you want the token to appear, you have a couple of options:
1)Use PlaceOnObjectPos which does the same thing but allows you to offset the x and y positions on the target object
2)Define another div within the parent div positioned at the point you want your token to appear, and place on this div instead.

[Cowseye]

Thanks Andy, you had been very helpful. Will feedback after I try things out!

[Cowseye]

Hi Andy and other peeps, I met even more confusing error that I do not know how to handle.

I try to test placing tiles by creating template in jstpl.

Inside mygame.tpl:

Code: Select all

<script type="text/javascript">

// Templates
var jstpl_tileonboard='<div class="tileonboard ${fs} ${tiletype}" id="tob_${loc}"></div>';

</script> 

Inside mygame.js under Utility methods:

Code: Select all

/* fsno and fstype controls the css style to load, boardloc controls on which predefine div should the tile slides to. */
addTileOnBoard: function(fsno, fstype, boardloc)
 {
	dojo.place(this.format_block('jstpl_tileonboard', {
     											fs: fsno,
       											tiletype: fstype,
       											loc: boardloc 	
        									}),
       							'tilesOnBoard');
      		
	this.placeOnObject('tob_'+boardloc, 'smalltile_FS1_1');
        this.slideToObject('tob_'+boardloc, 'smalltile_'+boardloc).play();
        	
}

Inside mygame.js under setup function:

Code: Select all

this.addTileOnBoard('fs1', 'rhb3', 'RH1');

Upon loading the above, the game hangs and forever "Application Loading"....

To debug, I drag out the codes within the addTileOnBoard and place it within setup:

Code: Select all

// Setup game notifications to handle (see "setupNotifications" method below)
            this.setupNotifications();
            
            //this.addTileOnBoard('fs1', 'rhb3', 'RH1');
            
            console.log('before dojo place');
            
            dojo.place(this.format_block('jstpl_tileonboard', {
        											fs: 'fs1',
        											tiletype: 'rhg3',
        											loc: 'RH1' 	
        									}),
        							'tob');
        		console.log('before place on object');
        		this.placeOnObject('tob_RH1', 'smalltile_FS1_1');
        		console.log('before slide');
        		this.slideToObject('tob_RH1', 'smalltile_RH1').play();

            console.log( "Ending game setup" );

Instead, I manage to get some error messages but I do not understand what is wrong:

Code: Select all

Javascript error:
During pageload
Cannot read property 'ownerDocument' of null
TypeError: Cannot read property 'ownerDocument' of null
at Object.place (http://1.studio.boardgamearena.com:8081/data/themereleases/151226-1240/js/dojoroot/dojo/dojo.js:15:98154)
at Object.setup (http://1.studio.boardgamearena.com:8081/data/themereleases/151226-1240/games/greatwesterntrailgwt/999999-9999//greatwesterntrailgwt.js?1484841945925:69:18)
at Object.completesetup (http://1.studio.boardgamearena.com:8081/data/themereleases/151226-1240/js/modules/layer/ly_studio.js:15:492227)
at http://en.1.studio.boardgamearena.com/greatwesterntrailgwt?table=34653:812:24
at _cc (http://1.studio.boardgamearena.com:8081/data/themereleases/151226-1240/js/dojoroot/dojo/dojo.js:15:11822)
at _37 (http://1.studio.boardgamearena.com:8081/data/themereleases/151226-1240/js/dojoroot/dojo/dojo.js:15:13422)
.
.
.
.
.
.

I cannot understand what am I doing wrong. The error seems like it's coming from dojo.place(). Which means it has error being created?

[Andy_K]

Ownerdocument of null with the positional code utilities typically means you've referenced a div which doesn't exist. Determine which of the lines is causing the error (place, placeonobject, and slidetoobject), and then check the source and target divs you're referring to exist on the page at the time you're referencing them

[Cowseye]

Thanks Andy. I realise my mistakes were:

1. Did not define the div in the html portion of the template that suppose to represent tilesonboard .
2. I miss adding a comma after the curly brackets of a declared function in the mygame.js file.