apply modifications

front/components/editor/BallPiece.tsx

@@ -3,13 +3,6 @@ import "../../style/ball.css"
 import BallSvg from "../../assets/icon/ball.svg?react"
 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/CourtBall.tsx

@@ -1,6 +1,13 @@
 import React, { useRef } from "react"
 import Draggable from "react-draggable"
-import { BallPiece, CourtBallProps } from "./BallPiece"
+import { BallPiece } from "./BallPiece"
+import { Ball } from "../../tactic/CourtObjects"
+
+export interface CourtBallProps {
+    onMoved: (rect: DOMRect) => void
+    onRemove: () => void
+    ball: Ball
+}
 
 export function CourtBall({ onMoved, ball, onRemove }: CourtBallProps) {
     const pieceRef = useRef<HTMLDivElement>(null)

front/style/ball.css

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

front/style/editor.css

@@ -45,21 +45,20 @@
     height: 100%;
 }
 
-#allies-rack {
+#allies-rack,
+#opponent-rack {
     width: 125px;
     min-width: 125px;
     display: flex;
     flex-direction: row;
     align-items: flex-end;
+}
+
+#allies-rack {
     justify-content: flex-start;
 }
 
 #opponent-rack {
-    width: 125px;
-    min-width: 125px;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
     justify-content: flex-end;
 }
 

front/views/Editor.tsx

@@ -13,7 +13,6 @@ import { BasketCourt } from "../components/editor/BasketCourt"
 import plainCourt from "../assets/court/full_court.svg"
 import halfCourt from "../assets/court/half_court.svg"
 
-
 import { BallPiece } from "../components/editor/BallPiece"
 
 import { Rack } from "../components/Rack"
@@ -30,8 +29,7 @@ import SavingState, {
     SaveStates,
 } from "../components/editor/SavingState"
 
-import {CourtObject} from "../tactic/CourtObjects";
+import { CourtObject } from "../tactic/CourtObjects"
-
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -64,14 +62,7 @@ interface RackedPlayer {
 
 type RackedCourtObject = { key: "ball" }
 
-
+export default function Editor({ id, name, courtType, content }: EditorProps) {
-export default function Editor({
-                                   id,
-                                   name,
-                                   courtType,
-                                   content,
-                               }: EditorProps) {
-
     const isInGuestMode = id == -1
 
     const storage_content = localStorage.getItem(GUEST_MODE_CONTENT_STORAGE_KEY)
@@ -143,7 +134,6 @@ function EditorView({
 
     const courtDivContentRef = useRef<HTMLDivElement>(null)
 
-
     const isBoundsOnCourt = (bounds: DOMRect) => {
         const courtBounds = courtDivContentRef.current!.getBoundingClientRect()
 
@@ -209,13 +199,13 @@ function EditorView({
                         }
                     })
                     return
-                } else {
+                }
+
                 courtObject = {
                     type: "ball",
                     rightRatio: x,
                     bottomRatio: y,
                 }
-                }
                 break
 
             default:
@@ -359,9 +349,7 @@ function EditorView({
         <div id="main-div">
             <div id="topbar-div">
                 <div id="topbar-left">
-
                     <SavingState state={saveState} />
-
                 </div>
                 <div id="title-input-div">
                     <TitleInput