show tags in entry list of ubg

SQUASHED: AUTO-COMMIT-src-components-widgets-ubg-cards-editor.html,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,AUTO-COMMIT-src-components-widgets-ubg.css,AUTO-COMMIT-src-components-widgets-ubg-rules-text.js,

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

@@ -2,6 +2,7 @@
   <style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
   <style data-src="/templates/livelystyle.css"></style>
   <style data-src="/src/client/lively.css"></style>
+  <style data-src="/src/components/widgets/ubg.css"></style>
   <style>
     :host {
       background-color: white;
@@ -216,7 +217,9 @@
     #rating {
       height: 
     }
-
+    form#rating label {
+      text-decoration: underline var(--ubg-rating-color) 2px;
+    }
 
   </style>
     <div id='form-layout'>
@@ -247,21 +250,23 @@
       <span class='key' style='grid-area: rating-key;'>rating</span>
       <form id="rating" class='value' style='grid-area: rating-value;'>
         <input type="radio" id="choiceEssential" name="rating" value="essential" />
-        <label for="choiceEssential">essential</label>
+        <label for="choiceEssential" ubg-rating='essential'>essential</label>
         <input type="radio" id="choiceKeep" name="rating" value="keep" />
-        <label for="choiceKeep">keep</label>
+        <label for="choiceKeep" ubg-rating='keep'>keep</label>
+        <input type="radio" id="choiceBorderline" name="rating" value="borderline" />
+        <label for="choiceBorderline" ubg-rating='borderline'>borderline</label>
         <input type="radio" id="choiceUnsure" name="rating" value="unsure" />
-        <label for="choiceUnsure">unsure</label>
-        <input type="radio" id="choiceNeedsRevision" name="rating" value="needs revision" />
-        <label for="choiceNeedsRevision">needs revision</label>
+        <label for="choiceUnsure" ubg-rating='unsure'>unsure</label>
         <input type="radio" id="choiceRemove" name="rating" value="remove" />
-        <label for="choiceRemove">remove</label>
+        <label for="choiceRemove" ubg-rating='remove'>remove</label>
+        <input type="radio" id="choiceNeedsRevision" name="rating" value="needs revision" />
+        <label for="choiceNeedsRevision" ubg-rating='needs revision'>needs revision</label>
         <input type="radio" id="choiceTestNext" name="rating" value="test next" />
-        <label for="choiceTestNext">test next</label>
+        <label for="choiceTestNext" ubg-rating='test next'>test next</label>
         <input type="radio" id="choiceToTest" name="rating" value="to test" />
-        <label for="choiceToTest">to test</label>
+        <label for="choiceToTest" ubg-rating='to test'>to test</label>
         <input type="radio" id="choiceUnset" name="rating" value="unset" />
-        <label for="choiceUnset">unset</label>
+        <label for="choiceUnset" ubg-rating='unset'>unset</label>
       </form>
       <span class='key' style='grid-area: notes-key;'>notes</span>
       <textarea id='notes' class='value' style='grid-area: notes-value;'></textarea>

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

@@ -174,6 +174,15 @@
     #id {
       border-left: 5px solid var(--ubg-rating-color);
     }
+    #tags > * {
+      vertical-align: middle;
+      font-size: x-small;
+      background: #dddddd;
+      border-radius: 100px;
+      padding-left: .2em;
+      padding-right: .2em;
+      margin-right: .1em;
+    }
   </style>
   <div id="root">
     <div id="inner-background"></div>
@@ -183,6 +192,7 @@
     <span id='cost'></span>
     <span id='vp'></span>
     <span id='name'></span>
+    <span id='tags'></span>
     <span id='text'></span>
     <span id='art'></span>
     <button id="cancel" title="cancel editing"><i class="fa fa-floppy-o" aria-hidden="true"></i></button>

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

@@ -94,8 +94,10 @@ export default class UBGCardEntry extends Morph {
     this.get('#vp').innerHTML = card.getBaseVP() || '-';
 
     this.get('#name').innerHTML = card.versions.last.name || 'no name yet';
+    this.get('#tags').replaceChildren(...(card.versions.last.tags || []).map(tag => <span>{tag}</span>))
     this.get('#text').innerHTML = card.versions.last.text || 'no text';
     this.get('#art').innerHTML = card.getArtDirection() || '-';
+
   }
 
   isVisible() {

src/components/widgets/ubg-cards.js

@@ -1220,7 +1220,7 @@ export default class Cards extends Morph {
 
   /*MD ## Main Bar Buttons MD*/
   onOnlyGoodCards(evt) {
-    this.filter.value = `> ['essential', 'keep'].includes(c.getRating()) && !c.getTags().includes('expansion')`
+    this.filter.value = `> ['essential', 'keep', 'borderline'].includes(c.getRating()) && !c.getTags().includes('expansion')`
     this.filterChanged(evt)
   }
 

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

@@ -522,7 +522,7 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1
     printedRules = printedRules.replace(/combat/gmi, () => {
       return "<i class='fa fa-swords fa-flip-horizontal'></i>";
     });
-    printedRules = printedRules.replace(/!!(.*?)!!/gmi, function replacer(match, content) {
+    printedRules = printedRules.replace(/!!(.*?)!!/gmis, function replacer(match, content) {
       return `<span class='mandatory-icon'></span><span class='mandatory'>${content}</span>`;
     });
 
@@ -718,7 +718,7 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1
 
 
         discover: (howMany, howManyToChoose = 1) => {
-          return `To discover ${howMany}, reveal top ${howMany} cards of any piles. Choose ${howManyToChoose} of them, banish the rest.`
+          return `To discover ${howManyToChoose}/${howMany}, reveal top ${howMany} cards of any piles. Choose ${howManyToChoose} of them, banish the rest.`
         },
 
         emerge: (...args) => {
@@ -927,7 +927,7 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1
     function highlightKeyword(pattern, color, icon = '') {
       printedRules = printedRules.replace(pattern, (match, pElement, offset, string, groups) => {
         const text = match;
-        return `<span class='keyword' style='white-space: nowrap;${color ? `color: ${color};` : ''} color: ${color};'>${icon}${text}</span>`
+        return `<span class='keyword' style='white-space: nowrap;${color ? `color: ${color};` : ''} color: ${color};'><!--${icon}-->${text}</span>`
       });
     }
 
@@ -942,11 +942,12 @@ ${SVG.elementSymbol(others[2], lively.pt(12.5, 8.5), 1.5)}`, lively.rect(0, 0, 1
     highlightKeyword(/cycl(ed?|ing)\b/gmi, C_DARKGRAY);
     highlightKeyword(/dash(ed|ing)?\b/gmi, C_BROWN);
     highlightKeyword(/delirium:?\b/gmi, C_DARKGRAY);
-    highlightKeyword(/discover(ed)?\b/gmi, C_DARKGRAY); // '<i class="fa-regular fa-cards-blank"></i> '
+    highlightKeyword(/discover(ed)?\b/gmi, C_DARKGRAY, '<i class="fa-regular fa-cards-blank"></i> ');
     highlightKeyword(/\bemerge(\-buy)?\b/gmi);
     highlightKeyword(/\benhance\b/gmi);
     highlightKeyword(/\bevoke\b/gmi);
     highlightKeyword(/\bflashback\b/gmi);
+    highlightKeyword(/\bimpulse\b/gmi);
     highlightKeyword(/\binstant\b/gmi);
     highlightKeyword(/\binvoke\b/gmi);
     highlightKeyword(/magnetic\b/gmi, C_RED_LIGHT, '<i class="fa-solid fa-magnet"></i> ');

src/components/widgets/ubg.css

@@ -9,19 +9,22 @@
 [ubg-rating='keep'] {
   --ubg-rating-color: rgb(194, 243, 32);
 }
-[ubg-rating='unsure'] {
+[ubg-rating='borderline'] {
   --ubg-rating-color: yellow;
-  <!-- '#b2d63f' -->
 }
-[ubg-rating='needs revision'] {
+[ubg-rating='unsure'] {
   --ubg-rating-color: orange;
+/*    '#b2d63f'  */
 }
 [ubg-rating='remove'] {
   --ubg-rating-color: red;
 }
+[ubg-rating='needs revision'] {
+  --ubg-rating-color: mediumblue;
+}
 [ubg-rating='test next'] {
   --ubg-rating-color: violet;
 }
 [ubg-rating='to test'] {
   --ubg-rating-color: darkgray;
-}
+}