Architecture restructure

[LDY1998]

There are several architecture points that we can potentially address:

1. All the chess related codes are lying in frontend, while it's not exactly a frontend feature. The logic of board, chess and game should be in the backend while the frontend is for displaying the board and handle user input.
2. The frontend code is written in a mixed style with both var and class, basically it's a mixture of js and ts. I think the better way is to restructure the whole frontend into react. We should also avoid directly using jQuery to manipulate DOM since it's easy to get out of control.
3. We should get rid of the game engine and implement the AI by ourselves, but we can certainly use other people's minmax implementation

[Since2019]

I agree with suggestion 2 and 3, good call.

As far as I am concerned, point #3 is definately necessary, as we want the app to run on all systems, the Chinese Chess engines we have now are all Windows builds.

Point #2 is something I have been considering too, as I was trying to develop the chat-box in the . It is a hassle developing a new function without using a saparate component.

Another advantage of using a component-based web framework like react.js or vue.js apart from being able to use components is that they would support hot-reload while developing. It has been annoying trying to do npm run build and then npm run dev each time I touched the frontend code.

I first thought of using vue.js over react.js for restructuring it into a component-based UI, since the UI related code we have is written in html and vanilla javascript, Vue.js uses vanilla syntax while React uses JSX. But then I realized that the DOM related code is actually very minimal, so I think it would not be difficult to be transferred into React.js either. The framework to choose should depend on the whichever is a comfortable tech stack of the all our teammates.

We need to think and plan it well as we restrusture. The code we have now is written in both javascript(in the html file) and typescript. I think we first need to get used to using typescript with either react or vue by building a mini helloworld app in Typescript along with the framworks, compare them side by side to see which might be more convenient for the situation we have now.

[Since2019]

As for point #1 you have mentioned, from how I think the strucutre should be, or what the code we have now like is that the server should be only responsible for processing the moves that are sent from clients.

The classes that reside in the client end would definately need properties to keep track of things, for instance which HTML element is bound to which ChessPiece Object, or which ChessPiece belongs to which Player and functions to check for movable grids as well.

Some of the questions I would like to ask for your ideas on the #1 are as follows:

• If we put all the logic in backend, how are we able to track which chesspiece is red or black?
• How would we highlight the grids that are legal for a piece to move into on the frontend? Do we send the movable grids from the server to the client, on player selecting the piece? Don't you think it throws too much load onto the server while the logic can be easily handled locally on the client side?

[LDY1998]

I think your concern is also fair. I am not a fan of putting too much on the server side either. I guess we can talk and decide which part should go into the server and which should be a component of frontend. The ideal way is that, for the backend:

• Store the board. The source of board should be unique and stored on the server side. Everytime a board is updated, then it's sent to the clients (players) so that the client can re-render the board. Otherwise if a player make a move we might have trouble syncing up the board between multiple clients.
• Accept a request as a player move, apply it to the board, calculate the new board state and send them back to the clients
• Determine if the game is finished or not
• Handling the regret move (this is fair since the board will be on the server)

For the frontend:

• Rendering the UI
• Handling user input (player move): like the click and drag event of mouse and other keyboard input

As for the question you ask：

• Red and black is easy, the chess info sent from the backend will be able to contain that information. We just render the chess based on it
• We can either put that part of logic on the client side or we can let the server to send a function back to the frontend and let the client call that function.

[LDY1998]

As for vue vs react, I don't really have a preference.

I used react before, it's probably the most popular one in Canada. But vue got a great reputation too so I am happy to try it out. Both of them can be incoporated with ts smoothly.

To refactor, we might not be able to reuse a lot of code from what we current have. It's possible that we need to rewrite about 70% of our old code into the new architecture.