<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Octane Secure Runtime Modes</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-950 text-slate-100">
    <div class="mx-auto max-w-6xl px-6 py-10">
        <div class="mb-8 rounded-3xl border border-cyan-500/20 bg-slate-900/80 p-8 shadow-2xl shadow-cyan-950/30">
            <div class="flex flex-wrap items-center gap-3">
                <span class="rounded-full border border-cyan-400/30 bg-cyan-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.25em] text-cyan-300">Octane V3</span>
                <span class="rounded-full border border-emerald-400/30 bg-emerald-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.25em] text-emerald-300">Secure Runtime</span>
            </div>
            <h1 class="mt-5 text-4xl font-black tracking-tight text-white">Runtime configuration guide</h1>
            <p class="mt-4 max-w-3xl text-sm leading-7 text-slate-300">
                This page gives you a cleaner, readable overview of runtime toggles, example files and the values that belong in config files
                rather than hardcoded inside <code class="rounded bg-slate-800 px-1.5 py-0.5 text-cyan-300">src</code>.
            </p>
        </div>

        <div class="grid gap-6 lg:grid-cols-[280px_minmax(0,1fr)]">
            <aside class="rounded-3xl border border-slate-800 bg-slate-900/70 p-5 lg:sticky lg:top-6 lg:h-fit">
                <h2 class="mb-4 text-sm font-bold uppercase tracking-[0.2em] text-slate-400">Contents</h2>
                <nav class="space-y-2 text-sm">
                    <a class="block rounded-xl px-3 py-2 text-slate-300 transition hover:bg-slate-800 hover:text-white" href="#overview">Overview</a>
                    <a class="block rounded-xl px-3 py-2 text-slate-300 transition hover:bg-slate-800 hover:text-white" href="#files">Files to use</a>
                    <a class="block rounded-xl px-3 py-2 text-slate-300 transition hover:bg-slate-800 hover:text-white" href="#client-mode">client-mode</a>
                    <a class="block rounded-xl px-3 py-2 text-slate-300 transition hover:bg-slate-800 hover:text-white" href="#renderer-config">renderer-config</a>
                    <a class="block rounded-xl px-3 py-2 text-slate-300 transition hover:bg-slate-800 hover:text-white" href="#ui-config">ui-config</a>
                    <a class="block rounded-xl px-3 py-2 text-slate-300 transition hover:bg-slate-800 hover:text-white" href="#runtime-code">Runtime code</a>
                    <a class="block rounded-xl px-3 py-2 text-slate-300 transition hover:bg-slate-800 hover:text-white" href="#emulator">Emulator</a>
                    <a class="block rounded-xl px-3 py-2 text-slate-300 transition hover:bg-slate-800 hover:text-white" href="#scenarios">Scenarios</a>
                    <a class="block rounded-xl px-3 py-2 text-slate-300 transition hover:bg-slate-800 hover:text-white" href="#checklist">Checklist</a>
                </nav>
            </aside>

            <main class="space-y-6">
                <section id="overview" class="rounded-3xl border border-slate-800 bg-slate-900/70 p-8">
                    <h2 class="text-2xl font-bold text-white">Overview</h2>
                    <div class="mt-5 grid gap-4 md:grid-cols-3">
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/70 p-5">
                            <h3 class="text-sm font-semibold uppercase tracking-wide text-cyan-300">Dist Obfuscation</h3>
                            <p class="mt-3 text-sm leading-7 text-slate-300">Chooses whether the client loads <code class="rounded bg-slate-800 px-1">app.js/app.css</code> or the obfuscated <code class="rounded bg-slate-800 px-1">.dat</code> versions.</p>
                        </div>
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/70 p-5">
                            <h3 class="text-sm font-semibold uppercase tracking-wide text-emerald-300">Secure Assets</h3>
                            <p class="mt-3 text-sm leading-7 text-slate-300">Controls whether <code class="rounded bg-slate-800 px-1">renderer-config</code>, <code class="rounded bg-slate-800 px-1">ui-config</code> and gamedata go through <code class="rounded bg-slate-800 px-1">/nitro-sec/file</code>.</p>
                        </div>
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/70 p-5">
                            <h3 class="text-sm font-semibold uppercase tracking-wide text-fuchsia-300">Secure API</h3>
                            <p class="mt-3 text-sm leading-7 text-slate-300">Enables or disables runtime encryption for <code class="rounded bg-slate-800 px-1">/api/*</code> requests.</p>
                        </div>
                    </div>
                </section>

                <section id="files" class="rounded-3xl border border-slate-800 bg-slate-900/70 p-8">
                    <h2 class="text-2xl font-bold text-white">Files to use</h2>
                    <div class="mt-5 overflow-hidden rounded-2xl border border-slate-800">
                        <table class="min-w-full divide-y divide-slate-800 text-sm">
                            <thead class="bg-slate-950/80">
                                <tr>
                                    <th class="px-4 py-3 text-left font-semibold text-slate-200">File</th>
                                    <th class="px-4 py-3 text-left font-semibold text-slate-200">Purpose</th>
                                    <th class="px-4 py-3 text-left font-semibold text-slate-200">Note</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-800">
                                <tr class="bg-slate-900/60">
                                    <td class="px-4 py-3"><code>public/configuration/client-mode.example</code></td>
                                    <td class="px-4 py-3">Template for runtime toggles</td>
                                    <td class="px-4 py-3 text-slate-300">Copy it into a real <code>configuration/client-mode.json</code> in deployment; that real file stays ignored by Git</td>
                                </tr>
                                <tr class="bg-slate-950/40">
                                    <td class="px-4 py-3"><code>public/configuration/renderer-config.example</code></td>
                                    <td class="px-4 py-3">Clean renderer config template</td>
                                    <td class="px-4 py-3 text-slate-300">Does not touch your local <code>configuration/renderer-config.json</code></td>
                                </tr>
                                <tr class="bg-slate-900/60">
                                    <td class="px-4 py-3"><code>public/configuration/ui-config.example</code></td>
                                    <td class="px-4 py-3">UI config reference template</td>
                                    <td class="px-4 py-3 text-slate-300">Use it as the source of truth for UI URLs and widgets</td>
                                </tr>
                                <tr class="bg-slate-950/40">
                                    <td class="px-4 py-3"><code>Latest_Compiled_Version/config.ini.example</code></td>
                                    <td class="px-4 py-3">Backend secure flags</td>
                                    <td class="px-4 py-3 text-slate-300">Defines the emulator-side runtime settings</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </section>

                <section id="client-mode" class="rounded-3xl border border-slate-800 bg-slate-900/70 p-8">
                    <h2 class="text-2xl font-bold text-white">client-mode.example</h2>
                    <p class="mt-3 text-sm leading-7 text-slate-300">This is the main runtime switchboard. You can enable or disable behavior without editing client source code.</p>
<pre class="mt-5 overflow-x-auto rounded-2xl border border-slate-800 bg-slate-950/90 p-5 text-sm text-cyan-300"><code>{
    "distObfuscationEnabled": true,
    "secureAssetsEnabled": true,
    "secureApiEnabled": true,
    "apiBaseUrl": "https://nitro.example.com:2096",
    "plainConfigBaseUrl": "https://hotel.example.com/configuration/",
    "plainGamedataBaseUrl": "https://hotel.example.com/client/octane/gamedata/"
}</code></pre>
                    <div class="mt-5 grid gap-4 md:grid-cols-2">
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 p-5">
                            <h3 class="font-semibold text-white">Fields</h3>
                            <ul class="mt-3 space-y-2 text-sm leading-7 text-slate-300">
                                <li><code class="rounded bg-slate-800 px-1">distObfuscationEnabled</code>: use <code>.dat</code> or plain assets</li>
                                <li><code class="rounded bg-slate-800 px-1">secureAssetsEnabled</code>: enables <code>/nitro-sec/file</code></li>
                                <li><code class="rounded bg-slate-800 px-1">secureApiEnabled</code>: encrypts <code>/api/*</code> requests</li>
                                <li><code class="rounded bg-slate-800 px-1">apiBaseUrl</code>: emulator/API base URL</li>
                            </ul>
                        </div>
                        <div class="rounded-2xl border border-amber-500/20 bg-amber-500/10 p-5">
                            <h3 class="font-semibold text-amber-200">Recommendation</h3>
                            <p class="mt-3 text-sm leading-7 text-amber-100/90">Always set <code>apiBaseUrl</code> explicitly so you do not rely on fallback logic.</p>
                        </div>
                    </div>
                </section>

                <section id="renderer-config" class="rounded-3xl border border-slate-800 bg-slate-900/70 p-8">
                    <h2 class="text-2xl font-bold text-white">renderer-config.example</h2>
                    <p class="mt-3 text-sm leading-7 text-slate-300">Socket, API, asset and gamedata URLs should live here, not inside React components.</p>
                    <div class="mt-5 grid gap-4 md:grid-cols-2">
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 p-5">
                            <h3 class="font-semibold text-white">Main keys</h3>
                            <ul class="mt-3 space-y-2 text-sm leading-7 text-slate-300">
                                <li><code>socket.url</code></li>
                                <li><code>api.url</code></li>
                                <li><code>asset.url</code></li>
                                <li><code>image.library.url</code></li>
                                <li><code>images.url</code></li>
                                <li><code>gamedata.url</code></li>
                            </ul>
                        </div>
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 p-5">
                            <h3 class="font-semibold text-white">Translations</h3>
                            <ul class="mt-3 space-y-2 text-sm leading-7 text-slate-300">
                                <li><code>external.texts.translation.url</code></li>
                                <li><code>furnidata.translation.url</code></li>
                                <li>Uses <code>%locale%</code> and <code>%timestamp%</code></li>
                            </ul>
                        </div>
                    </div>
                </section>

                <section id="ui-config" class="rounded-3xl border border-slate-800 bg-slate-900/70 p-8">
                    <h2 class="text-2xl font-bold text-white">ui-config.example</h2>
                    <p class="mt-3 text-sm leading-7 text-slate-300">UI image and login view sources should come from config values here or from renderer config, never from hardcoded URLs in components.</p>
                    <div class="mt-5 rounded-2xl border border-slate-800 bg-slate-950/60 p-5">
                        <h3 class="font-semibold text-white">Login view</h3>
                        <ul class="mt-3 space-y-2 text-sm leading-7 text-slate-300">
                            <li><code>loginview.images.background</code></li>
                            <li><code>loginview.images.drape</code></li>
                            <li><code>loginview.images.left</code></li>
                            <li><code>loginview.images.right</code></li>
                            <li><code>loginview.widgets</code> for promotional blocks</li>
                        </ul>
                    </div>
                </section>

                <section id="runtime-code" class="rounded-3xl border border-slate-800 bg-slate-900/70 p-8">
                    <h2 class="text-2xl font-bold text-white">Runtime code involved</h2>
                    <div class="mt-5 grid gap-4 md:grid-cols-2">
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 p-5">
                            <h3 class="font-semibold text-white"><code>src/bootstrap.ts</code></h3>
                            <p class="mt-3 text-sm leading-7 text-slate-300">Reads <code>client-mode</code>, builds <code>OctaneConfig['config.urls']</code> and prepares client bootstrap.</p>
                        </div>
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 p-5">
                            <h3 class="font-semibold text-white"><code>src/secure-assets.ts</code></h3>
                            <p class="mt-3 text-sm leading-7 text-slate-300">Handles ECDH, decrypt/encrypt, plain fallback and secure API runtime behavior.</p>
                        </div>
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 p-5">
                            <h3 class="font-semibold text-white"><code>scripts/write-asset-loader.mjs</code></h3>
                            <p class="mt-3 text-sm leading-7 text-slate-300">Generates <code>public/configuration/asset-loader.js</code> and decides between plain assets and <code>.dat</code>.</p>
                        </div>
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 p-5">
                            <h3 class="font-semibold text-white"><code>scripts/minify-dist.mjs</code></h3>
                            <p class="mt-3 text-sm leading-7 text-slate-300">Generates <code>.dat</code> files while keeping plain files available for runtime switching.</p>
                        </div>
                    </div>
                </section>

                <section id="emulator" class="rounded-3xl border border-slate-800 bg-slate-900/70 p-8">
                    <h2 class="text-2xl font-bold text-white">Emulator</h2>
<pre class="mt-5 overflow-x-auto rounded-2xl border border-slate-800 bg-slate-950/90 p-5 text-sm text-emerald-300"><code>nitro.secure.assets.enabled=true
nitro.secure.api.enabled=true
nitro.secure.config.root=C:/path/to/octane/public
nitro.secure.gamedata.root=C:/path/to/gamedata
nitro.secure.master_key=change-me-to-a-long-random-secret</code></pre>
                    <ul class="mt-5 space-y-2 text-sm leading-7 text-slate-300">
                        <li><code>nitro.secure.assets.enabled</code>: enables <code>/nitro-sec/bootstrap</code> and <code>/nitro-sec/file</code></li>
                        <li><code>nitro.secure.api.enabled</code>: enables secure handling for <code>/api/*</code></li>
                        <li><code>nitro.secure.config.root</code>: path to live config files</li>
                        <li><code>nitro.secure.gamedata.root</code>: path to live gamedata</li>
                        <li><code>nitro.secure.master_key</code>: persistent server-side secret</li>
                    </ul>
                </section>

                <section id="scenarios" class="rounded-3xl border border-slate-800 bg-slate-900/70 p-8">
                    <h2 class="text-2xl font-bold text-white">Quick scenarios</h2>
                    <div class="mt-5 grid gap-4 md:grid-cols-3">
                        <div class="rounded-2xl border border-cyan-500/20 bg-cyan-500/10 p-5">
                            <h3 class="font-semibold text-cyan-200">Everything enabled</h3>
                            <p class="mt-3 text-sm leading-7 text-cyan-50/90">Secure assets, secure API and dist obfuscation all enabled.</p>
                        </div>
                        <div class="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-5">
                            <h3 class="font-semibold text-emerald-200">Only .dat</h3>
                            <p class="mt-3 text-sm leading-7 text-emerald-50/90">Uses obfuscated assets but leaves config/API in plain mode.</p>
                        </div>
                        <div class="rounded-2xl border border-slate-700 bg-slate-950/60 p-5">
                            <h3 class="font-semibold text-white">Everything plain</h3>
                            <p class="mt-3 text-sm leading-7 text-slate-300">Complete fallback mode for local testing or debugging.</p>
                        </div>
                    </div>
                </section>

                <section id="checklist" class="rounded-3xl border border-slate-800 bg-slate-900/70 p-8">
                    <h2 class="text-2xl font-bold text-white">Final checklist</h2>
                    <div class="mt-5 grid gap-3">
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 px-5 py-4 text-sm text-slate-300">You created real files from <code>client-mode.example</code>, <code>renderer-config.example</code> and <code>ui-config.example</code></div>
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 px-5 py-4 text-sm text-slate-300">Public URLs live in config files, not in React components</div>
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 px-5 py-4 text-sm text-slate-300">Both plain files and <code>.dat</code> files are deployed</div>
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 px-5 py-4 text-sm text-slate-300">Your server exposes a proper MIME type for <code>.dat</code></div>
                        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 px-5 py-4 text-sm text-slate-300">You set <code>nitro.secure.master_key</code> on the emulator side</div>
                    </div>
                </section>
            </main>
        </div>
    </div>
</body>
</html>