fix BasketCourt margins

front/components/editor/BasketCourt.tsx

@@ -1,5 +1,5 @@
 import "../../style/basket_court.css"
-import { useRef } from "react"
+import { RefObject, useRef } from "react"
 import CourtPlayer from "./CourtPlayer"
 import { Player } from "../../tactic/Player"
 
@@ -7,20 +7,23 @@ export interface BasketCourtProps {
     players: Player[]
     onPlayerRemove: (p: Player) => void
     onPlayerChange: (p: Player) => void
-    courtImage: string,
+    courtImage: string
+    courtRef: RefObject<HTMLDivElement>
 }
 
 export function BasketCourt({
     players,
     onPlayerRemove,
     onPlayerChange,
-    courtImage
+    courtImage,
+    courtRef,
 }: BasketCourtProps) {
-    const divRef = useRef<HTMLDivElement>(null)
-
     return (
-        <div id="court-container" ref={divRef} style={{ position: "relative" }}>
+        <div
-            <img src={courtImage} alt={"court"} id="court-svg"/>
+            id="court-container"
+            ref={courtRef}
+            style={{ position: "relative" }}>
+            <img src={courtImage} alt={"court"} id="court-svg" />
             {players.map((player) => {
                 return (
                     <CourtPlayer
@@ -28,7 +31,7 @@ export function BasketCourt({
                         player={player}
                         onChange={onPlayerChange}
                         onRemove={() => onPlayerRemove(player)}
-                        parentRef={divRef}
+                        parentRef={courtRef}
                     />
                 )
             })}

front/style/basket_court.css

@@ -5,13 +5,12 @@
     justify-content: center;
     height: 100%;
 
-    padding: 20px 40px 20px 40px;
-
     background-color: var(--main-color);
 }
 
 #court-svg {
-    height: 100%;
+    margin: 35px;
+    height: 87%;
     user-select: none;
     -webkit-user-drag: none;
 }

front/style/new_tactic_panel.css

@@ -1,4 +1,3 @@
-
 #panel-root {
     width: 100%;
     height: 100%;
@@ -49,7 +48,8 @@
     transition: scale 1s;
 }
 
-.court-kind-button-bottom, .court-kind-button-top {
+.court-kind-button-bottom,
+.court-kind-button-top {
     width: 100%;
     height: 100%;
     border: solid;
@@ -80,7 +80,8 @@
     scale: 1.1;
 }
 
-.court-kind-button-top,  .court-kind-button-image-div {
+.court-kind-button-top,
+.court-kind-button-image-div {
     display: flex;
     justify-content: center;
     align-items: stretch;
@@ -100,7 +101,8 @@
     background-color: var(--second-color);
 }
 
-.court-kind-button-name, .court-kind-button-details {
+.court-kind-button-name,
+.court-kind-button-details {
     user-select: none;
     font-family: var(--text-main-font);
 }
@@ -114,4 +116,4 @@
 
 .court-kind-button:hover .court-kind-button-details {
     top: -20px;
-}
+}

front/style/player.css

@@ -39,12 +39,11 @@ on the court.
 }
 
 .player-selection-tab {
-    display: flex;
+    display: none;
 
     position: absolute;
     margin-bottom: 10%;
     justify-content: center;
-    visibility: hidden;
 
     width: 100%;
     transform: translateY(-20px);
@@ -67,7 +66,7 @@ on the court.
 }
 
 .player:focus-within .player-selection-tab {
-    visibility: visible;
+    display: flex;
 }
 
 .player:focus-within .player-piece {

front/style/theme/default.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap");
 :root {
     --main-color: #ffffff;
     --second-color: #e8e8e8;
@@ -12,10 +12,10 @@
 
     --selection-color: #3f7fc4;
 
-    --border-color: #FFFFFF;
+    --border-color: #ffffff;
 
     --editor-court-selection-background: #5f8fee;
     --editor-court-selection-buttons: #acc4f3;
 
-    --text-main-font: 'Roboto', sans-serif;
+    --text-main-font: "Roboto", sans-serif;
 }

front/views/Editor.tsx

@@ -203,12 +203,13 @@ function EditorView({
                     />
                 </div>
                 <div id="court-div">
-                    <div id="court-div-bounds" ref={courtDivContentRef}>
+                    <div id="court-div-bounds">
                         <BasketCourt
                             players={content.players}
                             courtImage={
                                 courtType == "PLAIN" ? plainCourt : halfCourt
                             }
+                            courtRef={courtDivContentRef}
                             onPlayerChange={(player) => {
                                 setContent((content) => ({
                                     players: toSplicedPlayers(

front/views/NewTacticPanel.tsx

@@ -44,8 +44,7 @@ function CourtKindButton({
     return (
         <div
             className="court-kind-button"
-            onClick={() => location.href = redirect}
+            onClick={() => (location.href = redirect)}>
-        >
             <div className="court-kind-button-details">{details}</div>
             <div className="court-kind-button-top">
                 <div className="court-kind-button-image-div">

src/App/Controller/EditorController.php

@@ -27,7 +27,7 @@ class EditorController {
             "id" => $tactic->getId(),
             "name" => $tactic->getName(),
             "content" => $tactic->getContent(),
-            "courtType" => $tactic->getCourtType()->name()
+            "courtType" => $tactic->getCourtType()->name(),
         ]);
     }
 

src/Core/Gateway/TacticInfoGateway.php

@@ -68,7 +68,7 @@ class TacticInfoGateway {
             [
                 ":name" => [$name, PDO::PARAM_STR],
                 ":owner" => [$owner, PDO::PARAM_INT],
-                ":court_type" => [$type->name(), PDO::PARAM_STR]
+                ":court_type" => [$type->name(), PDO::PARAM_STR],
             ]
         );
         return intval($this->con->lastInsertId());