fix mobile session view

dimm-city · Sep 1, 2024 · c011664 · c011664
1 parent a09b2f1
commit c011664
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 50 deletions.
diff --git a/.github/.gitkeep b/.github/.gitkeep
diff --git a/src/lib/components/Portal.svelte b/src/lib/components/Portal.svelte
@@ -108,7 +108,7 @@
 				addNotification({
 					id: `${new Date().getTime()}-${Math.floor(Math.random() * 9999)}`,
 					position: 'top-right',
-					removeAfter: defaultAlertDisplayTime *10,
+					removeAfter: defaultAlertDisplayTime * 10,
 					allowRemove: true,
 					heading: 'Copied to clipboard!',
 					type: 'success',
@@ -304,7 +304,7 @@
 			on:joinSession={handleJoinSession}
 		/>
 	{:else if inSession}
-		<Dialog bind:show={showPlayerSettings} title="Settings">			
+		<Dialog bind:show={showPlayerSettings} title="Settings">
 			<div>
 				<DiceThemePicker bind:theme={player.diceThemeConfig} />
 			</div>
@@ -317,13 +317,13 @@
 							{p.name}
 							{#if p.host}
 								(Host)
-							{/if}							
+							{/if}
 						</li>
 					{/each}
 				</ul>
 			</div>
 		</Dialog>
-		<Dialog bind:show={showSceneSettings} title="Scene Settings">			
+		<Dialog bind:show={showSceneSettings} title="Scene Settings">
 			<div class="scene-settings-container">
 				<p>Select a new background image.</p>
 				<input
@@ -440,4 +440,9 @@
 		transition: all 200ms ease;
 		transition-delay: 0ms;
 	}
+	@media (max-width: 768px) {
+		.portal-container {
+			width: 80dvw;
+		}
+	}
 </style>
diff --git a/src/lib/components/SessionManager.svelte b/src/lib/components/SessionManager.svelte
@@ -209,7 +209,6 @@
 	.session-form-container {
 		display: grid;
 		height: 100%;
-		width: 40dvw;
 		outline: var(--color-accent-one) solid var(--outline-width);
 
 		box-shadow:var(--shadow-accent);
@@ -225,11 +224,7 @@
 		gap: 0.5rem;
 		padding: 2rem;
 	}
-	@media (max-width: 768px) {
-		.session-form {
-			width: 80dvw;
-		}
-	}
+	
 	.session-form > * {
 		margin: auto;
 		width: 100%;

diff --git a/src/lib/server/PortalServer.js b/src/lib/server/PortalServer.js
@@ -68,6 +68,41 @@ export function createPortalServer(io) {
 			}
 		});
 
+		socket.on('leaveSession', (data) => {
+			const { sessionId } = data;
+			const session = sessions[sessionId];
+
+			if (session) {
+				session.players = session?.players.filter((p) => p.id !== socket.id);
+				session.tokens = session?.tokens.filter((t) => t.id !== socket.id);
+				sessions[sessionId] = session;
+
+				io.to(sessionId).emit('playerLeft', {
+					sessionId,
+					players: session?.players,
+					tokens: session?.tokens
+				});
+			}
+		});
+
+		socket.on('endSession', (data) => {
+			if (!isHost(data?.sessionId, socket.id)) return;
+
+			const { sessionId } = data;
+			console.log('ending session', sessionId);
+
+			socket.emit('sessionEnded', { sessionId });
+			// Broadcast the roll result along with the player's theme
+			io.to(sessionId).emit('sessionEnded', {
+				sessionId
+			});
+			delete sessions[sessionId];
+		});
+
+		socket.on('disconnect', () => {
+			console.log('Client disconnected');
+		});
+
 		socket.on('changeBackground', (data) => {
 			if (!isHost(data?.sessionId, socket.id)) return;
 
@@ -97,7 +132,6 @@ export function createPortalServer(io) {
 				socket.emit('error', { message: 'Session not found' });
 			}
 		});
-
 		socket.on('requestDiceRoll', (data) => {
 			const { sessionId, diceExpression, playerName, diceTheme } = data;
 
@@ -203,7 +237,6 @@ export function createPortalServer(io) {
 				token
 			});
 		});
-
 		socket.on('tokenMoving', (data) => {
 			const { sessionId, tokenId, x, y } = data;
 
@@ -239,39 +272,5 @@ export function createPortalServer(io) {
 				y
 			});
 		});
-
-		socket.on('leaveSession', (data) => {
-			const { sessionId } = data;
-			const session = sessions[sessionId];
-
-			if (session) {
-				session.players = session?.players.filter((p) => p.id !== socket.id);
-				session.tokens = session?.tokens.filter((t) => t.id !== socket.id);
-				sessions[sessionId] = session;
-
-				io.to(sessionId).emit('playerLeft', {
-					sessionId,
-					players: session?.players,
-					tokens: session?.tokens
-				});
-			}
-		});
-		socket.on('endSession', (data) => {
-			if (!isHost(data?.sessionId, socket.id)) return;
-
-			const { sessionId } = data;
-			console.log('ending session', sessionId);
-
-			socket.emit('sessionEnded', { sessionId });
-			// Broadcast the roll result along with the player's theme
-			io.to(sessionId).emit('sessionEnded', {
-				sessionId
-			});
-			delete sessions[sessionId];
-		});
-
-		socket.on('disconnect', () => {
-			console.log('Client disconnected');			
-		});
 	});
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,7 +4,7 @@
 	import Notifications from 'svelte-notifications';
 	import Alert from '$lib/components/Alert.svelte';
 	import '$lib/style.css';
-
+	import { env } from '$env/dynamic/public';
 	/** @type {DC.PortalPlayer} */
 	let player = {
 		name: '',
@@ -44,7 +44,7 @@
 			value: 'surreal'
 		}
 	];
-	let portalHubUrl = 'http://localhost:5173/portal-hub';
+	let portalHubUrl = env.PUBLIC_PORTAL_HUB_URL ?? 'http://localhost:5173/portal-hub';
 	/**
 	 * @type {string}
 	 */
@@ -55,9 +55,15 @@
 <svelte:head>
 	<title>Dimm City Portal</title>
 
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+	<link
+		rel="stylesheet"
+		href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+	/>
 	<!-- <link rel="stylesheet" type="text/css" href="https://unpkg.com/augmented-ui@2/augmented-ui.min.css"> -->
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+	<link
+		rel="stylesheet"
+		href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
+	/>
 </svelte:head>
 <Notifications item={Alert} zIndex={999999}>
 	<section>