fn div_grid_items<'a, 'bump>(
            root_rendering_component: &'a RootRenderingComponent,
            bump: &'bump Bump,
        ) -> Vec<Node<'bump>> {
            use dodrio::builder::*;
            //this game_data mutable reference is dropped on the end of the function
            let game_data = &root_rendering_component.game_data;

            let mut vec_grid_item_bump = Vec::new();
            for x in 1..=16 {
                let index: usize = x;
                //region: prepare variables and closures for inserting into vdom
                let img_src = match game_data.vec_cards.get(index).expect("error index").status {
                    CardStatusCardFace::Down => bumpalo::format!(in bump, "content/{}/{}",
                                                game_data.content_folder_name,
                                                SRC_FOR_CARD_FACE_DOWN)
                    .into_bump_str(),
                    CardStatusCardFace::UpTemporary | CardStatusCardFace::UpPermanently => {
                        bumpalo::format!(in bump, "content/{}/img/mem_image_{:02}.png",
                        game_data.content_folder_name,
                                game_data
                                    .vec_cards
                                    .get(index)
                                    .expect("error index")
                                    .card_number_and_img_src
                        )
                        .into_bump_str()
                    }
                };

                let img_id =
                    bumpalo::format!(in bump, "img{:02}",game_data.vec_cards.get(index).expect("error index").card_index_and_id)
                        .into_bump_str();

                let opacity = if img_src
                    == format!(
                        "content/{}/{}",
                        game_data.content_folder_name, SRC_FOR_CARD_FACE_DOWN
                    ) {
                    bumpalo::format!(in bump, "opacity:{}", 0.2).into_bump_str()
                } else {
                    bumpalo::format!(in bump, "opacity:{}", 1).into_bump_str()
                };
                //endregion

                //creating 16 <div> in loop
                let grid_item_bump = div(bump)
                    .attr("class", "grid_item")
                    .children([img(bump)
                        .attr("src", img_src)
                        .attr("id", img_id)
                        .attr("style", opacity)
                        //on click needs a code Closure in Rust. Dodrio and wasm-bindgen
                        //generate the javascript code to call it properly.
                        .on("click", move |root, vdom, event| {
                            //we need our Struct RootRenderingComponent for Rust to write any data.
                            //It comes in the parameter root.
                            //All we can change is inside the struct RootRenderingComponent fields.
                            //The method render will later use that for rendering the new html.
                            let root_rendering_component =
                                root.unwrap_mut::<RootRenderingComponent>();
                            //this game_data mutable reference is dropped on the end of the function
                            let mut game_data = &mut root_rendering_component.game_data;
                            //the click on grid is allowed only when is the turn of this player
                            if (game_data.game_state.as_ref() == GameState::Play.as_ref()
                                && game_data.player_turn == 1
                                && game_data.this_machine_player_number == 1)
                                || (game_data.game_state.as_ref() == GameState::Play.as_ref()
                                    && game_data.player_turn == 2
                                    && game_data.this_machine_player_number == 2)
                            {
                                // If the event's target is our image...
                                let img = match event
                                    .target()
                                    .and_then(|t| t.dyn_into::<web_sys::HtmlImageElement>().ok())
                                {
                                    None => return,
                                    //?? Don't understand what this does. The original was written for Input element.
                                    Some(input) => input,
                                };

                                //id attribute of image html element is prefixed with img ex. "img12"
                                let this_click_card_index =
                                    (img.id().get(3..).expect("error slicing"))
                                        .parse::<usize>()
                                        .expect("error parse img id to usize");

                                //click is usefull only od facedown cards
                                if let CardStatusCardFace::Down = game_data
                                    .vec_cards
                                    .get(this_click_card_index)
                                    .expect("error this_click_card_index")
                                    .status
                                {
                                    //the begining of the turn is count_click_inside_one_turn=0
                                    //on click imediately increase that. So first click is 1 and second click is 2.
                                    //all other clicks on the grid are not usable.
                                    game_data.count_click_inside_one_turn += 1;

                                    if game_data.count_click_inside_one_turn == 1 {
                                        game_data.card_index_of_first_click = this_click_card_index;
                                        game_data.card_index_of_second_click = 0;
                                        game_data.count_all_clicks += 1;
                                    } else if game_data.count_click_inside_one_turn == 2 {
                                        game_data.card_index_of_second_click =
                                            this_click_card_index;
                                        game_data.count_all_clicks += 1;
                                    } else {
                                        //nothing
                                    }

                                    //region: send WsMessage over websocket
                                    game_data
                                        .ws
                                        .send_with_str(
                                            &serde_json::to_string(&WsMessage::PlayerClick {
                                                my_ws_uid: game_data.my_ws_uid,
                                                other_ws_uid: game_data.other_ws_uid,
                                                card_index: this_click_card_index,
                                                count_click_inside_one_turn: game_data
                                                    .count_click_inside_one_turn,
                                            })
                                            .expect("error sending PlayerClick"),
                                        )
                                        .expect("Failed to send PlayerClick");
                                    //endregion
                                    root_rendering_component.card_on_click();
                                }
                                // Finally, re-render the component on the next animation frame.
                                vdom.schedule_render();
                            }
                        })
                        .finish()])
                    .finish();
                vec_grid_item_bump.push(grid_item_bump);
            }
            vec_grid_item_bump
        }
///prepare a vector<Node> for the Virtual Dom for 'css grid' item with <img>
///the grid container needs only grid items. There is no need for rows and columns in 'css grid'.
prepare a vector for the Virtual Dom for 'css grid' item with 
the grid container needs only grid items. There is no need for rows and columns in 'css grid'.
prepare a vector for the Virtual Dom for ' css grid ' item with the grid container needs only grid items . There is no need for rows and columns in ' css grid ' .
fn div_grid_items<'a, 'bump>(
            root_rendering_component: &'a RootRenderingComponent,
            bump: &'bump Bump,
        ) -> Vec<Node<'bump>> {
            use dodrio::builder::*;
            //this game_data mutable reference is dropped on the end of the function
            let game_data = &root_rendering_component.game_data;
            let mut vec_grid_item_bump = Vec::new();
            for x in 1..=16 {
                let index: usize = x;
                //region: prepare variables and closures for inserting into vdom
                let img_src = match game_data.vec_cards.get(index).expect("error index").status {
                    CardStatusCardFace::Down => bumpalo::format!(in bump, "content/{}/{}",
                                                game_data.content_folder_name,
                                                SRC_FOR_CARD_FACE_DOWN)
                    .into_bump_str(),
                    CardStatusCardFace::UpTemporary | CardStatusCardFace::UpPermanently => {
                        bumpalo::format!(in bump, "content/{}/img/mem_image_{:02}.png",
                        game_data.content_folder_name,
                                game_data
                                    .vec_cards
                                    .get(index)
                                    .expect("error index")
                                    .card_number_and_img_src
                        )
                        .into_bump_str()
                    }
                };
                let img_id =
                    bumpalo::format!(in bump, "img{:02}",game_data.vec_cards.get(index).expect("error index").card_index_and_id)
                        .into_bump_str();
                let opacity = if img_src
                    == format!(
                        "content/{}/{}",
                        game_data.content_folder_name, SRC_FOR_CARD_FACE_DOWN
                    ) {
                    bumpalo::format!(in bump, "opacity:{}", 0.2).into_bump_str()
                } else {
                    bumpalo::format!(in bump, "opacity:{}", 1).into_bump_str()
                };
                //endregion
                //creating 16 <div> in loop
                let grid_item_bump = div(bump)
                    .attr("class", "grid_item")
                    .children([img(bump)
                        .attr("src", img_src)
                        .attr("id", img_id)
                        .attr("style", opacity)
                        //on click needs a code Closure in Rust. Dodrio and wasm-bindgen
                        //generate the javascript code to call it properly.
                        .on("click", move |root, vdom, event| {
                            //we need our Struct RootRenderingComponent for Rust to write any data.
                            //It comes in the parameter root.
                            //All we can change is inside the struct RootRenderingComponent fields.
                            //The method render will later use that for rendering the new html.
                            let root_rendering_component =
                                root.unwrap_mut::<RootRenderingComponent>();
                            //this game_data mutable reference is dropped on the end of the function
                            let mut game_data = &mut root_rendering_component.game_data;
                            //the click on grid is allowed only when is the turn of this player
                            if (game_data.game_state.as_ref() == GameState::Play.as_ref()
                                && game_data.player_turn == 1
                                && game_data.this_machine_player_number == 1)
                                || (game_data.game_state.as_ref() == GameState::Play.as_ref()
                                    && game_data.player_turn == 2
                                    && game_data.this_machine_player_number == 2)
                            {
                                // If the event's target is our image...
                                let img = match event
                                    .target()
                                    .and_then(|t| t.dyn_into::<web_sys::HtmlImageElement>().ok())
                                {
                                    None => return,
                                    //?? Don't understand what this does. The original was written for Input element.
                                    Some(input) => input,
                                };
                                //id attribute of image html element is prefixed with img ex. "img12"
                                let this_click_card_index =
                                    (img.id().get(3..).expect("error slicing"))
                                        .parse::<usize>()
                                        .expect("error parse img id to usize");
                                //click is usefull only od facedown cards
                                if let CardStatusCardFace::Down = game_data
                                    .vec_cards
                                    .get(this_click_card_index)
                                    .expect("error this_click_card_index")
                                    .status
                                {
                                    //the begining of the turn is count_click_inside_one_turn=0
                                    //on click imediately increase that. So first click is 1 and second click is 2.
                                    //all other clicks on the grid are not usable.
                                    game_data.count_click_inside_one_turn += 1;
                                    if game_data.count_click_inside_one_turn == 1 {
                                        game_data.card_index_of_first_click = this_click_card_index;
                                        game_data.card_index_of_second_click = 0;
                                        game_data.count_all_clicks += 1;
                                    } else if game_data.count_click_inside_one_turn == 2 {
                                        game_data.card_index_of_second_click =
                                            this_click_card_index;
                                        game_data.count_all_clicks += 1;
                                    } else {
                                        //nothing
                                    }
                                    //region: send WsMessage over websocket
                                    game_data
                                        .ws
                                        .send_with_str(
                                            &serde_json::to_string(&WsMessage::PlayerClick {
                                                my_ws_uid: game_data.my_ws_uid,
                                                other_ws_uid: game_data.other_ws_uid,
                                                card_index: this_click_card_index,
                                                count_click_inside_one_turn: game_data
                                                    .count_click_inside_one_turn,
                                            })
                                            .expect("error sending PlayerClick"),
                                        )
                                        .expect("Failed to send PlayerClick");
                                    //endregion
                                    root_rendering_component.card_on_click();
                                }
                                // Finally, re-render the component on the next animation frame.
                                vdom.schedule_render();
                            }
                        })
                        .finish()])
                    .finish();
                vec_grid_item_bump.push(grid_item_bump);
            }
            vec_grid_item_bump
        }
fn div_grid_items < ' a , ' bump > ( root_rendering_component : & ' a RootRenderingComponent , bump : & ' bump Bump , ) -> Vec < Node < ' bump > > { use dodrio :: builder :: * ; //this game_data mutable reference is dropped on the end of the function let game_data = & root_rendering_component . game_data ; let mut vec_grid_item_bump = Vec :: new ( ) ; for x in 1 ..= 16 { let index : usize = x ; //region: prepare variables and closures for inserting into vdom let img_src = match game_data . vec_cards . get ( index ) . expect ( " " ) . status { CardStatusCardFace :: Down => bumpalo :: format ! ( in bump " " game_data content_folder_name SRC_FOR_CARD_FACE_DOWN ) . into_bump_str ( ) , CardStatusCardFace :: UpTemporary | CardStatusCardFace :: UpPermanently => { bumpalo :: format ! ( in bump " " game_data content_folder_name game_data vec_cards get ( index ) expect ( " " ) card_number_and_img_src ) . into_bump_str ( ) } } ; let img_id = bumpalo :: format ! ( in bump " " game_data vec_cards get ( index ) expect ( " " ) card_index_and_id ) . into_bump_str ( ) ; let opacity = if img_src == format ! ( " " game_data content_folder_name SRC_FOR_CARD_FACE_DOWN ) { bumpalo :: format ! ( in bump " " 0.2 ) . into_bump_str ( ) } else { bumpalo :: format ! ( in bump " " 1 ) . into_bump_str ( ) } ; //endregion //creating 16 <div> in loop let grid_item_bump = div ( bump ) . attr ( " " , " " ) . children ( [ img ( bump ) . attr ( " " , img_src ) . attr ( " " , img_id ) . attr ( " " , opacity ) //on click needs a code Closure in Rust. Dodrio and wasm-bindgen //generate the javascript code to call it properly. . on ( " " , move | root , vdom , event | { //we need our Struct RootRenderingComponent for Rust to write any data. //It comes in the parameter root. //All we can change is inside the struct RootRenderingComponent fields. //The method render will later use that for rendering the new html. let root_rendering_component = root . unwrap_mut :: < RootRenderingComponent > ( ) ; //this game_data mutable reference is dropped on the end of the function let mut game_data = & mut root_rendering_component . game_data ; //the click on grid is allowed only when is the turn of this player if ( game_data . game_state . as_ref ( ) == GameState :: Play . as_ref ( ) && game_data . player_turn == 1 && game_data . this_machine_player_number == 1 ) || ( game_data . game_state . as_ref ( ) == GameState :: Play . as_ref ( ) && game_data . player_turn == 2 && game_data . this_machine_player_number == 2 ) { // If the event's target is our image... let img = match event . target ( ) . and_then ( | t | t . dyn_into :: < web_sys :: HtmlImageElement > ( ) . ok ( ) ) { None => return , //?? Don't understand what this does. The original was written for Input element. Some ( input ) => input , } ; //id attribute of image html element is prefixed with img ex. "img12" let this_click_card_index = ( img . id ( ) . get ( 3 .. ) . expect ( " " ) ) . parse :: < usize > ( ) . expect ( " " ) ; //click is usefull only od facedown cards if let CardStatusCardFace :: Down = game_data . vec_cards . get ( this_click_card_index ) . expect ( " " ) . status { //the begining of the turn is count_click_inside_one_turn=0 //on click imediately increase that. So first click is 1 and second click is 2. //all other clicks on the grid are not usable. game_data . count_click_inside_one_turn += 1 ; if game_data . count_click_inside_one_turn == 1 { game_data . card_index_of_first_click = this_click_card_index ; game_data . card_index_of_second_click = 0 ; game_data . count_all_clicks += 1 ; } else if game_data . count_click_inside_one_turn == 2 { game_data . card_index_of_second_click = this_click_card_index ; game_data . count_all_clicks += 1 ; } else { //nothing } //region: send WsMessage over websocket game_data . ws . send_with_str ( & serde_json :: to_string ( & WsMessage :: PlayerClick { my_ws_uid : game_data . my_ws_uid , other_ws_uid : game_data . other_ws_uid , card_index : this_click_card_index , count_click_inside_one_turn : game_data . count_click_inside_one_turn , } ) . expect ( " " ) , ) . expect ( " " ) ; //endregion root_rendering_component . card_on_click ( ) ; } // Finally, re-render the component on the next animation frame. vdom . schedule_render ( ) ; } } ) . finish ( ) ] ) . finish ( ) ; vec_grid_item_bump . push ( grid_item_bump ) ; } vec_grid_item_bump }
prepare a vector<Node> for the Virtual Dom for 'css grid' item with <img>
the grid container needs only grid items.
prepare a vector<Node > for the Virtual Dom for ' css grid ' item with <img > the grid container needs only grid items .
root_rendering_component
&'a RootRenderingComponent
bump
&'bump Bump
root_rendering_component
&'a RootRenderingComponent
bump
&'bump Bump