🛝 play-site: Rework sample selection (#399)

Rework sample selection according to design specification by @jasonstrachan
(finally). This automatically flows on to lab challenges and should make
navigation through them a little easier.

Update a couple of the playground sample titles so that the fit in the
sample title box without ellipses for the default browser font size (16px).

Update end-to-end test snapshots.

Sneak in one little lab sample comment update - timing is everything.

This merges the following commits:
* lab: Tweak Evy source comment
* play-site: Rework sample selection

     .../console-output-chromium-linux.png         | Bin 37583 -> 35250 bytes
     .../console-output-ios-linux.png              | Bin 13107 -> 14475 bytes
     .../modal-chromium-linux.png                  | Bin 66538 -> 61751 bytes
     .../test.js-snapshots/modal-ios-linux.png     | Bin 43161 -> 43835 bytes
     .../no-dialog-chromium-linux.png              | Bin 31495 -> 29491 bytes
     .../test.js-snapshots/no-dialog-ios-linux.png | Bin 20047 -> 21357 bytes
     .../no-sidebar-chromium-linux.png             | Bin 31495 -> 29493 bytes
     .../no-sidebar-ios-linux.png                  | Bin 20061 -> 21357 bytes
     .../read-input-chromium-linux.png             | Bin 26408 -> 25043 bytes
     .../read-input-ios-linux.png                  | Bin 15071 -> 16756 bytes
     .../share-dialog-ios-linux.png                | Bin 20035 -> 20868 bytes
     .../sidebar-chromium-linux.png                | Bin 25077 -> 23292 bytes
     .../test.js-snapshots/sidebar-ios-linux.png   | Bin 16747 -> 17250 bytes
     .../playground-chromium-linux.png             | Bin 31495 -> 29490 bytes
     .../playground-ios-linux.png                  | Bin 20047 -> 21357 bytes
     frontend/lab/samples/intro/move.evy           |   4 +-
     frontend/play/css/index.css                   |  84 ++++++++++++++----
     frontend/play/index.html                      |  18 +++-
     frontend/play/index.js                        |  70 +++++++++++----
     frontend/play/samples/samples.json            |   4 +-
     20 files changed, 137 insertions(+), 43 deletions(-)

Link: https://www.figma.com/design/4Wf4Mbq8I2Yxh2bptOnSE9/evy?node-id=1243-1340&t=vYTNo7m81uXbVvrG-0
Pull-request: #399

frontend/lab/samples/intro/move.evy

@@ -4,8 +4,8 @@ move 0 50
 circle 10
 
 // 🌶️🌶️
-// Draw 6 circles at these x coordinates:
-// 0 20 40 60 80 100.
+// Draw 6 circles at x coordinates 0,
+// 20, 40, 60, 80, and 100.
 // Can you do it in a loop?
 // https://github.com/evylang/evy/wiki/6-circles
 

frontend/play/css/index.css

@@ -24,6 +24,9 @@
   --output-border-width: 1px;
   --modal-section-width: 18rem;
   --sidebar-width: min(100vw, 18rem);
+  --sample-selector-width: 180px;
+  --sample-selector-index-width: 32px;
+  --sample-selector-gap: 6px;
 }
 
 @media (max-width: 767px) {
@@ -48,6 +51,11 @@
   }
 }
 
+@media (max-width: 350px) {
+  :root {
+    --sample-selector-width: 128px;
+  }
+}
 /* --- Global -------------------------------------------------------- */
 body {
   font-family: var(--font-family);
@@ -60,29 +68,65 @@ body {
 }
 
 /* --- Header -------------------------------------------------------- */
-.breadcrumbs {
-  flex: 1;
-  list-style: none;
-  display: flex;
-  text-align: center;
-  justify-content: center;
+button.arrow {
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  height: 28px;
+  width: 28px;
 }
-
-.breadcrumbs li {
-  white-space: nowrap;
-  text-overflow: ellipsis;
+button.arrow:hover {
+  background: var(--primary-button-color);
+  color: var(--color-accent-hover);
 }
-
-.breadcrumbs li:not(:last-child)::after {
-  content: "›";
-  padding: 0 10px;
+button.arrow.hidden {
+  display: block;
+  color: transparent;
+  background: transparent;
+  border-color: transparent;
+  pointer-events: none;
+}
+button.arrow svg {
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.breadcrumbs button {
+#sample-selector {
+  display: flex;
+  gap: var(--sample-selector-gap);
+  padding: 0 var(--sample-selector-gap);
+  font-size: 0.875rem;
+  width: var(--sample-selector-width);
+  background: var(--color);
+  color: var(--background);
+  margin-left: 6px;
+  margin-right: 6px;
+  border-radius: 6px;
+  height: 28px;
+}
+#sample-selector:hover {
+  color: var(--color-accent);
+}
+#sample-index {
+  display: inline-block;
+  border-radius: 6px;
+  width: var(--sample-selector-index-width);
+  font-size: 0.75rem;
+  background: hsl(0deg 0% 85%);
+  padding: 0 2px;
+}
+#sample-title {
+  text-align: start;
+  display: inline-block;
+  width: calc(
+    var(--sample-selector-width) - var(--sample-selector-index-width) - 3 *
+      var(--sample-selector-gap)
+  );
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   text-decoration: underline;
   text-underline-offset: 0.2em;
   text-decoration-thickness: 1px;
-  font-size: 1rem;
 }
 
 button.share {
@@ -583,6 +627,10 @@ button.running#run-mobile:active {
 }
 /* stylelint-enable no-descending-specificity */
 
+#modal li a.highlight {
+  color: var(--color-accent);
+}
+
 #modal ul li a:hover {
   color: var(--color-accent);
 }
@@ -601,6 +649,10 @@ button.running#run-mobile:active {
   z-index: 1;
 }
 
+#modal li a.highlight::before {
+  background: var(--color-accent);
+}
+
 #modal ul li:not(:last-child) a::after {
   content: "";
   position: absolute;

frontend/play/index.html

@@ -45,10 +45,20 @@
         </a>
       </div>
       <div class="center">
-        <ul class="breadcrumbs">
-          <li><button>Tour</button></li>
-          <li><button>Welcome</button></li>
-        </ul>
+        <button id="sample-previous" class="arrow">
+          <svg width="8" height="12" viewBox="0 0 8 12" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 1.4L3.4 6L8 10.6L6.6 12L0.6 6L6.6 0L8 1.4Z" fill="currentColor" />
+          </svg>
+        </button>
+        <button id="sample-selector">
+          <div id="sample-index">1/6</div>
+          <div id="sample-title">Welcome</div>
+        </button>
+        <button id="sample-next" class="arrow">
+          <svg width="8" height="12" viewBox="0 0 8 12" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 1.4L4.6 6L0 10.6L1.4 12L7.4 6L1.4 0L0 1.4Z" fill="currentColor" />
+          </svg>
+        </button>
       </div>
       <div class="right">
         <button class="desktop share" id="share">

frontend/play/index.js

@@ -14,6 +14,7 @@ let jsReadInitialised = false
 let stopped = true
 let animationStart
 let sampleData
+let currentSample = "welcome"
 let actions = "fmt,ui,eval"
 let editor
 let errors = false
@@ -359,9 +360,22 @@ async function fetchSamples() {
   const resp = await fetch("samples/samples.json")
   sampleData = await resp.json()
   sampleData.byID = {}
+  let previous = null
   for (const section of sampleData.sections) {
-    for (const sample of section.samples) {
-      sampleData.byID[sample.id] = { ...sample, sectionTitle: section.title, sectionID: section.id }
+    for (let i = 0; i < section.samples.length; ++i) {
+      const sample = section.samples[i]
+      sampleData.byID[sample.id] = {
+        ...sample,
+        sectionTitle: section.title,
+        sectionID: section.id,
+        sectionTotal: section.samples.length,
+        sectionIndex: i + 1,
+        previous: previous,
+      }
+      if (previous) {
+        sampleData.byID[previous].next = sample.id
+      }
+      previous = sample.id
     }
   }
 }
@@ -393,14 +407,14 @@ async function handleHashChange() {
     opts = { sample: "welcome" }
     history.replaceState({}, "", "#welcome")
   }
-  const { source, crumbs } = await fetchSourceWithCrumbs(opts)
+  const { source } = await fetchSourceWithSampleTitle(opts)
 
   !editor && initEditor()
   editor.onUpdate(null)
   editor.update({ value: source, errorLines: {} })
 
   document.querySelector(".editor-wrap").scrollTo(0, 0)
-  crumbs && updateBreadcrumbs(crumbs)
+  updateSampleTitle()
   clearOutput()
   await format()
   editor.onUpdate(clearHash)
@@ -432,7 +446,7 @@ function parseHash() {
   return Object.fromEntries(entries)
 }
 
-async function fetchSourceWithCrumbs({ content, sample, source }) {
+async function fetchSourceWithSampleTitle({ content, sample, source }) {
   if (content) {
     const src = await decode(content)
     return { source: src }
@@ -443,10 +457,10 @@ async function fetchSourceWithCrumbs({ content, sample, source }) {
   }
   // sample ID is set
   const s = sampleData.byID[sample]
-  const crumbs = [s.sectionTitle, s.title]
+  currentSample = sample
   const url = `samples/${s.sectionID}/${sample}.evy`
   const src = await fetchSource(url)
-  return { crumbs, source: src }
+  return { source: src }
 }
 
 async function fetchSource(url) {
@@ -898,7 +912,10 @@ function initModal() {
     }
     modalMain.appendChild(sectionEl)
   }
-  updateBreadcrumbs([sampleData.sections[0].title, sampleData.sections[0].samples[0].title])
+  document.querySelector("#sample-selector").onclick = showSamples
+  document.querySelector("#sample-previous").onclick = showPreviousSample
+  document.querySelector("#sample-next").onclick = showNextSample
+  updateSampleTitle()
 }
 
 function hideModal() {
@@ -911,21 +928,36 @@ function showSamples() {
   samples.classList.remove("hidden")
   const modal = document.querySelector("#modal")
   modal.classList.remove("hidden")
+  samples.querySelectorAll("a").forEach((a) => a.classList.remove("highlight"))
+  samples.querySelector(`a[href$="#${currentSample}"]`)?.classList.add("highlight")
 }
 
-function updateBreadcrumbs(crumbs) {
-  const ul = document.querySelector("header ul.breadcrumbs")
-  const breadcrumbs = crumbs.map((c) => breadcrumb(c))
-  ul.replaceChildren(...breadcrumbs)
+function showPreviousSample() {
+  if (sampleData.byID[currentSample].previous) {
+    currentSample = sampleData.byID[currentSample].previous
+    history.pushState({}, "", `#${currentSample}`)
+    handleHashChange()
+  }
+}
+
+function showNextSample() {
+  if (sampleData.byID[currentSample].next) {
+    currentSample = sampleData.byID[currentSample].next
+    history.pushState({}, "", `#${currentSample}`)
+    handleHashChange()
+  }
 }
 
-function breadcrumb(s) {
-  const btn = document.createElement("button")
-  btn.textContent = s
-  btn.onclick = () => showSamples()
-  const li = document.createElement("li")
-  li.appendChild(btn)
-  return li
+function updateSampleTitle() {
+  const titleDiv = document.querySelector("#sample-title")
+  const sample = sampleData.byID[currentSample]
+  titleDiv.textContent = sample.title
+  const indexDiv = document.querySelector("#sample-index")
+  indexDiv.textContent = `${sample.sectionIndex}/${sample.sectionTotal}`
+  const prevButton = document.querySelector("#sample-previous")
+  sample.previous ? prevButton.classList.remove("hidden") : prevButton.classList.add("hidden")
+  const nextButton = document.querySelector("#sample-next")
+  sample.next ? nextButton.classList.remove("hidden") : nextButton.classList.add("hidden")
 }
 
 // --- UI: sidebar --------------------------------------------

frontend/play/samples/samples.json

@@ -18,9 +18,9 @@
       "title": "Drawing",
       "emoji": "🎨",
       "samples": [
-        { "id": "circle-rect", "title": "Circle and Rectangle" },
+        { "id": "circle-rect", "title": "Circle & Rectangle" },
         { "id": "lines", "title": "Lines" },
-        { "id": "poly", "title": "Polygon and Polyline" },
+        { "id": "poly", "title": "Polygon & Polyline" },
         { "id": "fill", "title": "Stroke and Fill" },
         { "id": "linestyle", "title": "Line Styles" },
         { "id": "text", "title": "Text" }