fix: Use disabled class instead of attribute to be able to click NEAR…

… levels
johnedvard · Sep 13, 2022 · 57786cd · 57786cd
1 parent 6bee639
commit 57786cd
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
diff --git a/src/index.html b/src/index.html
@@ -18,7 +18,7 @@
       <div id="main" class="overlay">
         <button id="lv">Select Level</button>
         <button id="lo">Loading..</button>
-        <button id="near" disabled>NEAR Levels</button>
+        <button id="near" class="disabled" disabled>NEAR Levels</button>
         <button id="bo">Bonus Content</button>
         <button id="mu" class="flat">Music is OFF</button>
       </div>

diff --git a/src/menu.js b/src/menu.js
@@ -78,7 +78,7 @@ const initNearLevels = ({
     imgEl.setAttribute('src', IPFS_BASE_PATH + collection.metadata.media);
     levelEl.setAttribute('near', 'true');
     if (!ownsNft) {
-      levelEl.setAttribute('disabled', !ownsNft);
+      levelEl.classList.add('disabled');
     }
     levelEl.setAttribute('token-series-id', collection.token_series_id);
     // TODO (johnedvard) figure out how to use actual prize and pay for storage instead of hardcoding 1N (actual price is 0.5N)
@@ -195,7 +195,7 @@ const onContainerClick = (e) => {
 };
 
 const onNearLevelClick = (btn) => {
-  if (btn && btn.getAttribute('disabled') == 'true') {
+  if (btn && btn.classList.contains('disabled')) {
     showLoading();
     const token_series_id = btn.getAttribute('token-series-id');
     const priceInYoctoNear = btn.getAttribute('price');

diff --git a/src/nearLogin.js b/src/nearLogin.js
@@ -14,6 +14,7 @@ export const initLoginLogout = (nearConnection) => {
   if (nearConnection && nearConnection.isSignedIn()) {
     loginoutEl.innerHTML = 'Logout from NEAR';
     const nearLevelBtn = document.getElementById('near');
+    nearLevelBtn.classList.remove('disabled');
     nearLevelBtn.removeAttribute('disabled');
   } else {
     loginoutEl.innerHTML = 'Login to NEAR';

diff --git a/src/styles.css b/src/styles.css
@@ -90,12 +90,12 @@ button,
   font-weight: 600;
   cursor: pointer;
 }
-button:disabled {
+button.disabled {
   background-color: lightgray;
   color: darkgray;
   cursor: not-allowed;
 }
-button:disabled img {
+button.disabled img {
   filter: contrast(0.5);
 }
 button:hover,