feat: boot-экран, стабильность Windows и оптимизация Pixi/пульта

- Экран загрузки (boot.html, bootWindow): статусы, ensureRoots и проверка лицензии, редактор после готовности; закрытие через destroy при closable:false. - Упакованное приложение на Windows: disableHardwareAcceleration, sandbox выкл. вне dev, отложенный показ редактора, ensureWindowBecomesVisible, фокус на splash при second-instance. - Vite: вход boot.html; eslint: игнор release/; тесты boot и maxFPS тикера. - Пульт: позиция курсора кисти через ref/DOM без setState на каждый move; черновик эффекта через rAF; Pixi: maxFPS 32, resolution cap, antialias off, debounce ResizeObserver, меньше частиц poisonCloud, contain на хосте. Made-with: Cursor
2026-04-20 12:12:01 +08:00
parent 20c838da7d
commit e39a72206d
15 changed files with 587 additions and 62 deletions
@@ -0,0 +1,124 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; style-src 'unsafe-inline';" />
+    <title>Загрузка</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+        overflow: hidden;
+        font-family:
+          ui-sans-serif,
+          system-ui,
+          'Segoe UI',
+          Roboto,
+          'Helvetica Neue',
+          Arial,
+          sans-serif;
+        background: #09090b;
+        color: #fafafa;
+        -webkit-font-smoothing: antialiased;
+      }
+      .wrap {
+        display: flex;
+        min-height: 100%;
+        align-items: center;
+        justify-content: center;
+        padding: 28px 24px;
+        background:
+          radial-gradient(ellipse 120% 80% at 50% -20%, rgba(99, 102, 241, 0.18), transparent 55%),
+          radial-gradient(ellipse 90% 60% at 100% 100%, rgba(168, 85, 247, 0.1), transparent 45%),
+          #09090b;
+      }
+      .card {
+        width: 100%;
+        max-width: 360px;
+        text-align: center;
+        padding: 32px 28px 28px;
+        border-radius: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        background: rgba(24, 24, 27, 0.85);
+        box-shadow:
+          0 0 0 1px rgba(0, 0, 0, 0.35) inset,
+          0 24px 48px rgba(0, 0, 0, 0.45);
+        backdrop-filter: blur(12px);
+      }
+      .logo {
+        width: 72px;
+        height: 72px;
+        margin: 0 auto 16px;
+        display: block;
+        border-radius: 18px;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+      }
+      .title {
+        margin: 0 0 6px;
+        font-size: 1.35rem;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        line-height: 1.2;
+      }
+      .subtitle {
+        margin: 0 0 22px;
+        font-size: 0.875rem;
+        color: #a1a1aa;
+        font-weight: 400;
+      }
+      .version {
+        margin: 0 0 20px;
+        font-size: 0.75rem;
+        color: #71717a;
+        letter-spacing: 0.02em;
+      }
+      .status {
+        margin: 0 0 18px;
+        font-size: 0.9rem;
+        color: #e4e4e7;
+        min-height: 1.4em;
+        line-height: 1.4;
+      }
+      .bar {
+        height: 3px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.08);
+        overflow: hidden;
+      }
+      .bar::after {
+        content: '';
+        display: block;
+        height: 100%;
+        width: 32%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, #6366f1, #a855f7);
+        animation: boot-indeterminate 1.2s ease-in-out infinite;
+      }
+      @keyframes boot-indeterminate {
+        0% {
+          transform: translateX(-120%);
+        }
+        100% {
+          transform: translateX(380%);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <div class="card">
+        <img class="logo" src="./app-window-icon.png" width="72" height="72" alt="" />
+        <h1 class="title" data-boot-title>DNDGamePlayer</h1>
+        <p class="subtitle">редактор и проигрыватель</p>
+        <p class="version" data-boot-version></p>
+        <p class="status" id="boot-status">Запуск…</p>
+        <div class="bar" aria-hidden="true"></div>
+      </div>
+    </div>
+  </body>
+</html>