add possibility to remove ball from the court

front/components/editor/BallPiece.tsx

@@ -5,10 +5,10 @@ import {Ball} from "../../tactic/CourtObjects";
 
 export interface CourtBallProps {
     onMoved: (rect: DOMRect) => void
+    onRemove: () => void
     ball: Ball
 }
 
-
 export function BallPiece() {
     return (
         <BallSvg className={"ball"}/>

front/components/editor/BasketCourt.tsx

@@ -13,6 +13,8 @@ export interface BasketCourtProps {
     onPlayerRemove: (p: Player) => void
     onPlayerChange: (p: Player) => void
 
+    onBallRemove : () => void
+
     onBallMoved: (ball: DOMRect) => void,
 
     courtImage: string
@@ -20,10 +22,10 @@ export interface BasketCourtProps {
 }
 
 export function BasketCourt({
-
                                 players,
                                 objects,
                                 onPlayerRemove,
+                                onBallRemove,
                                 onBallMoved,
                                 onPlayerChange,
                                 courtImage,
@@ -54,6 +56,7 @@ export function BasketCourt({
                     return <CourtBall
                         onMoved={onBallMoved}
                         ball={object}
+                        onRemove={onBallRemove}
                         key="ball"
                     />
                 }

front/components/editor/CourtBall.tsx

@@ -2,7 +2,8 @@ import React, {useRef} from "react";
 import Draggable from "react-draggable";
 import {BallPiece, CourtBallProps} from "./BallPiece";
 
-export function CourtBall({onMoved, ball}: CourtBallProps) {
+
+export function CourtBall({onMoved, ball, onRemove}: CourtBallProps) {
     const pieceRef = useRef<HTMLDivElement>(null)
 
     const x = ball.rightRatio
@@ -15,6 +16,10 @@ export function CourtBall({onMoved, ball}: CourtBallProps) {
         >
             <div className={"ball-div"}
                  ref={pieceRef}
+                 tabIndex={0}
+                 onKeyUp={(e) => {
+                     if (e.key == "Delete") onRemove()
+                 }}
                  style={{
                      position: "absolute",
                      left: `${x * 100}%`,

front/style/ball.css

@@ -8,4 +8,9 @@
     width: 20px;
     height: 20px;
     cursor: pointer;
+    tabIndex: 0;
+}
+
+.ball-div:focus-within {
+
 }

front/style/editor.css

@@ -111,3 +111,5 @@
 .save-state-guest {
     color: gray;
 }
+
+

front/views/Editor.tsx

@@ -400,6 +400,16 @@ function EditorView({
                                     },
                                 ])
                             }}
+                            onBallRemove={() => {
+                                setContent((content) => {
+                                    const ballObj = content.objects.findIndex(o => o.type == "ball")
+                                    return {
+                                        ...content,
+                                        objects: content.objects.toSpliced(ballObj, 1)
+                                    }
+                                })
+                                setObjects([{key: "ball"}])
+                            }}
                         />
                     </div>
                 </div>