<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Haxball Uniform Creator</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/konva/8.3.5/konva.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100 min-h-screen">
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold text-center mb-8">Haxball Uniform Creator</h1>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Canvas Section -->
      <div class="md:col-span-2 bg-white rounded-lg shadow-lg p-4">
        <div id="canvas-container" class="w-full aspect-square max-w-md mx-auto">
          <div id="uniform-canvas"></div>
        </div>

        <div class="flex justify-center space-x-4 mt-4">
          <button onclick="setColorMode(1)" class="p-3 bg-gray-200 rounded-full hover:bg-gray-300 transition-colors">
            <div class="w-6 h-6 bg-black rounded-full"></div>
          </button>
          <button onclick="setColorMode(2)" class="p-3 bg-gray-200 rounded-full hover:bg-gray-300 transition-colors">
            <div class="w-6 h-6 rounded-full bg-gradient-to-r from-black to-gray-500"></div>
          </button>
          <button onclick="setColorMode(3)" class="p-3 bg-gray-200 rounded-full hover:bg-gray-300 transition-colors">
            <div class="w-6 h-6 rounded-full bg-gradient-to-r from-black via-gray-500 to-gray-300"></div>
          </button>
        </div>
      </div>

      <!-- Controls Section -->
      <div class="bg-white rounded-lg shadow-lg p-4">
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700">Primary Color</label>
            <input type="color" id="color1" value="#455E5D" class="w-full h-10 rounded cursor-pointer">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700">Secondary Color</label>
            <input type="color" id="color2" value="#C6D881" class="w-full h-10 rounded cursor-pointer">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700">Tertiary Color</label>
            <input type="color" id="color3" value="#A3C2C1" class="w-full h-10 rounded cursor-pointer">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700">Avatar Color</label>
            <input type="color" id="avatarColor" value="#FFFFFF" class="w-full h-10 rounded cursor-pointer">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700">Avatar Text</label>
            <input type="text" id="avatarText" maxlength="2" value="7"
              class="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
          </div>
        </div>
      </div>
    </div>

    <!-- Output Section -->
    <div class="mt-8 bg-white rounded-lg shadow-lg p-4">
      <h2 class="text-xl font-semibold mb-4">Commands</h2>
      <div class="space-y-4">
        <div>
          <h3 class="font-medium text-gray-700 mb-2">Chat Commands</h3>
          <div id="chatCommands" class="bg-gray-100 p-3 rounded font-mono text-sm"></div>
        </div>
        <div>
          <h3 class="font-medium text-gray-700 mb-2">Headless Commands</h3>
          <div id="headlessCommands" class="bg-gray-100 p-3 rounded font-mono text-sm"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
    let stage, layer, group, color1Shape, color2Shape, color3Shape, avatarText;
    let rotation = 0;
    let colorMode = 3;

    function initStage() {
      const container = document.getElementById('uniform-canvas');
      const containerWidth = container.offsetWidth;

      stage = new Konva.Stage({
        container: 'uniform-canvas',
        width: containerWidth,
        height: containerWidth,
      });

      layer = new Konva.Layer();
      stage.add(layer);

      const originX = containerWidth / 2;
      const originY = containerWidth / 2;

      // Create rotation guide circle
      const rotationGuide = new Konva.Circle({
        x: originX,
        y: originY,
        radius: containerWidth * 0.31,
        stroke: 'black',
        strokeWidth: 1,
        opacity: 0.1,
      });
      layer.add(rotationGuide);

      // Create clipped group for uniform
      group = new Konva.Group({
        clipFunc: (ctx) => {
          ctx.arc(originX, originY, containerWidth * 0.225, 0, Math.PI * 2, false);
        },
      });

      // Create color shapes
      color1Shape = new Konva.Rect({
        x: originX - containerWidth * 0.25,
        y: originY - containerWidth * 0.25,
        width: containerWidth * 0.5,
        height: containerWidth * 0.5,
        fill: document.getElementById('color1').value,
      });

      color2Shape = new Konva.Rect({
        x: originX - containerWidth * 0.075,
        y: originY - containerWidth * 0.225,
        width: containerWidth * 0.15,
        height: containerWidth * 0.45,
        fill: document.getElementById('color2').value,
      });

      color3Shape = new Konva.Rect({
        x: originX + containerWidth * 0.075,
        y: originY - containerWidth * 0.225,
        width: containerWidth * 0.15,
        height: containerWidth * 0.45,
        fill: document.getElementById('color3').value,
      });

      // Create border
      const border = new Konva.Circle({
        x: originX,
        y: originY,
        radius: containerWidth * 0.225,
        stroke: 'black',
        strokeWidth: 2,
      });

      // Create avatar text
      avatarText = new Konva.Text({
        x: originX,
        y: originY - containerWidth * 0.1,
        text: document.getElementById('avatarText').value,
        fontSize: containerWidth * 0.25,
        fontFamily: 'Arial',
        fontStyle: 'bold',
        fill: document.getElementById('avatarColor').value,
        align: 'center',
      });
      avatarText.offsetX(avatarText.width() / 2);

      // Add shapes to group
      group.add(color1Shape);
      group.add(color2Shape);
      group.add(color3Shape);
      group.add(border);
      layer.add(group);
      layer.add(avatarText);

      // Add transformer with black anchors and borders
      const tr = new Konva.Transformer({
        nodes: [group],
        centeredScaling: true,
        rotationSnaps: [0, 90, 180, 270],
        resizeEnabled: false,
        anchorSize: 20,
        anchorStroke: 'black',
        anchorFill: 'black',
        anchorCornerRadius: 14,
        borderEnabled: false,
        rotateAnchorOffset: 25,
        rotateAnchorFill: 'black',
        rotateAnchorStroke: 'black',
        padding: 5,
        opacity: 0.5,
      });
      layer.add(tr);

      // Update rotation on transform
      group.on('transform', () => {
        rotation = Math.round(group.rotation());
        updateOutputs();
      });

      updateColorMode();
      updateOutputs();
    }

    function setColorMode(mode) {
      colorMode = mode;
      updateColorMode();
      updateOutputs();
    }

    function updateColorMode() {
      switch (colorMode) {
        case 1:
          color2Shape.width(0);
          color3Shape.width(0);
          break;
        case 2:
          color2Shape.width(stage.width() * 0.15);
          color3Shape.width(0);
          break;
        case 3:
          color2Shape.width(stage.width() * 0.15);
          color3Shape.width(stage.width() * 0.15);
          break;
      }
      layer.batchDraw();
    }

    function updateOutputs() {
      const color1 = document.getElementById('color1').value.substring(1);
      const color2 = document.getElementById('color2').value.substring(1);
      const color3 = document.getElementById('color3').value.substring(1);
      const avatarColor = document.getElementById('avatarColor').value.substring(1);

      const chatCommand = `/colors red ${rotation} ${avatarColor} ${color1}${colorMode >= 2 ? ' ' + color2 : ''}${colorMode >= 3 ? ' ' + color3 : ''}`;
      const headlessCommand = `room.setTeamColors(1, ${rotation}, 0x${avatarColor}, [0x${color1}${colorMode >= 2 ? ', 0x' + color2 : ''}${colorMode >= 3 ? ', 0x' + color3 : ''}])`;

      document.getElementById('chatCommands').textContent = chatCommand;
      document.getElementById('headlessCommands').textContent = headlessCommand;
    }

    // Event listeners
    document.getElementById('color1').addEventListener('input', (e) => {
      color1Shape.fill(e.target.value);
      updateOutputs();
    });

    document.getElementById('color2').addEventListener('input', (e) => {
      color2Shape.fill(e.target.value);
      updateOutputs();
    });

    document.getElementById('color3').addEventListener('input', (e) => {
      color3Shape.fill(e.target.value);
      updateOutputs();
    });

    document.getElementById('avatarColor').addEventListener('input', (e) => {
      avatarText.fill(e.target.value);
      updateOutputs();
    });

    document.getElementById('avatarText').addEventListener('input', (e) => {
      avatarText.text(e.target.value);
      avatarText.offsetX(avatarText.width() / 2);
      layer.batchDraw();
    });

    // Handle window resize
    window.addEventListener('resize', () => {
      const container = document.getElementById('uniform-canvas');
      const containerWidth = container.offsetWidth;

      stage.width(containerWidth);
      stage.height(containerWidth);

      // Reinitialize the stage with new dimensions
      layer.destroyChildren();
      initStage();
    });

    // Initialize the stage
    initStage();
  </script>
</body>

</html>