breadamp-ui: add HTTP POST calls (#34)

Controls the MIDI light show via HTTP calls.

breadamp-ui/.gitignore

@@ -2,3 +2,4 @@ node_modules
 /build
 /*.log
 /.vscode
+size-plugin.json

breadamp-ui/README.md

@@ -1,13 +1,21 @@
 # breadamp-ui
 
+This is a user interface which can control the MIDI light show.
+
 ## CLI Commands
 
-```bash
-# install dependencies
-npm install
+Most importantly, for now:
 
+```sh
 # serve with hot reload at localhost:8080
 preact watch
+```
+
+Also:
+
+```bash
+# install dependencies
+npm install
 
 # build for production with minification
 npm run build

breadamp-ui/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "breadamp-ui",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "license": "MIT",
   "scripts": {
     "build": "preact build",

breadamp-ui/src/routes/home/index.js

@@ -1,11 +1,25 @@
 import { useState } from "preact/hooks";
 import "98.css";
 
+const HOST = "http://192.168.1.100:3030";
+
+const post = async (command) =>
+  fetch(`${HOST}/${command}`, {
+    method: "POST",
+    mode: "no-cors",
+  });
+
 const Home = () => {
   const [msg, setMsg] = useState("stopped");
   const [isPlaying, setIsPlaying] = useState(false);
-  const prevTrack = () => setMsg("prev");
-  const nextTrack = () => setMsg("next");
+  const prevTrack = () => {
+    setMsg("prev");
+    return post("prev");
+  };
+  const nextTrack = () => {
+    setMsg("next");
+    return post("next");
+  };
   return (
     <div className="window-body">
       <p style={{ textAlign: "center" }}>{msg}</p>
@@ -15,6 +29,7 @@ const Home = () => {
           onClick={() => {
             setIsPlaying(!isPlaying);
             setMsg(!isPlaying ? "playing" : "stopped");
+            return post(!isPlaying ? "play" : "stop");
           }}
         >
           {isPlaying ? "⏹️" : "▶️"}