apply suggestions

front/editor/ActionsDomains.ts

@@ -1,4 +1,9 @@
-import { BallState, Player, PlayerPhantom } from "../model/tactic/Player"
+import {
+    BallState,
+    Player,
+    PlayerPhantom,
+    PlayerLike,
+} from "../model/tactic/Player"
 import { ratioWithinBase } from "../geo/Pos"
 import {
     ComponentId,
@@ -44,7 +49,7 @@ export function getActionKind(
 }
 
 export function getActionKindBetween(
-    origin: Player | PlayerPhantom,
+    origin: PlayerLike,
     target: TacticComponent | null,
     state: BallState,
 ): { kind: ActionKind; nextState: BallState } {
@@ -76,7 +81,6 @@ export function isActionValid(
         origin.ballState != BallState.HOLDS_ORIGIN &&
         origin.actions.find((a) => moves(a.type))
     ) {
-        console.log("a")
         return false
     }
     //Action is valid if the target is null
@@ -95,7 +99,6 @@ export function isActionValid(
         (hasBoundWith(target, origin, components) ||
             hasBoundWith(origin, target, components))
     ) {
-        console.log("b")
         return false
     }
 
@@ -104,7 +107,6 @@ export function isActionValid(
         origin.actions.find((a) => a.target === target?.id) ||
         target?.actions.find((a) => a.target === origin.id)
     ) {
-        console.log("c")
         return false
     }
 
@@ -114,7 +116,6 @@ export function isActionValid(
         if (areInSamePath(origin, target)) return false
 
         if (alreadyHasAnAnteriorActionWith(origin, target, components)) {
-            console.log("e")
             return false
         }
     }
@@ -152,8 +153,8 @@ function hasBoundWith(
 }
 
 function alreadyHasAnAnteriorActionWith(
-    origin: Player | PlayerPhantom,
+    origin: PlayerLike,
-    target: Player | PlayerPhantom,
+    target: PlayerLike,
     components: TacticComponent[],
 ): boolean {
     const targetOrigin =
@@ -174,7 +175,7 @@ function alreadyHasAnAnteriorActionWith(
     for (let i = targetIdx; i < targetOriginPath.length; i++) {
         const phantom = components.find(
             (c) => c.id === targetOriginPath[i],
-        )! as Player | PlayerPhantom
+        )! as PlayerLike
         if (
             phantom.actions.find(
                 (a) =>
@@ -191,7 +192,7 @@ function alreadyHasAnAnteriorActionWith(
     for (let i = 0; i <= originIdx; i++) {
         const phantom = components.find(
             (c) => c.id === originOriginPath[i],
-        )! as Player | PlayerPhantom
+        )! as PlayerLike
         if (
             phantom.actions.find(
                 (a) =>
@@ -208,7 +209,7 @@ function alreadyHasAnAnteriorActionWith(
 }
 
 export function createAction(
-    origin: Player | PlayerPhantom,
+    origin: PlayerLike,
     courtBounds: DOMRect,
     arrowHead: DOMRect,
     content: TacticContent,
@@ -418,7 +419,7 @@ export function removeAction(
  * @param content
  */
 export function spreadNewStateFromOriginStateChange(
-    origin: Player | PlayerPhantom,
+    origin: PlayerLike,
     newState: BallState,
     content: TacticContent,
 ): TacticContent {
@@ -441,7 +442,7 @@ export function spreadNewStateFromOriginStateChange(
 
         const actionTarget = content.components.find(
             (c) => action.target === c.id,
-        )! as Player | PlayerPhantom
+        )! as PlayerLike
 
         let targetState: BallState = actionTarget.ballState
         let deleteAction = false

front/editor/PlayerDomains.ts

@@ -1,4 +1,9 @@
-import { BallState, Player, PlayerPhantom } from "../model/tactic/Player"
+import {
+    BallState,
+    Player,
+    PlayerLike,
+    PlayerPhantom,
+} from "../model/tactic/Player"
 import { TacticComponent, TacticContent } from "../model/tactic/Tactic"
 import { removeComponent, updateComponent } from "./TacticContentDomains"
 import {
@@ -15,10 +20,7 @@ export function getOrigin(
     return components.find((c) => c.id == pathItem.originPlayerId)! as Player
 }
 
-export function areInSamePath(
+export function areInSamePath(a: PlayerLike, b: PlayerLike) {
-    a: Player | PlayerPhantom,
-    b: Player | PlayerPhantom,
-) {
     if (a.type === "phantom" && b.type === "phantom") {
         return a.originPlayerId === b.originPlayerId
     }
@@ -38,8 +40,8 @@ export function areInSamePath(
  * @returns true if the `other` player is the phantom next-to the origin's path.
  */
 export function isNextInPath(
-    origin: Player | PlayerPhantom,
+    origin: PlayerLike,
-    other: Player | PlayerPhantom,
+    other: PlayerLike,
     components: TacticComponent[],
 ): boolean {
     if (origin.type === "player") {
@@ -74,7 +76,7 @@ export function removePlayerPath(
 }
 
 export function removePlayer(
-    player: Player | PlayerPhantom,
+    player: PlayerLike,
     content: TacticContent,
 ): TacticContent {
     content = removeAllActionsTargeting(player.id, content)
@@ -93,7 +95,7 @@ export function removePlayer(
         }
         const actionTarget = content.components.find(
             (c) => c.id === action.target,
-        )! as Player | PlayerPhantom
+        )! as PlayerLike
         return spreadNewStateFromOriginStateChange(
             actionTarget,
             BallState.NONE,
@@ -139,7 +141,7 @@ export function truncatePlayerPath(
 }
 
 export function changePlayerBallState(
-    player: Player | PlayerPhantom,
+    player: PlayerLike,
     newState: BallState,
     content: TacticContent,
 ): TacticContent {

front/editor/TacticContentDomains.ts

@@ -188,13 +188,9 @@ export function removeComponent(
     componentId: ComponentId,
     content: TacticContent,
 ): TacticContent {
-    const componentIdx = content.components.findIndex(
-        (c) => c.id == componentId,
-    )
-
     return {
         ...content,
-        components: content.components.toSpliced(componentIdx, 1),
+        components: content.components.filter((c) => c.id !== componentId),
     }
 }
 
@@ -202,12 +198,11 @@ export function updateComponent(
     component: TacticComponent,
     content: TacticContent,
 ): TacticContent {
-    const componentIdx = content.components.findIndex(
-        (c) => c.id == component.id,
-    )
     return {
         ...content,
-        components: content.components.toSpliced(componentIdx, 1, component),
+        components: content.components.map((c) =>
+            c.id === component.id ? component : c,
+        ),
     }
 }
 

front/model/tactic/Player.ts

@@ -2,6 +2,8 @@ import { Component, ComponentId } from "./Tactic"
 
 export type PlayerId = string
 
+export type PlayerLike = Player | PlayerPhantom
+
 export enum PlayerTeam {
     Allies = "allies",
     Opponents = "opponents",

front/views/Editor.tsx

@@ -46,7 +46,7 @@ import {
     BallState,
     Player,
     PlayerInfo,
-    PlayerPhantom,
+    PlayerLike,
     PlayerTeam,
 } from "../model/tactic/Player"
 import { RackedCourtObject, RackedPlayer } from "../editor/RackedItems"
@@ -216,7 +216,7 @@ function EditorView({
     }
 
     const doRemovePlayer = useCallback(
-        (component: Player | PlayerPhantom) => {
+        (component: PlayerLike) => {
             setContent((c) => removePlayer(component, c))
             if (component.type == "player") insertRackedPlayer(component)
         },
@@ -224,7 +224,7 @@ function EditorView({
     )
 
     const doMoveBall = useCallback(
-        (newBounds: DOMRect, from?: Player | PlayerPhantom) => {
+        (newBounds: DOMRect, from?: PlayerLike) => {
             setContent((content) => {
                 if (from) {
                     content = changePlayerBallState(
@@ -243,7 +243,7 @@ function EditorView({
     )
 
     const validatePlayerPosition = useCallback(
-        (player: Player | PlayerPhantom, info: PlayerInfo, newPos: Pos) => {
+        (player: PlayerLike, info: PlayerInfo, newPos: Pos) => {
             setContent((content) =>
                 moveComponent(
                     newPos,
@@ -263,7 +263,7 @@ function EditorView({
     )
 
     const renderAvailablePlayerActions = useCallback(
-        (info: PlayerInfo, player: Player | PlayerPhantom) => {
+        (info: PlayerInfo, player: PlayerLike) => {
             let canPlaceArrows: boolean
 
             if (player.type == "player") {
@@ -317,7 +317,7 @@ function EditorView({
     )
 
     const renderPlayer = useCallback(
-        (component: Player | PlayerPhantom) => {
+        (component: PlayerLike) => {
             let info: PlayerInfo
             const isPhantom = component.type == "phantom"
             if (isPhantom) {
@@ -579,7 +579,7 @@ function PlayerRack({
 
 interface CourtPlayerArrowActionProps {
     playerInfo: PlayerInfo
-    player: Player | PlayerPhantom
+    player: PlayerLike
     isInvalid: boolean
 
     content: TacticContent
@@ -676,7 +676,7 @@ function CourtPlayerArrowAction({
                             {
                                 ...(newContent.components.find(
                                     (c) => c.id == player.id,
-                                )! as Player | PlayerPhantom),
+                                )! as PlayerLike),
                                 ballState,
                             },
                             newContent,