Hongmeng NEXT Development Case: Blood Group Genetic Calculation

@Entry
@Component
struct BloodTypeCalculator {
  // Component state and method definitions
}

@State private themeColor: string | Color = ;
@State private textColor: string = "#2e2e2e";
@State private lineColor: string = "#d5d5d5";
@State private possibleBloodTypesText: string = "";
@State private impossibleBloodTypesText: string = "";

getGenes(bloodType: string): string[];
combineGenes(fatherGenes: string[], motherGenes: string[]): string[];
getBloodTypesFromGenes(genes: string[]): string[];

@State @Watch('capsuleSelectedIndexesChanged') fatherBloodTypeIndex: number[] = [0];
@State @Watch('capsuleSelectedIndexesChanged') motherBloodTypeIndex: number[] = [0];

capsuleSelectedIndexesChanged() {
  // Update blood type information
}

build() {
  Column() {
    // Page title
    Text('Blood Group Genetic Calculation');
    // Other UI elements...
  }
  .height('100%')
  .width('100%')
  .backgroundColor("#f4f8fb");
}

// Import the SegmentButton and its associated type definitions.
import { SegmentButton, SegmentButtonItemTuple, SegmentButtonOptions } from '@';

// Use the @Entry decorator to mark this component as the entry point.
@Entry
  // Mark this structure as a component using the @Component decorator
@Component
  // Define a structure called BloodTypeCalculator that implements the blood type genetic calculation function.
struct BloodTypeCalculator {
  // Define the theme color, which is orange by default.
  @State private themeColor: string | Color = ;
  // Define the text color, defaults to dark gray.
  @State private textColor: string = "#2e2e2e";
  // Define the border color, defaults to light gray.
  @State private lineColor: string = "#d5d5d5";
  // Define the size of the base inner margin, default is 30.
  @State private basePadding: number = 30;
  // Store possible blood group results
  @State private possibleBloodTypesText: string = "";
  // Store impossible blood type results
  @State private impossibleBloodTypesText: string = "";
  // Define a list of blood types, including A, B, AB, and O.
  @State private bloodTypeList: object[] = [Object({ text: 'A' }), Object({ text: 'B' }), Object({ text: 'AB' }), Object({ text: 'O' })];
  // Initialize configuration items for radio capsule buttons
  @State singleSelectCapsuleOptions: SegmentButtonOptions | undefined = undefined;
  // Listening for changes in father's blood type selection
  @State @Watch('capsuleSelectedIndexesChanged') fatherBloodTypeIndex: number[] = [0];
  // Listening for changes in mother's blood group selection
  @State @Watch('capsuleSelectedIndexesChanged') motherBloodTypeIndex: number[] = [0];

  // Access to their possible genetic combinations based on their blood type
  getGenes(bloodType: string): string[] {
    (`bloodType:${bloodType}`);
    switch (bloodType) {
      case 'A': return ['A', 'O']; // Possible genetic combinations for blood type A
      case 'B': return ['B', 'O']; // Possible genetic combinations for blood type B
      case 'AB': return ['A', 'B']; // Possible genetic combinations for AB blood type
      case 'O': return ['O']; // Possible genetic combinations of blood type O
      default: throw new Error('Invalid blood type'); // Illegal blood type throw error
    }
  }

  // Combining genes from parents to obtain possible combinations of genes in the offspring
  combineGenes(fatherGenes: string[], motherGenes: string[]): string[] {
    const possibleGenes: string[] = []; // for storing possible gene combinations
    for (const fatherGene of fatherGenes) {
      for (const motherGene of motherGenes) {
        const combinedGene = [fatherGene, motherGene].sort().join(''); // Combine and sort the genomes of the parents and add them to the array.
        if (!(combinedGene)) {
          (combinedGene); // If the combination doesn't exist yet, add to the array
        }
      }
    }
    return possibleGenes; // return all possible gene combinations
  }

  // Determination of blood group based on genetic combination
  getBloodTypesFromGenes(genes: string[]): string[] {
    const bloodTypes: string[] = []; // for storing possible blood types
    for (const gene of genes) {
      if (gene === 'AA' || gene === 'AO' || gene === 'OA') {
        ('A'); // Blood type A when the gene combination is AA, AO or OA
      } else if (gene === 'BB' || gene === 'BO' || gene === 'OB') {
        ('B'); // Blood group B when the gene combination is BB, BO or OB
      } else if (gene === 'AB' || gene === 'BA') {
        ('AB'); // Blood type AB when the gene combination is AB or BA
      } else if (gene === 'OO') {
        ('O'); // Blood type O when the gene combination is OO
      }
    }
    // Remove duplicate blood types
    return ((value, index, self) => (value) === index);
  }

  // Calculate the child's likely and unlikely blood type
  calculatePossibleBloodTypes(father: string, mother: string) {
    const fatherGenes = (father); // Get the father's gene set
    const motherGenes = (mother); // Access to the mother's genetic make-up
    const possibleGenes = (fatherGenes, motherGenes); // Combined parental genes
    const possibleBloodTypes = (possibleGenes); // Possible blood groups from genetic combinations
    const allBloodTypes: string[] = ['A', 'B', 'AB', 'O']; // List of all possible blood types
    const impossibleBloodTypes = (bt => !(bt)); // Calculate impossible blood types
    ( = `Child's possible blood type：${('、')}`); // Show possible blood types
    ( = `The child can't have a blood type.：${('、')}`); // Show impossible blood types
  }

  // Call this function when the selection of the capsule button changes
  capsuleSelectedIndexesChanged() {
    let father: string = [[0]]['text']; // Get the father's choice of blood type
    let mother: string = [[0]]['text']; // Obtaining the blood type of the mother's choice
    (father, mother); // Calculate and update blood group information
  }

  // Call this function when the component is about to appear.
  aboutToAppear(): void {
     = ({
      buttons:  as SegmentButtonItemTuple, // Set the options for the capsule button
      multiply: false, // Radio mode
      fontColor: , // The font color is white
      selectedFontColor: , // White font color when selected
      selectedBackgroundColor: , // Select the background color as the theme color
      backgroundColor: , // The background color is the border color
      backgroundBlurStyle: BlurStyle.BACKGROUND_THICK // Background blur effect
    });
    (); // Initialize with a call to the selection change handler function
  }

  // Build the user interface
  build() {
    Column() {
      // Page title
      Text('Blood Group Genetic Calculation')
        .fontColor() // Text color
        .fontSize(18) // Font size
        .width('100%') // 100% width
        .height(50) // Height of 50
        .textAlign() // Center-align text
        .backgroundColor() // Background color is white
        .shadow({ // Add a shadow effect
          radius: 2, // Shadow radius
          color: , // Shadow color
          offsetX: 0, // Horizontal offset
          offsetY: 5 // Vertical offset
        });

      // Introduction to tools section
      Column() {
        Text('Introduction to tools').fontSize(20).fontWeight(600).fontColor();
        Text('Blood type is determined by the combination of three genetic factors, A, B and O. Based on the blood type of the parents, the blood type of the child to be born later can be determined.')
          .fontSize(18).fontColor().margin({ top: `${ / 2}lpx` });
      }
      .alignItems()
      .width('650lpx')
      .padding(`${}lpx`)
      .margin({ top: `${}lpx` })
      .borderRadius(10)
      .backgroundColor()
      .shadow({
        radius: 10,
        color: ,
        offsetX: 0,
        offsetY: 0
      });

      // Father's blood type selection section
      Column() {
        Row() {
          Text('Father's blood type').fontColor().fontSize(18);
          SegmentButton({
            options: , // Configuration items for the capsule button
            selectedIndexes:  // The currently selected index
          }).width('400lpx');
        }.height(45).justifyContent().width('100%');

        // Mother's blood group selection section
        Row() {
          Text('Mother's blood group').fontColor().fontSize(18);
          SegmentButton({
            options: , // Configuration items for the capsule button
            selectedIndexes:  // The currently selected index
          }).width('400lpx');
        }.height(45).justifyContent().width('100%');
      }
      .alignItems()
      .width('650lpx')
      .padding(`${}lpx`)
      .margin({ top: `${}lpx` })
      .borderRadius(10)
      .backgroundColor()
      .shadow({
        radius: 10,
        color: ,
        offsetX: 0,
        offsetY: 0
      });

      // Display calculation results
      Column() {
        Row() {
          Text().fontColor().fontSize(18);
        }.height(45).justifyContent().width('100%');
        Row() {
          Text().fontColor().fontSize(18);
        }.height(45).justifyContent().width('100%');
      }
      .alignItems()
      .width('650lpx')
      .padding(`${}lpx`)
      .margin({ top: `${}lpx` })
      .borderRadius(10)
      .backgroundColor()
      .shadow({
        radius: 10,
        color: ,
        offsetX: 0,
        offsetY: 0
      });
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#f4f8fb"); // Page background color
  }
}