mirror of
https://github.com/mleem97/gregWiki.git
synced 2026-04-11 11:39:18 +02:00
e2839584f4
- Move markdown and wiki-import tree into docs/; keep app shell at repo root - Point docusaurus docs path to docs/; edit links to mleem97/gregWiki - Sync and i18n scripts use gregWiki root and ../.wiki under gregFramework - Sidebars: workspace layout from root docs ids; plugins under mods/extensions - Fix redirects, module catalog URLs, release note paths, and wiki-import category keys - Update repo inventory for split repos; Dockerfile for single-repo context Made-with: Cursor
90 lines
3.2 KiB
Markdown
90 lines
3.2 KiB
Markdown
# 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/wiki-import/Framework-Features-Use-Cases)
|
|
- [FFI Bridge Reference](/wiki/wiki-import/FFI-Bridge-Reference)
|
|
- [Mod-Developer (Debug) EN](Mod-Developer-Debug)
|
|
- [Contributors (Debug) EN](Contributors-Debug)
|
|
- [Web UI Bridge (DC2WEB)](/wiki/wiki-import/Web-UI-Bridge)
|