Guide for the frontend code

As we prompted previously, the entire frontend project is located in `src/`, and the frontend of the rogoulike card game is located in `src/games/roguelike`.

`src/games/roguelike` has the following structure. These file names are self-explanation.

.
├── card.tsx
├── controller.tsx
├── death.tsx
├── images
│   ├── cheems-monster-01.jpg
│   ├── cheems-monster-02.jpg
│   ├── cheems.jpg
│   ├── d0.png
│   ├── d1.png
│   ├── d10.png
│   ├── d11.png
│   ├── d2.png
│   ├── d3.png
│   ├── d4.png
│   ├── d5.png
│   ├── d6.png
│   ├── d7.png
│   ├── d8.png
│   ├── d9.png
│   └── gameover.png
├── js
│   ├── config.js
│   ├── game.js
│   ├── gameplay.d.ts
│   ├── gameplay_bg.js
│   ├── gameplay_bg.wasm
│   ├── gameplay_bg.wasm.d.ts
│   └── package.json
├── style.scss
└── tile.ts

Files in js dir were copied from the backend project.

In the `controller.tsx`, we can see:

import init, * as gameplay from "./js";

  function initGame(l2account: number) {
    (init as any)().then(() => {
      console.log("setting instance");
      console.log(gameplay);
      gameplay.new_game();
      gameplay.challenge_next_floor();
      const stateStr = gameplay.state();
      const state = JSON.parse(stateStr);
            console.log(":state:", state);
      setState(state);
      dispatch(setMD5(ImageMD5));
      dispatch(setLoaded(true));
      //drawObjects(objects);
    });
  }

...

We import the exported facilities of the backend into the frontend project, naming it as `gameplay`, and later use this handle to call functions in wasm. Just like:

      gameplay.new_game();
      gameplay.challenge_next_floor();

in the above code snippet.

Once you get it, the thing will become clear to you. Other code is just ordinary typescript/tsx code, which is easy to study.