# 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.