added cost modifier

SQUASHED: AUTO-COMMIT-demos-stefan-untitled-board-game-ubg-card.js,AUTO-COMMIT-src-components-widgets-ubg-card.js,AUTO-COMMIT-src-components-widgets-ubg-cards-editor.html,AUTO-COMMIT-src-components-widgets-ubg-cards-editor.js,AUTO-COMMIT-src-components-widgets-ubg-cards-entry.js,AUTO-COMMIT-src-components-widgets-ubg-rules-text.html,AUTO-COMMIT-src-components-widgets-ubg-rules-text.js,

demos/stefan/untitled-board-game/ubg-card.js

@@ -66,6 +66,20 @@ export default class Card {
     this.versions.last.cost = cost;
   }
 
+  getCostModifier() {
+    return this.versions.last.costModifier;
+  }
+
+  setCostModifier(costModifier) {
+    this.ensureUnprintedVersion();
+
+    if (!costModifier) {
+      delete this.versions.last.costModifier;
+    } else {
+      this.versions.last.costModifier = costModifier;
+    }
+  }
+
   getBaseVP() {
     return this.versions.last.baseVP;
   }

src/components/widgets/ubg-card.js

@@ -650,7 +650,11 @@ font-family: "${CSS_FONT_FAMILY_CARD_NAME}";
     const costSize = coinRadius / 3;
 
     const costDesc = cardDesc.getCost();
-    const cost = Array.isArray(costDesc) ? costDesc.first : costDesc;
+    let cost = Array.isArray(costDesc) ? costDesc.first : costDesc;
+    const costModifierDesc = cardDesc.getCostModifier();
+    if (costModifierDesc) {
+      cost += costModifierDesc
+    }
 
     const coinCenter = pos;
     const strokeWidth = .2 * costSize;
@@ -780,9 +784,10 @@ backdrop-filter: blur(4px);
   }
 
   addTextToRuleBox(cardDesc, ruleTextBoxElement) {
-    const rulesText = document.createElement('ubg-rules-text')
-    ruleTextBoxElement.append(rulesText)
-    rulesText.applyRulesText(cardDesc)
+    const elements = this.getElementsFromCard(cardDesc, false)
+    const rules = cardDesc.getText() || '';
+    const htmlString = `<ubg-rules-text class="${elements.join(' ')}">${rules}</ubg-rules-text>`;
+    ruleTextBoxElement.insertAdjacentHTML('beforeend', htmlString);
   }
 
   renderType(cardDesc, anchorPt, color, opacity) {

src/components/widgets/ubg-cards-editor.html

@@ -127,22 +127,22 @@
 
     #form-layout {
       display: grid;
-      grid-template-columns: min-content auto 2.5in;
+      grid-template-columns: min-content auto min-content auto 2.5in;
       grid-template-rows: repeat(8, auto) 1fr auto auto .33fr auto;
       grid-template-areas:
-        "isPrinted-key isPrinted-value preview"
-        "id-key id-value preview"
-        "name-key name-value preview"
-        "identity-key identity-value preview"
-        "type-key type-value preview"
-        "element-key element-value preview"
-        "cost-key cost-value preview"
-        "vp-key vp-value preview"
-        "text-key text-value preview"
-        "tags-key tags-value preview"
-        "rating-key rating-value preview"
-        "notes-key notes-value preview"
-        "art-key art-value preview"
+        "isPrinted-key isPrinted-value isPrinted-value isPrinted-value preview"
+        "id-key id-value id-value id-value preview"
+        "name-key name-value name-value name-value preview"
+        "identity-key identity-value identity-value identity-value preview"
+        "type-key type-value type-value type-value preview"
+        "element-key element-value element-value element-value preview"
+        "cost-key cost-value cost-modifier-key cost-modifier-value preview"
+        "vp-key vp-value vp-value vp-value preview"
+        "text-key text-value text-value text-value preview"
+        "tags-key tags-value tags-value tags-value preview"
+        "rating-key rating-value rating-value rating-value preview"
+        "notes-key notes-value notes-value notes-value preview"
+        "art-key art-value art-value art-value preview"
         ;
       column-gap: 2px;
       row-gap: 2px;
@@ -234,6 +234,8 @@
       <input id='element' class='value' style='grid-area: element-value;' />
       <span class='key' style='grid-area: cost-key;'>cost</span>
       <input id='cost' class='value' style='grid-area: cost-value;' />
+      <span class='key' style='grid-area: cost-modifier-key;'>cost modifier</span>
+      <input id='cost-modifier' class='value' style='grid-area: cost-modifier-value;' />
       <span class='key' style='grid-area: vp-key;'>base vp</span>
       <input id='vp' class='value' style='grid-area: vp-value;' />
       <span class='key' style='grid-area: text-key;'>text</span>

src/components/widgets/ubg-cards-editor.js

@@ -22,6 +22,7 @@ export default class UBGCardsEditor extends Morph {
       this.$type.addEventListener(eventName, evt => this.modify$type(evt), false);
       this.$element.addEventListener(eventName, evt => this.modify$element(evt), false);
       this.$cost.addEventListener(eventName, evt => this.modify$cost(evt), false);
+      this.$costModifier.addEventListener(eventName, evt => this.modify$costModifier(evt), false);
       this.$vp.addEventListener(eventName, evt => this.modify$vp(evt), false);
       this.$text.addEventListener(eventName, evt => this.modify$text(evt), false);
       this.$notes.addEventListener(eventName, evt => this.modify$notes(evt), false);
@@ -115,6 +116,9 @@ export default class UBGCardsEditor extends Morph {
   get $cost() {
     return this.get('#cost');
   }
+  get $costModifier() {
+    return this.get('#cost-modifier');
+  }
   get $vp() {
     return this.get('#vp');
   }
@@ -276,6 +280,28 @@ export default class UBGCardsEditor extends Morph {
     this.$cost.value = cost;
   }
 
+  modify$costModifier(evt) {
+    const costModifier = this.$costModifier.value;
+
+    if (costModifier === '') {
+      this.card.setCostModifier();
+    } else {
+      this.card.setCostModifier(costModifier);
+    }
+
+    this.propagateChange()
+  }
+  display$costModifier() {
+    const costModifier = this.card.getCostModifier();
+
+    if (costModifier === undefined) {
+      this.$costModifier.value = '';
+      return;
+    }
+
+    this.$costModifier.value = costModifier;
+  }
+
   modify$vp(evt) {
     const vp = this.$vp.value;
 
@@ -507,6 +533,7 @@ export default class UBGCardsEditor extends Morph {
     this.display$type();
     this.display$element();
     this.display$cost();
+    this.display$costModifier();
     this.display$vp();
     this.display$text();
     this.display$tags();

src/components/widgets/ubg-cards-entry.js

@@ -90,7 +90,7 @@ export default class UBGCardEntry extends Morph {
 
     this.renderElement(v);
 
-    this.get('#cost').innerHTML = v.cost || '/';
+    this.get('#cost').innerHTML = ((v.cost === undefined ? '' : v.cost) + (v.costModifier || '')) || '/';
     this.get('#vp').innerHTML = card.getBaseVP() || '-';
 
     this.get('#name').innerHTML = card.versions.last.name || 'no name yet';

src/components/widgets/ubg-rules-text.html

@@ -5,35 +5,40 @@
 <style data-src="https://lively-kernel.org/lively4/ubg-assets/fonts/runeterra/css/runeterra.css"></style>
 <style>
   :host {
-  }
-
-  #content {
+    display: inline-block;
+
     --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;
-    }
+  :host(.fire) {
+    --mandatory-background: pink;
+    --mandatory-border: red;
+  }
+  :host(.water) {
+    --mandatory-background: lightblue;
+    --mandatory-border: steelblue;
   }
+  :host(.earth) {
+    --mandatory-background: lightgoldenrodyellow;
+    --mandatory-border: darkgoldenrod;
+  }
+  :host(.wind) {
+    --mandatory-background: lightgreen;
+    --mandatory-border: forestgreen;
+  }
+  :host(.fire.water),
+  :host(.fire.earth),
+  :host(.fire.wind),
+  :host(.water.earth),
+  :host(.water.wind),
+  :host(.earth.wind) {
+    --mandatory-background: plum;
+    --mandatory-border: purple;
+  }
+
   .mandatory {
     background: var(--mandatory-background);
     padding: 0px 5px 0px 3px;