2 initialize gui

control-station/package.json

@@ -5,8 +5,10 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write .",
+    "test": "tsc --noEmit",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -15,8 +17,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
@@ -25,5 +27,17 @@
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
     "vite": "^5.4.8"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

control-station/src/App.tsx

@@ -1,35 +1,20 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
+import React from 'react';
+import Navbar from './components/Navbar/Navbar';
+import StatusIndicator from './components/StatusIndicator/StatusIndicator';
+import ControlPanel from './components/ControlPanel/ControlPanel';
+import './App.css';
 
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <div className="App">
+      <Navbar />
+      <StatusIndicator status="green" />
+      <main className="content">
+        {"HX10 GUI"}
+      </main>
+      <ControlPanel />
+    </div>
   );
 }
 
-export default App;
+export default App;

control-station/src/components/ControlPanel/ControlPanel.css

@@ -0,0 +1,24 @@
+.status-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-around;
+    padding: 10px;
+    background-color: gray;
+  }
+
+  .status-button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    font-size: 1rem;
+    font-weight: bold;
+    cursor: pointer;
+  }
+
+  .run { background-color: #4CAF50; color: white; }
+  .stop { background-color: #F44336; color: white; }
+  .halt { background-color: #FFA500; color: white; }
+  .load { background-color: #FFD700; color: white; }

control-station/src/components/ControlPanel/ControlPanel.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import './ControlPanel.css';
+
+function ControlPanel() {
+  return (
+    <footer className="status-bar">
+      <button className="status-button run">Run</button>
+      <button className="status-button stop">Stop</button>
+      <button className="status-button halt">Halt</button>
+      <button className="status-button load">Load</button>
+    </footer>
+  );
+}
+
+export default ControlPanel;

control-station/src/components/Navbar/Navbar.css

@@ -0,0 +1,18 @@
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    font-size: 1.5rem;
+    background-color: grey;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: normal;
+
+    height: 40px;
+    padding: 0 10px;
+
+}

control-station/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,14 @@
+import HX from "../../images/HX_Logo.svg";
+
+import "./Navbar.css";
+
+function Navbar() {
+	return (
+		<header className="navbar">
+			<img alt="HX logo" src={HX} style={{ height: "30px" }} />
+			HyperXite
+		</header>
+	);
+}
+
+export default Navbar;

control-station/src/components/StatusIndicator/StatusIndicator.css

@@ -0,0 +1,55 @@
+.status-indicator-container {
+  position: fixed;
+  left: 10px; 
+  top: 50%;
+  transform: translateY(-50%);
+  width: 70px; 
+  height: 300px; 
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  background-color: gray;
+  padding: 15px 0;
+  border-radius: 10px;
+}
+
+.status-label {
+  font-size: 16px;
+  font-weight: bold;
+  color: white;
+  margin-bottom: 10px;
+}
+
+.status-circles {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  height: 80%;
+}
+
+.status-circle {
+  width: 40px; 
+  height: 40px; 
+  border-radius: 50%;
+  border: 2px solid #333;
+  opacity: 0.3;
+  transition: opacity 0.3s ease;
+}
+
+.status-circle.red {
+  background-color: #F44336;
+}
+
+.status-circle.yellow {
+  background-color: #FFA500;
+}
+
+.status-circle.green {
+  background-color: #4CAF50;
+}
+
+.status-circle.active {
+  opacity: 1;
+}

control-station/src/components/StatusIndicator/StatusIndicator.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import './StatusIndicator.css';
+
+type StatusType = 'green' | 'yellow' | 'red';
+
+interface StatusIndicatorProps {
+  status: StatusType;
+}
+
+function StatusIndicator({ status }: StatusIndicatorProps) {
+  return (
+    <div className="status-indicator-container">
+      <div className="status-label">Status</div>
+      <div className="status-circles">
+        <div className={`status-circle green ${status === 'green' ? 'active' : ''}`}></div>
+        <div className={`status-circle yellow ${status === 'yellow' ? 'active' : ''}`}></div>
+        <div className={`status-circle red ${status === 'red' ? 'active' : ''}`}></div>
+      </div>
+    </div>
+  );
+}
+
+export default StatusIndicator;

control-station/src/custom.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svg" {
+    import React = require("react");
+    export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+    const src: string;
+    export default src;
+  }

control-station/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+// const root = ReactDOM.createRoot(
+//   document.getElementById('root') as HTMLElement
+// );
+// root.render(
+//   <React.StrictMode>
+//     <App />
+//   </React.StrictMode>
+// );
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

control-station/tsconfig.json

@@ -1,7 +1,31 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
+	"compilerOptions": {
+		"target": "ES2020",
+    "baseUrl": ".",
+		"paths": {
+			"@/*": ["src/*"]
+		},
+    "useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src"],
+	"references": [
     { "path": "./tsconfig.node.json" }
   ]
-}
+}