set opponents colors to orange

front/components/editor/BasketCourt.tsx

@@ -14,6 +14,7 @@ export function BasketCourt({players, onPlayerRemove}: { players: Player[], onPl
             return (
                 <CourtPlayer key={player.id}
                              pos={player.position}
+                             team={player.team}
                              x={(bounds.width * player.right_percentage)}
                              y={(bounds.height * player.bottom_percentage)}
                              bounds={{bottom: bounds.height, top: 0, left: 0, right: bounds.width}}

front/components/editor/CourtPlayer.tsx

@@ -6,6 +6,7 @@ import {PlayerPiece} from "./PlayerPiece";
 
 export interface PlayerOptions {
     pos: string,
+    team: string,
     x: number,
     y: number,
     bounds: DraggableBounds,
@@ -15,7 +16,7 @@ export interface PlayerOptions {
 /**
  * A player that is placed on the court, which can be selected, and moved in the associated bounds
  * */
-export default function CourtPlayer({pos, x, y, bounds, onRemove}: PlayerOptions) {
+export default function CourtPlayer({pos, team, x, y, bounds, onRemove}: PlayerOptions) {
 
     const ref = useRef<HTMLDivElement>(null);
     return (
@@ -42,7 +43,7 @@ export default function CourtPlayer({pos, x, y, bounds, onRemove}: PlayerOptions
                             className="player-selection-tab-remove"
                             onClick={() => onRemove()}/>
                     </div>
-                    <PlayerPiece text={pos}/>
+                    <PlayerPiece team={team} text={pos}/>
                 </div>
             </div>
 

front/components/editor/PlayerPiece.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import '../../style/player.css'
 
 
-export function PlayerPiece({text}: { text: string }) {
+export function PlayerPiece({team, text}: { team: string, text: string }) {
     return (
-        <div className="player-piece">
+        <div className={`player-piece ${team}`}>
             <p>{text}</p>
         </div>
     )

front/style/editor.css

@@ -35,6 +35,10 @@
     margin-left: 5px;
 }
 
+.player-piece.opponents {
+    background-color: #f59264;
+}
+
 #court-div {
     background-color: var(--background-color);
     height: 100%;

front/views/Editor.tsx

@@ -123,3 +123,4 @@ export default function Editor({id, name}: { id: number, name: string }) {
         </div>
     )
 }
+