contextjs example and ubg print playtest cards

SQUASHED: AUTO-COMMIT-demos-contextjs-showfocuslayer.md,AUTO-COMMIT-demos-stefan-untitled-board-game-ubg-cards-exporter.js,AUTO-COMMIT-src-client-vivide-vivide.js,AUTO-COMMIT-src-client-vivide-Vivide.png,AUTO-COMMIT-src-components-widgets-ubg-cards.html,AUTO-COMMIT-src-components-widgets-ubg-cards.js,

demos/contextjs/showfocuslayer.md

@@ -1,8 +1,11 @@
-# ShowFocus Layer
+# ContextJS in Action: ShowFocus Layer
 
-And I wrote it again.... Because I did not look for <edit://demos/contextjs/showfocuslayer.js>  first
+<script>
+  import {autoRunSnippet} from "src/client/essay.js"; 
+  autoRunSnippet(this, ".testScript")
+</script>
 
-```js
+```JavaScript {.testScript}
 import * as cop  from "src/client/ContextJS/src/contextjs.js";
 
 cop.layer(window, "ShowFocus").refineClass(HTMLElement, {
@@ -15,7 +18,13 @@ cop.layer(window, "ShowFocus").refineClass(HTMLElement, {
 
 })
 
-ShowFocus.beGlobal()
+const group = <div>
+  Click the buttons to activate the layer globally.<br/>
+  While active, the layer visually shows which HTMLElements get focussed.
+  <button click={evt => ShowFocus.beGlobal()}>Make Global</button>
+  <button click={evt => ShowFocus.beNotGlobal()}>Undo Global</button>
+  Done using the following code:
+</div>;
 
-ShowFocus.beNotGlobal()
-```
+group
+```

demos/stefan/untitled-board-game/ubg-cards-exporter.js

@@ -25,6 +25,14 @@ export default class CardExporter {
       }
       document.title = `cards-${moment().format('YYYY-MM-DD-HH-mm-ss')}`
 
+
+      lively.removeEventListener('cards-printer')
+      lively.addEventListener('cards-printer', window, 'beforeprint', evt => {
+        console.log('bPrint')
+      })
+      lively.addEventListener('cards-printer', window, 'afterprint', evt => {
+        console.log('aPrint')
+      })
       await lively.sleep(1000)
       window.print()
       await lively.sleep(1000)

src/client/vivide/vivide.js

@@ -1,4 +1,6 @@
-
+/*MD # Vivide
+![Vivide](./Vivide.png)
+MD*/
 /**
  * The high level entry point to vivide
  * call at least with some data as Array as argument

src/components/widgets/ubg-cards.html

@@ -159,6 +159,8 @@
     <div id="buttons">
       <input id="filter"  title="Ctrl+/" placeholder="filter: regex fire\b or > c.getId() > 1000"/>
       <button id="onlyGoodCards" title="adjust filter to only the best cards"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i></button>
+      <button id="onlyCardsToTest" title="adjust filter to only cards to test"><i class="fa fa-comments-o" aria-hidden="true"></i></button>
+      <button id="onlyNewCards" title="adjust filter to only new cards"><i class="fa fa-plus-square-o" aria-hidden="true"></i></button>
       <button id="startCardScanner" title="start scanning playtested cards"><i class="fa fa-barcode" aria-hidden="true"></i></button>
       <button id="sortById" title="sort cards by id"><i class="fa fa-sort" aria-hidden="true"></i>by id</button>
       <button id="sortByName" title="sort cards by name"><i class="fa fa-sort" aria-hidden="true"></i>by name</button>

src/components/widgets/ubg-cards.js

@@ -1175,6 +1175,15 @@ export default class Cards extends Morph {
     this.filterChanged(evt)
   }
 
+  onOnlyCardsToTest(evt) {
+    this.filter.value = `> !c.getRating() || c.getRating() === 'to test'`
+    this.filterChanged(evt)
+  }
+
+  onOnlyNewCards(evt) {
+    this.filter.value = `> !c.getRating()`
+    this.filterChanged(evt)
+  }
   onStartCardScanner(evt) {
     lively.openComponentInWindow('ubg-cards-scanner', undefined, lively.pt(1000, 800))
   }