From 8ca850f9fe10fc0755436aabb94b29e40eca1d19 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 6 Apr 2023 13:00:44 +0200
Subject: [PATCH] improve query demo + headings

---
 iclc2023/slides/src/MiniComparison.jsx        |  6 ++-
 iclc2023/slides/src/QueryDemo.jsx             | 45 +++++++++++++++++++
 iclc2023/slides/src/SyntaxComparison.jsx      | 10 +++--
 iclc2023/slides/src/slides/02-1.mdx           |  2 +-
 iclc2023/slides/src/slides/02-2.mdx           |  2 -
 iclc2023/slides/src/slides/02-3.mdx           |  1 -
 iclc2023/slides/src/slides/events-audio.mdx   |  2 +-
 .../slides/src/slides/patterns-events.mdx     | 19 ++------
 8 files changed, 61 insertions(+), 26 deletions(-)
 create mode 100644 iclc2023/slides/src/QueryDemo.jsx

diff --git a/iclc2023/slides/src/MiniComparison.jsx b/iclc2023/slides/src/MiniComparison.jsx
index c2c41994b..1196681d3 100644
--- a/iclc2023/slides/src/MiniComparison.jsx
+++ b/iclc2023/slides/src/MiniComparison.jsx
@@ -14,7 +14,11 @@ function MiniComparison() {
   const [step, setStep] = useState(1);
   return (
     <>
-      <h1>From Mini Notation to JavaScript</h1>
+      <h1>
+        Mini Notation -&gt; JavaScript
+        <br />
+        <small>External DSL</small>
+      </h1>
       <div className="not-prose">
         {snippets.slice(0, step).map(([a, b, label], i) => {
           const isActive = i === step - 1;
diff --git a/iclc2023/slides/src/QueryDemo.jsx b/iclc2023/slides/src/QueryDemo.jsx
new file mode 100644
index 000000000..9a55fe0b1
--- /dev/null
+++ b/iclc2023/slides/src/QueryDemo.jsx
@@ -0,0 +1,45 @@
+import { SlideRepl } from './SlideRepl.jsx';
+import Highlight from './Highlight.jsx';
+import { useState } from 'react';
+
+const snippets = [
+  [<SlideRepl tune={`sound("bd [hh sd]").crush(4).log()`} hideHeader />, 'Logging Events'],
+  [
+    <>
+      <Highlight
+        code={`sound("bd [hh sd]").crush(4) // pattern
+.queryArc(0, 1)`}
+        language="javascript"
+      />
+      <Highlight
+        language="json"
+        code={`[
+  "0/1 -> 1/2 | sound:bd", 
+  "1/2 -> 3/4 | sound:hh", 
+  "3/4 -> 1/1 | sound:sd"
+]`}
+      />
+    </>,
+    'Querying Events Manually',
+  ],
+];
+
+function QueryDemo() {
+  const [step, setStep] = useState(1);
+  return (
+    <div className="not-prose">
+      {snippets.slice(0, step).map(([snippet, label], i) => {
+        const isActive = i === step - 1;
+        return (
+          <div key={i} className={`border-l-4 pl-8 border-gray-500 py-4 ${isActive ? 'p-4 border-yellow-500' : ''}`}>
+            <h3 className="pb-4">{label}</h3>
+            {snippet}
+          </div>
+        );
+      })}
+      {step < snippets.length && <button onClick={() => setStep((r) => r + 1)}>next</button>}
+    </div>
+  );
+}
+
+export default QueryDemo;
diff --git a/iclc2023/slides/src/SyntaxComparison.jsx b/iclc2023/slides/src/SyntaxComparison.jsx
index d884ae4ee..623323d9b 100644
--- a/iclc2023/slides/src/SyntaxComparison.jsx
+++ b/iclc2023/slides/src/SyntaxComparison.jsx
@@ -43,6 +43,11 @@ function SyntaxComparison() {
   const [step, setStep] = useState(1);
   return (
     <>
+      <h1>
+        Haskell -&gt; JavaScript
+        <br />
+        <small>Internal DSL / Fluent Interface</small>
+      </h1>
       <div className=" not-prose justify-start items-start">
         {/* <div className="grid grid-cols-2">
           <div>Tidal</div>
@@ -51,10 +56,7 @@ function SyntaxComparison() {
         {snippets.slice(0, step).map(([hs, js, label], i) => {
           const isActive = i === step - 1;
           return (
-            <div
-              key={i}
-              className={`border-l-4 pl-8 border-gray-500 py-4 ${isActive ? 'p-4 border-yellow-500' : ''}`}
-            >
+            <div key={i} className={`border-l-4 pl-8 border-gray-500 py-4 ${isActive ? 'p-4 border-yellow-500' : ''}`}>
               <h3 className="pb-4">{label}</h3>
               <div>
                 <div className="flex space-x-4">
diff --git a/iclc2023/slides/src/slides/02-1.mdx b/iclc2023/slides/src/slides/02-1.mdx
index e8db1d394..d826a386e 100644
--- a/iclc2023/slides/src/slides/02-1.mdx
+++ b/iclc2023/slides/src/slides/02-1.mdx
@@ -1,3 +1,3 @@
-# TidalCycles Port
+# Haskell -> Python -> JavaScript
 
 ![ports](./img/ports.png)
\ No newline at end of file
diff --git a/iclc2023/slides/src/slides/02-2.mdx b/iclc2023/slides/src/slides/02-2.mdx
index c1847450c..483dbdbd0 100644
--- a/iclc2023/slides/src/slides/02-2.mdx
+++ b/iclc2023/slides/src/slides/02-2.mdx
@@ -1,5 +1,3 @@
 import SyntaxComparison from '../SyntaxComparison.jsx';
 
-# From Haskell to JavaScript
-
 <SyntaxComparison />
diff --git a/iclc2023/slides/src/slides/02-3.mdx b/iclc2023/slides/src/slides/02-3.mdx
index 8e924e502..dbebf3d57 100644
--- a/iclc2023/slides/src/slides/02-3.mdx
+++ b/iclc2023/slides/src/slides/02-3.mdx
@@ -1,6 +1,5 @@
 # Systems Comparison
 
-
 tidal: keyboard -> editor -> tidal plugin -> superdirt -> supercollider -> speakers
 
 strudel: keyboard -> repl -> speakers
diff --git a/iclc2023/slides/src/slides/events-audio.mdx b/iclc2023/slides/src/slides/events-audio.mdx
index 415051100..62d904541 100644
--- a/iclc2023/slides/src/slides/events-audio.mdx
+++ b/iclc2023/slides/src/slides/events-audio.mdx
@@ -2,6 +2,6 @@ import { SlideRepl } from '../SlideRepl.jsx';
 import Highlight from '../Highlight.jsx';
 import EventsDemo from '../EventsDemo.jsx';
 
-# From Values to Sound
+# Webaudio Output: Values -> Sound
 
 <EventsDemo />
diff --git a/iclc2023/slides/src/slides/patterns-events.mdx b/iclc2023/slides/src/slides/patterns-events.mdx
index d0b96a86b..6b5b1f24b 100644
--- a/iclc2023/slides/src/slides/patterns-events.mdx
+++ b/iclc2023/slides/src/slides/patterns-events.mdx
@@ -1,18 +1,5 @@
-import { SlideRepl } from '../SlideRepl.jsx';
-import Highlight from '../Highlight.jsx';
+import QueryDemo from '../QueryDemo.jsx';
 
-# From Patterns to Events
+# Patterns -> Events
 
-<SlideRepl tune={`sound("bd [hh sd]").log()`} hideHeader punchcard />
-
-query = get events within time arc. event = time + value
-
-<Highlight code={`sound("bd [hh sd]").queryArc(0, 1)`} language="javascript" />
-
-```plaintext
-[
-  "0/1 -> 1/2 | sound:bd",
-  "1/2 -> 3/4 | sound:hh",
-  "3/4 -> 1/1 | sound:sd",
-]
-```
+<QueryDemo />