players.rs
1use gpui::{div, img, px, Div, ParentElement, Render, Styled, ViewContext};
2use story::Story;
3
4use crate::{ActiveTheme, PlayerColors};
5
6pub struct PlayerStory;
7
8impl Render for PlayerStory {
9 type Element = Div;
10
11 fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
12 Story::container().child(
13 div()
14 .flex()
15 .flex_col()
16 .gap_4()
17 .child(Story::title_for::<PlayerColors>())
18 .child(Story::label("Player Colors"))
19 .child(
20 div()
21 .flex()
22 .flex_col()
23 .gap_1()
24 .child(
25 div().flex().gap_1().children(
26 cx.theme()
27 .players()
28 .0
29 .clone()
30 .iter_mut()
31 .map(|player| div().w_8().h_8().rounded_md().bg(player.cursor)),
32 ),
33 )
34 .child(
35 div().flex().gap_1().children(
36 cx.theme().players().0.clone().iter_mut().map(|player| {
37 div().w_8().h_8().rounded_md().bg(player.background)
38 }),
39 ),
40 )
41 .child(
42 div().flex().gap_1().children(
43 cx.theme().players().0.clone().iter_mut().map(|player| {
44 div().w_8().h_8().rounded_md().bg(player.selection)
45 }),
46 ),
47 ),
48 )
49 .child(Story::label("Avatar Rings"))
50 .child(div().flex().gap_1().children(
51 cx.theme().players().0.clone().iter_mut().map(|player| {
52 div()
53 .my_1()
54 .rounded_full()
55 .border_2()
56 .border_color(player.cursor)
57 .child(
58 img()
59 .rounded_full()
60 .uri("https://avatars.githubusercontent.com/u/1714999?v=4")
61 .size_6()
62 .bg(gpui::red()),
63 )
64 }),
65 ))
66 .child(Story::label("Player Backgrounds"))
67 .child(div().flex().gap_1().children(
68 cx.theme().players().0.clone().iter_mut().map(|player| {
69 div()
70 .my_1()
71 .rounded_xl()
72 .flex()
73 .items_center()
74 .h_8()
75 .py_0p5()
76 .px_1p5()
77 .bg(player.background)
78 .child(
79 div().relative().neg_mx_1().rounded_full().z_index(3)
80 .border_2()
81 .border_color(player.background)
82 .size(px(28.))
83 .child(
84 img()
85 .rounded_full()
86 .uri("https://avatars.githubusercontent.com/u/1714999?v=4")
87 .size(px(24.))
88 .bg(gpui::red()),
89 ),
90 ).child(
91 div().relative().neg_mx_1().rounded_full().z_index(2)
92 .border_2()
93 .border_color(player.background)
94 .size(px(28.))
95 .child(
96 img()
97 .rounded_full()
98 .uri("https://avatars.githubusercontent.com/u/1714999?v=4")
99 .size(px(24.))
100 .bg(gpui::red()),
101 ),
102 ).child(
103 div().relative().neg_mx_1().rounded_full().z_index(1)
104 .border_2()
105 .border_color(player.background)
106 .size(px(28.))
107 .child(
108 img()
109 .rounded_full()
110 .uri("https://avatars.githubusercontent.com/u/1714999?v=4")
111 .size(px(24.))
112 .bg(gpui::red()),
113 ),
114 )
115 }),
116 ))
117 .child(Story::label("Player Selections"))
118 .child(div().flex().flex_col().gap_px().children(
119 cx.theme().players().0.clone().iter_mut().map(|player| {
120 div()
121 .flex()
122 .child(
123 div()
124 .flex()
125 .flex_none()
126 .rounded_sm()
127 .px_0p5()
128 .text_color(cx.theme().colors().text)
129 .bg(player.selection)
130 .child("The brown fox jumped over the lazy dog."),
131 )
132 .child(div().flex_1())
133 }),
134 )),
135 )
136 }
137}