<aside> <img src="/icons/bookmark_gray.svg" alt="/icons/bookmark_gray.svg" width="40px" />

Table of contents:

</aside>

<aside> <img src="/icons/gradebook_gray.svg" alt="/icons/gradebook_gray.svg" width="40px" />

Read more:

Untitled

</aside>

If you are interested in contributing to the editor or want to change something that suits you more, than keep on reading. This page is dedicated to explaining the frontend code structure in detail. With the help of the following chapters you should have no trouble navigating through the codebase to add your own code.

Prerequisites

When coding, adding and navigating through different files, an IDE is always helpful. Suggested setup:

• VS Code
  • VS Code Extension: rust-analyzer
  • VS Code Extension: tauri Framework
  • VS Code Extension: React

Where can I find the source code of the frontend?

At first it might seem like there are too many folders and files. But where can I find the ones I actually need? Inside the savegame-editor directory you will find 2 different src files (src and src-tauri).

• src: Contains the Frontend (UI)
• src-tauri: Contains the Backend

Therefore the main focus of this page will be dedicated to src.

What to do in src?

The editor itself uses a frontend framework called React. A react application has the following base structure:

src
  - assets
  - App.css
  - App.tsx
  - main.tsx
  - styles.css

assets

savegame-editor/src/assets

This directory contains all images you want to use inside the editor.

App.css / styles.css

savegame-editor/src/*.css

They contain the CSS styles specifically for the App.tsx or main.tsx. Those files are for the root components and only need adjustments when changing something for the whole editor (like for example: font)