mirror of
https://github.com/Coldsmiles/infstarweb.git
synced 2026-04-23 02:30:41 +08:00
feat: add towns overview page with interactive features and modals for town management
This commit is contained in:
zhangyuheng
876
js/towns_script.js
Normal file
876
js/towns_script.js
Normal file
@@ -0,0 +1,876 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const DEFAULT_GRADIENT = {
|
||||
from: '#667eea',
|
||||
to: '#764ba2'
|
||||
};
|
||||
|
||||
let townsData = [];
|
||||
const grid = document.getElementById('towns-list');
|
||||
const noResults = document.getElementById('no-results');
|
||||
const scaleFilters = document.getElementById('scale-filters');
|
||||
const typeFilters = document.getElementById('type-filters');
|
||||
const recruitFilters = document.getElementById('recruit-filters');
|
||||
const searchInput = document.getElementById('town-search');
|
||||
|
||||
// Modal Elements
|
||||
const modal = document.getElementById('town-modal');
|
||||
const closeModalBtn = modal.querySelector('.close-modal');
|
||||
|
||||
// Initial State
|
||||
let currentFilters = {
|
||||
scale: 'all',
|
||||
townType: 'all',
|
||||
recruitment: 'all',
|
||||
search: ''
|
||||
};
|
||||
|
||||
let currentDetailItem = null;
|
||||
|
||||
// Generate stable anchor ID for a town
|
||||
function generateTownId(item) {
|
||||
var raw = (item.title || '');
|
||||
var hash = 0;
|
||||
for (var i = 0; i < raw.length; i++) {
|
||||
hash = ((hash << 5) - hash) + raw.charCodeAt(i);
|
||||
hash |= 0;
|
||||
}
|
||||
return 't' + Math.abs(hash).toString(36);
|
||||
}
|
||||
|
||||
// Handle URL hash: auto-open town modal
|
||||
function handleHashNavigation() {
|
||||
var hash = location.hash.replace('#', '');
|
||||
if (!hash) return;
|
||||
for (var i = 0; i < townsData.length; i++) {
|
||||
if (generateTownId(townsData[i]) === hash) {
|
||||
openModal(townsData[i]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 1. Fetch Data
|
||||
fetch('data/towns.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
townsData = data;
|
||||
renderGrid();
|
||||
handleHashNavigation();
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error loading towns:', err);
|
||||
grid.innerHTML = '<p class="error">无法加载城镇数据。</p>';
|
||||
});
|
||||
|
||||
// 2. Event Listeners
|
||||
|
||||
// Scale Filter
|
||||
scaleFilters.addEventListener('click', (e) => {
|
||||
if (e.target.tagName === 'BUTTON') {
|
||||
Array.from(scaleFilters.children).forEach(btn => btn.classList.remove('active'));
|
||||
e.target.classList.add('active');
|
||||
currentFilters.scale = e.target.dataset.filter;
|
||||
renderGrid();
|
||||
}
|
||||
});
|
||||
|
||||
// Type Filter
|
||||
typeFilters.addEventListener('click', (e) => {
|
||||
if (e.target.tagName === 'BUTTON') {
|
||||
Array.from(typeFilters.children).forEach(btn => btn.classList.remove('active'));
|
||||
e.target.classList.add('active');
|
||||
currentFilters.townType = e.target.dataset.filter;
|
||||
renderGrid();
|
||||
}
|
||||
});
|
||||
|
||||
// Recruit Filter
|
||||
recruitFilters.addEventListener('click', (e) => {
|
||||
if (e.target.tagName === 'BUTTON') {
|
||||
Array.from(recruitFilters.children).forEach(btn => btn.classList.remove('active'));
|
||||
e.target.classList.add('active');
|
||||
currentFilters.recruitment = e.target.dataset.filter;
|
||||
renderGrid();
|
||||
}
|
||||
});
|
||||
|
||||
// Search
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
currentFilters.search = e.target.value.toLowerCase().trim();
|
||||
renderGrid();
|
||||
});
|
||||
|
||||
// Modal Close
|
||||
closeModalBtn.addEventListener('click', () => {
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
history.replaceState(null, '', location.pathname + location.search);
|
||||
});
|
||||
|
||||
window.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
history.replaceState(null, '', location.pathname + location.search);
|
||||
}
|
||||
});
|
||||
|
||||
// 3. Render Functions
|
||||
function renderGrid() {
|
||||
grid.innerHTML = '';
|
||||
|
||||
const filtered = townsData.filter(item => {
|
||||
const matchScale = currentFilters.scale === 'all' || item.scale === currentFilters.scale;
|
||||
const matchType = currentFilters.townType === 'all' || item.townType === currentFilters.townType;
|
||||
const matchRecruit = currentFilters.recruitment === 'all' || item.recruitment === currentFilters.recruitment;
|
||||
const matchSearch = !currentFilters.search ||
|
||||
item.title.toLowerCase().includes(currentFilters.search);
|
||||
return matchScale && matchType && matchRecruit && matchSearch;
|
||||
});
|
||||
|
||||
if (filtered.length === 0) {
|
||||
noResults.classList.remove('is-hidden');
|
||||
return;
|
||||
} else {
|
||||
noResults.classList.add('is-hidden');
|
||||
}
|
||||
|
||||
filtered.forEach(item => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'town-card';
|
||||
card.onclick = () => openModal(item);
|
||||
|
||||
const hasLogo = item.logo && item.logo.trim() !== '';
|
||||
const gradient = getTownGradient(item);
|
||||
|
||||
// Build card icon badges (scale + type + recruitment)
|
||||
let iconsHtml = '';
|
||||
iconsHtml += '<div class="town-card-icons">';
|
||||
iconsHtml += '<span class="town-icon-badge icon-scale-' + item.scale + '" title="' + getScaleText(item.scale) + '"><i class="fas ' + getScaleIcon(item.scale) + '"></i></span>';
|
||||
iconsHtml += '<span class="town-icon-badge icon-type-' + item.townType + '" title="' + getTownTypeText(item.townType) + '"><i class="fas ' + getTownTypeIcon(item.townType) + '"></i></span>';
|
||||
iconsHtml += '<span class="town-icon-badge icon-recruit-' + item.recruitment + '" title="' + getRecruitText(item.recruitment) + '"><i class="fas ' + getRecruitIcon(item.recruitment) + '"></i></span>';
|
||||
iconsHtml += '</div>';
|
||||
|
||||
card.innerHTML =
|
||||
'<div class="town-card-bg' + (hasLogo ? '' : ' no-logo') + '"' +
|
||||
(hasLogo ? ' style="background-image:url(\'' + escapeHtml(item.logo) + '\')"' : ' style="' + buildGradientBackgroundStyle(gradient) + '"') +
|
||||
'>' +
|
||||
(hasLogo ? '' : '<i class="fas fa-city town-logo-placeholder"></i>') +
|
||||
iconsHtml +
|
||||
'</div>' +
|
||||
'<div class="town-card-body">' +
|
||||
'<h3 class="town-card-title">' + escapeHtml(item.title) + '</h3>' +
|
||||
'<div class="town-card-meta">' +
|
||||
'<span class="town-meta-tag"><i class="fas ' + getScaleIcon(item.scale) + '"></i> ' + getScaleText(item.scale) + '</span>' +
|
||||
'<span class="town-meta-tag"><i class="fas ' + getTownTypeIcon(item.townType) + '"></i> ' + getTownTypeText(item.townType) + '</span>' +
|
||||
'<span class="town-meta-tag"><i class="fas ' + getRecruitIcon(item.recruitment) + '"></i> ' + getRecruitText(item.recruitment) + '</span>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
grid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function openModal(item) {
|
||||
currentDetailItem = item;
|
||||
|
||||
// Banner
|
||||
var banner = document.getElementById('town-modal-banner');
|
||||
var hasLogo = item.logo && item.logo.trim() !== '';
|
||||
var gradient = getTownGradient(item);
|
||||
banner.className = 'town-modal-banner' + (hasLogo ? '' : ' no-logo');
|
||||
if (hasLogo) {
|
||||
banner.style.backgroundImage = "url('" + item.logo + "')";
|
||||
banner.style.background = '';
|
||||
banner.innerHTML = '';
|
||||
} else {
|
||||
banner.style.backgroundImage = '';
|
||||
banner.style.background = buildGradientBackgroundValue(gradient);
|
||||
banner.innerHTML = '<i class="fas fa-city town-banner-placeholder"></i>';
|
||||
}
|
||||
|
||||
// Title
|
||||
document.getElementById('town-modal-title').innerText = item.title;
|
||||
|
||||
// Badges
|
||||
var badgesContainer = document.getElementById('town-modal-badges');
|
||||
badgesContainer.innerHTML = '';
|
||||
|
||||
var scaleBadge = document.createElement('span');
|
||||
scaleBadge.className = 'town-badge badge-scale-' + item.scale;
|
||||
scaleBadge.innerHTML = '<i class="fas ' + getScaleIcon(item.scale) + '"></i> ' + getScaleText(item.scale);
|
||||
badgesContainer.appendChild(scaleBadge);
|
||||
|
||||
var typeBadge = document.createElement('span');
|
||||
typeBadge.className = 'town-badge badge-type-' + item.townType;
|
||||
typeBadge.innerHTML = '<i class="fas ' + getTownTypeIcon(item.townType) + '"></i> ' + getTownTypeText(item.townType);
|
||||
badgesContainer.appendChild(typeBadge);
|
||||
|
||||
var recruitBadge = document.createElement('span');
|
||||
recruitBadge.className = 'town-badge badge-recruit-' + item.recruitment;
|
||||
recruitBadge.innerHTML = '<i class="fas ' + getRecruitIcon(item.recruitment) + '"></i> ' + getRecruitText(item.recruitment);
|
||||
badgesContainer.appendChild(recruitBadge);
|
||||
|
||||
// Coordinates
|
||||
var coords = item.coordinates;
|
||||
document.getElementById('town-modal-coords').innerText = 'X: ' + coords.x + ', Y: ' + coords.y + ', Z: ' + coords.z;
|
||||
|
||||
// Map Link
|
||||
var mapLink = document.getElementById('town-modal-map-link');
|
||||
mapLink.href = 'https://mcmap.lunadeer.cn/#world:' + coords.x + ':' + coords.y + ':' + coords.z + ':500:0:0:0:1:flat';
|
||||
|
||||
// Founders
|
||||
var foundersContainer = document.getElementById('town-modal-founders');
|
||||
foundersContainer.innerHTML = '';
|
||||
if (item.founders && item.founders.length > 0) {
|
||||
item.founders.forEach(function(name) {
|
||||
var tag = document.createElement('div');
|
||||
tag.className = 'contributor-tag';
|
||||
tag.innerHTML = '<img src="https://minotar.net/avatar/' + encodeURIComponent(name) + '/20" alt="' + escapeHtml(name) + '">' + escapeHtml(name);
|
||||
foundersContainer.appendChild(tag);
|
||||
});
|
||||
} else {
|
||||
foundersContainer.innerHTML = '<span class="text-secondary">暂无记录</span>';
|
||||
}
|
||||
|
||||
// Members
|
||||
var membersContainer = document.getElementById('town-modal-members');
|
||||
membersContainer.innerHTML = '';
|
||||
if (item.members && item.members.length > 0) {
|
||||
item.members.forEach(function(name) {
|
||||
var tag = document.createElement('div');
|
||||
tag.className = 'contributor-tag';
|
||||
tag.innerHTML = '<img src="https://minotar.net/avatar/' + encodeURIComponent(name) + '/20" alt="' + escapeHtml(name) + '">' + escapeHtml(name);
|
||||
membersContainer.appendChild(tag);
|
||||
});
|
||||
} else {
|
||||
membersContainer.innerHTML = '<span class="text-secondary">暂无记录</span>';
|
||||
}
|
||||
|
||||
// Introduction
|
||||
renderContentList(document.getElementById('town-modal-introduction'), item.introduction);
|
||||
|
||||
modal.style.display = 'block';
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Update URL hash
|
||||
var anchorId = generateTownId(item);
|
||||
history.replaceState(null, '', '#' + anchorId);
|
||||
}
|
||||
|
||||
function renderContentList(container, list) {
|
||||
container.innerHTML = '';
|
||||
if (!list || list.length === 0) {
|
||||
container.innerHTML = '<p>无</p>';
|
||||
return;
|
||||
}
|
||||
list.forEach(function(block) {
|
||||
if (block.type === 'text') {
|
||||
var p = document.createElement('p');
|
||||
p.innerText = block.content;
|
||||
container.appendChild(p);
|
||||
} else if (block.type === 'image') {
|
||||
var img = document.createElement('img');
|
||||
img.src = block.content;
|
||||
img.loading = 'lazy';
|
||||
container.appendChild(img);
|
||||
} else if (block.type === 'video') {
|
||||
var bv = parseBVNumber(block.content);
|
||||
if (bv) {
|
||||
var wrapper = document.createElement('div');
|
||||
wrapper.className = 'video-embed-wrapper';
|
||||
var iframe = document.createElement('iframe');
|
||||
iframe.src = 'https://player.bilibili.com/player.html?bvid=' + bv + '&autoplay=0&high_quality=1';
|
||||
iframe.allowFullscreen = true;
|
||||
iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups');
|
||||
iframe.loading = 'lazy';
|
||||
wrapper.appendChild(iframe);
|
||||
container.appendChild(wrapper);
|
||||
} else {
|
||||
var p = document.createElement('p');
|
||||
p.className = 'text-secondary';
|
||||
p.innerText = '无效的视频 BV 号';
|
||||
container.appendChild(p);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function parseBVNumber(input) {
|
||||
if (!input) return null;
|
||||
input = input.trim();
|
||||
var bvPattern = /^(BV[A-Za-z0-9]+)$/;
|
||||
var directMatch = input.match(bvPattern);
|
||||
if (directMatch) return directMatch[1];
|
||||
var urlPattern = /bilibili\.com\/video\/(BV[A-Za-z0-9]+)/;
|
||||
var urlMatch = input.match(urlPattern);
|
||||
if (urlMatch) return urlMatch[1];
|
||||
var generalPattern = /(BV[A-Za-z0-9]{10,})/;
|
||||
var generalMatch = input.match(generalPattern);
|
||||
if (generalMatch) return generalMatch[1];
|
||||
return null;
|
||||
}
|
||||
|
||||
// Helpers
|
||||
function getScaleText(scale) {
|
||||
var map = { 'small': '小型（5人以下）', 'medium': '中型（2-10人）', 'large': '大型（10人以上）' };
|
||||
return map[scale] || scale;
|
||||
}
|
||||
|
||||
function getScaleIcon(scale) {
|
||||
var map = { 'small': 'fa-user', 'medium': 'fa-users', 'large': 'fa-city' };
|
||||
return map[scale] || 'fa-users';
|
||||
}
|
||||
|
||||
function getTownTypeText(type) {
|
||||
var map = { 'building': '建筑', 'adventure': '冒险', 'industry': '工业' };
|
||||
return map[type] || type;
|
||||
}
|
||||
|
||||
function getTownTypeIcon(type) {
|
||||
var map = { 'building': 'fa-building', 'adventure': 'fa-dragon', 'industry': 'fa-industry' };
|
||||
return map[type] || 'fa-building';
|
||||
}
|
||||
|
||||
function getRecruitText(recruitment) {
|
||||
var map = { 'welcome': '欢迎加入', 'closed': '暂不招人', 'maybe': '可以考虑' };
|
||||
return map[recruitment] || recruitment;
|
||||
}
|
||||
|
||||
function getRecruitIcon(recruitment) {
|
||||
var map = { 'welcome': 'fa-door-open', 'closed': 'fa-door-closed', 'maybe': 'fa-question-circle' };
|
||||
return map[recruitment] || 'fa-info-circle';
|
||||
}
|
||||
|
||||
function normalizeHexColor(value, fallback) {
|
||||
if (!value || typeof value !== 'string') return fallback;
|
||||
var trimmed = value.trim();
|
||||
if (/^#[0-9a-fA-F]{6}$/.test(trimmed)) return trimmed;
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function getTownGradient(item) {
|
||||
var gradient = item && item.gradient ? item.gradient : {};
|
||||
return {
|
||||
from: normalizeHexColor(gradient.from, DEFAULT_GRADIENT.from),
|
||||
to: normalizeHexColor(gradient.to, DEFAULT_GRADIENT.to)
|
||||
};
|
||||
}
|
||||
|
||||
function buildGradientBackgroundValue(gradient) {
|
||||
return 'linear-gradient(135deg, ' + gradient.from + ' 0%, ' + gradient.to + ' 100%)';
|
||||
}
|
||||
|
||||
function buildGradientBackgroundStyle(gradient) {
|
||||
return 'background:' + buildGradientBackgroundValue(gradient) + ';';
|
||||
}
|
||||
|
||||
// Share town link
|
||||
document.getElementById('btn-share-town').addEventListener('click', function() {
|
||||
if (!currentDetailItem) return;
|
||||
var anchorId = generateTownId(currentDetailItem);
|
||||
var url = location.origin + location.pathname + '#' + anchorId;
|
||||
var btn = document.getElementById('btn-share-town');
|
||||
navigator.clipboard.writeText(url).then(function() {
|
||||
btn.innerHTML = '<i class="fas fa-check"></i> 已复制链接';
|
||||
btn.classList.add('shared');
|
||||
setTimeout(function() {
|
||||
btn.innerHTML = '<i class="fas fa-share-alt"></i> 分享';
|
||||
btn.classList.remove('shared');
|
||||
}, 2000);
|
||||
}).catch(function() {
|
||||
var tmp = document.createElement('input');
|
||||
tmp.value = url;
|
||||
document.body.appendChild(tmp);
|
||||
tmp.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(tmp);
|
||||
btn.innerHTML = '<i class="fas fa-check"></i> 已复制链接';
|
||||
setTimeout(function() {
|
||||
btn.innerHTML = '<i class="fas fa-share-alt"></i> 分享';
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
|
||||
// Open editor from detail modal
|
||||
document.getElementById('btn-edit-town').addEventListener('click', function() {
|
||||
if (currentDetailItem) {
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
openEditor(currentDetailItem);
|
||||
}
|
||||
});
|
||||
|
||||
// ========== Editor Modal Logic ==========
|
||||
|
||||
var editorModal = document.getElementById('town-editor-modal');
|
||||
var jsonOutputModal = document.getElementById('town-json-output-modal');
|
||||
var closeEditorModalBtn = editorModal.querySelector('.close-editor-modal');
|
||||
var closeJsonModalBtn = jsonOutputModal.querySelector('.close-json-modal');
|
||||
|
||||
// Open empty editor for new town
|
||||
document.getElementById('btn-add-town').addEventListener('click', function() {
|
||||
openEditor(null);
|
||||
});
|
||||
|
||||
// Close editor modal
|
||||
closeEditorModalBtn.addEventListener('click', function() {
|
||||
editorModal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
});
|
||||
window.addEventListener('click', function(e) {
|
||||
if (e.target === editorModal) {
|
||||
editorModal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
if (e.target === jsonOutputModal) {
|
||||
jsonOutputModal.style.display = 'none';
|
||||
}
|
||||
});
|
||||
closeJsonModalBtn.addEventListener('click', function() {
|
||||
jsonOutputModal.style.display = 'none';
|
||||
});
|
||||
|
||||
// State for editor
|
||||
var editorFounders = [];
|
||||
var editorMembers = [];
|
||||
var editorIntroduction = [];
|
||||
|
||||
// Initialize custom selects
|
||||
editorModal.querySelectorAll('.custom-select').forEach(function(select) {
|
||||
var trigger = select.querySelector('.custom-select-trigger');
|
||||
var options = select.querySelectorAll('.custom-option');
|
||||
var input = select.querySelector('input[type="hidden"]');
|
||||
var text = select.querySelector('.custom-select-text');
|
||||
|
||||
trigger.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
var isOpen = select.classList.contains('open');
|
||||
editorModal.querySelectorAll('.custom-select').forEach(function(s) { s.classList.remove('open'); });
|
||||
if (!isOpen) {
|
||||
select.classList.add('open');
|
||||
}
|
||||
});
|
||||
|
||||
options.forEach(function(option) {
|
||||
option.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
options.forEach(function(opt) { opt.classList.remove('selected'); });
|
||||
option.classList.add('selected');
|
||||
text.innerText = option.innerText;
|
||||
input.value = option.dataset.value;
|
||||
input.dispatchEvent(new Event('change'));
|
||||
select.classList.remove('open');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', function() {
|
||||
editorModal.querySelectorAll('.custom-select').forEach(function(s) { s.classList.remove('open'); });
|
||||
});
|
||||
|
||||
function setCustomSelectValue(id, value) {
|
||||
var input = document.getElementById(id);
|
||||
if (!input) return;
|
||||
var select = input.closest('.custom-select');
|
||||
var option = select.querySelector('.custom-option[data-value="' + value + '"]');
|
||||
if (option) {
|
||||
input.value = value;
|
||||
select.querySelector('.custom-select-text').innerText = option.innerText;
|
||||
select.querySelectorAll('.custom-option').forEach(function(opt) { opt.classList.remove('selected'); });
|
||||
option.classList.add('selected');
|
||||
}
|
||||
}
|
||||
|
||||
function openEditor(item) {
|
||||
var gradient = getTownGradient(item || {});
|
||||
editorFounders = item ? item.founders.slice() : [];
|
||||
editorMembers = item ? item.members.slice() : [];
|
||||
editorIntroduction = item ? item.introduction.map(function(i) { return {type: i.type, content: i.content}; }) : [];
|
||||
|
||||
document.getElementById('editor-town-title').value = item ? item.title : '';
|
||||
document.getElementById('editor-town-logo').value = item ? (item.logo || '') : '';
|
||||
document.getElementById('editor-town-gradient-from').value = gradient.from;
|
||||
document.getElementById('editor-town-gradient-to').value = gradient.to;
|
||||
|
||||
setCustomSelectValue('editor-town-scale', item ? item.scale : 'small');
|
||||
setCustomSelectValue('editor-town-type', item ? item.townType : 'building');
|
||||
setCustomSelectValue('editor-town-recruit', item ? item.recruitment : 'welcome');
|
||||
|
||||
document.getElementById('editor-town-x').value = item ? item.coordinates.x : '';
|
||||
document.getElementById('editor-town-y').value = item ? item.coordinates.y : '';
|
||||
document.getElementById('editor-town-z').value = item ? item.coordinates.z : '';
|
||||
|
||||
renderTagsList('editor-founders-tags', editorFounders);
|
||||
renderTagsList('editor-members-tags', editorMembers);
|
||||
renderSortableList('editor-introduction-list', editorIntroduction);
|
||||
updatePreview();
|
||||
|
||||
editorModal.style.display = 'block';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
// --- Tags input helpers ---
|
||||
function renderTagsList(containerId, list) {
|
||||
var container = document.getElementById(containerId);
|
||||
container.innerHTML = '';
|
||||
list.forEach(function(name, idx) {
|
||||
var tag = document.createElement('span');
|
||||
tag.className = 'editor-tag';
|
||||
tag.innerHTML = escapeHtml(name) + ' <span class="editor-tag-remove" data-idx="' + idx + '" data-list="' + containerId + '"><i class="fas fa-times"></i></span>';
|
||||
container.appendChild(tag);
|
||||
});
|
||||
}
|
||||
|
||||
function commitTagInput(inputId, list, tagsContainerId) {
|
||||
var input = document.getElementById(inputId);
|
||||
var value = input.value.trim();
|
||||
if (value && list.indexOf(value) === -1) {
|
||||
list.push(value);
|
||||
renderTagsList(tagsContainerId, list);
|
||||
updatePreview();
|
||||
}
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
// Founders tags
|
||||
document.getElementById('editor-founders-tags').addEventListener('click', function(e) {
|
||||
var removeBtn = e.target.closest('.editor-tag-remove');
|
||||
if (removeBtn) {
|
||||
var idx = parseInt(removeBtn.dataset.idx);
|
||||
editorFounders.splice(idx, 1);
|
||||
renderTagsList('editor-founders-tags', editorFounders);
|
||||
updatePreview();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('editor-founder-input').addEventListener('keydown', function(e) {
|
||||
if (e.isComposing) return;
|
||||
if (e.key === 'Enter' || e.key === ' ' || e.code === 'Space') {
|
||||
e.preventDefault();
|
||||
commitTagInput('editor-founder-input', editorFounders, 'editor-founders-tags');
|
||||
}
|
||||
});
|
||||
document.getElementById('editor-founder-input').addEventListener('blur', function() {
|
||||
commitTagInput('editor-founder-input', editorFounders, 'editor-founders-tags');
|
||||
});
|
||||
document.getElementById('editor-founders-wrapper').addEventListener('click', function() {
|
||||
document.getElementById('editor-founder-input').focus();
|
||||
});
|
||||
|
||||
// Members tags
|
||||
document.getElementById('editor-members-tags').addEventListener('click', function(e) {
|
||||
var removeBtn = e.target.closest('.editor-tag-remove');
|
||||
if (removeBtn) {
|
||||
var idx = parseInt(removeBtn.dataset.idx);
|
||||
editorMembers.splice(idx, 1);
|
||||
renderTagsList('editor-members-tags', editorMembers);
|
||||
updatePreview();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('editor-member-input').addEventListener('keydown', function(e) {
|
||||
if (e.isComposing) return;
|
||||
if (e.key === 'Enter' || e.key === ' ' || e.code === 'Space') {
|
||||
e.preventDefault();
|
||||
commitTagInput('editor-member-input', editorMembers, 'editor-members-tags');
|
||||
}
|
||||
});
|
||||
document.getElementById('editor-member-input').addEventListener('blur', function() {
|
||||
commitTagInput('editor-member-input', editorMembers, 'editor-members-tags');
|
||||
});
|
||||
document.getElementById('editor-members-wrapper').addEventListener('click', function() {
|
||||
document.getElementById('editor-member-input').focus();
|
||||
});
|
||||
|
||||
// --- Sortable Lists (drag-and-drop) ---
|
||||
var dragState = { listId: null, fromIdx: null };
|
||||
|
||||
function renderSortableList(listId, items) {
|
||||
var container = document.getElementById(listId);
|
||||
container.innerHTML = '';
|
||||
items.forEach(function(item, idx) {
|
||||
var div = document.createElement('div');
|
||||
div.className = 'sortable-item';
|
||||
div.draggable = true;
|
||||
div.dataset.idx = idx;
|
||||
div.dataset.listId = listId;
|
||||
|
||||
var typeBadgeClass = item.type === 'text' ? 'badge-text' : item.type === 'image' ? 'badge-image' : 'badge-video';
|
||||
var typeBadgeLabel = item.type === 'text' ? '文字' : item.type === 'image' ? '图片' : '视频';
|
||||
var contentHtml;
|
||||
if (item.type === 'text') {
|
||||
contentHtml = '<textarea class="item-content" rows="2" placeholder="输入文字内容...">' + escapeHtml(item.content) + '</textarea>';
|
||||
} else if (item.type === 'image') {
|
||||
contentHtml = '<input type="text" class="item-content" placeholder="输入图片URL..." value="' + escapeHtml(item.content) + '">';
|
||||
} else {
|
||||
contentHtml = '<input type="text" class="item-content" placeholder="BV1xxxxxxxxxx 或 bilibili 视频地址" value="' + escapeHtml(item.content) + '">';
|
||||
}
|
||||
div.innerHTML =
|
||||
'<span class="drag-handle"><i class="fas fa-grip-vertical"></i></span>' +
|
||||
'<span class="item-type-badge ' + typeBadgeClass + '">' + typeBadgeLabel + '</span>' +
|
||||
contentHtml +
|
||||
'<button type="button" class="remove-item-btn" title="删除"><i class="fas fa-trash-alt"></i></button>';
|
||||
container.appendChild(div);
|
||||
|
||||
div.addEventListener('dragstart', onDragStart);
|
||||
div.addEventListener('dragover', onDragOver);
|
||||
div.addEventListener('dragenter', onDragEnter);
|
||||
div.addEventListener('dragleave', onDragLeave);
|
||||
div.addEventListener('drop', onDrop);
|
||||
div.addEventListener('dragend', onDragEnd);
|
||||
|
||||
var contentEl = div.querySelector('.item-content');
|
||||
contentEl.addEventListener('input', function() {
|
||||
items[idx].content = contentEl.value;
|
||||
updatePreview();
|
||||
});
|
||||
|
||||
div.querySelector('.remove-item-btn').addEventListener('click', function() {
|
||||
items.splice(idx, 1);
|
||||
renderSortableList(listId, items);
|
||||
updatePreview();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onDragStart(e) {
|
||||
var item = e.target.closest('.sortable-item');
|
||||
if (!item) return;
|
||||
dragState.listId = item.dataset.listId;
|
||||
dragState.fromIdx = parseInt(item.dataset.idx);
|
||||
item.classList.add('dragging');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('text/plain', '');
|
||||
}
|
||||
|
||||
function onDragOver(e) {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
}
|
||||
|
||||
function onDragEnter(e) {
|
||||
var item = e.target.closest('.sortable-item');
|
||||
if (item && item.dataset.listId === dragState.listId) {
|
||||
item.classList.add('drag-over');
|
||||
}
|
||||
}
|
||||
|
||||
function onDragLeave(e) {
|
||||
var item = e.target.closest('.sortable-item');
|
||||
if (item) {
|
||||
item.classList.remove('drag-over');
|
||||
}
|
||||
}
|
||||
|
||||
function onDrop(e) {
|
||||
e.preventDefault();
|
||||
var item = e.target.closest('.sortable-item');
|
||||
if (!item || item.dataset.listId !== dragState.listId) return;
|
||||
var toIdx = parseInt(item.dataset.idx);
|
||||
var fromIdx = dragState.fromIdx;
|
||||
if (fromIdx === toIdx) return;
|
||||
|
||||
var listId = dragState.listId;
|
||||
var items = editorIntroduction;
|
||||
|
||||
var moved = items.splice(fromIdx, 1)[0];
|
||||
items.splice(toIdx, 0, moved);
|
||||
|
||||
renderSortableList(listId, items);
|
||||
updatePreview();
|
||||
}
|
||||
|
||||
function onDragEnd() {
|
||||
document.querySelectorAll('.sortable-item').forEach(function(el) {
|
||||
el.classList.remove('dragging', 'drag-over');
|
||||
});
|
||||
dragState = { listId: null, fromIdx: null };
|
||||
}
|
||||
|
||||
// --- Add item buttons ---
|
||||
editorModal.querySelectorAll('.add-item-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var type = btn.dataset.type;
|
||||
var newItem = { type: type, content: '' };
|
||||
editorIntroduction.push(newItem);
|
||||
renderSortableList('editor-introduction-list', editorIntroduction);
|
||||
updatePreview();
|
||||
});
|
||||
});
|
||||
|
||||
// --- Live Preview ---
|
||||
['editor-town-title', 'editor-town-logo', 'editor-town-scale', 'editor-town-type',
|
||||
'editor-town-recruit', 'editor-town-x', 'editor-town-y', 'editor-town-z'].forEach(function(id) {
|
||||
var el = document.getElementById(id);
|
||||
el.addEventListener('input', updatePreview);
|
||||
el.addEventListener('change', updatePreview);
|
||||
});
|
||||
|
||||
['editor-town-gradient-from', 'editor-town-gradient-to'].forEach(function(id) {
|
||||
var el = document.getElementById(id);
|
||||
el.addEventListener('input', updatePreview);
|
||||
el.addEventListener('change', updatePreview);
|
||||
});
|
||||
|
||||
function updatePreview() {
|
||||
var preview = document.getElementById('town-editor-preview-area');
|
||||
var title = document.getElementById('editor-town-title').value || '未命名城镇';
|
||||
var logo = document.getElementById('editor-town-logo').value.trim();
|
||||
var scale = document.getElementById('editor-town-scale').value;
|
||||
var townType = document.getElementById('editor-town-type').value;
|
||||
var recruit = document.getElementById('editor-town-recruit').value;
|
||||
var x = document.getElementById('editor-town-x').value || '0';
|
||||
var y = document.getElementById('editor-town-y').value || '64';
|
||||
var z = document.getElementById('editor-town-z').value || '0';
|
||||
var gradient = {
|
||||
from: normalizeHexColor(document.getElementById('editor-town-gradient-from').value, DEFAULT_GRADIENT.from),
|
||||
to: normalizeHexColor(document.getElementById('editor-town-gradient-to').value, DEFAULT_GRADIENT.to)
|
||||
};
|
||||
var hasLogo = logo !== '';
|
||||
|
||||
var html = '<div class="preview-stack">';
|
||||
|
||||
html += '<div class="preview-detail-shell">';
|
||||
html += '<div class="town-preview-banner' + (hasLogo ? '' : ' no-logo') + '"' + (hasLogo ? ' style="background-image:url(\'' + escapeHtml(logo) + '\')"' : ' style="' + buildGradientBackgroundStyle(gradient) + '"') + '>';
|
||||
if (!hasLogo) {
|
||||
html += '<i class="fas fa-city town-banner-placeholder"></i>';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<div class="preview-detail-header">';
|
||||
html += '<h3 class="preview-detail-title">' + escapeHtml(title) + '</h3>';
|
||||
html += '<div class="preview-badges">';
|
||||
html += '<span class="town-badge badge-scale-' + scale + '"><i class="fas ' + getScaleIcon(scale) + '"></i> ' + getScaleText(scale) + '</span>';
|
||||
html += '<span class="town-badge badge-type-' + townType + '"><i class="fas ' + getTownTypeIcon(townType) + '"></i> ' + getTownTypeText(townType) + '</span>';
|
||||
html += '<span class="town-badge badge-recruit-' + recruit + '"><i class="fas ' + getRecruitIcon(recruit) + '"></i> ' + getRecruitText(recruit) + '</span>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
html += '<div class="preview-detail-body">';
|
||||
|
||||
html += '<div class="preview-section">';
|
||||
html += '<h4 class="preview-section-title"><i class="fas fa-map-marker-alt"></i> 位置信息</h4>';
|
||||
html += '<p class="preview-inline-text">主世界: X: ' + escapeHtml(x) + ', Y: ' + escapeHtml(y) + ', Z: ' + escapeHtml(z) + '</p>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="preview-section">';
|
||||
html += '<h4 class="preview-section-title"><i class="fas fa-crown"></i> 创始人</h4>';
|
||||
if (editorFounders.length > 0) {
|
||||
html += '<div class="contributors-list">';
|
||||
editorFounders.forEach(function(name) {
|
||||
html += '<div class="contributor-tag"><img src="https://minotar.net/avatar/' + encodeURIComponent(name) + '/20" alt="' + escapeHtml(name) + '">' + escapeHtml(name) + '</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
} else {
|
||||
html += '<span class="text-secondary">暂无记录</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="preview-section">';
|
||||
html += '<h4 class="preview-section-title"><i class="fas fa-users"></i> 主要成员</h4>';
|
||||
if (editorMembers.length > 0) {
|
||||
html += '<div class="contributors-list">';
|
||||
editorMembers.forEach(function(name) {
|
||||
html += '<div class="contributor-tag"><img src="https://minotar.net/avatar/' + encodeURIComponent(name) + '/20" alt="' + escapeHtml(name) + '">' + escapeHtml(name) + '</div>';
|
||||
});
|
||||
html += '</div>';
|
||||
} else {
|
||||
html += '<span class="text-secondary">暂无记录</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="preview-section">';
|
||||
html += '<h4 class="preview-section-title"><i class="fas fa-book-open"></i> 城镇介绍</h4>';
|
||||
html += '<div class="instruction-content">';
|
||||
if (editorIntroduction.length > 0) {
|
||||
editorIntroduction.forEach(function(block) {
|
||||
if (block.type === 'text') {
|
||||
html += '<p>' + (escapeHtml(block.content) || '<span class="text-secondary">空文字</span>') + '</p>';
|
||||
} else if (block.type === 'image') {
|
||||
html += block.content ? '<img src="' + escapeHtml(block.content) + '" loading="lazy">' : '<p class="text-secondary">空图片</p>';
|
||||
} else if (block.type === 'video') {
|
||||
html += renderVideoPreviewHtml(block.content);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
html += '<p>无</p>';
|
||||
}
|
||||
html += '</div></div>';
|
||||
|
||||
html += '</div></div>';
|
||||
html += '</div>';
|
||||
preview.innerHTML = html;
|
||||
}
|
||||
|
||||
// --- Save / Generate JSON ---
|
||||
document.getElementById('btn-save-town').addEventListener('click', function() {
|
||||
var title = document.getElementById('editor-town-title').value.trim();
|
||||
if (!title) {
|
||||
alert('请填写城镇名称');
|
||||
document.getElementById('editor-town-title').focus();
|
||||
return;
|
||||
}
|
||||
|
||||
var townObj = {
|
||||
title: title,
|
||||
logo: document.getElementById('editor-town-logo').value.trim(),
|
||||
gradient: {
|
||||
from: normalizeHexColor(document.getElementById('editor-town-gradient-from').value, DEFAULT_GRADIENT.from),
|
||||
to: normalizeHexColor(document.getElementById('editor-town-gradient-to').value, DEFAULT_GRADIENT.to)
|
||||
},
|
||||
coordinates: {
|
||||
x: parseInt(document.getElementById('editor-town-x').value) || 0,
|
||||
y: parseInt(document.getElementById('editor-town-y').value) || 64,
|
||||
z: parseInt(document.getElementById('editor-town-z').value) || 0
|
||||
},
|
||||
scale: document.getElementById('editor-town-scale').value,
|
||||
townType: document.getElementById('editor-town-type').value,
|
||||
recruitment: document.getElementById('editor-town-recruit').value,
|
||||
founders: editorFounders.slice(),
|
||||
members: editorMembers.slice(),
|
||||
introduction: editorIntroduction.filter(function(i) { return i.content.trim() !== ''; }).map(function(i) {
|
||||
return i.type === 'video' ? { type: 'video', content: parseBVNumber(i.content) || i.content } : { type: i.type, content: i.content };
|
||||
})
|
||||
};
|
||||
|
||||
var jsonStr = JSON.stringify(townObj, null, 4);
|
||||
document.getElementById('town-json-output').value = jsonStr;
|
||||
jsonOutputModal.style.display = 'block';
|
||||
});
|
||||
|
||||
// --- Copy JSON ---
|
||||
document.getElementById('btn-copy-town-json').addEventListener('click', function() {
|
||||
var textArea = document.getElementById('town-json-output');
|
||||
textArea.select();
|
||||
textArea.setSelectionRange(0, 99999);
|
||||
|
||||
navigator.clipboard.writeText(textArea.value).then(function() {
|
||||
var btn = document.getElementById('btn-copy-town-json');
|
||||
var originalHTML = btn.innerHTML;
|
||||
btn.innerHTML = '<i class="fas fa-check"></i> 已复制！';
|
||||
btn.style.background = '#34c759';
|
||||
setTimeout(function() {
|
||||
btn.innerHTML = originalHTML;
|
||||
btn.style.background = '';
|
||||
}, 2000);
|
||||
}).catch(function() {
|
||||
document.execCommand('copy');
|
||||
alert('已复制到剪贴板');
|
||||
});
|
||||
});
|
||||
|
||||
function renderVideoPreviewHtml(content) {
|
||||
var bv = parseBVNumber(content);
|
||||
if (bv) {
|
||||
return '<div class="video-embed-wrapper"><iframe src="https://player.bilibili.com/player.html?bvid=' + bv + '&autoplay=0&high_quality=1" allowfullscreen sandbox="allow-scripts allow-same-origin allow-popups" loading="lazy"></iframe></div>';
|
||||
}
|
||||
return '<p class="text-secondary">请输入有效的 BV 号或 bilibili 视频地址</p>';
|
||||
}
|
||||
|
||||
// --- Utility ---
|
||||
function escapeHtml(text) {
|
||||
if (!text) return '';
|
||||
var div = document.createElement('div');
|
||||
div.appendChild(document.createTextNode(text));
|
||||
return div.innerHTML;
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user