refactor: update project branding and structure for gregFramework

- Changed project title and tagline in docusaurus.config.js to reflect the new branding.
- Updated package.json and package-lock.json to rename the project to gregwiki-docs-site.
- Adjusted sidebar and documentation files to align with the new project structure and naming conventions.
- Enhanced documentation content for clarity and consistency across various sections.
- Added Prettier as a development dependency for code formatting.

This commit aligns the project with the new branding and improves overall documentation quality.
This commit is contained in:
Marvin
2026-04-10 01:20:22 +02:00
parent 31cd24b462
commit ea92a0baf8
295 changed files with 835 additions and 34708 deletions

View File

@@ -0,0 +1,89 @@
# Web UI Bridge (DC2WEB) EN
Last updated: 2026-04-03
This page describes the framework web-style UI system (`DC2WebBridge`) and the in-game `Mod Settings` menu integration.
## Overview
- Entry point: `FrikaMF/DC2WebBridge.cs`
- Mod menu: `FrikaMF/ModSettingsMenuBridge.cs`
- Hook integration: `FrikaMF/HarmonyPatches.cs`
Boundary:
- `DC2WebBridge` is a Unity-side UI/styling bridge.
- `DC2WebBridge` is not a generic HTTP/WebSocket FFI transport layer.
## What is currently supported
- UI styling from `HTML`/`CSS`
- Utility styling frameworks: `TailwindCSS`, `SASS`/`SCSS`
- Script-style sources: `JavaScript` / `TypeScript`
- React-oriented adapter path: `React JSX/TSX`
- Image types: `SVG` (preferred), `PNG`, `JPG/JPEG`, `BMP`, `GIF`, `TGA`
## In-game Mod Settings menu
Clicking `Settings` in the main menu opens a chooser:
- `Game Settings`
- `Mod Settings`
The `Mod Settings` panel can toggle runtime options:
- `DC2WEB Bridge enabled`
- `Unity UI Modernizer enabled`
- `Replace MainMenu Settings with Web overlay`
## Image support and SVG strategy
`DC2WebBridge` supports runtime sprite creation from `Dc2WebImageAsset`.
- Raster images are loaded through Unity `Texture2D.LoadImage(...)`.
- SVG follows a prioritized path and is rasterized at runtime to the target size.
Note: The internal SVG raster path is intentionally lightweight and focuses on common/simple shapes and fills. For advanced SVGs (complex paths, filters, masks), pre-bake assets in your mod pipeline and provide raster fallback.
## From basic HTML to React-style apps
The system is adapter-driven:
- `Basic HTML/CSS`: direct translation into a Unity style profile
- `Tailwind/SASS`: translated into CSS variables/properties
- `JS/TS`: heuristic extraction for style fields (`backgroundColor`, `color`, `fontSize`, ...)
- `React`: adapter reads `className` and inline style-like content and translates to a profile
### React support note
The framework does not embed a full browser DOM/JS runtime. DC2WEB uses translation adapters that map web-like source bundles to Unity UI profiles and overlays. For larger app-like UIs, use a precompiled descriptor (`Dc2WebAppDescriptor`) with clear style and asset contracts.
## Example: register a web app
```csharp
DC2WebBridge.RegisterWebApp(new Dc2WebAppDescriptor
{
ScreenKey = "MainMenuReact",
ReplaceExistingUi = true,
Framework = "react-ts",
Html = "<div id='root'><h1>DC2WEB React UI</h1><p>Runtime-translated app skin</p></div>",
Css = ":root{--panel-color:#111827dd;--text-color:#f9fafb;--accent:#60a5fa;}",
Script = "const App = () => <div className='bg-slate-900 text-slate-100 text-3xl'>React UI</div>;",
});
```
## Recommended workflow
1. Start with a simple `HTML/CSS` bundle.
2. Add `Tailwind/SASS` sources as needed.
3. Use `Dc2WebImageAsset` for icons/graphics (SVG-first).
4. For larger UI flows, move to app descriptor bundles (`React/TS`) with design tokens.
5. Tune behavior in-game through `Mod Settings`.
## Related links
- [Framework Features & Use Cases](/wiki/legacy/wiki-import/Framework-Features-Use-Cases)
- [FFI Bridge Reference](/wiki/legacy/wiki-import/FFI-Bridge-Reference)
- [Mod-Developer (Debug) EN](Mod-Developer-Debug)
- [Contributors (Debug) EN](Contributors-Debug)
- [Web UI Bridge (DC2WEB)](/wiki/legacy/wiki-import/Web-UI-Bridge)