stephenseo/EN605.607.81.SP22_ASDM_Project
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Cleanup and fixes

Browse source 
Remove state::MessageBus in favor of String messages sent to Wrapper
from Slot.

Update Slot state from inside Wrapper::update such that changes should
be immediately visible per Slot (moved code from Wrapper::rendered,
fixing updates not being immediately visble).
This commit is contained in:
Stephen Seo 2022-03-02 16:25:01 +09:00
parent 7e82a6e787
commit 8838dbae69
2 changed files with 131 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
front_end/src/state.rs
View file

@ -1,24 +1,7 @@
use std::cell::{Cell, RefCell}; use std::cell::Cell;
use std::collections::VecDeque;
use std::rc::Rc; use std::rc::Rc;
use yew::prelude::*; use yew::prelude::*;
#[derive(Clone, Debug, PartialEq, Eq, Default)]
pub struct MessageBus {
queued: VecDeque<String>,
}
impl MessageBus {
pub fn get_next_msg(&mut self) -> Option<String> {
self.queued.pop_front()
}
pub fn push_msg(&mut self, msg: String) -> Result<(), String> {
self.queued.push_back(msg);
Ok(())
}
}
#[derive(Copy, Clone, Debug, PartialEq, Eq)] #[derive(Copy, Clone, Debug, PartialEq, Eq)]
pub enum BoardState { pub enum BoardState {
Empty, Empty,
@ -41,8 +24,7 @@ pub enum Turn {
#[derive(Clone, Debug, PartialEq)] #[derive(Clone, Debug, PartialEq)]
pub struct SharedState { pub struct SharedState {
pub board: [Rc<Cell<BoardState>>; 56], pub board: [Rc<Cell<BoardState>>; 56],
pub bus: Rc<RefCell<MessageBus>>, pub turn: Cell<Turn>,
pub turn: Turn,
pub info_text_ref: NodeRef, pub info_text_ref: NodeRef,
} }
@ -108,8 +90,7 @@ impl Default for SharedState {
Rc::new(Cell::new(BoardState::default())), Rc::new(Cell::new(BoardState::default())),
Rc::new(Cell::new(BoardState::default())), Rc::new(Cell::new(BoardState::default())),
], ],
bus: Rc::new(RefCell::new(MessageBus::default())), turn: Cell::new(Turn::CyanPlayer),
turn: Turn::CyanPlayer,
info_text_ref: NodeRef::default(), info_text_ref: NodeRef::default(),
} }
} }

267
front_end/src/yew_components.rs
View file

@ -1,6 +1,6 @@
use crate::constants::{COLS, INFO_TEXT_HEIGHT, INFO_TEXT_MAX_ITEMS}; use crate::constants::{COLS, INFO_TEXT_HEIGHT, INFO_TEXT_MAX_ITEMS};
use crate::state::{BoardState, MessageBus, SharedState, Turn}; use crate::state::{BoardState, SharedState, Turn};
use std::cell::{Cell, RefCell}; use std::cell::Cell;
use std::rc::Rc; use std::rc::Rc;
use yew::prelude::*; use yew::prelude::*;
@ -14,7 +14,6 @@ pub enum SlotMessage {
pub struct SlotProperties { pub struct SlotProperties {
idx: u8, idx: u8,
state: Rc<Cell<BoardState>>, state: Rc<Cell<BoardState>>,
bus: Rc<RefCell<MessageBus>>,
} }
impl Component for Slot { impl Component for Slot {
@ -45,26 +44,14 @@ impl Component for Slot {
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool { fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
match msg { match msg {
SlotMessage::Press(idx) => { SlotMessage::Press(idx) => {
let (shared, _) = ctx // notify Wrapper with message
.link() let msg = format!("pressed {idx}");
.context::<SharedState>(Callback::noop()) if let Some(p) = ctx.link().get_parent() {
.expect("shared to be set"); p.clone().downcast::<Wrapper>().send_message(msg);
let result = shared.bus.borrow_mut().push_msg(format!("pressed {idx}"));
if let Err(e) = result {
log::error!("Error pushing msg to bus: {}", e);
} else {
// DEBUG
//log::info!("Pushed \"pressed {idx}\" msg to bus");
} }
} }
} }
// notify Wrapper with message
if let Some(p) = ctx.link().get_parent() {
p.clone().downcast::<Wrapper>().send_message(());
}
true true
} }
} }
@ -72,7 +59,7 @@ impl Component for Slot {
pub struct Wrapper {} pub struct Wrapper {}
impl Component for Wrapper { impl Component for Wrapper {
type Message = (); type Message = String;
type Properties = (); type Properties = ();
fn create(_ctx: &Context<Self>) -> Self { fn create(_ctx: &Context<Self>) -> Self {
@ -86,62 +73,62 @@ impl Component for Wrapper {
.expect("state to be set"); .expect("state to be set");
html! { html! {
<div class="wrapper"> <div class="wrapper">
<Slot idx=0 state={shared.board[0].clone()} bus={shared.bus.clone()} /> <Slot idx=0 state={shared.board[0].clone()} />
<Slot idx=1 state={shared.board[1].clone()} bus={shared.bus.clone()} /> <Slot idx=1 state={shared.board[1].clone()} />
<Slot idx=2 state={shared.board[2].clone()} bus={shared.bus.clone()} /> <Slot idx=2 state={shared.board[2].clone()} />
<Slot idx=3 state={shared.board[3].clone()} bus={shared.bus.clone()} /> <Slot idx=3 state={shared.board[3].clone()} />
<Slot idx=4 state={shared.board[4].clone()} bus={shared.bus.clone()} /> <Slot idx=4 state={shared.board[4].clone()} />
<Slot idx=5 state={shared.board[5].clone()} bus={shared.bus.clone()} /> <Slot idx=5 state={shared.board[5].clone()} />
<Slot idx=6 state={shared.board[6].clone()} bus={shared.bus.clone()} /> <Slot idx=6 state={shared.board[6].clone()} />
<Slot idx=7 state={shared.board[7].clone()} bus={shared.bus.clone()} /> <Slot idx=7 state={shared.board[7].clone()} />
<Slot idx=8 state={shared.board[8].clone()} bus={shared.bus.clone()} /> <Slot idx=8 state={shared.board[8].clone()} />
<Slot idx=9 state={shared.board[9].clone()} bus={shared.bus.clone()} /> <Slot idx=9 state={shared.board[9].clone()} />
<Slot idx=10 state={shared.board[10].clone()} bus={shared.bus.clone()} /> <Slot idx=10 state={shared.board[10].clone()} />
<Slot idx=11 state={shared.board[11].clone()} bus={shared.bus.clone()} /> <Slot idx=11 state={shared.board[11].clone()} />
<Slot idx=12 state={shared.board[12].clone()} bus={shared.bus.clone()} /> <Slot idx=12 state={shared.board[12].clone()} />
<Slot idx=13 state={shared.board[13].clone()} bus={shared.bus.clone()} /> <Slot idx=13 state={shared.board[13].clone()} />
<Slot idx=14 state={shared.board[14].clone()} bus={shared.bus.clone()} /> <Slot idx=14 state={shared.board[14].clone()} />
<Slot idx=15 state={shared.board[15].clone()} bus={shared.bus.clone()} /> <Slot idx=15 state={shared.board[15].clone()} />
<Slot idx=16 state={shared.board[16].clone()} bus={shared.bus.clone()} /> <Slot idx=16 state={shared.board[16].clone()} />
<Slot idx=17 state={shared.board[17].clone()} bus={shared.bus.clone()} /> <Slot idx=17 state={shared.board[17].clone()} />
<Slot idx=18 state={shared.board[18].clone()} bus={shared.bus.clone()} /> <Slot idx=18 state={shared.board[18].clone()} />
<Slot idx=19 state={shared.board[19].clone()} bus={shared.bus.clone()} /> <Slot idx=19 state={shared.board[19].clone()} />
<Slot idx=20 state={shared.board[20].clone()} bus={shared.bus.clone()} /> <Slot idx=20 state={shared.board[20].clone()} />
<Slot idx=21 state={shared.board[21].clone()} bus={shared.bus.clone()} /> <Slot idx=21 state={shared.board[21].clone()} />
<Slot idx=22 state={shared.board[22].clone()} bus={shared.bus.clone()} /> <Slot idx=22 state={shared.board[22].clone()} />
<Slot idx=23 state={shared.board[23].clone()} bus={shared.bus.clone()} /> <Slot idx=23 state={shared.board[23].clone()} />
<Slot idx=24 state={shared.board[24].clone()} bus={shared.bus.clone()} /> <Slot idx=24 state={shared.board[24].clone()} />
<Slot idx=25 state={shared.board[25].clone()} bus={shared.bus.clone()} /> <Slot idx=25 state={shared.board[25].clone()} />
<Slot idx=26 state={shared.board[26].clone()} bus={shared.bus.clone()} /> <Slot idx=26 state={shared.board[26].clone()} />
<Slot idx=27 state={shared.board[27].clone()} bus={shared.bus.clone()} /> <Slot idx=27 state={shared.board[27].clone()} />
<Slot idx=28 state={shared.board[28].clone()} bus={shared.bus.clone()} /> <Slot idx=28 state={shared.board[28].clone()} />
<Slot idx=29 state={shared.board[29].clone()} bus={shared.bus.clone()} /> <Slot idx=29 state={shared.board[29].clone()} />
<Slot idx=30 state={shared.board[30].clone()} bus={shared.bus.clone()} /> <Slot idx=30 state={shared.board[30].clone()} />
<Slot idx=31 state={shared.board[31].clone()} bus={shared.bus.clone()} /> <Slot idx=31 state={shared.board[31].clone()} />
<Slot idx=32 state={shared.board[32].clone()} bus={shared.bus.clone()} /> <Slot idx=32 state={shared.board[32].clone()} />
<Slot idx=33 state={shared.board[33].clone()} bus={shared.bus.clone()} /> <Slot idx=33 state={shared.board[33].clone()} />
<Slot idx=34 state={shared.board[34].clone()} bus={shared.bus.clone()} /> <Slot idx=34 state={shared.board[34].clone()} />
<Slot idx=35 state={shared.board[35].clone()} bus={shared.bus.clone()} /> <Slot idx=35 state={shared.board[35].clone()} />
<Slot idx=36 state={shared.board[36].clone()} bus={shared.bus.clone()} /> <Slot idx=36 state={shared.board[36].clone()} />
<Slot idx=37 state={shared.board[37].clone()} bus={shared.bus.clone()} /> <Slot idx=37 state={shared.board[37].clone()} />
<Slot idx=38 state={shared.board[38].clone()} bus={shared.bus.clone()} /> <Slot idx=38 state={shared.board[38].clone()} />
<Slot idx=39 state={shared.board[39].clone()} bus={shared.bus.clone()} /> <Slot idx=39 state={shared.board[39].clone()} />
<Slot idx=40 state={shared.board[40].clone()} bus={shared.bus.clone()} /> <Slot idx=40 state={shared.board[40].clone()} />
<Slot idx=41 state={shared.board[41].clone()} bus={shared.bus.clone()} /> <Slot idx=41 state={shared.board[41].clone()} />
<Slot idx=42 state={shared.board[42].clone()} bus={shared.bus.clone()} /> <Slot idx=42 state={shared.board[42].clone()} />
<Slot idx=43 state={shared.board[43].clone()} bus={shared.bus.clone()} /> <Slot idx=43 state={shared.board[43].clone()} />
<Slot idx=44 state={shared.board[44].clone()} bus={shared.bus.clone()} /> <Slot idx=44 state={shared.board[44].clone()} />
<Slot idx=45 state={shared.board[45].clone()} bus={shared.bus.clone()} /> <Slot idx=45 state={shared.board[45].clone()} />
<Slot idx=46 state={shared.board[46].clone()} bus={shared.bus.clone()} /> <Slot idx=46 state={shared.board[46].clone()} />
<Slot idx=47 state={shared.board[47].clone()} bus={shared.bus.clone()} /> <Slot idx=47 state={shared.board[47].clone()} />
<Slot idx=48 state={shared.board[48].clone()} bus={shared.bus.clone()} /> <Slot idx=48 state={shared.board[48].clone()} />
<Slot idx=49 state={shared.board[49].clone()} bus={shared.bus.clone()} /> <Slot idx=49 state={shared.board[49].clone()} />
<Slot idx=50 state={shared.board[50].clone()} bus={shared.bus.clone()} /> <Slot idx=50 state={shared.board[50].clone()} />
<Slot idx=51 state={shared.board[51].clone()} bus={shared.bus.clone()} /> <Slot idx=51 state={shared.board[51].clone()} />
<Slot idx=52 state={shared.board[52].clone()} bus={shared.bus.clone()} /> <Slot idx=52 state={shared.board[52].clone()} />
<Slot idx=53 state={shared.board[53].clone()} bus={shared.bus.clone()} /> <Slot idx=53 state={shared.board[53].clone()} />
<Slot idx=54 state={shared.board[54].clone()} bus={shared.bus.clone()} /> <Slot idx=54 state={shared.board[54].clone()} />
<Slot idx=55 state={shared.board[55].clone()} bus={shared.bus.clone()} /> <Slot idx=55 state={shared.board[55].clone()} />
<div class="info_text_wrapper"> <div class="info_text_wrapper">
<InfoText /> <InfoText />
</div> </div>
@ -149,79 +136,81 @@ impl Component for Wrapper {
} }
} }
fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) { fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
let (shared, _) = ctx let (shared, _) = ctx
.link() .link()
.context::<SharedState>(Callback::noop()) .context::<SharedState>(Callback::noop())
.expect("state to be set"); .expect("state to be set");
let split_str: Vec<&str> = msg.split_whitespace().collect();
if split_str.len() == 2 {
if split_str[0] == "pressed" {
if let Ok(idx) = split_str[1].parse::<u8>() {
let output_str: String = format!("Got {idx} pressed.");
shared.board[idx as usize].replace(match shared.board[idx as usize].get() {
BoardState::Empty => BoardState::Cyan,
BoardState::Cyan => BoardState::Magenta,
BoardState::Magenta => BoardState::Empty,
});
// DEBUG
log::info!("{} is {:?}", idx, shared.board[idx as usize].get());
// DEBUG
//log::info!("{}", &output_str);
if let Some(info_text) = shared.info_text_ref.cast::<web_sys::HtmlDivElement>()
{
// create the new text to be appended in the output
let window = web_sys::window().expect("no window exists");
let document = window.document().expect("window should have a document");
let p = document
.create_element("p")
.expect("document should be able to create <p>");
p.set_text_content(Some(&output_str));
// check if scrolled to top
while let Some(msg) = shared.bus.borrow_mut().get_next_msg() {
let split_str: Vec<&str> = msg.split_whitespace().collect();
if split_str.len() == 2 {
if split_str[0] == "pressed" {
if let Ok(idx) = split_str[1].parse::<u8>() {
let output_str: String = format!("Got {idx} pressed.");
// DEBUG // DEBUG
//log::info!("{}", &output_str); //log::info!(
if let Some(info_text) = // "pre: scroll top is {}, scroll height is {}",
shared.info_text_ref.cast::<web_sys::HtmlDivElement>() // info_text.scroll_top(),
{ // info_text.scroll_height()
// create the new text to be appended in the output //);
let window = web_sys::window().expect("no window exists"); let at_top: bool =
let document = info_text.scroll_top() <= INFO_TEXT_HEIGHT - info_text.scroll_height();
window.document().expect("window should have a document");
let p = document
.create_element("p")
.expect("document should be able to create <p>");
p.set_text_content(Some(&output_str));
// check if scrolled to top // append text to output
info_text
// DEBUG .append_with_node_1(&p)
//log::info!( .expect("should be able to append to info_text");
// "pre: scroll top is {}, scroll height is {}", while info_text.child_element_count() > INFO_TEXT_MAX_ITEMS {
// info_text.scroll_top(),
// info_text.scroll_height()
//);
let at_top: bool = info_text.scroll_top()
<= INFO_TEXT_HEIGHT - info_text.scroll_height();
// append text to output
info_text info_text
.append_with_node_1(&p) .remove_child(&info_text.first_child().unwrap())
.expect("should be able to append to info_text"); .expect("should be able to limit items in info_text");
while info_text.child_element_count() > INFO_TEXT_MAX_ITEMS {
info_text
.remove_child(&info_text.first_child().unwrap())
.expect("should be able to limit items in info_text");
}
// scroll to bottom only if at bottom
// DEBUG
//log::info!("at_top is {}", if at_top { "true" } else { "false" });
if at_top {
info_text
.set_scroll_top(INFO_TEXT_HEIGHT - info_text.scroll_height());
}
// DEBUG
//log::info!(
// "post: scroll top is {}, scroll height is {}",
// info_text.scroll_top(),
// info_text.scroll_height()
//);
} else {
log::warn!("Failed to get \"info_text\"");
} }
}
}
}
}
}
fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool { // scroll to bottom only if at bottom
// DEBUG
//log::info!("at_top is {}", if at_top { "true" } else { "false" });
if at_top {
info_text.set_scroll_top(INFO_TEXT_HEIGHT - info_text.scroll_height());
}
// DEBUG
//log::info!(
// "post: scroll top is {}, scroll height is {}",
// info_text.scroll_top(),
// info_text.scroll_height()
//);
} else {
log::warn!("Failed to get \"info_text\"");
}
} // let Ok(idx) = split_str[1].parse::<u8>()
} // split_str[0] == "pressed"
} // split_str.len() == 2
true true
} }
} }