Board Game Arena

Posted: **03 March 2021, 20:42**

Just as the topic says, I'm using PHP to build the board at page load, but it doesn't seem to be firing again when I add a new element after the page is done (at least my self::dumps aren't showing up in the logs), so I'm trying to build the element temporarily in Javascript.

my php template:

Code: Select all

 <!-- BEGIN piece -->
        <div id="piece_{X}_{Y}" class="piece piece_{KIND}_{COLOR}_{SIDE}" style="left: {LEFT}px; top: {TOP}"></div>
    <!-- END piece -->

php placement

Code: Select all

  $this_player_id = $g_user->get_id();
            $actual_x = ( $this_player_place == 1 ? $tile['x'] : 7-$tile['x'] );
            $actual_y = ( $this_player_place == 1 ? $tile['y'] : 7-$tile['y'] );
            $top = '';
            $top = round( ($actual_y-1)*101+2 ) . "px; ";
            if ($tile['color'] != $players[$this_player_id]['color']) {$top = $top . ' transform: rotate(180deg); ';}
            self::dump("top after if: ", $top);
            $this->page->insert_block( "piece", array(
                'X' => $actual_x,
                'Y' => $actual_y,
                'LEFT' => round( ($actual_x-1)*101+2 ),
                'TOP' => $top,
                'KIND' => $tile['kind'],
                'COLOR' => $tile['color'],
                'SIDE' => $tile['side'],
                'OWNER' => $this_player_id

Javascript template:

Code: Select all

var jstpl_piece='<div id="piece_${x}_${y}" class="piece piece_${kind}_${color}_${side}" style="left: ${LEFT} top: ${TOP} "></div>';

Javascript placement:

Code: Select all

	thisx = Number(((x-1)*101)+2);
    thisx = thisx + "px; ";
	thisy = Number(((y-1)*101)+2);
    thisy = thisy + "px; ";
            dojo.place( this.format_block( 'jstpl_piece', {
		kind: kind,
		color: color,
		side: side,
		left: thisx,
		top: thisy,
        x: x,
        y: y
            } ) , 'pieces' );

And here's how the JAVASCRIPT element appears in the html. (piece_4_1 was generated by the php at page load, piece 3_1 was just placed in JS)

Code: Select all

<div id="piece_4_1" class="piece piece_footman_light_A" style="left: 305px; top: 2px;  transform: rotate(180deg); "></div>
<div id="pieces">
	<div id="piece_3_1" class="piece piece_duke_dark_A" style="left: $305 top: $2px;  transform: rotate(180deg);  "></div>
</div>

It looks like it's trying to replicate the PHP formatting when it shouldn't be (and I also don't know where the dollar signs are coming from). Feels like it's trying to spit out a php variable (ie $top) into javascript (where $ is just a character and top is the variable), but I can't figure out why or where it would do that (other than what I'm trying to do being a no no) and I don't see it in the documentation anywhere.

Posted: **03 March 2021, 21:54**

Why is it not the same key ? "LEFT" vs "left" ?

Posted: **03 March 2021, 22:06**

I've mostly figured it out. The issue was actually in the PHP placement (the bug was only happening after a page refresh of the current player when they needed to place a piece). I was having an issue with the flipping of the board, calling it rows 1 - 6 for player 1 and 6 - 1 for player 2 but then i was doing the math inconsistently (sometimes always 1-6 and sometimes properly). So it was tripping over itself trying to place things. Once I figured that out, pieces starting falling in place. Now I just have an issue with it flipping pieces its not supposed to (ie your opponents pieces are supposed to be inverted, as they would be at the table), but it seems to also be inverting player 2's pieces. Not really asking for more help; just saying that I think I figured it out. Just putting my thoughts together I think helped.

Posted: **04 March 2021, 00:11**

The short answer is that having a javascript and a php class with the same id's and the same fields DOES cause problems. I finally figured it all out when I noticed the template in the html (when I did a view source) had the dollar signs and values instead of the template variables. I changed LEFT to LEF and TOP to TOPO in the JS template and the corresponding places in the JS and so far I'm in business.

Posted: **04 March 2021, 14:25**

Ciffy wrote: ↑04 March 2021, 00:11 The short answer is that having a javascript and a php class with the same id's and the same fields DOES cause problems. I finally figured it all out when I noticed the template in the html (when I did a view source) had the dollar signs and values instead of the template variables. I changed LEFT to LEF and TOP to TOPO in the JS template and the corresponding places in the JS and so far I'm in business.

Well that's precisely what I was pointing earlier... The js substition is perfect match, so LEFT and left is not the same.

Board Game Arena

is there an issue with having a jstpl template and a php.view template with the same name?

is there an issue with having a jstpl template and a php.view template with the same name?

Re: is there an issue with having a jstpl template and a php.view template with the same name?

Re: is there an issue with having a jstpl template and a php.view template with the same name?

Re: is there an issue with having a jstpl template and a php.view template with the same name?

Re: is there an issue with having a jstpl template and a php.view template with the same name?