feat(*): add 8 players support

guilhermebkel · Nov 9, 2022 · dcba1b2 · dcba1b2
1 parent d51de70
commit dcba1b2
Show file tree

Hide file tree

Showing 9 changed files with 47,126 additions and 6,743 deletions.
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
@@ -1,5 +1,3 @@
 {
-	"*.{ts,tsx}": [
-		"eslint --fix"
-	]
+	"*.{ts,tsx}": []
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "dev:resources": "docker-compose up",
     "setup": "npm run setup:app && npm run setup:env",
-    "setup:app": "npm install && npm run install:unapy && npm run install:unoenty && npm run bootstrap",
+    "setup:app": "npm install && npm run bootstrap",
     "setup:env": "npm run env:unapy && npm run env:unoenty",
     "bootstrap": "lerna bootstrap --use-workspaces --hoist && lerna link",
     "list": "lerna ls",

diff --git a/packages/unapy/src/Services/GameService.ts b/packages/unapy/src/Services/GameService.ts
@@ -47,7 +47,7 @@ class GameService {
 		const playerData = await PlayerService.getPlayerData(playerId)
 
 		const game: Game = {
-			maxPlayers: 6,
+			maxPlayers: 8,
 			type: "public",
 			status: "waiting",
 			round: 0,

diff --git a/packages/unoenty/src/hooks/useSocket.tsx b/packages/unoenty/src/hooks/useSocket.tsx
@@ -22,11 +22,13 @@ import {
 	GameStartedEventData,
 	NewMessageEventData,
 } from "@uno-game/protocols"
+import { GameDeckLayoutPosition } from "@/utils/game"
+import { getSanitizedValueWithBoundaries } from "@/utils/number"
 
 type UseSocketResponse = {
 	currentPlayer: PlayerData
 	winner: PlayerData | null
-	otherPlayers: PlayerData[]
+	layoutedOtherPlayers: Record<GameDeckLayoutPosition, PlayerData>
 	currentRoundPlayer: PlayerData
 	getWinner: (game?: Game) => PlayerData | null
 	getCurrentPlayer: (players?: PlayerData[] | undefined) => PlayerData
@@ -83,45 +85,49 @@ const useSocket = (): UseSocketResponse => {
 		return player as PlayerData
 	}
 
-	const getOtherPlayers = (): PlayerData[] => {
-		const totalPlayers = socketStore?.game?.players?.length as number
+	const getLayoutedOtherPlayers = (): Record<GameDeckLayoutPosition, PlayerData> => {
+		const positionsIndexMap: Record<number, GameDeckLayoutPosition> = {
+			0: "topLeft",
+			1: "top",
+			2: "topRight",
+			3: "right",
+			4: "bottomRight",
+			5: "bottom",
+			6: "bottomLeft",
+			7: "left"
+		}
+
+		const layoutedOtherPlayers = {} as Record<GameDeckLayoutPosition, PlayerData>
 
+		const players = socketStore?.game?.players || []
 		const playerId = socketStore.player?.id
 
-		let currentPlayerIndex = socketStore?.game?.players?.
-			findIndex(player => player.id === playerId) as number
+		const currentPlayerIndex = players?.findIndex(player => player.id === playerId) as number
+		const isThereAnyCurrentPlayer = currentPlayerIndex === -1
 
-		if (currentPlayerIndex === -1) {
-			currentPlayerIndex = totalPlayers
-		}
+		if (isThereAnyCurrentPlayer) {
+			players.forEach((player, index) => {
+				layoutedOtherPlayers[positionsIndexMap[index]] = player
+			})
+		} else {
+			const currentPlayerPositionIndex = 5 // bottom
 
-		const otherPlayersBeforeCurrentPlayer = socketStore?.game?.players?.
-			slice(0, currentPlayerIndex)
+			const otherPlayersBeforeCurrentPlayer = players?.slice(0, currentPlayerIndex)
 
-		const otherPlayersAfterCurrentPlayer = socketStore?.game?.players?.
-			slice(currentPlayerIndex + 1, socketStore?.game?.players?.length)
+			otherPlayersBeforeCurrentPlayer?.reverse()?.forEach((player, index) => {
+				const otherPlayerIndex = getSanitizedValueWithBoundaries(currentPlayerPositionIndex - (index + 1), players.length, 0)
+				layoutedOtherPlayers[positionsIndexMap[otherPlayerIndex]] = player
+			})
 
-		let otherPlayers = [
-			...otherPlayersAfterCurrentPlayer || [],
-			...otherPlayersBeforeCurrentPlayer || [],
-		]
+			const otherPlayersAfterCurrentPlayer = players?.slice(currentPlayerIndex + 1, players?.length)
 
-		/**
-		 * Improves layout location
-		 */
-		if (totalPlayers <= 4) {
-			otherPlayers = [
-				otherPlayers[0],
-				{} as PlayerData,
-				otherPlayers[1],
-				{} as PlayerData,
-				otherPlayers[2],
-				{} as PlayerData,
-				otherPlayers[3],
-			]
+			otherPlayersAfterCurrentPlayer?.forEach((player, index) => {
+				const otherPlayerIndex = getSanitizedValueWithBoundaries(currentPlayerPositionIndex + (index + 1), players.length, 0)
+				layoutedOtherPlayers[positionsIndexMap[otherPlayerIndex]] = player
+			})
 		}
 
-		return (otherPlayers || []) as PlayerData[]
+		return layoutedOtherPlayers
 	}
 
 	const joinGame = async (gameId: string): Promise<Game> => {
@@ -302,8 +308,8 @@ const useSocket = (): UseSocketResponse => {
 		get currentPlayer (): PlayerData {
 			return getCurrentPlayer()
 		},
-		get otherPlayers (): PlayerData[] {
-			return getOtherPlayers()
+		get layoutedOtherPlayers (): Record<GameDeckLayoutPosition, PlayerData> {
+			return getLayoutedOtherPlayers()
 		},
 		get currentRoundPlayer (): PlayerData {
 			return getCurrentRoundPlayer()

diff --git a/packages/unoenty/src/pages/Table/CardDeckPlaceholder/index.tsx b/packages/unoenty/src/pages/Table/CardDeckPlaceholder/index.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import {
 	Grid,
 	Typography,
+	Tooltip
 } from "@material-ui/core"
 
 import { PlayerData } from "@uno-game/protocols"
@@ -20,12 +21,13 @@ import PlayerEffect from "@/pages/Table/PlayerEffect"
 
 import { getCardPosition } from "@/utils/card"
 import { buildPercentage } from "@/utils/number"
+import { GameDeckLayoutPosition } from "@/utils/game"
 
 const MAX_CARDS = 7
 
 type CardDeckPlaceholderProps = {
 	player: PlayerData
-	position: "left" | "top" | "topLeft" | "topRight" | "right" | "bottom"
+	position: GameDeckLayoutPosition
 }
 
 type CardDeckPlaceholderPositionStylesMap = {
@@ -34,6 +36,7 @@ type CardDeckPlaceholderPositionStylesMap = {
 		cardContainer?: React.CSSProperties
 		remainingCardsText?: React.CSSProperties
 		container?: React.CSSProperties
+		avatarContainer?: React.CSSProperties
 	}
 }
 
@@ -71,8 +74,22 @@ const cardDeckPlaceholderPositionStylesMap: CardDeckPlaceholderPositionStylesMap
 		cardCounterContainer: { alignItems: "flex-end" },
 		cardContainer: { top: 50, left: -10, transform: "rotate(330deg)" },
 		remainingCardsText: { width: 55, height: 50, transform: "rotate(-90deg)" },
+		container: { flexDirection: "row-reverse", top: 40, left: 64 },
+	},
+	bottomLeft: {
+		cardCounterContainer: { alignItems: "flex-end", position: "relative", bottom: -30 },
+		cardContainer: { top: 80, left: 8, transform: "rotate(366deg)" },
+		remainingCardsText: { width: 55, height: 50, transform: "rotate(-90deg)" },
 		container: { flexDirection: "row-reverse" },
+		avatarContainer: { flexDirection: "column-reverse", position: "relative", bottom: -60, height: 88, justifyContent: "space-between" }
 	},
+	bottomRight: {
+		cardCounterContainer: { alignItems: "flex-end", position: "relative", bottom: -36 },
+		cardContainer: { top: 36, left: 40, transform: "rotate(280deg)" },
+		remainingCardsText: { width: 55, height: 50, transform: "rotate(-90deg)" },
+		container: { flexDirection: "row", width: "auto", justifyContent: "flex-end" },
+		avatarContainer: { flexDirection: "column-reverse", position: "relative", bottom: -60, height: 98, justifyContent: "space-between" }
+	}
 }
 
 const CardDeckPlaceholder: React.FC<CardDeckPlaceholderProps> = (props) => {
@@ -137,25 +154,28 @@ const CardDeckPlaceholder: React.FC<CardDeckPlaceholderProps> = (props) => {
 
 				<Divider orientation="vertical" size={2} />
 
-				<Grid
-					container
-					direction="column"
-					alignItems="center"
-					className={classes.avatarContainer}
-				>
-					<Typography
-						variant="h3"
-						className={`${classes.playerName} ${customClasses.limitedName}`}
+				<Tooltip title={player.name}>
+					<Grid
+						container
+						direction="column"
+						alignItems="center"
+						className={classes.avatarContainer}
+						style={positionStyles.avatarContainer}
 					>
-						{player.name}
-					</Typography>
-
-					<Avatar
-						name={player.name}
-						size="small"
-						className={player.isCurrentRoundPlayer ? customClasses.avatarTimer : ""}
-					/>
-				</Grid>
+						<Typography
+							variant="h3"
+							className={`${classes.playerName} ${customClasses.limitedName}`}
+						>
+							{player.name}
+						</Typography>
+
+						<Avatar
+							name={player.name}
+							size="small"
+							className={player.isCurrentRoundPlayer ? customClasses.avatarTimer : ""}
+						/>
+					</Grid>
+				</Tooltip>
 
 				<Divider orientation="vertical" size={2} />
 

diff --git a/packages/unoenty/src/pages/Table/index.tsx b/packages/unoenty/src/pages/Table/index.tsx
@@ -164,7 +164,7 @@ const Table: React.FC = () => {
 								>
 									<CardDeckPlaceholder
 										position="topLeft"
-										player={socket.otherPlayers?.[1]}
+										player={socket.layoutedOtherPlayers.topLeft}
 									/>
 								</Grid>
 								<Grid
@@ -175,7 +175,7 @@ const Table: React.FC = () => {
 									<Grid container justify="center" alignItems="center">
 										<CardDeckPlaceholder
 											position="top"
-											player={socket.otherPlayers?.[2]}
+											player={socket.layoutedOtherPlayers.top}
 										/>
 									</Grid>
 								</Grid>
@@ -186,7 +186,7 @@ const Table: React.FC = () => {
 								>
 									<CardDeckPlaceholder
 										position="topRight"
-										player={socket.otherPlayers?.[3]}
+										player={socket.layoutedOtherPlayers.topRight}
 									/>
 								</Grid>
 							</Grid>
@@ -203,7 +203,7 @@ const Table: React.FC = () => {
 									<Grid container justify="flex-start">
 										<CardDeckPlaceholder
 											position="left"
-											player={socket.otherPlayers?.[0]}
+											player={socket.layoutedOtherPlayers.left}
 										/>
 									</Grid>
 								</Grid>
@@ -223,28 +223,63 @@ const Table: React.FC = () => {
 									<Grid container justify="flex-end">
 										<CardDeckPlaceholder
 											position="right"
-											player={socket.otherPlayers?.[4]}
+											player={socket.layoutedOtherPlayers.right}
 										/>
 									</Grid>
 								</Grid>
 							</Grid>
-							<Grid container alignItems="center">
-								<Grid container justify="center" style={{ height: "100%" }}>
-									{socket?.currentPlayer ? (
-										<>
+							<Grid container justify="space-between">
+								<Grid
+									item
+									xs={2}
+									className={classes.cardDeckPlaceholder}
+								>
+									<CardDeckPlaceholder
+										position="bottomLeft"
+										player={socket.layoutedOtherPlayers.bottomLeft}
+									/>
+								</Grid>
+
+								{socket?.currentPlayer ? (
+									<Grid
+										container
+										alignItems="center"
+										justify="center"
+										style={{ position: "absolute", bottom: 16, height: 240, left: 0 }}
+									>
+										<Grid
+											style={{ height: "100%" }}
+										>
 											<CustomCardDragPreview />
 
 											<CardDeck
 												cards={socket.currentPlayer?.handCards}
 												player={socket.currentPlayer}
 											/>
-										</>
-									) : (
+										</Grid>
+									</Grid>
+								) : (
+									<Grid
+										item
+										xs={2}
+										className={classes.cardDeckPlaceholder}
+									>
 										<CardDeckPlaceholder
 											position="bottom"
-											player={socket.otherPlayers?.[5]}
+											player={socket.layoutedOtherPlayers.bottom}
 										/>
-									)}
+									</Grid>
+								)}
+
+								<Grid
+									item
+									xs={2}
+									className={classes.cardDeckPlaceholder}
+								>
+									<CardDeckPlaceholder
+										position="bottomRight"
+										player={socket.layoutedOtherPlayers.bottomRight}
+									/>
 								</Grid>
 							</Grid>
 						</Grid>

diff --git a/packages/unoenty/src/utils/game.ts b/packages/unoenty/src/utils/game.ts
@@ -12,5 +12,7 @@ export const statusColorMap: StatusMap<string> = {
 	waiting: colors.palette.yellow1,
 }
 
+export type GameDeckLayoutPosition = "left" | "top" | "topLeft" | "topRight" | "right" | "bottom" | "bottomLeft" | "bottomRight"
+
 // eslint-disable-next-line
 export const orderByCreatedAtDesc = (a: any, b: any) => b.createdAt - a.createdAt
diff --git a/packages/unoenty/src/utils/number.ts b/packages/unoenty/src/utils/number.ts
@@ -3,3 +3,17 @@ export const buildPercentage = (used: number, total: number): number => {
 
 	return percentage
 }
+
+export const getSanitizedValueWithBoundaries = (value: number, max: number, min: number) => {
+	let sanitizedValue: number
+
+	if (value >= max) {
+		sanitizedValue = value % max
+	} else if (value <= min) {
+		sanitizedValue = Math.abs(max - Math.abs(value)) % max
+	} else {
+		return value
+	}
+
+	return sanitizedValue
+}