[solved] Reversi tutorial. First step: board image isn't displayed.

[tanza]

Hi,
I'm a beginner with BGA studio.
I try to do the Reversi tutorial.
I did the first step to display the board image.

When I start the game, I have no error, only a warning for game artist.
But the board isn't displayed.

What should I do?

Thanks for your help.

[A-dam]

Hi,

welcome to studio! There is lot of things which can be wrong. I would start following this:
- try clear your browser cache (for example ctrl+F5)
- is the board dom element present? - try investigate with browser developer tool
- if so, did you update your css file properly?
- if not something is wrong with placement - is your tpl updated correctly? is view.php ok? is your js file set up properly?

without specifying the problem, it is hard to guess where exactly is your problem, but this is at least something where you can start looking..

[tanza]

Hi,

welcome to studio! There is lot of things which can be wrong. I would start following this:
- try clear your browser cache (for example ctrl+F5)
- is the board dom element present? - try investigate with browser developer tool
- if so, did you update your css file properly?
- if not something is wrong with placement - is your tpl updated correctly? is view.php ok? is your js file set up properly?

without specifying the problem, it is hard to guess where exactly is your problem, but this is at least something where you can start looking..

I cleared my browser cache.
And tried on a computer and smartphone.

What's the board dom element?
Nothing is said about it in the tutorial.

I updated my css file.

What do you mean by updating my tpl correctly?

What about view.php and js files? Nothing is said in the tutorial about view.php and js files in the first step, where only the board must be displayed.

I did what is said in the first step of the Reversi tutorial.
https://en.studio.boardgamearena.com/do ... l_reversi

I copied the few code lines in the tpl and css files.

Code: Select all

<div id="board">
</div>

and

Code: Select all

#board {
   width: 536px;
   height: 528px;
   background-image: url('img/board.jpg');
}

I called the css tutorialmyname.css (instead of reversi.css) and uploaded the files with ftp: tpl, css and jpg.

[A-dam]

If you want to programm web pages you need to know what is dom element, try https://www.w3schools.com/jsref/dom_obj_all.asp

You need to investigate what is wrong, open developer tool (depends on browser you use, for example ctrl+shift+c) and you will see the whole structure of the webpage, if you can find your div "board " tag than something wrong must be with your css, if you dont see div element at all than it is most probably your tpl wich is wrong.

[tanza]

If you want to programm web pages you need to know what is dom element, try https://www.w3schools.com/jsref/dom_obj_all.asp

You need to investigate what is wrong, open developer tool (depends on browser you use, for example ctrl+shift+c) and you will see the whole structure of the webpage, if you can find your div "board " tag than something wrong must be with your css, if you dont see div element at all than it is most probably your tpl wich is wrong.

I open the developer tool to see the html page.
There's no board element.

Here is the tpl file

Code: Select all

{OVERALL_GAME_HEADER}

<div id="board">
</div> 

<script type="text/javascript">
</script>  

{OVERALL_GAME_FOOTER}

Please tell me what's wrong.

[A-dam]

Well your code looks OK, it is hard to tell without seeing all.. Only way I can help you is, if you tick "Allow other studio developers to get readonly access to this project source code (checked by default)" on control panel page. Than I can have a look to whole project...

[tanza]

Well your code looks OK, it is hard to tell without seeing all.. Only way I can help you is, if you tick "Allow other studio developers to get readonly access to this project source code (checked by default)" on control panel page. Than I can have a look to whole project...

Done.

[A-dam]

you are missing import line in your css file

@import url(../../../css/csslayer.css); /* Note: you must not use any @import directive other than this one */

this is quite important... And by the way, your board was on the page, you just did not find it in developer tool...

[tanza]

you are missing import line in your css file

@import url(../../../css/csslayer.css); /* Note: you must not use any @import directive other than this one */
this is quite important...

Thanks.
But the result is the same. Nothing is displayed.

[A-dam]

Did you upload css file with the import line added? Did you clear your cash?