SawatoMosswartsEnjoyersClub/MosswartOverlord
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract createWindow helper to deduplicate window setup code

Browse source 
Refactor showStatsWindow, showInventoryWindow, and showChatWindow to use
a shared createWindow() helper that handles existence checks, z-index
management, header/close button creation, and makeDraggable setup. Each
function now only contains its unique content creation logic.

Added .window-content CSS class to style.css, style-ac.css, and the
christmas theme to maintain flex layout through the new wrapper div.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
erik 2026-02-26 09:26:06 +00:00
parent a0698753c5
commit a82e6f4856
3 changed files with 164 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

232
static/script.js
View file

@ -735,37 +735,77 @@ function debounce(fn, ms) {
};
}
// Show or create a stats window for a character
function showStatsWindow(name) {
debugLog('📊 showStatsWindow called for:', name);
if (statsWindows[name]) {
const existing = statsWindows[name];
debugLog('📊 Existing stats window found, showing it:', existing);
// Always show the window (no toggle)
existing.style.display = 'flex';
// Bring to front when opening
/**
* Create or show a draggable window. Returns { win, content, isNew }.
* If window already exists, brings it to front and returns isNew: false.
*/
function createWindow(id, title, className, options = {}) {
const { onClose } = options;
// Check if window already exists - bring to front
const existing = document.getElementById(id);
if (existing) {
existing.style.display = 'flex';
if (!window.__chatZ) window.__chatZ = 10000;
window.__chatZ += 1;
existing.style.zIndex = window.__chatZ;
return { win: existing, content: existing.querySelector('.window-content'), isNew: false };
}
// Create new window
if (!window.__chatZ) window.__chatZ = 10000;
window.__chatZ += 1;
existing.style.zIndex = window.__chatZ;
debugLog('📊 Stats window shown with zIndex:', window.__chatZ);
const win = document.createElement('div');
win.id = id;
win.className = className;
win.style.display = 'flex';
win.style.zIndex = window.__chatZ;
const header = document.createElement('div');
header.className = 'chat-header';
const titleSpan = document.createElement('span');
titleSpan.textContent = title;
header.appendChild(titleSpan);
const closeBtn = document.createElement('button');
closeBtn.className = 'chat-close-btn';
closeBtn.textContent = '\u00D7';
closeBtn.addEventListener('click', () => {
win.style.display = 'none';
if (onClose) onClose();
});
header.appendChild(closeBtn);
const content = document.createElement('div');
content.className = 'window-content';
win.appendChild(header);
win.appendChild(content);
document.body.appendChild(win);
makeDraggable(win, header);
return { win, content, isNew: true };
}
// Show or create a stats window for a character
function showStatsWindow(name) {
debugLog('showStatsWindow called for:', name);
const windowId = `statsWindow-${name}`;
const { win, content, isNew } = createWindow(
windowId, `Stats: ${name}`, 'stats-window'
);
if (!isNew) {
debugLog('Existing stats window found, showing it');
return;
}
debugLog('📊 Creating new stats window for:', name);
const win = document.createElement('div');
win.className = 'stats-window';
win.dataset.character = name;
// Header (reuses chat-header styling)
const header = document.createElement('div');
header.className = 'chat-header';
const title = document.createElement('span');
title.textContent = `Stats: ${name}`;
const closeBtn = document.createElement('button');
closeBtn.className = 'chat-close-btn';
closeBtn.textContent = '×';
closeBtn.addEventListener('click', () => { win.style.display = 'none'; });
header.appendChild(title);
header.appendChild(closeBtn);
win.appendChild(header);
statsWindows[name] = win;
// Time period controls
const controls = document.createElement('div');
controls.className = 'stats-controls';
@ -775,6 +815,12 @@ function showStatsWindow(name) {
{ label: '24H', value: 'now-24h' },
{ label: '7D', value: 'now-7d' }
];
// Stats content container (iframes grid)
const statsContent = document.createElement('div');
statsContent.className = 'chat-messages';
statsContent.textContent = 'Loading stats...';
timeRanges.forEach(range => {
const btn = document.createElement('button');
btn.className = 'time-range-btn';
@ -783,25 +829,17 @@ function showStatsWindow(name) {
btn.addEventListener('click', () => {
controls.querySelectorAll('.time-range-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
updateStatsTimeRange(content, name, range.value);
updateStatsTimeRange(statsContent, name, range.value);
});
controls.appendChild(btn);
});
win.appendChild(controls);
// Content container
const content = document.createElement('div');
content.className = 'chat-messages';
content.textContent = 'Loading stats...';
win.appendChild(content);
debugLog('📊 Appending stats window to DOM:', win);
document.body.appendChild(win);
statsWindows[name] = win;
debugLog('📊 Stats window added to DOM, total children:', document.body.children.length);
content.appendChild(controls);
content.appendChild(statsContent);
debugLog('Stats window created for:', name);
// Load initial stats with default 24h range
updateStatsTimeRange(content, name, 'now-24h');
// Enable dragging using the global drag system
makeDraggable(win, header);
updateStatsTimeRange(statsContent, name, 'now-24h');
}
function updateStatsTimeRange(content, name, timeRange) {
@ -832,46 +870,32 @@ function updateStatsTimeRange(content, name, timeRange) {
// Show or create an inventory window for a character
function showInventoryWindow(name) {
debugLog('🎒 showInventoryWindow called for:', name);
if (inventoryWindows[name]) {
const existing = inventoryWindows[name];
debugLog('🎒 Existing inventory window found, showing it:', existing);
// Always show the window (no toggle)
existing.style.display = 'flex';
// Bring to front when opening
if (!window.__chatZ) window.__chatZ = 10000;
window.__chatZ += 1;
existing.style.zIndex = window.__chatZ;
debugLog('🎒 Inventory window shown with zIndex:', window.__chatZ);
debugLog('showInventoryWindow called for:', name);
const windowId = `inventoryWindow-${name}`;
const { win, content, isNew } = createWindow(
windowId, `Inventory: ${name}`, 'inventory-window'
);
if (!isNew) {
debugLog('Existing inventory window found, showing it');
return;
}
debugLog('🎒 Creating new inventory window for:', name);
const win = document.createElement('div');
win.className = 'inventory-window';
win.dataset.character = name;
// Header (reuses chat-header styling)
const header = document.createElement('div');
header.className = 'chat-header';
const title = document.createElement('span');
title.textContent = `Inventory: ${name}`;
const closeBtn = document.createElement('button');
closeBtn.className = 'chat-close-btn';
closeBtn.textContent = '×';
closeBtn.addEventListener('click', () => { win.style.display = 'none'; });
header.appendChild(title);
header.appendChild(closeBtn);
win.appendChild(header);
inventoryWindows[name] = win;
// Loading message
const loading = document.createElement('div');
loading.className = 'inventory-loading';
loading.textContent = 'Loading inventory...';
win.appendChild(loading);
content.appendChild(loading);
// Content container
const content = document.createElement('div');
content.className = 'inventory-content';
content.style.display = 'none';
win.appendChild(content);
// Inventory content container
const invContent = document.createElement('div');
invContent.className = 'inventory-content';
invContent.style.display = 'none';
content.appendChild(invContent);
// Fetch inventory data from main app (which will proxy to inventory service)
fetch(`${API_BASE}/inventory/${encodeURIComponent(name)}?limit=1000`)
@ -881,7 +905,7 @@ function showInventoryWindow(name) {
})
.then(data => {
loading.style.display = 'none';
content.style.display = 'block';
invContent.style.display = 'block';
// Create inventory grid
const grid = document.createElement('div');
@ -1024,26 +1048,20 @@ function showInventoryWindow(name) {
grid.appendChild(slot);
});
content.appendChild(grid);
invContent.appendChild(grid);
// Add item count
const count = document.createElement('div');
count.className = 'inventory-count';
count.textContent = `${data.item_count} items`;
content.appendChild(count);
invContent.appendChild(count);
})
.catch(err => {
loading.textContent = `Failed to load inventory: ${err.message}`;
console.error('Inventory fetch failed:', err);
});
debugLog('🎒 Appending inventory window to DOM:', win);
document.body.appendChild(win);
inventoryWindows[name] = win;
debugLog('🎒 Inventory window added to DOM, total children:', document.body.children.length);
// Enable dragging using the global drag system
makeDraggable(win, header);
debugLog('Inventory window created for:', name);
}
// Inventory tooltip functions
@ -1812,39 +1830,26 @@ function initWebSocket() {
// Display or create a chat window for a character
function showChatWindow(name) {
debugLog('💬 showChatWindow called for:', name);
if (chatWindows[name]) {
const existing = chatWindows[name];
debugLog('💬 Existing chat window found, showing it:', existing);
// Always show the window (no toggle)
existing.style.display = 'flex';
// Bring to front when opening
if (!window.__chatZ) window.__chatZ = 10000;
window.__chatZ += 1;
existing.style.zIndex = window.__chatZ;
debugLog('💬 Chat window shown with zIndex:', window.__chatZ);
debugLog('showChatWindow called for:', name);
const windowId = `chatWindow-${name}`;
const { win, content, isNew } = createWindow(
windowId, `Chat: ${name}`, 'chat-window'
);
if (!isNew) {
debugLog('Existing chat window found, showing it');
return;
}
debugLog('💬 Creating new chat window for:', name);
const win = document.createElement('div');
win.className = 'chat-window';
win.dataset.character = name;
// Header
const header = document.createElement('div');
header.className = 'chat-header';
const title = document.createElement('span');
title.textContent = `Chat: ${name}`;
const closeBtn = document.createElement('button');
closeBtn.className = 'chat-close-btn';
closeBtn.textContent = '×';
closeBtn.addEventListener('click', () => { win.style.display = 'none'; });
header.appendChild(title);
header.appendChild(closeBtn);
win.appendChild(header);
chatWindows[name] = win;
// Messages container
const msgs = document.createElement('div');
msgs.className = 'chat-messages';
win.appendChild(msgs);
content.appendChild(msgs);
// Input form
const form = document.createElement('form');
form.className = 'chat-form';
@ -1861,14 +1866,9 @@ function showChatWindow(name) {
socket.send(JSON.stringify({ player_name: name, command: text }));
input.value = '';
});
win.appendChild(form);
debugLog('💬 Appending chat window to DOM:', win);
document.body.appendChild(win);
chatWindows[name] = win;
debugLog('💬 Chat window added to DOM, total children:', document.body.children.length);
content.appendChild(form);
// Enable dragging using the global drag system
makeDraggable(win, header);
debugLog('Chat window created for:', name);
}
// Append a chat message to the correct window

8
static/style-ac.css
View file

@ -363,6 +363,14 @@ body {
border-radius: 2px;
}
.window-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.chat-header {
display: flex;
justify-content: space-between;

8
static/style.css
View file

@ -540,6 +540,14 @@ body {
z-index: 10000;
}
.window-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.chat-header {
display: flex;
justify-content: space-between;