diff --git a/front/style/player.css b/front/style/player.css index be468e6..facdaa2 100644 --- a/front/style/player.css +++ b/front/style/player.css @@ -44,8 +44,8 @@ on the court. .player-selection-tab { display: flex; - position: absolute; - margin-bottom: 10%; + position: relative; + margin-bottom: -20%; justify-content: center; visibility: hidden; @@ -56,6 +56,8 @@ on the court. .player-selection-tab-remove { pointer-events: all; height: 25%; + width: 25%; + justify-content: center; } .player-selection-tab-remove * { diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx index 0923a67..17276c0 100644 --- a/front/views/Editor.tsx +++ b/front/views/Editor.tsx @@ -159,10 +159,13 @@ function EditorView({ const onBallDrop = (ref : HTMLDivElement) => { const ballBounds = ref.getBoundingClientRect() - let showBall = true + let ballAssigned = false setContent(content => { const players = content.players.map(player => { + if(ballAssigned) { + return {...player, hasBall: false} + } const playerBounds = document.getElementById(player.id)!.getBoundingClientRect() const doesOverlap = !( ballBounds.top > playerBounds.bottom || @@ -171,13 +174,11 @@ function EditorView({ ballBounds.left > playerBounds.right ) if(doesOverlap) { - showBall = false - + ballAssigned = true } - return {...player, hasBall: doesOverlap} }) - setShowBall(showBall) + setShowBall(!ballAssigned) return {players: players} }) } @@ -259,6 +260,9 @@ function EditorView({ case Team.Allies: setter = setAllies } + if(player.hasBall) { + setShowBall(true) + } setter((players) => [ ...players, {