<div class="container">
  <div class="actions">
    <button onclick="r2d2.run();">RUN</button>
    <button onclick="r2d2.stop();">STOP</button>
    <button onclick="r2d2.clearConsole();">CLEAR CONSOLE</button>
  </div>
  <div class="console"></div>
</div>
@mixin flexbox(
  $display: flex,
  $direction: row,
  $placeContent: null,
  $placeItems: null,
  $wrap: nowrap,
  $shrink: 1,
  $grow: 0,
  $alignContent: null,
  $justifyContent: null,
  $alignItems: null,
  $justifyItems: null) {

    display: $display;
    flex-direction: $direction;
    
    @if $placeContent == null {
      @if $alignContent   { align-content: $alignContent; }
      @if $justifyContent { justify-content: $justifyContent; }
    } @else {
      place-content: $placeContent;
    }
    
    @if $placeItems == null {
      @if $alignItems   { align-items: $alignItems; }
      @if $justifyItems { justify-items: $justifyItems; }
    } @else {
      place-items: $placeItems;
    }

    flex-wrap: $wrap;
    flex-shrink: $shrink;
    flex-grow: $grow;
}
html, body {
  width:       100%;
  height:      100%;
  padding:     0;
  margin:      0;
  background:  #4a4a4a;
  color:       lawngreen;
  font-family: 'Roboto Mono', monospace;
  overflow:    auto;
  @include flexbox($placeContent: flex-start, $placeItems: center, $direction: column);
  
  .console {
    background: black;
    padding: 1rem;
    overflow: auto;
    margin: 1rem 0;
    height: 75vh;
    width: 75vw;
  }
  
  button {
    outline: none;
    background: lawngreen;
    color: black;
    border: none;
    margin: 1rem 0 0 0;
  }
}
View Compiled
/** console html element */
const consoleElement = document.querySelector('.console');
/**
 _______  ___             ___  _______ 
|   _   ||   |           |   ||       |
|  |_|  ||   |           |   ||  _____|
|       ||   |           |   || |_____ 
|       ||   |  ___   ___|   ||_____  |
|   _   ||   | |   | |       | _____| |
|__| |__||___| |___| |_______||_______|

@desc   a script to automate js method run
@author nicolacastellanidev@gmail.com
*/
function AI(...bindings) {
  if (!bindings) {
    throw new Error('AI cannot run without bindings');
  }
  this.bindings = bindings;
}

AI.prototype = {
  running: false,
  /** @desc run a random binding with random parameters*/
  run() {
    this.running = true;
    /** get a random method to call with random params */
    const randomBindingIndex = Math.floor(Math.random() * this.bindings[0].length);
    const binding = this.bindings[0][randomBindingIndex];
    const randomParamIndex = Math.floor(Math.random() * binding.withParams.length);
    
    /** call random binding */
    try {
      this.log(`>>> SIMULATING *** ${binding.method.name} *** WITH PARAMS *** ${Object.values(binding.withParams[randomParamIndex])} ***`);
      binding.method.call(this, ...Object.values(binding.withParams[randomParamIndex]));
    } catch (ex) {
      this.log(`>>> SIMULATING *** ${binding.method.name} *** WITH PARAMS *** ${binding.withParams[randomParamIndex]} ***`);
      this.log(`>>> ERROR: ${ex.message}`);
    }
    /** then set a random timeout for the next call */
    this.runTimeout = setTimeout(() => {
      this.run();
    }, (Math.floor(Math.random() * 5) + 2) * 1000);
  },
  /** @desc stop the AI execution */
  stop() {
    this.running = false;
    this.log(`>>> SIMULATION STOPPED`);
    clearTimeout(this.runTimeout);
  },
  /** @desc log method - appen a string to the console html element */
  log(what) {
    consoleElement.innerHTML += `${what}</br>`
  },
  /** @desc empty the console */
  clearConsole() {
    consoleElement.innerHTML = ``;
  }
};

/**
* FAKE METHODS IMPLEMENTATION
*/
const fakeMethod = (url) => {
  r2d2.log(`A fakeMethod has been called with url: ${url}`);
}

const sum = (a, b) => {
  r2d2.log(`The sum is: ${a + b}`);
}

const diff = (a, b) => {
  r2d2.log(`The diff is: ${a - b}`);
}

/**
* AI INITIALIZATION
*/
const r2d2 = new AI(
  [
    {
      method: fakeMethod,
      withParams: [
        {url: '/simulate?action=1'},
        {url: '/simulate?action=2'},
      ]
    },
    {
      method: sum,
      withParams: [
        {a: 1, b: 1},
        {a: 1, b: 3}
      ]
    },
    {
      method: diff,
      withParams: [
        {a: 1, b: 1},
        {a: 3, b: 5}
      ]
    }
  ]
);

/**
Currently you can run r2d2 with the method r2d2.run(); but in this example you need to click on the right button
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.