Game classes refactor

[duyminh1998]

@brysonbw This PR looks good, but I am currently wary of merging it because it does not includes changes to the simulation in our Python backend. If we merge this in, our frontend simulation code will diverge from our backend simulation code. This is obviously a byproduct of the fact that our simulation exists in both the frontend and backend, and we are currently in the process of brainstorming ways to deal with this.

Do you have any thoughts? I just need something to sway me in the direction of "let's just merge this in and deal with the fact that our simulation code in the frontend and backend are different later."

@orgulous feel free to chime in

[duyminh1998]

Not sure if I would have better judgement than you two, but was thinking through this.

did a little digging w/ ChatGPT and it mentioned using WebAssembly so that the core logic can still be used in Python (and use pyodide to compile to run in the Wasm Virtual Machine). Which common browsers can already run. https://webassembly.org/

I'm just trying to think of ways that we don't run the simulation and training on our AWS backend and incur unexpected costs.
Another option could be keeping the front end as is, and then if you want to access the AWS backend for simulation purposes, then we would have to add authentication to charge for it... Still open source but would have to have some cost if you ran stuff on our server. I have a sense that there would be very few people if any paying for this, and it might be a lot of work to add such a functionality (bad payoff for effort) in this moment.

All that is to say is that the main engine should be in python and so we could merge this, but it would prob get redone later on (soon) after the big decision

Also, this would involve needing to make an API btwn the python and typescript because there is no Python UI to port to the typescript. You would have to run the simulation in python/Wasm VM and then get the typescript UI to only display the results of the simulation because our UI elements still depend on js. LMK how this sounds or if it is just wrong

[duyminh1998]

@duyminh1998 As far as consolidating the two (FE and BE) I think creating a web server/API Layer to run and serve the game/state like I see you started seems to be smooth.

We just have to think about how complex we want this to be especially if the API Layer is another language and needs to be integrated with the Python game logic

@orgulous valid points. I'm unfamiliar with WebAssembly but I'm interested to learn more and see.

@duyminh1998 I'm for having the FE and BE game logic the same atm until we consolidate, so I'm with not merging

[duyminh1998]

I want to write the BE in C++ (to compete with AFSIM), and leave the FE as is. We can think about an API layer using protobuf like Starcraft. The Gym environment stays in Python.

So really the only work is to rip the simulation code out of the Python Gym environment and the FE and write it in C++. Then we just need an API layer that can connect the FE to BE, and Gym to BE.

[duyminh1998]

summarizing above (again through my talk w chatgpt and edited, so with a grain of salt)

How This Works

• Write the simulation in pure Python (no UI dependencies). OR C++
• Users can run the Python/C++ simulation standalone and locally, without a UI but with the option to upload it to the browser based UI, by cloning the repo and executing it on their own machines.
• For our website hosted on AWS: browser runs the simulation in WebAssembly instead of calling a backend, keeping it interactive and cost-free. The UI remains in Typescript because the menus/styling all use libraries that support this better than python.
• An API needs to be defined between the front and back end (which is kinda a fake back end for our website bc if you use WebAssembly its still client side). But ignoring that its still an API

[duyminh1998]

More details from ChatGPT:

To run a C++ backend in the browser alongside a TypeScript/React frontend, you have a few options. The most common approach is to compile your C++ code to WebAssembly (Wasm) using Emscripten. Here’s how you can do it:

---

1. Compile C++ to WebAssembly (Wasm)

Since browsers cannot execute C++ directly, you need to convert your C++ code into WebAssembly using Emscripten.

Install Emscripten

First, install the Emscripten SDK:

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

Compile Your C++ Code to Wasm

Let’s assume you have a simple C++ file (backend.cpp):

#include <iostream>
#include <emscripten/bind.h>

int add(int a, int b) {
    return a + b;
}

// Bind the function to be callable from JavaScript
EMSCRIPTEN_BINDINGS(my_module) {
    emscripten::function("add", &add);
}

Compile it into WebAssembly:

emcc backend.cpp -o backend.js -s MODULARIZE=1 -s EXPORT_ES6=1 -s ENVIRONMENT=web -s EXPORTED_RUNTIME_METHODS=['cwrap']

This will generate backend.js (JavaScript glue code) and backend.wasm (the WebAssembly binary).

---

2. Integrate with React Frontend

Now, you need to load the compiled WebAssembly module in your React app.

Install Dependencies

Ensure your React app is set up with TypeScript:

npx create-react-app my-game --template typescript
cd my-game

Copy backend.js and backend.wasm into the public/ folder or use Webpack/Vite to serve them properly.

Load Wasm in React

Modify App.tsx to import and use the WebAssembly module:

import { useEffect, useState } from "react";

function App() {
    const [result, setResult] = useState<number | null>(null);

    useEffect(() => {
        import("/backend.js").then(async (Module) => {
            const instance = await Module.default();
            const add = instance.cwrap("add", "number", ["number", "number"]);
            setResult(add(5, 7)); // Call C++ function
        });
    }, []);

    return (
        <div>
            <h1>WebAssembly in React</h1>
            <p>Result from C++: {result}</p>
        </div>
    );
}

export default App;

---

3. Run the React App

Start your React app:

npm start

Now, your React frontend should be able to call C++ functions via WebAssembly.

---

Other Considerations

• If your C++ backend is more complex (e.g., handling game logic or physics), consider Web Workers for multithreading.
• Use WebSockets or WebRTC for real-time communication between frontend and backend if necessary.
• If you need a persistent backend (e.g., for multiplayer functionality), you can still use a traditional C++ server (like a Node.js WebSocket server communicating with a compiled WebAssembly module).

Would you like help setting up WebSockets or a more advanced interaction model? 🚀