File size: 4,373 Bytes
e636070 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
class ScenesPanel {
constructor() {
this.scenes = new Set();
this.currentScene = null;
this.container = document.querySelector('.scene-buttons');
this.clearBtn = document.querySelector('.clear-selection-btn');
this.init();
}
init() {
// this.initEventListeners();
// 监听消息中的场景更新
window.addEventListener('scene-update', (event) => {
const sceneNumber = event.detail.scene;
if (sceneNumber !== undefined) {
this.addScene(sceneNumber);
}
});
// 监听WebSocket消息
window.addEventListener('websocket-message', (event) => {
const message = event.detail;
// 如果是初始数据，获取已有场景
if (message.type === 'initial_data' && message.data.history_messages) {
message.data.history_messages.forEach(message => this.addScene(message.scene));
}
// 从状态更新中获取场景信息
if (message.type === 'message' && message.data.scene !== undefined) {
this.addScene(message.data.scene);
}
});
}
addScene(sceneNumber) {
// 只添加已经结束的场景
if (!this.scenes.has(sceneNumber) && sceneNumber !== undefined) {
console.log(`Adding scene ${sceneNumber}`);
this.scenes.add(sceneNumber);
this.renderSceneButtons();
console.log('Current scenes:', Array.from(this.scenes));
}
}
initEventListeners() {
// 清除选择按钮事件
this.clearBtn.addEventListener('click', () => {
this.clearSelection();
});
}
renderSceneButtons() {
this.container.innerHTML = '';
// 将场景号排序
const sortedScenes = Array.from(this.scenes).sort((a, b) => a - b);
sortedScenes.forEach(scene => {
const button = document.createElement('button');
button.className = 'scene-btn';
if (this.currentScene === scene) {
button.classList.add('active');
}
button.textContent = `场景 ${scene}`;
button.addEventListener('click', () => {
this.selectScene(scene);
});
this.container.appendChild(button);
});
}
selectScene(sceneNumber) {
const buttons = this.container.querySelectorAll('.scene-btn');
buttons.forEach(btn => btn.classList.remove('active'));
if (this.currentScene === sceneNumber) {
// 如果点击当前选中的场景，取消选择
this.currentScene = null;
console.log('Scene selection cleared');
} else {
// 选中新场景
this.currentScene = sceneNumber;
buttons.forEach(btn => {
if (btn.textContent === `场景 ${sceneNumber}`) {
btn.classList.add('active');
}
});
console.log('Scene selected:', sceneNumber);
}
// 触发场景选择事件
window.dispatchEvent(new CustomEvent('scene-selected', {
detail: { scene: this.currentScene }
}));
if (window.ws && window.ws.readyState === WebSocket.OPEN) {
// 添加发送 WebSocket 消息
window.ws.send(JSON.stringify({
type: 'request_scene_characters',
scene: this.currentScene
}));
}
}
clearSelection() {
this.currentScene = null;
const buttons = this.container.querySelectorAll('.scene-btn');
buttons.forEach(btn => btn.classList.remove('active'));
// 确保清除选择时也触发事件
const sceneEvent = new CustomEvent('scene-selected', {
detail: { scene: null }
});
window.dispatchEvent(sceneEvent);
if (window.ws && window.ws.readyState === WebSocket.OPEN) {
// 添加发送 WebSocket 消息
window.ws.send(JSON.stringify({
type: 'request_scene_characters',
scene: null
}));
}
}
}
const scenesPanel = new ScenesPanel(); |