From 4866e3ab53a11af9917f5821dba0e3422e42ff21 Mon Sep 17 00:00:00 2001 From: onsetsu Date: Thu, 12 Sep 2024 22:52:19 +0200 Subject: [PATCH] highlight mandatory items, some more keywords SQUASHED: AUTO-COMMIT-demos-stefan-ila.md,AUTO-COMMIT-src-components-widgets-ubg-card.html,AUTO-COMMIT-src-components-widgets-ubg-card.js,AUTO-COMMIT-src-components-widgets-ubg-cards.js, --- demos/stefan/ila.md | 45 ++++++++++++++++++++++++++++ src/components/widgets/ubg-card.html | 43 ++++++++++++++++++++++++++ src/components/widgets/ubg-card.js | 22 ++++++++++++-- src/components/widgets/ubg-cards.js | 24 +++++++-------- 4 files changed, 117 insertions(+), 17 deletions(-) create mode 100644 demos/stefan/ila.md diff --git a/demos/stefan/ila.md b/demos/stefan/ila.md new file mode 100644 index 000000000..a37b2a689 --- /dev/null +++ b/demos/stefan/ila.md @@ -0,0 +1,45 @@ +# Implicit Layer Activation in ContextJS: A Toy Example #Bug + + + +```JavaScript {.testScript} +import * as cop from "src/client/ContextJS/src/contextjs.js"; + +let bool = false + +let l = cop.layer().refineObject({}, { + + // focus(...args) { + // lively.showElement(this) + // console.log("focus " + this, lively.stack()) + // return cop.proceed(...args) + // } + +}) + + +l.activeWhile(() => bool, aexpr) +l.onActivate(() => { + Object.assign(toggleButton.style, { + background: 'linear-gradient(#dc5f59, #b33630)', + color: 'white' + }) +}) +l.onDeactivate(() => { + Object.assign(toggleButton.style, { + background: 'linear-gradient(#00dd00, #00a000)', + color: 'white' + }) +}) + +const toggleButton = + +const group =
+ Toggle layer: {toggleButton} +
; + +group +``` diff --git a/src/components/widgets/ubg-card.html b/src/components/widgets/ubg-card.html index 7fb4f6bfe..5bd008832 100644 --- a/src/components/widgets/ubg-card.html +++ b/src/components/widgets/ubg-card.html @@ -48,6 +48,49 @@ font-size: 7pt; font-family: "Univers 55"; } + + #outerBox { + --mandatory-border-radius: 6px; + + --mandatory-background: #D2D2D2; + --mandatory-border: #727272; + + &.fire { + --mandatory-background: pink; + --mandatory-border: red; + } + &.water { + --mandatory-background: lightblue; + --mandatory-border: steelblue; + } + &.earth { + --mandatory-background: lightgoldenrodyellow; + --mandatory-border: darkgoldenrod; + } + &.wind { + --mandatory-background: lightgreen; + --mandatory-border: forestgreen; + } + &.fire.water, &.fire.earth, &.fire.wind, &.water.earth, &.water.wind, &.earth.wind { + --mandatory-background: plum; + --mandatory-border: purple; + } + } + .mandatory { + background: var(--mandatory-background); + padding: 0px 5px 0px 3px; + border: 1px var(--mandatory-border) solid; + border-left: none; + border-radius: 0px var(--mandatory-border-radius) var(--mandatory-border-radius) 0px; + } + .mandatory-icon::before { + content: '!'; + color: white; + background: var(--mandatory-border); + border: 1px var(--mandatory-border) solid; + border-radius: var(--mandatory-border-radius) 0px 0px var(--mandatory-border-radius); + padding: 0px 2px 0px 1.5px; + }
diff --git a/src/components/widgets/ubg-card.js b/src/components/widgets/ubg-card.js index 85896aa9d..ad4b5758c 100644 --- a/src/components/widgets/ubg-card.js +++ b/src/components/widgets/ubg-card.js @@ -608,6 +608,10 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1 return `
${innerText}
`; }); + printedRules = printedRules.replace(/!!(.*?)!!/gmi, function replacer(match, content) { + return `${content}`; + }); + printedRules = this.parseEffectsAndLists(printedRules); printedRules = this.renderReminderText(printedRules, cardEditor, cardDesc) @@ -680,7 +684,7 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1 printedRules = this.renderTapIcon(printedRules) printedRules = printedRules.replace(/\bgear\b/gmi, ''); - this.renderToDoc(cardEditor, outsideBorder, ruleBox, printedRules, options) + this.renderToDoc(cardEditor, outsideBorder, ruleBox, printedRules, options, cardDesc) } static renderXPerTurnOrGame(printedRules, cardEditor, cardDesc) { @@ -724,6 +728,10 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1 return 'You may play this when you perform the action.' }, + accelerate: (cost) => { + return `You may play or buy this as a card costing (${cost}). If you do, exec its accelerate effect, !!then trash it!!.)` + }, + affinity: (...args) => { let subject = 'This costs' if (args.includes('all')) { @@ -877,6 +885,10 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1 return `Passive As a free action, you may trash ${subject} to exec its blitz effects.` }, + impulse: () => { + return `To impulse a card, set it aside. You may buy it this turn as gear. If you don't: Trash it at end of turn.` + }, + instant: () => { return 'You may buy this as a free action.' }, @@ -1207,7 +1219,7 @@ ${textToPrint}`, undefined, undefined, 'transform:scale(1);'); }); } - static async renderToDoc(cardEditor, outsideBorder, ruleBox, printedRules, options) { + static async renderToDoc(cardEditor, outsideBorder, ruleBox, printedRules, options, cardDesc) { const { insetBoxBy = 1, insetTextBy = 1, @@ -1230,7 +1242,7 @@ ${textToPrint}`, undefined, undefined, 'transform:scale(1);'); 0 1px 0 #fff, 0 -1px 0 #fff;` - const outerBox =
; + + const cardElements = cardEditor.getElementsFromCard(cardDesc, false) + cardElements.forEach(element => outerBox.classList.add(element)) + cardEditor.content.append(outerBox) const ruleTextBox = ruleBox.insetBy(insetTextBy); diff --git a/src/components/widgets/ubg-cards.js b/src/components/widgets/ubg-cards.js index c53616c5e..07401d6b2 100644 --- a/src/components/widgets/ubg-cards.js +++ b/src/components/widgets/ubg-cards.js @@ -362,7 +362,7 @@ export default class Cards extends Morph { this.allEntries.forEach(entry => { entry.updateToRange(start, end); }); - this.updateStats() + this.scheduleUpdateStats() } functionForFilter(filter) { @@ -395,7 +395,7 @@ export default class Cards extends Morph { this.allEntries.forEach(entry => { entry.updateToFilter(filterFunction); }); - this.updateStats() + this.scheduleUpdateStats() } updateSelectedItemToFilterAndRange() { @@ -658,19 +658,19 @@ export default class Cards extends Morph { } } } - this.updateStats() + this.scheduleUpdateStats() this.selectCard(this.card || this.cards.first); } - updateStats() { + scheduleUpdateStats() { if (!this._debouncedUpdateStats) { - this._debouncedUpdateStats = _.debounce(() => this.updateStats2(), 300) + this._debouncedUpdateStats = _.debounce(() => this.updateStats(), 300) } this._debouncedUpdateStats() } - updateStats2() { + updateStats() { lively.notify('stats') const stats = this.get('#stats'); try { @@ -680,8 +680,11 @@ export default class Cards extends Morph { return this && typeof this.toLowerCase === 'function' && this.toLowerCase(); } - const data = 0 .to(11).map(mana => ({ mana, deck1: 0, deck2: 0, deck3: 0 })) const visibleCards = this.allEntries.filter(e => e.isVisible()).map(e => e.card) + + stats.append(
Number of cards: {visibleCards.length}
) + + const data = 0 .to(11).map(mana => ({ mana, deck1: 0, deck2: 0, deck3: 0 })) visibleCards.forEach(c => { let cost = c.getCost() if (cost === undefined || cost === null) { @@ -753,13 +756,6 @@ export default class Cards extends Morph { const bubbleChart =
; stats.append(bubbleChart) this.renderCostVPMatrix(bubbleChart, costVPMatrix); - return; - - const typeSplit = Object.entries(visibleCards.groupBy(c => c.getType()::lowerCase())).map(([type, cards]) =>
{type}: {cards.length}
); - - const elementSplit = Object.entries(this.cards.groupBy(c => c.getElement()::lowerCase())).map(([element, cards]) =>
{element}: {cards.length} ({cards.filter(c => c.getType()::lowerCase() === 'spell').length})
); - stats.append(
{...typeSplit}---{...elementSplit}
) - } catch (e) { stats.append(
{e}
) }