Hangman updated - Critisisms should be fixed

Cargo.toml

@@ -9,6 +9,7 @@ members = [
     "todomvc",
     "weatherapp",
     "wifi-scanner",
+    "HangMan"
 ]
 
 # This is a "virtual package"

HangMan/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "HangMan"
+version = "1.0.0"
+authors = ["Andrey Greyze"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+
+dioxus = { git = "https://github.com/DioxusLabs/dioxus" }
+dioxus-desktop = { git = "https://github.com/DioxusLabs/dioxus/" }
+random_word = { version = "0.4.0", features = ["en"] }
+rand = "0.8.5"
+
+# Debug
+log = "0.4.19"
+dioxus-logger = "0.4.1"

HangMan/Dioxus.toml

@@ -0,0 +1,43 @@
+[application]
+
+# App (Project) Name
+name = "Hangman"
+
+# Dioxus App Default Platform
+# desktop, web, mobile, ssr
+default_platform = "desktop"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# resource (public) file folder
+asset_dir = "public"
+
+[web.app]
+
+# HTML title tag content
+title = "Hangman"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "public"]
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+
+style = ["input.css"]
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []

HangMan/README.md

@@ -0,0 +1,6 @@
+# Hangman
+
+Play a game of hangman with Dioxus! 
+
+![Demo of app](./icon.png)
+

HangMan/input.css

@@ -0,0 +1,151 @@
+body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: space-evenly;
+  background-color: beige;
+}
+
+.keys {
+  padding: 50px;
+  width: 70%;
+  height: 40%;
+  scale: 2;
+  align-self: center;
+}
+
+.key { 
+  border: 1px solid black;
+  border-radius: 0px;
+}
+
+.play-again {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 50px;
+  background-color: rgb(219, 71, 71);
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+}
+
+.hangman-word {
+  align-self: center;
+  scale: 1.2;
+  padding-bottom: 20px;
+}
+
+.hangman-container {
+  position: relative;
+  border: 1px solid black;
+  padding: 0.5rem;
+  width: 50%;
+  height: 50vh;
+  align-self: center;
+}
+
+.hangman0 {
+  position: absolute;
+  background-color: rgba(31, 27, 27, 0.501);
+  width: 60%;
+  height:10%;
+  top: 90%;
+  left: 10%
+}
+
+.game-msg {
+  align-self: center;
+}
+
+.hangman1 {
+  position: absolute;
+  border: 1px solid black;
+  background-color: rgba(31, 27, 27, 0.501);
+  width: 10%;
+  height:95%;
+  left: 20%;
+}
+
+.hangman2 {
+  position: absolute;
+  border: 1px solid black;
+  background-color: rgba(31, 27, 27, 0.501);
+  width: 40%;
+  height:10%;
+  left: 20%;
+}
+
+.hangman3 {
+  position: absolute;
+  border: 1px solid black;
+  background-color: rgba(31, 27, 27, 0.501);
+  width: 5%;
+  height:30%;
+  left: 52%;
+}
+
+.hangman4 {
+  position: absolute;
+  border-radius: 50%;
+  background-color: bisque;
+  width: 20%;
+  height:20%;
+  left: 45%;
+  top: 25%;
+}
+
+.hangman5 {
+  position: absolute;
+  background-color: bisque;
+  width: 5%;
+  height:30%;
+  left: 52%;
+  top: 40%;
+}
+
+.hangman6 {
+  position: absolute;
+  background-color: bisque;
+  rotate:30deg;
+  width: 3%;
+  height:25%;
+  left: 45%;
+  top: 42%;
+}
+
+.hangman7 {
+  position: absolute;
+  rotate:-30deg;
+  background-color: bisque;
+  width: 3%;
+  height:25%;
+  left: 61%;
+  top: 42%;
+}
+
+.hangman8 {
+  position: absolute;
+  background-color: bisque;
+  width: 3%;
+  rotate: 20deg;
+  height:28%;
+  left: 49%;
+  top: 60%;
+}
+
+.hangman9 {
+  position: absolute;
+  background-color: bisque;
+  width: 3%;
+  rotate: -20deg;
+  height:28%;
+  left: 57%;
+  top: 60%;
+}

HangMan/src/hangman.rs

@@ -0,0 +1,76 @@
+use dioxus::prelude::*;
+use crate::MAXIMUM_WRONG_GUESSES;
+
+#[inline_props]
+pub fn Hangman(cx:Scope, number_of_wrong_guesses: usize) -> Element {
+
+    render!(rsx!(
+        link { rel: "stylesheet", href: "input.css"}
+        div {
+            class: "hangman-container",
+
+            for i in 0..MAXIMUM_WRONG_GUESSES {
+                // renders another body part of the hangman for every wrong 
+                // guess made by the user
+                if i < *number_of_wrong_guesses {
+                    rsx!(
+                        div {
+                            class:"hangman{i}",
+                            hidden: false
+                        }
+                    )
+                } else {
+                    rsx!(
+                        div {
+                            class:"hangman{i}",
+                            hidden: true
+                        }
+                    )
+                }
+            }          
+        }
+
+    ))
+}
+#[allow(non_upper_case_globals)]
+#[inline_props]
+pub fn KeyBoard<'a>(cx: Scope, onguess: EventHandler<'a, char>, key_states: UseRef<Vec<Vec<bool>>>, disable_all: bool) -> Element<'a> {
+
+    const key_board: &[&[char]] = &[
+        &['q','w','e','r','t','y','u','i','o','p'],
+        &['a','s','d','f','g','h','j','k','l'],
+        &['z','x','c','v','b','n','m']
+    ];
+
+    cx.render(rsx!(
+        div {
+            class:"keys",
+            style: r#"
+                display:flex;
+                flex-direction:column;
+                justify-content: center;
+                align-items: center;
+                padding:0.5rem;
+            "#,
+
+            for (row_number, key_row) in key_states.read().iter().enumerate() {
+                rsx!(
+                    div {
+                        key_board[row_number].iter().enumerate().map(|(idx,key_value)| {
+                            rsx!(
+                                button {
+                                    class: "key",
+                                    disabled: *disable_all || key_row[idx],
+                            onclick: move |_ev| {
+                                key_states.with_mut(|states| {states[row_number][idx] = true;});
+                                onguess.call(key_value.to_owned());
+                            },
+                            "{key_value}"
+                        })
+                    })
+
+                })
+            } 
+        }
+    ))
+}