<h2>Ovm</h2>
 body, html {
    font-family: monospace;
    font-weight: 100;
    padding: 10px;
    font-size: 20px;
    background: white;
  }
 
var chars = 'o|^'.split('');

var off = (a, b) => {
  if (a === b) return 1;
  if (Math.abs(a - b) === 1) return 2;
  if (Math.abs(a - b) === 2) return 5;
};

var add = (a, b) => {
  var ai = chars.indexOf(a),
      bi = chars.indexOf(b), ti, or;
  if (ai > bi) {
    ti = ai; ai = bi;  bi = ti;
  }
  or = off(ai, bi);
  return chars[(bi + or) % 3];
};

var solve = (a, b) => {
  var s = `${a}${b} = ${add(a, b)}`;
  document.body.innerHTML += s + '<br>';
}

var chain = (s) => {
   var rr = s + ' = ';
  s = s.split('');
  var st = [], lst, ii;
 
  for (var i = 0; i < s.length; i++) {
    ii = i;
    if (i.toString().length === 1) {
      ii = '0' + i;  
    }
    if (lst && st.length == 0) {
      st.push(lst);
      st.push(s[i]);
      lst = add(st[0], st[1]);
      rr += `<br> ${ii}) ${st[0]} ${st[1]} = ${lst}`;
      st = [];
    } else if (st.length < 2) {
      st.push(s[i]); 
      console.log('push', st, st.length);
			if (st.length === 2) {
        lst = add(st[0], st[1]);
        rr += `<br> ${ii}) ${st[0]} ${st[1]} = ${lst}`;
        st = [];
      }
    }
  }
  document.body.innerHTML += rr + '<br><br>';
	return lst;
};

document.body.innerHTML += ' o | ^<br><br>';

solve('o', 'o');
solve('o', '|');
solve('|', '|');
solve('|', '^');
solve('^', '^');
solve('^', 'o');
document.body.innerHTML += '<br>';

// chain(`^|^|^ooo|^o|`);

chain(`o^o^|o`);

chain(`o^o|oo`);







View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.