class Turntable {
    constructor(canvasId) {
      this.canvas = document.getElementById(canvasId);
      this.ctx = this.canvas.getContext('2d');
      this.refreshButton = document.getElementById('update');
      this.rotateButton = document.getElementById('rotate');
      this.isSpinning = false;
      this.spinSpeed = 0.2;
      this.decelerationRate = 0.01;
      this.numberOfSectors = 0; // 存储扇形数量
      this.sectorPrizes = ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6', '奖品7', '奖品8', '奖品9', '奖品10']; // 设置奖项
  
      this.refreshButton.addEventListener('click', () => {
        this.refreshTurntable();
      });
  
      this.rotateButton.addEventListener('click', () => {
        this.startSpinAnimation();
      });
    }
  
    refreshTurntable() {
      this.numberOfSectors = this.generateRandomNumberOfSectors(); // 更新扇形数量
      this.clearTurntable();
      this.drawSectors(this.numberOfSectors);
    }
  
    generateRandomNumberOfSectors() {
      return Math.floor(Math.random() * 8) + 3; // 生成3-10之间的随机整数
    }
  
    clearTurntable() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }

    drawSectors() {
      const sectorAngle = this.calculateSectorAngle(this.numberOfSectors);
      const centerX = this.canvas.width / 2;
      const centerY = this.canvas.height / 2;
      const radius = Math.min(this.canvas.width, this.canvas.height) / 2 - 20;
    
      for (let i = 0; i < this.numberOfSectors; i++) {
        const startAngle = i * sectorAngle;
        const endAngle = (i + 1) * sectorAngle;
    
        this.ctx.beginPath();
        this.ctx.moveTo(centerX, centerY);
        this.ctx.arc(centerX, centerY, radius, startAngle, endAngle);
        this.ctx.closePath();
    
        const hue = (i * 360) / this.numberOfSectors;
        const randomColor = this.getRandomColor();
        this.ctx.fillStyle = randomColor;
        this.ctx.fill();
    
        const text = this.sectorPrizes[Math.floor(Math.random() * 10) + 1]; // 根据索引获取奖项，循环使用奖项数组
        const textAngle = startAngle + sectorAngle / 2; // 计算文字所在的角度
        const textX = centerX + Math.cos(textAngle) * radius * 0.6; // 计算文字的 x 坐标
        const textY = centerY + Math.sin(textAngle) * radius * 0.6; // 计算文字的 y 坐标
    
        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 = '16px Arial';
        this.ctx.fillStyle = '#000000';
        this.ctx.fillText(text, 0, 0); // 在平移后的位置绘制文字
        this.ctx.restore(); // 恢复之前保存的绘图状态
      }
    }
    
    getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
  

    spinAnimation() {
      const numberOfSectors = this.numberOfSectors; // 使用之前保存的扇形数量
      const sectorAngle = this.calculateSectorAngle(numberOfSectors);
      const centerX = this.canvas.width / 2;
      const centerY = this.canvas.height / 2;
      const radius = Math.min(this.canvas.width, this.canvas.height) / 2 - 20;

      this.clearTurntable(); // 清除画布
    
      this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
      this.ctx.rotate(this.spinSpeed);
      this.ctx.translate(-this.canvas.width / 2, -this.canvas.height / 2);
    
      for (let i = 0; i < numberOfSectors; i++) {
        const startAngle = i * sectorAngle;
        const endAngle = (i + 1) * sectorAngle;
    
        this.ctx.beginPath();
        this.ctx.moveTo(centerX, centerY);
        this.ctx.arc(centerX, centerY, radius, startAngle, endAngle);
        this.ctx.closePath();
    
        const hue = (i * 360) / numberOfSectors;
        const randomColor = this.getRandomColor();
        this.ctx.fillStyle = randomColor;
        this.ctx.fill();
    
        const text = this.sectorPrizes[i % this.sectorPrizes.length]; // 根据索引获取奖项，循环使用奖项数组
        const textAngle = startAngle + sectorAngle / 2; // 计算文字所在的角度
        const textX = centerX + Math.cos(textAngle) * radius * 0.6; // 计算文字的 x 坐标
        const textY = centerY + Math.sin(textAngle) * radius * 0.6; // 计算文字的 y 坐标
    
        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 = '16px Arial';
        this.ctx.fillStyle = '#000000';
        this.ctx.fillText(text, 0, 0); // 在平移后的位置绘制文字
        this.ctx.restore(); // 恢复之前保存的绘图状态
      }
    
      this.spinSpeed -= this.decelerationRate;
      if (this.spinSpeed > 0) {
        requestAnimationFrame(() => this.spinAnimation());
      } else {
        this.isSpinning = false;
      }
    }
    

    calculateSectorAngle(numberOfSectors) {
      return (2 * Math.PI) / numberOfSectors;
    }
  
    startSpinAnimation() {
      if (this.isSpinning) return;
      this.isSpinning = true;
      this.spinSpeed = 0.2;
  
      this.spinAnimation();
    }

  }
  
  const turntable = new Turntable('gameCanvas');
  在本身的canvas添加一个同圆心圆环<div>元素