fix css

front/style/ball.css

@@ -2,7 +2,7 @@
     fill: #c5520d;
 }
 
-.ball {
+.ball-div, .ball {
     pointer-events: all;
     width: 20px;
     height: 20px;

front/style/colors.css

@@ -8,4 +8,6 @@
     --selected-team-secondarycolor: #000000;
 
     --selection-color: #3f7fc4;
+
+    --player-piece-ball-border-color: #000000;
 }

front/style/player.css

@@ -39,24 +39,25 @@ on the court.
 .player-piece-has-ball {
     border-width: 2px;
     border-style: solid;
+    border-color: var(--player-piece-ball-border-color);
 }
 
 .player-selection-tab {
     display: flex;
 
-    position: relative;
+    position: absolute;
     margin-bottom: -20%;
     justify-content: center;
     visibility: hidden;
 
-    width: 100%;
+    width: fit-content;
     transform: translateY(-20px);
 }
 
 .player-selection-tab-remove {
     pointer-events: all;
-    height: 25%;
+    width: 25px;
-    width: 25%;
+    height: 17px;
     justify-content: center;
 }
 

front/views/Editor.tsx

@@ -114,7 +114,7 @@ function EditorView({
         getRackPlayers(Team.Opponents, content.players),
     )
 
-    const [showBall, setShowBall] = useState(true)
+    const [showBall, setShowBall] = useState(content.players.find(p => p.hasBall) == undefined)
 
     const ballPiece = useRef<HTMLDivElement>(null)