Impl basic MVP of front-end
(MVP is Minimum Viable Product.) Enough is implemented to view a 7x8 board and click on the tiles in the board to change their states.
This commit is contained in:
parent
a5ec28bbb1
commit
cd9f7446a4
6 changed files with 708 additions and 2 deletions
1
front_end/.gitignore
vendored
1
front_end/.gitignore
vendored
|
|
@ -1 +1,2 @@
|
|||
/target
|
||||
/dist
|
||||
|
|
|
|||
441
front_end/Cargo.lock
generated
Normal file
441
front_end/Cargo.lock
generated
Normal file
|
|
@ -0,0 +1,441 @@
|
|||
# This file is automatically @generated by Cargo.
|
||||
# It is not intended for manual editing.
|
||||
version = 3
|
||||
|
||||
[[package]]
|
||||
name = "autocfg"
|
||||
version = "1.1.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
|
||||
|
||||
[[package]]
|
||||
name = "boolinator"
|
||||
version = "2.4.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "cfa8873f51c92e232f9bac4065cddef41b714152812bfc5f7672ba16d6ef8cd9"
|
||||
|
||||
[[package]]
|
||||
name = "bumpalo"
|
||||
version = "3.9.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a4a45a46ab1f2412e53d3a0ade76ffad2025804294569aae387231a0cd6e0899"
|
||||
|
||||
[[package]]
|
||||
name = "cfg-if"
|
||||
version = "1.0.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
|
||||
|
||||
[[package]]
|
||||
name = "console_error_panic_hook"
|
||||
version = "0.1.7"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a06aeb73f470f66dcdbf7223caeebb85984942f22f1adb2a088cf9668146bbbc"
|
||||
dependencies = [
|
||||
"cfg-if",
|
||||
"wasm-bindgen",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "four_line_dropper_frontend"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"yew",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo"
|
||||
version = "0.4.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "23947965eee55e3e97a5cd142dd4c10631cc349b48cecca0ed230fd296f568cd"
|
||||
dependencies = [
|
||||
"gloo-console",
|
||||
"gloo-dialogs",
|
||||
"gloo-events",
|
||||
"gloo-file",
|
||||
"gloo-render",
|
||||
"gloo-storage",
|
||||
"gloo-timers",
|
||||
"gloo-utils",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-console"
|
||||
version = "0.2.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "3907f786f65bbb4f419e918b0c5674175ef1c231ecda93b2dbd65fd1e8882637"
|
||||
dependencies = [
|
||||
"js-sys",
|
||||
"serde",
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-dialogs"
|
||||
version = "0.1.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "4ffb557a2ea2ed283f1334423d303a336fad55fb8572d51ae488f828b1464b40"
|
||||
dependencies = [
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-events"
|
||||
version = "0.1.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "088514ec8ef284891c762c88a66b639b3a730134714692ee31829765c5bc814f"
|
||||
dependencies = [
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-file"
|
||||
version = "0.2.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "aa5d6084efa4a2b182ef3a8649cb6506cb4843f22cf907c6e0a799944248ae90"
|
||||
dependencies = [
|
||||
"gloo-events",
|
||||
"js-sys",
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-render"
|
||||
version = "0.1.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "5b4cda6e149df3bb4a3c6a343873903e5bcc2448a9877d61bb8274806ad67f6e"
|
||||
dependencies = [
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-storage"
|
||||
version = "0.2.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "1b5057761927af1b1929d02b1f49cf83553dd347a473ee7c8bb08420f2673ffc"
|
||||
dependencies = [
|
||||
"gloo-utils",
|
||||
"js-sys",
|
||||
"serde",
|
||||
"serde_json",
|
||||
"thiserror",
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-timers"
|
||||
version = "0.2.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "4d12a7f4e95cfe710f1d624fb1210b7d961a5fb05c4fd942f4feab06e61f590e"
|
||||
dependencies = [
|
||||
"js-sys",
|
||||
"wasm-bindgen",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-utils"
|
||||
version = "0.1.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "05c77af6f96a4f9e27c8ac23a88407381a31f4a74c3fb985c85aa79b8d898136"
|
||||
dependencies = [
|
||||
"js-sys",
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "hashbrown"
|
||||
version = "0.11.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "ab5ef0d4909ef3724cc8cce6ccc8572c5c817592e9285f5464f8e86f8bd3726e"
|
||||
|
||||
[[package]]
|
||||
name = "indexmap"
|
||||
version = "1.8.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "282a6247722caba404c065016bbfa522806e51714c34f5dfc3e4a3a46fcb4223"
|
||||
dependencies = [
|
||||
"autocfg",
|
||||
"hashbrown",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "itoa"
|
||||
version = "1.0.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "1aab8fc367588b89dcee83ab0fd66b72b50b72fa1904d7095045ace2b0c81c35"
|
||||
|
||||
[[package]]
|
||||
name = "js-sys"
|
||||
version = "0.3.56"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a38fc24e30fd564ce974c02bf1d337caddff65be6cc4735a1f7eab22a7440f04"
|
||||
dependencies = [
|
||||
"wasm-bindgen",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "lazy_static"
|
||||
version = "1.4.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
|
||||
|
||||
[[package]]
|
||||
name = "log"
|
||||
version = "0.4.14"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "51b9bbe6c47d51fc3e1a9b945965946b4c44142ab8792c50835a980d362c2710"
|
||||
dependencies = [
|
||||
"cfg-if",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "proc-macro-error"
|
||||
version = "1.0.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "da25490ff9892aab3fcf7c36f08cfb902dd3e71ca0f9f9517bea02a73a5ce38c"
|
||||
dependencies = [
|
||||
"proc-macro-error-attr",
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn",
|
||||
"version_check",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "proc-macro-error-attr"
|
||||
version = "1.0.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a1be40180e52ecc98ad80b184934baf3d0d29f979574e439af5a55274b35f869"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"version_check",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "proc-macro2"
|
||||
version = "1.0.36"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c7342d5883fbccae1cc37a2353b09c87c9b0f3afd73f5fb9bba687a1f733b029"
|
||||
dependencies = [
|
||||
"unicode-xid",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "quote"
|
||||
version = "1.0.15"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "864d3e96a899863136fc6e99f3d7cae289dafe43bf2c5ac19b70df7210c0a145"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "ryu"
|
||||
version = "1.0.9"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "73b4b750c782965c211b42f022f59af1fbceabdd026623714f104152f1ec149f"
|
||||
|
||||
[[package]]
|
||||
name = "scoped-tls-hkt"
|
||||
version = "0.1.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c2e9d7eaddb227e8fbaaa71136ae0e1e913ca159b86c7da82f3e8f0044ad3a63"
|
||||
|
||||
[[package]]
|
||||
name = "serde"
|
||||
version = "1.0.136"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "ce31e24b01e1e524df96f1c2fdd054405f8d7376249a5110886fb4b658484789"
|
||||
dependencies = [
|
||||
"serde_derive",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "serde_derive"
|
||||
version = "1.0.136"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "08597e7152fcd306f41838ed3e37be9eaeed2b61c42e2117266a554fab4662f9"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "serde_json"
|
||||
version = "1.0.79"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8e8d9fa5c3b304765ce1fd9c4c8a3de2c8db365a5b91be52f186efc675681d95"
|
||||
dependencies = [
|
||||
"itoa",
|
||||
"ryu",
|
||||
"serde",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "slab"
|
||||
version = "0.4.5"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "9def91fd1e018fe007022791f865d0ccc9b3a0d5001e01aabb8b40e46000afb5"
|
||||
|
||||
[[package]]
|
||||
name = "syn"
|
||||
version = "1.0.86"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8a65b3f4ffa0092e9887669db0eae07941f023991ab58ea44da8fe8e2d511c6b"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"unicode-xid",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "thiserror"
|
||||
version = "1.0.30"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "854babe52e4df1653706b98fcfc05843010039b406875930a70e4d9644e5c417"
|
||||
dependencies = [
|
||||
"thiserror-impl",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "thiserror-impl"
|
||||
version = "1.0.30"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "aa32fd3f627f367fe16f893e2597ae3c05020f8bba2666a4e6ea73d377e5714b"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "unicode-xid"
|
||||
version = "0.2.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8ccb82d61f80a663efe1f787a51b16b5a51e3314d6ac365b08639f52387b33f3"
|
||||
|
||||
[[package]]
|
||||
name = "version_check"
|
||||
version = "0.9.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "49874b5167b65d7193b8aba1567f5c7d93d001cafc34600cee003eda787e483f"
|
||||
|
||||
[[package]]
|
||||
name = "wasm-bindgen"
|
||||
version = "0.2.79"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "25f1af7423d8588a3d840681122e72e6a24ddbcb3f0ec385cac0d12d24256c06"
|
||||
dependencies = [
|
||||
"cfg-if",
|
||||
"serde",
|
||||
"serde_json",
|
||||
"wasm-bindgen-macro",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "wasm-bindgen-backend"
|
||||
version = "0.2.79"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8b21c0df030f5a177f3cba22e9bc4322695ec43e7257d865302900290bcdedca"
|
||||
dependencies = [
|
||||
"bumpalo",
|
||||
"lazy_static",
|
||||
"log",
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn",
|
||||
"wasm-bindgen-shared",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "wasm-bindgen-futures"
|
||||
version = "0.4.29"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "2eb6ec270a31b1d3c7e266b999739109abce8b6c87e4b31fcfcd788b65267395"
|
||||
dependencies = [
|
||||
"cfg-if",
|
||||
"js-sys",
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "wasm-bindgen-macro"
|
||||
version = "0.2.79"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "2f4203d69e40a52ee523b2529a773d5ffc1dc0071801c87b3d270b471b80ed01"
|
||||
dependencies = [
|
||||
"quote",
|
||||
"wasm-bindgen-macro-support",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "wasm-bindgen-macro-support"
|
||||
version = "0.2.79"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "bfa8a30d46208db204854cadbb5d4baf5fcf8071ba5bf48190c3e59937962ebc"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn",
|
||||
"wasm-bindgen-backend",
|
||||
"wasm-bindgen-shared",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "wasm-bindgen-shared"
|
||||
version = "0.2.79"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "3d958d035c4438e28c70e4321a2911302f10135ce78a9c7834c0cab4123d06a2"
|
||||
|
||||
[[package]]
|
||||
name = "web-sys"
|
||||
version = "0.3.56"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c060b319f29dd25724f09a2ba1418f142f539b2be99fbf4d2d5a8f7330afb8eb"
|
||||
dependencies = [
|
||||
"js-sys",
|
||||
"wasm-bindgen",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "yew"
|
||||
version = "0.19.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "2a1ccb53e57d3f7d847338cf5758befa811cabe207df07f543c06f502f9998cd"
|
||||
dependencies = [
|
||||
"console_error_panic_hook",
|
||||
"gloo",
|
||||
"gloo-utils",
|
||||
"indexmap",
|
||||
"js-sys",
|
||||
"scoped-tls-hkt",
|
||||
"slab",
|
||||
"wasm-bindgen",
|
||||
"wasm-bindgen-futures",
|
||||
"web-sys",
|
||||
"yew-macro",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "yew-macro"
|
||||
version = "0.19.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "5fab79082b556d768d6e21811869c761893f0450e1d550a67892b9bce303b7bb"
|
||||
dependencies = [
|
||||
"boolinator",
|
||||
"lazy_static",
|
||||
"proc-macro-error",
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn",
|
||||
]
|
||||
|
|
@ -6,3 +6,4 @@ edition = "2021"
|
|||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
||||
yew = "0.19"
|
||||
|
|
|
|||
10
front_end/README.md
Normal file
10
front_end/README.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
# How to Test
|
||||
|
||||
- Have Rust installed via rustup.
|
||||
- Have the wasm target installed.
|
||||
- `rustup target add wasm32-unknown-unknown`
|
||||
- Have `trunk` installed and in PATH.
|
||||
- `cargo install trunk`
|
||||
- Serve the front-end via trunk.
|
||||
- `trunk serve`
|
||||
- This should serve a local server at `127.0.0.1:8080`
|
||||
79
front_end/index.html
Normal file
79
front_end/index.html
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Four-Line Dropper</title>
|
||||
<style>
|
||||
div.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 50px);
|
||||
gap: 2px;
|
||||
grid-auto-rows: 50px;
|
||||
border: 0px;
|
||||
}
|
||||
button.slot {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 1px solid black;
|
||||
padding: 0px;
|
||||
}
|
||||
button.r0 {
|
||||
grid-row: 1;
|
||||
}
|
||||
button.r1 {
|
||||
grid-row: 2;
|
||||
}
|
||||
button.r2 {
|
||||
grid-row: 3;
|
||||
}
|
||||
button.r3 {
|
||||
grid-row: 4;
|
||||
}
|
||||
button.r4 {
|
||||
grid-row: 5;
|
||||
}
|
||||
button.r5 {
|
||||
grid-row: 6;
|
||||
}
|
||||
button.r6 {
|
||||
grid-row: 7;
|
||||
}
|
||||
button.r7 {
|
||||
grid-row: 8;
|
||||
}
|
||||
button.c0 {
|
||||
grid-column: 1;
|
||||
}
|
||||
button.c1 {
|
||||
grid-column: 2;
|
||||
}
|
||||
button.c2 {
|
||||
grid-column: 3;
|
||||
}
|
||||
button.c3 {
|
||||
grid-column: 4;
|
||||
}
|
||||
button.c4 {
|
||||
grid-column: 5;
|
||||
}
|
||||
button.c5 {
|
||||
grid-column: 6;
|
||||
}
|
||||
button.c6 {
|
||||
grid-column: 7;
|
||||
}
|
||||
button.open {
|
||||
background: #FFF;
|
||||
}
|
||||
button.cyan {
|
||||
background: #0FF;
|
||||
}
|
||||
button.magenta {
|
||||
background: #F0F;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
</html>
|
||||
|
||||
<!-- vim: et ts=2 sts=2 sw=2
|
||||
-->
|
||||
|
|
@ -1,3 +1,177 @@
|
|||
fn main() {
|
||||
println!("Hello, world!");
|
||||
use yew::prelude::*;
|
||||
use std::rc::Rc;
|
||||
use std::cell::{Cell, RefCell};
|
||||
|
||||
const ROWS: u8 = 8;
|
||||
const COLS: u8 = 7;
|
||||
|
||||
#[derive(Copy, Clone, Debug, PartialEq, Eq)]
|
||||
enum BoardState {
|
||||
Empty,
|
||||
Cyan,
|
||||
Magenta,
|
||||
}
|
||||
|
||||
impl Default for BoardState {
|
||||
fn default() -> Self {
|
||||
Self::Empty
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Clone, Debug, PartialEq, Eq)]
|
||||
struct SharedState {
|
||||
board: Rc<RefCell<[BoardState; 56]>>,
|
||||
}
|
||||
|
||||
impl Default for SharedState {
|
||||
fn default() -> Self {
|
||||
Self {
|
||||
board: Rc::new(RefCell::new([BoardState::default(); 56])),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct Slot {
|
||||
}
|
||||
|
||||
enum SlotMessage {
|
||||
Press(u8),
|
||||
}
|
||||
|
||||
#[derive(Clone, PartialEq, Properties)]
|
||||
struct SlotProperties {
|
||||
idx: u8,
|
||||
state: Rc<Cell<BoardState>>,
|
||||
}
|
||||
|
||||
impl Component for Slot {
|
||||
type Message = SlotMessage;
|
||||
type Properties = SlotProperties;
|
||||
|
||||
fn create(_ctx: &Context<Self>) -> Self {
|
||||
Self {}
|
||||
}
|
||||
|
||||
fn view(&self, ctx: &Context<Self>) -> Html {
|
||||
let idx = ctx.props().idx;
|
||||
let state = match ctx.props().state.as_ref().get() {
|
||||
BoardState::Empty => "open",
|
||||
BoardState::Cyan => "cyan",
|
||||
BoardState::Magenta => "magenta",
|
||||
};
|
||||
let idx_copy = idx.clone();
|
||||
let onclick = ctx.link().callback(move |_| SlotMessage::Press(idx_copy));
|
||||
let col = idx % COLS;
|
||||
let row = idx / COLS;
|
||||
html! {
|
||||
<button class={format!("slot {} r{} c{}", state, row, col)} id={format!("{}", idx)} onclick={onclick}>
|
||||
</button>
|
||||
}
|
||||
}
|
||||
|
||||
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
|
||||
match msg {
|
||||
SlotMessage::Press(idx) => {
|
||||
let (mut shared, _) = ctx.link().context::<SharedState>(Callback::noop()).expect("shared to be set");
|
||||
let value_at_idx = shared.board.as_ref().borrow()[idx as usize].clone();
|
||||
match value_at_idx {
|
||||
BoardState::Empty => shared.board.as_ref().borrow_mut()[idx as usize] = BoardState::Cyan,
|
||||
BoardState::Cyan => shared.board.as_ref().borrow_mut()[idx as usize] = BoardState::Magenta,
|
||||
BoardState::Magenta => shared.board.as_ref().borrow_mut()[idx as usize] = BoardState::Empty,
|
||||
}
|
||||
ctx.props().state.as_ref().replace(shared.board.as_ref().borrow_mut()[idx as usize]);
|
||||
},
|
||||
}
|
||||
true
|
||||
}
|
||||
}
|
||||
|
||||
struct Wrapper {
|
||||
}
|
||||
|
||||
impl Component for Wrapper {
|
||||
type Message = ();
|
||||
type Properties = ();
|
||||
|
||||
fn create(ctx: &Context<Self>) -> Self {
|
||||
Self {}
|
||||
}
|
||||
|
||||
fn view(&self, ctx: &Context<Self>) -> Html {
|
||||
let (mut shared, _) = ctx.link().context::<SharedState>(Callback::noop()).expect("state to be set");
|
||||
let link = ctx.link();
|
||||
html! {
|
||||
<div class="wrapper">
|
||||
<Slot idx=0 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[0]))} />
|
||||
<Slot idx=1 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[1]))} />
|
||||
<Slot idx=2 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[2]))} />
|
||||
<Slot idx=3 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[3]))} />
|
||||
<Slot idx=4 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[4]))} />
|
||||
<Slot idx=5 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[5]))} />
|
||||
<Slot idx=6 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[6]))} />
|
||||
<Slot idx=7 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[7]))} />
|
||||
<Slot idx=8 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[8]))} />
|
||||
<Slot idx=9 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[9]))} />
|
||||
<Slot idx=10 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[10]))} />
|
||||
<Slot idx=11 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[11]))} />
|
||||
<Slot idx=12 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[12]))} />
|
||||
<Slot idx=13 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[13]))} />
|
||||
<Slot idx=14 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[14]))} />
|
||||
<Slot idx=15 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[15]))} />
|
||||
<Slot idx=16 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[16]))} />
|
||||
<Slot idx=17 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[17]))} />
|
||||
<Slot idx=18 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[18]))} />
|
||||
<Slot idx=19 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[19]))} />
|
||||
<Slot idx=20 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[20]))} />
|
||||
<Slot idx=21 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[21]))} />
|
||||
<Slot idx=22 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[22]))} />
|
||||
<Slot idx=23 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[23]))} />
|
||||
<Slot idx=24 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[24]))} />
|
||||
<Slot idx=25 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[25]))} />
|
||||
<Slot idx=26 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[26]))} />
|
||||
<Slot idx=27 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[27]))} />
|
||||
<Slot idx=28 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[28]))} />
|
||||
<Slot idx=29 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[29]))} />
|
||||
<Slot idx=30 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[30]))} />
|
||||
<Slot idx=31 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[31]))} />
|
||||
<Slot idx=32 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[32]))} />
|
||||
<Slot idx=33 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[33]))} />
|
||||
<Slot idx=34 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[34]))} />
|
||||
<Slot idx=35 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[35]))} />
|
||||
<Slot idx=36 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[36]))} />
|
||||
<Slot idx=37 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[37]))} />
|
||||
<Slot idx=38 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[38]))} />
|
||||
<Slot idx=39 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[39]))} />
|
||||
<Slot idx=40 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[40]))} />
|
||||
<Slot idx=41 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[41]))} />
|
||||
<Slot idx=42 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[42]))} />
|
||||
<Slot idx=43 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[43]))} />
|
||||
<Slot idx=44 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[44]))} />
|
||||
<Slot idx=45 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[45]))} />
|
||||
<Slot idx=46 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[46]))} />
|
||||
<Slot idx=47 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[47]))} />
|
||||
<Slot idx=48 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[48]))} />
|
||||
<Slot idx=49 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[49]))} />
|
||||
<Slot idx=50 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[50]))} />
|
||||
<Slot idx=51 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[51]))} />
|
||||
<Slot idx=52 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[52]))} />
|
||||
<Slot idx=53 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[53]))} />
|
||||
<Slot idx=54 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[54]))} />
|
||||
<Slot idx=55 state={Rc::new(Cell::new(shared.board.as_ref().borrow()[55]))} />
|
||||
</div> // wrapper
|
||||
}
|
||||
}
|
||||
}
|
||||
#[function_component(App)]
|
||||
fn app() -> Html {
|
||||
let ctx = use_state(|| SharedState::default());
|
||||
html! {
|
||||
<ContextProvider<SharedState> context={(*ctx).clone()}>
|
||||
<Wrapper />
|
||||
</ContextProvider<SharedState>>
|
||||
}
|
||||
}
|
||||
|
||||
fn main() {
|
||||
yew::start_app::<App>();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue