576 lines
21 KiB
JavaScript
576 lines
21 KiB
JavaScript
console.log('👗 Avatar Outfit Property Inspector 로드됨');
|
||
|
||
// 화면에 로그를 표시하는 함수
|
||
function logToScreen(msg, color = "#00ff00") {
|
||
let logDiv = document.getElementById('logArea');
|
||
if (!logDiv) {
|
||
return; // 로그 영역이 아직 없으면 무시
|
||
}
|
||
const line = document.createElement('div');
|
||
line.style.color = color;
|
||
line.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
|
||
logDiv.appendChild(line);
|
||
logDiv.scrollTop = logDiv.scrollHeight;
|
||
|
||
// 로그가 너무 많아지면 오래된 것 제거 (최대 100줄)
|
||
if (logDiv.children.length > 100) {
|
||
logDiv.removeChild(logDiv.firstChild);
|
||
}
|
||
}
|
||
|
||
// 기존 console.log/console.error를 화면에도 출력
|
||
const origLog = console.log;
|
||
console.log = function(...args) {
|
||
origLog.apply(console, args);
|
||
const msg = args.map(a => (typeof a === 'object' ? JSON.stringify(a, null, 2) : a)).join(' ');
|
||
logToScreen(msg, '#00ff00');
|
||
};
|
||
|
||
const origError = console.error;
|
||
console.error = function(...args) {
|
||
origError.apply(console, args);
|
||
const msg = args.map(a => (typeof a === 'object' ? JSON.stringify(a, null, 2) : a)).join(' ');
|
||
logToScreen(msg, '#ff5555');
|
||
};
|
||
|
||
const origWarn = console.warn;
|
||
console.warn = function(...args) {
|
||
origWarn.apply(console, args);
|
||
const msg = args.map(a => (typeof a === 'object' ? JSON.stringify(a, null, 2) : a)).join(' ');
|
||
logToScreen(msg, '#ffaa00');
|
||
};
|
||
|
||
// 전역 변수
|
||
let websocket = null;
|
||
let uuid = null; // Property Inspector UUID
|
||
let actionContext = null; // 버튼별 고유 컨텍스트
|
||
let actionInfo = null;
|
||
let avatarList = [];
|
||
let isUnityConnected = false;
|
||
let settings = {};
|
||
|
||
// Stream Deck 연결
|
||
function connectElgatoStreamDeckSocket(inPort, inPropertyInspectorUUID, inRegisterEvent, inInfo, inActionInfo) {
|
||
console.log('🔌 Avatar Outfit Property Inspector 연결 중...');
|
||
console.log('📡 포트:', inPort, 'UUID:', inPropertyInspectorUUID);
|
||
|
||
uuid = inPropertyInspectorUUID;
|
||
|
||
// Parse action info - 버튼별 고유 컨텍스트와 설정 추출
|
||
try {
|
||
if (inActionInfo) {
|
||
console.log('🔍 Raw actionInfo:', inActionInfo);
|
||
actionInfo = JSON.parse(inActionInfo);
|
||
actionContext = actionInfo.context; // 버튼별 고유 컨텍스트
|
||
settings = actionInfo.payload?.settings || {};
|
||
|
||
// actionType이 없으면 강제로 설정
|
||
if (!settings.actionType) {
|
||
settings.actionType = 'avatar_outfit';
|
||
console.log('🔧 actionType이 없어서 강제로 설정:', settings.actionType);
|
||
}
|
||
|
||
console.log('⚙️ Property Inspector UUID:', uuid);
|
||
console.log('⚙️ 버튼 컨텍스트:', actionContext);
|
||
console.log('⚙️ 초기 설정:', settings);
|
||
console.log('⚙️ actionInfo 전체:', actionInfo);
|
||
} else {
|
||
console.error('❌ actionInfo가 없습니다!');
|
||
}
|
||
} catch (error) {
|
||
console.error('❌ ActionInfo 파싱 오류:', error);
|
||
console.log('🔍 파싱 시도한 문자열:', inActionInfo);
|
||
}
|
||
|
||
websocket = new WebSocket('ws://localhost:' + inPort);
|
||
|
||
websocket.onopen = function() {
|
||
console.log('✅ Property Inspector 연결됨');
|
||
|
||
// StreamDeck에 등록 (카메라와 동일한 패턴)
|
||
websocket.send(JSON.stringify({
|
||
event: inRegisterEvent,
|
||
uuid: inPropertyInspectorUUID
|
||
}));
|
||
|
||
// Unity 상태 요청 (카메라와 동일한 패턴)
|
||
setTimeout(() => {
|
||
console.log('🔍 Plugin에 디버그 메시지 전송 시작');
|
||
|
||
// actionType이 설정되었으면 즉시 Plugin에 저장
|
||
if (settings.actionType === 'avatar_outfit') {
|
||
const actionTypeMessage = {
|
||
action: 'com.mirabox.streamingle.avatar_outfit',
|
||
event: 'setSettings',
|
||
context: uuid,
|
||
payload: settings
|
||
};
|
||
websocket.send(JSON.stringify(actionTypeMessage));
|
||
console.log('🔧 초기 actionType 설정을 Plugin에 저장:', settings);
|
||
}
|
||
|
||
// 먼저 Plugin이 이 버튼을 인식하는지 확인
|
||
sendToPlugin('debug_test', {
|
||
message: 'Avatar outfit controller test',
|
||
context: actionContext,
|
||
action: 'com.mirabox.streamingle.avatar_outfit'
|
||
});
|
||
|
||
// Unity 상태 요청
|
||
sendToPlugin('get_unity_status');
|
||
}, 500);
|
||
|
||
// 초기 설정 로드
|
||
loadInitialSettings();
|
||
};
|
||
|
||
websocket.onmessage = function(evt) {
|
||
try {
|
||
const jsonObj = JSON.parse(evt.data);
|
||
handleMessage(jsonObj);
|
||
} catch (error) {
|
||
console.error('❌ 메시지 파싱 오류:', error);
|
||
}
|
||
};
|
||
|
||
websocket.onclose = function() {
|
||
console.log('❌ Property Inspector 연결 끊어짐');
|
||
websocket = null;
|
||
// 연결 상태를 비연결로 표시
|
||
handleUnityConnected(false);
|
||
};
|
||
|
||
websocket.onerror = function(error) {
|
||
console.error('❌ Property Inspector 연결 오류:', error);
|
||
websocket = null;
|
||
// 연결 상태를 비연결로 표시
|
||
handleUnityConnected(false);
|
||
};
|
||
}
|
||
|
||
// 메시지 처리
|
||
function handleMessage(jsonObj) {
|
||
console.log('📨 메시지 수신:', jsonObj.event);
|
||
console.log('📨 전체 메시지:', JSON.stringify(jsonObj, null, 2));
|
||
|
||
// sendToPropertyInspector 이벤트 처리 (카메라 방식과 동일)
|
||
if (jsonObj.event === 'sendToPropertyInspector' && jsonObj.payload && jsonObj.payload.event) {
|
||
const innerEvent = jsonObj.payload.event;
|
||
console.log('📨 내부 이벤트:', innerEvent, 'payload:', jsonObj.payload);
|
||
|
||
switch (innerEvent) {
|
||
case 'unity_connected':
|
||
console.log('✅ Unity 연결 상태 업데이트');
|
||
handleUnityConnected(jsonObj.payload.connected);
|
||
break;
|
||
case 'avatar_outfit_list':
|
||
console.log('👗 아바타 의상 목록 수신');
|
||
handleAvatarOutfitList(jsonObj.payload);
|
||
break;
|
||
case 'avatar_outfit_changed':
|
||
console.log('🎭 아바타 의상 변경 알림');
|
||
handleAvatarOutfitChanged(jsonObj.payload);
|
||
break;
|
||
case 'camera_list':
|
||
console.log('⚠️ 카메라 데이터를 받았지만 아바타 컨트롤러에서는 무시함');
|
||
break;
|
||
case 'item_list':
|
||
console.log('⚠️ 아이템 데이터를 받았지만 아바타 컨트롤러에서는 무시함');
|
||
break;
|
||
case 'event_list':
|
||
console.log('⚠️ 이벤트 데이터를 받았지만 아바타 컨트롤러에서는 무시함');
|
||
break;
|
||
case 'debug_response':
|
||
console.log('✅ Plugin으로부터 디버그 응답 받음!');
|
||
console.log('📨 응답 데이터:', jsonObj.payload);
|
||
break;
|
||
default:
|
||
console.log('❓ 알 수 없는 내부 이벤트:', innerEvent);
|
||
break;
|
||
}
|
||
return;
|
||
}
|
||
|
||
switch(jsonObj.event) {
|
||
case 'sendToPropertyInspector':
|
||
if (jsonObj.payload) {
|
||
handlePluginMessage(jsonObj.payload);
|
||
}
|
||
break;
|
||
|
||
case 'didReceiveSettings':
|
||
if (jsonObj.payload && jsonObj.payload.settings) {
|
||
updateUIFromSettings(jsonObj.payload.settings);
|
||
}
|
||
break;
|
||
|
||
// 기존 방식도 유지 (호환성)
|
||
case 'unity_connected':
|
||
console.log('✅ Unity 연결 상태 업데이트 (기존 방식)');
|
||
handleUnityConnected(jsonObj.payload?.connected);
|
||
break;
|
||
case 'avatar_outfit_list':
|
||
console.log('👗 아바타 의상 목록 수신 (기존 방식)');
|
||
handleAvatarOutfitList(jsonObj.payload);
|
||
break;
|
||
case 'avatar_outfit_changed':
|
||
console.log('🎭 아바타 의상 변경 알림 (기존 방식)');
|
||
handleAvatarOutfitChanged(jsonObj.payload);
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 플러그인 메시지 처리
|
||
function handlePluginMessage(payload) {
|
||
console.log('📨 플러그인 메시지:', payload.event, payload);
|
||
|
||
switch(payload.event) {
|
||
case 'unity_connected':
|
||
console.log('🔗 Unity 연결 이벤트 수신:', payload);
|
||
handleUnityConnected(payload.connected);
|
||
break;
|
||
|
||
case 'avatar_outfit_list':
|
||
console.log('👗 아바타 의상 목록 이벤트 수신:', payload);
|
||
handleAvatarOutfitList(payload);
|
||
break;
|
||
|
||
case 'avatar_outfit_changed':
|
||
console.log('🎭 아바타 의상 변경 이벤트 수신:', payload);
|
||
handleAvatarOutfitChanged(payload);
|
||
break;
|
||
|
||
default:
|
||
console.log('❓ 알 수 없는 이벤트:', payload.event);
|
||
break;
|
||
}
|
||
}
|
||
|
||
// Unity 연결 상태 처리
|
||
function handleUnityConnected(connected) {
|
||
console.log('🔗 Unity 연결 상태:', connected);
|
||
isUnityConnected = connected;
|
||
|
||
const statusIndicator = document.getElementById('connection-status');
|
||
const statusDot = document.getElementById('status-dot');
|
||
const statusText = document.getElementById('status-text');
|
||
const connectionDetail = document.getElementById('connection-detail');
|
||
|
||
const avatarSelect = document.getElementById('avatar-select');
|
||
const refreshButton = document.getElementById('refresh-button');
|
||
|
||
if (connected) {
|
||
statusIndicator.classList.add('connected');
|
||
statusDot.classList.add('connected');
|
||
statusText.textContent = 'Unity 서버 연결됨';
|
||
connectionDetail.textContent = '아바타 데이터를 불러오는 중...';
|
||
|
||
avatarSelect.disabled = false;
|
||
refreshButton.disabled = false;
|
||
|
||
avatarSelect.innerHTML = '<option value="">아바타 목록을 불러오는 중...</option>';
|
||
|
||
// 연결 즉시 아바타 목록 요청
|
||
console.log('🔄 Unity 연결됨 - 아바타 목록 요청');
|
||
setTimeout(() => {
|
||
refreshAvatarList();
|
||
}, 500);
|
||
|
||
} else {
|
||
statusIndicator.classList.remove('connected');
|
||
statusDot.classList.remove('connected');
|
||
statusText.textContent = 'Unity 서버 연결 안됨';
|
||
connectionDetail.textContent = 'Unity를 실행하고 AvatarOutfitController가 있는지 확인하세요';
|
||
|
||
avatarSelect.disabled = true;
|
||
refreshButton.disabled = true;
|
||
|
||
avatarSelect.innerHTML = '<option value="">Unity가 연결되지 않음</option>';
|
||
updateOutfitSelect(-1);
|
||
}
|
||
}
|
||
|
||
// 아바타 의상 목록 처리
|
||
function handleAvatarOutfitList(payload) {
|
||
console.log('👗 아바타 의상 목록 수신:', payload);
|
||
console.log('👗 payload.avatars:', payload.avatars);
|
||
console.log('👗 Array.isArray(payload.avatars):', Array.isArray(payload.avatars));
|
||
|
||
if (payload.avatars && Array.isArray(payload.avatars)) {
|
||
avatarList = payload.avatars;
|
||
console.log('👗 아바타 목록 저장됨:', avatarList.length, '개');
|
||
console.log('👗 아바타 목록 상세:', avatarList);
|
||
updateAvatarSelect();
|
||
|
||
// 현재 설정된 아바타 확인
|
||
const avatarSelect = document.getElementById('avatar-select');
|
||
if (avatarSelect.value !== '') {
|
||
const selectedIndex = parseInt(avatarSelect.value);
|
||
if (!isNaN(selectedIndex)) {
|
||
updateOutfitSelect(selectedIndex);
|
||
}
|
||
}
|
||
} else {
|
||
console.log('❌ 아바타 데이터가 올바르지 않음:', payload.avatars);
|
||
avatarList = [];
|
||
updateAvatarSelect();
|
||
}
|
||
|
||
updateCurrentStatus(payload.currentIndex);
|
||
}
|
||
|
||
// 아바타 의상 변경 처리
|
||
function handleAvatarOutfitChanged(payload) {
|
||
console.log('🎭 아바타 의상 변경:', payload);
|
||
handleAvatarOutfitList(payload); // 같은 방식으로 처리
|
||
}
|
||
|
||
// 아바타 선택 업데이트
|
||
function updateAvatarSelect() {
|
||
const avatarSelect = document.getElementById('avatar-select');
|
||
const connectionDetail = document.getElementById('connection-detail');
|
||
|
||
avatarSelect.innerHTML = '';
|
||
|
||
if (avatarList.length === 0) {
|
||
avatarSelect.innerHTML = '<option value="">등록된 아바타가 없음</option>';
|
||
connectionDetail.textContent = 'Unity에서 AvatarOutfitController에 아바타를 추가하세요';
|
||
return;
|
||
}
|
||
|
||
avatarSelect.innerHTML = '<option value="">아바타를 선택하세요...</option>';
|
||
|
||
avatarList.forEach((avatar, index) => {
|
||
const option = document.createElement('option');
|
||
option.value = index;
|
||
option.textContent = `${avatar.name} (${avatar.outfits ? avatar.outfits.length : 0}개 의상)`;
|
||
avatarSelect.appendChild(option);
|
||
});
|
||
|
||
connectionDetail.textContent = `${avatarList.length}개의 아바타를 발견했습니다`;
|
||
}
|
||
|
||
// 의상 선택 업데이트
|
||
function updateOutfitSelect(avatarIndex) {
|
||
const outfitSelect = document.getElementById('outfit-select');
|
||
|
||
outfitSelect.innerHTML = '';
|
||
|
||
if (avatarIndex < 0 || avatarIndex >= avatarList.length) {
|
||
outfitSelect.innerHTML = '<option value="">먼저 아바타를 선택하세요</option>';
|
||
outfitSelect.disabled = true;
|
||
return;
|
||
}
|
||
|
||
const avatar = avatarList[avatarIndex];
|
||
if (!avatar.outfits || avatar.outfits.length === 0) {
|
||
outfitSelect.innerHTML = '<option value="">등록된 의상이 없음</option>';
|
||
outfitSelect.disabled = true;
|
||
return;
|
||
}
|
||
|
||
// 기본 선택 옵션 추가
|
||
outfitSelect.innerHTML = '<option value="">의상을 선택하세요...</option>';
|
||
|
||
// 의상 목록 추가
|
||
avatar.outfits.forEach((outfit, index) => {
|
||
const option = document.createElement('option');
|
||
option.value = index;
|
||
option.textContent = outfit.name;
|
||
outfitSelect.appendChild(option);
|
||
});
|
||
|
||
outfitSelect.disabled = false;
|
||
|
||
// 기본값 설정 (첫 번째 의상)
|
||
if (avatar.outfits.length > 0) {
|
||
outfitSelect.value = 0;
|
||
}
|
||
}
|
||
|
||
// 현재 상태 업데이트
|
||
function updateCurrentStatus(currentAvatarIndex) {
|
||
const currentAvatar = document.getElementById('current-avatar');
|
||
const currentOutfit = document.getElementById('current-outfit');
|
||
|
||
if (currentAvatarIndex >= 0 && currentAvatarIndex < avatarList.length) {
|
||
const avatar = avatarList[currentAvatarIndex];
|
||
currentAvatar.textContent = `현재: ${avatar.name}`;
|
||
currentOutfit.textContent = `현재 의상: ${avatar.current_outfit_name || '정보 없음'}`;
|
||
} else {
|
||
currentAvatar.textContent = '현재: 선택되지 않음';
|
||
currentOutfit.textContent = '현재 의상: 정보 없음';
|
||
}
|
||
}
|
||
|
||
// Send message to plugin
|
||
function sendToPlugin(command, data = {}) {
|
||
console.log('🚀 sendToPlugin 호출:', command, data);
|
||
console.log('🔍 WebSocket 상태:', websocket ? 'available' : 'null');
|
||
console.log('🔍 actionContext 상태:', actionContext);
|
||
|
||
if (!websocket) {
|
||
console.error('❌ WebSocket not available');
|
||
return;
|
||
}
|
||
if (!uuid) {
|
||
console.error('❌ UUID not available');
|
||
return;
|
||
}
|
||
try {
|
||
const message = {
|
||
action: 'com.mirabox.streamingle.avatar_outfit', // manifest.json의 Action UUID
|
||
event: 'sendToPlugin',
|
||
context: uuid, // Property Inspector UUID (Stream Deck 표준)
|
||
payload: {
|
||
command,
|
||
buttonContext: actionContext, // 버튼의 실제 context 정보도 함께 전송
|
||
...data
|
||
}
|
||
};
|
||
websocket.send(JSON.stringify(message));
|
||
console.log('📤 Message sent to plugin:', command, data, 'context:', uuid);
|
||
} catch (error) {
|
||
console.error('❌ Failed to send message to plugin:', error);
|
||
}
|
||
}
|
||
|
||
// Unity 상태 요청
|
||
function requestUnityStatus() {
|
||
sendToPlugin('get_unity_status');
|
||
}
|
||
|
||
// 아바타 목록 새로고침
|
||
function refreshAvatarList() {
|
||
sendToPlugin('refresh_avatar_outfit_list');
|
||
}
|
||
|
||
// 설정 저장
|
||
function saveSettings() {
|
||
if (!uuid) {
|
||
console.error('❌ No uuid available for saving settings');
|
||
return;
|
||
}
|
||
|
||
if (!websocket) {
|
||
console.log('⚠️ WebSocket이 연결되지 않음, 설정 저장 건너뜀');
|
||
return;
|
||
}
|
||
|
||
const avatarSelect = document.getElementById('avatar-select');
|
||
const outfitSelect = document.getElementById('outfit-select');
|
||
|
||
const newSettings = {
|
||
avatarIndex: parseInt(avatarSelect.value || '0'),
|
||
outfitIndex: parseInt(outfitSelect.value || '0'),
|
||
actionType: 'avatar_outfit' // 🔥 중요: actionType 추가!
|
||
};
|
||
|
||
// 전역 설정도 업데이트
|
||
settings = { ...settings, ...newSettings };
|
||
|
||
const message = {
|
||
action: 'com.mirabox.streamingle.avatar_outfit',
|
||
event: 'setSettings',
|
||
context: uuid, // Property Inspector UUID 사용 (Stream Deck 표준)
|
||
payload: newSettings
|
||
};
|
||
|
||
try {
|
||
websocket.send(JSON.stringify(message));
|
||
console.log('📤 설정 저장됨 - Context:', uuid, 'Settings:', newSettings);
|
||
|
||
// 설정이 저장되면 Plugin에게 아바타 의상 변경 요청도 보냄
|
||
sendToPlugin('set_avatar_outfit', {
|
||
avatarIndex: newSettings.avatarIndex,
|
||
outfitIndex: newSettings.outfitIndex
|
||
});
|
||
|
||
// 버튼 제목 업데이트 요청
|
||
sendToPlugin('update_title', {
|
||
avatarIndex: newSettings.avatarIndex,
|
||
outfitIndex: newSettings.outfitIndex
|
||
});
|
||
} catch (error) {
|
||
console.error('❌ 설정 저장 실패:', error);
|
||
websocket = null;
|
||
handleUnityConnected(false);
|
||
}
|
||
}
|
||
|
||
// 초기 설정 로드
|
||
function loadInitialSettings() {
|
||
console.log('🔧 초기 설정 로드 시작');
|
||
console.log('🔧 현재 settings:', settings);
|
||
|
||
// 초기화가 완료된 후 UI 업데이트
|
||
setTimeout(() => {
|
||
updateUIFromSettings(settings);
|
||
}, 100);
|
||
}
|
||
|
||
// 설정에서 UI 업데이트
|
||
function updateUIFromSettings(settingsToApply) {
|
||
console.log('🎨 UI 업데이트 시작:', settingsToApply);
|
||
|
||
const avatarSelect = document.getElementById('avatar-select');
|
||
const outfitSelect = document.getElementById('outfit-select');
|
||
|
||
if (settingsToApply.avatarIndex !== undefined && avatarSelect) {
|
||
console.log('👤 아바타 인덱스 적용:', settingsToApply.avatarIndex);
|
||
avatarSelect.value = settingsToApply.avatarIndex;
|
||
updateOutfitSelect(settingsToApply.avatarIndex);
|
||
}
|
||
|
||
if (settingsToApply.outfitIndex !== undefined && outfitSelect) {
|
||
console.log('👗 의상 인덱스 적용:', settingsToApply.outfitIndex);
|
||
outfitSelect.value = settingsToApply.outfitIndex;
|
||
}
|
||
|
||
console.log('✅ UI 업데이트 완료');
|
||
}
|
||
|
||
|
||
// 이벤트 리스너
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
console.log('👗 Avatar Outfit Property Inspector DOM 준비됨');
|
||
|
||
// 아바타 선택 변경
|
||
const avatarSelect = document.getElementById('avatar-select');
|
||
if (avatarSelect) {
|
||
avatarSelect.addEventListener('change', function() {
|
||
const selectedIndex = parseInt(this.value);
|
||
if (!isNaN(selectedIndex)) {
|
||
updateOutfitSelect(selectedIndex);
|
||
} else {
|
||
updateOutfitSelect(-1);
|
||
}
|
||
saveSettings();
|
||
});
|
||
}
|
||
|
||
// 의상 선택 변경
|
||
const outfitSelect = document.getElementById('outfit-select');
|
||
if (outfitSelect) {
|
||
outfitSelect.addEventListener('change', saveSettings);
|
||
}
|
||
|
||
// 새로고침 버튼
|
||
const refreshButton = document.getElementById('refresh-button');
|
||
if (refreshButton) {
|
||
refreshButton.addEventListener('click', function() {
|
||
console.log('🔄 새로고침 버튼 클릭됨');
|
||
// Unity 상태를 다시 확인하고 아바타 목록도 새로고침
|
||
requestUnityStatus();
|
||
refreshAvatarList();
|
||
|
||
// 강제로 연결 상태를 true로 설정 (다른 컨트롤러가 연결되어 있다면 Unity는 작동 중)
|
||
setTimeout(() => {
|
||
console.log('🔧 새로고침 후 강제로 Unity 연결 상태를 true로 설정');
|
||
handleUnityConnected(true);
|
||
}, 1000);
|
||
});
|
||
}
|
||
});
|
||
|
||
console.log('✅ Avatar Outfit Property Inspector 스크립트 로드 완료'); |