JSFiddle - React, Tailwind, and code Playground

by Conor O'Brien

HTML

<h1>Junction</h1>
<h2>Input</h2>
<textarea id="input"></textarea>
<h2>Code</h2>
<textarea id="code"></textarea>
<button id="go">submit</button>

CSS

html{font-family:Constantia,monospace;}textarea,input,#code{font-family:Consolas,monospace;}#code,#input{min-height:5em;width:90%;}h1,h2{margin:0;}

JavaScript

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}


// works for binary functions
Function.prototype.vectorize = function(){
  f = this;
  return function(a, b){
    if(Array.isArray(a)){
      if(Array.isArray(b)){
        return a.map(function(e, i){ return f(e, b[i % b.length]); });
      } else return a.map(function(e){ return f(e, b); });
    } else if(Array.isArray(b)){
      return b.map(function(e, i){ return f(a, e); });
    } else return f(a, b);
  };
}

Function.prototype.limit = function(N){
  return (function(){
    return this.apply(window, Array.prototype.slice.call(arguments, 0, N));
  }).bind(this)
}

// works on monads
Function.prototype.repeat = function(N){
  return (function(e){
    while(N-->0) e = this(e);
    return e;
  }).bind(this);
}

Function.prototype.reverse = function(){
  return (function(){ return this.apply(window, Array.prototype.slice.call(arguments).reverse()); }).bind(this);
}

// inserts dyad at each index; f.insert()([a, b, c]) = f(a, f(b, c))
Function.prototype.insert = function(){
  return (function(x){ return x.reduceRight(this.reverse().limit(2)); }).bind(this);
}

// %/5 3 7  =  11.6...

function div(x, y){ return x / y; }
function add(x, y){ return x + y; }
function double(x){ return x * 2; }
function sum(){ return Array.prototype.slice.call(arguments).reduce(add); }

/* language idea

A-Z + some symbols = functions
a-z + some symbols = function modifiers

+	addition
~	reverse
/	insert
%	division

*/

var o = {"+": add, "%": div};
var p = {"~": "reverse", "/": "insert"};
var q = {"i": function(){ return prompt();}}
function parse(code){
  code = code.split("");
  var stack = [];
  code.forEach(function(e,i){
    if(o[e]) stack.push(o[e]);
    else if(p[e]) stack.push(stack.pop()[p[e]]());
  });
  return stack;
}

function final(){
	var lines = code.value.split("\n");
  var links = [];
  for(var i=0;i<lines.length;i++){
  	var line =...