TW Converter 1.0: convert Textwall.cc art to Tw.2s4.me format

(function(){
  if(document.getElementById('twHud')) return; // Prevent multiple HUDs

  // HUD container
  const hud = document.createElement('div');
  hud.id = 'twHud';
  hud.style.cssText = `
    position: fixed;
    top: 50px;
    left: 50px;
    width: 400px;
    height: 350px;
    background: #2f2f2f;  /* dark grey background */
    color: #e0e0e0;       /* light grey text */
    border: 2px solid #555;
    border-radius: 8px;
    padding: 10px;
    z-index: 99999;
    font-family: monospace;
    user-select: none;
    cursor: default;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  `;
  hud.innerHTML = `
    <div id="twHudHeader" style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: grab;
        margin-bottom: 8px;
        font-weight: bold;
        color: #e0e0e0;
    ">
        <span>TW Converter HUD</span>
        <div>
            <button id="clearHud" style="
                background: #555;
                border: none;
                color: #e0e0e0;
                font-weight: bold;
                cursor: pointer;
                border-radius: 3px;
                margin-right: 5px;
            ">Clear</button>
            <button id="closeHud" style="
                background: #d9534f;
                border: none;
                color: white;
                font-weight: bold;
                cursor: pointer;
                border-radius: 3px;
            ">X</button>
        </div>
    </div>

    <textarea id="newformat" placeholder="Paste text from Textwall.cc here" style="width:100%; flex:1; resize:none; background:#3a3a3a; color:#e0e0e0; border:1px solid #555; padding:5px;"></textarea>
    <br>
    <input type="checkbox" id="removeoverline" checked><span>remove overline</span>
    <br><br>
    <button id="convertbtn" style="width:100%; padding:5px; background:#5cb85c; color:white; border:none; border-radius:3px; cursor:pointer;">Convert</button>
    <br><br>
    <button id="aboutBtn" style="width:100%; padding:5px; margin-bottom:5px; background:#0275d8; color:white; border:none; border-radius:3px; cursor:pointer;">About</button>
    <textarea id="oldformat" placeholder="Old format will appear here" readonly style="width:100%; flex:1; resize:none; background:#3a3a3a; color:#e0e0e0; border:1px solid #555; padding:5px;"></textarea>
    <button id="selectallbtn" style="width:100%; padding:5px; margin-top:5px; background:#777; color:white; border:none; border-radius:3px; cursor:pointer;">Select All</button>
    <div id="resizeHandle" style="
      width: 15px;
      height: 15px;
      background: #555;
      position: absolute;
      right: 0;
      bottom: 0;
      cursor: se-resize;
      border-bottom-right-radius: 8px;
    "></div>
  `;
  document.body.appendChild(hud);

  // Drag HUD
  const header = document.getElementById('twHudHeader');
  header.onmousedown = function(e) {
      let shiftX = e.clientX - hud.getBoundingClientRect().left;
      let shiftY = e.clientY - hud.getBoundingClientRect().top;

      function moveAt(pageX, pageY) {
          hud.style.left = pageX - shiftX + 'px';
          hud.style.top = pageY - shiftY + 'px';
      }

      function onMouseMove(e) {
          moveAt(e.pageX, e.pageY);
      }

      document.addEventListener('mousemove', onMouseMove);

      document.onmouseup = function() {
          document.removeEventListener('mousemove', onMouseMove);
          document.onmouseup = null;
      };
  };
  header.ondragstart = () => false;

  // Close HUD
  document.getElementById('closeHud').onclick = () => hud.remove();

  // Clear top textarea
  document.getElementById('clearHud').onclick = () => {
      document.getElementById('newformat').value = '';
  };

  // Resize HUD
  const resizeHandle = document.getElementById('resizeHandle');
  resizeHandle.onmousedown = function(e) {
      e.preventDefault();
      document.onmousemove = function(e) {
          hud.style.width = e.clientX - hud.getBoundingClientRect().left + 'px';
          hud.style.height = e.clientY - hud.getBoundingClientRect().top + 'px';
      };
      document.onmouseup = function() {
          document.onmousemove = null;
          document.onmouseup = null;
      };
  };

  // Conversion logic
  function convert(string) {
    var idx = string.indexOf("\x1b");
    if(idx===-1) return string;
    var text = string.slice(0, idx);
    try {
      var fmt = atob(string.slice(idx + 1));
    } catch(e) {
      return string; // invalid base64
    }
    var convertedFmt = "";
    for (let i = 0; i < fmt.length; i += 2) {
      var fmtCode = fmt.charCodeAt(i) + fmt.charCodeAt(i + 1) * 256;
      var decorations = Math.floor(fmtCode / 31);
      if (document.getElementById('removeoverline').checked) decorations &= ~16;
      var colors = fmtCode % 31;
      var convertedFmtCode = colors + decorations * 31;
      convertedFmt += String.fromCharCode(convertedFmtCode + 192);
    }
    return `${text}\x1b${convertedFmt}`;
  }

  // Convert button
  document.getElementById('convertbtn').onclick = () => {
    document.getElementById('oldformat').value = convert(document.getElementById('newformat').value);
  };

  // Select All button
  document.getElementById('selectallbtn').onclick = () => {
    const output = document.getElementById('oldformat');
    output.select();
  };

  // About button
  document.getElementById('aboutBtn').onclick = () => {
      alert("TW Converter\nVersion 1.0 - 12/1/2025 \nCreated by dominoguy_\nConverts art from Textwall.cc to Tw.2s4.me format.");
  };
})();