Add stylist and contain the styles for Candela and for the SimpleGuage.

Cargo.toml

@@ -65,8 +65,8 @@ uuid                    = { version = "1.13", features = ["v4", "js"] }
 wasm-bindgen            = { version = "0.2.100" }
 wasm-bindgen-futures    = { version = "0.4.50" }
 web-sys                 = { version = "0.3.77" }
-yew                     = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
-yew-router              = { git = "https://github.com/yewstack/yew/" }
+yew                     = { version = "0.21", features = ["csr"] }
+yew-router              = { version = "0.18" }
 
 # cairo-rs    = { version = "0.18" }
 # gio         = { version = "0.18" }

visions/ui/Cargo.toml

@@ -11,6 +11,7 @@ http                    = "1.3.1"
 serde                   = { workspace = true }
 serde-wasm-bindgen      = { workspace = true }
 serde_json              = { workspace = true }
+stylist = { version = "0.13.0", features = ["yew", "yew_integration", "yew_use_style"] }
 visions-types           = { path = "../types" }
 wasm-bindgen            = { workspace = true }
 wasm-bindgen-futures    = { workspace = true }

visions/ui/design.css

@@ -468,30 +468,6 @@ body {
     min-width: 20%;
 }
 
-.candela-sidebar-actions__header {
-    display: flex;
-    padding: 2px;
-    padding-left: 4px;
-    padding-right: 4px;
-    justify-content: space-between;
-    background-color: black;
-    color: white;
-}
-
-.candela-sidebar__action {
-    display: flex;
-    justify-content: space-between;
-}
-
-.candela-sidebar-action__action {
-    display: flex;
-    justify-content: space-between;
-}
-
-.candela-sidebar-action__action_gilded {
-    font-weight: bold;
-}
-
 /*
 .gm-view__scenes {
     grid-row: 3;

visions/ui/src/components/simple_guage.rs

@@ -1,3 +1,4 @@
+use stylist::{css, Style};
 use yew::prelude::*;
 
 #[derive(PartialEq, Properties)]
@@ -15,7 +16,18 @@ pub fn SimpleGuage(
         max,
     }: &SimpleGuageProperties,
 ) -> Html {
+    let style = Style::new(css!(
+        r#"
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+    "#,
+    ))
+    .unwrap();
     html! {
-        <>{label}{":"} {current} {"/"} {max}</>
+        <div class={style}>
+            <div>{label}</div>
+            <div>{current} {"/"} {max}</div>
+        </div>
     }
 }

visions/ui/src/components/websocket_provider.rs

@@ -112,7 +112,7 @@ pub fn WebsocketProvider(
 
     html! {
         <ContextProvider<SocketState> context={(*socket_state).clone()}>
-            { children }
+            { children.clone() }
         </ContextProvider<SocketState>>
     }
 }

visions/ui/src/state.rs

@@ -172,7 +172,7 @@ pub fn StateProvider(StateProviderProps { children }: &StateProviderProps) -> Ht
 
     html! {
         <ContextProvider<UseReducerHandle<AppState>> context={app_state}>
-            {children}
+            {children.clone()}
         </ContextProvider<UseReducerHandle<AppState>>>
     }
 }

visions/ui/src/systems/candela.rs

@@ -1,11 +1,11 @@
 use serde::Deserialize;
+use std::str::FromStr;
+use stylist::{ast::Sheet, css, yew::use_style, Style};
 use visions_types::*;
 use yew::prelude::*;
 
 use crate::components::SimpleGuage;
 
-// use super::SystemImpl;
-
 #[derive(Clone, PartialEq, Deserialize)]
 pub struct Candela {
     id: CharacterId,
@@ -99,12 +99,11 @@ pub fn ActionGroupHeader(
         name,
         drives,
         max_drives,
-        resistances,
+        resistances: _,
     }: &ActionGroupHeaderProperties,
 ) -> Html {
     html! {
         <div class="candela-sidebar-actions__header">
-            <div>{name}</div>
             <SimpleGuage label={name.clone()} current={drives} max={max_drives} />
         </div>
     }
@@ -142,7 +141,35 @@ pub struct SidebarProperties {
 
 #[function_component]
 pub fn Sidebar(SidebarProperties { character }: &SidebarProperties) -> Html {
-    html! { <div>
+    let style = css!(
+        r#"
+        .candela-sidebar-actions__header {
+            display: flex;
+            padding: 2px;
+            padding-left: 4px;
+            padding-right: 4px;
+            justify-content: space-between;
+            background-color: black;
+            color: white;
+        }
+
+        .candela-sidebar__action {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .candela-sidebar-action__action {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .candela-sidebar-action__action_gilded {
+            font-weight: bold;
+        }
+    "#
+    );
+
+    html! { <div class={style}>
         <div class="candela-sidebar__header">
             <p> <b>{character.data.name.clone()}</b> </p>
         </div>

visions/ui/src/systems/mod.rs

@@ -38,7 +38,7 @@ pub fn CharacterSidebar(SidebarProperties { character }: &SidebarProperties) ->
 #[function_component]
 pub fn GmSidebar(SidebarProperties { character }: &SidebarProperties) -> Html {
     match character {
-        System::Candela(character) => html! { <div> </div> },
-        System::Cypher(character) => html! { <div> </div> },
+        System::Candela(_character) => html! { <div> </div> },
+        System::Cypher(_character) => html! { <div> </div> },
     }
 }

visions/ui/src/views/game_view.rs

@@ -22,11 +22,13 @@ pub fn GameView(PlayerViewProps { game_id }: &PlayerViewProps) -> Html {
     let session_info = session(&app_state);
     let game_ref: UseStateHandle<Option<GameOverview>> = use_state(|| None);
 
+    /*
     let scene_title: UseStateHandle<Option<String>> = use_state(|| None);
     let background_url: UseStateHandle<Option<String>> = use_state(|| None);
     let current_scene: UseStateHandle<Option<SceneId>> = use_state(|| None);
     let available_scenes: UseStateHandle<Vec<(SceneId, String)>> = use_state(|| vec![]);
     let available_images: UseStateHandle<Vec<String>> = use_state(|| vec![]);
+    */
 
     use_effect_with((session_info.clone(), game_id.clone()), {
         let game_ref = game_ref.clone();