initial commit

frontend/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

frontend/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

frontend/src/App.tsx

@@ -0,0 +1,7 @@
+import RelayForm from "./RelayForm";
+import "./App.css";
+
+const App: React.FC = () => {
+  return <RelayForm />;
+};
+export default App;

frontend/src/RelayForm.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { Tag, Card, Space, Button, Statistic } from "antd";
+import SolverForm from "./SolverForm";
+import axios from "axios";
+
+type Assignment = {
+  [solver: string]: string[];
+};
+
+const backend = axios.create({ baseURL: "http://localhost:8080" });
+
+const RelayForm: React.FC = () => {
+  const [forms, setForms] = useState<{ [key: string]: React.ReactNode }>({});
+  const [formData, setFormData] = useState<{
+    [key: string]: { [key: string]: number };
+  }>({});
+  const [relayTime, setRelayTime] = useState(0);
+  const [assignments, setAssignments] = useState<Assignment[]>([]);
+
+  const addForm = () => {
+    const solverName = `Solver ${Object.keys(forms).length + 0}`;
+    setForms((prevForms) => ({
+      ...prevForms,
+      [solverName]: (
+        <SolverForm
+          key={solverName}
+          solver={solverName}
+          onFormChange={handleFormChange}
+        />
+      ),
+    }));
+  };
+
+  const removeForm = (solverName: string) => {
+    const { [solverName]: removedForm, ...restForms } = forms;
+    const { [solverName]: removedData, ...restData } = formData;
+    setForms(restForms);
+    setFormData(restData);
+  };
+
+  const handleFormChange = (solver: string, data: any) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      [solver]: data,
+    }));
+  };
+
+  const onFinishAllForms = () => {
+    console.log("All form data:", formData);
+    const data = {
+      solvers: formData,
+      events: [
+        "2x2",
+        "3x3",
+        "4x4",
+        "5x5",
+        "mega",
+        "sq1",
+        "yad",
+        "clock",
+        "pyra",
+        "skewb",
+      ],
+    };
+    backend
+      .post("/relay", data)
+      .then((response) => {
+        setRelayTime(response.data.response.time);
+        console.log("assi", response.data.response.assignment);
+        setAssignments(response.data.response.assignment);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  return (
+    <Space direction="vertical">
+      <Space direction="horizontal" wrap={true}>
+        {Object.keys(forms).map((solverName) => (
+          <Card title={solverName}>
+            {forms[solverName]}
+            <Button onClick={() => removeForm(solverName)}>Remove Form</Button>
+          </Card>
+        ))}
+      </Space>
+      <Space>
+        <Button onClick={addForm}>Add Solver</Button>
+        <Button type="primary" onClick={onFinishAllForms}>
+          Calculate Relay
+        </Button>
+        <Statistic title="Relay Time" value={relayTime} precision={2} />
+      </Space>
+      <Space>
+        {Object.entries(assignments).toString()}
+      </Space>
+    </Space>
+  );
+};
+
+export default RelayForm;

frontend/src/SolverForm.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { Form, InputNumber } from "antd";
+
+const events = [
+  "2x2",
+  "3x3",
+  "4x4",
+  "5x5",
+  "mega",
+  "sq1",
+  "yad",
+  "clock",
+  "pyra",
+  "skewb",
+];
+
+interface SolverFormProps {
+  solver: string;
+  onFormChange: (solver: string, data: any) => void;
+}
+
+const SolverForm: React.FC<SolverFormProps> = ({ solver, onFormChange }) => {
+  const [formData, setFormData] = useState({
+    "2x2": 0,
+    "3x3": 0,
+    "4x4": 0,
+    "5x5": 0,
+    mega: 0,
+    sq1: 0,
+    yad: 0,
+    clock: 0,
+    pyra: 0,
+    skewb: 0,
+  });
+
+  const onValuesChange = (changedValues: any) => {
+    setFormData((prevData) => ({
+      ...prevData,
+      ...changedValues,
+    }));
+    onFormChange(solver, {
+      ...formData,
+      ...changedValues,
+    });
+  };
+
+  return (
+    <Form onValuesChange={onValuesChange}>
+      {events.map((item, index) => (
+        <Form.Item name={item} label={item}>
+          {/* item doesn't get rendered lol */}
+          <InputNumber placeholder="Enter value for {item}" />
+        </Form.Item>
+      ))}
+    </Form>
+  );
+};
+
+export default SolverForm;

frontend/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

frontend/src/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

frontend/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

frontend/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

frontend/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';