diff --git a/src/main.ts b/src/main.ts index 71b9134..c0b12e3 100644 --- a/src/main.ts +++ b/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(); diff --git a/src/style.css b/src/style.css index 20fb8fe..73279e3 100644 --- a/src/style.css +++ b/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 */ }