create UI

TwoSquirrels · Jul 9, 2024 · 864f154 · 864f154
1 parent e32ac1a
commit 864f154
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "vite": "^5.3.1"
   },
   "dependencies": {
+    "nipplejs": "^0.10.2",
     "sanitize.css": "^13.0.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,65 @@
     <title>Virtual Gamepad</title>
   </head>
   <body>
-    <div id="app"></div>
+    <main>
+      <div id="joystick-zone"></div>
+      <div id="buttons-zone">
+        <button type="button" class="button-a">A</button>
+        <button type="button" class="button-b">B</button>
+      </div>
+    </main>
+    <article>
+      <h1>Virtual Gamepad</h1>
+      <section>
+        <h2>Settings</h2>
+        <p>
+          <label for="host">Host:</label>
+          <input
+            type="text"
+            id="settings-host"
+            name="host"
+            placeholder="http://192.168.250.162"
+            value="http://localhost:3000"
+          />
+        </p>
+        <p>
+          <label for="interval">Joystick Request Intarval:</label>
+          <input
+            type="number"
+            id="settings-interval"
+            name="interval"
+            placeholder="200"
+            value="200"
+          />ms
+        </p>
+        <p>
+          <label for="buttons">Show buttons:</label>
+          <input
+            type="checkbox"
+            id="settings-buttons"
+            name="buttons"
+            checked
+          />
+        </p>
+      </section>
+      <section>
+        <h2>References</h2>
+        <p>
+          Joystick: send POST to <code>/joystick?p=aaff</code> (<code>aa</code>:
+          00~FF angle, <code>ff</code>: 00~FF force) at intervals.
+        </p>
+        <p>Buttons: send POST to <code>/a</code>, <code>/b</code>.</p>
+        <p>
+          More details:
+          <a
+            href="https://github.com/TwoSquirrels/virtual-gamepad#readme"
+            target="_blank"
+            rel="noopener noreferrer"
+            >TwoSquirrels/virtual-gamepad - GitHub</a
+          >
+        </p>
+      </section>
+    </article>
     <script type="module" src="/main.js"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,8 +1,32 @@
+import nipplejs from "nipplejs";
 import "sanitize.css";
 import "./style.css";
 
-document.querySelector("#app").innerHTML = `
-  <div>
-    <h1>Virtual Gamepad</h1>
-  </div>
-`;
+let host = "http://localhost";
+let interval = 200;
+let showButtons = true;
+
+document.querySelector("#settings-host").oninput = (event) => {
+  console.log(`Modify host ${host} -> ${event.target.value}`);
+  host = event.target.value;
+};
+
+document.querySelector("#settings-interval").oninput = (event) => {
+  console.log(`Modify interval ${interval} -> ${event.target.value}`);
+  interval = event.target.value;
+};
+
+document.querySelector("#settings-buttons").oninput = (event) => {
+  console.log(`Modify showButtons ${showButtons} -> ${event.target.checked}`);
+  showButtons = event.target.checked;
+  if (showButtons)
+    document.querySelector("#buttons-zone").classList.remove("erase");
+  else document.querySelector("#buttons-zone").classList.add("erase");
+};
+
+const joystickManager = nipplejs.create({
+  zone: document.querySelector("#joystick-zone"),
+  color: "#55CCFF",
+  size: 160,
+  mode: "dynamic",
+});
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,83 @@
+:root {
+  width: 0;
+  color: #ffffffcc;
+}
+
+.erase {
+  position: absolute;
+  display: none;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  visibility: hidden;
+  opacity: 0;
+}
+
+main {
+  position: absolute;
+  display: flex;
+  top: 0;
+  left: 0;
+  height: 100dvh;
+  width: 100dvw;
+  z-index: -1;
+  background-color: navy;
+}
+
+#joystick-zone {
+  flex: 8;
+  height: 100%;
+  background-color: #ffaaaa33;
+}
+
+#buttons-zone {
+  display: flex;
+  flex: 5;
+  height: 100%;
+  flex-direction: column;
+}
+
+#buttons-zone > button {
+  display: block;
+  flex: 1;
+  width: 100%;
+  font-size: 25dvmin;
+  opacity: 0.5;
+}
+
+#buttons-zone > button:hover {
+  opacity: 0.75;
+}
+
+article {
+  margin: 0.5em;
+  padding: 0.5em;
+  max-height: 50dvh;
+  width: 50dvw;
+  overflow: scroll;
+  font-size: max(0.75rem, 2dvmin);
+  background-color: #55555555;
+}
+
+article * {
+  margin: 0;
+}
+
+article h1 {
+  margin: 0.2em 0.1em;
+}
+
+article h2 {
+  margin: 0.1em 0;
+}
+
+article input[type="checkbox"] {
+  height: 1.5em;
+  width: 1.5em;
+}
+
+article code {
+  padding: 0.25em;
+  background: #333355;
+}