From a6fc0d4f540032bbedf15ee611b4a33eec0221f0 Mon Sep 17 00:00:00 2001 From: onsetsu Date: Wed, 20 Sep 2023 00:02:15 +0200 Subject: [PATCH] render VP in card and text SQUASHED: AUTO-COMMIT-demos-stefan-untitled-board-game-ubg-card.js,AUTO-COMMIT-src-components-widgets-ubg-cards-entry.html,AUTO-COMMIT-src-components-widgets-ubg-cards-entry.js,AUTO-COMMIT-src-components-widgets-ubg-cards.js, --- demos/stefan/untitled-board-game/ubg-card.js | 14 +++++ src/components/widgets/ubg-cards-entry.html | 4 ++ src/components/widgets/ubg-cards-entry.js | 1 + src/components/widgets/ubg-cards.js | 54 ++++++++++++++++++++ 4 files changed, 73 insertions(+) diff --git a/demos/stefan/untitled-board-game/ubg-card.js b/demos/stefan/untitled-board-game/ubg-card.js index 8c7584c78..63320aeef 100644 --- a/demos/stefan/untitled-board-game/ubg-card.js +++ b/demos/stefan/untitled-board-game/ubg-card.js @@ -54,6 +54,20 @@ export default class Card { this.versions.last.cost = cost; } + getBaseVP() { + return this.versions.last.baseVP; + } + + setBaseVP(baseVP) { + this.ensureUnprintedVersion(); + + if (!baseVP) { + delete this.versions.last.baseVP; + } else { + this.versions.last.baseVP = baseVP; + } + } + getText() { return this.versions.last.text; } diff --git a/src/components/widgets/ubg-cards-entry.html b/src/components/widgets/ubg-cards-entry.html index f6e428eef..47b549e26 100644 --- a/src/components/widgets/ubg-cards-entry.html +++ b/src/components/widgets/ubg-cards-entry.html @@ -135,6 +135,9 @@ #cost { color: goldenrod; } + #vp { + color: violet; + } #name { font-weight: 600; } @@ -152,6 +155,7 @@ + diff --git a/src/components/widgets/ubg-cards-entry.js b/src/components/widgets/ubg-cards-entry.js index 3c1f0cd44..6e5e5830a 100644 --- a/src/components/widgets/ubg-cards-entry.js +++ b/src/components/widgets/ubg-cards-entry.js @@ -129,6 +129,7 @@ export default class UBGCardEntry extends Morph { this.renderElement(v); this.get('#cost').innerHTML = v.cost || '/'; + this.get('#vp').innerHTML = card.getBaseVP() || '-'; this.get('#name').innerHTML = card.versions.last.name || 'no name yet'; this.get('#text').innerHTML = card.versions.last.text || 'no text'; diff --git a/src/components/widgets/ubg-cards.js b/src/components/widgets/ubg-cards.js index 8f14f9364..ff3ce7cb0 100644 --- a/src/components/widgets/ubg-cards.js +++ b/src/components/widgets/ubg-cards.js @@ -196,6 +196,9 @@ const SORT_BY = { NAME: 'name' }; +const VP_FILL = 'violet'; +const VP_STROKE = '#9400d3'; // darkviolet + export default class Cards extends Morph { async initialize() { @@ -1172,6 +1175,8 @@ export default class Cards extends Morph { // cost const coinCenter = coinLeftCenter.addXY(costCoinRadius, 0); this.renderCost(doc, cardDesc, coinCenter, costCoinRadius) + const vpCenter = coinCenter.addY(costCoinRadius * 2.75); + this.renderBaseVP(doc, cardDesc, vpCenter, costCoinRadius) } renderCost(doc, cardDesc, pos, coinRadius) { @@ -1197,6 +1202,45 @@ export default class Cards extends Morph { } } + renderBaseVP(doc, cardDesc, pos, coinRadius) { + const COST_SIZE = coinRadius / 4; + const vpDesc = cardDesc.getBaseVP(); + + if (!vpDesc) { + return; + } + + const cost = Array.isArray(vpDesc) ? vpDesc.first : vpDesc; + + const coinCenter = pos; + doc::withGraphicsState(() => { + doc.setGState(new doc.GState({ opacity: 0.9 })); + // doc.setFillColor('#b8942d'); + doc.setDrawColor(148, 0, 211); + doc.setLineWidth(0.2 * COST_SIZE) + // doc.circle(...coinCenter.toPair(), coinRadius, 'DF'); + doc.setFillColor('violet'); + // doc.rect(coinCenter.x - coinRadius, coinCenter.y - coinRadius, 2 * coinRadius, 2 * coinRadius, 'DF'); + + // diamond shape + const diagonal = coinRadius * Math.sqrt(2) + const right = coinCenter.addX(diagonal).toPair() + const down = pt(-diagonal, diagonal).toPair() + const left = pt(-diagonal, -diagonal).toPair() + const up = pt(diagonal, -diagonal).toPair() + const rightAgain = pt(diagonal, diagonal).toPair() + doc.lines([down, left, up, rightAgain], ...right, [1,1], 'DF', true) + }); + + if (cost !== undefined) { + doc::withGraphicsState(() => { + doc.setFontSize(12 * COST_SIZE); + doc.setTextColor('#000000'); + doc.text('' + cost, ...coinCenter.toPair(), { align: 'center', baseline: 'middle' }); + }); + } + } + // #important async renderRuleText(doc, ruleBox, rulesText = '', { insetTextBy = 2, @@ -1240,6 +1284,13 @@ ${smallElementIcon(others[2], lively.pt(11, 7))} `; } + function printVP(vp) { + return ` + +${vp} +`; + } + let printedRules = rulesText; printedRules = printedRules.replace(/t3x(fire|water|earth|wind|gray)/gmi, 'tap 3x$1'); printedRules = printedRules.replace(/(^|\n)tap 3x(fire|water|earth|wind|gray)([^\n]*)/gi, function replacer(match, p1, pElement, pText, offset, string, groups) { @@ -1259,6 +1310,9 @@ ${smallElementIcon(others[2], lively.pt(11, 7))} printedRules = printedRules.replace(/(fire|water|earth|wind|gray)/gmi, function replacer(match, pElement, offset, string, groups) { return element(pElement); }); + printedRules = printedRules.replace(/(\d+|\*|d+\*|\d+x|x)VP/gmi, function replacer(match, vp, offset, string, groups) { + return printVP(vp); + }); printedRules = printedRules.replace(/\(([*0-9x+-]*)\)/gmi, function replacer(match, p1, offset, string, groups) { return coin(p1); });