# Dir Structure

Let's dive into the nutshell to learn how to implement it. The code directory of the project \`trustless-browser-sandbox\` is:

```
╭────┬─────────────────────┬──────┬──────────┬──────────────╮
│  # │        name         │ type │   size   │   modified   │
├────┼─────────────────────┼──────┼──────────┼──────────────┤
│  0 │ README.md           │ file │     35 B │ 2 months ago │
│  1 │ config-overrides.js │ file │  1.7 KiB │ 2 months ago │
│  2 │ demo-game           │ dir  │  4.0 KiB │ 2 months ago │
│  3 │ node_modules        │ dir  │ 40.0 KiB │ 2 months ago │
│  4 │ package-lock.json   │ file │  1.0 MiB │ 2 months ago │
│  5 │ package.json        │ file │  2.8 KiB │ 2 months ago │
│  6 │ planet              │ dir  │  4.0 KiB │ 2 months ago │
│  7 │ public              │ dir  │  4.0 KiB │ 2 months ago │
│  8 │ publish-td.sh       │ file │    268 B │ 2 months ago │
│  9 │ publish.sh          │ file │    281 B │ 2 months ago │
│ 10 │ roguelike           │ dir  │  4.0 KiB │ 2 months ago │
│ 11 │ src                 │ dir  │  4.0 KiB │ 2 weeks ago  │
│ 12 │ tdengine            │ dir  │  4.0 KiB │ 2 months ago │
│ 13 │ tsconfig.json       │ file │    561 B │ 2 months ago │
╰────┴─────────────────────┴──────┴──────────┴──────────────╯
```

In it, the subdirectory \`roguelike\` implements the game **backend** logic (which is a Rust project) that we will talk about later. Let's look into the src subdirectory:

```
╭────┬────────────────────────┬──────┬─────────┬──────────────╮
│  # │          name          │ type │  size   │   modified   │
├────┼────────────────────────┼──────┼─────────┼──────────────┤
│  0 │ src/data               │ dir  │ 4.0 KiB │ 2 months ago │
│  1 │ src/sdk                │ dir  │ 4.0 KiB │ 2 months ago │
│  2 │ src/react-app-env.d.ts │ file │    40 B │ 2 months ago │
│  3 │ src/logo.svg           │ file │ 1.1 KiB │ 2 months ago │
│  4 │ src/types              │ dir  │ 4.0 KiB │ 2 months ago │
│  5 │ src/layout             │ dir  │ 4.0 KiB │ 2 months ago │
│  6 │ src/index.css          │ file │ 1.0 KiB │ 2 months ago │
│  7 │ src/serviceWorker.ts   │ file │ 5.2 KiB │ 2 months ago │
│  8 │ src/styles             │ dir  │ 4.0 KiB │ 2 months ago │
│  9 │ src/games              │ dir  │ 4.0 KiB │ 2 months ago │
│ 10 │ src/modals             │ dir  │ 4.0 KiB │ 2 months ago │
│ 11 │ src/assets             │ dir  │ 4.0 KiB │ 2 months ago │
│ 12 │ src/app                │ dir  │ 4.0 KiB │ 2 months ago │
│ 13 │ src/utils              │ dir  │ 4.0 KiB │ 2 months ago │
│ 14 │ src/setupTests.ts      │ file │   255 B │ 2 months ago │
│ 15 │ src/components         │ dir  │ 4.0 KiB │ 2 months ago │
│ 16 │ src/fonts              │ dir  │ 4.0 KiB │ 2 months ago │
│ 17 │ src/index.tsx          │ file │   690 B │ 2 months ago │
│ 18 │ src/App.css            │ file │   623 B │ 2 months ago │
│ 19 │ src/App.tsx            │ file │   283 B │ 2 months ago │
│ 20 │ src/images             │ dir  │ 4.0 KiB │ 2 months ago │
╰────┴────────────────────────┴──────┴─────────┴──────────────╯
```

This is a typescript project implementing the frontend app,  it forms the basic bone of the entire frontend app. The card roguelike game is located in \`src/games\`, as you can see:

```
╭───┬────────────────────────┬──────┬─────────┬──────────────╮
│ # │          name          │ type │  size   │   modified   │
├───┼────────────────────────┼──────┼─────────┼──────────────┤
│ 0 │ src/games/sumgame      │ dir  │ 4.0 KiB │ 2 months ago │
│ 1 │ src/games/towerdefence │ dir  │ 4.0 KiB │ 2 months ago │
│ 2 │ src/games/style.scss   │ file │   240 B │ 2 months ago │
│ 3 │ src/games/roguelike    │ dir  │ 4.0 KiB │ 2 months ago │
│ 4 │ src/games/demogame     │ dir  │ 4.0 KiB │ 2 months ago │
│ 5 │ src/games/planet       │ dir  │ 4.0 KiB │ 2 months ago │
╰───┴────────────────────────┴──────┴─────────┴──────────────╯
```

The \`src/games/roguelike\` is the right place for the frontend of our card roguelike game which is shown on the previous page.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bladedao.games/zkunity-game-engine/zkunity-guide/demo-a-roguelike-card-game/dir-structure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.