visualizer who works

front/style/visualizer.css

@@ -1,7 +1,8 @@
 #main {
-    height: 100%;
+    height: 100vh;
     width: 100%;
-    background-color: var(--background-color);
+    display: flex;
+    flex-direction: column;
 }
 
 #topbar {
@@ -11,12 +12,19 @@
     align-items: center;
 }
 
-.h1 {
+h1 {
     text-align: center;
     margin-top: 0;
 }
 
-.id {
-    width: 1000px;
-    height: 1000px;
+#court-container {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    background-color: var(--main-color);
+}
+
+#court {
+    max-width: 80%;
+    max-height: 80%;
 }

front/views/Visualizer.tsx

@@ -10,7 +10,9 @@ export default function Visualizer({ id, name }: { id: number; name: string }) {
             <div id="topbar">
                 <h1>{name}</h1>
             </div>
+            <div id="court-container">
             <img id="court" src={Court} style={style} alt="Basketball Court" />
+            </div>
         </div>
     );
 }

public/index.php

@@ -40,7 +40,7 @@ $router->map("GET", "/twig", fn() => $sampleFormController->displayFormTwig());
 $router->map("POST", "/submit-twig", fn() => $sampleFormController->submitFormTwig($_POST));
 $router->map("GET", "/tactic/new", fn() => $editorController->makeNew());
 $router->map("GET", "/tactic/[i:id]/edit", fn(int $id) => $editorController->openEditorFor($id));
-$router->map("GET", "/tactic/[i:id]/view", fn(int $id) => $visualizerController->openVisualizer($id));
+$router->map("GET", "/tactic/[i:id]", fn(int $id) => $visualizerController->openVisualizer($id));
 
 $match = $router->match();