Hongmeng NEXT Development Case: Nine Grid Randomization

class Prize {
  title: string // Prize title
  color: string // Prize color
  description: string // Description of the prize

  constructor(title: string, color: string, description: string = "") { // Constructor to initialize prize information
     = title // Set the prize title
     = color // Setting the prize color
     = description // Setting the prize description
  }
}

// Nine Grid Sweepstakes Chart
@Entry // Entry annotation that identifies this as a startable component
@Component // Component annotations that identify this as a component
struct LotteryPage { // Define the sweepstakes page structure
  @State selectedIndex: number = 0 // the currently selected index, initially 0
  private isAnimating: boolean = false // If or not animation is in progress, initially false.
  private selectionOrder: number[] = [0, 1, 2, 5, 8, 7, 6, 3] // Sweepstakes order array
  private cellWidth: number = 200 // Cell width
  private baseMargin: number = 10 // Cell margins
  private prizeArray: Prize[] = [ // Array of prizes
    new Prize("Red Packet", "#ff9675", "$10"), // Create the prize object
    new Prize("Calls.", "#ff9f2e", "$5").
    new Prize("Red Packet", "#8e7fff", "$50").
    new Prize("Red Packet", "#48d1ea", "$30").
    new Prize("Start \n the draw.", "#fffdfd"), // Sweepstakes button
    new Prize("Thanks for participating.", "#5f5f5f5f"), // Engagement prompts
    new Prize("Thanks for participating.", "#5f5f5f"),
    new Prize("Supermarket Bonus", "#5f5f5f", "$100").
    new Prize("Flowers.", "#75b0fe"), // Prize object
  ]
  private intervalID: number = 0 // Timer ID to control the draw speed

  startLottery(speed: number = 500) { // Start the lottery, default speed is 500 milliseconds
    setTimeout(() => { // Setting up delayed execution
      if (speed > 50) { // If the speed is greater than 50
        speed -= 50 // Speed reduction
        (speed) // Recursive call to continue acceleration
      } else {
        () // Velocity reaches threshold and enters homogenization phase
        return
      }
      ++ // Update the selected index
    }, speed) // Delay time to current speed
  }

  runAtConstantSpeed() { // Run the draw at a constant speed
    let speed = 40 + (() * ) // Random generation speed
    clearInterval() // Clear the previous timer
     = setInterval(() => { // Setting a new timer
      if ( >= speed) { // If the index is checked to reach speed
        clearInterval() // Clear the timer
        () // Entering the deceleration phase
        return
      }
      ++ // Update the selected index
    }, 50) // Updated every 50 milliseconds
  }

  slowDown(speed = 50) { // Deceleration, default speed 50 ms
    setTimeout(() => { // Setting up delayed execution
      if (speed < 500) { // If the speed is less than 500
        speed += 50 // Increased speed
        (speed) // Recursive call to continue slowing down
      } else {
         =  %  // Make sure the index is in range
        let index = [] // Get the index of the currently selected prize
         = false // End of animation, set to false
        ().showAlertDialog({ // Show results dialog
          title: 'Results', // Dialog box title
          message: `${[index].title}${[index].description}`, // Display prize information
          confirm: { // Confirm button configuration
            defaultFocus: true, // Default Focus
            value: 'I know.', // Button text
            action: () => { // Button click event
            }
          },
          alignment: , // Center the dialog box
        });
        return
      }
      ++ // Update the selected index
    }, speed) // Delay time to current speed
  }

  build() { // Build the UI
    Column() { // Use column layout
      Flex({ wrap:  }) { // Use flexible layout to allow line breaks
        ForEach(, (item: Prize, index: number) => { // Traverse the prize array
          Column() { // Use a column layout for each prize
            Text(`${}`) // Show prize title
              .fontColor([ % ] == index ?  : // Set the font color according to the selected state
              )
              .fontSize(16) // Setting the font size
            Text(`${}`) // Show prize description
              .fontColor([ % ] == index ?  : // Set the font color according to the selected state
              )
              .fontSize(20) // Setting the font size
          }
          .clickEffect({ level: , scale: 0.8 }) // Click effect
          .onClick(() => { // Click event handling
            if (index == 4) { // If the click is on a sweepstakes button
              if () { // If animation is in progress, return
                return
              }
               = true // Set to being animated
              () // Start the lottery
            }
          })
          .alignItems() // Horizontal center alignment
          .justifyContent() // Vertical center alignment
          .width(`${}lpx`) // Set the cell width
          .height(`${}lpx`) // Set the cell height
          .margin(`${}lpx`) // Set cell margins
          .backgroundColor(index == 4 ? "#ff5444" : // set the background color, the draw button is a special color
            ([ % ] == index ?  : )) // Set background color based on selected state
          .borderRadius(10) // Setting rounded corners
          .shadow({ // Setting up shadow effects
            radius: 10, // Shadow radius
            color: "#f98732", // Shadow color
            offsetX: 0, // Horizontal offset
            offsetY: 20 // Vertical offset
          })
        })
      }.width(`${ * 3 +  * 6}lpx`) // Set the overall width
      .margin({ top: 30 }) // Set the top margin
    }
    .height('100%') // Set the height to 100%
    .width('100%') // Set the width to 100%
    .backgroundColor("#ffb350") // set the background color
  }
}