milestones

2023-06-12 17:14:51 +02:00
parent 53a5c8a976
commit d786e6fd20
9 changed files with 292 additions and 14 deletions
--- a/crates/frontend/src/components/milestone.rs
+++ b/crates/frontend/src/components/milestone.rs
@@ -0,0 +1,37 @@
+use common::Milestone;
+use yew::prelude::*;
+
+#[derive(Properties, Clone, PartialEq)]
+pub struct Props {
+    pub milestone: Milestone,
+    pub completed_achievements: usize,
+}
+
+#[function_component(MilestoneComponent)]
+pub fn milestone_component(props: &Props) -> Html {
+    let unfilled = props.milestone.goal - props.completed_achievements.min(props.milestone.goal);
+    let filled = props.completed_achievements.min(props.milestone.goal);
+
+    let unfilled_stars = std::iter::repeat(html! {
+        <i class={classes!("fas", "fa-fw", "fa-star-half-stroke")} />
+    })
+    .take(unfilled)
+    .collect::<Html>();
+
+    let filled_stars = std::iter::repeat(html! {
+        <i style="color: var(--secondary-color)" class={classes!("fas", "fa-fw", "fa-star")} />
+    })
+    .take(filled)
+    .collect::<Html>();
+
+    html! {
+        <div class="row">
+        <p style="text-align: center" class="u-full-width">
+            {format!("{} / {}", props.completed_achievements, props.milestone.goal)}
+            <br />
+            {filled_stars}
+            {unfilled_stars}
+        </p>
+        </div>
+    }
+}