Refactoring

- Animation in it's own class
- JS to sync state across browsers

static/main.css

@@ -1,4 +1,56 @@
 body {
     background: black;
     color: white;
-}
+}
+
+.controls {
+    display: flex;
+    width: 40em;
+}
+
+fieldset {
+    flex: auto;
+}
+
+.buttons {
+    width: 30em;
+}
+
+input.button_color {
+    width: 6em;
+}
+
+.button_color_white {
+    background-color: #ffffff;
+    color: #000000;
+}
+
+.button_color_red {
+    background-color: #ff0000;
+    color: #000000;
+}
+
+.button_color_yellow {
+    background-color: #ffff00;
+    color: #000000;
+}
+
+.button_color_green {
+    background-color: #00ff00;
+    color: #000000;
+}
+
+.button_color_cyan {
+    background-color: #00ffff;
+    color: #000000;
+}
+
+.button_color_blue {
+    background-color: #0000ff;
+    color: #ffffff;
+}
+
+.button_color_magenta {
+    background-color: #ff00ff;
+    color: #000000;
+}

static/main.js

@@ -1,11 +1,64 @@
-function setstate(state) {
-    var request = new XMLHttpRequest();
-    request.onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 200) {
-            // process state here
-            console.log("state changed to " + state);
-        }
-    };
-    request.open("GET", "/api/state/" + state, true);
-    request.send();
-}
+(function() {
+    let state = {
+        'animation': 'off',
+        'color': "#000000"
+    }
+
+    let setState = function() {
+        let request = new XMLHttpRequest();
+        request.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                // process state here
+                console.log("state changed to " + JSON.stringify(state));
+            }
+        };
+        request.open("POST", "/api/state", true);
+        request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        request.send(JSON.stringify(state));
+    }
+
+    let animation_radios = document.getElementsByClassName("js_animation")
+    for (let el of animation_radios) {
+        el.addEventListener("click", function(ev) {
+            state.animation = el.value;
+            setState();
+        })
+        console.log("attached to " + el.value)
+    }
+
+    let color = document.getElementById("color")
+    color.addEventListener("change", function(ev) {
+        state.color = color.value;
+        setState();
+    })
+    for (let el of document.getElementsByClassName("js_color")) {
+        el.addEventListener("click", function(ev) {
+            color.value = el.dataset.color;
+            state.color = color.value;
+            setState();
+        })
+        console.log("attached to " + el.value)
+    }
+
+    window.setInterval(function() {
+        // console.log("Updating state")
+        let request = new XMLHttpRequest();
+        request.onreadystatechange = function(response) {
+            if (this.readyState == 4 && this.status == 200) {
+                var json = JSON.parse(this.responseText)
+                // console.log("state is " + JSON.stringify(json));
+                color.value = json.color;
+                state.color = json.color;
+                if (state.animation != json.animation) {
+                    console.log("Animation has been updated to "  + json.animation)
+                    state.animation = json.animation;
+                    for (let el of animation_radios) {
+                        el.checked = el.value == state.animation;
+                    }
+                }
+            }
+        };
+        request.open("GET", "/api/state", true);
+        request.send();
+    }, 500);
+})();