class Turntable {
    constructor(canvasId) {
      this.canvas = document.getElementById(canvasId);
      this.ctx = this.canvas.getContext('2d');
  
      this.radius = 200; // 转盘半径
      this.centerX = this.canvas.width / 2; // 转盘中心点的 x 坐标
      this.centerY = this.canvas.height / 2; // 转盘中心点的 y 坐标
  
      this.sectorColors = ['#FF5733', '#FFC300', '#4CAF50', '#3498db', '#9B59B6', '#E74C3C', '#F39C12', '#2C3E50']; // 扇形的颜色
      this.sectorPrizes = ['手机', '电脑', '谢谢惠顾', '拍立得', '谢谢惠顾', '空调', '购物卡', '视频VIP', '护肤品', '蓝牙耳机', '谢谢惠顾', '空气炸锅']; // 奖项
      this.sectorImages = [
        '手机.png',
        '云端电脑.png',
        '谢谢参与.png',
        '相机.png',
        '谢谢参与.png',
        '空调.png',
        '购物好礼场景.png',
        '暂无会员卡.png',
        '美妆护肤.png',
        '耳机.png',
        '谢谢参与.png',
        '空气炸锅.png'];
      this.spinButton = document.getElementById('spinButton');
      this.spinButton.addEventListener('click', () => {
        this.startSpin();
        const ring1 = document.querySelector(".ring1");
        const ring2 = document.querySelector(".ring2");
        ring1.classList.add("scale-animation");
        ring2.classList.add("scale-animation");
      });
      this.oppositespinButton = document.getElementById('oppositespinButton');
      this.oppositespinButton.addEventListener('click', () => {
        this.startOppositeSpin();
      });

    }
  
    drawWheel() {
      const numberOfSectors = this.sectorColors.length;
      const sectorAngle = (2 * Math.PI) / numberOfSectors;
      const usedNumbers = []; // 用于跟踪已经生成的随机数
  
      for (let i = 0; i < numberOfSectors; i++) {
        const startAngle = i * sectorAngle;
        const endAngle = (i + 1) * sectorAngle;
  
        this.ctx.beginPath();
        this.ctx.moveTo(this.centerX, this.centerY);
        this.ctx.arc(this.centerX, this.centerY, this.radius, startAngle, endAngle);
        this.ctx.closePath();
  
        this.ctx.fillStyle = this.sectorColors[i % this.sectorColors.length];
        this.ctx.fill();

        // const prizenum = Math.floor(Math.random() * 12);
        // const text = this.sectorPrizes[prizenum];
        let prizenum;
        let text;
        do {
          prizenum = Math.floor(Math.random() * 12);
        } while (usedNumbers.includes(prizenum)); // 检查随机数是否已经出现过
        usedNumbers.push(prizenum); // 将随机数添加到已使用的数组中
        text = this.sectorPrizes[prizenum];

    
        const textAngle = startAngle + sectorAngle / 2;
        const textX = this.centerX + Math.cos(textAngle) * this.radius * 0.8;
        const textY = this.centerY + Math.sin(textAngle) * this.radius * 0.8;
  
        this.ctx.save();
        this.ctx.translate(textX, textY);
        this.ctx.rotate(textAngle + Math.PI / 2);
        this.ctx.textAlign = 'center';
        this.ctx.textBaseline = 'middle';
        this.ctx.font = '20px fantasy';
        this.ctx.fillStyle = '#fff';
        this.ctx.fillText(text, 0, 0);
        this.ctx.restore();

        // const image = new Image();
        // image.src = this.sectorImages[prizenum];
        // const imageWidth = 60;
        // const imageHeight = 60;
        // const imageX = this.centerX + Math.cos(textAngle) * this.radius * 0.55;
        // const imageY = this.centerY + Math.sin(textAngle) * this.radius * 0.55;
        
        // image.onload = () => {
        //   this.ctx.save();
        //   this.ctx.translate(imageX, imageY);
        //   this.ctx.rotate(textAngle + Math.PI / 2);
        //   this.ctx.drawImage(image, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight);
        //   this.ctx.restore();
        // };
      }
    }

  
    startSpin() {
      const numberOfSpins = 2; // 旋转圈数
      const targetSector = Math.floor(Math.random() * this.sectorPrizes.length); // 随机选择一个奖项作为目标扇形
      const totalAngle = targetSector * (2 * Math.PI / this.sectorPrizes.length) + (2 * Math.PI) * numberOfSpins;
      let currentAngle = 0;
      let spinSpeed = 0.08; // 旋转速度
      let isPaused = false;
  
      const spinAnimation = () => {

        if (isPaused) {
          return; // 如果暂停标志为true，则停止旋转动画
        }
        
        currentAngle += spinSpeed;
        if (currentAngle >= totalAngle) {
          // 到达目标角度，停止旋转
          return;
        }
  
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.save();
        this.ctx.translate(this.centerX, this.centerY);
        this.ctx.rotate(currentAngle);
        this.ctx.translate(-this.centerX, -this.centerY);
  
        this.drawWheel();
  
        this.ctx.restore();
  
        requestAnimationFrame(spinAnimation);

      };
      
      requestAnimationFrame(spinAnimation);

      spinAnimation();

      const stopButton = document.getElementById("stopButton");
      stopButton.addEventListener("click", () => {
        isPaused = !isPaused;
      });

      const speedButton = document.getElementById("speedButton");
      speedButton.addEventListener("click", () => {
        spinSpeed = 0.15;
      });
     
    }
    
    startOppositeSpin() {
      const numberOfSpins = 2; // 旋转圈数
      const targetSector = Math.floor(Math.random() * this.sectorPrizes.length); // 随机选择一个奖项作为目标扇形
      const totalAngle = targetSector * (2 * Math.PI / this.sectorPrizes.length) + (2 * Math.PI) * numberOfSpins;
      let currentAngle = 0;
      let spinSpeed = 0.08; // 初始旋转速度
      let isPaused = false;
      
      const oppositespinAnimation = () => {
        if (isPaused) {
          return; // 如果暂停标志为 true，则停止旋转动画
        }
        
        currentAngle -= spinSpeed; // 逆时针旋转，将旋转角度减小
        if (currentAngle <= -totalAngle) {
          // 到达目标角度，停止旋转
          return;
        }
      
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.save();
        this.ctx.translate(this.centerX, this.centerY);
        this.ctx.rotate(currentAngle);
        this.ctx.translate(-this.centerX, -this.centerY);
      
        this.drawWheel();
      
        this.ctx.restore();
      
        requestAnimationFrame(oppositespinAnimation);
      };
      
      oppositespinAnimation();
    
      const stopButton = document.getElementById("stopButton");
      stopButton.addEventListener("click", () => {
        isPaused = !isPaused;
      });
    
      const speedButton = document.getElementById("oppositespeedButton");
      speedButton.addEventListener("click", () => {
        spinSpeed = 0.15; // 每次点击加速按钮，增加旋转速度
      });
    }
    

}


const turntable = new Turntable('gameCanvas');
turntable.drawWheel(); // 初始绘制转盘      如何添加代码使得当转盘每完成一次旋转后，在扇形当前所在位置上在扇形上添加上面文字对应的图片