control UI & bugfix

TrentonBowserFanClub · Mar 30, 2024 · add2fd0 · add2fd0
1 parent 36180b8
commit add2fd0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 22 deletions.
diff --git a/src/ui/v1/package-lock.json b/src/ui/v1/package-lock.json
diff --git a/src/ui/v1/package.json b/src/ui/v1/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.4"
+    "react-icons": "^5.0.1"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.4",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.4"
+    "typescript": "^5"
   }
 }
diff --git a/src/ui/v1/src/app/globals.css b/src/ui/v1/src/app/globals.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.text-transparent { 
+    color: transparent !important;
+}
diff --git a/src/ui/v1/src/app/page.tsx b/src/ui/v1/src/app/page.tsx
@@ -1,5 +1,6 @@
 "use client"
 import { useRef, useEffect, useInsertionEffect, useState } from "react";
+import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp } from "react-icons/fa";
 
 export default function Home() {
   const ws = new WebSocket('ws://localhost:8000/ws');
@@ -96,20 +97,18 @@ export default function Home() {
   }, [])
 
   useEffect(() => {
-    if (left === 1 || up === 1 || right === 1 || down === 1) {
-      fetch('http://localhost:8000/command', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          left,
-          up,
-          right,
-          down
-        }),
-      });
-    }
+    fetch('http://localhost:8000/command', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        left,
+        up,
+        right,
+        down
+      }),
+    });
   }, [down, left, right, up])
 
   return (
@@ -121,7 +120,34 @@ export default function Home() {
           </div>
           <div className="col-span-2 bg-gradient-to-br from-red to-yellow">
             <div className="flex flex-col items-center justify-center h-full">
-              <button
+              <div className="grid grid-cols-3 w-1/3">
+                <div className="aspect-square"/>
+                <div className={up ? "border-green text-green" : "border-blue text-blue"}>
+                  <div className="border-4 rounded-[50%] aspect-square flex justify-center items-center">
+                    <FaArrowUp size={32}/>
+                  </div>
+                </div>
+                <div className="aspect-square"/>
+                <div className={left ? "border-green text-green" : "border-blue text-blue"}>
+                  <div className="border-4 rounded-[50%] aspect-square flex justify-center items-center">
+                    <FaArrowLeft size={32}/>
+                  </div>
+                </div>
+                <div className="aspect-square"/>
+                <div className={right ? "border-green text-green" : "border-blue text-blue"}>
+                  <div className="border-4 rounded-[50%] aspect-square flex justify-center items-center">
+                    <FaArrowRight size={32}/>
+                  </div>
+                </div>
+                <div className="aspect-square"/>
+                <div className={down ? "border-green text-green" : "border-blue text-blue"}>
+                  <div className="border-4 rounded-[50%] aspect-square flex justify-center items-center">
+                    <FaArrowDown size={32}/>
+                  </div>
+                </div>
+                <div className="aspect-square"/>
+              </div>
+              {/* <button
                 className="arrow-button"
                 onClick={() => setDirection("up")}
               >
@@ -144,7 +170,7 @@ export default function Home() {
                 onClick={() => setDirection("right")}
               >
                 Right
-              </button>
+              </button> */}
             </div>
           </div>
         </div>