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.