Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-27 15:55:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Puzzles: show clue as answer when solved and improve rendering

Browse Source
This commit is contained in:
catbref 2022-02-26 17:44:37 +00:00
parent a935944beb
commit 4a54bc7dbc
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js
View File

@ -63,7 +63,7 @@ class Puzzles extends LitElement {
} }
.clue { .clue {
font-family: monospaced; font-family: "Lucida Console", "Courier New", monospace;
font-size: smaller; font-size: smaller;
} }
` `
@ -88,19 +88,21 @@ class Puzzles extends LitElement {
<h3 style="margin: 0; flex: 1; padding-top: 8px; display: inline;">Puzzles</h3> <h3 style="margin: 0; flex: 1; padding-top: 8px; display: inline;">Puzzles</h3>
</div> </div>
<div class="divCard"> <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) { 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 { } else {
render(html`<span>${data.item.reward} QORT</span>`, root) render(html`<span>${data.item.reward} QORT</span>`, root)
} }
}}> }}>
</vaadin-grid-column> </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) { if (data.item.isSolved) {
render(html``, root) render(html``, root)
} else { } else {
@ -121,11 +123,11 @@ class Puzzles extends LitElement {
<div style="text-align:right; height:36px;"> <div style="text-align:right; height:36px;">
<span ?hidden="${!this.loading}"> <span ?hidden="${!this.loading}">
<!-- loading message --> <!-- loading message -->
Claiming your reward... &nbsp; Checking your guess... &nbsp;
<paper-spinner-lite <paper-spinner-lite
style="margin-top:12px;" style="margin-top:12px;"
?active="${this.loading}" ?active="${this.loading}"
alt="Claiming puzzle reward"> alt="Checking puzzle guess">
</paper-spinner-lite> </paper-spinner-lite>
</span> </span>
<span ?hidden=${this.message === ''} style="${this.error ? 'color:red;' : ''}"> <span ?hidden=${this.message === ''} style="${this.error ? 'color:red;' : ''}">
@ -250,7 +252,7 @@ class Puzzles extends LitElement {
isSolved: _isSolved isSolved: _isSolved
} }
if (!_isSolved && _nameData.clue) if (_nameData.clue)
_puzzle.clue = _nameData.clue; _puzzle.clue = _nameData.clue;
if (_isSolved) { if (_isSolved) {