feat: disable read rle button

src/main.ts

@@ -169,9 +169,21 @@ configButton.addEventListener("click", () => {
   }
 });
 
-const readRLE = document.getElementById("readRLE") as HTMLElement;
+const readRLE = document.getElementById("readRLE") as HTMLButtonElement;
 const rleErrorMessage = document.getElementById("rleError") as HTMLElement;
 const inputRLE = document.getElementById("inputRLE") as HTMLTextAreaElement;
+function updateReadRLEButton() {
+  if (inputRLE.value.trim() === "") {
+    readRLE.disabled = true;
+  } else {
+    readRLE.disabled = false;
+  }
+}
+updateReadRLEButton();
+inputRLE.addEventListener("input", () => {
+  updateReadRLEButton();
+});
+
 readRLE.addEventListener("click", () => {
   autoRandom.checked = false;
   clearCell();

src/style.css

@@ -93,6 +93,15 @@ dialog button.btn:focus {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5); /* フォーカス時のシャドウ */
 }
 
+/* disabled時のスタイル */
+dialog button.btn:disabled {
+  cursor: not-allowed; /* 無効時のカーソル */
+  background-color: lightgray; /* 無効時の背景色 */
+  color: darkgray; /* 無効時の文字色 */
+  border: 2px solid gray; /* 無効時のボーダー */
+  opacity: 0.6; /* 半透明にする */
+}
+
 #rleError {
   color: #dc2626; /* red-600 */
 }