initial commit: rewrote in (embarassingly bad) wasm
This commit is contained in:
commit
772c15bcc1
|
|
@ -0,0 +1,2 @@
|
|||
/dist/
|
||||
/target/
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,16 @@
|
|||
[package]
|
||||
name = "bits-rs"
|
||||
version = "0.1.0"
|
||||
edition = "2024"
|
||||
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
[dependencies]
|
||||
log = "0.4.26"
|
||||
seq-macro = "0.3.6"
|
||||
wasm-logger = "0.2.0"
|
||||
web-sys = { version = "0.3", features = [
|
||||
"HtmlTableCellElement",
|
||||
"Event",
|
||||
"EventTarget",
|
||||
] }
|
||||
yew = { version = "0.21", features = ["csr"] }
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>bits n bits</title>
|
||||
<link data-trunk rel="sass" href="index.scss" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
body {
|
||||
background: linear-gradient(to bottom right, bisque, hsl(24, 57%, 70%));
|
||||
height: 100vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
#bytes_in {
|
||||
text-align: center;
|
||||
border: 0px;
|
||||
font-size: 56px;
|
||||
font-family: 'Cute Font';
|
||||
filter: sepia(100%);
|
||||
border-radius: 10px;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
#input_box {
|
||||
filter:
|
||||
// drop-shadow(5px 5px red)
|
||||
sepia(100%) // drop-shadow(-5px -5px hsl(24, 27%, 40%))
|
||||
drop-shadow(10px 10px 10px 10px hsl(24, 27%, 40%));
|
||||
height: 150px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bit {
|
||||
color: blue;
|
||||
font-weight: 200;
|
||||
font-size: 80px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: bisque;
|
||||
}
|
||||
|
||||
th:nth-child(odd) {
|
||||
background-color: burlywood;
|
||||
}
|
||||
|
||||
|
||||
#bit_wrap table:nth-of-type(even) {
|
||||
margin-left: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
#bit_wrap table:nth-of-type(odd) {
|
||||
margin-left: 0px;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
#activated_ext {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-basis: content;
|
||||
justify-content: center;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
text-align: center;
|
||||
border: 0px;
|
||||
font-size: 36px;
|
||||
font-family: 'Cute Font';
|
||||
|
||||
background: -webkit-linear-gradient(hsl(24, 27%, 40%), hsl(24, 27%, 50%));
|
||||
background-clip: border-box;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#activated_wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-basis: content;
|
||||
justify-content: center;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
text-align: center;
|
||||
border: 0px;
|
||||
font-size: 36px;
|
||||
font-family: 'Cute Font';
|
||||
|
||||
background: -webkit-linear-gradient(hsl(24, 27%, 40%), hsl(24, 27%, 50%));
|
||||
background-clip: border-box;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
#bit_wrap {
|
||||
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px hsl(24, 27%, 40%));
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-basis: content;
|
||||
justify-content: center;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
#activated {
|
||||
text-wrap: balance;
|
||||
font-weight: bold;
|
||||
font-size: 64px;
|
||||
color: grey;
|
||||
word-wrap: break-word;
|
||||
|
||||
text-align: center;
|
||||
/* width: 90vw; */
|
||||
}
|
||||
|
||||
#activated_text {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.bit:hover {
|
||||
filter: brightness(85%) saturate(150%);
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
#![allow(clippy::expect_fun_call)]
|
||||
use core::ops::Range;
|
||||
|
||||
use web_sys::{HtmlInputElement, HtmlTableCellElement, wasm_bindgen::JsCast};
|
||||
use yew::prelude::*;
|
||||
|
||||
struct BitsTable {
|
||||
bits: Html,
|
||||
value_box: Html,
|
||||
}
|
||||
|
||||
const HEX: &[char] = &[
|
||||
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'A', 'B', 'C',
|
||||
'D', 'E', 'F', 'x',
|
||||
];
|
||||
|
||||
const ALLOWED_CHARS: &[char] = &[
|
||||
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'A', 'B', 'C',
|
||||
'D', 'E', 'F', 'x', '_',
|
||||
];
|
||||
|
||||
fn value_to_u32(value: &str) -> u32 {
|
||||
let value = value.trim();
|
||||
if let Some(value) = value.strip_prefix("0x") {
|
||||
u32::from_str_radix(value.trim(), 16)
|
||||
} else if let Some(value) = value.strip_prefix("0b") {
|
||||
u32::from_str_radix(value.trim(), 2)
|
||||
} else if let Some(value) = value.strip_prefix("0o") {
|
||||
u32::from_str_radix(value.trim(), 8)
|
||||
} else {
|
||||
value.parse()
|
||||
}
|
||||
.unwrap_or_default()
|
||||
}
|
||||
|
||||
impl Component for BitsTable {
|
||||
type Message = ();
|
||||
|
||||
type Properties = ();
|
||||
|
||||
fn create(_ctx: &Context<Self>) -> Self {
|
||||
let bit_click = |bit: u8| {
|
||||
move |ev: MouseEvent| {
|
||||
let input = web_sys::window()
|
||||
.unwrap()
|
||||
.document()
|
||||
.unwrap()
|
||||
.get_element_by_id("bytes_in")
|
||||
.unwrap()
|
||||
.dyn_into::<HtmlInputElement>()
|
||||
.unwrap();
|
||||
let mut value = value_to_u32(&input.value());
|
||||
if let Some(target) = ev
|
||||
.target()
|
||||
.and_then(|t| t.dyn_into::<HtmlTableCellElement>().ok())
|
||||
{
|
||||
match target.inner_text().as_str() {
|
||||
"0" => {
|
||||
target.set_inner_text("1");
|
||||
value |= 1 << bit;
|
||||
}
|
||||
_ => {
|
||||
target.set_inner_text("0");
|
||||
value &= !(1 << bit);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input.set_value(format!("{value:#X}").as_str());
|
||||
|
||||
input
|
||||
.dispatch_event(&InputEvent::new("input").unwrap())
|
||||
.unwrap();
|
||||
}
|
||||
};
|
||||
let bits = (0..4usize)
|
||||
.rev()
|
||||
.map(|idx| {
|
||||
let headers = (idx * 8..idx * 8 + 8)
|
||||
.rev()
|
||||
.map(|idx| {
|
||||
html! {
|
||||
<th>{idx}</th>
|
||||
}
|
||||
})
|
||||
.collect::<Html>();
|
||||
let values = (idx * 8..idx * 8 + 8)
|
||||
.rev()
|
||||
.map(|idx| html! {
|
||||
<th class="bit" id={format!("bit{idx}")} onclick={bit_click(idx as _)}>{0}</th>
|
||||
})
|
||||
.collect::<Html>();
|
||||
|
||||
html! {
|
||||
<table>
|
||||
<tr class="header">
|
||||
{headers}
|
||||
</tr>
|
||||
<tr>
|
||||
{values}
|
||||
</tr>
|
||||
</table>
|
||||
}
|
||||
})
|
||||
.collect::<Html>();
|
||||
|
||||
let on_input = move |ev: InputEvent| {
|
||||
let input_element = ev
|
||||
.target()
|
||||
.and_then(|t| t.dyn_into::<HtmlInputElement>().ok())
|
||||
.expect("on_input should have a target");
|
||||
let text = input_element.value().matches(HEX).collect::<String>();
|
||||
input_element.set_value(
|
||||
&input_element
|
||||
.value()
|
||||
.matches(ALLOWED_CHARS)
|
||||
.collect::<String>(),
|
||||
);
|
||||
let mut num: u32 = match text.strip_prefix("0x") {
|
||||
Some(hex) => u32::from_str_radix(hex, 16).unwrap_or_default(),
|
||||
None => text.parse().unwrap_or_default(),
|
||||
};
|
||||
let doc = web_sys::window().unwrap().document().unwrap();
|
||||
if num == 0 {
|
||||
doc.get_element_by_id("activated_wrap")
|
||||
.unwrap()
|
||||
.set_attribute("style", "visibility: hidden;")
|
||||
.unwrap();
|
||||
} else {
|
||||
doc.get_element_by_id("activated_wrap")
|
||||
.unwrap()
|
||||
.set_attribute("style", "")
|
||||
.unwrap();
|
||||
}
|
||||
let mut act: Vec<Range<u8>> = vec![];
|
||||
for idx in 0..32u8 {
|
||||
let cell = doc
|
||||
.get_element_by_id(format!("bit{idx}").as_str())
|
||||
.expect("missing bit")
|
||||
.dyn_into::<HtmlTableCellElement>()
|
||||
.expect(format!("bit{idx} should be a table cell").as_str());
|
||||
let set = match num & 1 {
|
||||
0 => false,
|
||||
1 => true,
|
||||
_ => unreachable!(),
|
||||
};
|
||||
if set {
|
||||
match act.iter_mut().last() {
|
||||
Some(last) => {
|
||||
if last.end + 1 == idx {
|
||||
last.end += 1;
|
||||
} else {
|
||||
act.push(idx..idx);
|
||||
}
|
||||
}
|
||||
None => act.push(idx..idx),
|
||||
}
|
||||
}
|
||||
cell.set_inner_text(match set {
|
||||
false => "0",
|
||||
true => "1",
|
||||
});
|
||||
num >>= 1;
|
||||
}
|
||||
if act.is_empty() {
|
||||
doc.get_element_by_id("activated")
|
||||
.unwrap()
|
||||
.set_text_content(None);
|
||||
return;
|
||||
}
|
||||
|
||||
let act_str = act
|
||||
.into_iter()
|
||||
.map(|act| {
|
||||
if act.is_empty() {
|
||||
act.start.to_string()
|
||||
} else {
|
||||
format!("{act:?}")
|
||||
}
|
||||
})
|
||||
.collect::<Vec<_>>()
|
||||
.join(", ");
|
||||
|
||||
doc.get_element_by_id("activated")
|
||||
.unwrap()
|
||||
.set_text_content(Some(&act_str));
|
||||
};
|
||||
|
||||
let value_box = html! {
|
||||
<div id="input_box">
|
||||
<input id="bytes_in" oninput={on_input} />
|
||||
</div>
|
||||
};
|
||||
Self { bits, value_box }
|
||||
}
|
||||
|
||||
fn view(&self, _ctx: &Context<Self>) -> Html {
|
||||
let bits = self.bits.clone();
|
||||
let value_box = self.value_box.clone();
|
||||
|
||||
html! {
|
||||
<>
|
||||
{value_box}
|
||||
<br />
|
||||
<div id="bit_wrap">
|
||||
{bits}
|
||||
</div>
|
||||
<div id="activated_ext">
|
||||
<h2>{"activated"}</h2>
|
||||
</div>
|
||||
<div id="activated_wrap">
|
||||
<p id="activated"></p>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn main() {
|
||||
wasm_logger::init(wasm_logger::Config::default());
|
||||
|
||||
yew::Renderer::<BitsTable>::new().render();
|
||||
}
|
||||
Loading…
Reference in New Issue