role reveal for big screen

style/big-screen.scss

@@ -0,0 +1,38 @@
+.big-screen-wrapper {
+	margin: 0;
+	height: 100vh;
+	width: 100vw;
+	position: absolute;
+	top: 0;
+	left: 0;
+	user-select: none;
+
+	.role-reveal {
+		width: 100%;
+		height: 100%;
+		font-size: 2em;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 0.5ch;
+		align-items: stretch;
+
+		.player {
+			flex-grow: 1;
+			height: auto;
+
+			display: flex;
+			flex-direction: column;
+			flex-wrap: nowrap;
+			align-items: center;
+			justify-content: center;
+			background-color: color.change($red1, $alpha: 0.1);
+			border: 1px solid color.change($red1, $alpha: 0.6);
+
+			&.ready {
+				background-color: color.change($blue1, $alpha: 0.3);
+				border: 1px solid $blue1;
+			}
+		}
+	}
+}

style/main.scss

@@ -56,6 +56,7 @@ $drunk_color_faint: color.change($drunk_color, $alpha: 0.1);
 @import 'faction';
 @import 'setup';
 @import 'icon';
+@import 'big-screen';
 
 @mixin flexbox() {
 	display: -webkit-box;
@@ -72,16 +73,6 @@ body {
 	color: white;
 }
 
-.big-screen-wrapper {
-	margin: 0;
-	height: 100vh;
-	width: 100vw;
-	position: absolute;
-	top: 0;
-	left: 0;
-	user-select: none;
-}
-
 .error_container {
 	position: fixed;
 	top: 3vh;

werewolves/src/app/pages/game/big.rs

@@ -3,7 +3,11 @@ use core::str::FromStr;
 
 use crate::{
     ConsoleLogError,
-    app::{error::WolfError, pages::NotFound, storage::user::AuthContextStoreFields},
+    app::{
+        error::WolfError,
+        pages::{NotFound, game::host::RoleRevealCharacter},
+        storage::user::AuthContextStoreFields,
+    },
 };
 use codee::binary::MsgpackSerdeCodec;
 use leptos::prelude::*;
@@ -39,12 +43,13 @@ pub fn BigScreen() -> impl IntoView {
         let players = RwSignal::new(Default::default());
         let settings = RwSignal::new(Default::default());
         let page = RwSignal::new(BigScreenPage::default());
+        let acks: RwSignal<Box<[RoleRevealCharacter]>> = RwSignal::new(Box::new([]));
         Effect::new(move || {
             params.read().get("id").unwrap_or_default();
         });
         let Ok(game_id) = GameId::from_str(params.read().get("id").unwrap_or_default().as_str())
         else {
-            return view! {<NotFound />}.into_any();
+            return view! { <NotFound /> }.into_any();
         };
         let url = RwSignal::new(format!("/api/games/{game_id}"));
         Effect::watch(
@@ -149,7 +154,7 @@ pub fn BigScreen() -> impl IntoView {
                     day,
                     settings,
                 } => todo!(),
-                ServerToHostMessage::PlayerStates(character_states) => todo!(),
+                ServerToHostMessage::PlayerStates(_) => {}
                 ServerToHostMessage::ActionPrompt(action_prompt, _) => todo!(),
                 ServerToHostMessage::ActionResult(character_identity, action_result) => todo!(),
                 ServerToHostMessage::Lobby {
@@ -167,7 +172,22 @@ pub fn BigScreen() -> impl IntoView {
                 }
                 ServerToHostMessage::Error(err) => log::error!("server error: {err}"),
                 ServerToHostMessage::GameOver(game_over) => todo!(),
-                ServerToHostMessage::WaitingForRoleRevealAcks { ackd, waiting } => todo!(),
+                ServerToHostMessage::WaitingForRoleRevealAcks { ackd, waiting } => {
+                    let mut reveals = ackd
+                        .into_iter()
+                        .map(|a| RoleRevealCharacter {
+                            char: a,
+                            acknowledged: true,
+                        })
+                        .chain(waiting.into_iter().map(|w| RoleRevealCharacter {
+                            char: w,
+                            acknowledged: false,
+                        }))
+                        .collect::<Box<_>>();
+                    reveals.sort_by_key(|r| r.char.number);
+                    acks.set(reveals);
+                    page.set(BigScreenPage::RoleReveal);
+                }
                 ServerToHostMessage::Story { story, page } => todo!(),
                 ServerToHostMessage::DeadChat(dead_chat_messages) => todo!(),
                 ServerToHostMessage::DeadChatMessage(dead_chat_message) => todo!(),
@@ -179,11 +199,9 @@ pub fn BigScreen() -> impl IntoView {
             BigScreenPage::Setup => {
                 view! { <SetupView settings=settings.read_only() /> }.into_any()
             }
-            BigScreenPage::RoleReveal => todo!(),
-            BigScreenPage::QrCode => view! {
-                <QrView game_id=game_id/>
-            }
+            BigScreenPage::RoleReveal => view! { <BigScreenRoleReveal acks=acks.read_only() /> }
             .into_any(),
+            BigScreenPage::QrCode => view! { <QrView game_id=game_id /> }.into_any(),
         };
 
         view! { <div class="big-screen-wrapper">{content}</div> }.into_any()

werewolves/src/app/pages/game/big/role_reveal.rs

@@ -0,0 +1,25 @@
+use leptos::prelude::*;
+
+use crate::app::{components::IdentityInline, pages::game::host::RoleRevealCharacter};
+
+#[component]
+pub fn BigScreenRoleReveal(acks: ReadSignal<Box<[RoleRevealCharacter]>>) -> impl IntoView {
+    let acks = move || {
+        acks.get()
+            .into_iter()
+            .map(|ackd| {
+                let RoleRevealCharacter { char, acknowledged } = ackd;
+                let ident = RwSignal::new(char.into_public()).read_only();
+                view! {
+                    <div class="player" class:ready=acknowledged>
+                        <IdentityInline ident=ident />
+                    </div>
+                }
+            })
+            .collect_view()
+    };
+
+    move || {
+        view! { <div class="role-reveal">{acks}</div> }
+    }
+}

werewolves/src/app/pages/game/big/setup.rs

@@ -70,7 +70,7 @@ pub fn SetupView(settings: ReadSignal<GameSettings>) -> impl IntoView {
         view! {
             <div class="setup-screen">
                 <div class="setup">
-                    //
+                    // 
                     {categories} <div class="setup-category big">
                         <span class="slot">
                             <span class="count">{power_roles_count}</span>