abacus.html

<style>
  
.crossed{background: #000; max-height:1px; margin-top:10px;}

.mark {
    border-bottom: 1px solid #000;
    top: -11px; /* Tweak this and the other top in equal, but opposite values */
    position: relative;
}
.offsetMark {
    position: relative;
    top: 11px; /* Tweak this and the other top in equal, but opposite values */
}   
</style>
<script>

log = (where, act)=>{
  window[where].innerHTML += `<p>${act}</p>`
}

l=console.log
var abacus = 50
var symbols = ['●', '○', '<span style="opacity:0">○</span>']


FairDemo = (ch, trans, times, tag)=>{
  //style="height:430px;font-size:24px"
  var render = function () {
    var html = ''

    var degree = 20

    var rotation = Math.floor(degree*2 / ch.length+1)
    for (var id in ch) {
      var u = ch[id]

      var bar = ''
      u[2].map(piece=>{
        bar += fill(symbols[piece[0]], piece[1])
      })

      if (bar.length < abacus) bar += fill(symbols[2], abacus-bar.length)


      html += '<p style="line-height:0px; margin: 0px; transform: rotate('+(degree-id*rotation)+'deg)"><b>'+u[0]+'</b> <span class="mark"><span class="offsetMark">' + bar + '</span></span> '
      if (id == 2) html += 'Hub'
      html += "</p>"

    }
    tag.innerHTML = '<div>'+html+'</div>'
  }
  var clone = JSON.stringify(ch)
  var i = 0

  // 30 periods timeoutes before and after transitions
  setInterval(()=>{
    i++
    if (i < 30) {

    } else if (i<=times+30) {
      trans(ch)
      render()
    } else if (i < times + 60) {
      ch = JSON.parse(clone)
      i = 0
      render()
    }

  }, 30)
  render()
}


pad=(str, len)=>str+fill(symbols[2], len-str.length)

fill=(symbol, len)=>Array(len+1).join(symbol)

resolveChannel = (insurance, delta, is_left=true) => {
  var parts = {
    // left user promises only with negative delta, scenario 3
    promised: delta < 0 ? -delta : 0,
    insured:      delta > insurance ? insurance : (delta > 0 ? delta             : 0),
    they_insured: delta > insurance ? 0         : (delta > 0 ? insurance - delta : insurance),
    // right user promises when delta goes beyond insurance, scenario 1
    they_promised: delta > insurance ? delta - insurance : 0
  }
  
  // default view is left. if current user is right, simply reverse
  if (!is_left) {
    [parts.promised, parts.insured, parts.they_insured, parts.they_promised] = 
    [parts.they_promised, parts.they_insured, parts.insured, parts.promised]
  }

  return parts
}



send = (from, to, amount=1)=>{
  if (amount > 1) {
    log('off',users[from][0]+' sends $'+amount+' to '+users[to][0]+' via hub')

    for (i=0;i<amount;i++){
      setTimeout(()=>{
        send(from, to, 1)
      },100*i)
    }

  } else {
    ch[from][1] -= amount
    ch[to][1] += amount
  }

}


slowmo = (cb, times)=>{
  for (i=0;i<times;i++){
    setTimeout(()=>{
      cb()
    },80*i)
  }
}

window.onload=()=>{
  


FairDemo([
  [1, 0, [
    [0, 5],
    [2, 0],
    [0, 5],
    [2, abacus - 10]
  ]],
  [2, 0, [
    [2, abacus-5],
    [0, 5],
    [2, 0]
  ]],
  [3, 0, [[0, 3]]],
  [4, 0, [[0, 4]]],
  [5, 0, [[1, 4]]],
],(ch)=>{
  [a, b] = [ch[0][2], ch[1][2]]
  if (a[3][1] > 0) {  
    a[3][1]--  
    a[1][1]++
  }


  if (b[0][1] > 0) {
    if(b[1][1] < 5) {
      b[1][1]++
    } else {
      b[2][1]++    
    }
    b[0][1]--
    
  }

}, abacus*2, asc2)



}

</script>



<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>

<div style="padding:200px"  id=asc></div>
<div style="padding:200px" id=asc2></div>
<div id=asc3></div>


<br><br>



</div>