init
This commit is contained in:
commit
ae0a61884e
1797
Cargo.lock
generated
Normal file
1797
Cargo.lock
generated
Normal file
File diff suppressed because it is too large
Load Diff
8
Cargo.toml
Normal file
8
Cargo.toml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
[package]
|
||||||
|
name = "clarity"
|
||||||
|
version = "0.1.0"
|
||||||
|
edition = "2021"
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
rocket = "0.5.1"
|
||||||
|
rocket_ws = "0.1.1"
|
37
clarity.js
Normal file
37
clarity.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
const socket = new WebSocket("ws://localhost:8000/echo")
|
||||||
|
|
||||||
|
socket.addEventListener("message", event => {
|
||||||
|
console.debug(event.data)
|
||||||
|
})
|
||||||
|
|
||||||
|
let grid_size = 10;
|
||||||
|
const map = new Map();
|
||||||
|
|
||||||
|
document.addEventListener("click", event => {
|
||||||
|
let x = Math.floor(event.pageX / grid_size)
|
||||||
|
let y = Math.floor(event.pageY / grid_size)
|
||||||
|
|
||||||
|
let key = `x${x}y${y}`
|
||||||
|
|
||||||
|
let val = 0;
|
||||||
|
let element = undefined;
|
||||||
|
|
||||||
|
if (map.get(key) == undefined) {
|
||||||
|
val = 1
|
||||||
|
let d = document.createElement("div")
|
||||||
|
document.getElementsByTagName("body")[0].appendChild(d)
|
||||||
|
element = d
|
||||||
|
map.set(key, [val, d]);
|
||||||
|
} else {
|
||||||
|
let index = map.get(key);
|
||||||
|
val = index[0]+1;
|
||||||
|
element = index[1];
|
||||||
|
map.set(key, [val, index[1]]);
|
||||||
|
}
|
||||||
|
|
||||||
|
socket.send(key)
|
||||||
|
|
||||||
|
let hue = ((1 - (val/60)) * 100);
|
||||||
|
element.style = `width:${grid_size}px;height:${grid_size}px;background-color:hsl(${hue},100%,50%);position:absolute;left:${x*grid_size}px;top:${y*grid_size}px;z-index:1000`
|
||||||
|
|
||||||
|
});
|
24
index.html
Normal file
24
index.html
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title></title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="clarity.js" async module></script>
|
||||||
|
<p>Here's some awesome text</p>
|
||||||
|
<div style=width:500px;height:500px;background-color:red>
|
||||||
|
<p>Hello world</p>
|
||||||
|
</div>
|
||||||
|
<div style=width:500px;height:500px;background-color:green>
|
||||||
|
<p>Hello world</p>
|
||||||
|
</div>
|
||||||
|
<div style=width:500px;height:500px;background-color:blue>
|
||||||
|
<p>Hello world</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
19
src/main.rs
Normal file
19
src/main.rs
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
use rocket::{get, routes, tokio};
|
||||||
|
use rocket_ws::{Stream, WebSocket};
|
||||||
|
|
||||||
|
|
||||||
|
#[rocket::main]
|
||||||
|
async fn main() {
|
||||||
|
let j = rocket::build().mount("/", routes![ws]);
|
||||||
|
let _ = j.launch().await;
|
||||||
|
}
|
||||||
|
|
||||||
|
#[get("/echo")]
|
||||||
|
fn ws(ws: WebSocket) -> Stream!['static] {
|
||||||
|
Stream! { ws =>
|
||||||
|
for await message in ws {
|
||||||
|
println!("{:?}", message);
|
||||||
|
yield message?;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user