Reversi Tutorial / Board not showing

[Harry_Tuttle]

I started with the Reversi Tutorial, but already at step 4, I'm stuck. I did follow the documentation, but the Board won't show up:

Here is my reversiturorial_reversiturorial.tpl:

{OVERALL_GAME_HEADER}

This is your game interface. You can edit this HTML in your ".tpl" file.

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


<script type="text/javascript">

// Javascript HTML templates

/*
// Example:
var jstpl_some_game_item='<div class="my_game_item" id="my_game_item_${MY_ITEM_ID}"></div>';

*/

</script>

{OVERALL_GAME_FOOTER}

And my sass;

#board {
// Setup Image
width: 536px;
height: 528px;
background-image: url('img/board.jpg');
// Center the board
margin: auto;
left: 0; top: 0; right: 0; bottom: 0;
// Tokens and squares are absolutely placed relative to the board
position: relative;
}

.square {
// Size of a square
width: 62px;
height: 62px;
// Position relative to the board, not affected by other elements.
position: absolute;
// Placeholder for validating the positions.
background-color: red;
}

I also did a hard refresh. Why is the board not showing?

[thoun]

Did you check on Network tab of F12 if the board file is correctly loaded? If no, can you check if it's on the img dir of your FTP repository?

[Harry_Tuttle]

I checked and the Status is 200. I can even see the preview of the board.jpg in the network tab. But how do I find the FTP repository?

[Harry_Tuttle]

I think I'm messing something up with the sass file. There is no id for board in the compiled css in the devtools. But I don't understand how it works with the .tpl file. Don't I need to import the scss there? I can't find something in the docs.

[thoun]

BGA doesn't support scss natively. If you use it instead of plain old CSS, you have to ensure your built keeps what you want.

[Harry_Tuttle]

Yes, I'll stick to css. That works, thanks. It's in the tutorial, that you should use the scss to style the board, but without any further explanation.

[thoun]

I don't see where in the reversi tutorial wiki where we say to use SCSS. If you see it, you can remove it

[Harry_Tuttle]

It's not in the wiki. It's in the read.me on github:

https://github.com/NevinAF/bga-ts-templ ... s/index.md

3. Add the following SCSS to the yourgamename.scss file to style the board:

#board {
// Setup Image
width: 536px;
height: 528px;
background-image: url('img/board.jpg');
// Center the board
margin: auto;
left: 0; top: 0; right: 0; bottom: 0;
// Tokens and squares are absolutely placed relative to the board
position: relative;
}

.square {
// Size of a square
width: 62px;
height: 62px;
// Position relative to the board, not affected by other elements.
position: absolute;
// Placeholder for validating the positions.
background-color: red;
}

[thoun]

This other tutorial explains how to setup TS/SCSS, but it's not the BGA reversi tutorial, and it's not maintained by the BGA team

[Harry_Tuttle]

Ahhh, I see. Thanks for clarifying. I will follow the wiki version than.