mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
Merge pull request #1 from catbref/master
Updates to puzzles and trade-portal UI plugins
This commit is contained in:
CalDescent
GitHub
commit
cefab6e2ec
@ -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-column auto-width header="Reward" .renderer=${(root, column, data) => {
|
||||
<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 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 auto-width 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="12em" header="Action" .renderer=${(root, column, data) => {
|
||||
<vaadin-grid-column width="16em" path="name"></vaadin-grid-column>
|
||||
<vaadin-grid-column width="40%" path="description"></vaadin-grid-column>
|
||||
<vaadin-grid-column width="24em" header="Clue / Answer" .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...
|
||||
Checking your guess...
|
||||
<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) {
|
||||
|
||||
@ -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) => {
|
||||
await waitFor(5)
|
||||
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 (presenceTxns !== null) {
|
||||
await asyncForEach(presenceTxns, async (presence) => {
|
||||
await waitFor(5)
|
||||
let offerIndex = offeringTrades.findIndex((offeringTrade) => offeringTrade.qortalCreatorTradeAddress === presence.address)
|
||||
offerIndex !== -1 ? (offeringTrades[offerIndex].lastSeen = presence.timestamp) : null
|
||||
})
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user