Board Game Arena

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?

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?

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?

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.

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.

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.

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

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;
}

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

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