forked from Qortal/qortal-ui
Add Puzzle
This commit is contained in:
AlphaX-Projects
GitHub
parent
b101a5c0a3
commit
7683003873
45
qortal-ui-plugins/plugins/core/puzzles/index.html
Normal file
45
qortal-ui-plugins/plugins/core/puzzles/index.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="/font/material-icons.css">
|
||||
<style>
|
||||
html {
|
||||
--scrollbarBG: #a1a1a1;
|
||||
--thumbBG: #6a6c75;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: var(--scrollbarBG);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: var(--thumbBG);
|
||||
border-radius: 6px;
|
||||
border: 3px solid var(--scrollbarBG);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Roboto", sans-serif;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<puzzles-info></puzzles-info>
|
||||
<script type="module" src="puzzles.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
461
qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js
Normal file
461
qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js
Normal file
@ -0,0 +1,461 @@
|
||||
import { LitElement, html, css } from 'lit-element'
|
||||
import { render } from 'lit-html'
|
||||
import { Epml } from '../../../epml.js'
|
||||
|
||||
// Not sure if these are imported in the proper way:
|
||||
import nacl from '../../../../qortal-ui-crypto/api/deps/nacl-fast.js'
|
||||
import Base58 from '../../../../qortal-ui-crypto/api/deps/Base58.js'
|
||||
import publicKeyToAddress from '../../../../qortal-ui-crypto/api/wallet/publicKeyToAddress.js'
|
||||
|
||||
import '@material/mwc-icon'
|
||||
import '@material/mwc-button'
|
||||
import '@material/mwc-textfield'
|
||||
import '@material/mwc-dialog'
|
||||
import '@material/mwc-slider'
|
||||
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
import '@vaadin/vaadin-grid/vaadin-grid.js'
|
||||
import '@vaadin/vaadin-grid/theme/material/all-imports.js'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
const DEFAULT_FEE = 0.001
|
||||
const PAYMENT_TX_TYPE = 2
|
||||
|
||||
class Puzzles extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
loading: { type: Boolean },
|
||||
invalid: { type: Boolean },
|
||||
puzzles: { type: Array },
|
||||
solved: { type: Object },
|
||||
selectedAddress: { type: Object },
|
||||
selectedPuzzle: { type: Object },
|
||||
error: { type: Boolean },
|
||||
message: { type: String }
|
||||
}
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
}
|
||||
#puzzle-page {
|
||||
background: #fff;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5 {
|
||||
color:#333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.red {
|
||||
--mdc-theme-primary: #F44336;
|
||||
}
|
||||
|
||||
.clue {
|
||||
font-family: monospaced;
|
||||
font-size: smaller;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
this.loading = false
|
||||
this.invalid = true
|
||||
this.puzzles = []
|
||||
this.solved = {}
|
||||
this.selectedAddress = {}
|
||||
this.selectedPuzzle = {}
|
||||
this.error = false
|
||||
this.message = ''
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div id="puzzle-page">
|
||||
<div style="min-height:48px; display: flex; padding-bottom: 6px;">
|
||||
<h3 style="margin: 0; flex: 1; padding-top: 8px; display: inline;">Puzzles</h3>
|
||||
</div>
|
||||
|
||||
<vaadin-grid id="puzzlesGrid" style="height:auto;" ?hidden="${this.isEmptyArray(this.puzzles)}" .items="${this.puzzles}" height-by-rows>
|
||||
<vaadin-grid-column auto-width header="Reward" .renderer=${(root, column, data) => {
|
||||
if (data.item.isSolved) {
|
||||
render(html`<span style="font-size: smaller;">SOLVED by ${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) => {
|
||||
if (data.item.isSolved) {
|
||||
render(html``, root)
|
||||
} else {
|
||||
render(html`<mwc-button @click=${() => this.guessPuzzle(data.item)}><mwc-icon>queue</mwc-icon>Guess</mwc-button>`, root)
|
||||
}
|
||||
}}></vaadin-grid-column>
|
||||
</vaadin-grid>
|
||||
|
||||
<mwc-dialog id="puzzleGuessDialog" scrimClickAction="${this.loading ? '' : 'close'}">
|
||||
<div>Enter your guess to solve this puzzle and win ${this.selectedPuzzle.reward} QORT:</div>
|
||||
<br>
|
||||
<div id="puzzleGuessName">Name: ${this.selectedPuzzle.name}</div>
|
||||
<div id="puzzleGuessDescription">Description: ${this.selectedPuzzle.description}</div>
|
||||
<div id="puzzleGuessClue" ?hidden=${!this.selectedPuzzle.clue}>Clue: <span class="clue">${this.selectedPuzzle.clue}</span></div>
|
||||
<br>
|
||||
<div id="puzzleGuessInputHint" style="font-size: smaller;">Your guess needs to be 43 or 44 characters and <b>not</b> include 0 (zero), I (upper i), O (upper o) or l (lower L).</div>
|
||||
<mwc-textfield style="width:100%" ?disabled="${this.loading}" label="Your Guess" id="puzzleGuess" pattern="[1-9A-HJ-NP-Za-km-z]{43,44}" style="font-family: monospace;" maxLength="44" charCounter="true" autoValidate="true"></mwc-textfield>
|
||||
<div style="text-align:right; height:36px;">
|
||||
<span ?hidden="${!this.loading}">
|
||||
<!-- loading message -->
|
||||
Claiming your reward...
|
||||
<paper-spinner-lite
|
||||
style="margin-top:12px;"
|
||||
?active="${this.loading}"
|
||||
alt="Claiming puzzle reward"></paper-spinner-lite>
|
||||
</span>
|
||||
<span ?hidden=${this.message === ''} style="${this.error ? 'color:red;' : ''}">
|
||||
${this.message}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<mwc-button
|
||||
?disabled="${this.loading || this.invalid}"
|
||||
slot="primaryAction"
|
||||
@click=${this.submitPuzzleGuess}>
|
||||
Submit
|
||||
</mwc-button>
|
||||
<mwc-button
|
||||
?disabled="${this.loading}"
|
||||
slot="secondaryAction"
|
||||
dialogAction="cancel"
|
||||
class="red">
|
||||
Close
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
window.addEventListener("contextmenu", (event) => {
|
||||
event.preventDefault();
|
||||
this._textMenu(event)
|
||||
});
|
||||
|
||||
window.addEventListener("click", () => {
|
||||
parentEpml.request('closeCopyTextMenu', null)
|
||||
});
|
||||
|
||||
window.onkeyup = (e) => {
|
||||
if (e.keyCode === 27) {
|
||||
parentEpml.request('closeCopyTextMenu', null)
|
||||
}
|
||||
}
|
||||
|
||||
const textBox = this.shadowRoot.getElementById("puzzleGuess")
|
||||
|
||||
// keep track of input validity so we can enabled/disable submit button
|
||||
textBox.validityTransform = (newValue, nativeValidity) => {
|
||||
this.invalid = !nativeValidity.valid
|
||||
return nativeValidity
|
||||
}
|
||||
|
||||
const getPuzzleGroupMembers = async () => {
|
||||
return await parentEpml.request('apiCall', {
|
||||
url: `/groups/members/165`
|
||||
})
|
||||
}
|
||||
|
||||
const getBalance = async(address) => {
|
||||
return await parentEpml.request('apiCall', {
|
||||
url: `/addresses/balance/${address}`
|
||||
})
|
||||
}
|
||||
|
||||
const getName = async(memberAddress) => {
|
||||
let _names = await parentEpml.request('apiCall', {
|
||||
url: `/names/address/${memberAddress}`
|
||||
})
|
||||
|
||||
if (_names.length === 0) return "";
|
||||
|
||||
return _names[0].name
|
||||
}
|
||||
|
||||
const getNameInfo = async(name) => {
|
||||
// We have to explicitly encode '#' to stop them being interpreted as in-page references
|
||||
name = name.replaceAll('#', '%23')
|
||||
|
||||
return await parentEpml.request('apiCall', {
|
||||
url: `/names/${name}`
|
||||
})
|
||||
}
|
||||
|
||||
const getFirstOutgoingPayment = async(sender) => {
|
||||
let _payments = await parentEpml.request('apiCall', {
|
||||
url: `/transactions/search?confirmationStatus=CONFIRMED&limit=20&txType=PAYMENT&address=${sender}`
|
||||
})
|
||||
|
||||
return _payments.find(payment => payment.creatorAddress === sender)
|
||||
}
|
||||
|
||||
const updatePuzzles = async () => {
|
||||
let _puzzleGroupMembers = await getPuzzleGroupMembers()
|
||||
|
||||
let _puzzles = []
|
||||
|
||||
await Promise.all(_puzzleGroupMembers.members
|
||||
.sort((a, b) => b.joined - a.joined)
|
||||
.map(async (member) => {
|
||||
let _puzzleAddress = member.member
|
||||
|
||||
if (member.isAdmin) return
|
||||
|
||||
// Already solved? No need to refresh info
|
||||
if (this.solved[_puzzleAddress]) {
|
||||
_puzzles.push(this.solved[_puzzleAddress])
|
||||
return
|
||||
}
|
||||
|
||||
let _name = await getName(_puzzleAddress)
|
||||
// No name???
|
||||
if (_name === "") return
|
||||
|
||||
let _reward = await getBalance(_puzzleAddress)
|
||||
let _isSolved = _reward < 1.0;
|
||||
let _nameInfo = await getNameInfo(_name)
|
||||
|
||||
let _nameData = JSON.parse(_nameInfo.data)
|
||||
|
||||
let _puzzle = {
|
||||
reward: _reward,
|
||||
address: _puzzleAddress,
|
||||
name: _name,
|
||||
description: _nameData.description,
|
||||
isSolved: _isSolved
|
||||
}
|
||||
|
||||
if (!_isSolved && _nameData.clue)
|
||||
_puzzle.clue = _nameData.clue;
|
||||
|
||||
if (_isSolved) {
|
||||
// Info on winner
|
||||
let _payment = await getFirstOutgoingPayment(_puzzleAddress)
|
||||
_puzzle.winner = _payment.recipient
|
||||
// Does winner have a name?
|
||||
let _winnerName = await getName(_puzzle.winner)
|
||||
if (_winnerName) _puzzle.winner = _winnerName
|
||||
// Add to 'solved' map to prevent info refresh as it'll never change
|
||||
this.solved[_puzzleAddress] = _puzzle
|
||||
}
|
||||
|
||||
_puzzles.push(_puzzle);
|
||||
}))
|
||||
|
||||
this.puzzles = _puzzles;
|
||||
|
||||
setTimeout(updatePuzzles, 20000)
|
||||
}
|
||||
|
||||
let configLoaded = false
|
||||
|
||||
parentEpml.ready().then(() => {
|
||||
parentEpml.subscribe('selected_address', async selectedAddress => {
|
||||
this.selectedAddress = {}
|
||||
selectedAddress = JSON.parse(selectedAddress)
|
||||
if (!selectedAddress || Object.entries(selectedAddress).length === 0) return
|
||||
this.selectedAddress = selectedAddress
|
||||
})
|
||||
|
||||
parentEpml.subscribe('config', c => {
|
||||
if (!configLoaded) {
|
||||
setTimeout(updatePuzzles, 1)
|
||||
configLoaded = true
|
||||
}
|
||||
this.config = JSON.parse(c)
|
||||
})
|
||||
|
||||
parentEpml.subscribe('copy_menu_switch', async value => {
|
||||
if (value === 'false' && window.getSelection().toString().length !== 0) {
|
||||
this.clearSelection()
|
||||
}
|
||||
})
|
||||
|
||||
parentEpml.subscribe('frame_paste_menu_switch', async res => {
|
||||
res = JSON.parse(res)
|
||||
|
||||
if (res.isOpen === false && this.isPasteMenuOpen === true) {
|
||||
this.pasteToTextBox(textBox)
|
||||
this.isPasteMenuOpen = false
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
parentEpml.imReady()
|
||||
|
||||
textBox.addEventListener('contextmenu', (event) => {
|
||||
const getSelectedText = () => {
|
||||
var text = "";
|
||||
|
||||
if (typeof window.getSelection != "undefined") {
|
||||
text = window.getSelection().toString();
|
||||
} else if (typeof this.shadowRoot.selection != "undefined" && this.shadowRoot.selection.type == "Text") {
|
||||
text = this.shadowRoot.selection.createRange().text;
|
||||
}
|
||||
|
||||
return text;
|
||||
}
|
||||
|
||||
const checkSelectedTextAndShowMenu = () => {
|
||||
let selectedText = getSelectedText();
|
||||
|
||||
if (selectedText && typeof selectedText === 'string') {
|
||||
// ...
|
||||
} else {
|
||||
this.pasteMenu(event)
|
||||
this.isPasteMenuOpen = true
|
||||
|
||||
// Prevent Default and Stop Event Bubbling
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
}
|
||||
|
||||
checkSelectedTextAndShowMenu()
|
||||
})
|
||||
}
|
||||
|
||||
async guessPuzzle(puzzle) {
|
||||
this.selectedPuzzle = puzzle
|
||||
this.shadowRoot.getElementById("puzzleGuess").value = ''
|
||||
this.shadowRoot.getElementById("puzzleGuess").checkValidity()
|
||||
this.message = ''
|
||||
this.invalid = true
|
||||
|
||||
this.shadowRoot.querySelector('#puzzleGuessDialog').show()
|
||||
}
|
||||
|
||||
async submitPuzzleGuess(e) {
|
||||
this.loading = true
|
||||
this.error = false
|
||||
|
||||
// Check for valid guess
|
||||
const guess = this.shadowRoot.getElementById("puzzleGuess").value
|
||||
|
||||
let _rawGuess = Base58.decode(guess)
|
||||
let _keyPair = nacl.sign.keyPair.fromSeed(_rawGuess)
|
||||
|
||||
let _guessAddress = publicKeyToAddress(_keyPair.publicKey)
|
||||
|
||||
console.log("Guess '" + _guessAddress + "' vs puzzle's address '" + this.selectedPuzzle.address + "'")
|
||||
if (_guessAddress !== this.selectedPuzzle.address) {
|
||||
this.error = true
|
||||
this.message = 'Guess incorrect!'
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
|
||||
// Get Last Ref
|
||||
const getLastRef = async (address) => {
|
||||
let myRef = await parentEpml.request('apiCall', {
|
||||
url: `/addresses/lastreference/${address}`
|
||||
})
|
||||
return myRef
|
||||
}
|
||||
|
||||
let lastRef = await getLastRef(_guessAddress)
|
||||
let amount = this.selectedPuzzle.reward - DEFAULT_FEE;
|
||||
let recipientAddress = this.selectedAddress.address
|
||||
let txnParams = {
|
||||
recipient: recipientAddress,
|
||||
amount: amount,
|
||||
lastReference: lastRef,
|
||||
fee: DEFAULT_FEE
|
||||
}
|
||||
|
||||
// Mostly copied from qortal-ui-core/src/plugins/routes.js
|
||||
let txnResponse = await parentEpml.request('standaloneTransaction', {
|
||||
type: 2,
|
||||
keyPair: {
|
||||
publicKey: _keyPair.publicKey,
|
||||
privateKey: _keyPair.secretKey
|
||||
},
|
||||
params: txnParams
|
||||
})
|
||||
|
||||
if (txnResponse.success) {
|
||||
this.message = 'Reward claim submitted - check wallet for reward!'
|
||||
} else {
|
||||
this.error = true
|
||||
if (txnResponse.data) {
|
||||
this.message = "Error while claiming reward: " + txnResponse.data.message
|
||||
} else {
|
||||
this.message = "Error while claiming reward: " + txnResponse.message
|
||||
}
|
||||
}
|
||||
|
||||
this.loading = false
|
||||
}
|
||||
|
||||
pasteToTextBox(textBox) {
|
||||
// Return focus to the window
|
||||
window.focus()
|
||||
|
||||
navigator.clipboard.readText().then(clipboardText => {
|
||||
|
||||
textBox.value += clipboardText
|
||||
textBox.focus()
|
||||
});
|
||||
}
|
||||
|
||||
pasteMenu(event) {
|
||||
let eventObject = { pageX: event.pageX, pageY: event.pageY, clientX: event.clientX, clientY: event.clientY }
|
||||
parentEpml.request('openFramePasteMenu', eventObject)
|
||||
}
|
||||
|
||||
_textMenu(event) {
|
||||
const getSelectedText = () => {
|
||||
var text = "";
|
||||
if (typeof window.getSelection != "undefined") {
|
||||
text = window.getSelection().toString();
|
||||
} else if (typeof this.shadowRoot.selection != "undefined" && this.shadowRoot.selection.type == "Text") {
|
||||
text = this.shadowRoot.selection.createRange().text;
|
||||
}
|
||||
return text;
|
||||
}
|
||||
|
||||
const checkSelectedTextAndShowMenu = () => {
|
||||
let selectedText = getSelectedText();
|
||||
if (selectedText && typeof selectedText === 'string') {
|
||||
let _eve = { pageX: event.pageX, pageY: event.pageY, clientX: event.clientX, clientY: event.clientY }
|
||||
let textMenuObject = { selectedText: selectedText, eventObject: _eve, isFrame: true }
|
||||
parentEpml.request('openCopyTextMenu', textMenuObject)
|
||||
}
|
||||
}
|
||||
|
||||
checkSelectedTextAndShowMenu()
|
||||
}
|
||||
|
||||
isEmptyArray(arr) {
|
||||
if (!arr) { return true }
|
||||
return arr.length === 0
|
||||
}
|
||||
|
||||
clearSelection() {
|
||||
window.getSelection().removeAllRanges()
|
||||
window.parent.getSelection().removeAllRanges()
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('puzzles-info', Puzzles)
|
||||
Loading…
x
Reference in New Issue
Block a user