diff --git a/iidxwidget-app/main.js b/iidxwidget-app/main.js index 6422924..3cd4180 100644 --- a/iidxwidget-app/main.js +++ b/iidxwidget-app/main.js @@ -42,7 +42,8 @@ const defaultSettings = { widget: { infoPosition: "bottom", buttonLayout: "1P", - discImagePath: null, + upDiscImagePath: null, + downDiscImagePath: null, showPromoBox: false, GlobalReleaseMALength: 200, PerButtonMALength: 200, @@ -364,7 +365,6 @@ ipcMain.handle('save-user-image', async (event, sourcePath) => { const ip = require('ip'); const hostAddress = ip.address(); // 예: 192.168.0.13 const publicUrl = `http://${hostAddress}:${settings.serverPort}/userImages/${fileName}`; - settings.widget.discImagePath = publicUrl; fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2)); return publicUrl; // ✅ 여기 수정! diff --git a/iidxwidget-app/renderer/settings/settings.html b/iidxwidget-app/renderer/settings/settings.html index 6169b9b..e12cfca 100644 --- a/iidxwidget-app/renderer/settings/settings.html +++ b/iidxwidget-app/renderer/settings/settings.html @@ -86,12 +86,20 @@
- +
- - + +
- + +
+
+ +
+ + +
+
diff --git a/iidxwidget-app/renderer/settings/settings.js b/iidxwidget-app/renderer/settings/settings.js index 24cb4a9..1ade7a4 100644 --- a/iidxwidget-app/renderer/settings/settings.js +++ b/iidxwidget-app/renderer/settings/settings.js @@ -1,5 +1,5 @@ -let uploadedDiscImagePath = null; -let removeDiscImage = false; +let uploadedUpDiscImagePath = null; +let uploadedDownDiscImagePath = null; document.getElementById('cancel-button').addEventListener('click', () => { window.close(); @@ -58,7 +58,8 @@ document.getElementById('save-button').addEventListener('click', async () => { widget: { infoPosition, buttonLayout, - discImagePath: uploadedDiscImagePath, + upDiscImagePath: uploadedUpDiscImagePath, + downDiscImagePath: uploadedDownDiscImagePath, showPromoBox, globalMALength, perButtonMALength, @@ -128,13 +129,19 @@ function toggleKeyMappingUI(profile) { document.getElementById('color-fontColor').value = mergedColors.fontColor; document.getElementById('color-activeColor').value = mergedColors.activeColor; - uploadedDiscImagePath = settings.widget?.discImagePath || null; - removeDiscImage = false; + uploadedUpDiscImagePath = settings.widget?.upDiscImagePath || null; + uploadedDownDiscImagePath = settings.widget?.downDiscImagePath || null; - if (uploadedDiscImagePath) { - const previewImg = document.getElementById('disc-preview'); - previewImg.src = uploadedDiscImagePath; - previewImg.style.display = 'block'; + if (uploadedUpDiscImagePath) { + const upDiscPreviewImg = document.getElementById('up-disc-preview'); + upDiscPreviewImg.src = uploadedUpDiscImagePath; + upDiscPreviewImg.style.display = 'block'; + } + + if (uploadedDownDiscImagePath) { + const downDiscPreviewImg = document.getElementById('down-disc-preview'); + downDiscPreviewImg.src = uploadedDownDiscImagePath; + downDiscPreviewImg.style.display = 'block'; } bindColorPreview('color-background', 'preview-background'); @@ -170,7 +177,7 @@ document.querySelectorAll('#key-mapping-table input').forEach(input => { }); }); -document.getElementById('disc-image-upload').addEventListener('change', async (e) => { +document.getElementById('up-disc-image-upload').addEventListener('change', async (e) => { const file = e.target.files[0]; if (!file) return; @@ -178,27 +185,53 @@ document.getElementById('disc-image-upload').addEventListener('change', async (e const savedPath = await window.electronAPI.saveUserImage(filePath); if (savedPath) { - uploadedDiscImagePath = savedPath; - removeDiscImage = false; + uploadedUpDiscImagePath = savedPath; - const previewImg = document.getElementById('disc-preview'); + const previewImg = document.getElementById('up-disc-preview'); previewImg.src = savedPath; previewImg.style.display = 'block'; } }); -document.getElementById('delete-disc-button').addEventListener('click', () => { - uploadedDiscImagePath = null; - removeDiscImage = true; +document.getElementById('delete-up-disc-button').addEventListener('click', () => { + uploadedUpDiscImagePath = null; - const previewImg = document.getElementById('disc-preview'); + const previewImg = document.getElementById('up-disc-preview'); previewImg.src = ''; previewImg.style.display = 'none'; // 파일 선택 input 초기화 - document.getElementById('disc-image-upload').value = ''; + document.getElementById('up-disc-image-upload').value = ''; }); +document.getElementById('down-disc-image-upload').addEventListener('change', async (e) => { + const file = e.target.files[0]; + if (!file) return; + + const filePath = file.path; + const savedPath = await window.electronAPI.saveUserImage(filePath); + + if (savedPath) { + uploadedDownDiscImagePath = savedPath; + + const previewImg = document.getElementById('down-disc-preview'); + previewImg.src = savedPath; + previewImg.style.display = 'block'; + } +}); + +document.getElementById('delete-down-disc-button').addEventListener('click', () => { + uploadedDownDiscImagePath = null; + + const previewImg = document.getElementById('down-disc-preview'); + previewImg.src = ''; + previewImg.style.display = 'none'; + + // 파일 선택 input 초기화 + document.getElementById('down-disc-image-upload').value = ''; +}); + + function bindColorPreview(inputId, previewId) { const input = document.getElementById(inputId); const preview = document.getElementById(previewId); diff --git a/iidxwidget-app/renderer/widget/index.html b/iidxwidget-app/renderer/widget/index.html index 79c547c..2d04055 100644 --- a/iidxwidget-app/renderer/widget/index.html +++ b/iidxwidget-app/renderer/widget/index.html @@ -18,7 +18,8 @@
-  +  +
diff --git a/iidxwidget-app/renderer/widget/index.js b/iidxwidget-app/renderer/widget/index.js index aabf959..f4de9d2 100644 --- a/iidxwidget-app/renderer/widget/index.js +++ b/iidxwidget-app/renderer/widget/index.js @@ -15,7 +15,12 @@ let keyTimestamps = []; let globalMALength = 200; let perButtonMALength = 200; +let isLatestDiscDirectionUp = true; + const disc = document.getElementById("disc"); +const upImg = document.getElementById('up-disc-image'); +const downImg = document.getElementById('down-disc-image'); +const needle = document.getElementById('disc-needle'); const upperIndicator = document.getElementById("upper-indicator"); const lowerIndicator = document.getElementById("lower-indicator"); @@ -42,7 +47,33 @@ function startUptimeTimer() { function rotateDisc(delta) { discRotation -= delta * 2.5; disc.style.transform = `translate(-50%, -50%) rotate(${discRotation}deg)`; - updateBorders(delta); +} + +function changeDiscImage(delta) { + if (delta === 0) return; + if (is2PMode) delta = -delta; + + const isUp = delta > 0; + if (isLatestDiscDirectionUp == isUp) return; + + if (isUp) { + downImg.style.display = 'none'; + if (upImg.classList.contains("img-available")) { + upImg.style.display = 'block'; + needle.style.display = 'none'; // 이미지 있으면 bar 숨기기 + } else { + upImg.style.display = 'none'; + needle.style.display = 'block'; // 기본 bar 보이기 + } + isLatestDiscDirectionUp = true; + } else { // Is down + if (downImg.classList.contains("img-available")) { + upImg.style.display = 'none'; // Remove the upDisc image only if the downDisc image is available + downImg.style.display = 'block'; + needle.style.display = 'none'; // 이미지 있으면 bar 숨기기 + isLatestDiscDirectionUp = false; + } + } } function updateBorders(delta) { @@ -119,20 +150,28 @@ function updateKPSDisplay() { } setInterval(updateKPSDisplay, 100); -function applyDiscImage(imagePath) { - const img = document.getElementById('disc-image'); - const needle = document.getElementById('disc-needle'); - - if (!img || !needle) return; - - if (!imagePath) { - img.src = ''; - img.style.display = 'none'; +function applyDiscImage(settings) { + let upDiscImagePath = settings.widget.upDiscImagePath; + let downDiscImagePath = settings.widget.downDiscImagePath; + + if (upDiscImagePath) { + upImg.classList.add("img-available"); + upImg.src = upDiscImagePath; + upImg.style.display = 'block'; + needle.style.display = 'none'; // 이미지 있으면 bar 숨기기 + } else { + upImg.classList.remove("img-available"); + upImg.src = ''; + upImg.style.display = 'none'; needle.style.display = 'block'; // 기본 bar 보이기 + } + + if (downDiscImagePath) { + downImg.classList.add("img-available"); + downImg.src = downDiscImagePath; + downImg.style.display = 'none'; } else { - img.src = imagePath; - img.style.display = 'block'; - needle.style.display = 'none'; // 이미지 있으면 bar 숨기기 + downImg.classList.remove("img-available"); } } @@ -145,6 +184,7 @@ function handleData(data) { let delta = (newValue - lastDiscValue + 256) % 256; if (delta > 127) delta -= 256; rotateDisc(delta); + changeDiscImage(delta); updateBorders(delta); } lastDiscValue = newValue; @@ -211,7 +251,7 @@ function applyButtonLayout(layout) { if (settings?.widget) { applyReleaseContainerSettings(settings.widget.infoPosition || 'bottom'); applyButtonLayout(settings.widget.buttonLayout || '1P'); - applyDiscImage(settings?.widget?.discImagePath); + applyDiscImage(settings); applyPromoBox(settings); globalMALength = settings.widget.globalMALength || 200; perButtonMALength = settings.widget.perButtonMALength || 200; diff --git a/iidxwidget-app/renderer/widget/style.css b/iidxwidget-app/renderer/widget/style.css index e64f436..c2ad19c 100644 --- a/iidxwidget-app/renderer/widget/style.css +++ b/iidxwidget-app/renderer/widget/style.css @@ -87,7 +87,7 @@ body { border-radius: 3px; } -#disc-image { +.disc-image { width: 100%; height: 100%; object-fit: cover; /* 정사각형 채움 */