Does the reversi tutorial is actually working ?

[lucbordare]

Hi !
I am new to BGA as developer, so I am trying to do my homework : reading the BGA Studio documentation, following the reversi tutorial.
I manage to upload new file (at least my text is displayed when testing the game), but the picture of the reversi board cannot be displayed.
As a deseperate action, I decided to copy reversi and to rename any instance of reversi to my testing game. But still, the board is not displayed. Also the console in Chrome browser displays some error.

Some help is very welcome !

Practically :
1) is the actual code of reversi tutorial working ?
2) How to get error messages in order to fix mistakes ?
3) How real people that implements new game in BGA are doing ? Following the tutos ? Or hacking hard ?

Thanks in advance !!!

[BrianLovesMarvel]

I'm also new, but just a little bit further down the road. There may be other, better ways. It will take some time to learn the framework, so give yourself small goals and take your time.

Everything is done using multiple files. This takes a while to get used to. The best files I have found for working with the display are:
* xxx_xxx.tpl
* xxx.css
* img/zzz.png

To show my board, I have this in my xxx_xxx.tpl file:

Code: Select all

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

And then I have this in my xxx.css file:

Code: Select all

#board {
   background-image: url('img/board.png');
}

And of course, the background image in "img/board.png".

That will do for the basics of your page. Once you get a little further, there are a few more files to learn about.
* xxx.view.php
* xxx.js, function setup
* xxx.game.php, function getAllDatas

These can be used to tune up the display with your tokens. These functions get activated when starting your game and whenever the user does a refresh. xxx.view.php is called on the server side and xxx.js setup function is called on the client side.

The server side xxx_game.php function getAllDatas lets you send data to the client js setup function. You'll have to save your game state (e.g. where your tokens are) in the database every turn. getAllDatas will access that data and send it to the client setup function. That lets you handle a refresh.

You'll want to get used to developer tools (F12 or Ctl-Shift-I) and explore the console errors carefully. I find console.log("var="+var) and alert(var) to be very helpful. Check the debugging and troubleshooting pages.

You'll need to break your game down into lots of little steps and program each one of them. You need to find the right functions in BGA studio to let you do each little step. It takes some time to find everything, but you can do it.

Best wishes, Brian

[Ciffy]

Hi !
I am new to BGA as developer, so I am trying to do my homework : reading the BGA Studio documentation, following the reversi tutorial.
I manage to upload new file (at least my text is displayed when testing the game), but the picture of the reversi board cannot be displayed.
As a deseperate action, I decided to copy reversi and to rename any instance of reversi to my testing game. But still, the board is not displayed. Also the console in Chrome browser displays some error.

Some help is very welcome !

Practically :
1) is the actual code of reversi tutorial working ?
2) How to get error messages in order to fix mistakes ?
3) How real people that implements new game in BGA are doing ? Following the tutos ? Or hacking hard ?

Thanks in advance !!!

I got through the reversi tutorial just recently so I know it works. Are you following it exactly? What error are you getting? The documentation is extremely thorough, but you have to dig a little. I'm working through my first game with tiny little baby steps, LOTS of trial and error and reading the docs and poking through other code. The copy of reversi in your ftp folder is functional, so you should be able to step through it and see where the differences are. As said above and in the tutorial, at the point where you are, you should ONLY have changes in the tpl file and the css.

One other thing I learned is the images HAVE to be setup as background-image properties in your css. You can't seem to list them in your tpl or php files. They simply don't load.

With more specific info, myself and others here will be glad to assist, but the framework is definitely not for the faint of heart. =)

[lucbordare]

Hi ! I am really happy that 2 personns have answered to my SOS.

Regarding my developper skills : I am used to develop scientific codes in C++ and Python ; as a hobb, I have already developed a game using HTML, CSS and javascript, but purely on the client side, the server side was very tiny (just connection and synchronization between two browsers thanks TogehterJS ; unfortunately the free server running TogetherJS is dead ...). So with time in front of me, PHP and SQL could be learn.

I am going to provide details about my issue :
- The observation : I cannot disply the board picture as explained in the reversi tutorial.
- My steps:
1) I created a new game "tutoseven" with bgg id "0".
2) I launched it using "play now" and then "create new table", followed by "express start" ; this triggered 3 testing players in addition to my logging account.
3) I stoped that game using "expressed stop" in some menu.
4) Then I launched "WinSCP" ; I see the distant "tutoseven" folder.
5) I copy locally tutoseven for modification.
6) I started modifying "tutoseven_tutoseven.tpl" (baby step) just for some displayed text "This is your game interface: 2021-0228-1914"
7) I update and launch the game, as before, and I see my modification; fine.
8) I copy the board.jpg of "reversi" into folder "tutoseven/img" ; from the tutorial, I copy/paste "<div id="board">This is your game interface: 2021-0228-1923</div>" fragment in "tutoseven_tutoseven.tpl" and copy/paste the fragment of CSS "#board ..." from reversi tutorial in to "tutoseven.css"
9) I update and test ; but the board picture is not displayed, but the witness text inside the <div> is displayed as expected. Is there something wrong about CSS file ?

Detail: I copy myself new/changed files from local to distant directories because WinSCP (my config probably) does not detect the changed files.

This is where I am ...

[Tisaac]

Hi ! I am really happy that 2 personns have answered to my SOS.

Regarding my developper skills : I am used to develop scientific codes in C++ and Python ; as a hobb, I have already developed a game using HTML, CSS and javascript, but purely on the client side, the server side was very tiny (just connection and synchronization between two browsers thanks TogehterJS ; unfortunately the free server running TogetherJS is dead ...). So with time in front of me, PHP and SQL could be learn.

I am going to provide details about my issue :
- The observation : I cannot disply the board picture as explained in the reversi tutorial.
- My steps:
1) I created a new game "tutoseven" with bgg id "0".
2) I launched it using "play now" and then "create new table", followed by "express start" ; this triggered 3 testing players in addition to my logging account.
3) I stoped that game using "expressed stop" in some menu.
4) Then I launched "WinSCP" ; I see the distant "tutoseven" folder.
5) I copy locally tutoseven for modification.
6) I started modifying "tutoseven_tutoseven.tpl" (baby step) just for some displayed text "This is your game interface: 2021-0228-1914"
7) I update and launch the game, as before, and I see my modification; fine.
8) I copy the board.jpg of "reversi" into folder "tutoseven/img" ; from the tutorial, I copy/paste "<div id="board">This is your game interface: 2021-0228-1923</div>" fragment in "tutoseven_tutoseven.tpl" and copy/paste the fragment of CSS "#board ..." from reversi tutorial in to "tutoseven.css"
9) I update and test ; but the board picture is not displayed, but the witness text inside the <div> is displayed as expected. Is there something wrong about CSS file ?

Detail: I copy myself new/changed files from local to distant directories because WinSCP (my config probably) does not detect the changed files.

This is where I am ...

Have you tried hard refresh ? Ctrl + R ? Disabling the cache ? Opening a private tab ?
What does the dev inspector (Ctrl + i) says about the css when you target the div ?

[remmievets]

I just saw this message and I was also having trouble with the tutorial. I just started looking at it today. I found that after every display update I have to clear the cache. Now things seem to be working for me. It looks like there is a "Disable cache" checkbox in the chorme debug window.

I am a C/C++ programmer. I've never done anything with HTML or javascript before, so doing anything web based is completely new to me.

Best of luck!

Steve

[lucbordare]

I tried "Ctlr + R", "Ctlr +i" and "disable cache" in the "network" menu of Chrome : but it does not change my issue, my picture 'img/board.jpg" is not displayed.

I tried another experience :
I inserted the following fragment in "tutoseven_tutoseven.tpl" and copied "img/board.jpg" as "img/my-board.jpg"

<div id="my-field" style="color:blue; width: 536px; height: 528px; background-image:url(img/my-board.jpg)">
<!-- <div id="my-field" style="color:blue;" > -->

This is div my-field: 2021-0301-1921
</div>

My observations:
1) I can see my div with its text in blue, but still no picture;
2) In the javascript console of Chrome several error messages are interesting :
2.1) Some warnings about DEPRECATED use of dojo ;
2.2) Failed to load ressource ... my-board.jpg
2.3) other similar messages ... that are related to jpg files with names like 2330305_32.jpg

In another experience, I remove any reference to either "img/board.jpg" or "img/my-board.jpg", just inserting a text to be sure it is updated.
This time in the javascript console of Chrome there are still error messages:
Failed to load ressource ... that are related to jpg files with names like 2330305_32.jpg

I don't know if the messages in the Javascript console are synchrone, but the errors about loading ressources are recorded after the message "Entering state: playerTurn". General remark: regarding the reversi tutorial, I am not at the point I have to care about state and turn ...

Do these above observations trigger some ideas from your guys ?

[Tisaac]

I tried "Ctlr + R", "Ctlr +i" and "disable cache" in the "network" menu of Chrome : but it does not change my issue, my picture 'img/board.jpg" is not displayed.

I tried another experience :
I inserted the following fragment in "tutoseven_tutoseven.tpl" and copied "img/board.jpg" as "img/my-board.jpg"

<div id="my-field" style="color:blue; width: 536px; height: 528px; background-image:url(img/my-board.jpg)">
<!-- <div id="my-field" style="color:blue;" > -->

This is div my-field: 2021-0301-1921
</div>

My observations:
1) I can see my div with its text in blue, but still no picture;
2) In the javascript console of Chrome several error messages are interesting :
2.1) Some warnings about DEPRECATED use of dojo ;
2.2) Failed to load ressource ... my-board.jpg
2.3) other similar messages ... that are related to jpg files with names like 2330305_32.jpg

In another experience, I remove any reference to either "img/board.jpg" or "img/my-board.jpg", just inserting a text to be sure it is updated.
This time in the javascript console of Chrome there are still error messages:
Failed to load ressource ... that are related to jpg files with names like 2330305_32.jpg

I don't know if the messages in the Javascript console are synchrone, but the errors about loading ressources are recorded after the message "Entering state: playerTurn". General remark: regarding the reversi tutorial, I am not at the point I have to care about state and turn ...

Do these above observations trigger some ideas from your guys ?

Don't put inline css with background image, that won't work.
Just put your css in your game.css as the tutorial is probably explaining.

[lucbordare]

I tried both ways : 1) background image declared in-line ; 2) background image declared in the CSS file. And both ways failed to display the image, with similar error messages in the javascript console of Chrome.

[lucbordare]

Maybe it is worth to mention : I have not cloned the "reversi" tutorial game ; instead I started with the files automatically provided when a new game is requested to be created; then I followed the steps described in the documentation of the revsersi tutorial ; that is my understanding of the tutorial instructions. Am I wrong ?

Your guys, have you applied the same path ? Or not ?

As somebody mentionned, "baby steps" strategy is wise in such a field. I am inline with that. And this is what I am applying.

Should I ask the admin to reset all my files ?