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.
Last updated