feat: change disc image based on turn direction

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;  // ✅ 여기 수정!

iidxwidget-app/renderer/settings/settings.html

@@ -86,12 +86,20 @@
     </div>
     <label class="section-label">위젯 외관 커스터마이징</label>
     <div class="setting-group">
-      <label>스크래치 커스텀 이미지 업로드</label>
+      <label>기본 / 윗방향 스크래치 커스텀 이미지 업로드</label>
       <div class="input-with-delete">
-        <input type="file" id="disc-image-upload" accept="image/*">
-        <button id="delete-disc-button">삭제</button>
+        <input type="file" id="up-disc-image-upload" accept="image/*">
+        <button id="delete-up-disc-button">삭제</button>
       </div>
-      <img id="disc-preview" style="margin-top: 10px; max-width: 100%; border-radius: 10px;" />
+      <img id="up-disc-preview" style="margin-top: 10px; max-width: 100%; border-radius: 10px;" />
+    </div>
+    <div class="setting-group">
+      <label>아랫방향 스크래치 커스텀 이미지 업로드</label>
+      <div class="input-with-delete">
+        <input type="file" id="down-disc-image-upload" accept="image/*">
+        <button id="delete-down-disc-button">삭제</button>
+      </div>
+      <img id="down-disc-preview" style="margin-top: 10px; max-width: 100%; border-radius: 10px;" />
     </div>
     <div class="setting-group">
       <div class="color-setting-row">

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,35 +177,61 @@ 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;
 
   const filePath = file.path;
   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);

iidxwidget-app/renderer/widget/index.html

@@ -18,7 +18,8 @@
           <div id="lower-indicator" class="ring-half"></div>
         </div>
         <div id="disc">
-          <img id="disc-image" src="" alt=" " />
+          <img id="up-disc-image" class="disc-image" src="" alt=" " />
+          <img id="down-disc-image" class="disc-image" src="" alt=" " />
           <div id="disc-needle"></div>
         </div>
       </div>

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;

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;     /* 정사각형 채움 */