tinkr 0.0.43

Tinkr is a web framework for quickly building full-stack web applications with Leptos.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

use super::super::utilities::*;
use leptos::prelude::*;

const SIZE: u32 = 80;
const ELEMENTS: usize = 64;

/// Generate pixel colors from name and color palette
fn generate_pixel_colors(name: &str, colors: &[String]) -> Vec<String> {
    let num_from_name = hash_code(name);
    let range = colors.len();

    (0..ELEMENTS)
        .map(|i| get_random_color(num_from_name % ((i as u32) + 1), colors, range))
        .collect()
}

/// Generate SVG string for pixel avatar
fn generate_pixel_svg(
    pixel_colors: &[String],
    size: u32,
    square: bool,
    name: &str,
    title: bool,
) -> String {
    let mask_id = format!("mask__{}", hash_code(name));
    let mask_rx = if square { 0 } else { SIZE * 2 };

    let title_element = if title {
        format!("<title>{}</title>", name)
    } else {
        String::new()
    };

    // Generate 64 pixel rectangles in an 8x8 grid
    // Pattern: rows of 8 pixels, alternating x positions
    let x_positions = [0, 20, 40, 60, 10, 30, 50, 70];
    let mut pixels = String::new();

    for row in 0..8 {
        for col in 0..8 {
            let index = row * 8 + col;
            let x = x_positions[col];
            let y = row * 10;
            pixels.push_str(&format!(
                "<rect x=\"{}\" y=\"{}\" width=\"10\" height=\"10\" fill=\"{}\" />",
                x, y, pixel_colors[index]
            ));
        }
    }

    format!(
        "<svg viewBox=\"0 0 {0} {0}\" fill=\"none\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" width=\"{1}\" height=\"{1}\">\
         {2}\
         <mask id=\"{3}\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"{0}\" height=\"{0}\" mask-type=\"alpha\">\
         <rect width=\"{0}\" height=\"{0}\" rx=\"{4}\" fill=\"#FFFFFF\" />\
         </mask>\
         <g mask=\"url(#{3})\">\
         {5}\
         </g>\
         </svg>",
        SIZE,          // 0
        size,          // 1
        title_element, // 2
        mask_id,       // 3
        mask_rx,       // 4
        pixels,        // 5
    )
}

#[component]
pub fn BoringAvatarPixel(
    /// Name to generate avatar from
    name: String,
    /// Color palette
    #[prop(default = vec![
        "#92A1C6".to_string(),
        "#146A7C".to_string(),
        "#F0AB3D".to_string(),
        "#C271B4".to_string(),
        "#C20D90".to_string(),
    ])]
    colors: Vec<String>,
    /// Size of the avatar (width and height)
    #[prop(default = 40)]
    size: u32,
    /// Whether to use square corners instead of rounded
    #[prop(default = false)]
    square: bool,
    /// Whether to include a title element
    #[prop(default = false)]
    title: bool,
) -> impl IntoView {
    let pixel_colors = generate_pixel_colors(&name, &colors);
    let svg_string = generate_pixel_svg(&pixel_colors, size, square, &name, title);

    view! { <div inner_html=svg_string /> }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_generate_pixel_colors() {
        let colors = vec![
            "#92A1C6".to_string(),
            "#146A7C".to_string(),
            "#F0AB3D".to_string(),
            "#C271B4".to_string(),
            "#C20D90".to_string(),
        ];

        let pixel_colors = generate_pixel_colors("test", &colors);

        assert_eq!(pixel_colors.len(), ELEMENTS);
        assert!(!pixel_colors[0].is_empty());
    }

    #[test]
    fn test_generate_pixel_svg() {
        let colors = vec![
            "#92A1C6".to_string(),
            "#146A7C".to_string(),
            "#F0AB3D".to_string(),
            "#C271B4".to_string(),
            "#C20D90".to_string(),
        ];

        let pixel_colors = generate_pixel_colors("test", &colors);
        let svg = generate_pixel_svg(&pixel_colors, 80, false, "test", false);

        assert!(svg.contains("<svg"));
        assert!(svg.contains("mask-type=\"alpha\""));
        assert!(svg.contains("width=\"10\" height=\"10\""));
        assert!(svg.contains("</svg>"));
    }
}