Merge pull request #153 from daithihearn/team-colours

Adding team colours

package.json

@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "5.5.5",
+    "version": "5.5.6",
     "description": "React frontend for the Cards 110",
     "author": "Daithi Hearn",
     "license": "MIT",

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "short_name": "Cards 110",
   "name": "Cards 110",
-  "version": "5.5.5",
+  "version": "5.5.6",
   "icons": [
     {
       "src": "./assets/favicon.png",
@@ -13,4 +13,4 @@
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"
-}
+}

src/components/Game/PlayerCard.tsx

@@ -10,8 +10,9 @@ import { Player } from "model/Player"
 
 interface PlayerRowI {
     player: Player
+    className?: string
 }
-const PlayerCard: React.FC<PlayerRowI> = ({ player }) => {
+const PlayerCard: React.FC<PlayerRowI> = ({ player, className }) => {
     const round = useAppSelector(getRound)
     const players = useAppSelector(getGamePlayers)
     const playerProfiles = useAppSelector(getPlayerProfiles)
@@ -48,7 +49,7 @@ const PlayerCard: React.FC<PlayerRowI> = ({ player }) => {
                 <CardImg
                     alt={profile.name}
                     src={profile.picture}
-                    className="img-center avatar"
+                    className={`img-center avatar ${className}`}
                 />
                 <CardImgOverlay>
                     <CardText className="overlay-score">

src/components/Game/PlayersAndCards.tsx

@@ -28,10 +28,11 @@ const PlayersAndCards = () => {
                     md={sortedPlayers.length}
                     lg={sortedPlayers.length}
                     xl={sortedPlayers.length}>
-                    {sortedPlayers.map(player => (
+                    {sortedPlayers.map((player, index) => (
                         <PlayerCard
                             key={`playercard_${player.id}`}
                             player={player}
+                            className={`image-team${(index % 3) + 1}-filter`}
                         />
                     ))}
                 </Row>

src/pages/Home/_home.scss

@@ -90,6 +90,21 @@
     border-radius: 50%;
 }
 
+.image-team1-filter {
+    border: solid 4px red;
+    filter: saturate(2);
+}
+
+.image-team2-filter {
+    border: solid 4px yellow;
+    filter: sepia(100%);
+}
+
+.image-team3-filter {
+    border: solid 4px blue;
+    // filter: invert(100%);
+}
+
 .clickable:hover {
     cursor: pointer;
 }