chore: add advanced example in demo

david-luna · Sep 8, 2024 · 117645f · 117645f
1 parent 727d8b6
commit 117645f
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 25 deletions.
diff --git a/demo/bundle.js b/demo/bundle.js
diff --git a/demo/index.html b/demo/index.html
@@ -23,8 +23,12 @@
         border: 1px solid;
       }
       .container {
+        display: flex;
         text-align: center;
       }
+      .item {
+        flex: 1;
+      }
       #code {
         text-align: initial;
       }
@@ -36,20 +40,22 @@
   </head>
   <body>
     <div class="container">
-      <table class="item">
-        <tbody id="playground"></tbody>
-      </table>
+      <div class="item">
+        <table>
+          <tbody id="playground"></tbody>
+        </table>
+      </div>
       <div class="item">
         <p id="comment">
           Csset is a utility class to treat CSS selector like sets of elements.
           The following grid contains cells with different classes and attributes and we can use CSS selectors
           to define different sets of cells.
         </p>
+        <button id="next">Next</button>
         <pre>
           <code class="language-javascript" id="code">
           </code>
         </pre>
-        <button id="next">Next</button>
       </div>
     </div>
     <script src="./bundle.js"></script>

diff --git a/demo/index.js b/demo/index.js
@@ -16,7 +16,7 @@ const nextButton = document.querySelector('#next');
 
 // Prepare the playground
 // Size MUST be odd number
-const playgroundSize = 101;
+const playgroundSize = 51;
 const playground = document.querySelector('#playground');
 setPlayground(playground, playgroundSize);
 

diff --git a/demo/steps/index.js b/demo/steps/index.js
@@ -1,11 +1,13 @@
 import { STEPS_BEGIN } from './steps-begin.js';
 import { STEPS_UNION } from './steps-union.js';
 import { STEPS_INTERSECTION } from './steps-intersection.js';
+import { STEPS_ADVANCED } from './steps-advanced.js';
 
 export * from './runner.js';
 // eslint-disable-next-line prettier/prettier
 export const STEPS = [
   ...STEPS_BEGIN,
   ...STEPS_UNION,
   ...STEPS_INTERSECTION,
+  ...STEPS_ADVANCED,
 ];
diff --git a/demo/steps/steps-advanced.js b/demo/steps/steps-advanced.js
@@ -0,0 +1,15 @@
+/* eslint-disable no-undef */
+
+/** @type {import('./runner').Step[]} */
+export const STEPS_ADVANCED = [
+  {
+    comment: 'You can combine union and instersections',
+    code: () => {
+      const quadrantOne = new Csset('.quadrant-one');
+      const quadrantFour = new Csset('.quadrant-four');
+      const circle = new Csset('.circle');
+
+      return quadrantOne.union(quadrantFour).intersection(circle);
+    },
+  },
+];
diff --git a/demo/steps/steps-intersection.js b/demo/steps/steps-intersection.js
@@ -12,30 +12,22 @@ export const STEPS_INTERSECTION = [
     },
   },
   {
-    comment: 'Like unions you can calculate intersection for more than two sets',
+    comment: 'This is another example of intersection',
     code: () => {
-      const quadrantOne = new Csset('.quadrant-one');
-      const even = new Csset('[d-even=true]');
-      const diamond = new Csset('.diamond');
+      const quadrantOne = new Csset('.quadrant-four');
+      const diamond = new Csset('.circle');
 
-      return quadrantOne.intersection(even).intersection(diamond);
+      return quadrantOne.intersection(diamond);
     },
   },
   {
-    comment: 'A bigger intersection',
+    comment: 'Like unions you can calculate intersection for more than two sets',
     code: () => {
-      const quadrantFour = new Csset('.quadrant-four');
+      const quadrantOne = new Csset('.quadrant-one');
+      const even = new Csset('[d-even=true]');
       const diamond = new Csset('.diamond');
-      let result = quadrantFour;
 
-      for (let i = 0; i < 50; i++) {
-        if (i % 2 === 0) {
-          const s = new Csset(`[d-col=${i}]`);
-          result = result.intersection(s);
-        }
-      }
-
-      return result.intersection(diamond);
+      return quadrantOne.intersection(even).intersection(diamond);
     },
   },
 ];