Archives
/
spiel
mirror of https://github.com/JoshKarpel/spiel
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Document slide content rendering and triggers (#188)

Browse Source
pull/190/head
Josh Karpel 1 year ago committed by GitHub
parent c91216c621
commit 6b71ee7f93
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 1752 additions and 82 deletions
Show Stats Download Patch File Download Diff File

7
README.md
Unescape Escape View File

@ -11,7 +11,8 @@
[![GitHub issues](https://img.shields.io/github/issues/JoshKarpel/spiel)](https://github.com/JoshKarpel/spiel/issues)
[![GitHub pull requests](https://img.shields.io/github/issues-pr/JoshKarpel/spiel)](https://github.com/JoshKarpel/spiel/pulls)
Spiel is a framework for building and presenting [richly-styled](https://github.com/Textualize/rich) presentations in your terminal using Python.
[Spiel](https://dictionary.cambridge.org/us/dictionary/english/spiel) is a framework for building and presenting
[richly-styled](https://github.com/Textualize/rich) presentations in your terminal using Python.
To see what Spiel can do without installing it, you can view the demonstration deck in a container:
```bash
@ -59,3 +60,7 @@ Check out the [Quick Start tutorial](https://www.spiel.how/quickstart) to contin
## Documentation
To learn more about Spiel, take a look at the [documentation](https://www.spiel.how).
## Contributing
If you're interested in contributing to Spiel, check out the [Contributing Guide](https://www.spiel.how/contributing/).

86
docs/assets/quickstart_basic.svg
Unescape Escape View File

@ -1,4 +1,4 @@
<svg class="rich-terminal" viewBox="0 0 750 538.0" xmlns="http://www.w3.org/2000/svg">
<svg class="rich-terminal" viewBox="0 0 872 538.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@ -40,68 +40,68 @@
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="731.0" height="487.0" />
<rect x="0" y="0" width="853.0" height="487.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="732" height="24.65"/>
<rect x="0" y="1.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="732" height="24.65"/>
<rect x="0" y="25.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="732" height="24.65"/>
<rect x="0" y="50.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="732" height="24.65"/>
<rect x="0" y="74.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="732" height="24.65"/>
<rect x="0" y="99.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="732" height="24.65"/>
<rect x="0" y="123.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="732" height="24.65"/>
<rect x="0" y="147.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="732" height="24.65"/>
<rect x="0" y="172.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="732" height="24.65"/>
<rect x="0" y="196.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="732" height="24.65"/>
<rect x="0" y="221.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="732" height="24.65"/>
<rect x="0" y="245.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="732" height="24.65"/>
<rect x="0" y="269.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="732" height="24.65"/>
<rect x="0" y="294.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="732" height="24.65"/>
<rect x="0" y="318.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-14">
<rect x="0" y="343.1" width="732" height="24.65"/>
<rect x="0" y="343.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-15">
<rect x="0" y="367.5" width="732" height="24.65"/>
<rect x="0" y="367.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-16">
<rect x="0" y="391.9" width="732" height="24.65"/>
<rect x="0" y="391.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-17">
<rect x="0" y="416.3" width="732" height="24.65"/>
<rect x="0" y="416.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-18">
<rect x="0" y="440.7" width="732" height="24.65"/>
<rect x="0" y="440.7" width="854" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="748" height="536" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="374" y="27">Your&#160;Deck&#160;Name</text>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="870" height="536" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="435" y="27">Your&#160;Deck&#160;Name</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
@ -109,28 +109,28 @@
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="219.6" y="1.5" width="512.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="378.2" y="465.1" width="353.8" height="24.65" shape-rendering="crispEdges"/>
<rect fill="#1e1e1e" x="0" y="1.5" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="219.6" y="1.5" width="634.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="439.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="439.2" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="463.6" y="465.1" width="390.4" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r1" x="0" y="20" textLength="219.6" clip-path="url(#spieldocs-line-0)">Your&#160;content&#160;here!</text><text class="spieldocs-r2" x="732" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r2" x="732" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r2" x="732" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r2" x="732" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r2" x="732" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r2" x="732" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r2" x="732" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r2" x="732" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r2" x="732" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r2" x="732" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r2" x="732" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r2" x="732" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r2" x="732" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r2" x="732" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r2" x="732" y="361.6" textLength="12.2" clip-path="url(#spieldocs-line-14)">
</text><text class="spieldocs-r2" x="732" y="386" textLength="12.2" clip-path="url(#spieldocs-line-15)">
</text><text class="spieldocs-r2" x="732" y="410.4" textLength="12.2" clip-path="url(#spieldocs-line-16)">
</text><text class="spieldocs-r2" x="732" y="434.8" textLength="12.2" clip-path="url(#spieldocs-line-17)">
</text><text class="spieldocs-r3" x="0" y="459.2" textLength="732" clip-path="url(#spieldocs-line-18)">────────────────────────────────────────────────────────────</text><text class="spieldocs-r2" x="732" y="459.2" textLength="12.2" clip-path="url(#spieldocs-line-18)">
</text><text class="spieldocs-r3" x="0" y="483.6" textLength="366" clip-path="url(#spieldocs-line-19)">Your&#160;Deck&#160;Name&#160;|&#160;Slide&#160;1&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r3" x="378.2" y="483.6" textLength="353.8" clip-path="url(#spieldocs-line-19)">2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[1&#160;/&#160;1]</text>
<text class="spieldocs-r1" x="0" y="20" textLength="219.6" clip-path="url(#spieldocs-line-0)">Your&#160;content&#160;here!</text><text class="spieldocs-r2" x="854" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r2" x="854" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r2" x="854" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r2" x="854" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r2" x="854" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r2" x="854" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r2" x="854" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r2" x="854" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r2" x="854" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r2" x="854" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r2" x="854" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r2" x="854" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r2" x="854" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r2" x="854" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r2" x="854" y="361.6" textLength="12.2" clip-path="url(#spieldocs-line-14)">
</text><text class="spieldocs-r2" x="854" y="386" textLength="12.2" clip-path="url(#spieldocs-line-15)">
</text><text class="spieldocs-r2" x="854" y="410.4" textLength="12.2" clip-path="url(#spieldocs-line-16)">
</text><text class="spieldocs-r2" x="854" y="434.8" textLength="12.2" clip-path="url(#spieldocs-line-17)">
</text><text class="spieldocs-r3" x="0" y="459.2" textLength="854" clip-path="url(#spieldocs-line-18)">──────────────────────────────────────────────────────────────────────</text><text class="spieldocs-r2" x="854" y="459.2" textLength="12.2" clip-path="url(#spieldocs-line-18)">
</text><text class="spieldocs-r3" x="0" y="483.6" textLength="439.2" clip-path="url(#spieldocs-line-19)">Your&#160;Deck&#160;Name&#160;|&#160;Slide&#160;1&#160;Title&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r3" x="463.6" y="483.6" textLength="390.4" clip-path="url(#spieldocs-line-19)">&#160;&#160;&#160;2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[1&#160;/&#160;1]</text>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

117
docs/assets/slide_loop_1.svg
Unescape Escape View File

@ -0,0 +1,117 @@
<svg class="rich-terminal" viewBox="0 0 750 416.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.spieldocs-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
.spieldocs-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.spieldocs-r1 { fill: #e1e1e1 }
.spieldocs-r2 { fill: #c5c8c6 }
.spieldocs-r3 { fill: #608ab1 }
.spieldocs-r4 { fill: #939393 }
.spieldocs-r5 { fill: #e1e1e1;font-weight: bold }
</style>
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="731.0" height="365.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="732" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="748" height="414" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="374" y="27">Deck&#160;Name</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="147.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="378.2" y="147.9" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="329.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="329.4" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="353.8" y="343.1" width="378.2" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r2" x="732" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r2" x="732" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r2" x="732" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r2" x="732" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r2" x="732" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r2" x="732" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r3" x="341.6" y="166.4" textLength="36.6" clip-path="url(#spieldocs-line-6)">Foo</text><text class="spieldocs-r2" x="732" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r2" x="732" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r2" x="732" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r2" x="732" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r2" x="732" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r2" x="732" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r2" x="732" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r4" x="0" y="337.2" textLength="732" clip-path="url(#spieldocs-line-13)">────────────────────────────────────────────────────────────</text><text class="spieldocs-r2" x="732" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r4" x="0" y="361.6" textLength="329.4" clip-path="url(#spieldocs-line-14)">Deck&#160;Name&#160;|&#160;First&#160;Slide&#160;&#160;&#160;&#160;</text><text class="spieldocs-r4" x="353.8" y="361.6" textLength="378.2" clip-path="url(#spieldocs-line-14)">&#160;&#160;2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[1&#160;/&#160;3]</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

117
docs/assets/slide_loop_2.svg
Unescape Escape View File

@ -0,0 +1,117 @@
<svg class="rich-terminal" viewBox="0 0 750 416.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.spieldocs-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
.spieldocs-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.spieldocs-r1 { fill: #e1e1e1 }
.spieldocs-r2 { fill: #c5c8c6 }
.spieldocs-r3 { fill: #cc555a }
.spieldocs-r4 { fill: #939393 }
.spieldocs-r5 { fill: #e1e1e1;font-weight: bold }
</style>
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="731.0" height="365.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="732" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="748" height="414" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="374" y="27">Deck&#160;Name</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="147.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="378.2" y="147.9" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="366" y="343.1" width="366" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r2" x="732" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r2" x="732" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r2" x="732" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r2" x="732" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r2" x="732" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r2" x="732" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r3" x="341.6" y="166.4" textLength="36.6" clip-path="url(#spieldocs-line-6)">Bar</text><text class="spieldocs-r2" x="732" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r2" x="732" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r2" x="732" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r2" x="732" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r2" x="732" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r2" x="732" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r2" x="732" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r4" x="0" y="337.2" textLength="732" clip-path="url(#spieldocs-line-13)">────────────────────────────────────────────────────────────</text><text class="spieldocs-r2" x="732" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r4" x="0" y="361.6" textLength="341.6" clip-path="url(#spieldocs-line-14)">Deck&#160;Name&#160;|&#160;Second&#160;Slide&#160;&#160;&#160;&#160;</text><text class="spieldocs-r4" x="366" y="361.6" textLength="366" clip-path="url(#spieldocs-line-14)">&#160;2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[2&#160;/&#160;3]</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

117
docs/assets/slide_loop_3.svg
Unescape Escape View File

@ -0,0 +1,117 @@
<svg class="rich-terminal" viewBox="0 0 750 416.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.spieldocs-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
.spieldocs-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.spieldocs-r1 { fill: #e1e1e1 }
.spieldocs-r2 { fill: #c5c8c6 }
.spieldocs-r3 { fill: #98a84b }
.spieldocs-r4 { fill: #939393 }
.spieldocs-r5 { fill: #e1e1e1;font-weight: bold }
</style>
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="731.0" height="365.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="732" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="748" height="414" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="374" y="27">Deck&#160;Name</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="341.6" y="147.9" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="378.2" y="147.9" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="329.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="329.4" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="353.8" y="343.1" width="378.2" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r2" x="732" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r2" x="732" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r2" x="732" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r2" x="732" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r2" x="732" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r2" x="732" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r3" x="341.6" y="166.4" textLength="36.6" clip-path="url(#spieldocs-line-6)">Baz</text><text class="spieldocs-r2" x="732" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r2" x="732" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r2" x="732" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r2" x="732" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r2" x="732" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r2" x="732" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r2" x="732" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r4" x="0" y="337.2" textLength="732" clip-path="url(#spieldocs-line-13)">────────────────────────────────────────────────────────────</text><text class="spieldocs-r2" x="732" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r4" x="0" y="361.6" textLength="329.4" clip-path="url(#spieldocs-line-14)">Deck&#160;Name&#160;|&#160;Third&#160;Slide&#160;&#160;&#160;&#160;</text><text class="spieldocs-r4" x="353.8" y="361.6" textLength="378.2" clip-path="url(#spieldocs-line-14)">&#160;&#160;2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[3&#160;/&#160;3]</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

119
docs/assets/slide_via_decorator.svg
Unescape Escape View File

@ -0,0 +1,119 @@
<svg class="rich-terminal" viewBox="0 0 750 416.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.spieldocs-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
.spieldocs-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.spieldocs-r1 { fill: #e1e1e1 }
.spieldocs-r2 { fill: #c5c8c6 }
.spieldocs-r3 { fill: #608ab1 }
.spieldocs-r4 { fill: #cc555a;text-decoration: underline; }
.spieldocs-r5 { fill: #98a84b;font-style: italic; }
.spieldocs-r6 { fill: #939393 }
.spieldocs-r7 { fill: #e1e1e1;font-weight: bold }
</style>
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="731.0" height="365.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="732" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="732" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="748" height="414" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="374" y="27">Deck&#160;Name</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="256.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="256.2" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="305" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="317.2" y="147.9" width="85.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="402.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="414.8" y="147.9" width="48.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="463.6" y="147.9" width="268.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="732" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="329.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="329.4" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="353.8" y="343.1" width="378.2" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r2" x="732" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r2" x="732" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r2" x="732" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r2" x="732" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r2" x="732" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r2" x="732" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r3" x="256.2" y="166.4" textLength="48.8" clip-path="url(#spieldocs-line-6)">Your</text><text class="spieldocs-r4" x="317.2" y="166.4" textLength="85.4" clip-path="url(#spieldocs-line-6)">content</text><text class="spieldocs-r5" x="414.8" y="166.4" textLength="48.8" clip-path="url(#spieldocs-line-6)">here</text><text class="spieldocs-r1" x="463.6" y="166.4" textLength="268.4" clip-path="url(#spieldocs-line-6)">!&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="732" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r2" x="732" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r2" x="732" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r2" x="732" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r2" x="732" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r2" x="732" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r2" x="732" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r6" x="0" y="337.2" textLength="732" clip-path="url(#spieldocs-line-13)">────────────────────────────────────────────────────────────</text><text class="spieldocs-r2" x="732" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r6" x="0" y="361.6" textLength="329.4" clip-path="url(#spieldocs-line-14)">Deck&#160;Name&#160;|&#160;Slide&#160;Title&#160;&#160;&#160;&#160;</text><text class="spieldocs-r6" x="353.8" y="361.6" textLength="378.2" clip-path="url(#spieldocs-line-14)">&#160;&#160;2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[1&#160;/&#160;1]</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

116
docs/assets/triggers_animation_1.svg
Unescape Escape View File

@ -0,0 +1,116 @@
<svg class="rich-terminal" viewBox="0 0 872 416.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.spieldocs-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
.spieldocs-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.spieldocs-r1 { fill: #e1e1e1 }
.spieldocs-r2 { fill: #c5c8c6 }
.spieldocs-r3 { fill: #939393 }
.spieldocs-r4 { fill: #e1e1e1;font-weight: bold }
</style>
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="853.0" height="365.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="854" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="870" height="414" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="435" y="27">Trigger&#160;Examples</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="475.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="475.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="500.2" y="343.1" width="353.8" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r2" x="854" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r2" x="854" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r2" x="854" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r2" x="854" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r1" x="0" y="117.6" textLength="854" clip-path="url(#spieldocs-line-4)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;spaces_before_bang=0&#160;|&#160;spaces_after_bang=5&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r1" x="0" y="142" textLength="854" clip-path="url(#spieldocs-line-5)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;╭────────╮&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r1" x="0" y="166.4" textLength="854" clip-path="url(#spieldocs-line-6)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;│&#160;!&#160;&#160;&#160;&#160;&#160;&#160;│&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r1" x="0" y="190.8" textLength="854" clip-path="url(#spieldocs-line-7)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;╰────────╯&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r2" x="854" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r2" x="854" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r2" x="854" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r2" x="854" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r2" x="854" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r3" x="0" y="337.2" textLength="854" clip-path="url(#spieldocs-line-13)">──────────────────────────────────────────────────────────────────────</text><text class="spieldocs-r2" x="854" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r3" x="0" y="361.6" textLength="475.8" clip-path="url(#spieldocs-line-14)">Trigger&#160;Examples&#160;|&#160;Animating&#160;Content&#160;&#160;&#160;</text><text class="spieldocs-r3" x="500.2" y="361.6" textLength="353.8" clip-path="url(#spieldocs-line-14)">2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[1&#160;/&#160;1]</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

116
docs/assets/triggers_animation_2.svg
Unescape Escape View File

@ -0,0 +1,116 @@
<svg class="rich-terminal" viewBox="0 0 872 416.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.spieldocs-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
.spieldocs-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.spieldocs-r1 { fill: #e1e1e1 }
.spieldocs-r2 { fill: #c5c8c6 }
.spieldocs-r3 { fill: #939393 }
.spieldocs-r4 { fill: #e1e1e1;font-weight: bold }
</style>
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="853.0" height="365.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="854" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="870" height="414" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="435" y="27">Trigger&#160;Examples</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="475.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="475.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="500.2" y="343.1" width="353.8" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r2" x="854" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r2" x="854" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r2" x="854" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r2" x="854" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r1" x="0" y="117.6" textLength="854" clip-path="url(#spieldocs-line-4)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;spaces_before_bang=1&#160;|&#160;spaces_after_bang=4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r1" x="0" y="142" textLength="854" clip-path="url(#spieldocs-line-5)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;╭────────╮&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r1" x="0" y="166.4" textLength="854" clip-path="url(#spieldocs-line-6)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;│&#160;&#160;!&#160;&#160;&#160;&#160;&#160;│&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r1" x="0" y="190.8" textLength="854" clip-path="url(#spieldocs-line-7)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;╰────────╯&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r2" x="854" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r2" x="854" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r2" x="854" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r2" x="854" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r2" x="854" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r3" x="0" y="337.2" textLength="854" clip-path="url(#spieldocs-line-13)">──────────────────────────────────────────────────────────────────────</text><text class="spieldocs-r2" x="854" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r3" x="0" y="361.6" textLength="475.8" clip-path="url(#spieldocs-line-14)">Trigger&#160;Examples&#160;|&#160;Animating&#160;Content&#160;&#160;&#160;</text><text class="spieldocs-r3" x="500.2" y="361.6" textLength="353.8" clip-path="url(#spieldocs-line-14)">2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[1&#160;/&#160;1]</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

116
docs/assets/triggers_animation_3.svg
Unescape Escape View File

@ -0,0 +1,116 @@
<svg class="rich-terminal" viewBox="0 0 872 416.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.spieldocs-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
.spieldocs-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.spieldocs-r1 { fill: #e1e1e1 }
.spieldocs-r2 { fill: #c5c8c6 }
.spieldocs-r3 { fill: #939393 }
.spieldocs-r4 { fill: #e1e1e1;font-weight: bold }
</style>
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="853.0" height="365.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="854" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="870" height="414" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="435" y="27">Trigger&#160;Examples</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="475.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="475.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="500.2" y="343.1" width="353.8" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r2" x="854" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r2" x="854" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r2" x="854" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r2" x="854" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r1" x="0" y="117.6" textLength="854" clip-path="url(#spieldocs-line-4)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;spaces_before_bang=3&#160;|&#160;spaces_after_bang=2&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r1" x="0" y="142" textLength="854" clip-path="url(#spieldocs-line-5)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;╭────────╮&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r1" x="0" y="166.4" textLength="854" clip-path="url(#spieldocs-line-6)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;│&#160;&#160;&#160;&#160;!&#160;&#160;&#160;│&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r1" x="0" y="190.8" textLength="854" clip-path="url(#spieldocs-line-7)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;╰────────╯&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r2" x="854" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r2" x="854" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r2" x="854" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r2" x="854" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r2" x="854" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r3" x="0" y="337.2" textLength="854" clip-path="url(#spieldocs-line-13)">──────────────────────────────────────────────────────────────────────</text><text class="spieldocs-r2" x="854" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r3" x="0" y="361.6" textLength="475.8" clip-path="url(#spieldocs-line-14)">Trigger&#160;Examples&#160;|&#160;Animating&#160;Content&#160;&#160;&#160;</text><text class="spieldocs-r3" x="500.2" y="361.6" textLength="353.8" clip-path="url(#spieldocs-line-14)">2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[1&#160;/&#160;1]</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

116
docs/assets/triggers_animation_4.svg
Unescape Escape View File

@ -0,0 +1,116 @@
<svg class="rich-terminal" viewBox="0 0 872 416.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.spieldocs-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
.spieldocs-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.spieldocs-r1 { fill: #e1e1e1 }
.spieldocs-r2 { fill: #c5c8c6 }
.spieldocs-r3 { fill: #939393 }
.spieldocs-r4 { fill: #e1e1e1;font-weight: bold }
</style>
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="853.0" height="365.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="854" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="870" height="414" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="435" y="27">Trigger&#160;Examples</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="475.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="475.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="500.2" y="343.1" width="353.8" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r2" x="854" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r2" x="854" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r2" x="854" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r2" x="854" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r1" x="0" y="117.6" textLength="854" clip-path="url(#spieldocs-line-4)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;spaces_before_bang=5&#160;|&#160;spaces_after_bang=0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r1" x="0" y="142" textLength="854" clip-path="url(#spieldocs-line-5)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;╭────────╮&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r1" x="0" y="166.4" textLength="854" clip-path="url(#spieldocs-line-6)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;│&#160;&#160;&#160;&#160;&#160;&#160;!&#160;│&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r1" x="0" y="190.8" textLength="854" clip-path="url(#spieldocs-line-7)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;╰────────╯&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r2" x="854" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r2" x="854" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r2" x="854" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r2" x="854" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r2" x="854" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r2" x="854" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r3" x="0" y="337.2" textLength="854" clip-path="url(#spieldocs-line-13)">──────────────────────────────────────────────────────────────────────</text><text class="spieldocs-r2" x="854" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r3" x="0" y="361.6" textLength="475.8" clip-path="url(#spieldocs-line-14)">Trigger&#160;Examples&#160;|&#160;Animating&#160;Content&#160;&#160;&#160;</text><text class="spieldocs-r3" x="500.2" y="361.6" textLength="353.8" clip-path="url(#spieldocs-line-14)">2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[1&#160;/&#160;1]</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

118
docs/assets/triggers_reveal_1.svg
Unescape Escape View File

@ -0,0 +1,118 @@
<svg class="rich-terminal" viewBox="0 0 872 416.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.spieldocs-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
.spieldocs-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.spieldocs-r1 { fill: #e1e1e1 }
.spieldocs-r2 { fill: #d0b344 }
.spieldocs-r3 { fill: #c5c8c6 }
.spieldocs-r4 { fill: #cc555a }
.spieldocs-r5 { fill: #939393 }
.spieldocs-r6 { fill: #e1e1e1;font-weight: bold }
</style>
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="853.0" height="365.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="854" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="870" height="414" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="435" y="27">Trigger&#160;Examples</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="561.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="561.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="573.4" y="1.5" width="280.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="353.8" y="50.3" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="488" y="50.3" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="475.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="475.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="500.2" y="343.1" width="353.8" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r1" x="0" y="20" textLength="561.2" clip-path="url(#spieldocs-line-0)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;This&#160;slide&#160;has&#160;been&#160;triggered&#160;</text><text class="spieldocs-r2" x="561.2" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">1</text><text class="spieldocs-r1" x="573.4" y="20" textLength="280.6" clip-path="url(#spieldocs-line-0)">&#160;time.&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r3" x="854" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r3" x="854" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r4" x="353.8" y="68.8" textLength="134.2" clip-path="url(#spieldocs-line-2)">First&#160;line.</text><text class="spieldocs-r3" x="854" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r3" x="854" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r3" x="854" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r3" x="854" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r3" x="854" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r3" x="854" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r3" x="854" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r3" x="854" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r3" x="854" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r3" x="854" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r3" x="854" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r5" x="0" y="337.2" textLength="854" clip-path="url(#spieldocs-line-13)">──────────────────────────────────────────────────────────────────────</text><text class="spieldocs-r3" x="854" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r5" x="0" y="361.6" textLength="475.8" clip-path="url(#spieldocs-line-14)">Trigger&#160;Examples&#160;|&#160;Revealing&#160;Content&#160;&#160;&#160;</text><text class="spieldocs-r5" x="500.2" y="361.6" textLength="353.8" clip-path="url(#spieldocs-line-14)">2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[1&#160;/&#160;1]</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

119
docs/assets/triggers_reveal_2.svg
Unescape Escape View File

@ -0,0 +1,119 @@
<svg class="rich-terminal" viewBox="0 0 872 416.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.spieldocs-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
.spieldocs-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.spieldocs-r1 { fill: #e1e1e1 }
.spieldocs-r2 { fill: #d0b344 }
.spieldocs-r3 { fill: #c5c8c6 }
.spieldocs-r4 { fill: #cc555a }
.spieldocs-r5 { fill: #608ab1 }
.spieldocs-r6 { fill: #939393 }
.spieldocs-r7 { fill: #e1e1e1;font-weight: bold }
</style>
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="853.0" height="365.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="854" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="870" height="414" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="435" y="27">Trigger&#160;Examples</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="561.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="561.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="573.4" y="1.5" width="280.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="353.8" y="50.3" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="488" y="50.3" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="353.8" y="99.1" width="146.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="500.2" y="99.1" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="475.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="475.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="500.2" y="343.1" width="353.8" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r1" x="0" y="20" textLength="561.2" clip-path="url(#spieldocs-line-0)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;This&#160;slide&#160;has&#160;been&#160;triggered&#160;</text><text class="spieldocs-r2" x="561.2" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">2</text><text class="spieldocs-r1" x="573.4" y="20" textLength="280.6" clip-path="url(#spieldocs-line-0)">&#160;times.&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r3" x="854" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r3" x="854" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r4" x="353.8" y="68.8" textLength="134.2" clip-path="url(#spieldocs-line-2)">First&#160;line.</text><text class="spieldocs-r3" x="854" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r3" x="854" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r5" x="353.8" y="117.6" textLength="146.4" clip-path="url(#spieldocs-line-4)">Second&#160;line.</text><text class="spieldocs-r3" x="854" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r3" x="854" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r3" x="854" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r3" x="854" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r3" x="854" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r3" x="854" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r3" x="854" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r3" x="854" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r3" x="854" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r6" x="0" y="337.2" textLength="854" clip-path="url(#spieldocs-line-13)">──────────────────────────────────────────────────────────────────────</text><text class="spieldocs-r3" x="854" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r6" x="0" y="361.6" textLength="475.8" clip-path="url(#spieldocs-line-14)">Trigger&#160;Examples&#160;|&#160;Revealing&#160;Content&#160;&#160;&#160;</text><text class="spieldocs-r6" x="500.2" y="361.6" textLength="353.8" clip-path="url(#spieldocs-line-14)">2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[1&#160;/&#160;1]</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

120
docs/assets/triggers_reveal_3.svg
Unescape Escape View File

@ -0,0 +1,120 @@
<svg class="rich-terminal" viewBox="0 0 872 416.0" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.spieldocs-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}
.spieldocs-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}
.spieldocs-r1 { fill: #e1e1e1 }
.spieldocs-r2 { fill: #d0b344 }
.spieldocs-r3 { fill: #c5c8c6 }
.spieldocs-r4 { fill: #cc555a }
.spieldocs-r5 { fill: #608ab1 }
.spieldocs-r6 { fill: #98a84b }
.spieldocs-r7 { fill: #939393 }
.spieldocs-r8 { fill: #e1e1e1;font-weight: bold }
</style>
<defs>
<clipPath id="spieldocs-clip-terminal">
<rect x="0" y="0" width="853.0" height="365.0" />
</clipPath>
<clipPath id="spieldocs-line-0">
<rect x="0" y="1.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-1">
<rect x="0" y="25.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-2">
<rect x="0" y="50.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-3">
<rect x="0" y="74.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-4">
<rect x="0" y="99.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-5">
<rect x="0" y="123.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-6">
<rect x="0" y="147.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-7">
<rect x="0" y="172.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-8">
<rect x="0" y="196.7" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-9">
<rect x="0" y="221.1" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-10">
<rect x="0" y="245.5" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-11">
<rect x="0" y="269.9" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-12">
<rect x="0" y="294.3" width="854" height="24.65"/>
</clipPath>
<clipPath id="spieldocs-line-13">
<rect x="0" y="318.7" width="854" height="24.65"/>
</clipPath>
</defs>
<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="870" height="414" rx="8"/><text class="spieldocs-title" fill="#c5c8c6" text-anchor="middle" x="435" y="27">Trigger&#160;Examples</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>
<g transform="translate(9, 41)" clip-path="url(#spieldocs-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="561.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="561.2" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="573.4" y="1.5" width="280.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="353.8" y="50.3" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="488" y="50.3" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="353.8" y="99.1" width="146.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="500.2" y="99.1" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="353.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="353.8" y="147.9" width="134.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="488" y="147.9" width="366" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="854" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="475.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="475.8" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="500.2" y="343.1" width="353.8" height="24.65" shape-rendering="crispEdges"/>
<g class="spieldocs-matrix">
<text class="spieldocs-r1" x="0" y="20" textLength="561.2" clip-path="url(#spieldocs-line-0)">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;This&#160;slide&#160;has&#160;been&#160;triggered&#160;</text><text class="spieldocs-r2" x="561.2" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">3</text><text class="spieldocs-r1" x="573.4" y="20" textLength="280.6" clip-path="url(#spieldocs-line-0)">&#160;times.&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</text><text class="spieldocs-r3" x="854" y="20" textLength="12.2" clip-path="url(#spieldocs-line-0)">
</text><text class="spieldocs-r3" x="854" y="44.4" textLength="12.2" clip-path="url(#spieldocs-line-1)">
</text><text class="spieldocs-r4" x="353.8" y="68.8" textLength="134.2" clip-path="url(#spieldocs-line-2)">First&#160;line.</text><text class="spieldocs-r3" x="854" y="68.8" textLength="12.2" clip-path="url(#spieldocs-line-2)">
</text><text class="spieldocs-r3" x="854" y="93.2" textLength="12.2" clip-path="url(#spieldocs-line-3)">
</text><text class="spieldocs-r5" x="353.8" y="117.6" textLength="146.4" clip-path="url(#spieldocs-line-4)">Second&#160;line.</text><text class="spieldocs-r3" x="854" y="117.6" textLength="12.2" clip-path="url(#spieldocs-line-4)">
</text><text class="spieldocs-r3" x="854" y="142" textLength="12.2" clip-path="url(#spieldocs-line-5)">
</text><text class="spieldocs-r6" x="353.8" y="166.4" textLength="134.2" clip-path="url(#spieldocs-line-6)">Third&#160;line.</text><text class="spieldocs-r3" x="854" y="166.4" textLength="12.2" clip-path="url(#spieldocs-line-6)">
</text><text class="spieldocs-r3" x="854" y="190.8" textLength="12.2" clip-path="url(#spieldocs-line-7)">
</text><text class="spieldocs-r3" x="854" y="215.2" textLength="12.2" clip-path="url(#spieldocs-line-8)">
</text><text class="spieldocs-r3" x="854" y="239.6" textLength="12.2" clip-path="url(#spieldocs-line-9)">
</text><text class="spieldocs-r3" x="854" y="264" textLength="12.2" clip-path="url(#spieldocs-line-10)">
</text><text class="spieldocs-r3" x="854" y="288.4" textLength="12.2" clip-path="url(#spieldocs-line-11)">
</text><text class="spieldocs-r3" x="854" y="312.8" textLength="12.2" clip-path="url(#spieldocs-line-12)">
</text><text class="spieldocs-r7" x="0" y="337.2" textLength="854" clip-path="url(#spieldocs-line-13)">──────────────────────────────────────────────────────────────────────</text><text class="spieldocs-r3" x="854" y="337.2" textLength="12.2" clip-path="url(#spieldocs-line-13)">
</text><text class="spieldocs-r7" x="0" y="361.6" textLength="475.8" clip-path="url(#spieldocs-line-14)">Trigger&#160;Examples&#160;|&#160;Revealing&#160;Content&#160;&#160;&#160;</text><text class="spieldocs-r7" x="500.2" y="361.6" textLength="353.8" clip-path="url(#spieldocs-line-14)">2022-12-17&#160;03:31&#160;PM&#160;&#160;&#160;[1&#160;/&#160;1]</text>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

8
docs/contributing.md
Unescape Escape View File

@ -1,10 +1,10 @@
# Contributing Guide
Spiel is open to contributions!
!!! info "Spiel is open to contributions!"
- [Report bugs and request features](https://github.com/JoshKarpel/spiel/issues)
- [More general discussion](https://github.com/JoshKarpel/spiel/discussions)
- [Pull requests](https://github.com/JoshKarpel/spiel/pulls)
- [Report bugs and request features](https://github.com/JoshKarpel/spiel/issues)
- [General discussion](https://github.com/JoshKarpel/spiel/discussions)
- [Pull requests](https://github.com/JoshKarpel/spiel/pulls)
## Development Environment

25
docs/examples/slide_loop.py
Unescape Escape View File

@ -0,0 +1,25 @@
from rich.align import Align
from rich.console import RenderableType
from rich.style import Style
from rich.text import Text
from spiel import Deck, Slide
deck = Deck(name="Deck Name")
def make_slide(
title_prefix: str,
text: Text,
) -> Slide:
def content() -> RenderableType:
return Align(text, align="center", vertical="middle")
return Slide(title=f"{title_prefix} Slide", content=content)
deck.add_slides(
make_slide(title_prefix="First", text=Text("Foo", style=Style(color="blue"))),
make_slide(title_prefix="Second", text=Text("Bar", style=Style(color="red"))),
make_slide(title_prefix="Third", text=Text("Baz", style=Style(color="green"))),
)

18
docs/examples/slide_via_decorator.py
Unescape Escape View File

@ -0,0 +1,18 @@
from rich.align import Align
from rich.console import RenderableType
from rich.text import Text
from spiel import Deck
deck = Deck(name="Deck Name")
@deck.slide(title="Slide Title")
def slide_content() -> RenderableType:
return Align(
Text.from_markup(
"[blue]Your[/blue] [red underline]content[/red underline] [green italic]here[/green italic]!"
),
align="center",
vertical="middle",
)

31
docs/examples/triggers_animation.py
Unescape Escape View File

@ -0,0 +1,31 @@
from math import floor
from rich.align import Align
from rich.console import Group, RenderableType
from rich.panel import Panel
from rich.text import Text
from spiel import Deck, Triggers
deck = Deck(name="Trigger Examples")
@deck.slide(title="Animating Content")
def animate(triggers: Triggers) -> RenderableType:
bang = "!"
space = " "
bar_length = 5
spaces_before_bang = min(floor(triggers.time_since_first_trigger), bar_length)
spaces_after_bang = bar_length - spaces_before_bang
bar = (space * spaces_before_bang) + bang + (space * spaces_after_bang)
return Align(
Group(
Align.center(Text(f"{spaces_before_bang=} | {spaces_after_bang=}")),
Align.center(Panel(Text(bar), expand=False, height=3)),
),
align="center",
vertical="middle",
)

25
docs/examples/triggers_reveal.py
Unescape Escape View File

@ -0,0 +1,25 @@
from rich.align import Align
from rich.console import Group, RenderableType
from rich.padding import Padding
from rich.style import Style
from rich.text import Text
from spiel import Deck, Triggers
deck = Deck(name="Trigger Examples")
@deck.slide(title="Revealing Content")
def reveal(triggers: Triggers) -> RenderableType:
lines = [
Text.from_markup(
f"This slide has been triggered [yellow]{len(triggers)}[/yellow] time{'s' if len(triggers) > 1 else ''}."
),
Text("First line.", style=Style(color="red")) if len(triggers) >= 1 else None,
Text("Second line.", style=Style(color="blue")) if len(triggers) >= 2 else None,
Text("Third line.", style=Style(color="green")) if len(triggers) >= 3 else None,
]
return Group(
*(Padding(Align.center(line), pad=(0, 0, 1, 0)) for line in lines if line is not None)
)

150
docs/generate_screenshots.py
Unescape Escape View File

@ -2,10 +2,12 @@
import os
from collections.abc import Iterable
from concurrent.futures import ProcessPoolExecutor, as_completed
from datetime import datetime
from functools import partial
from io import StringIO
from pathlib import Path
from time import monotonic
from more_itertools import intersperse
from rich.console import Console
@ -49,7 +51,9 @@ async def auto_pilot(pilot: Pilot, name: str, keys: Iterable[str]) -> None:
await pilot.app.action_quit()
def take_screenshot(name: str, deck_file: Path, size: tuple[int, int], keys: Iterable[str]) -> None:
def take_screenshot(name: str, deck_file: Path, size: tuple[int, int], keys: Iterable[str]) -> str:
print(f"Generating {name}")
SpielApp(
deck_path=deck_file,
watch_path=deck_file.parent,
@ -61,12 +65,138 @@ def take_screenshot(name: str, deck_file: Path, size: tuple[int, int], keys: Ite
size=size,
)
demo_deck = ROOT_DIR / "spiel" / "demo" / "demo.py"
quickstart_deck = ROOT_DIR / "docs" / "examples" / "quickstart.py"
take_screenshot(name="demo", deck_file=demo_deck, size=(130, 35), keys=())
take_screenshot(name="deck", deck_file=demo_deck, size=(130, 35), keys=("d", "right", "down"))
take_screenshot(name="help", deck_file=demo_deck, size=(110, 35), keys=("?",))
take_screenshot(name="quickstart_basic", deck_file=quickstart_deck, size=(60, 20), keys=())
take_screenshot(name="quickstart_code", deck_file=demo_deck, size=(140, 45), keys=("right",))
return name
if __name__ == "__main__":
start_time = monotonic()
demo_deck = ROOT_DIR / "spiel" / "demo" / "demo.py"
quickstart_deck = ROOT_DIR / "docs" / "examples" / "quickstart.py"
slide_via_decorator = ROOT_DIR / "docs" / "examples" / "slide_via_decorator.py"
slide_loop = ROOT_DIR / "docs" / "examples" / "slide_loop.py"
triggers_reveal = ROOT_DIR / "docs" / "examples" / "triggers_reveal.py"
triggers_animation = ROOT_DIR / "docs" / "examples" / "triggers_animation.py"
with ProcessPoolExecutor() as pool:
futures = [
pool.submit(
take_screenshot,
name="triggers_animation_1",
deck_file=triggers_animation,
size=(70, 15),
keys=(),
),
pool.submit(
take_screenshot,
name="triggers_animation_2",
deck_file=triggers_animation,
size=(70, 15),
keys=("wait:1400",),
),
pool.submit(
take_screenshot,
name="triggers_animation_3",
deck_file=triggers_animation,
size=(70, 15),
keys=("wait:2900",),
),
pool.submit(
take_screenshot,
name="triggers_animation_4",
deck_file=triggers_animation,
size=(70, 15),
keys=("wait:5400",),
),
pool.submit(
take_screenshot,
name="demo",
deck_file=demo_deck,
size=(130, 35),
keys=(),
),
pool.submit(
take_screenshot,
name="deck",
deck_file=demo_deck,
size=(130, 35),
keys=("d", "right", "down"),
),
pool.submit(
take_screenshot,
name="help",
deck_file=demo_deck,
size=(110, 35),
keys=("?",),
),
pool.submit(
take_screenshot,
name="quickstart_basic",
deck_file=quickstart_deck,
size=(70, 20),
keys=(),
),
pool.submit(
take_screenshot,
name="quickstart_code",
deck_file=demo_deck,
size=(140, 45),
keys=("right",),
),
pool.submit(
take_screenshot,
name="slide_via_decorator",
deck_file=slide_via_decorator,
size=(60, 15),
keys=(),
),
pool.submit(
take_screenshot,
name="slide_loop_1",
deck_file=slide_loop,
size=(60, 15),
keys=(),
),
pool.submit(
take_screenshot,
name="slide_loop_2",
deck_file=slide_loop,
size=(60, 15),
keys=("right",),
),
pool.submit(
take_screenshot,
name="slide_loop_3",
deck_file=slide_loop,
size=(60, 15),
keys=("right", "right"),
),
pool.submit(
take_screenshot,
name="triggers_reveal_1",
deck_file=triggers_reveal,
size=(70, 15),
keys=(),
),
pool.submit(
take_screenshot,
name="triggers_reveal_2",
deck_file=triggers_reveal,
size=(70, 15),
keys=("t",),
),
pool.submit(
take_screenshot,
name="triggers_reveal_3",
deck_file=triggers_reveal,
size=(70, 15),
keys=("t", "t"),
),
]
for future in as_completed(futures, timeout=60):
print(f"Generated {future.result()}")
end_time = monotonic()
print(f"Generated {len(futures)} screenshots in {end_time - start_time:0.2f} seconds")

4
docs/index.md
Unescape Escape View File

@ -1,6 +1,8 @@
# Spiel
Spiel is a framework for building and presenting [richly-styled](https://github.com/Textualize/rich) presentations in your terminal using Python.
[Spiel](https://dictionary.cambridge.org/us/dictionary/english/spiel)
is a framework for building and presenting
[richly-styled](https://github.com/Textualize/rich) presentations in your terminal using Python.
![The first slide of the demo deck](./assets/demo.svg)
![The demo deck in "deck view"](./assets/deck.svg)

4
docs/presenting.md
Unescape Escape View File

@ -29,9 +29,7 @@ run `spiel present --help` to see the arguments and available options.
## Using the `present` function
The `present` function lets you start a presentation programmatically (i.e., from a Python script).
::: spiel.present
The [`present`][spiel.present] function lets you start a presentation programmatically (i.e., from a Python script).
If your deck is defined in `talk/slides.py` like so:

21
docs/quickstart.md
Unescape Escape View File

@ -6,20 +6,7 @@ After installing Spiel (`pip install spiel`),
create a file called `deck.py` and copy this code into it:
```python
from rich.console import RenderableType
from spiel import Deck, present
deck = Deck(name="Your Deck Name")
@deck.slide(title="Slide 1 Title")
def slide_1() -> RenderableType:
return "Your content here!"
if __name__ == "__main__":
present(__file__)
--8<-- "examples/quickstart.py"
```
That is the most basic Spiel presentation you can make.
@ -29,13 +16,13 @@ You should see:
![Barebones slide](./assets/quickstart_basic.svg)
In the example above, you first create a `Deck` and provide the name of your presentation.
Then you create slides by decorating functions with `@deck.slide()`, providing the title of the slide.
Then you create slides by decorating functions with `@deck.slide`, providing the title of the slide.
The slide function can return anything that
[Rich can render](https://rich.readthedocs.io/en/stable/console.html#printing);
that return value will be displayed as the slide's content when you present it.
The order of the `@deck.slide()`-decorated functions in your file is the order in which they will appear in your presentation.
The order of the `@deck.slide`-decorated functions in your file is the order in which they will appear in your presentation.
Running `python deck.py` started the presentation because of the call to `present()` in the
Running `python deck.py` started the presentation because of the call to `present` in the
[`if __name__ == "__main__"` block](https://stackoverflow.com/questions/419163/what-does-if-name-main-do).
To see available keybindings for doing things like moving between slides,

155
docs/slides.md
Unescape Escape View File

@ -0,0 +1,155 @@
# Making Slides
## Slide Content Functions
Each slide's content is rendered by calling a "content function" that returns a
[Rich `RenderableType`](https://rich.readthedocs.io/en/stable/console.html#printing).
There are two primary ways to define these content functions.
For unique slides you can use the [`Deck.slide`][spiel.Deck.slide] decorator:
```python
--8<-- "examples/slide_via_decorator.py"
```
![Slide content via decorator](./assets/slide_via_decorator.svg)
You might also find yourself wanting to create a set of slides programmatically
(well, even more programmatically).
You can use the [`Deck.add_slides`][spiel.Deck.add_slides] function to add
[`Slide`s][spiel.Slide] that you've created manually to your deck.
```python
--8<-- "examples/slide_loop.py"
```
![Slide content via loop 1](./assets/slide_loop_1.svg)
![Slide content via loop 2](./assets/slide_loop_2.svg)
![Slide content via loop 3](./assets/slide_loop_3.svg)
This pattern is useful when you have a generic "slide template"
that you want to feed multiple values into without copying a lot of code.
You have the full power of Python to define your slides,
so you can use as much (or as little) abstraction as you want.
!!! tip "Slides are added to the deck in execution order"
The slide order in the presentation is determined by the order
that the `Deck.slide` decorator and `Deck.add_slides` functions are used.
The two methods can be freely mixed;
just make sure to call them in the order you want the slides to
be presented in.
## When and how often are slide content functions called?
The slide content function is called for a wide variety of reasons
and it is not generally possible to predict how many times or exactly when
it will be called due a mix of time-interval-based and on-demand needs.
Here are some examples of when the content function will be called:
- When you move to the slide in Slide view.
- Sixty times per second while the slide is active in Slide view (see [Triggers](#triggers) below).
- When you switch to Deck view.
- The active slide's content function will be called if the deck is reloaded.
!!! tip
Because of how many times they will be called,
your content functions should be *fast* and *stateless*.
If your content function needs state,
it should store and use it via the [Fixtures](#fixtures) discussed below.
## Fixtures
The slide content function can take extra
[keyword arguments](https://docs.python.org/3/glossary.html#term-argument)
that provide additional information for advanced rendering techniques.
To have Spiel pass your content function one of these fixtures,
include a keyword argument with the corresponding fixture name in your content function's signature.
### Triggers
- Keyword: `triggers`
- Type: [`Triggers`][spiel.Triggers]
The `triggers` fixture is useful for making slides whose content depends either on
relative time (e.g., time since the slide started being displayed)
or where the content should change when the user "triggers" it
(similar to how a PowerPoint animation can be configured to run
[`On Click`](https://support.microsoft.com/en-us/office/animate-text-or-objects-305a1c94-83b1-4778-8df5-fcf7a9b7b7c6)).
To *trigger* a slide, press `t` in Slide view while displaying it.
Additionally, each slide is automatically triggered once when it starts being
displayed so that properties like
[`Triggers.time_since_last_trigger`][spiel.Triggers.time_since_last_trigger]
will always have usable values.
The `Triggers` object in any given call of the content function behaves like an immutable sequence of floats,
which represent relative times (in seconds) at which the slide has been triggered.
These relative times are comparable to each other, but are not comparable
to values generated by e.g. [`time.time`][time.time] (they are generated by [`time.monotonic`][time.monotonic]).
Over multiple calls of the content function,
the sequence of relative times is append-only:
any trigger time that has been added to the sequence will stay there until the
[`Triggers.now`][spiel.Triggers.now] is also available,
representing the relative time that the slide is being rendered at.
Triggers are reset when changing slides:
if you trigger a slide,
go to another slide,
then back to the initial slide,
the `triggers` from the first "instance"
of showing the slide *not* be remembered.
!!! info "`Trigger.now` resolution"
Your slide content function will be called every sixtieth of a second,
so the best time resolution you can get is about 16 milliseconds between
renders, and therefore between `Trigger.now` values.
#### Revealing Content using Triggers
A simple use case for `triggers` is to gradually reveal content.
We won't even use the "relative time" component for this:
we'll just track how many times the slide has been triggered.
```python
--8<-- "examples/triggers_reveal.py"
```
When first displayed, the slide will look like this:
![Triggers reveal 1](./assets/triggers_reveal_1.svg)
Note that the slide has already been triggered once,
even though we haven't pressed `t` yet!
As mentioned above, each slide is automatically triggered once
when it starts being displayed.
After pressing `t` to trigger the slide (really the second trigger):
![Triggers reveal 2](./assets/triggers_reveal_2.svg)
And after pressing `t` again (really the third trigger):
![Triggers reveal 3](./assets/triggers_reveal_3.svg)
#### Animating Content using Triggers
Let's build a simple animation that is driven by the time since the slide
started being displayed:
```python
--8<-- "examples/triggers_animation.py"
```
Here are some screenshots showing what the slide looks like at various times
after being displayed, with no additional key presses:
![Triggers animation 1](./assets/triggers_animation_1.svg)
![Triggers animation 2](./assets/triggers_animation_2.svg)
![Triggers animation 3](./assets/triggers_animation_3.svg)
![Triggers animation 4](./assets/triggers_animation_4.svg)

5
mkdocs.yml
Unescape Escape View File

@ -59,7 +59,9 @@ markdown_extensions:
- pymdownx.highlight:
anchor_linenums: true
- pymdownx.inlinehilite
- pymdownx.snippets
- pymdownx.snippets:
base_path: ['docs']
check_paths: true
- pymdownx.superfences
- pymdownx.tabbed:
alternate_style: true
@ -80,6 +82,7 @@ nav:
- Introduction: index.md
- quickstart.md
- presenting.md
- slides.md
- api.md
- gallery.md
- contributing.md

4
spiel/app.py
Unescape Escape View File

@ -11,7 +11,7 @@ from contextlib import contextmanager, redirect_stderr, redirect_stdout
from functools import cached_property, partial
from pathlib import Path
from time import monotonic
from typing import Callable, ContextManager, Iterator, Optional
from typing import Callable, ContextManager, Iterator
from rich.style import Style
from rich.text import Text
@ -210,7 +210,7 @@ class SpielApp(App[None]):
return max(self.size.width // 35, 1)
def present(deck_path: Path | str, watch_path: Optional[Path | str] = None) -> None:
def present(deck_path: Path | str, watch_path: Path | str | None = None) -> None:
"""
Present the deck defined in the given `deck_path`.

Write Preview
Loading…
Cancel
Save