emilis
/
werewolves
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

restyling for host ui elements

This commit is contained in:
emilis 2025-09-30 19:21:00 +01:00
parent d90f4ec6fe
commit a11927fb68
No known key found for this signature in database
10 changed files with 413 additions and 632 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

638
werewolves/index.scss
View File

@ -2,6 +2,9 @@ $wolves_color: rgba(255, 0, 0, 0.7);
$village_color: rgba(0, 0, 255, 0.7); $village_color: rgba(0, 0, 255, 0.7);
$connected_color: hsl(120, 68%, 50%); $connected_color: hsl(120, 68%, 50%);
$disconnected_color: hsl(0, 68%, 50%); $disconnected_color: hsl(0, 68%, 50%);
$client_shadow_color: hsl(260, 55%, 61%);
$client_shadow_color_2: hsl(240, 55%, 61%);
$client_filter: drop-shadow(5px 5px 0 $client_shadow_color) drop-shadow(5px 5px 0 $client_shadow_color_2);
html, html,
@ -10,44 +13,13 @@ body {
} }
body { body {
background:
linear-gradient(145deg, rgba(133, 0, 153, 1) 0%, rgba(57, 0, 153, 1) 100%);
min-height: 100vh; min-height: 100vh;
font-size: 1.5rem; font-size: 1.5rem;
max-width: 100vw; max-width: 100vw;
min-width: 100vw;
user-select: none; user-select: none;
} color: rgba(255, 255, 255, 1);
background: black;
main {
color: #fff6d5;
font-family: sans-serif;
text-align: center;
padding-bottom: 80px;
// min-height: 50vh;
// background:
// linear-gradient(145deg, rgba(133, 0, 153, 1) 0%, rgba(57, 0, 153, 1) 100%);
}
.logo {
height: 20em;
}
.burger {
background-color: transparent;
border: none;
}
h1.navbar-item {
font-size: 32px;
align-self: flex-start;
padding-left: 30px;
}
.navbar-start .navbar-item {
background-color: #fff6d5;
margin-left: 20px;
padding-left: 5px;
padding-right: 5px;
} }
$link_color: #432054; $link_color: #432054;
@ -64,300 +36,57 @@ $error_shadow_color: hsla(340, 95%, 61%, 0.7);
$error_shadow_color_2: hsla(0, 95%, 61%, 0.7); $error_shadow_color_2: hsla(0, 95%, 61%, 0.7);
$error_filter: drop-shadow(5px 5px 0 $error_shadow_color) drop-shadow(5px 5px 0 $error_shadow_color_2); $error_filter: drop-shadow(5px 5px 0 $error_shadow_color) drop-shadow(5px 5px 0 $error_shadow_color_2);
.navbar-item:hover {
filter: $link_select_filter;
}
.navbar-menu { nav.debug-nav {
justify-items: center;
}
.navbar a,
.link-container a,
.pagination-item a {
text-decoration: none;
color: $link_color;
}
.out-of-order { position: sticky;
filter: $link_select_filter; backdrop-filter: brightness(70%);
}
.navbar {
font-family: 'Cute Font';
display: flex; display: flex;
align-items: baseline; align-items: flex-start;
flex-direction: row;
gap: 30px;
filter: $link_filter;
}
.navbar-icon img {
width: 32px;
margin-left: 15px;
}
.post-back button {
padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} padding-top: 10px;
padding-left: 5vw;
[title] { padding-right: 5vw;
position: relative;
display: inline-flex;
justify-content: center;
}
[title]:focus::after {
content: attr(title);
position: absolute;
top: 90%;
font: 'Cute Font';
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
z-index: 3;
}
@media only screen and (min-width : 872px) {
.footer {
display: inline-block;
left: 0;
right: 0;
bottom: 0;
font-size: 12px;
width: 100vw;
user-select: none;
height: auto;
position: fixed;
backdrop-filter: blur(1px);
}
.post-back {
position: absolute;
left: 25px;
}
.post-back button {
padding-top: 20px;
padding-bottom: 20px;
}
.post-container {
display: flex;
flex-direction: column;
text-wrap: wrap;
width: 80vw;
margin-left: 10vw;
margin-right: 10vw;
justify-content: center;
}
.smaller video {
width: 360px;
height: 360px;
}
}
@media only screen and (max-width : 871px) {
.footer {
display: inline-block;
left: 0;
right: 0;
bottom: 0;
font-size: 12px;
width: 100vw;
user-select: none;
height: auto;
position: inherit;
}
.post-container {
display: flex;
flex-direction: column;
text-wrap: wrap;
width: 90vw;
margin-left: 5vw;
margin-right: 5vw;
justify-content: center;
}
.post-back {
margin-bottom: 20px;
position: relative;
left: 5vw;
width: 90vw;
}
.post-back button {
width: 100%
}
}
.post-details {
gap: 0px;
display: inline-block;
}
.post-details h3 {
font-size: 0.7rem;
font-weight: lighter;
font-style: italic;
}
.footer .content {
filter: drop-shadow(0px 0px 6px #000000);
}
.badge-list {
display: flex;
flex-wrap: wrap;
height: 100%;
max-width: 100vw;
align-items: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 8px;
gap: 10px; gap: 10px;
}
.badge {
filter: drop-shadow(5px 5px 0px #000000);
image-rendering: pixelated;
}
.badge:hover {
filter: brightness(120%) drop-shadow(5px 5px 0px hsl(0, 0%, 30%));
transform: scale(1.1) skew(-10deg, 10deg);
}
.container .posts-list {
padding-bottom: 100px;
}
.link-list {
font-family: 'Cute Font';
display: inline-flex;
flex-direction: column;
gap: 30px;
filter: $link_filter;
}
.pagination-list {
list-style: none;
font-family: 'Cute Font';
display: inline-flex;
flex-direction: row;
gap: 30px;
filter: $link_filter;
} }
.link-container { .button-container {
background-color: #fff6d5; button {
width: 100%; font-size: 1.3rem;
padding-left: 3px; border: 1px solid rgba(255, 255, 255, 1);
padding-right: 3px; padding: 5px;
background-color: rgba(0, 0, 0, 0.3);
color: #cccccc;
cursor: pointer;
} }
.link-container:hover { button:hover {
filter: $link_select_filter; filter: $link_select_filter;
} }
.home-body { // button {
display: flex; // color: #fff;
columns: 2; // background: transparent;
flex-wrap: wrap; // background-repeat: no-repeat;
width: 80%; // cursor: pointer;
margin-left: 5%; // overflow: hidden;
margin-right: 5%; // outline: none;
justify-content: space-evenly; // padding: 0px;
// &:hover {
// background-color: rgba(0, 0, 0, 0.5);
// }
// }
} }
.home-column {
margin-left: 5%;
margin-right: 5%;
}
.post-body {
background-color: $link_bg_color;
font-family: 'Cute Font';
filter: $link_filter;
color: $link_color;
padding-left: 10px;
padding-right: 10px;
}
.pagination {
display: flex;
justify-content: center;
gap: 20px;
width: 100vw;
}
.pagination-list {
display: flex;
justify-content: left;
flex-direction: row;
gap: 15px;
}
.pagination-list .pagination-item {
background-color: #fff6d5;
padding-left: 3px;
padding-right: 3px;
}
.pagination-item:hover {
filter: $link_select_filter;
}
.scratchpad-tile {
width: 10px;
height: 10px;
background: #fff6d5;
}
.scratchpad-active-tile {
filter: invert(100%);
}
.scratchpad-grid {
display: grid;
grid-template-columns: repeat(32, 1fr);
grid-template-rows: repeat(32, 1fr);
filter: $link_filter;
}
.subline {
font-size: 1rem;
text-align: center;
opacity: 80%;
filter: brightness(80%);
font-style: italic;
}
.player .number { .player .number {
padding-top: 3px; padding-top: 3px;
margin: 0px; margin: 0px;
// color: white;
} }
.player:hover { .player:hover {
@ -370,51 +99,35 @@ $error_filter: drop-shadow(5px 5px 0 $error_shadow_color) drop-shadow(5px 5px 0
margin-right: 10vw; margin-right: 10vw;
} }
.player-title,
.player-description {
padding-left: 10px;
padding-right: 10px;
filter: $link_filter;
background-color: $link_bg_color;
}
.player-description {
font-size: 0.8rem;
text-align: left;
padding-left: 20px;
}
.video-player {
border: solid;
border-width: 5px;
border-color: $border_color;
background-color: $border_color;
}
video {
max-width: 100%;
max-height: 100%;
object-fit: scale-down;
}
.video-container {
border: none;
background: none;
}
.start-game { .start-game {
align-self: center; align-self: center;
margin-bottom: 30px; margin-bottom: 30px;
font-size: 2rem; font-size: 2rem;
background-color: hsl(283, 100%, 80%); // background-color: hsl(283, 100%, 80%);
border: 1px solid rgba(0, 255, 0, 0.7);
background-color: black;
color: rgba(0, 255, 0, 0.7);
cursor: pointer;
position: relative; position: relative;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
&:hover {
background-color: rgba(0, 255, 0, 0.3);
} }
&:disabled {
border: 1px solid rgba(255, 0, 0, 1);
color: rgba(255, 0, 0, 1);
filter: none;
&:hover {
background-color: rgba(255, 0, 0, 0.3);
filter: none;
}
}
}
button { button {
font-size: 1rem; font-size: 1rem;
@ -422,7 +135,6 @@ button {
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
color: inherit;
border: none; border: none;
width: fit-content; width: fit-content;
@ -450,132 +162,52 @@ button:disabled:hover::after {
margin-top: 10px; margin-top: 10px;
top: 90%; top: 90%;
font: 'Cute Font'; font: 'Cute Font';
color: #000; // color: #000;
background-color: #fff; // background-color: #fff;
border: 1px solid; color: rgba(255, 0, 0, 1);
background-color: rgba(255, 0, 0, 0.3);
border: 1px solid rgba(255, 0, 0, 0.3);
min-width: 50vw; min-width: 50vw;
width: fit-content; width: fit-content;
padding: 3px; padding: 3px;
z-index: 3; z-index: 3;
} }
.player-title {
font-size: 1.2rem;
justify-self: center;
flex-grow: 10;
font-style: italic;
padding-top: 2px;
padding-bottom: 2px;
}
.player-header {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: left;
height: min-content;
align-items: stretch;
margin-bottom: 20px;
}
.player-header>.button-container>button {
height: 100%;
}
.embed-link-hint {
font-size: 0.8rem;
font-style: italic;
text-align: center;
}
.post-content {
padding-left: 30px;
padding-right: 30px;
}
.post-content p {
text-align: left;
font-size: 1.1rem;
}
.definition {
text-decoration: underline dotted;
cursor: help;
}
.intentionally-left-blank {
font-size: 0.8rem;
text-align: center;
font-style: italic;
user-select: none;
opacity: 70%;
}
blockquote {
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C" "\201D" "\2018" "\2019";
font-style: italic;
}
blockquote p {
display: inline;
}
.sic {
position: relative;
bottom: 1.5ex;
font-size: 60%;
}
.settings { .settings {
list-style: none; list-style: none;
font-family: 'Cute Font'; font-family: 'Cute Font';
// font-size: 0.7rem;
background-color: white;
display: flex; display: flex;
// flex-wrap: wrap;
flex-direction: column; flex-direction: column;
// width: 100%;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
gap: 30px; gap: 30px;
// filter: $link_filter;
} }
.settings h2 { .wolves-list {
text-align: center;
}
stack {
list-style: none;
font-family: 'Cute Font';
background-color: white;
display: flex;
// flex-wrap: wrap;
flex-direction: column;
padding: 20px;
gap: 10px;
}
stack>ul {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; flex-direction: row;
justify-content: space-evenly;
flex: 1 1 0;
} }
stack>ul>li { .character {
display: inline-block; text-align: center;
// margin: 10px; border: 3px solid rgba(0, 0, 0, 0.4);
.role {
font-size: 2rem;
} }
h2 {
}
h1,
h2,
h3,
h4 {
text-align: center; text-align: center;
} }
@ -589,7 +221,6 @@ button.confirm {
list-style: none; list-style: none;
font-family: 'Cute Font'; font-family: 'Cute Font';
background-color: white;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
@ -611,14 +242,20 @@ button.confirm {
.role-card button { .role-card button {
min-width: 25px; min-width: 25px;
min-height: 25px; min-height: 25px;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.3);
margin: 0px; margin: 0px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
cursor: pointer;
&:hover {
background-color: rgba(255, 255, 255, 0.7);
}
} }
.role-card.village { .role-card.village {
background-color: $village_color; background-color: $village_color;
color: rgba(255, 255, 255, 1);
} }
rolecard { rolecard {
@ -631,7 +268,7 @@ rolecard {
justify-content: space-between; justify-content: space-between;
} }
.role-card.wolves { .role.wolves {
background-color: $wolves_color; background-color: $wolves_color;
} }
@ -694,7 +331,6 @@ bool_role {
display: inline-block; display: inline-block;
&:hover { &:hover {
// color: white;
filter: invert(20%); filter: invert(20%);
font-size: 3rem; font-size: 3rem;
} }
@ -727,6 +363,10 @@ bool_role {
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
margin: 10px; margin: 10px;
&.wolves {
background-color: $wolves_color;
}
} }
@ -750,9 +390,6 @@ player {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
$client_shadow_color: hsl(260, 55%, 61%);
$client_shadow_color_2: hsl(240, 55%, 61%);
$client_filter: drop-shadow(5px 5px 0 $client_shadow_color) drop-shadow(5px 5px 0 $client_shadow_color_2);
client { client {
list-style: none; list-style: none;
@ -792,33 +429,39 @@ clients {
.role-reveal-cards { .role-reveal-cards {
list-style: none; list-style: none;
// max-width: 80vw;
font-family: 'Cute Font'; font-family: 'Cute Font';
// font-size: 0.7rem;
background-color: hsl(280, 55%, 61%);
display: flex; display: flex;
// flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: row;
margin-left: 20px; justify-content: space-evenly;
margin-right: 20px; color: black;
padding: 30px; // align-content: stretch;
// flex: 1 1 0px;
gap: 30px; gap: 10px;
filter: $client_filter;
border: 2px solid black;
} }
.role-reveal-card { .role-reveal-card {
background-color: purple; border: 3px solid rgba(0, 0, 0, 0.5);
background-color: rgba(255, 0, 0, 0.7);
min-width: 100px;
& p.number {
font-size: 2rem;
}
& p {
text-align: center;
}
} }
.role-reveal-card.ready { .role-reveal-card.ready {
background-color: green; background-color: rgba(0, 255, 0, 0.7);
} }
.role-reveal-card.not-ready {
background-color: red;
}
.pronouns { .pronouns {
font-size: 70%; font-size: 70%;
@ -829,9 +472,6 @@ clients {
list-style: none; list-style: none;
font-family: 'Cute Font'; font-family: 'Cute Font';
// font-size: 0.7rem;
// background-color: white;
// max-width: 90vw;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
@ -861,11 +501,8 @@ clients {
justify-content: center; justify-content: center;
font-family: 'Cute Font'; font-family: 'Cute Font';
// font-size: 0.7rem;
// max-width: 90vw;
// background-color: white;
display: flex; display: flex;
// flex-wrap: wrap;
flex-direction: column; flex-direction: column;
font-size: 2rem; font-size: 2rem;
margin-left: 20px; margin-left: 20px;
@ -883,7 +520,6 @@ clients {
} }
.content { .content {
background-color: white;
margin-left: 5vw; margin-left: 5vw;
margin-right: 5vw; margin-right: 5vw;
margin-top: 30px; margin-top: 30px;
@ -920,19 +556,34 @@ clients {
padding: 0px; padding: 0px;
.submenu { .submenu {
visibility: collapse; margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
// visibility: collapse;
display: none;
.button-container { .button-container {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
} }
&.shown {
// visibility: visible;
display: flex;
}
button {
font-size: 1rem;
}
} }
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
.submenu { .submenu {
visibility: visible; // visibility: visible;
display: flex;
} }
} }
} }
@ -942,19 +593,6 @@ clients {
// justify-content: space-evenly; // justify-content: space-evenly;
} }
nav.debug-nav {
position: sticky;
backdrop-filter: brightness(70%);
// background-color: $link_bg_color;
// filter: $link_filter;
display: flex;
align-items: flex-start;
button {
color: #cccccc;
}
}
error { error {
position: absolute; position: absolute;
top: 0; top: 0;
@ -979,23 +617,7 @@ error {
} }
} }
.button-container {
background-color: inherit;
button {
background: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
padding: 0px;
&:hover {
background-color: rgba(0, 0, 0, 0.5);
}
}
}
.player { .player {

57
werewolves/src/components/action/prompt.rs
View File

@ -12,7 +12,7 @@ use werewolves_proto::{
use yew::prelude::*; use yew::prelude::*;
use crate::components::{ use crate::components::{
CoverOfDarkness, Identity, Button, CoverOfDarkness, Identity,
action::{BinaryChoice, OptionalSingleTarget, SingleTarget, TwoTarget, WolvesIntro}, action::{BinaryChoice, OptionalSingleTarget, SingleTarget, TwoTarget, WolvesIntro},
}; };
@ -24,12 +24,18 @@ pub struct ActionPromptProps {
pub on_complete: Callback<HostMessage>, pub on_complete: Callback<HostMessage>,
} }
fn identity_html(ident: Option<&PublicIdentity>) -> Option<Html> { fn identity_html(props: &ActionPromptProps, ident: Option<&PublicIdentity>) -> Option<Html> {
props
.big_screen
.not()
.then(|| {
ident.map(|ident| { ident.map(|ident| {
html! { html! {
<Identity ident={ident.clone()}/> <Identity ident={ident.clone()}/>
} }
}) })
})
.flatten()
} }
#[function_component] #[function_component]
@ -40,7 +46,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
let next = props.big_screen.not().then(|| { let next = props.big_screen.not().then(|| {
Callback::from(move |_| { Callback::from(move |_| {
on_complete.emit(HostMessage::InGame(HostGameMessage::Night( on_complete.emit(HostMessage::InGame(HostGameMessage::Night(
HostNightMessage::Next, HostNightMessage::ActionResponse(ActionResponse::ClearCoverOfDarkness),
))) )))
}) })
}); });
@ -58,7 +64,11 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
))) )))
}); });
html! { html! {
<WolvesIntro big_screen={props.big_screen} on_complete={on_complete} wolves={wolves.clone()}/> <WolvesIntro
big_screen={props.big_screen}
on_complete={on_complete}
wolves={wolves.clone()}
/>
} }
} }
ActionPrompt::Seer { ActionPrompt::Seer {
@ -75,7 +85,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
}); });
html! { html! {
<div> <div>
{identity_html(props.big_screen.then_some(&character_id.public))} {identity_html(props, Some(&character_id.public))}
<SingleTarget <SingleTarget
targets={living_players.clone()} targets={living_players.clone()}
target_selection={on_select} target_selection={on_select}
@ -96,12 +106,12 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
}); });
let cont = props.big_screen.not().then(|| { let cont = props.big_screen.not().then(|| {
html! { html! {
<button onclick={on_click}>{"continue"}</button> <Button on_click={on_click}>{"continue"}</Button>
} }
}); });
html! { html! {
<div> <div>
{identity_html(props.big_screen.then_some(&character_id.public))} {identity_html(props, Some(&character_id.public))}
<h2>{"your role has changed"}</h2> <h2>{"your role has changed"}</h2>
<p>{new_role.to_string()}</p> <p>{new_role.to_string()}</p>
{cont} {cont}
@ -122,7 +132,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
}); });
html! { html! {
<div> <div>
{identity_html(props.big_screen.then_some(&character_id.public))} {identity_html(props, Some(&character_id.public))}
<SingleTarget <SingleTarget
targets={targets.clone()} targets={targets.clone()}
target_selection={on_select} target_selection={on_select}
@ -145,7 +155,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
}); });
html! { html! {
<div> <div>
{identity_html(props.big_screen.then_some(&character_id.public))} {identity_html(props, Some(&character_id.public))}
<TwoTarget <TwoTarget
targets={living_players.clone()} targets={living_players.clone()}
target_selection={on_select} target_selection={on_select}
@ -168,7 +178,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
}); });
html! { html! {
<div> <div>
{identity_html(props.big_screen.then_some(&character_id.public))} {identity_html(props, Some(&character_id.public))}
<SingleTarget <SingleTarget
targets={dead_players.clone()} targets={dead_players.clone()}
target_selection={on_select} target_selection={on_select}
@ -192,7 +202,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
}); });
html! { html! {
<div> <div>
{identity_html(props.big_screen.then_some(&character_id.public))} {identity_html(props, Some(&character_id.public))}
<SingleTarget <SingleTarget
targets={living_players.clone()} targets={living_players.clone()}
target_selection={on_select} target_selection={on_select}
@ -221,7 +231,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
}); });
html! { html! {
<div> <div>
{identity_html(props.big_screen.then_some(&character_id.public))} {identity_html(props, Some(&character_id.public))}
<OptionalSingleTarget <OptionalSingleTarget
targets={living_players.clone()} targets={living_players.clone()}
target_selection={on_select} target_selection={on_select}
@ -231,7 +241,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
} }
} }
ActionPrompt::MapleWolf { ActionPrompt::MapleWolf {
character_id: _, character_id,
kill_or_die, kill_or_die,
living_players, living_players,
} => { } => {
@ -250,6 +260,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
}); });
html! { html! {
<div> <div>
{identity_html(props, Some(&character_id.public))}
<OptionalSingleTarget <OptionalSingleTarget
targets={living_players.clone()} targets={living_players.clone()}
target_selection={on_select} target_selection={on_select}
@ -261,7 +272,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
} }
} }
ActionPrompt::Guardian { ActionPrompt::Guardian {
character_id: _, character_id,
previous, previous,
living_players, living_players,
} => { } => {
@ -291,6 +302,8 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
}); });
html! { html! {
<div>
{identity_html(props, Some(&character_id.public))}
<SingleTarget <SingleTarget
targets={living_players.clone()} targets={living_players.clone()}
target_selection={on_select} target_selection={on_select}
@ -298,6 +311,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
> >
{last_protect} {last_protect}
</SingleTarget> </SingleTarget>
</div>
} }
} }
ActionPrompt::WolfPackKill { living_villagers } => { ActionPrompt::WolfPackKill { living_villagers } => {
@ -317,7 +331,7 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
/> />
} }
} }
ActionPrompt::Shapeshifter { character_id: _ } => { ActionPrompt::Shapeshifter { character_id } => {
let on_complete = props.on_complete.clone(); let on_complete = props.on_complete.clone();
let on_select = props.big_screen.not().then_some({ let on_select = props.big_screen.not().then_some({
move |shift| { move |shift| {
@ -327,13 +341,16 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
} }
}); });
html! { html! {
<div>
{identity_html(props, Some(&character_id.public))}
<BinaryChoice on_chosen={on_select}> <BinaryChoice on_chosen={on_select}>
<h2>{"shapeshift?"}</h2> <h2>{"shapeshift?"}</h2>
</BinaryChoice> </BinaryChoice>
</div>
} }
} }
ActionPrompt::AlphaWolf { ActionPrompt::AlphaWolf {
character_id: _, character_id,
living_villagers, living_villagers,
} => { } => {
let on_complete = props.on_complete.clone(); let on_complete = props.on_complete.clone();
@ -345,15 +362,18 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
}) })
}); });
html! { html! {
<div>
{identity_html(props, Some(&character_id.public))}
<OptionalSingleTarget <OptionalSingleTarget
targets={living_villagers.clone()} targets={living_villagers.clone()}
target_selection={on_select} target_selection={on_select}
headline={"alpha wolf target"} headline={"alpha wolf target"}
/> />
</div>
} }
} }
ActionPrompt::DireWolf { ActionPrompt::DireWolf {
character_id: _, character_id,
living_players, living_players,
} => { } => {
let on_complete = props.on_complete.clone(); let on_complete = props.on_complete.clone();
@ -365,11 +385,14 @@ pub fn Prompt(props: &ActionPromptProps) -> Html {
}) })
}); });
html! { html! {
<div>
{identity_html(props, Some(&character_id.public))}
<SingleTarget <SingleTarget
targets={living_players.clone()} targets={living_players.clone()}
target_selection={on_select} target_selection={on_select}
headline={"direwolf block target"} headline={"direwolf block target"}
/> />
</div>
} }
} }
} }

64
werewolves/src/components/action/target.rs
View File

@ -1,4 +1,5 @@
use core::{fmt::Debug, ops::Not}; use core::{fmt::Debug, ops::Not};
use std::sync::Arc;
use werewolves_macros::ChecksAs; use werewolves_macros::ChecksAs;
use werewolves_proto::{message::Target, player::CharacterId}; use werewolves_proto::{message::Target, player::CharacterId};
@ -50,6 +51,8 @@ impl Component for TwoTarget {
headline, headline,
target_selection, target_selection,
} = ctx.props(); } = ctx.props();
let mut targets = targets.clone();
targets.sort_by(|l, r| l.public.number.cmp(&r.public.number));
let target_selection = target_selection.clone(); let target_selection = target_selection.clone();
let scope = ctx.link().clone(); let scope = ctx.link().clone();
@ -160,6 +163,8 @@ impl Component for OptionalSingleTarget {
target_selection, target_selection,
children, children,
} = ctx.props(); } = ctx.props();
let mut targets = targets.clone();
targets.sort_by(|l, r| l.public.number.cmp(&r.public.number));
let target_selection = target_selection.clone(); let target_selection = target_selection.clone();
let scope = ctx.link().clone(); let scope = ctx.link().clone();
@ -257,6 +262,8 @@ impl Component for SingleTarget {
target_selection, target_selection,
children, children,
} = ctx.props(); } = ctx.props();
let mut targets = targets.clone();
targets.sort_by(|l, r| l.public.number.cmp(&r.public.number));
let target_selection = target_selection.clone(); let target_selection = target_selection.clone();
let scope = ctx.link().clone(); let scope = ctx.link().clone();
let card_select = Callback::from(move |target| { let card_select = Callback::from(move |target| {
@ -356,3 +363,60 @@ fn TargetCard(props: &TargetCardProps) -> Html {
</div> </div>
} }
} }
#[derive(Debug, Clone, PartialEq, Properties)]
pub struct CustomTargetCardProps {
pub target: Target,
pub options: Arc<[String]>,
pub on_select: Option<Callback<(CharacterId, String)>>,
#[prop_or_default]
pub class: String,
#[prop_or(true)]
pub hide_submenu: bool,
}
#[function_component]
pub fn CustomTargetCard(
CustomTargetCardProps {
target,
options,
on_select,
class,
hide_submenu,
}: &CustomTargetCardProps,
) -> Html {
let submenu = options.is_empty().not().then(|| {
let buttons = options
.iter()
.cloned()
.map(|option| {
let on_select = on_select.clone();
let button_text = option.clone();
let character_id = target.character_id.clone();
let on_click = on_select
.map(|on_select| {
Callback::from(move |_| {
on_select.emit((character_id.clone(), option.clone()))
})
})
.unwrap_or_default();
html! {
<Button on_click={on_click}>{button_text}</Button>
}
})
.collect::<Html>();
html! {
<nav class={classes!("submenu", hide_submenu.not().then_some("shown"))}>
{buttons}
</nav>
}
});
html! {
<div class={"row-list baseline"}>
<div class={classes!("ident", "column-list", class)}>
<Identity ident={target.public.clone()} />
{submenu}
</div>
</div>
}
}

33
werewolves/src/components/action/wolves.rs
View File

@ -1,6 +1,10 @@
use core::ops::Not;
use werewolves_proto::{message::Target, role::RoleTitle}; use werewolves_proto::{message::Target, role::RoleTitle};
use yew::prelude::*; use yew::prelude::*;
use crate::components::{Button, Identity};
#[derive(Debug, Clone, PartialEq, Properties)] #[derive(Debug, Clone, PartialEq, Properties)]
pub struct WolvesIntroProps { pub struct WolvesIntroProps {
pub wolves: Box<[(Target, RoleTitle)]>, pub wolves: Box<[(Target, RoleTitle)]>,
@ -13,30 +17,23 @@ pub fn WolvesIntro(props: &WolvesIntroProps) -> Html {
let on_complete = props.on_complete.clone(); let on_complete = props.on_complete.clone();
let on_complete = Callback::from(move |_| on_complete.emit(())); let on_complete = Callback::from(move |_| on_complete.emit(()));
html! { html! {
<div class="wolves-intro"> <div class="column-list">
<h2>{"these are the wolves:"}</h2> <h2>{"these are the wolves:"}</h2>
{ <div class="row-list wolves-list">
if props.big_screen {
html!()
} else {
html!{
<button onclick={on_complete}>{"continue"}</button>
}
}
}
{ {
props.wolves.iter().map(|w| html!{ props.wolves.iter().map(|w| html!{
<div class={"character wolves"}> <div class="character wolves">
<h2 class="role">{w.1.to_string()}</h2> <p class="role">{w.1.to_string()}</p>
<p class="name">{w.0.public.name.clone()}</p> <Identity ident={w.0.public.clone()} />
{
w.0.public.pronouns.as_ref().map(|p| html!{
<p class="pronouns">{"("}{p.as_str()}{")"}</p>
}).unwrap_or(html!())
}
</div> </div>
}).collect::<Html>() }).collect::<Html>()
} }
</div> </div>
{
props.big_screen.not().then_some(html!{
<Button on_click={on_complete}>{"continue"}</Button>
})
}
</div>
} }
} }

2
werewolves/src/components/host/mod.rs
View File

@ -25,6 +25,8 @@ pub fn DaytimePlayerList(
}: &DaytimePlayerListProps, }: &DaytimePlayerListProps,
) -> Html { ) -> Html {
let on_select = big_screen.not().then(|| on_mark.clone()); let on_select = big_screen.not().then(|| on_mark.clone());
let mut characters = characters.clone();
characters.sort_by(|l, r| l.public_identity.number.cmp(&r.public_identity.number));
let chars = characters let chars = characters
.iter() .iter()
.map(|c| { .map(|c| {

5
werewolves/src/components/identity.rs
View File

@ -4,6 +4,8 @@ use yew::prelude::*;
#[derive(Debug, Clone, PartialEq, Properties)] #[derive(Debug, Clone, PartialEq, Properties)]
pub struct IdentityProps { pub struct IdentityProps {
pub ident: PublicIdentity, pub ident: PublicIdentity,
#[prop_or_default]
pub class: Option<String>,
} }
#[function_component] #[function_component]
@ -15,6 +17,7 @@ pub fn Identity(props: &IdentityProps) -> Html {
pronouns, pronouns,
number, number,
}, },
class,
} = props; } = props;
let pronouns = pronouns.as_ref().map(|p| { let pronouns = pronouns.as_ref().map(|p| {
html! { html! {
@ -22,7 +25,7 @@ pub fn Identity(props: &IdentityProps) -> Html {
} }
}); });
html! { html! {
<div class="identity"> <div class={classes!("identity", class)}>
<p class="number"><b>{number.get()}</b></p> <p class="number"><b>{number.get()}</b></p>
<p>{name}</p> <p>{name}</p>
{pronouns} {pronouns}

65
werewolves/src/components/reveal.rs
View File

@ -1,11 +1,15 @@
use std::sync::Arc;
use werewolves_proto::message::Target; use werewolves_proto::message::Target;
use yew::prelude::*; use yew::prelude::*;
use crate::components::{Button, action::CustomTargetCard};
#[derive(Debug, PartialEq, Properties)] #[derive(Debug, PartialEq, Properties)]
pub struct RoleRevealProps { pub struct RoleRevealProps {
pub ackd: Box<[Target]>, pub ackd: Box<[Target]>,
pub waiting: Box<[Target]>, pub waiting: Box<[Target]>,
pub on_force_ready: Callback<Target>, pub on_force_ready: Option<Callback<Target>>,
} }
pub struct RoleReveal {} pub struct RoleReveal {}
@ -25,11 +29,16 @@ impl Component for RoleReveal {
waiting, waiting,
on_force_ready, on_force_ready,
} = ctx.props(); } = ctx.props();
let on_force_ready = on_force_ready.clone(); let mut chars = ackd
let cards = ackd
.iter() .iter()
.map(|t| (t, true)) .map(|t| (t, true))
.chain(waiting.iter().map(|t| (t, false))) .chain(waiting.iter().map(|t| (t, false)))
.collect::<Box<[_]>>();
chars.sort_by(|(l, _), (r, _)| l.public.number.cmp(&r.public.number));
let on_force_ready = on_force_ready.clone();
let cards = chars
.into_iter()
.map(|(t, ready)| { .map(|(t, ready)| {
html! { html! {
<RoleRevealCard <RoleRevealCard
@ -42,16 +51,26 @@ impl Component for RoleReveal {
.collect::<Html>(); .collect::<Html>();
let nack = waiting.clone(); let nack = waiting.clone();
let on_force_all = Callback::from(move |_| { let force_all = on_force_ready
.map(|on_force_ready| {
Callback::from(move |_| {
for t in nack.clone() { for t in nack.clone() {
on_force_ready.emit(t); on_force_ready.emit(t);
} }
})
})
.map(|on_force_all| {
html! {
<Button on_click={on_force_all}>{"force ready all"}</Button>
}
}); });
html! { html! {
<div class="column-list gap">
{force_all}
<div class={"role-reveal-cards"}> <div class={"role-reveal-cards"}>
<button onclick={on_force_all}>{"force ready all"}</button>
{cards} {cards}
</div> </div>
</div>
} }
} }
} }
@ -60,27 +79,41 @@ impl Component for RoleReveal {
pub struct RoleRevealCardProps { pub struct RoleRevealCardProps {
pub target: Target, pub target: Target,
pub is_ready: bool, pub is_ready: bool,
pub on_force_ready: Callback<Target>, pub on_force_ready: Option<Callback<Target>>,
} }
#[function_component] #[function_component]
pub fn RoleRevealCard(props: &RoleRevealCardProps) -> Html { pub fn RoleRevealCard(props: &RoleRevealCardProps) -> Html {
let class = if props.is_ready { "ready" } else { "not-ready" }; let class = props.is_ready.then_some("ready");
let target = props.target.clone(); let target = props.target.clone();
let on_force_ready = props.on_force_ready.clone(); let on_force_ready = props.on_force_ready.clone();
let on_click = Callback::from(move |_| { let on_click = on_force_ready.map(|on_force_ready| {
Callback::from(move |_| {
on_force_ready.emit(target.clone()); on_force_ready.emit(target.clone());
})
}); });
let options: Arc<[String]> = if props.is_ready || props.on_force_ready.is_none() {
Arc::new([])
} else {
Arc::new([String::from("ready")])
};
html! { html! {
<div class={classes!(class, "role-reveal-card")}> <div class={classes!(class, "role-reveal-card")}>
<p>{props.target.public.name.as_str()}</p> <CustomTargetCard
{ target={props.target.clone()}
if !props.is_ready { options={options}
html! {<button onclick={on_click}>{"force ready"}</button>} class={if props.is_ready { String::from("ready") } else { String::new() }}
} else { on_select={on_click}
html!{} hide_submenu=false
} />
} // <p>{props.target.public.name.as_str()}</p>
// {
// if !props.is_ready {
// html! {<Button on_click={on_click}>{"force ready"}</Button>}
// } else {
// html!{}
// }
// }
</div> </div>
} }
} }

6
werewolves/src/components/settings.rs
View File

@ -1,10 +1,6 @@
use convert_case::{Case, Casing}; use convert_case::{Case, Casing};
use web_sys::HtmlInputElement; use web_sys::HtmlInputElement;
use werewolves_proto::{ use werewolves_proto::{error::GameError, game::GameSettings, role::RoleTitle};
error::GameError,
game::GameSettings,
role::{Alignment, RoleTitle},
};
use yew::prelude::*; use yew::prelude::*;
const ALIGN_VILLAGE: &str = "village"; const ALIGN_VILLAGE: &str = "village";

2
werewolves/src/pages/error.rs
View File

@ -13,6 +13,8 @@ pub enum WerewolfError {
InvalidTarget, InvalidTarget,
#[error("send error: {0}")] #[error("send error: {0}")]
SendError(#[from] futures::channel::mpsc::SendError), SendError(#[from] futures::channel::mpsc::SendError),
#[error("[{0}] {1}")]
NamedGameError(&'static str, GameError),
} }
impl From<StorageError> for WerewolfError { impl From<StorageError> for WerewolfError {

65
werewolves/src/pages/host.rs
View File

@ -71,7 +71,7 @@ async fn worker(mut recv: Receiver<HostMessage>, scope: Scope<Host>) {
log::info!("connected to {url}"); log::info!("connected to {url}");
if let Err(err) = ws.send(encode_message(&HostMessage::GetState)).await { if let Err(err) = ws.send(encode_message(&HostMessage::GetState)).await {
log::error!("sending request for player list: {err}"); log::error!("sending request for state: {err}");
continue 'outer; continue 'outer;
} }
@ -136,7 +136,10 @@ async fn worker(mut recv: Receiver<HostMessage>, scope: Scope<Host>) {
} }
}; };
match parse { match parse {
Ok(msg) => scope.send_message::<HostEvent>(msg.into()), Ok(msg) => {
log::debug!("got message: {msg:?}");
scope.send_message::<HostEvent>(msg.into())
}
Err(err) => { Err(err) => {
log::error!("parsing server message: {err}; ignoring.") log::error!("parsing server message: {err}; ignoring.")
} }
@ -149,6 +152,7 @@ pub enum HostEvent {
SetErrorCallback(Callback<Option<WerewolfError>>), SetErrorCallback(Callback<Option<WerewolfError>>),
SetBigScreenState(bool), SetBigScreenState(bool),
SetState(HostState), SetState(HostState),
Continue,
PlayerList(Box<[PlayerState]>), PlayerList(Box<[PlayerState]>),
Settings(GameSettings), Settings(GameSettings),
Error(GameError), Error(GameError),
@ -198,6 +202,7 @@ impl From<ServerToHostMessage> for HostEvent {
ServerToHostMessage::ActionPrompt(prompt) => { ServerToHostMessage::ActionPrompt(prompt) => {
HostEvent::SetState(HostState::Prompt(prompt)) HostEvent::SetState(HostState::Prompt(prompt))
} }
ServerToHostMessage::ActionResult(_, ActionResult::Continue) => HostEvent::Continue,
ServerToHostMessage::ActionResult(ident, result) => { ServerToHostMessage::ActionResult(ident, result) => {
HostEvent::SetState(HostState::Result(ident, result)) HostEvent::SetState(HostState::Result(ident, result))
} }
@ -235,10 +240,7 @@ impl Component for Host {
yew::platform::spawn_local(async move { worker(recv, scope).await }); yew::platform::spawn_local(async move { worker(recv, scope).await });
Self { Self {
send, send,
state: HostState::Lobby { state: HostState::Disconnected,
players: Box::new([]),
settings: GameSettings::default(),
},
debug: option_env!("DEBUG").is_some(), debug: option_env!("DEBUG").is_some(),
big_screen: false, big_screen: false,
error_callback: Callback::from(|err| { error_callback: Callback::from(|err| {
@ -250,7 +252,7 @@ impl Component for Host {
} }
fn view(&self, _ctx: &Context<Self>) -> Html { fn view(&self, _ctx: &Context<Self>) -> Html {
log::info!("state: {:?}", self.state); log::trace!("state: {:?}", self.state);
let content = match self.state.clone() { let content = match self.state.clone() {
HostState::GameOver { result } => { HostState::GameOver { result } => {
let new_lobby = self.big_screen.not().then(|| { let new_lobby = self.big_screen.not().then(|| {
@ -378,7 +380,8 @@ impl Component for Host {
} }
HostState::RoleReveal { ackd, waiting } => { HostState::RoleReveal { ackd, waiting } => {
let send = self.send.clone(); let send = self.send.clone();
let on_force_ready = Callback::from(move |target: Target| { let on_force_ready = self.big_screen.not().then(|| {
Callback::from(move |target: Target| {
let send = send.clone(); let send = send.clone();
yew::platform::spawn_local(async move { yew::platform::spawn_local(async move {
if let Err(err) = send if let Err(err) = send
@ -389,6 +392,7 @@ impl Component for Host {
log::error!("force role ack for [{target}]: {err}"); log::error!("force role ack for [{target}]: {err}");
} }
}); });
})
}); });
html! { html! {
<RoleReveal ackd={ackd} waiting={waiting} on_force_ready={on_force_ready}/> <RoleReveal ackd={ackd} waiting={waiting} on_force_ready={on_force_ready}/>
@ -445,10 +449,8 @@ impl Component for Host {
); );
html! { html! {
<nav class="debug-nav" style="z-index: 10;"> <nav class="debug-nav" style="z-index: 10;">
<div class="row-list">
<Button on_click={on_error_click}>{"error"}</Button> <Button on_click={on_error_click}>{"error"}</Button>
<Button on_click={on_prev_click}>{"previous"}</Button> <Button on_click={on_prev_click}>{"previous"}</Button>
</div>
</nav> </nav>
} }
}); });
@ -470,15 +472,25 @@ impl Component for Host {
players: p, players: p,
settings: _, settings: _,
} => *p = players, } => *p = players,
HostState::GameOver { result: _ } => { HostState::Disconnected | HostState::GameOver { result: _ } => {
let mut send = self.send.clone();
let on_err = self.error_callback.clone();
self.state = HostState::Lobby { self.state = HostState::Lobby {
players, players,
settings: GameSettings::default(), settings: Default::default(),
};
yew::platform::spawn_local(async move {
if let Err(err) = send
.send(HostMessage::Lobby(HostLobbyMessage::GetGameSettings))
.await
{
on_err.emit(Some(err.into()))
} }
});
} }
HostState::Prompt(_) HostState::Prompt(_)
| HostState::Result(_, _) | HostState::Result(_, _)
| HostState::Disconnected
| HostState::RoleReveal { | HostState::RoleReveal {
ackd: _, ackd: _,
waiting: _, waiting: _,
@ -533,10 +545,37 @@ impl Component for Host {
} }
HostEvent::SetBigScreenState(state) => { HostEvent::SetBigScreenState(state) => {
self.big_screen = state; self.big_screen = state;
if self.big_screen
&& let Ok(Some(root)) = gloo::utils::document().query_selector("app")
&& let Err(err) = root.set_attribute("style", "zoom: 200%;")
{
log::error!("setting zoom: {err:?}");
}
if state {
self.send.close_channel();
}
self.debug = false; self.debug = false;
self.error_callback = Callback::noop(); self.error_callback = Callback::noop();
false false
} }
HostEvent::Continue => {
if self.big_screen {
return false;
}
let mut send = self.send.clone();
yew::platform::spawn_local(async move {
if let Err(err) = send
.send(HostMessage::InGame(HostGameMessage::Night(
HostNightMessage::Next,
)))
.await
{
log::error!("sending next: {err:?}")
}
});
false
}
} }
} }
} }