# PunnettSquare

> PunnettSquare crosses two parents, genotypes of one to three genes written as pairs of a letter with the dominant allele in upper case ("Pp", "YyRr").

Page: https://fframes-kit.pages.dev/docs/biology/punnett-square/
Cargo feature: `biology` (`fframes-kit = { version = "..", features = ["biology"] }`)

`PunnettSquare` crosses two `parents`, genotypes of one to three genes written as pairs of a
letter with the dominant allele in upper case (`"Pp"`, `"YyRr"`). Both parents must have the
same genes; otherwise nothing is drawn.

- **Square:** the first parent's gametes run across the top and the second's down the side,
  each in a circle. Every cell shows its genotype, dominant allele first, and is coloured by
  its phenotype from `phenotype_colors`. The colours are spread over the list, so with one
  gene the recessive phenotype takes the last colour. Text shrinks to fit the cells.
- **Ratios:** below the square, the genotype and phenotype ratios count up from zero as the
  cells fill. Phenotypes are named from `traits`, one (dominant, recessive) pair per gene,
  or written as `P_` and `pp` without them. Each name takes its phenotype's colour.
- **Motion:** from `delay` the square appears, the gametes split off each parent over
  0.5..1.7 s, and from 1.8 s the cells fill row by row over `fill_time` seconds. The gamete
  circles of the filling cell light up.

`Punnett::cross` gives the same cross as data, and `gametes` the gametes of one genotype.

Gallery scenes: `PunnettSquare` (`Pp` × `Pp`, purple and white flowers) and `DihybridCross`
(`YyRr` × `YyRr`, yellow or green and round or wrinkled seeds).

Gallery clip of `PunnettSquare`: https://fframes-kit.pages.dev/media/scenes/PunnettSquare-9089f784.mp4

Gallery clip of `DihybridCross`: https://fframes-kit.pages.dev/media/scenes/DihybridCross-caceef29.mp4

```rust
use fframes_kit::kits::biology::{Punnett, gametes};
use fframes_kit::prelude::*;

assert_eq!(gametes("AaBb").unwrap(), ["AB", "Ab", "aB", "ab"]);
let test_cross = Punnett::cross("Pp", "pp").unwrap();
assert_eq!(test_cross.genotype_ratio(), [("Pp".to_owned(), 2), ("pp".to_owned(), 2)]);

fn seeds<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
    ui.show(PunnettSquare {
        parents: ("YyRr".into(), "YyRr".into()),
        traits: vec![("yellow".into(), "green".into()), ("round".into(), "wrinkled".into())],
        ..ui.defaults()
    })
}
```

## API

Components are plain structs. Set the fields you need and fill the rest with `..ui.defaults()`: the defaults below come from the current theme (`theme.` values are fields of `Theme`).

### PunnettSquare

| Field | Type | Default | Description |
| --- | --- | --- | --- |
| `delay` | `f32` | `0.0` | Seconds after the container's start before the square appears. |
| `center` | `(f64, f64)` | `(0.0, 0.0)` | The middle of the square, in units of `ui.space`. |
| `scale` | `f64` | `1.0` | Size factor on the figure; `1.0` is its normal size. |
| `parents` | `(String, String)` | `("Pp".into(), "Pp".into())` | Genotypes of the first and second parent, e.g. `("Pp", "Pp")` or `("YyRr", "YyRr")`; the first runs across the top. |
| `traits` | `Vec<(String, String)>` | `vec![("purple".into(), "white".into())]` | One `(dominant, recessive)` pair of phenotype names per gene; empty writes `P_` and `pp` instead. |
| `fill_time` | `f32` | `2.4` | Seconds the cells take to fill in, row by row. |
| `ratios` | `bool` | `true` | Counts up the genotype and phenotype ratios under the square when `true`. |
| `phenotype_colors` | `Vec<Color>` | — | Cell colour by phenotype, dominant first; a phenotype past the end uses `muted_color`. |
| `grid_color` | `Color` | `theme.colors.muted` | Colour of the square's grid lines and gamete circle outlines. |
| `gamete_color` | `Color` | `theme.colors.surface` | Fill of the gamete circles. |
| `highlight_color` | `Color` | `theme.colors.accent` | Colour the outline of a cell flashes as it fills. |
| `cell_style` | `TextStyle` | `cell_style` | The font of the genotypes in the cells: family, size in pixels and weight. |
| `parent_style` | `TextStyle` | `theme.typography.body` | The font of the parent genotypes and gametes: family, size in pixels and weight. |
| `ratio_style` | `TextStyle` | `theme.typography.caption` | The font of the ratio lines below the square: family, size in pixels and weight. |
| `text_color` | `Color` | `theme.colors.text` | Colour of the genotypes and ratio text. |
| `muted_color` | `Color` | `theme.colors.muted` | Colour of the secondary text and of phenotypes without a colour in `phenotype_colors`. |
| `enter` | `Option<FadeIn>` | `None` | Fade in at the start; `None` for none. |
| `exit` | `Option<FadeOut>` | `None` | Fade out before the end; `None` for none. |

Feature `biology` · [Source](https://github.com/khanhthanhdev/fframes-kit/blob/main/fframes-kit/src/kits/biology/punnett.rs#L157)