JavaScript - Número del Soroban

let resourcedir = "./soroban/";

let imgfilename0 = "soroban0.gif";

let imgfilename1 = "soroban1.gif";

let imgfilenameU = "sorobanU.gif";

let imgfilenameL = "sorobanL.gif";

let imgfilenameB0 = "soroband0.gif";

let imgfilenameB1 = "soroband1.gif";

let digitsoroban;

let heavenBeads;

let earthBeads;

let digitclusters;

let unitsLabel = "百拾里拾町拾間尺寸分　百拾万阡百拾壱分厘";

let shiftkey = false;

let undoBuffer = [];

let redoBuffer = [];

let initialPatternBuffer = [];

let exitPatternBuffer = [];

let tutorialBuffer = [];

let pagePointer = 0;

let bucket = [];

let soundFlag = true;

//

//

// Bead movement

//

function mv(name) {

  let hore = name.substring(0, 2);

  let indexY = name.substring(2, 4);

  let indexX = name.substring(4);

  let img = document.images[name].src;

  if (img.indexOf(imgfilename0) < 0) {  // if rod then nop

    undoBuffer.push(encodeAbacus());

    document.getElementById("UNDO").disabled=false;

    redoBuffer = [];

    document.getElementById("REDO").disabled=true;

    playsound();

    if (hore == 'hb') {  // heaven bead

      for (i = 0; i <= heavenBeads; i++) {

        putimg(hore + indexY + i, imgfilename1);

      }

      if ((heavenBeads > 1) && shiftkey && indexX <= 1) {

        putimg(hore + indexY + 0, imgfilenameU);

        putimg(hore + indexY + 1, imgfilenameL);

      } else {

        putimg(name, imgfilename0);

      }

    } else {  // earth beads

      for (i = 0; i <= earthBeads; i++) {

        putimg(hore + indexY + i, imgfilename1);

      }

      putimg(name, imgfilename0);

    }

  }

  document.getElementById("cuenta-movida").innerText = name;

}

function putimg(objname, filename) {

  if (document.images[objname].src.indexOf(filename) < 0) {

    document.images[objname].src = resourcedir + filename;

  }

  }

//

// Reset field, and undo/redo buffers

//

function resetsoroban() {

  setsoroban('', '');

  undoBuffer = [];

  redoBuffer= [];

  document.getElementById("UNDO").disabled=true;

  document.getElementById("REDO").disabled=true;

  playsoundClear();

}

//

// Set patterns from internal-rep. (/[uVWX]+:[0-5]+/)

//

function setsoroban(heavens, earths) {

  playsound();

  let hvn = heavens.replace(/ +/g, '');

  hvn = hvn + 'u'.repeat(digitsoroban);  // benevolent process

  hvn = hvn.split('');

  let erth = earths.replace(/ +/g, '');

  erth = erth + '0'.repeat(digitsoroban);  // benevolent process

  erth = erth.split('');

  for (i = 0; i < digitsoroban; i++) {

    common = 'hb' +  ("00" +  i).slice(-2);

    switch (hvn.shift().toUpperCase()) {

      case 'X' :

        putimg(common + '0', imgfilenameU);

        putimg(common + '1', imgfilenameL);

        putimg(common + '2', imgfilename1);

        break;

      case 'W' :

        putimg(common + '0', imgfilename0);

        putimg(common + '1', imgfilename1);

        putimg(common + '2', imgfilename1);

        break;

      case 'V' :

        if (heavenBeads == 2) {

          putimg(common + '0', imgfilename1);

          putimg(common + '1', imgfilename0);

          putimg(common + '2', imgfilename1);

        } else {

          putimg(common + '0', imgfilename0);

          putimg(common + '1', imgfilename1);

        }

        break;

      default :

        if (heavenBeads == 2) {

          putimg(common + '0', imgfilename1);

          putimg(common + '1', imgfilename1);

          putimg(common + '2', imgfilename0);

        } else {

          putimg(common + '0', imgfilename1);

          putimg(common + '1', imgfilename0);

        }

        break;

    }

    common = 'eb' +  ("00" +  i).slice(-2);

    for (j = 0; j <= earthBeads; j++) {

      putimg(common + j, imgfilename1);

    }

    putimg(common + Math.min(erth.shift(), earthBeads), imgfilename0);

  }

}

//

// Undo

//

function undosoroban() {

  playsound();

  redoBuffer.push(encodeAbacus());

  document.getElementById("REDO").disabled=false;

  data = undoBuffer.pop();

  if (undoBuffer.length == 0) {

    document.getElementById("UNDO").disabled=true;

  }

  ary = data.split(':');

  setsoroban(ary[0], ary[1]);

}

//

// Redo

//

function redosoroban() {

  playsound();

  undoBuffer.push(encodeAbacus());

  document.getElementById("UNDO").disabled=false;

  data = redoBuffer.pop();

  if (redoBuffer.length == 0) {

    document.getElementById("REDO").disabled=true;

  }

  ary = data.split(':');

  setsoroban(ary[0], ary[1]);

}

//

// Generate internal-rep from field (/[uVWX]+:[0-5]+/)

//

function encodeAbacus() {

  let heavenWork = '';

  let earthWork = '';

  let result = heavenWork + ':' + earthWork;

  for (i = 0; i < digitsoroban; i++) {

    common = 'hb' +  ("00" +  i).slice(-2);

    if (heavenBeads == 2) {

      if (document.images[common+'0'].src.indexOf(imgfilenameU) >= 0) {

        heavenWork = heavenWork + 'X';

      } else if (document.images[common+'0'].src.indexOf(imgfilename0) >= 0) {

        heavenWork = heavenWork + 'W';

      } else if (document.images[common+'1'].src.indexOf(imgfilename0) >= 0) {

        heavenWork = heavenWork + 'V';

      } else {

        heavenWork = heavenWork + 'u';

      }

    } else {

      if (document.images[common+'0'].src.indexOf(imgfilename0) >= 0) {

        heavenWork = heavenWork + 'V';

      } else {

        heavenWork = heavenWork + 'u';

      }

    }

    common = 'eb' +  ("00" +  i).slice(-2);

    j = 0;

    while (document.images[common+j].src.indexOf(imgfilename1) >= 0) {

      j++;

    }

    earthWork = earthWork + j;

  }

  return heavenWork+':'+earthWork;

}

//

// Draw field (number of heaven beads, number of earth beads, digits, separator digits)

//

function drawAbacus(numOf5s, numOf1s, numOfDigits, numOfClusters, unitsLabel) {

  let pointOffset = Math.trunc(numOfDigits / 2)  % numOfClusters;

  heavenBeads = numOf5s;

  earthBeads = numOf1s;

  digitsoroban = numOfDigits;

  digitclusters = numOfClusters;

  let html = "<TABLE BORDER='0' CELLPADDING='0' CELLSPACING='0' STYLE='border:16px ridge brown;background-color:#cccccc;'>\n";

  html += "<TR ALIGN='center' VALIGN='bottom'><TD NOWRAP>\n";

  for (let j = 0; j <= numOf5s; j++) {		// 5 beads  mv("hb[00][0-2]")

    for (let i = 0; i < numOfDigits; i++) {

      html += "<A HREF='JavaScript:mv(";

      html += '"hb' + ("00" +  i).slice(-2) + j + '");';	// i=1(A), i=2(B), ...

      html += "'>";			// <A HREF='JavaScript:mv('hb[00][0-2]');'><IMG NAME='hb[00][0-2]' src='./soroban1' BORDER='0' VSPACE='0' HSPACE='0'></a><BR>.....

      html += "<IMG NAME='hb" + ("00" +  i).slice(-2) + j + "' src='";

      if (j < numOf5s) {

        html += resourcedir + imgfilename1;		//tama

      } else {

        html += resourcedir + imgfilename0;		//jiku

      }

      html += "' BORDER='0' VSPACE='0' HSPACE='0'></a>";

    }

    html += "<BR>\n";

  }

  html += "</TD>\n</TR>\n<TR ALIGN='center' VALIGN='middle'>\n";

  if (numOf5s == 2) {

    beam = makeBeamImage(numOfDigits, unitsLabel);

    html += "<TD NOWRAP STYLE='background-color:black;'>";

    html += "<IMG src='" + beam + "' BORDER='0' VSPACE='0' HSPACE='0'>";

    html += "</TD>\n</TR>\n<TR ALIGN='center' VALIGN='top'>\n";

  } else {

    html += "<TD NOWRAP STYLE='background-color:black;'>";

    for (let i = 0; i < numOfDigits; i++) {

      html += "<IMG src='";

      if ((i - pointOffset) % numOfClusters == 0) {

        html += resourcedir + imgfilenameB1;		// bar with dot

      } else {

        html += resourcedir + imgfilenameB0;		// bar without dot

      }

      html += "' BORDER='0' VSPACE='0' HSPACE='0'>";

    }

    html += "</TD>\n</TR>\n<TR ALIGN='center' VALIGN='top'>\n";

  }

  html += "<TD NOWRAP>";

  for (let j = 0; j <= numOf1s; j++) {					// 1 beads  mv("eb[00][0-4]")

    for (let i = 0; i < numOfDigits; i++) {

      html += "<A HREF='JavaScript:mv(";

      html += '"eb' + ("00" +  i).slice(-2) + j + '");';

      html += "' >";

      html += "<IMG NAME='eb" + ("00" +  i).slice(-2) + j + "' src='";

      if (j > 0) {

        html += resourcedir + imgfilename1;		// tama

      } else {

        html += resourcedir + imgfilename0;		// jiku

      }

      html += "' BORDER='0' VSPACE='0' HSPACE='0'></a>";

    }

    html += "<BR>\n";

  }

  html += "</TD>\n</TR>\n</TABLE>\n";

// Index characters

  html += "<TABLE BORDER='0' CELLPADDING='0' CELLSPACING='0'>\n";

  html += "<TR ALIGN='center' VALIGN='top'>\n<TD NOWRAP>\n";

  for (let i = 0; i < numOfDigits; i++) {

    html += "<INPUT TYPE='text' NAME='IDX" + String.fromCharCode(64 + i) + "' SIZE='1' VALUE='" + String.fromCharCode(65+i) + "' MAXLENGTH='1' DISABLED='DISABLED' STYLE='font-size:20px;line-height:100%;width:50px;border:0 solid white;text-align:center;'>";

  }

  html += "</TD>\n</TR>\n</TABLE>\n";

//  alert(html);

  document.getElementById("sorofield").innerHTML = html;

 }

//

//

// Play sound

//

function playsound(sourcename) {

  if (soundFlag) {

    document.getElementById("se_soroban").currentTime = 0;

    document.getElementById("se_soroban").play();

  }

}

//

// Play sound (Clear)

//

function playsoundClear(sourcename) {

  if (soundFlag) {

    document.getElementById("se_sorobanClear").currentTime = 0;

    document.getElementById("se_sorobanClear").play();

  }

}

//

// Generate internal-rep from /[0-9]+/ format (short-hand rep. used in the tutorial doc.)

function interpret(num) {

      num = num.replace(/ +/g, '');

      num = num + '0'.repeat(digitsoroban);     // benevolent process

      num = num.split('');

      let hvn = '';

      let erth = '';

      for (i = 0; i < digitsoroban; i++) {

        switch (num[i]) {

          case '0' :

            hvn = hvn + 'u';

            erth = erth + '0';

            break;

          case '1' :

            hvn = hvn + 'u';

            erth = erth + '1';

            break;

          case '2' :

            hvn = hvn + 'u';

            erth = erth + '2';

            break;

          case '3' :

            hvn = hvn + 'u';

            erth = erth + '3';

            break;

          case '4' :

            hvn = hvn + 'u';

            erth = erth + '4';

            break;

          case '5' :

            hvn = hvn + 'V';

            erth = erth + '0';

            break;

          case '6' :

            hvn = hvn + 'V';

            erth = erth + '1';

            break;

          case '7' :

            hvn = hvn + 'V';

            erth = erth + '2';

            break;

          case '8' :

            hvn = hvn + 'V';

            erth = erth + '3';

            break;

          case '9' :

            hvn = hvn + 'V';

            erth = erth + '4';

            break;

          default :

        }

      }

       return hvn + ':' + erth;

    }

function soundToggle() {

  let elem = document.getElementById("soundFlag");

  soundFlag = elem.checked;

}

function makeBeamImage(numOfRods, unitsLabel) {

    let unitWidth = 50;

    let unitHeight = 20;

    let canvas = document.createElement("canvas");

    canvas.width = numOfRods * unitWidth;

    canvas.height = unitHeight;

    let ctx = canvas.getContext("2d");

    ctx.font = "16px 'Baoli SC', serif";

    let metric = ctx.measureText("壱");

    let baseline = unitHeight * 0.7;

    ctx.fillStyle = "white";

    ctx.fillRect(0, 0, numOfRods * unitWidth, unitHeight);

    ctx.beginPath();

    ctx.fillStyle = "black";

    ctx.lineWidth = 3;

    ctx.moveTo(0, 0);

    ctx.lineTo(unitWidth * numOfRods, 0);

    ctx.moveTo(0, unitHeight);

    ctx.lineTo(unitWidth * numOfRods, unitHeight);

    ctx.stroke();

    for (let i = 0; i < numOfRods; i++) {

      ctx.fillText(unitsLabel.substr(i, 1),

        (i * unitWidth) + (unitWidth / 2) - (ctx.measureText(unitsLabel.substr(i, 1)).width / 2),

        baseline);

    }

    return canvas.toDataURL();

}

html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">

<meta name="keywords" content="算盤,JavaScript">

<meta name="originalAuthor" content="中川雅央（滋賀大学）,Masao NAKAGAWA">

<meta name="modifiedBy" content="Axel Cotón Gutiérrez">

<link rel="icon" href="soroban/sorobangreen.jpeg">

<title>Soroban Viewer</title>

<style>

  #number-display {

    font-size: 48px;

    margin-top: 20px;

  }

</style>

</head>

<body onload="drawAbacus(1, 4, 1);">

  <form>

    <div style="float: right;">

    </div>

    <div id="cuenta-movida">A</div>

    <div id="prueba">b</B></div>

  </form>

  <form>

    <div align="center">

      <br>

      <input type="button" name="Resetear" value="Resetar" style="font-size:12pt;" onclick="resetsoroban('', '');">

      <input type="button" id="UNDO" name="Deshacer" value="<< Deshacer" style="font-size:12pt;" disabled="true" onclick="undosoroban('', '');">

      <input type="button" id="REDO" name="Rehacer" value="Rehacer >>" style="font-size:12pt;" disabled="true" onclick="redosoroban('', '');">

      <input type="checkbox" id="soundFlag" checked="checked" onclick="soundToggle();">Sonido

    <audio id="se_soroban" preload="auto">

      <source src="./soroban/soroban.mp3" type="audio/mp3">

    </audio>

    <audio id="se_sorobanClear" preload="auto">

      <source src="./soroban/sorobanClear.mp3" type="audio/mp3">

    </audio>

      <br>

      <br>

    </div>

    <div align="center" id="sorofield"></div>

  </form>

</body>

</html>