mirror of https://github.com/mleem97/gregWiki.git synced 2026-04-11 03:29:19 +02:00

Files

Marvin e2839584f4 Merge Docusaurus site: all content under docs/, align with gregFramework split layout

- 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

2026-04-09 23:39:32 +02:00

3.2 KiB

Raw Blame History

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

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

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

Start with a simple HTML/CSS bundle.
Add Tailwind/SASS sources as needed.
Use Dc2WebImageAsset for icons/graphics (SVG-first).
For larger UI flows, move to app descriptor bundles (React/TS) with design tokens.
Tune behavior in-game through Mod Settings.

3.2 KiB Raw Blame History