FINALLY

backend/main.go

@@ -41,7 +41,7 @@ func main() {
 				return
 			}
 
-			if len(req.Events) > 10 {
+			if len(req.Events) > 11 {
 				c.JSON(http.StatusBadRequest, gin.H{
 					"error": "too many events",
 				})

backend/relay.go

@@ -19,8 +19,8 @@ type PermWithTime struct {
 }
 
 type AssignmentWithTime struct {
-	Assignment Assignment
-	Time       float64
+	Assignment Assignment `json:"assignment"`
+	Time       float64    `json:"time"`
 }
 
 type Config struct {

frontend/src/RelayForm.tsx

@@ -4,7 +4,8 @@ import SolverForm from "./SolverForm";
 import axios from "axios";
 
 type Assignment = {
-  [solver: string]: string[];
+  solver: string;
+  events: string[];
 };
 
 const backend = axios.create({ baseURL: "http://localhost:8080" });
@@ -66,8 +67,14 @@ const RelayForm: React.FC = () => {
       .post("/relay", data)
       .then((response) => {
         setRelayTime(response.data.response.time);
-        console.log("assi", response.data.response.assignment);
-        setAssignments(response.data.response.assignment);
+        setAssignments(
+          Object.entries(response.data.response.assignment).map(
+            ([solver, events]) => ({
+              solver,
+              events: events as string[],
+            }),
+          ),
+        );
       })
       .catch((error) => {
         console.error(error);
@@ -92,7 +99,19 @@ const RelayForm: React.FC = () => {
         <Statistic title="Relay Time" value={relayTime} precision={2} />
       </Space>
       <Space>
-        {Object.entries(assignments).toString()}
+        {assignments.map((assignment, index) => (
+          <Card
+            key={index}
+            title={assignment.solver}
+            style={{ width: 300, margin: "16px" }}
+          >
+            <div>
+              {assignment.events.map((event, idx) => (
+                <Tag key={idx}>{event}</Tag>
+              ))}
+            </div>
+          </Card>
+        ))}
       </Space>
     </Space>
   );