🧪 lab: Create if statement lab (#416)

Create `if` statement lab. This is our third lab. I've tested it with my
daughter Mali (thank you!). She managed to do pretty much all of it by
herself with the code hints. The Monte Carlo Pi simulation was the
trickiest I think, but that's more intended as a walk through on the
facilitators side anyway.

The content is on the wordy side but I intend to add some [[ NEXT ]]
buttons within the lab notes in the follow up commit.

We start off with a couple of minor fix-ups to little bugs that were discovered
when building this lab:

* Fix SVG exports if initial position is not explicitly set to `0 0`
* Tweak CSS for landing page text.

This merges the following commits:
* apex: Reduce width of the main content area
* labsite: Fix 3 column layout
* evy: Fix initial cursor position in SVG export
* lab: Create `if` statement lab

     frontend/css/index.css                        |   1 +
     frontend/lab/css/overrides.css                |  26 ++--
     frontend/lab/samples/future/nested.evy        |  27 ++++
     frontend/lab/samples/future/nested.htmlf      |   5 +
     frontend/lab/samples/ifs/alpha.evy            |  12 ++
     frontend/lab/samples/ifs/alpha.htmlf          |  30 ++++
     frontend/lab/samples/ifs/alpha.md             |  23 +++
     frontend/lab/samples/ifs/bounce-show.evy      |  18 +++
     frontend/lab/samples/ifs/bounce-show.htmlf    |  10 ++
     frontend/lab/samples/ifs/bounce-show.md       |  12 ++
     frontend/lab/samples/ifs/bounce.evy           |   1 +
     frontend/lab/samples/ifs/bounce.htmlf         |  36 +++++
     frontend/lab/samples/ifs/bounce.md            |  39 +++++
     frontend/lab/samples/ifs/chat.evy             |   8 +
     frontend/lab/samples/ifs/chat.htmlf           |  54 +++++++
     frontend/lab/samples/ifs/chat.md              |  57 +++++++
     frontend/lab/samples/ifs/img/bounce.gif       | Bin 0 -> 366096 bytes
     frontend/lab/samples/ifs/img/pulse-step-1.evy |   6 +
     frontend/lab/samples/ifs/img/pulse-step-1.svg |  11 ++
     frontend/lab/samples/ifs/img/pulse-step-2.evy |  11 ++
     frontend/lab/samples/ifs/img/pulse-step-2.svg |  34 +++++
     frontend/lab/samples/ifs/img/pulse-step-3.gif | Bin 0 -> 215357 bytes
     frontend/lab/samples/ifs/img/pulse-step-4.gif | Bin 0 -> 531165 bytes
     frontend/lab/samples/ifs/img/pulse-step-5.gif | Bin 0 -> 347492 bytes
     .../ifs/img/quarter-circle-triangle.evy       |  31 ++++
     .../ifs/img/quarter-circle-triangle.svg       |  30 ++++
     .../lab/samples/ifs/img/quarter-circle.evy    |   3 +
     .../lab/samples/ifs/img/quarter-circle.svg    |  13 ++
     .../ifs/img/red-dot-two-squares-alpha.evy     |  14 ++
     .../ifs/img/red-dot-two-squares-alpha.svg     |  26 ++++
     .../samples/ifs/img/red-dot-two-squares.evy   |  14 ++
     .../samples/ifs/img/red-dot-two-squares.svg   |  26 ++++
     frontend/lab/samples/ifs/img/target-blue.evy  |  11 ++
     frontend/lab/samples/ifs/img/target-blue.svg  |  34 +++++
     frontend/lab/samples/ifs/pi.evy               |  11 ++
     frontend/lab/samples/ifs/pi.htmlf             | 141 ++++++++++++++++++
     frontend/lab/samples/ifs/pi.md                | 129 ++++++++++++++++
     frontend/lab/samples/ifs/pulse-show.evy       |  18 +++
     frontend/lab/samples/ifs/pulse-show.htmlf     |  14 ++
     frontend/lab/samples/ifs/pulse-show.md        |  16 ++
     frontend/lab/samples/ifs/pulse.evy            |   1 +
     frontend/lab/samples/ifs/pulse.htmlf          | 123 +++++++++++++++
     frontend/lab/samples/ifs/pulse.md             | 139 +++++++++++++++++
     frontend/lab/samples/ifs/stars.evy            |   1 +
     frontend/lab/samples/ifs/stars.htmlf          |  65 ++++++++
     frontend/lab/samples/ifs/stars.md             |  76 ++++++++++
     frontend/lab/samples/ifs/welcome-ifs.evy      |   1 +
     frontend/lab/samples/ifs/welcome-ifs.htmlf    |  15 ++
     frontend/lab/samples/ifs/welcome-ifs.md       |  15 ++
     .../lab/samples/intro/img/coords-30-60.svg    |   2 +-
     frontend/lab/samples/samples.json             |  22 +++
     pkg/cli/svg/runtime.go                        |   2 +
     pkg/cli/svg/runtime_test.go                   |   7 +-
     pkg/cli/svg/testdata/quarter-circle.svg       |   6 +
     54 files changed, 1411 insertions(+), 16 deletions(-)

Pull-request: #416

frontend/css/index.css

@@ -62,6 +62,7 @@ p {
   width: 100%;
   font-size: 1.125rem;
   line-height: 2;
+  max-width: 72ch;
 }
 
 .screencast {

frontend/lab/css/overrides.css

@@ -1,15 +1,23 @@
-/* Make wider for 3 columns */
+/* Special treatment of 3 column layout */
+:root {
+  --notes-max-width: min(25vw, calc(20rem + 32px));
+  --editor-max-width: calc(36rem + 16px);
+}
+
 .max-width-wrapper:not(:has(.main > .hidden)) {
-  max-width: 84rem;
+  max-width: calc(var(--editor-max-width) + var(--notes-max-width) + var(--canvas-size) + 64px);
 }
 
 /* --- Notes -------------------------------------------------------- */
+.editor-wrap {
+  max-width: var(--editor-max-width);
+}
+
 .notes {
-  max-width: min(20rem, 25vw);
+  max-width: var(--notes-max-width);
   background: var(--background);
   border-radius: 6px;
   border: var(--editor-border);
-  margin: 0;
   font-family: var(--font-family);
   overflow-y: auto;
   height: 100%;
@@ -173,16 +181,6 @@
   max-width: 100%;
 }
 
-.youtube {
-  --youtube-width: 380px;
-  --aspect-ratio: calc(16 / 9);
-  margin: 32px auto;
-  display: block;
-  width: var(--youtube-width);
-  height: calc(var(--youtube-width) / var(--aspect-ratio));
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-}
 .youtube {
   --youtube-width: 380px;
   --aspect-ratio: calc(16 / 9);

frontend/lab/samples/future/nested.evy

@@ -0,0 +1,27 @@
+w := 2
+dw := 0.1
+s := 10
+
+while true
+    clear "slategrey"
+    x := s
+    y := s
+
+    while x <= 100 - s
+        while y <= 100 - s
+            c := hsl 2*x+2*y
+            fill c
+            move x-w/2 y-w/2
+            rect w w
+            y = y + s
+        end
+        x = x + s
+        y = s
+    end
+
+    if w < 2 or w > 8
+        dw = -dw
+    end
+    w = w + dw
+    sleep 0.001
+end

frontend/lab/samples/future/nested.htmlf

@@ -0,0 +1,5 @@
+<h1>🪺🪟 Squares on a Grid</h1>
+
+<p>Build a static image of the program first.</p>
+
+<p>Animate it second.</p>

frontend/lab/samples/ifs/alpha.evy

@@ -0,0 +1,12 @@
+blue := (hsl 240 100 50 100)
+yellow := (hsl 60 100 50 100)
+
+color "red"
+move 50 50
+circle 30
+
+color blue
+move 0 0
+rect 50 100
+
+color yellow

frontend/lab/samples/ifs/alpha.htmlf

@@ -0,0 +1,30 @@
+<h1>🌈 Transparent Colors</h1>
+<p>⭐ <strong>Read</strong> and <strong>Run</strong> the code. Does it make sense to you?</p>
+<p>⭐ <strong>Complete it</strong> to create the following drawing:</p>
+<p>
+  <img src="samples/ifs/img/red-dot-two-squares.svg" alt="simple drawing of circles and squares" />
+</p>
+<p>
+  ⭐ <strong>Modify the Alpha</strong> parameter to the
+  <a href="/docs/builtins.html#hsl"><code>hsl</code></a> function to make the bottom quadrant grey,
+  like so:
+</p>
+<p>
+  <img
+    src="samples/ifs/img/red-dot-two-squares-alpha.svg"
+    alt="simple drawing of circles and squares"
+  />
+</p>
+<details>
+  <summary>Understanding Alpha 📖</summary>
+  <p>
+    In the interactive <a href="/docs/builtins.html#hsl"><code>hsl</code></a> function
+    <a href="#hsl">color explorer</a> we learned how hsl takes three values: hue, saturation,
+    lightness values to create a color.
+  </p>
+  <p>
+    There is an optional fourth value called <strong>alpha</strong> that controls the transparency
+    of the color. The alpha value ranges from <code>0</code> to <code>100</code>, where
+    <code>0</code> is fully transparent and <code>100</code> is fully opaque.
+  </p>
+</details>

frontend/lab/samples/ifs/alpha.md

@@ -0,0 +1,23 @@
+# 🌈 Transparent Colors
+
+⭐ **Read** and **Run** the code. Does it make sense to you?
+
+⭐ **Complete it** to create the following drawing:
+
+![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares.svg)
+
+⭐ **Modify the Alpha** parameter to the [`hsl`] function to make the bottom
+quadrant grey, like so:
+
+![simple drawing of circles and squares](samples/ifs/img/red-dot-two-squares-alpha.svg)
+
+## [>] Understanding Alpha 📖
+
+In the interactive [`hsl`] function [color explorer](#hsl) we learned how hsl
+takes three values: hue, saturation, lightness values to create a color.
+
+There is an optional fourth value called **alpha** that controls the
+transparency of the color. The alpha value ranges from `0` to `100`, where `0`
+is fully transparent and `100` is fully opaque.
+
+[`hsl`]: /docs/builtins.html#hsl

frontend/lab/samples/ifs/bounce-show.evy

@@ -0,0 +1,18 @@
+x:num
+x = 10
+s:num
+s = 0.4
+width 1
+fill (hsl 0 0 0 3)
+stroke "springgreen"
+
+while true
+    clear (hsl 0 0 0 4)
+    move x 50
+    circle 10
+    x = x + s
+    if x < 10 or x > 90
+        s = -s
+    end
+    sleep 0.001
+end

frontend/lab/samples/ifs/bounce-show.htmlf

@@ -0,0 +1,10 @@
+<h1>🏓 Bounce</h1>
+<p>Hit <strong>Run</strong> and watch the ball bounce!</p>
+<h2>Observe the Animation</h2>
+<ul>
+  <li>What shape do you see?</li>
+  <li>What color is it?</li>
+  <li>How is the fading effect created?</li>
+  <li>What concepts from previous labs are being used here?</li>
+</ul>
+<p>Let's explore further in the interactive <a href="#bounce">Bounce Challenge</a>.</p>

frontend/lab/samples/ifs/bounce-show.md

@@ -0,0 +1,12 @@
+# 🏓 Bounce
+
+Hit **Run** and watch the ball bounce!
+
+## Observe the Animation
+
+- What shape do you see?
+- What color is it?
+- How is the fading effect created?
+- What concepts from previous labs are being used here?
+
+Let's explore further in the interactive [Bounce Challenge](#bounce).

frontend/lab/samples/ifs/bounce.evy

@@ -0,0 +1 @@
+

frontend/lab/samples/ifs/bounce.htmlf

@@ -0,0 +1,36 @@
+<h1>🏓 Bouncy Ball Bonus</h1>
+<p>⭐ <strong>Your Challenge:</strong> Can you create a bouncing ball animation?</p>
+<p>
+  Check out the <a href="#bounce-show">bouncing ball page 🏓📺</a> or observe the animation below.
+</p>
+<details>
+  <summary>Animation demo</summary>
+  <p><img src="samples/ifs/img/bounce.gif" alt="small centered circle" /></p>
+</details>
+<h2>Animation notes 🗒</h2>
+<ul>
+  <li>Circle radius: <code>10</code></li>
+  <li>Outline width: <code>1</code></li>
+  <li>Outline color (stroke): <code>springgreen</code></li>
+  <li>Fill color: <code>hsl 0 0 0 3</code></li>
+  <li>Clear with transparent black: <code>hsl 0 0 0 4</code></li>
+  <li>Sleep one millisecond</li>
+</ul>
+<p>⭐ Start by making a single green circle at position <code>0 50</code>.</p>
+<p>
+  ⭐ Move the ball horizontally across the screen, like in the
+  <a href="#move">🟣🚚 Move challenge</a> in the Introduction lab, don't worry about the bounce yet.
+</p>
+<p>
+  ⭐ Finally, to change direction at the edges use the reversible increment trick from the
+  <a href="#pulse">Pulse challenge</a>.
+</p>
+<details>
+  <summary>Code hint 🧚</summary>
+  <p>Inside the loop body add:</p>
+  <pre><code class="language-evy">x = x + inc
+if x &lt; 10 or x &gt; 90
+    inc = -inc
+end
+</code></pre>
+</details>

frontend/lab/samples/ifs/bounce.md

@@ -0,0 +1,39 @@
+# 🏓 Bouncy Ball Bonus
+
+⭐ **Your Challenge:** Can you create a bouncing ball animation?
+
+Check out the [bouncing ball page 🏓📺](#bounce-show) or observe the
+animation below.
+
+<details>
+  <summary>Animation demo</summary>
+  <p><img src="samples/ifs/img/bounce.gif" alt="small centered circle" /></p>
+</details>
+
+## Animation notes 🗒
+
+- Circle radius: `10`
+- Outline width: `1`
+- Outline color (stroke): `springgreen`
+- Fill color: `hsl 0 0 0 3`
+- Clear with transparent black: `hsl 0 0 0 4`
+- Sleep one millisecond
+
+⭐ Start by making a single green circle at position `0 50`.
+
+⭐ Move the ball horizontally across the screen, like in the
+[🟣🚚 Move challenge](#move) in the Introduction lab, don't worry about the bounce yet.
+
+⭐ Finally, to change direction at the edges use the reversible increment trick
+from the [Pulse challenge](#pulse).
+
+### [>] Code hint 🧚
+
+Inside the loop body add:
+
+```evy
+x = x + inc
+if x < 10 or x > 90
+    inc = -inc
+end
+```

frontend/lab/samples/ifs/chat.evy

@@ -0,0 +1,8 @@
+print "Do you like cookies?"
+answer := read
+
+if answer == "yes"
+    print "🍪 Sweet!"
+else
+    print "I'm confused"
+end

frontend/lab/samples/ifs/chat.htmlf

@@ -0,0 +1,54 @@
+<h1>💬 Let's Chat</h1>
+<p>⭐ <strong>Before you run the code:</strong> Can you predict what will happen?</p>
+<p>Now, hit <strong>Run</strong> and see if you were right!</p>
+<p>⭐ <strong>Think about it:</strong> What's the purpose of the <code>:=</code> operator?</p>
+<details>
+  <summary><code>:=</code> Declaration with type inference 📖</summary>
+  <p>In Evy, you can declare a variable and assign it a value in one step using <code>:=</code>.</p>
+  <p>Instead of</p>
+  <pre><code class="language-evy">s:string
+s = &quot;banana&quot;
+</code></pre>
+  <p>you can use the shortcut</p>
+  <pre><code class="language-evy">s := &quot;banana&quot;
+</code></pre>
+</details>
+<p>
+  ⭐ <strong>Challenge:</strong> Can you add a different response if the answer is &quot;no&quot;?
+  Use <code>else if</code> to create an alternative message.
+</p>
+<details>
+  <summary>Code hint 🧚</summary>
+  <pre><code class="language-evy">if answer == &quot;yes&quot;
+    print &quot;🍪 Sweet!&quot;
+else if answer == ❓
+    ❓❓
+else
+    print &quot;I'm confused&quot;
+end
+</code></pre>
+</details>
+<p>⭐ <strong>Your turn:</strong> Can you create your own chat bot?</p>
+<details>
+  <summary>Some ideas</summary>
+  <ul>
+    <li>🍦 Ask about their favorite ice cream flavor instead of cookies.</li>
+    <li>
+      🎁 Ask if they want to open a surprise.
+      <ul>
+        <li>
+          If they say <code>&quot;yes&quot;</code>, reveal the surprise (let your imagination run
+          wild 🐉).
+        </li>
+        <li>
+          If they say <code>&quot;no&quot;</code>, respond with something like &quot;And so it
+          remains my secret 🔒&quot;.
+        </li>
+        <li>If they say anything else, respond with &quot;I don't understand.&quot;</li>
+      </ul>
+    </li>
+  </ul>
+  <p>
+    You could also ask about their favorite color, band, or football team and respond accordingly!
+  </p>
+</details>

frontend/lab/samples/ifs/chat.md

@@ -0,0 +1,57 @@
+# 💬 Let's Chat
+
+⭐ **Before you run the code:** Can you predict what will happen?
+
+Now, hit **Run** and see if you were right!
+
+⭐ **Think about it:** What's the purpose of the `:=` operator?
+
+## [>] `:=` Declaration with type inference 📖
+
+In Evy, you can declare a variable and assign it a value in one step using `:=`.
+
+Instead of
+
+```evy
+s:string
+s = "banana"
+```
+
+you can use the shortcut
+
+```evy
+s := "banana"
+```
+
+---
+
+⭐ **Challenge:** Can you add a different response if the answer is "no"? Use
+`else if` to create an alternative message.
+
+### [>] Code hint 🧚
+
+```evy
+if answer == "yes"
+    print "🍪 Sweet!"
+else if answer == ❓
+    ❓❓
+else
+    print "I'm confused"
+end
+```
+
+---
+
+⭐ **Your turn:** Can you create your own chat bot?
+
+### [>] Some ideas
+
+- 🍦 Ask about their favorite ice cream flavor instead of cookies.
+- 🎁 Ask if they want to open a surprise.
+  - If they say `"yes"`, reveal the surprise (let your imagination run wild 🐉).
+  - If they say `"no"`, respond with something like "And so it remains my secret
+    🔒".
+  - If they say anything else, respond with "I don't understand."
+
+You could also ask about their favorite color, band, or football team and
+respond accordingly!