Merge pull request #1 from catbref/master

Updates to puzzles and trade-portal UI plugins

qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js

@@ -63,7 +63,7 @@ class Puzzles extends LitElement {
 		}
 
 		.clue {
-			font-family: monospaced;
+			font-family: "Lucida Console", "Courier New", monospace;
 			font-size: smaller;
 		}
 	`
@@ -88,19 +88,21 @@ class Puzzles extends LitElement {
 					<h3 style="margin: 0; flex: 1; padding-top: 8px; display: inline;">Puzzles</h3>
 				</div>
                                 <div class="divCard">
-				    <vaadin-grid theme="compact" id="puzzlesGrid" ?hidden="${this.isEmptyArray(this.puzzles)}" .items="${this.puzzles}" aria-label="Puzzles" all-rows-visible>
+				    <vaadin-grid theme="compact, wrap-cell-content" id="puzzlesGrid" ?hidden="${this.isEmptyArray(this.puzzles)}" .items="${this.puzzles}" aria-label="Puzzles" all-rows-visible>
-				        <vaadin-grid-column auto-width header="Reward" .renderer=${(root, column, data) => {
+				        <vaadin-grid-column width="20em" header="Reward" .renderer=${(root, column, data) => {
                             			if (data.item.isSolved) {
-                                			render(html`<span style="font-size: smaller;">SOLVED by ${data.item.winner}</span>`, root)
+                                			render(html`<span style="font-size: smaller;">SOLVED by<br>${data.item.winner}</span>`, root)
                             			} else {
                                 			render(html`<span>${data.item.reward} QORT</span>`, root)
                             			}
                         		}}>
                                         </vaadin-grid-column>
-					<vaadin-grid-column auto-width path="name"></vaadin-grid-column>
+					<vaadin-grid-column width="16em" path="name"></vaadin-grid-column>
-					<vaadin-grid-column auto-width path="description"></vaadin-grid-column>
+					<vaadin-grid-column width="40%" path="description"></vaadin-grid-column>
-					<vaadin-grid-column auto-width path="clue" style="font-family: monospace; font-size: smaller;"></vaadin-grid-column>
+					<vaadin-grid-column width="24em" header="Clue / Answer" .renderer=${(root, column, data) => {
-					<vaadin-grid-column width="12em" header="Action" .renderer=${(root, column, data) => {
+							render(html`<span class="clue">${data.item.clue}</span>`, root)
+						}}></vaadin-grid-column>
+					<vaadin-grid-column width="10em" header="Action" .renderer=${(root, column, data) => {
                         			if (data.item.isSolved) {
                             				render(html``, root)
                         			} else {
@@ -121,11 +123,11 @@ class Puzzles extends LitElement {
 					<div style="text-align:right; height:36px;">
 						<span ?hidden="${!this.loading}">
 							<!-- loading message -->
-							Claiming your reward... &nbsp;
+							Checking your guess... &nbsp;
 							<paper-spinner-lite
 								style="margin-top:12px;"
 								?active="${this.loading}"
-								alt="Claiming puzzle reward">
+								alt="Checking puzzle guess">
 							</paper-spinner-lite>
 						</span>
 						<span ?hidden=${this.message === ''} style="${this.error ? 'color:red;' : ''}">
@@ -250,7 +252,7 @@ class Puzzles extends LitElement {
                         isSolved: _isSolved
                     }
 
-                    if (!_isSolved && _nameData.clue)
+                    if (_nameData.clue)
                         _puzzle.clue = _nameData.clue;
 
                     if (_isSolved) {

qortal-ui-plugins/plugins/core/trade-portal/trade-portal.src.js

@@ -1355,14 +1355,14 @@ class TradePortal extends LitElement {
     initSocket() {
         let _relatedCoin = ""
         let presenceTxns = null
+        let tradePresenceTxns = null
         let offeringTrades = null
-        let filteredOffers = []
 
         self.addEventListener('message', function (event) {
             switch (event.data.type) {
                 case 'open_orders':
                     offeringTrades = event.data.content
-                    handleOfferingTrades()
+                    processOffersWithPresence()
                     break
                 case 'set_coin':
                     _relatedCoin = event.data.content
@@ -1378,36 +1378,44 @@ class TradePortal extends LitElement {
             return timestamp > thirtyMinsAgo
         }
 
+        const filterOffersUsingEitherPresence = (offeringTrade) => {
+            return lessThanThirtyMinsAgo(offeringTrade.lastSeen) || offeringTrade.tradePresenceExpiry > Date.now();
+        }
+
         const processOffersWithPresence = () => {
+            if (offeringTrades === null) return
+
             const waitFor = (ms) => new Promise((r) => setTimeout(r, ms))
             async function asyncForEach(array, callback) {
                 for (let index = 0; index < array.length; index++) {
                     await callback(array[index], index, array)
                 }
             }
+
             const startOfferPresenceMapping = async () => {
-                await asyncForEach(presenceTxns, async (presence) => {
+                if (presenceTxns !== null) {
-                    await waitFor(5)
+                    await asyncForEach(presenceTxns, async (presence) => {
-                    let offerIndex = offeringTrades.findIndex((offeringTrade) => offeringTrade.qortalCreatorTradeAddress === presence.address)
+                        await waitFor(5)
-                    offerIndex !== -1 ? (offeringTrades[offerIndex].lastSeen = presence.timestamp) : null
+                        let offerIndex = offeringTrades.findIndex((offeringTrade) => offeringTrade.qortalCreatorTradeAddress === presence.address)
-                })
+                        offerIndex !== -1 ? (offeringTrades[offerIndex].lastSeen = presence.timestamp) : null
-                filteredOffers = offeringTrades.filter((offeringTrade) => lessThanThirtyMinsAgo(offeringTrade.lastSeen))
+                    })
+                }
+
+                if (tradePresenceTxns !== null) {
+                    await asyncForEach(tradePresenceTxns, async (tradePresence) => {
+                        await waitFor(5)
+                        let offerIndex = offeringTrades.findIndex((offeringTrade) => offeringTrade.qortalCreatorTradeAddress === tradePresence.tradeAddress)
+                        offerIndex !== -1 ? (offeringTrades[offerIndex].tradePresenceExpiry = tradePresence.timestamp) : null
+                    })
+                }
+
+                let filteredOffers = offeringTrades.filter((offeringTrade) => filterOffersUsingEitherPresence(offeringTrade))
                 self.postMessage({ type: 'PRESENCE', data: { offers: offeringTrades, filteredOffers: filteredOffers, relatedCoin: _relatedCoin } })
-                filteredOffers = []
             }
+
             startOfferPresenceMapping()
         }
 
-        const handleOfferingTrades = () => {
-            if (presenceTxns === null) return
-            processOffersWithPresence()
-        }
-
-        const handlePresence = () => {
-            if (offeringTrades === null) return
-            processOffersWithPresence()
-        }
-
         const initTradeOffersWebSocket = (restarted = false) => {
             let tradeOffersSocketCounter = 0
             let socketTimeout
@@ -1480,6 +1488,37 @@ class TradePortal extends LitElement {
             }
         }
 
+        const initTradePresenceWebSocket = (restarted = false) => {
+            let socketTimeout
+            let socketLink = `ws://NODEURL/websockets/crosschain/tradepresence`
+            const socket = new WebSocket(socketLink)
+            // Open Connection
+            socket.onopen = () => {
+                setTimeout(pingSocket, 50)
+            }
+            // Message Event
+            socket.onmessage = (e) => {
+                tradePresenceTxns = JSON.parse(e.data)
+                processOffersWithPresence()
+                restarted = false
+            }
+            // Closed Event
+            socket.onclose = () => {
+                clearTimeout(socketTimeout)
+                // Restart Socket Connection
+                restartTradePresenceWebSocket()
+            }
+            // Error Event
+            socket.onerror = (e) => {
+                clearTimeout(socketTimeout)
+            }
+            const pingSocket = () => {
+                socket.send('ping')
+                socketTimeout = setTimeout(pingSocket, 295000)
+            }
+        }
+
+        // Will be removed in future - being replaced by tradepresence above
         const initPresenceWebSocket = (restarted = false) => {
             let socketTimeout
             let socketLink = `ws://NODEURL/websockets/presence?presenceType=TRADE_BOT`
@@ -1491,7 +1530,7 @@ class TradePortal extends LitElement {
             // Message Event
             socket.onmessage = (e) => {
                 presenceTxns = JSON.parse(e.data)
-                handlePresence()
+                processOffersWithPresence()
                 restarted = false
             }
             // Closed Event
@@ -1514,6 +1553,10 @@ class TradePortal extends LitElement {
             setTimeout(() => initPresenceWebSocket(true), 3000)
         }
 
+        const restartTradePresenceWebSocket = () => {
+            setTimeout(() => initTradePresenceWebSocket(true), 3000)
+        }
+
         const restartTradeOffersWebSocket = () => {
             setTimeout(() => initTradeOffersWebSocket(true), 3000)
         }
@@ -1528,6 +1571,9 @@ class TradePortal extends LitElement {
         // Start PresenceWebSocket
         initPresenceWebSocket()
 
+        // Start TradePresenceWebSocket
+        initTradePresenceWebSocket()
+
         // Start TradeBotWebSocket
         initTradeBotWebSocket()
     }