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

@@ -0,0 +1,45 @@
+# Implicit Layer Activation in ContextJS: A Toy Example #Bug
+
+<script>
+  import {autoRunSnippet} from "src/client/essay.js"; 
+  autoRunSnippet(this, ".testScript")
+</script>
+
+```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 = <button click={evt => bool = !bool}>Toggle</button>
+
+const group = <div>
+      Toggle layer: {toggleButton}
+</div>;
+
+group
+```

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;
+  }
 </style>
   <div id='bg'>
   </div>

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 `<div style='background: repeating-linear-gradient( -45deg, transparent, transparent 5px, ${AFFECT_ALL_COLOR} 5px, ${AFFECT_ALL_COLOR} 10px ); border: 1px solid ${AFFECT_ALL_COLOR};'>${innerText}</div>`;
     });
 
+    printedRules = printedRules.replace(/!!(.*?)!!/gmi, function replacer(match, content) {
+      return `<span class='mandatory-icon'></span><span class='mandatory'>${content}</span>`;
+    });
+
     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, '<i class="fa-solid fa-gear"></i>');
 
-    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 = <div style={`
+    const outerBox = <div id='outerBox' style={`
 border-top: solid 1mm ${outerStrokeColor};
 background: ${cardEditor.colorWithOpacity(outerFillColor, outerFillOpacity)};
 
@@ -1239,6 +1251,10 @@ left: 0;
 right: 0;
 bottom: 0;
 `}></div>;
+
+    const cardElements = cardEditor.getElementsFromCard(cardDesc, false)
+    cardElements.forEach(element => outerBox.classList.add(element))
+
     cardEditor.content.append(outerBox)
 
     const ruleTextBox = ruleBox.insetBy(insetTextBy);

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(<div>Number of cards: {visibleCards.length}</div>)
+
+      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 = <div id="bubble-chart"></div>;
       stats.append(bubbleChart)
       this.renderCostVPMatrix(bubbleChart, costVPMatrix);
-      return;
-
-      const typeSplit = Object.entries(visibleCards.groupBy(c => c.getType()::lowerCase())).map(([type, cards]) => <div>{type}: {cards.length}</div>);
-
-      const elementSplit = Object.entries(this.cards.groupBy(c => c.getElement()::lowerCase())).map(([element, cards]) => <div style={`color: ${forElement(element).stroke}`}>{element}: {cards.length} ({cards.filter(c => c.getType()::lowerCase() === 'spell').length})</div>);
-      stats.append(<div>{...typeSplit}---{...elementSplit}</div>)
-
     } catch (e) {
       stats.append(<div style='color: red;'>{e}</div>)
     }