Improved consumables subtab

src/purchases/ConsumablesTab.ts

@@ -1,4 +1,5 @@
 import { sendToWebsocket } from '../Login'
+import { Alert, Confirm } from '../UpdateHTML'
 import { memoize } from '../Utility'
 
 interface ConsumableListItems {
@@ -22,18 +23,22 @@ const initializeConsumablesTab = memoize(() => {
         >
           <img src='Pictures/PseudoShop/${u.internalName}.png' alt='${u.name} Consumable' />
           <p>${u.name}</p>
-          <p>${u.description}</p>
-          <button><p>Cost: </p><p>${u.cost} PseudoCoins</p></button>
+          <p style="white-space: pre-line">${u.description}</p>
+          <button><p>ACTIVATE: </p><p>${u.cost} PseudoCoins</p></button>
         </div>
       `).join('')
 
       tab.querySelectorAll('div > button').forEach((element) => {
         const key = element.parentElement!.getAttribute('data-key')!
-        element.addEventListener('click', () => {
+        element.addEventListener('click', async () => {
+          const alert = await Confirm(`Please confirm you would like to activate a ${key} for 500 PseudoCoins`)
+          if (!alert) return Alert('Purchase cancelled')
+          else {
           sendToWebsocket(JSON.stringify({
             type: 'consume',
             consumable: key
           }))
+        }
         })
       })
     })