базовый encounter journal

client-export/textures/README.md

@@ -0,0 +1,125 @@
+# PlayerGuide — текстуры
+
+Все файлы — **PNG с альфа-каналом**, размеры — **степень двойки**
+(требование BLP-конвертера). Палитра канон-WotLK: золото (`#ffd76a`)
+на тёмно-коричневом (`#1a1208`).
+
+## Что есть
+
+| Файл | Размер | Куда |
+|---|---|---|
+| `StageBadge-Active.png`     | 64×64   | Бейдж текущего этапа в цепочке. |
+| `StageBadge-Done.png`       | 64×64   | Бейдж завершённого этапа. |
+| `StageBadge-Locked.png`     | 64×64   | Бейдж недоступного этапа. |
+| `ProgressBar-Fill.png`      | 128×16  | Заливка прогресс-бара (`BarTexture`). |
+| `ProgressBar-BG.png`        | 128×16  | Подложка прогресс-бара. |
+| `Card-Background.png`       | 256×256 | Тайл-фон карточек (`bgFile`, tileable). |
+| `Card-Border.png`           | 256×32  | Рамка карточки (`edgeFile`, 8 сегментов 32×32: up/down/left/right/TL/TR/BL/BR). |
+| `Section-Divider.png`       | 256×16  | Декоративный разделитель секций. |
+| `Corner-Ornament.png`       | 64×64   | Угол декоративной рамки фрейма. |
+| `Top-Wave-Glow.png`         | 512×64  | «Волна» свечения сверху (как в оригинальном EJ). |
+| `Biome-Fire.png`            | 256×128 | Обложка рекомендации — огненные локации. |
+| `Biome-Arcane.png`          | 256×128 | Тайная магия. |
+| `Biome-Storm.png`           | 256×128 | Буря/вода. |
+| `Biome-Shadow.png`          | 256×128 | Тьма. |
+| `Biome-Nature.png`          | 256×128 | Природа. |
+| `Biome-Holy.png`            | 256×128 | Свет/нежить. |
+| `TypeIcon-Level.png`        | 64×64   | Иконка цели «уровень». |
+| `TypeIcon-Quest.png`        | 64×64   | «задание». |
+| `TypeIcon-QuestChain.png`   | 64×64   | «цепочка». |
+| `TypeIcon-Dungeon.png`      | 64×64   | «подземелье». |
+| `TypeIcon-Raid.png`         | 64×64   | «рейд». |
+| `TypeIcon-Boss.png`         | 64×64   | «босс». |
+| `TypeIcon-Achievement.png`  | 64×64   | «достижение». |
+| `TypeIcon-Reputation.png`   | 64×64   | «репутация». |
+| `TypeIcon-Profession.png`   | 64×64   | «профессия». |
+| `TypeIcon-Item.png`         | 64×64   | «предмет». |
+| `TypeIcon-Currency.png`     | 64×64   | «валюта». |
+| `TypeIcon-Custom.png`       | 64×64   | прочее. |
+| `TypeIcon-Done.png`         | 64×64   | Цель завершена (зелёная галочка). |
+| `TypeIcon-Locked.png`       | 64×64   | Цель заблокирована (замок). |
+| `Button-Up.png`             | 128×32  | Кнопка «Обновить», нормальное. |
+| `Button-Down.png`           | 128×32  | Кнопка нажата. |
+| `Button-Highlight.png`      | 128×32  | Hover. |
+
+## Куда положить в проекте
+
+```
+MoonWellClient/EncounterJournal/Textures/PlayerGuide/
+├── StageBadge-Active.blp
+├── StageBadge-Done.blp
+├── ...
+└── Button-Highlight.blp
+```
+
+И в XML использовать пути:
+```
+file="Interface\AddOns\MoonWellClient\EncounterJournal\Textures\PlayerGuide\StageBadge-Active"
+```
+(WoW сам подставит `.blp`.)
+
+## Конвертация PNG → BLP
+
+Любой из:
+- **BLPNG Converter** (Windows, GUI) — самый простой, drag-and-drop;
+- **BLPLab** — с предпросмотром;
+- **CLI**: `blpconverter input.png output.blp` (есть пайплайны на GitHub).
+
+Параметры:
+- **Compression:** `DXT5` для всего с альфой (всё, кроме `Card-Background` —
+  для него `DXT1` или `Uncompressed`, если хочется лучше);
+- **Mipmaps:** включить (`Generate Mipmaps`), кроме `ProgressBar-Fill/BG`
+  (тонкие полоски ломаются на мипмапах — там лучше off);
+- **Sampling:** `Bicubic` или `Lanczos`.
+
+## Замена биом-обложек
+
+Сейчас биом-обложки — стилизованные плашки с аркой и светящимся центром.
+Их можно полностью заменить вашими собственными — главное, оставить размер
+**256×128** и имена файлов. Если поменяете список биомов, поправьте таблицу
+`BIOME_COLOR` в `PlayerGuide.lua`.
+
+## Замена иконок типов целей
+
+Если у вас есть атлас иконок WoW (например, из `Interface/Icons/`) — карта
+`TYPE_ICON` в `PlayerGuide.lua` уже использует встроенные текстуры
+клиента. Текстуры `TypeIcon-*` нужны, только если хочется единого
+визуального словаря (рамка + глиф).
+
+## Применение в XML (примеры)
+
+```xml
+<!-- Бейдж в цепочке этапов: меняем встроенный UI-Quickslot2 на наш -->
+<Texture parentKey="BadgeBG"
+         file="Interface\AddOns\MoonWellClient\EncounterJournal\Textures\PlayerGuide\StageBadge-Active">
+  <Size><AbsDimension x="44" y="44"/></Size>
+  <Anchors><Anchor point="CENTER"/></Anchors>
+</Texture>
+
+<!-- Прогресс-бар: BarTexture указывает на Fill, BG ставится в Layer BACKGROUND -->
+<StatusBar parentKey="ProgressBar">
+  <BarTexture file="Interface\AddOns\MoonWellClient\EncounterJournal\Textures\PlayerGuide\ProgressBar-Fill"/>
+  <Layers>
+    <Layer level="BACKGROUND">
+      <Texture setAllPoints="true"
+        file="Interface\AddOns\MoonWellClient\EncounterJournal\Textures\PlayerGuide\ProgressBar-BG"/>
+    </Layer>
+  </Layers>
+</StatusBar>
+
+<!-- Карточка цели: bgFile = Card-Background, edgeFile = Card-Border -->
+<Backdrop bgFile="Interface\AddOns\MoonWellClient\EncounterJournal\Textures\PlayerGuide\Card-Background"
+          edgeFile="Interface\AddOns\MoonWellClient\EncounterJournal\Textures\PlayerGuide\Card-Border"
+          tile="true">
+  <BackgroundInsets><AbsInset left="4" right="4" top="4" bottom="4"/></BackgroundInsets>
+  <TileSize><AbsValue val="64"/></TileSize>
+  <EdgeSize><AbsValue val="16"/></EdgeSize>
+</Backdrop>
+```
+
+## Сноска
+
+Это плейсхолдеры на уровне «лучше, чем встроенные UI-Quickslot2». Если в
+проекте есть художник — финальные текстуры стоит делать в этом же
+визуальном словаре, чтобы Lua/XML менять не пришлось (только перерисовать
+PNG того же размера и сконвертировать).

client-export/textures/sheet.html

@@ -0,0 +1,263 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8" />
+  <title>PlayerGuide — Texture Sheet</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet" />
+  <style>
+    * { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; min-height: 100%; }
+    body {
+      font-family: 'EB Garamond', Georgia, serif;
+      background:
+        radial-gradient(ellipse at 50% 0%, #1c2c48 0%, transparent 60%),
+        radial-gradient(ellipse at 100% 100%, #0d1422 0%, transparent 70%),
+        linear-gradient(180deg, #0a1018 0%, #050810 100%);
+      color: #d8c8a0;
+      padding: 60px 50px 80px;
+    }
+    h1 {
+      font-family: 'Cinzel', serif; font-weight: 700;
+      font-size: 36px; margin: 0 0 6px;
+      color: #ffd76a;
+      text-shadow: 0 0 14px rgba(197,151,46,0.5), 0 2px 0 #000;
+      letter-spacing: 0.02em;
+    }
+    .sub {
+      font-style: italic; color: #a89878;
+      margin: 0 0 36px; font-size: 16px;
+    }
+    .group {
+      margin: 0 0 44px;
+    }
+    .group-title {
+      font-family: 'Cinzel', serif; font-weight: 700;
+      font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
+      color: #ffd76a; text-shadow: 0 1px 0 #000;
+      display: flex; align-items: center; gap: 12px;
+      margin: 0 0 18px;
+    }
+    .group-title::before {
+      content: ''; width: 3px; height: 14px;
+      background: #ffd76a; box-shadow: 0 0 6px #ffd76a88;
+    }
+    .group-title::after {
+      content: ''; flex: 1; height: 1px;
+      background: linear-gradient(90deg, rgba(138,106,38,0.5), transparent);
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      gap: 14px;
+    }
+    .item {
+      background: linear-gradient(180deg, rgba(28,44,72,0.4), rgba(10,16,24,0.4));
+      border: 1px solid rgba(255,215,106,0.18);
+      border-radius: 3px;
+      padding: 12px 12px 10px;
+      display: flex; flex-direction: column; align-items: center;
+    }
+    .preview {
+      width: 100%; aspect-ratio: 1 / 1;
+      display: flex; align-items: center; justify-content: center;
+      background:
+        linear-gradient(45deg, #0d0905 25%, transparent 25%),
+        linear-gradient(-45deg, #0d0905 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #0d0905 75%),
+        linear-gradient(-45deg, transparent 75%, #0d0905 75%);
+      background-size: 16px 16px;
+      background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+      background-color: #18120a;
+      border: 1px solid rgba(125,90,42,0.4);
+      margin-bottom: 8px;
+      overflow: hidden;
+    }
+    .preview.wide { aspect-ratio: 2 / 1; }
+    .preview.bar  { aspect-ratio: 4 / 1; }
+    .preview img {
+      max-width: 100%; max-height: 100%;
+      image-rendering: pixelated;
+    }
+    .name {
+      font-family: 'Cinzel', serif; font-weight: 600;
+      font-size: 11px; color: #ffe9a0;
+      text-shadow: 0 1px 0 #000;
+      letter-spacing: 0.04em; text-align: center;
+      line-height: 1.2;
+    }
+    .size {
+      font-size: 10px; color: #a89878;
+      font-style: italic; margin-top: 3px;
+      font-variant-numeric: tabular-nums;
+    }
+    /* Showcase row */
+    .showcase {
+      margin: 24px 0 40px;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+    }
+    .showcase-card {
+      background: linear-gradient(180deg, rgba(60,40,18,0.35), rgba(25,15,8,0.55));
+      border: 1px solid #5a4220;
+      box-shadow: inset 0 1px 0 rgba(255,200,100,0.18), 0 4px 12px rgba(0,0,0,0.5);
+      border-radius: 2px;
+      padding: 18px;
+      display: flex; gap: 14px; align-items: stretch;
+    }
+    .showcase-card h3 {
+      margin: 0 0 4px;
+      font-family: 'Cinzel', serif; font-weight: 700;
+      font-size: 14px; color: #ffe9a0; text-shadow: 0 1px 0 #000;
+    }
+    .showcase-card p {
+      margin: 0; font-style: italic; font-size: 12px; color: #a89878;
+    }
+    .progress-demo {
+      margin-top: 10px;
+      height: 14px; width: 100%; position: relative;
+      background: url('Card-Background.png');
+    }
+  </style>
+</head>
+<body>
+  <h1>PlayerGuide — лист текстур</h1>
+  <p class="sub">33 PNG-файла, готовы к конвертации в BLP. Шахматный фон под превью = прозрачность.</p>
+
+  <!-- Demo: показываем как они стыкуются вместе -->
+  <div class="group">
+    <div class="group-title">Демонстрация (как это смотрится в карточке)</div>
+    <div class="showcase">
+      <div class="showcase-card">
+        <img src="TypeIcon-Dungeon.png" width="44" height="44" alt="" />
+        <div style="flex:1;">
+          <h3>Пройти Кузню Крови</h3>
+          <p>Цитадель Адского Пламени • рек. уровень 61—64</p>
+          <div style="margin-top:8px; display:flex; gap:8px; align-items:center;">
+            <div style="flex:1; height:8px; background: url('ProgressBar-BG.png'); position:relative;">
+              <div style="width:35%; height:100%; background: url('ProgressBar-Fill.png');"></div>
+            </div>
+            <span style="font-family:Cinzel,serif; font-size:11px; color:#caa760;">0 / 1</span>
+          </div>
+        </div>
+      </div>
+      <div class="showcase-card" style="background: url('Card-Background.png'); border-color: #5a4220;">
+        <img src="StageBadge-Active.png" width="48" height="48" alt="" />
+        <div style="flex:1;">
+          <h3 style="color:#ffd76a;">Подготовка к Нордсколу</h3>
+          <p>Этап V из VII · 62% завершено</p>
+          <div style="margin-top:10px; height:14px; position:relative; background: url('ProgressBar-BG.png');">
+            <div style="width:62%; height:100%; background: url('ProgressBar-Fill.png');"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Группы текстур -->
+  <div class="group">
+    <div class="group-title">Бейджи этапов</div>
+    <div class="grid" id="stage"></div>
+  </div>
+  <div class="group">
+    <div class="group-title">Прогресс-бар</div>
+    <div class="grid" id="progress"></div>
+  </div>
+  <div class="group">
+    <div class="group-title">Карточка</div>
+    <div class="grid" id="card"></div>
+  </div>
+  <div class="group">
+    <div class="group-title">Декор</div>
+    <div class="grid" id="decor"></div>
+  </div>
+  <div class="group">
+    <div class="group-title">Обложки рекомендаций (биомы)</div>
+    <div class="grid" id="biome"></div>
+  </div>
+  <div class="group">
+    <div class="group-title">Иконки типов целей</div>
+    <div class="grid" id="types"></div>
+  </div>
+  <div class="group">
+    <div class="group-title">Иконки статусов</div>
+    <div class="grid" id="status"></div>
+  </div>
+  <div class="group">
+    <div class="group-title">Кнопки</div>
+    <div class="grid" id="buttons"></div>
+  </div>
+
+  <script>
+    const groups = {
+      stage: [
+        ['StageBadge-Active', '64×64'],
+        ['StageBadge-Done',   '64×64'],
+        ['StageBadge-Locked', '64×64'],
+      ],
+      progress: [
+        ['ProgressBar-Fill', '128×16', 'bar'],
+        ['ProgressBar-BG',   '128×16', 'bar'],
+      ],
+      card: [
+        ['Card-Background', '256×256'],
+        ['Card-Border',     '256×32',  'bar'],
+      ],
+      decor: [
+        ['Section-Divider',  '256×16',  'bar'],
+        ['Corner-Ornament',  '64×64'],
+        ['Top-Wave-Glow',    '512×64',  'bar'],
+      ],
+      biome: [
+        ['Biome-Fire',   '256×128', 'wide'],
+        ['Biome-Arcane', '256×128', 'wide'],
+        ['Biome-Storm',  '256×128', 'wide'],
+        ['Biome-Shadow', '256×128', 'wide'],
+        ['Biome-Nature', '256×128', 'wide'],
+        ['Biome-Holy',   '256×128', 'wide'],
+      ],
+      types: [
+        ['TypeIcon-Level',       '64×64'],
+        ['TypeIcon-Quest',       '64×64'],
+        ['TypeIcon-QuestChain',  '64×64'],
+        ['TypeIcon-Dungeon',     '64×64'],
+        ['TypeIcon-Raid',        '64×64'],
+        ['TypeIcon-Boss',        '64×64'],
+        ['TypeIcon-Achievement', '64×64'],
+        ['TypeIcon-Reputation',  '64×64'],
+        ['TypeIcon-Profession',  '64×64'],
+        ['TypeIcon-Item',        '64×64'],
+        ['TypeIcon-Currency',    '64×64'],
+        ['TypeIcon-Custom',      '64×64'],
+      ],
+      status: [
+        ['TypeIcon-Done',   '64×64'],
+        ['TypeIcon-Locked', '64×64'],
+      ],
+      buttons: [
+        ['Button-Up',        '128×32', 'bar'],
+        ['Button-Down',      '128×32', 'bar'],
+        ['Button-Highlight', '128×32', 'bar'],
+      ],
+    };
+
+    for (const [groupId, items] of Object.entries(groups)) {
+      const el = document.getElementById(groupId);
+      for (const [name, size, shape] of items) {
+        const item = document.createElement('div');
+        item.className = 'item';
+        item.innerHTML = `
+          <div class="preview ${shape || ''}">
+            <img src="${name}.png" alt="${name}" />
+          </div>
+          <div class="name">${name}</div>
+          <div class="size">${size}</div>
+        `;
+        el.appendChild(item);
+      }
+    }
+  </script>
+</body>
+</html>