Board Game Arena

I'm a new developer here, and most of the frontend experience I have in the last 6 years has all used React. I can't find anything on the wiki about it; the only thing semi-related I found is an incomplete page about Vue, a similar framework. Is there any reason I can't/shouldn't use React in the context of a BGA app? I think I can figure out how, I just don't want to bother if there's some reason I shouldn't (integration with the framework, licensing, etc.).

mithaler wrote: ↑20 October 2024, 14:35 I'm a new developer here, and most of the frontend experience I have in the last 6 years has all used React. I can't find anything on the wiki about it; the only thing semi-related I found is an incomplete page about Vue, a similar framework. Is there any reason I can't/shouldn't use React in the context of a BGA app? I think I can figure out how, I just don't want to bother if there's some reason I shouldn't (integration with the framework, licensing, etc.).

Hi, the following is just my personal opinion. I'm also new dev here, like 30 days or so (and also react dev).

I think using react (or any FE framework) for BGA is an overkill. Believe me, you will barely need anything other than a few selectors (like jQuery usage back in 2010s) some buttons and a few moving effects, all three are provided by the framework (well for the selectors you could even just use document.querySelectorAll and avoid any dojo query).

In my experience just in rare exceptions you need to create elements, or make any user interface at all (remember: you are suppose to make the game look and feel like a board game, not a video game with interactive dialogs and reactive UX).

If your question gist it's because of the unfamiliarity to the FE side of the stack, I recommend the BGA typesafe template, that will make your visual studio code autocomplete almost anything and make you feel more comfortable working in the FE side of the project.

The BGA Type Safe Template initialization it's little bit cumbersome (you have to follow a few basic steps) but once you past that initial inertia it becomes really easy to keep working specially if you come from the FE side of things like myself. Again, this is just like my opinion.

Edit: grammar

I remember digging into this topic too and I asked people who had tred to integrate Vue. They don't recommend it, for some reason (haven't clarified that part) it's troublesome and the juice is not worth the squeeze, it's problematic.

Also,

zetaLeonis wrote: ↑20 October 2024, 23:09 Hi, the following is just my personal opinion. I'm also new dev here, like 30 days or so (and also react dev).

is a very good point and I came to the same conclusion as I am at around 80% of finishing my current project. First I also believed that using such framework would help, but now I think it's too much effort and it's not even needed. I happily embraced basic, fundamental technologies of HTML, CSS and TS (using BGA typesafe template mentioned by zetaLeonis) and it's actually quite a fun endeavour. I get to learn the basics better after having been using high level stuff for so many years.

I wouldn't be so categorical, it depends on the game...
For some games with a “simple” interface here, the game board is displayed with a canvas in which the interface is drawn. For this kind of game, if the board were displayed with a piece of React code, I think it would be just as good...
For the one I made (https://boardgamearena.com/gamepanel?ga ... reflection) this is the case: the whole game is made in the traditional way, except for the game grid which is in React. And I think it saved me a lot of time to do that ...

Tof63 wrote: ↑21 October 2024, 10:40 I wouldn't be so categorical, it depends on the game...
For some games with a “simple” interface here, the game board is displayed with a canvas in which the interface is drawn. For this kind of game, if the board were displayed with a piece of React code, I think it would be just as good...
For the one I made (https://boardgamearena.com/gamepanel?ga ... reflection) this is the case: the whole game is made in the traditional way, except for the game grid which is in React. And I think it saved me a lot of time to do that ...

How did you integrate react with BGA? And what difficulties did you face? It's interesting, please elaborate on that a little more.

imralav wrote: ↑21 October 2024, 12:27

Tof63 wrote: ↑21 October 2024, 10:40 I wouldn't be so categorical, it depends on the game...
For some games with a “simple” interface here, the game board is displayed with a canvas in which the interface is drawn. For this kind of game, if the board were displayed with a piece of React code, I think it would be just as good...
For the one I made (https://boardgamearena.com/gamepanel?ga ... reflection) this is the case: the whole game is made in the traditional way, except for the game grid which is in React. And I think it saved me a lot of time to do that ...

How did you integrate react with BGA? And what difficulties did you face? It's interesting, please elaborate on that a little more.

It is quite simple in fact.

The game is separated into two distinct parts:
- the main (php + javascript) project using the “classic” bga framework. This manages the reception of events from the server and the sending of actions to the server + the display of players panels.
This project defines window.game.actionXXX functions that are called by the React project when the user performs an action on the game board.
- the React project, which manages only the display of the game board and player actions on it.
This project defines window.game.onEventXXX functions, which are called in javascript (by the main project) when events are received from the server.

In the .tpl file of the main project I have this code : <div id="root"></div>
And in my React project I render the React component in this div.

When the React project is built, the .js result file is copied in "modules" folder of the main project, and is loaded like this :

define([
"dojo", "dojo/_base/declare",
"ebg/core/gamegui",
"ebg/counter",
g_gamethemeurl + "modules/main.js"
],

You have the full code here if you want : https://github.com/cdelaforge/reflection
It was one of my first React project, and I'd never developed in php before either, so if I had to do it again now I think I'd do it better and prettier, but it does the job ...

My early days as a programmer were in the jQuery era, so I'm familiar with it, but I still like the idea of using React, for two reasons:

* Writing HTML and JS as one thing, instead of two separate files.
* Binding the way I store data to the way I display it, without having to think about "when to change things".

For what it's worth, I struggled a bit to add it in an earlier attempt after posting this (though Typescript also got in the way), but there are some nice links here that might get me further. Thank you all!

Tof's posts changed my perspective on that a little. I might try wiring React in my next project (if that ever happens, I am struggling to tolerate php, if it wasn't for github copilot, I don't know if I would do it )

I'm interested in using React for managing client side data and UI. Did you all got any further on the experimentation and do we have any boilerplates to start with?