prepare front to persistable tactics

front/components/editor/BasketCourt.tsx

@@ -1,35 +1,28 @@
-import CourtSvg from "../../assets/basketball_court.svg?react"
+import CourtSvg from '../../assets/basketball_court.svg?react';
-import "../../style/basket_court.css"
+import '../../style/basket_court.css';
-import { useRef } from "react"
+import {useRef} from "react";
-import CourtPlayer from "./CourtPlayer"
+import CourtPlayer from "./CourtPlayer";
-import { Player } from "../../tactic/Player"
+import {Player} from "../../tactic/Player";
 
 export interface BasketCourtProps {
-    players: Player[]
+    players: Player[],
-    onPlayerRemove: (p: Player) => void
+    onPlayerRemove: (p: Player) => void,
     onPlayerChange: (p: Player) => void
 }
 
-export function BasketCourt({
+export function BasketCourt({players, onPlayerRemove, onPlayerChange}: BasketCourtProps) {
-    players,
+    const divRef = useRef<HTMLDivElement>(null);
-    onPlayerRemove,
-    onPlayerChange,
-}: BasketCourtProps) {
-    const divRef = useRef<HTMLDivElement>(null)
 
     return (
-        <div id="court-container" ref={divRef} style={{ position: "relative" }}>
+        <div id="court-container" ref={divRef} style={{position: "relative"}}>
-            <CourtSvg id="court-svg" />
+            <CourtSvg id="court-svg"/>
-            {players.map((player) => {
+            {players.map(player => {
-                return (
+                return <CourtPlayer key={player.team + player.role}
-                    <CourtPlayer
-                        key={player.team + player.role}
                                     player={player}
                                     onChange={onPlayerChange}
                                     onRemove={() => onPlayerRemove(player)}
                                     parentRef={divRef}
                 />
-                )
             })}
         </div>
     )

front/components/editor/CourtPlayer.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useRef, useState } from "react"
+import { RefObject, useRef } from "react"
 import "../../style/player.css"
 import RemoveIcon from "../../assets/icon/remove.svg?react"
 import Draggable from "react-draggable"

front/views/Editor.tsx

@@ -1,27 +1,18 @@
-import {
-    CSSProperties,
-    Dispatch,
-    SetStateAction,
-    useCallback,
-    useRef,
-    useState,
-} from "react"
-import "../style/editor.css"
-import TitleInput from "../components/TitleInput"
-import { BasketCourt } from "../components/editor/BasketCourt"
 
-import { Rack } from "../components/Rack"
+import { CSSProperties, Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from "react"
-import { PlayerPiece } from "../components/editor/PlayerPiece"
+import "../style/editor.css";
+import TitleInput from "../components/TitleInput";
+import {BasketCourt} from "../components/editor/BasketCourt";
 
-import { Player } from "../tactic/Player"
+import {Rack} from "../components/Rack";
-import { Tactic, TacticContent } from "../tactic/Tactic"
+import {PlayerPiece} from "../components/editor/PlayerPiece";
-import { fetchAPI } from "../Fetcher"
+
-import { Team } from "../tactic/Team"
+import {Player} from "../tactic/Player";
+import {Tactic, TacticContent} from "../tactic/Tactic";
+import {fetchAPI} from "../Fetcher";
+import {Team} from "../tactic/Team";
+import SavingState, { SaveState, SaveStates } from "../components/editor/SavingState"
 import { calculateRatio } from "../Utils"
-import SavingState, {
-    SaveState,
-    SaveStates,
-} from "../components/editor/SavingState"
 
 const ERROR_STYLE: CSSProperties = {
     borderColor: "red",
@@ -103,6 +94,7 @@ function EditorView({
         isInGuestMode ? SaveStates.Guest : SaveStates.Ok,
         onContentChange,
     )
+
     const [allies, setAllies] = useState(
         getRackPlayers(Team.Allies, content.players),
     )