Adds simple browser example

Updates styles for examples
yantra-core · Dec 13, 2023 · 120951b · 120951b
1 parent a8b8b3b
commit 120951b
Show file tree

Hide file tree

Showing 2 changed files with 135 additions and 0 deletions.
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -7,12 +7,20 @@
   <title>Sutra Input Movement Example</title>
   <script src="./sutra.js"></script>
   <style>
+    body {
+      background-color: #000;
+    }
+    h1,h2,h3 {
+      color: #9a9cff;
+    }
     #output {
       font-family: Arial, sans-serif;
       margin-top: 20px;
+      color: #9a9cff;
     }
     #humanOutput {
       /* place in center of screen */
+      color: #9a9cff;
       position: absolute;
       top: 20px;
       right: 10px;

diff --git a/examples/browser/simple.html b/examples/browser/simple.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sutra Basic Setup Example</title>
+  <script src="./sutra.js"></script>
+  <style>
+    body {
+      background-color: #000;
+    }
+
+    h1 {
+      color: #9a9cff;
+    }
+
+    #output {
+      font-family: Arial, sans-serif;
+      margin-top: 20px;
+      color: #fff
+    }
+
+    #humanOutput {
+      /* place in center of screen */
+      color: #9a9cff;
+      position: absolute;
+      top: 20px;
+      right: 10px;
+      font-family: Arial, sans-serif;
+      font-size: 32px;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Sutra Simple Weather Rules</h1>
+  <div id="output"></div>
+  <pre><code id="humanOutput"></code></pre>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      let sutra = initializeSutra(); // Initialize Sutra
+      // update human readable output
+      let humanOutput = document.getElementById('humanOutput');
+      humanOutput.innerHTML = sutra.toEnglish();
+      executeSutra(sutra);
+    });
+
+    function initializeSutra() {
+      let sutra = SUTRA.createSutra();
+
+      // Define conditions
+      sutra.addCondition('isSunny', (data) => data.isSunny);
+      sutra.addCondition('isWindy', (data) => data.isWindy);
+      sutra.addCondition('isRaining', (data) => data.isRaining);
+
+      // Define nested actions
+      sutra
+        .if('isSunny')
+        .then((rules) => {
+          rules
+            .if('isWindy')
+            .then('findShelter')
+            .else('enjoySun');
+        })
+        .then('planPicnic');
+
+      sutra
+        .if('isRaining')
+        .then('stayIndoors')
+        .else((rules) => {
+          rules
+            .if('isWindy')
+            .then('wearWindbreaker')
+            .else('goForAWalk');
+        });
+
+      // Define event listeners for actions
+      sutra.on('findShelter', (data) => logOutput("It's sunny but windy. Finding shelter!"));
+      sutra.on('enjoySun', (data) => logOutput("It's a perfect sunny day. Enjoying the sun!"));
+      sutra.on('planPicnic', (data) => logOutput("Planning a picnic for the sunny day."));
+      sutra.on('stayIndoors', (data) => logOutput("It's raining. Better stay indoors."));
+      sutra.on('wearWindbreaker', (data) => logOutput("It's windy. Wearing a windbreaker."));
+      sutra.on('goForAWalk', (data) => logOutput("It's a nice day. Going for a walk."));
+
+      return sutra;
+    }
+
+    function executeSutra(sutra) {
+      // Array of test data for a week, including the day of the week
+      let weekWeather = [
+        { day: 'Monday', isSunny: true, isWindy: false, isRaining: false },
+        { day: 'Tuesday', isSunny: false, isWindy: true, isRaining: false },
+        { day: 'Wednesday', isSunny: false, isWindy: false, isRaining: true },
+        { day: 'Thursday', isSunny: true, isWindy: true, isRaining: false },
+        { day: 'Friday', isSunny: false, isWindy: false, isRaining: false },
+        { day: 'Saturday', isSunny: true, isWindy: false, isRaining: true },
+        { day: 'Sunday', isSunny: true, isWindy: false, isRaining: false }
+      ];
+
+      logOutput(`++++++++++++++++++++++++++++++++++++++++++++++`);
+      // Iterate over the weekWeather array and tick the Sutra with each day's data
+      weekWeather.forEach(dayWeather => {
+        // Constructing the emoji string based on conditions
+        let weatherEmoji = '';
+        weatherEmoji += dayWeather.isSunny ? '☀️' : '';
+        weatherEmoji += dayWeather.isWindy ? '💨' : '';
+        weatherEmoji += dayWeather.isRaining ? '🌧️' : '';
+
+        logOutput(`${weatherEmoji} ${dayWeather.day}`);
+        sutra.tick(dayWeather);
+        logOutput(`++++++++++++++++++++++++++++++++++++++++++++++`);
+      });
+    }
+
+
+
+    function logOutput(message) {
+      let output = document.getElementById('output');
+      let newElement = document.createElement('div');
+      newElement.textContent = message;
+      output.appendChild(newElement);
+    }
+  </script>
+</body>
+
+</html>