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

<head>
  <meta name="referrer" content="no-referrer-when-downgrade">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Triangle Clicker</title>
  <style>
    body {
      margin: 0;
      font-family: Helvetica, Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
      overflow: hidden;
    }

    #game-container {
      text-align: center;
    }

    #shape {
      width: 100px;
      height: 100px;
      margin: 50px auto;
      cursor: pointer;
      position: relative;
    }

    #shape:active {
      transform: scale(0.95);
    }

    #shape.triangle {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid var(--shape-color);
    }

    #shape.triangle::after {
      content: '';
      position: absolute;
      top: 35px;
      left: -25px;
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid var(--inner-shape-color);
    }

    #shape.square {
      background-color: var(--shape-color);
    }

    #shape.square::after {
      content: '';
      position: absolute;
      top: 25px;
      left: 25px;
      width: 50px;
      height: 50px;
      background-color: var(--inner-shape-color);
    }

    #shape.pentagon {
      clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
      background-color: var(--shape-color);
    }

    #shape.pentagon::after {
      content: '';
      position: absolute;
      top: 25px;
      left: 25px;
      width: 50px;
      height: 50px;
      background-color: var(--inner-shape-color);
      clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    }

    #shape.hexagon {
      clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
      background-color: var(--shape-color);
    }

    #shape.hexagon::after {
      content: '';
      position: absolute;
      top: 25px;
      left: 25px;
      width: 50px;
      height: 50px;
      background-color: var(--inner-shape-color);
      clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    }

    #shape.heptagon {
      clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
      background-color: var(--shape-color);
    }

    #shape.heptagon::after {
      content: '';
      position: absolute;
      top: 25px;
      left: 25px;
      width: 50px;
      height: 50px;
      background-color: var(--inner-shape-color);
      clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    }

    #shape.octagon {
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
      background-color: var(--shape-color);
    }

    #shape.octagon::after {
      content: '';
      position: absolute;
      top: 25px;
      left: 25px;
      width: 50px;
      height: 50px;
      background-color: var(--inner-shape-color);
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    }

    #click-count {
      font-size: 24px;
      margin-top: 20px;
      font-weight: bold;
    }

    #progress-bar {
      width: 200px;
      height: 20px;
      background-color: #ddd;
      border-radius: 10px;
      margin: 20px auto;
      overflow: hidden;
    }

    #progress {
      width: 0%;
      height: 100%;
      background-color: #4CAF50;
      transition: width 0.1s ease-in-out;
    }
  </style>
</head>

<body>
  <div id="game-container">
    <div id="shape" class="triangle"></div>
    <div id="progress-bar">
      <div id="progress"></div>
    </div>
    <div id="click-count">Clicks: 0</div>
  </div>
  <script>
    (function() {
      let GG_ALL_GAME_CONFIG = {
        clickCount: 0, // Number of times the shape has been clicked
        shapeColor: "red", // Color of the clickable shape
        shapeSize: 100, // Size of the shape in pixels
        innerShapeColor: "#ff6666", // Color of the inner shape
        shapes: ['triangle', 'square', 'pentagon', 'hexagon', 'heptagon', 'octagon'], // Array of shape classes
        colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'], // Array of ROYGBIV colors
        clicksPerChange: 10 // Number of clicks before changing shape
      };
      const shape = document.getElementById('shape');
      const clickCounter = document.getElementById('click-count');
      const progressBar = document.getElementById('progress');

      function updateClickCount() {
        GG_ALL_GAME_CONFIG.clickCount++;
        clickCounter.textContent = `Clicks: ${GG_ALL_GAME_CONFIG.clickCount}`;
        updateProgressBar();
        if (GG_ALL_GAME_CONFIG.clickCount % GG_ALL_GAME_CONFIG.clicksPerChange === 0) {
          updateShape();
        }
      }

      function updateProgressBar() {
        const progress = (GG_ALL_GAME_CONFIG.clickCount % GG_ALL_GAME_CONFIG.clicksPerChange) / GG_ALL_GAME_CONFIG.clicksPerChange * 100;
        progressBar.style.width = `${progress}%`;
      }

      function updateShape() {
        const shapeIndex = Math.floor(GG_ALL_GAME_CONFIG.clickCount / GG_ALL_GAME_CONFIG.clicksPerChange) % GG_ALL_GAME_CONFIG.shapes.length;
        const colorIndex = Math.floor(GG_ALL_GAME_CONFIG.clickCount / (GG_ALL_GAME_CONFIG.clicksPerChange * GG_ALL_GAME_CONFIG.shapes.length)) % GG_ALL_GAME_CONFIG.colors.length;
        shape.className = GG_ALL_GAME_CONFIG.shapes[shapeIndex];
        const mainColor = GG_ALL_GAME_CONFIG.colors[colorIndex];
        const lighterColor = getLighterColor(mainColor);
        document.documentElement.style.setProperty('--shape-color', mainColor);
        document.documentElement.style.setProperty('--inner-shape-color', lighterColor);
      }

      function getLighterColor(color) {
        const colorMap = {
          'red': '#ff6666',
          'orange': '#ffb366',
          'yellow': '#ffff66',
          'green': '#66ff66',
          'blue': '#66a3ff',
          'indigo': '#9966ff',
          'violet': '#ff66ff'
        };
        return colorMap[color] || color;
      }
      shape.addEventListener('click', updateClickCount);
      // Load game state
      loadGame();
      // Handle load
      window.addEventListener('message', (event) => {
        const {
          type,
          save_data
        } = event.data;
        if (type === 'RESPONSE_LOAD_GAME_EVENT' && save_data) {
          GG_ALL_GAME_CONFIG.clickCount = save_data.clickCount;
          clickCounter.textContent = `Clicks: ${GG_ALL_GAME_CONFIG.clickCount}`;
          updateShape();
          updateProgressBar();
        }
      });
      // Save game state every 5 seconds
      setInterval(() => {
        saveGame({
          clickCount: GG_ALL_GAME_CONFIG.clickCount
        });
      }, 5000);

      function saveGame(gameState) {
        const saveGameEvent = {
          type: 'REQUEST_SAVE_GAME_EVENT',
          save_data: gameState
        };
        window.parent.postMessage(saveGameEvent, '*');
      }

      function loadGame() {
        const loadGameEvent = {
          type: 'REQUEST_LOAD_GAME_EVENT'
        };
        window.parent.postMessage(loadGameEvent, '*');
      }
      // Initialize the shape and color
      updateShape();
      updateProgressBar();
    })();
  </script>

</body>

</html>