Binary - The Topiary

Binary

http://topia.wikidot.com/local--files/binary/pocketmonster_emerald_savedata_jp_sample.sav

<head>
  <link rel="stylesheet" href="./3">
</head>
<body>
  <label class="fLabel">.sav
    <input type="file" id="savefile" />
  </label>
  <div id="content"></div>
  <script src="./2"></script>
</body>

var Sav2Binary = file => new Promise(r => {
  var reader = new FileReader();
  reader.onload = _ => {
    var u = new Uint8Array(reader.result), a = new Array(u.length), i = u.length;
    while (i--) (a[i] = (u[i] < 16 ? '0' : '') + u[i].toString(16));
    r(a);
  };
  reader.readAsArrayBuffer(file);
});
 
// main
var file = document.querySelector('#savefile');
var content = document.querySelector('#content');
var label = document.querySelector('.fLabel');
 
var _open;
var _parent = index => {
  var wrap = document.createElement('div');
  wrap.classList.add('binBox');
  content.appendChild(wrap);
 
  var link = document.createElement('a');
  link.classList.add('folder');
  wrap.appendChild(link);
  link.innerText = `${index} (0x${index.toString(16)})`;
 
  var cont = document.createElement('div');
  cont.classList.add('cont');
  wrap.appendChild(cont);
  cont.__wrap__ = wrap;
  cont.__link__ = link;
  cont.__list__ = [];
 
  link.onclick = e => {
    if(!_open) {
      _open = wrap;
      _open.classList.add('open');
    }
    else if(_open != wrap) {
      _open.classList.remove('open');
      _open = wrap;
      _open.classList.add('open');
    }
    else {
      _open.classList.remove('open');
      _open = null;
    }
  };
 
  return cont;
}
file.onchange = async _ => {
  var f = _.target.files[0];
  var bin = await Sav2Binary(f);
  label.dataset.name = f.name.match(/^(.+?)(\.[a-z\d]+?|)$/i)[1];
  content.innerHTML = '';
  var parent;
  bin.forEach((v, i) => {
    var _i = i % 256, x = _i % 16, y = Math.floor(_i / 16);
    if(!_i) {
      parent = _parent(i);
    }
    var input = document.createElement('input');
    input.maxlength = 2;
    input.pattern = '[0-9a-fA-F]{2}';
    input.value = v;
    input.title = `${i} (0x${i.toString(16)})`;
    input.__link__ = parent.__link__;
    input.__list__ = parent.__list__;
    input.setAttribute('style', `
      grid-column: ${x + 1} / ${x + 2};
      grid-row: ${y + 1} / ${y + 2};
    `);
    parent.appendChild(input);
    parent.__list__.push(input);
    if(input.value != '00') {
      input.classList.add('hl');
      parent.__link__.dataset.fill = '*';
    }
    input.onchange = e => {
      if(e.target.value != '00') {
        e.target.classList.add('hl');
        e.target.__link__.dataset.fill = '*';
      }
      else {
        e.target.classList.remove('hl');
        var empty = !e.target.__list__
          .find(v => v.value != '00');
        if(empty) {
          e.target.__link__.dataset.fill = '';
        }
      }
    }
  });
};

.fLabel::before {
  content: attr(data-name);
}
.fLabel {
  background: #fff;
  box-shadow: 0 0 3px #aaa;
  color: #888;
  cursor: pointer;
  display: inline-block;
  font-family: Courier,monospace;
  padding: .5em 1em;
  text-shadow: 0 0 2px #aaa;
  transition: background .25s,color .25s,text-shadow .25s;
}
.fLabel:active,
.fLabel:hover {
  background: #6767a9;
  color: #fff;
  text-shadow: 0 0 2px #fff;
}
.fLabel > input {
  display: none;
}
#content {
  border: 1px solid #aaa;
  font-family: Courier,monospace;
  font-size: .6em;
  padding: 0.25em;
}
#content .binBox {
}
#content .binBox .cont {
  display: none;
}
#content .binBox.open .cont {
  display: grid;
  grid-template-columns: repeat(16,2.5em);
  grid-template-rows: repeat(16,2.5em);
}
#content .binBox.open .cont input {
  border: none;
  border-radius: 0;
  box-shadow: inset 0 0 2px #aaa;
  flex-grow: 1;
  font-family: Courier,monospace;
  font-size: .9em;
  margin: 0;
  outline: none !important;
  padding: .5em .25em;
  text-align: center;
  width: 100%;
}
#content .binBox.open .cont input:nth-child(odd) {
  background: #ededed;
}
#content .binBox.open .cont input.hl {
  color: #b01;
  font-weight: bold;
}
#content .binBox .folder {
  color: #b01;
  cursor: pointer;
  font-weight: bold;
  text-decoration: none;
}
#content .binBox .folder:hover {
  text-decoration: underline;
}
#content .binBox .folder::before {
  content: '+ ';
}
#content .binBox.open .folder::before {
  content: '- ';
}
#content .binBox .folder::after {
  content: ' ' attr(data-fill);
}

page revision: 47, last edited: 14 Jan 2022 12:18

Edit Rate (0) Tags Discuss History Files Print Site tools + Options

The Topiary

yes the bees >:)