chore: update demo

demo/index.html

@@ -66,14 +66,9 @@ <h1>Perform set algebra with CSS selectors</h1>
             </div>
         </div>
 
-        <!-- <div class="row mt-5">
-            <button class="btn btn-success" id="next">
-                Next
-            </button>
-        </div> -->
         <div class="row mt-5">
             <div class="col-md-8 mx-auto">
-                <div class="code-window">
+                <div class="code-window h-100">
                     <div class="dots">
                         <div class="red"></div>
                         <div class="orange"></div>
@@ -88,6 +83,10 @@ <h1>Perform set algebra with CSS selectors</h1>
                         <tbody id="playground"></tbody>
                     </table>
                 </div>
+            </div>
+        </div>
+        <div class="row mt-5"></div>
+            <div class="col-md-4 mx-auto">
                 <div style="padding: 16px; text-align: center;">
                     <button class="btn btn-success" id="next">
                         Next

demo/index.js

@@ -22,18 +22,17 @@ let index = 0;
 
 nextButton.addEventListener('click', () => {
   if (nextButton.innerText === 'Restart') {
-    window.location.reload();
-    return;
+    index = 0;
+    nextButton.innerText = 'Next';
   }
 
-  const step = STEPS[index++];
-
   // Put comment and display snippet
-  runStep(step, codeArea, styleArea);
-  Prism.highlightElement(codeArea);
-  // Prism.highlightAll();
+  runStep(STEPS[index++], codeArea, styleArea);
 
   if (index >= STEPS.length) {
     nextButton.innerText = 'Restart';
   }
 });
+
+// Run for the 1st time
+runStep(STEPS[index++], codeArea, styleArea);

demo/steps/runner.js

@@ -1,6 +1,6 @@
 /**
  * @typedef {Object} Step
- * @property {string} comment
+ * @property {string[]} comments
  * @property {() => unknown} code
  */
 
@@ -32,22 +32,34 @@ function isCsset(source) {
  */
 // eslint-disable-next-line prettier/prettier
 export function runStep(step, codeElem, styeElem) {
-  // Show code
-  const source = step.code.toString();
-  const linesOfCode = source.split('\n').map((line, idx) => {
-    return idx > 0 ? line.replace('    ', '') : line;
-  });
-  // Put comment in code
-  linesOfCode.unshift(`// ${step.comment}`);
-  codeElem.innerHTML = linesOfCode.join('\n');
+  // Reset the style element
+  styeElem.innerText = '';
 
-  // Change color if returned expression is a Csset
-  const evalResult = eval(`(${source})()`);
-  const styleText = `${evalResult}{ background-color: ${getRandomColor()}; }`;
+  // Get comments
+  const snippet = step.comments.map((c) => `// ${c}`);
 
-  if (isCsset(evalResult)) {
-    styeElem.innerText = styleText;
-  } else {
-    styeElem.innerText = '';
+  // Add code & execute
+  const source = step.code?.toString();
+  if (source) {
+    const src = source.split('\n').map((line, idx) => {
+      return idx > 0 ? line.replace('    ', '') : line;
+    });
+    snippet.push(...src);
+
+    // Change color if returned expression is a Csset
+    const evalResult = eval(`(${source})()`);
+    const styleText = `${evalResult}{ background-color: ${getRandomColor()}; }`;
+
+    if (isCsset(evalResult)) {
+      styeElem.innerText = styleText;
+      snippet.push(`\n// selector: ${evalResult}`);
+    }
+    // else {
+    //   styeElem.innerText = '';
+    // }
   }
+  // Add snipped into code window & highlight
+  codeElem.innerHTML = snippet.join('\n');
+  // eslint-disable-next-line no-undef
+  Prism.highlightElement(codeElem);
 }

demo/steps/steps-advanced.js

@@ -3,7 +3,14 @@
 /** @type {import('./runner').Step[]} */
 export const STEPS_ADVANCED = [
   {
-    comment: 'You can combine union and instersections',
+    // eslint-disable-next-line prettier/prettier
+    comments: [
+      'Now that we saw the basics we can go for more advanced',
+      'examples.',
+    ],
+  },
+  {
+    comments: ['You can combine union and instersections'],
     code: () => {
       const quadrantOne = new Csset('.quadrant-one');
       const quadrantFour = new Csset('.quadrant-four');

demo/steps/steps-begin.js

@@ -3,67 +3,77 @@
 /** @type {import('./runner').Step[]} */
 export const STEPS_BEGIN = [
   {
-    comment: 'These are the cells with class quadrant-one',
+    comments: [
+      'Welcome to Csset demo page!',
+      '',
+      'The following snippets will show you how to use the',
+      'library and the table on the left will display a visual',
+      'representation of the results of the different set',
+      'operations.',
+    ],
+  },
+  {
+    comments: ['These are the cells with class quadrant-one'],
     code: () => {
       return new Csset('.quadrant-one');
     },
   },
   {
-    comment: 'These are the cells with class quadrant-two',
+    comments: ['These are the cells with class quadrant-two'],
     code: () => {
       return new Csset('.quadrant-two');
     },
   },
   {
-    comment: 'These are the cells with class quadrant-three',
+    comments: ['These are the cells with class quadrant-three'],
     code: () => {
       return new Csset('.quadrant-three');
     },
   },
   {
-    comment: 'These are the cells with class quadrant-four',
+    comments: ['These are the cells with class quadrant-four'],
     code: () => {
       return new Csset('.quadrant-four');
     },
   },
   {
-    comment: 'These are the cells with class circle',
+    comments: ['These are the cells with class circle'],
     code: () => {
       return new Csset('.circle');
     },
   },
   {
-    comment: 'These are the cells with class diamond',
+    comments: ['These are the cells with class diamond'],
     code: () => {
       return new Csset('.diamond');
     },
   },
   {
-    comment: 'Cells also contain a d-row attribute with the row number they have',
+    comments: ['Cells also contain a d-row attribute with the', 'row number they have'],
     code: () => {
       return new Csset('[d-row=5]');
     },
   },
   {
-    comment: 'And contain a d-col attribute with the column number they have',
+    comments: ['And contain a d-col attribute with the', 'column number they have'],
     code: () => {
       return new Csset('[d-col=50]');
     },
   },
   {
-    comment: 'Each cell of the grid has its number in a d-sum attribute',
+    comments: ['Each cell of the grid has its number in a d-sum attribute'],
     code: () => {
       return new Csset('[d-sum=50]');
     },
   },
   {
-    comment: 'Add the cell has marked if its odd number',
+    comments: ['Add the cell has marked if its odd number'],
     code: () => {
       return new Csset('[d-odd=true]');
     },
   },
   {
-    comment: 'Or even number',
+    comments: ['Or even number'],
     code: () => {
       return new Csset('[d-even=true]');
     },

demo/steps/steps-intersection.js

@@ -3,7 +3,14 @@
 /** @type {import('./runner').Step[]} */
 export const STEPS_INTERSECTION = [
   {
-    comment: 'Intersection returns a set which all elements are from both sets',
+    // eslint-disable-next-line prettier/prettier
+    comments: [
+      'Time to move to another common operation in sets which is',
+      'the intersection operation.',
+    ],
+  },
+  {
+    comments: ['Intersection returns a set which all elements are', 'from both sets'],
     code: () => {
       const quadrantOne = new Csset('.quadrant-one');
       const diamond = new Csset('.diamond');
@@ -12,7 +19,7 @@ export const STEPS_INTERSECTION = [
     },
   },
   {
-    comment: 'This is another example of intersection',
+    comments: ['This is another example of intersection'],
     code: () => {
       const quadrantOne = new Csset('.quadrant-four');
       const diamond = new Csset('.circle');
@@ -21,7 +28,7 @@ export const STEPS_INTERSECTION = [
     },
   },
   {
-    comment: 'Like unions you can calculate intersection for more than two sets',
+    comments: ['Like unions you can calculate intersection for', 'more than two sets'],
     code: () => {
       const quadrantOne = new Csset('.quadrant-one');
       const even = new Csset('[d-even=true]');

demo/steps/steps-union.js

@@ -3,7 +3,14 @@
 /** @type {import('./runner').Step[]} */
 export const STEPS_UNION = [
   {
-    comment: 'Union is a straight forward method used to join sets',
+    // eslint-disable-next-line prettier/prettier
+    comments: [
+      'Now that we are familiar with the playground let\'s see',
+      'the union operation.',
+    ],
+  },
+  {
+    comments: ['Union is a straight forward method used to join sets'],
     code: () => {
       const quadrantOne = new Csset('.quadrant-one');
       const quadrantTwo = new Csset('.quadrant-two');
@@ -12,7 +19,7 @@ export const STEPS_UNION = [
     },
   },
   {
-    comment: 'You can do an union of many sets',
+    comments: ['You can do an union of many sets'],
     code: () => {
       const quadrantOne = new Csset('.quadrant-one');
       const quadrantTwo = new Csset('.quadrant-two');