Overlay Right,Left

OhMyGuus · Dec 30, 2020 · 29c9213 · 29c9213
1 parent 48c7ebb
commit 29c9213
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 8 deletions.
diff --git a/src/renderer/Avatar.tsx b/src/renderer/Avatar.tsx
@@ -61,6 +61,7 @@ export interface AvatarProps {
 	muted?: boolean;
 	connectionState?: 'disconnected' | 'novoice' | 'connected';
 	socketConfig?: SocketConfig;
+	showborder?: boolean;
 }
 
 const Avatar: React.FC<AvatarProps> = function ({
@@ -73,12 +74,13 @@ const Avatar: React.FC<AvatarProps> = function ({
 	size,
 	connectionState,
 	socketConfig,
+	showborder
 }: AvatarProps) {
 	const status = isAlive ? 'alive' : 'dead';
 	let image = players[status][player.colorId];
 	if (!image) image = players[status][0];
 	const classes = useStyles({
-		borderColor: talking ? borderColor : 'transparent',
+		borderColor: talking ? borderColor : showborder === true? '#ccbdcc' : 'transparent',
 		size,
 	});
 

diff --git a/src/renderer/Overlay.tsx b/src/renderer/Overlay.tsx
@@ -161,6 +161,8 @@ export default function Overlay(): JSX.Element {
 		</p>
 	);
 	const playersCSS: React.CSSProperties = {};
+	const playerCSS: React.CSSProperties = { textAlign: 'center' };
+
 	let playerList: Player[] = [];
 	if (gameState.players && gameState.gameState != GameState.MENU)
 		playerList = relevantPlayers;
@@ -184,21 +186,30 @@ export default function Overlay(): JSX.Element {
 			baseCSS['position'] = 'absolute';
 			baseCSS['bottom'] = '0px';
 			baseCSS['backgroundColor'] = 'rgba(0, 0, 0, 0.35)';
-			baseCSS['width'] = 'auto';
+			baseCSS['width'] = undefined;
 
 			playersCSS['justifyContent'] = 'left';
 			playersCSS['alignItems'] = 'left';
+		} else if (settings.overlayPosition == 'right' || settings.overlayPosition == 'left') {
+			baseCSS['marginLeft'] = settings.overlayPosition == 'right'? 'auto' : undefined;
+			baseCSS['marginRight'] = settings.overlayPosition == 'left'? 'auto' : undefined;
+			baseCSS['marginTop'] = '400px';
+			baseCSS['width'] = '300px';
+			baseCSS['backgroundColor'] = '';
+			playerCSS['width'] = '100%';
 		}
 		topArea = <></>;
 		if (
-			(settings.compactOverlay || gameState.gameState == GameState.TASKS) &&
+			(settings.compactOverlay ) &&
 			playerList
 		) {
 			playerList = talkingPlayers;
 			baseCSS['backgroundColor'] = 'rgba(0, 0, 0, 0)';
 		}
 	}
 
+	let isOnSide =
+		settings.overlayPosition == 'right' || settings.overlayPosition == 'left';
 	let playerArea: JSX.Element = <></>;
 	if (playerList) {
 		playerArea = (
@@ -211,13 +222,30 @@ export default function Overlay(): JSX.Element {
 					const name = settings.compactOverlay ? (
 						''
 					) : (
-						<span>
+						<span
+							style={{
+								float: isOnSide
+									? (settings.overlayPosition as Property.Float)
+									: 'none',
+								paddingTop: isOnSide ? '40px' : '',
+								fontWeight: 'bold',
+								paddingLeft: settings.overlayPosition == 'left'? '5px' : ''
+							}}
+						>
 							<small>{player.name}</small>
 						</span>
 					);
 					return (
-						<div key={player.id} style={{ width: '60px', textAlign: 'center' }}>
-							<div style={{ paddingLeft: '5px' }}>
+						<div key={player.id} style={playerCSS}>
+							<div
+								style={{
+									paddingLeft: '5px',
+									width: isOnSide ? '80px' : '60px',
+									float: isOnSide
+										? (settings.overlayPosition as Property.Float)
+										: 'none',
+								}}
+							>
 								<Avatar
 									key={player.id}
 									player={player}
@@ -226,10 +254,11 @@ export default function Overlay(): JSX.Element {
 										otherTalking[player.id] ||
 										(player.isLocal && talking)
 									}
+									showborder={isOnSide}
 									borderColor={connected ? '#2ecc71' : '#c0392b'}
 									isAlive={
 										(!player.isLocal && !otherDead[player.id]) ||
-										(player.isLocal && !player.isDead)
+										(player.isLocal && !player.isDead) 
 									}
 									size={50}
 								/>

diff --git a/src/renderer/css/index.css b/src/renderer/css/index.css
@@ -18,7 +18,7 @@ body {
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
-	width: '100%';
+	width: 100%;
 	flex-wrap: wrap;	
 	white-space: nowrap;
 	overflow: hidden;

diff --git a/src/renderer/settings/Settings.tsx b/src/renderer/settings/Settings.tsx
@@ -798,6 +798,9 @@ const Settings: React.FC<SettingsProps> = function ({
 						>
 							<option value="top">Top Center</option>
 							<option value="bottom_left">Bottom Left</option>
+							<option value="right">Right</option>
+							<option value="left">Left</option>
+
 						</TextField>
 					</>
 				)}