187 lines
7.4 KiB
HTML
187 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>事件UI布局预览 (动态版)</title>
|
||
<style>
|
||
body {
|
||
background-color: #333;
|
||
color: white;
|
||
font-family: sans-serif;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 20px;
|
||
margin: 0;
|
||
}
|
||
.controls {
|
||
margin-bottom: 20px;
|
||
width: 1000px;
|
||
}
|
||
textarea {
|
||
width: 100%;
|
||
height: 150px;
|
||
background-color: #222;
|
||
color: #ddd;
|
||
border: 1px solid #555;
|
||
margin-bottom: 10px;
|
||
}
|
||
button {
|
||
padding: 10px 20px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
.window {
|
||
width: 1000px;
|
||
height: 750px;
|
||
background-color: #555;
|
||
border: 2px solid #ccc;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
.element {
|
||
position: absolute;
|
||
box-sizing: border-box;
|
||
border: 2px solid white;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
text-shadow: 1px 1px 2px black;
|
||
}
|
||
.lihui { background-color: rgba(255, 0, 0, 0.4); }
|
||
.name { background-color: rgba(0, 255, 0, 0.4); }
|
||
.text { background-color: rgba(0, 0, 255, 0.4); }
|
||
.options { background-color: rgba(255, 255, 0, 0.4); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="controls">
|
||
<h3>动态布局预览</h3>
|
||
<p>请将您的 <code>EventUIConfig.xml</code> 文件内容完整粘贴到下面的文本框中，然后点击“生成预览”按钮。</p>
|
||
<textarea id="xmlInput" placeholder="在这里粘贴 EventUIConfig.xml 的内容..."></textarea>
|
||
<button onclick="generatePreview()">生成预览</button>
|
||
</div>
|
||
<div class="window" id="window">
|
||
<!-- 布局将在这里生成 -->
|
||
</div>
|
||
|
||
<script>
|
||
function parseVector2(str) {
|
||
const match = str.match(/\((\s*[\d.]+)\s*,\s*([\d.]+)\s*\)/);
|
||
return match ? { x: parseFloat(match[1]), y: parseFloat(match[2]) } : { x: 0, y: 0 };
|
||
}
|
||
|
||
function generatePreview() {
|
||
const xmlString = document.getElementById('xmlInput').value;
|
||
if (!xmlString) {
|
||
alert('请先粘贴XML内容！');
|
||
return;
|
||
}
|
||
|
||
const parser = new DOMParser();
|
||
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
|
||
|
||
// Need to escape the dot in the class name for querySelector
|
||
const configDef = xmlDoc.querySelector('WulaFallenEmpire\\.EventUIConfigDef');
|
||
if (!configDef) {
|
||
alert('无法找到 WulaFallenEmpire.EventUIConfigDef 节点，请检查XML内容是否正确。');
|
||
return;
|
||
}
|
||
|
||
const config = {
|
||
lihuiSize: parseVector2(configDef.querySelector('lihuiSize')?.textContent || '(0,0)'),
|
||
nameSize: parseVector2(configDef.querySelector('nameSize')?.textContent || '(0,0)'),
|
||
textSize: parseVector2(configDef.querySelector('textSize')?.textContent || '(0,0)'),
|
||
optionsWidth: parseFloat(configDef.querySelector('optionsWidth')?.textContent || '0'),
|
||
textNameOffset: parseFloat(configDef.querySelector('textNameOffset')?.textContent || '0'),
|
||
optionsTextOffset: parseFloat(configDef.querySelector('optionsTextOffset')?.textContent || '0')
|
||
};
|
||
|
||
const windowRect = { width: 1000, height: 750 };
|
||
const windowDiv = document.getElementById('window');
|
||
windowDiv.innerHTML = ''; // Clear previous preview
|
||
|
||
// --- Calculation logic from Dialog_CustomDisplay.cs ---
|
||
const virtualWidth = config.lihuiSize.x + config.textSize.x;
|
||
const virtualHeight = config.lihuiSize.y;
|
||
|
||
const scaleX = windowRect.width / virtualWidth;
|
||
const scaleY = windowRect.height / virtualHeight;
|
||
const scale = Math.min(scaleX, scaleY) * 0.95;
|
||
|
||
const scaledLihuiWidth = config.lihuiSize.x * scale;
|
||
const scaledLihuiHeight = config.lihuiSize.y * scale;
|
||
const scaledNameWidth = config.nameSize.x * scale;
|
||
const scaledNameHeight = config.nameSize.y * scale;
|
||
const scaledTextWidth = config.textSize.x * scale;
|
||
const scaledTextHeight = config.textSize.y * scale;
|
||
const scaledOptionsWidth = config.optionsWidth * scale;
|
||
|
||
const totalContentWidth = scaledLihuiWidth + scaledTextWidth;
|
||
const totalContentHeight = scaledLihuiHeight;
|
||
const startX = (windowRect.width - totalContentWidth) / 2;
|
||
const startY = (windowRect.height - totalContentHeight) / 2;
|
||
|
||
// --- Create and position elements ---
|
||
|
||
// Lihui (Portrait)
|
||
const lihuiRect = { left: startX, top: startY, width: scaledLihuiWidth, height: scaledLihuiHeight };
|
||
createDiv('lihui', '立绘 (Portrait)', lihuiRect);
|
||
|
||
// Name
|
||
const nameRect = { left: lihuiRect.left + lihuiRect.width, top: lihuiRect.top, width: scaledNameWidth, height: scaledNameHeight };
|
||
createDiv('name', '名称 (Name)', nameRect);
|
||
|
||
// Text (Description)
|
||
const textRect = { left: nameRect.left, top: nameRect.top + nameRect.height + (config.textNameOffset * scale), width: scaledTextWidth, height: scaledTextHeight };
|
||
createDiv('text', '描述 (Description)', textRect);
|
||
|
||
// Options
|
||
const optionRect = { left: nameRect.left, top: textRect.top + textRect.height + (config.optionsTextOffset * scale), width: scaledOptionsWidth, height: lihuiRect.height - nameRect.height - textRect.height - ((config.textNameOffset + config.optionsTextOffset) * scale) };
|
||
createDiv('options', '选项 (Options)', optionRect);
|
||
}
|
||
|
||
function createDiv(className, text, rect) {
|
||
const div = document.createElement('div');
|
||
div.className = `element ${className}`;
|
||
div.textContent = text;
|
||
div.style.left = `${rect.left}px`;
|
||
div.style.top = `${rect.top}px`;
|
||
div.style.width = `${rect.width}px`;
|
||
div.style.height = `${rect.height}px`;
|
||
document.getElementById('window').appendChild(div);
|
||
}
|
||
|
||
// Auto-populate with example content
|
||
document.getElementById('xmlInput').value = `<?xml version="1.0" encoding="utf-8" ?>
|
||
<Defs>
|
||
<WulaFallenEmpire.EventUIConfigDef>
|
||
<defName>Wula_EventUIConfig</defName>
|
||
|
||
<!-- General Style -->
|
||
<labelFont>Small</labelFont>
|
||
<drawBorders>true</drawBorders>
|
||
<defaultBackgroundImagePath></defaultBackgroundImagePath>
|
||
|
||
<!-- Virtual Layout Dimensions -->
|
||
<lihuiSize>(500, 800)</lihuiSize>
|
||
<nameSize>(260, 130)</nameSize>
|
||
<textSize>(650, 500)</textSize>
|
||
<optionsWidth>610</optionsWidth>
|
||
|
||
<!-- Virtual Layout Offsets -->
|
||
<textNameOffset>20</textNameOffset>
|
||
<optionsTextOffset>20</optionsTextOffset>
|
||
|
||
</WulaFallenEmpire.EventUIConfigDef>
|
||
</Defs>`;
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|