diff --git a/front/components/editor/BallPiece.tsx b/front/components/editor/BallPiece.tsx index 6390530..b798532 100644 --- a/front/components/editor/BallPiece.tsx +++ b/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 ( diff --git a/front/components/editor/BasketCourt.tsx b/front/components/editor/BasketCourt.tsx index bcf8284..9950775 100644 --- a/front/components/editor/BasketCourt.tsx +++ b/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 } diff --git a/front/components/editor/CourtBall.tsx b/front/components/editor/CourtBall.tsx index 5702002..8d0c9be 100644 --- a/front/components/editor/CourtBall.tsx +++ b/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(null) const x = ball.rightRatio @@ -15,6 +16,10 @@ export function CourtBall({onMoved, ball}: CourtBallProps) { >
{ + if (e.key == "Delete") onRemove() + }} style={{ position: "absolute", left: `${x * 100}%`, diff --git a/front/style/ball.css b/front/style/ball.css index c14c196..834c4ae 100644 --- a/front/style/ball.css +++ b/front/style/ball.css @@ -8,4 +8,9 @@ width: 20px; height: 20px; cursor: pointer; + tabIndex: 0; } + +.ball-div:focus-within { + +} \ No newline at end of file diff --git a/front/style/editor.css b/front/style/editor.css index 02b7658..301bc1b 100644 --- a/front/style/editor.css +++ b/front/style/editor.css @@ -111,3 +111,5 @@ .save-state-guest { color: gray; } + + diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx index 100b2d7..bd1f430 100644 --- a/front/views/Editor.tsx +++ b/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"}]) + }} />