color message sender 1.0 (V.3 Update)

(function() {
  if (document.getElementById('colorHUD')) return;

  // --- HUD Container ---
  const hud = document.createElement('div');
  hud.id = 'colorHUD';
  hud.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    width: 380px;
    background: #111;
    color: #fff;
    border-radius: 6px;
    padding: 10px;
    font-family: monospace;
    z-index: 999999;
    box-shadow: 0 0 15px #000;
    user-select: none;
    font-size: 12px;
  `;

  hud.innerHTML = `
    <input type="text" id="colorMsg" placeholder="Type message..." maxlength="1000" style="
      width: 100%; padding: 6px; margin-bottom: 8px; background:#222; border:1px solid #444; color:#fff; border-radius:3px;">

    <div style="margin-bottom:8px; display:flex; align-items:center; gap:10px;">
      <div style="display:flex; align-items:center; gap:5px;">
        Pick Color: <input type="color" id="spectrumPicker" value="#ff0000" style="width:30px; height:24px; border:none; background:none; cursor:pointer;">
      </div>
      <div style="flex-grow:1;">
        Font size: <input type="number" id="fontSize" min="10" max="50" value="14" style="width:45px; background:#222; color:#fff; border:1px solid #444;">
      </div>
    </div>

    <div style="margin-bottom:8px; display:flex; gap:4px;">
      <button id="sendColorBtn" style="flex:1; padding:5px; background:#0b7; color:#000; font-weight:bold; border:none; border-radius:3px; cursor:pointer;">Send</button>
      <button id="copyColorBtn" style="flex:1; padding:5px; background:#77f; color:#fff; font-weight:bold; border:none; border-radius:3px; cursor:pointer;">Copy</button>
      <button id="resetPaletteBtn" style="flex:1; padding:5px; background:#f70; color:#000; font-weight:bold; border:none; border-radius:3px; cursor:pointer;">Reset</button>
      <button id="randomColorsBtn" style="flex:1; padding:5px; background:#f0f; color:#fff; font-weight:bold; border:none; border-radius:3px; cursor:pointer;">Random</button>
    </div>

    <div id="spectrumGrid" style="display:flex; height:12px; margin-bottom:10px; border-radius:2px; overflow:hidden; cursor:crosshair; border:1px solid #444;"></div>
    <div id="letterColorGrid" style="display:flex; flex-wrap:wrap; gap:3px; margin-bottom:8px; min-height:30px;"></div>
    <div id="colorPreview" style="margin-top:5px; min-height:25px; word-break:break-word; border-top:1px solid #333; padding-top:8px;"></div>
  `;

  const closeBtn = document.createElement('button');
  closeBtn.textContent = '×';
  closeBtn.style.cssText = `position: absolute; top: 5px; right: 5px; background: #900; color: #fff; border: none; border-radius: 3px; width: 22px; height: 22px; cursor: pointer; font-weight: bold;`;
  closeBtn.onclick = () => hud.remove();
  hud.appendChild(closeBtn);
  document.body.appendChild(hud);

  const input = document.getElementById('colorMsg');
  const spectrumPicker = document.getElementById('spectrumPicker');
  const spectrumGrid = document.getElementById('spectrumGrid');
  const letterColorGrid = document.getElementById('letterColorGrid');
  const preview = document.getElementById('colorPreview');
  const fontSizeInput = document.getElementById('fontSize');

  let letterColors = [];

  for (let i = 0; i <= 360; i += 10) {
    const color = `hsl(${i}, 100%, 50%)`;
    const div = document.createElement('div');
    div.style.flex = "1";
    div.style.backgroundColor = color;
    div.draggable = true;
    div.addEventListener('dragstart', e => e.dataTransfer.setData('text/plain', rgbToHex(div.style.backgroundColor)));
    spectrumGrid.appendChild(div);
  }

  function rgbToHex(rgb) {
    const res = rgb.match(/\d+/g);
    return "#" + res.map(x => parseInt(x).toString(16).padStart(2, '0')).join('');
  }

  function renderLetterSelectors() {
    letterColorGrid.innerHTML = '';
    letterColors = letterColors.slice(0, input.value.length);
    while (letterColors.length < input.value.length) letterColors.push(spectrumPicker.value);

    for (let i = 0; i < input.value.length; i++) {
      const letter = document.createElement('div');
      letter.textContent = input.value[i] === ' ' ? '\u00A0' : input.value[i];
      letter.style.cssText = `width:22px; height:22px; text-align:center; border:1px solid #555; border-radius:3px; background:${letterColors[i]}; color:#fff; cursor:pointer; text-shadow: 1px 1px 2px #000; font-weight:bold;`;

      letter.addEventListener('dragover', e => e.preventDefault());
      letter.addEventListener('drop', e => {
        const color = e.dataTransfer.getData('text/plain');
        letterColors[i] = color;
        letter.style.background = color;
        updatePreview();
      });

      letter.onclick = () => {
        letterColors[i] = spectrumPicker.value;
        letter.style.background = spectrumPicker.value;
        updatePreview();
      };

      letterColorGrid.appendChild(letter);
    }
  }

  function updatePreview() {
    preview.innerHTML = '';
    const size = fontSizeInput.value + 'px';
    for (let i = 0; i < input.value.length; i++) {
      const span = document.createElement('span');
      span.style.color = letterColors[i];
      span.style.fontSize = size;
      span.textContent = input.value[i];
      preview.appendChild(span);
    }
  }

  // --- OPTIMIZED MESSAGE GENERATOR ---
  function generateMessage() {
    let msg = '';
    let lastColor = '';

    for (let i = 0; i < input.value.length; i++) {
      let currentColor = letterColors[i];
      // Only start a new tag if the color changes
      if (currentColor !== lastColor) {
        if (lastColor !== '') msg += `<end>`;
        msg += `<start ${currentColor}>`;
        lastColor = currentColor;
      }
      msg += input.value[i];
    }
    if (msg !== '') msg += `<end>`;
    return msg;
  }

  function sendToChatInput() {
    const msg = generateMessage();
    const chatInput = document.getElementById('chatmsg');
    const sendBtn = document.getElementById('sendmsg');

    if (chatInput && sendBtn) {
      // Forcefully remove site character limits for the current session
      chatInput.removeAttribute('maxlength');
      chatInput.value = msg;

      // Trigger site event so it recognizes the text change
      chatInput.dispatchEvent(new Event('input', { bubbles: true }));
      sendBtn.click();
    } else {
      console.warn("Chat elements not found!");
    }
  }

  input.addEventListener('input', () => { renderLetterSelectors(); updatePreview(); });
  fontSizeInput.addEventListener('input', updatePreview);

  document.getElementById('sendColorBtn').onclick = sendToChatInput;
  document.getElementById('copyColorBtn').onclick = () => navigator.clipboard.writeText(generateMessage());

  document.getElementById('randomColorsBtn').onclick = () => {
    for (let i = 0; i < letterColors.length; i++) {
      const randHue = Math.floor(Math.random() * 360);
      const tempDiv = document.createElement('div');
      tempDiv.style.color = `hsl(${randHue}, 100%, 50%)`;
      document.body.appendChild(tempDiv);
      letterColors[i] = rgbToHex(getComputedStyle(tempDiv).color);
      document.body.removeChild(tempDiv);
    }
    renderLetterSelectors();
    updatePreview();
  };

  document.getElementById('resetPaletteBtn').onclick = () => {
    letterColors = letterColors.map(() => "#ffffff");
    renderLetterSelectors();
    updatePreview();
  };

  let isDragging = false, offsetX, offsetY;
  hud.onmousedown = (e) => { if(e.target === hud) { isDragging = true; offsetX = e.clientX - hud.offsetLeft; offsetY = e.clientY - hud.offsetTop; } };
  window.onmousemove = (e) => { if(isDragging) { hud.style.left = (e.clientX - offsetX) + 'px'; hud.style.top = (e.clientY - offsetY) + 'px'; } };
  window.onmouseup = () => isDragging = false;

  renderLetterSelectors();
})();