starting config refactor

src/lib/components/Portal.svelte

@@ -11,9 +11,10 @@
 
 	const defaultAlertDisplayTime = 2000;
 
-	export let portalHubUrl;
+	/** @type {import("./types.js").PortalConfig} */
+	export let config = {		
+	}
 
-	export let connected = false;
 	/**
 	 * @type {null|string}
 	 */
@@ -27,13 +28,9 @@
 	 */
 	export let sessionMode;
 
-	/**
-	 * @type {DC.PortalPlayer}
-	 */
+	/** @type {import("./types.js").Player} */
 	export let player;
 
-	export let diceOptions;
-
 	/**
 	 * @type {DC.PortalToken[]}
 	 */
@@ -42,8 +39,8 @@
 	export let inSession = false;
 
 	//'http://localhost:1337'
-	const socketHost = new URL(portalHubUrl).origin;
-	const socketPath = new URL(portalHubUrl).pathname;
+	const socketHost = new URL(config.hubUrl).origin;
+	const socketPath = new URL(config.hubUrl).pathname;
 	console.log('Portal Hub', socketHost, socketPath);
 	const socket = io(socketHost, {
 		path: socketPath
@@ -299,7 +296,8 @@
 			bind:player
 			bind:mode={sessionMode}
 			bind:sessionId
-			bind:portalHubUrl
+			bind:portalHubUrl={config.hubUrl}
+			allowHubSwitching={config.allowHubSwitching}
 			{sessionName}
 			on:createSession={handleCreateSession}
 			on:joinSession={handleJoinSession}
@@ -360,7 +358,7 @@
 		<Toolbar
 			{players}
 			{player}
-			{diceOptions}
+			diceOptions={config.diceOptions}
 			bind:diceNotation
 			bind:showPlayerList
 			bind:showPlayerSettings

src/lib/components/SessionManager.svelte

@@ -17,7 +17,7 @@
 	 */
 	export let sessionName;
 
-	export let allowPortalHubUrlChange = false;
+	export let allowHubSwitching = false;
 	export let portalHubUrl;
 
 	let password = '';
@@ -141,7 +141,7 @@
 		</div>
 		<hr /> -->
 		<form>
-			{#if allowPortalHubUrlChange}
+			{#if allowHubSwitching}
 			<label for="portal-hub-url"> Portal Hub URL </label>	
 			<input
 				type="text"

src/lib/server/PortalServer.js

@@ -273,4 +273,9 @@ export function createPortalServer(io) {
 			});
 		});
 	});
+
+	return {
+		version: '0.0.1',
+		io
+	}
 }

src/lib/types.js

@@ -0,0 +1,57 @@
+/**
+ * Represents the configuration for a dice theme.
+ * @typedef {Object} DiceThemeConfig
+ * @property {string} name - The name of the dice theme.
+ * @property {string} foreground - The color or identifier for the foreground of the dice.
+ * @property {string} background - The color or identifier for the background of the dice.
+ * @property {string} texture - The texture type for the dice.
+ * @property {string} description - A description of the dice theme.
+ * @property {string} material - The material type for the dice.
+ */
+
+/**
+ * Represents a character in the game.
+ * @typedef {Object} Character
+ * @property {string} name - The name of the character.
+ * @property {number} id - A unique identifier for the character.
+ * @property {string} src - The source URL or path to the character's image or avatar.
+ */
+
+/**
+ * Represents a token in the game, typically associated with a player or character.
+ * @typedef {Object} Token
+ * @property {string} type - The type of token (e.g., 'icon', 'image').
+ * @property {string} name - The name or identifier of the token.
+ * @property {number} id - A unique identifier for the token.
+ * @property {string} src - The source URL or path to the token's image.
+ */
+
+/**
+ * Represents a player in the game.
+ * @typedef {Object} Player
+ * @property {string} name - The name of the player.
+ * @property {Array<number>} diceId - An array containing the IDs of the player's dice.
+ * @property {string} diceTheme - The selected dice theme for the player.
+ * @property {DiceThemeConfig} diceThemeConfig - The configuration object for the selected dice theme.
+ * @property {Array<DiceThemeConfig>} diceThemes - An array containing available dice themes that the player can select from.
+ * @property {Array<Character>} characters - An array containing character objects associated with the player.
+ * @property {Token} token - The token object representing the player's avatar or image in the game.
+ * @property {boolean} host - A boolean value indicating whether the player is the session host.
+ */
+
+/**
+ * Represents the configuration for a portal hub, including the URL and available dice options and themes.
+ * @typedef {Object} PortalConfig
+ * @property {string} hubUrl - The URL of the portal hub server.
+ * @property {boolean} allowHubSwitching - A boolean value indicating whether the player can switch between hubs.
+ * @property {Array<{ label: string; value: string }>} diceOptions - An array containing objects representing available dice options, each with a 'label' and a 'value'.
+ * @property {Array<DiceThemeConfig>} diceThemes - An array containing configuration objects for available dice themes.
+ */
+
+/**
+ * Represents the configuration for a game session, including the session ID, name, and player data.
+ * @typedef {Object} SessionConfig
+ * @property {number | null} sessionId - A unique identifier for the session, or null if not in a session.
+ * @property {string} sessionName - The name of the game session.
+ * @property {Player} player - The configuration object representing the current player.
+ */

src/routes/+page.js

@@ -1,5 +1,80 @@
+import { env } from '$env/dynamic/public';
+
+
 export const load = async () => {
-	return {};
+
+	/***
+	 * NOTE: The player data could be loaded from a database based 
+	 * the logged in user and their profile.
+	 */
+	/** @type {import('$lib/types.js').Player} */
+	let player = {
+		name: '',
+		diceId: [-1],
+		diceTheme: 'default',
+		diceThemeConfig: {
+			name: 'pink',
+			foreground: 'yellow',
+			background: '#ef1ebf',
+			texture: 'glass',
+			description: 'Default pink dice',
+			material: 'glass'
+		},
+		diceThemes: [
+			{
+				name: 'pink',
+				foreground: 'yellow',
+				background: '#ef1ebf',
+				texture: 'glass',
+				description: 'Default pink dice',
+				material: 'glass'
+			}
+		],
+		characters: [
+			{
+				name: 'character name',
+				id: -1,
+				src: 'bi bi-person'
+			}
+		],
+		token: {
+			type: 'icon',
+			name: 'character name',
+			id: -1,
+			src: 'bi bi-person'
+		},
+		host: false
+	};
+
+	/** @type {import("./types.js").PortalConfig} */
+	const portalConfig = {
+		hubUrl: env.PUBLIC_PORTAL_HUB_URL ?? 'http://localhost:5173/portal-hub',
+		allowHubSwitching: false, //If true, the user can switch between hubs in session manager component.
+		diceOptions: [
+			{
+				label: '1d20',
+				value: '1d20'
+			},
+			{
+				label: '2d20',
+				value: '2d20'
+			},
+			{
+				label: 'Lucid',
+				value: 'lucid'
+			},
+			{
+				label: 'Surreal',
+				value: 'surreal'
+			}
+		],// TODO: Add ability to have additional custom types of rolls like lucid, surreal, etc.
+		diceThemes: [...player.diceThemes] //Note: This allows for custom dice themes to be added from the players profile.
+	};
+
+	return {
+		portalConfig,
+		player
+	};
 };
 
 export const ssr = false;

src/routes/+page.svelte

@@ -4,51 +4,12 @@
 	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: '',
-		diceTheme: 'default',
-		diceThemeConfig: {
-			name: 'pink',
-			foreground: 'yellow',
-			background: '#ef1ebf',
-			texture: 'glass',
-			description: 'Default pink dice',
-			material: 'glass'
-		},
-		diceId: [-1],
-		token: {
-			type: 'icon',
-			name: 'character name',
-			id: -1,
-			src: 'bi bi-person'
-		},
-		host: false
-	};
-	const diceOptions = [
-		{
-			label: '1d20',
-			value: '1d20'
-		},
-		{
-			label: '2d20',
-			value: '2d20'
-		},
-		{
-			label: 'Lucid',
-			value: 'lucid'
-		},
-		{
-			label: 'Surreal',
-			value: 'surreal'
-		}
-	];
-	let portalHubUrl = env.PUBLIC_PORTAL_HUB_URL ?? 'http://localhost:5173/portal-hub';
+
 	/**
-	 * @type {string}
+	 * Example of loading portal config from server. See ./page.js for more details
 	 */
-	export let sessionName;
+	export let data;
+
 	let sessionId = $page.url.searchParams?.get('session') ?? null;	
 	let inSession;
 </script>
@@ -72,13 +33,11 @@
 			<h1><small>Welcome to the</small>Dimm City Portal</h1>
 		{/if}
 		<Portal
-			{portalHubUrl}
-			bind:sessionName
+			config={data.portalConfig}
+			player={data.player}
 			bind:inSession
 			bind:sessionId
 			sessionMode={$page.url.searchParams?.get('mode')}
-			{player}
-			{diceOptions}
 		/>
 	</section>
 </Notifications>

vite.config.js

@@ -19,7 +19,10 @@ const webSocketServer = {
 			pingTimeout: 120000 // 120 seconds, adjust according to your needs
 		});
 
-		createPortalServer(io);
+		const portalServer = createPortalServer(io);
+		console.log('Started Portal Server v' + portalServer.version);
+
+
 	}
 };