Post grid values to server

Cargo.toml

@@ -8,4 +8,6 @@ edition = "2018"
 rusb = "0.6"
 
 rocket = "0.4.5"
-rocket_contrib = { version = "0.4.5", features = ["serve"] }
+rocket_contrib = { version = "0.4.5", features = ["json", "serve"] }
+serde = { version = "1.0", features = ["derive"] }
+serde_json = "1.0"

src/main.rs

@@ -1,6 +1,6 @@
 #![feature(proc_macro_hygiene, decl_macro)]
 
-// #[macro_use] extern crate rocket;
+#[macro_use] extern crate rocket;
 
 
 mod matrix;

src/server.rs

@@ -1,7 +1,21 @@
+use serde::Deserialize;
+use rocket_contrib::json::Json;
 use rocket_contrib::serve::StaticFiles;
 
+
+#[derive(Deserialize)]
+struct Data {
+  values: Vec<u8>,
+}
+
+#[post("/post", format = "json", data = "<data>")]
+fn post(data: Json<Data>) -> () {
+  println!("{:?}", data.values);
+}
+
 pub fn start() {
   rocket::ignite()
     .mount("/", StaticFiles::from("web"))
+    .mount("/", routes![post])
     .launch();
 }

web/index.html

@@ -15,5 +15,6 @@ <h1>AniMe Matrix</h1>
     <rect id='slide' x='0' y='0' width='100' height='5' fill='url(#gradient)' />
     <rect id='current-color' x='0' y='5' width='100' height='5' fill='white' />
   </svg>
+  <button type='button'>Send</button>
   <script src='./web.js'></script>
 </body>

web/web.js

@@ -1,7 +1,9 @@
-const ns = 'http://www.w3.org/2000/svg';
 const grid = document.querySelector('#grid');
 const slide = document.querySelector('#slide');
 const current = document.querySelector('#current-color');
+const button = document.querySelector('button');
+
+const ns = 'http://www.w3.org/2000/svg';
 
 const width = 10;
 const height = 10;
@@ -11,8 +13,9 @@ const canvasheight = ((height / 2) + 0.5) * size;
 
 grid.setAttribute('viewBox', `0 0 ${canvaswidth} ${canvasheight}`);
 
-let color = 'white';
+let color = '#ffffff';
 let painting = null;
+const map = {};
 
 const drawDiamond = (x, y) => {
   const poly = document.createElementNS(ns, 'polygon');
@@ -27,31 +30,25 @@ const drawDiamond = (x, y) => {
     ]
     .map(point => point.map(v => v * size).join(','))
     .join(' '));
-  poly.setAttribute('fill', 'black');
+  poly.setAttribute('fill', '#000000');
   grid.appendChild(poly);
 
   poly.onmousedown = () => {
     poly.setAttribute('fill', color);
     painting = color;
-    // if (poly.getAttribute('fill') === 'blue') {
-    //   poly.setAttribute('fill', 'red');
-    //   painting = 'red';
-    // }
-    // else {
-    //   poly.setAttribute('fill', 'blue');
-    //   painting = 'blue';
-    // }
   };
 
   poly.onmouseenter = () => {
     if (painting) {
       poly.setAttribute('fill', painting);
     }
   };
+
+  map[`${x},${y}`] = poly;
 };
 
-for (x = 0; x < 10; x++) {
-  for (y = 0; y < 10; y++) {
+for (let y = 0; y < height; y++) {
+  for (let x = 0; x < width; x++) {
     drawDiamond(x, y);
   }
 }
@@ -66,6 +63,22 @@ grid.onmouseleave = () => {
 slide.onmousedown = (e) => {
   const rect = e.target.getBoundingClientRect();
   const value = Math.round((e.x - rect.x) / rect.width * 255);
-  color = `rgb(${value}, ${value}, ${value})`;
+  const hex = value.toString(16);
+  color = `#${hex}${hex}${hex}`;
   current.setAttribute('fill', color);
 }
+
+button.onclick = () => {
+  const values = [];
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      values.push(parseInt(map[`${x},${y}`].getAttribute('fill').slice(1, 3), 16));
+    }
+  }
+
+  fetch('/post', {
+    method: 'post',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ values }),
+  });
+};