dojo toolkit, function documentation ?

[Ditto11]

Is there any documentation listing the functions for the dojo toolkit? I'm trying to undrestand it, and find a function to do something, however, I can't seem to find any good documentation on it?
(is this the best there is:
https://dojotoolkit.org/reference-guide ... index.html
)

For example . in Chess game, there is this block of code:

Code: Select all

                dojo.place( this.format_block('jstpl_piece', {
                    piece_id:piece.piece_id,
                    piece_color:piece.piece_color,
                    piece_type:piece.piece_type
                } ), $ ( 'board' ) );

which is responsible for "creating" a piece and placing it in the "board" div layer (as defined in this .tpl section):

Code: Select all

	<div id="board" class="{BOARD_TYPE}">
	

That much I've understood. And in fact, my learning "game", uses multiple boards, so I have 3 board div "layers", and I successfully create all pieces on their proper boards ...

Code: Select all

         <div id="board_0"
   ...
                  <div id="board_1"
   ...
                   <div id="board_2"

and then I call the dojo call like this:

Code: Select all

               $board = 'board_' + $z;
                dojo.place( this.format_block('jstpl_piece', {
                    piece_id:piece.piece_id,
                    piece_color:piece.piece_color,
                    piece_type:piece.piece_type
                } ), $ ( $board ) );
                

and this works perfectly ... until the piece moves from 1 board to another. At this point, the piece "vanishes" (ie moves behind the other board layer), and only reappears upon F5/refresh. (when the code re-loads/re-draws, and re-places it on the proper board via the above dojo.place call)

I've tried adding the dojo.place in the spot where the piece moves, however, that leads to other issues:
- new piece created
- no events attached
- old piece still exists, albeit hidden behind layer ..
... etc.

so I'm trying to understand the other functions available in dojo that may help me?

[robinzig]

I'd recommend to just not use dojo - there's no reason to use it, at least for 99% of the things the BGA framework uses it for. You can just use vanilla JS to place DOM elements, add/remove classes, query for elements, and so on.

EDIT: the specific issue you describe sounds more like you're doing something wrong in the BGA framework as a whole - it's quite intricate to learn at first so there's no shame in that. Without seeing some code or, perhaps more importarntly, where you're putting it, it's hard to say what exactly might be wrong.

[Ditto11]

I'd recommend to just not use dojo - there's no reason to use it, at least for 99% of the things the BGA framework uses it for. You can just use vanilla JS to place DOM elements, add/remove classes, query for elements, and so on.

EDIT: the specific issue you describe sounds more like you're doing something wrong in the BGA framework as a whole - it's quite intricate to learn at first so there's no shame in that. Without seeing some code or, perhaps more importarntly, where you're putting it, it's hard to say what exactly might be wrong.

ok, that's fair .. yeah, I'm trying to learn ok . so here's the issue:

.tpl block:

Code: Select all

<div id="dragonchess_game_area">
      <div id="frame" class="frame">
         <div id="board_0" class="board_size_12">
            <!-- BEGIN eventlayer_0 -->
            <div class="dragonchess_cell_upper {CELL_TYPE_CLASS}" style="top: {POS_FROM_TOP}px; left: {POS_FROM_LEFT}px;">
               <div id="cell_{COORD_X}_{COORD_Y}_{COORD_Z}" class="dragonchess_cell" >
                  <div class="coordinate col_number" style="display:{COL_NUM_DISPLAY}; top:{COL_NUM_OFFSET}px; left:27px;">{COL_NUM}</div>
                  <div class="coordinate row_number" style="display:{ROW_NUM_DISPLAY}; left:{ROW_NUM_OFFSET}px; top:22px;">{ROW_NUM}</div>
               </div>
            </div>
            <!-- END eventlayer_0 -->
         </div>
      </div>
      <div id="frame" class="frame">
         <div id="board_1" class="board_size_12">
            <!-- BEGIN eventlayer_1 -->
            <div class="dragonchess_cell_middle {CELL_TYPE_CLASS}" style="top: {POS_FROM_TOP}px; left: {POS_FROM_LEFT}px;">
               <div id="cell_{COORD_X}_{COORD_Y}_{COORD_Z}" class="dragonchess_cell" >
                  <div class="coordinate col_number" style="display:{COL_NUM_DISPLAY}; top:{COL_NUM_OFFSET}px; left:27px;">{COL_NUM}</div>
                  <div class="coordinate row_number" style="display:{ROW_NUM_DISPLAY}; left:{ROW_NUM_OFFSET}px; top:22px;">{ROW_NUM}</div>
               </div>
            </div>
            <!-- END eventlayer_1 -->
         </div>
      </div>
      <div id="frame" class="frame">
         <div id="board_2" class="board_size_12">
            <!-- BEGIN eventlayer_2 -->
            <div class="dragonchess_cell_lower {CELL_TYPE_CLASS}" style="top: {POS_FROM_TOP}px; left: {POS_FROM_LEFT}px;">
               <div id="cell_{COORD_X}_{COORD_Y}_{COORD_Z}" class="dragonchess_cell" >
                  <div class="coordinate col_number" style="display:{COL_NUM_DISPLAY}; top:{COL_NUM_OFFSET}px; left:27px;">{COL_NUM}</div>
                  <div class="coordinate row_number" style="display:{ROW_NUM_DISPLAY}; left:{ROW_NUM_OFFSET}px; top:22px;">{ROW_NUM}</div>
               </div>
            </div>
            <!-- END eventlayer_2 -->
         </div>
      </div>
	<div id="start_position_reminder"></div>
</div>

<script type="text/javascript">

// Javascript HTML templates
var jstpl_piece = '<div id="piece_${piece_id}" class="clickable dragonchess_piece ${piece_color}_piece ${piece_type}_symbol"></div>';

</script>

In there, I have declared 3 "boards", "board_0", _1, and _2.

in the .js script, setup() function, I have this block, inside a loop for each piece .. and is used to create/place the piece on the matching "board"

Code: Select all

                dojo.place( this.format_block('jstpl_piece', {
                    piece_id:piece.piece_id,
                    piece_color:piece.piece_color,
                    piece_type:piece.piece_type
                } ), $ ( $board ) );

                this.slideToObject( $('piece_'+piece.piece_id), $('cell_'+piece.piece_x+'_'+piece.piece_y+'_'+piece.piece_z), 1000 ).play();

this is all - so far - pretty much "copy/paste" from the Chess game ... I just tweaked it to handle 3 boards
It works perfectly ...
until a piece if moved between boards. and what's even stranger ... if we move a piece from "board_1" to "board_0" there is no issue .. the piece is still visible and properly placed .. no issue.
The only problem is when moving "down" .. from "board_0" to "board_1" or from "board_1" to "board_2" ... the piece vanishes, and I'm guessing it's drifting "behind" the lower board layer ?

This is the line that actually animates the move .. and as long as it ends on same board, or "higher" (ie lower index ) it's fine ..

Code: Select all

           	anims.push(this.slideToObject( $('piece_'+$piece_id), $('cell_'+ $dest_x +'_'+ $dest_y +'_'+ $dest_z ), 500, delay ));

So I'm thinking I have to tell it that the piece no longer belongs to layer "board_1" for example ..and should now belong to "board_2".
Note, that F5, refresh "fixes" the display issue for both players just fine. So as the F5 triggers/re-runs the setup logic (and hence "places" the piece on the proper board), things fix with that.

So now I have to figure out how to do that at the time the piece moves so F5 isn't needed.

[robinzig]

Ah thanks - so this isn't a framework issue at all but basic CSS. Elements later in the DOM are "on top" of earlier ones, and the same applies to all their children (no matter how you might then play with `z-index` CSS properties). To get this animation to work without pieces "vanishing" underneath the boards.

I've found this myself and it's annoying. I don't know if there's a "better" solution, but what you can do is have a separate div "below" all the boards and temporarily move any moving piece there at the start of the animation, and then back again when the animation is over. And by "move" I don't mean physically move on the screen, just change which DOM element is its parent, while keeping it in the same position. The BGA framework has a helpful JS function for exactly this, called `attachToNewParent`, which you can search for in the docs https://en.doc.boardgamearena.com/Game_ ... amename.js (unfortunately there doesn't seem to be a way to link directly to that particular part).

Good luck

[Ditto11]

Elements later in the DOM are "on top" of earlier ones, and the same applies to all their children (no matter how you might then play with `z-index` CSS properties).

This much I had inferred, and assumed, however, it's always good to have this confirmations as we learn this stuff Thank you!

And by "move" I don't mean physically move on the screen, just change which DOM element is its parent, while keeping it in the same position.

yep, this is exactly what I'm looking for and trying to figure out how to do

The BGA framework has a helpful JS function for exactly this, called `attachToNewParent`, which you can search for in the docs https://en.doc.boardgamearena.com/Game_ ... amename.js (unfortunately there doesn't seem to be a way to link directly to that particular part).

Good luck

SWEET! .. Got it! took about 10 min of fiddling .. that function worked, of course, however, just as the disclaimer said, it lost all it's "hot spots", so after moving, couldn't click on the piece anymore ... so followed the link to the attachToNewParentNoDestroy function, dropped it in, and viola .. I just had to find the right spot to put it.

At first, I had it after the animation ... however, it seems that interferes with the animation (ie changing parent, cancels the animation) .. so moving it up front, prior to animation works like a charm ... no issues with it vanishing anymore, or such.!!!

Thank you kindly! this was pretty much my last real hurdle in understanding things
Appreciate the help on this over the last week or so .. Really helpful to get a bit more confortable with the BGA framework, Javascript, css, php ..