client/docs/CustomElements.js

@@ -4,7 +4,7 @@ import LatexJS from "../util/Latex.js";
 export class SkribblWord extends HTMLElement {
 	/**
 	 * @param {string} word
-	 * @param {{description?:string,synonyms?:string[],macros?:unknown}} options
+	 * @param {{description?:string,synonyms?:string[],macros?:{ [key: string]: string; }}} options
 	 */
 	constructor(word="",{description="",synonyms=[],macros={}}={}){
 		super();

client/docs/script.js

@@ -4,7 +4,7 @@ import {SkribblTopic,SkribblWord} from "./CustomElements.js";
 	/**
 	 * @typedef {{word:string,context?:string,description?:string,synonyms?:string[]}} Word
 	 * @typedef {{type:"topic",name:string,words:Word[]}} Topic
-	 * @type {{words:(Word|Topic)[],macros?:unknown}}
+	 * @type {{words:(Word|Topic)[],macros?:{ [key: string]: string; }}}
 	 */
 	const json = await (await fetch("../Skribbl.json")).json();
 	if (document.readyState=="loading"){

client/logic/SkribblClient.js

@@ -22,9 +22,11 @@ import Util, {CallbackHandler,Value,ReadOnlyValue} from "../util/Util.js";
 export default class SkribblClient {
 	/**
 	 * Constructs a new client for a given game ID or DataChannel.
-	 * @param {string|DataChannel<MessageToServer,MessageToClient>} idOrDataChannel
+	 * @param {string} id
+	 * @param {DataChannel<MessageToServer,MessageToClient>} [dataChannel] dataChannel to connect to. If none is given, automatically tries to create one based on the given id.
 	 */
-	constructor(idOrDataChannel){
+	constructor(id,dataChannel){
+		this._id = id;
 		/** @type {Value<DeepReadOnly<{name:string,points?:number}[]>>} */
 		this._players = new Value([]);
 		this._isHost = new Value(false);
@@ -39,7 +41,7 @@ export default class SkribblClient {
 		this._settings = new Value(Util.deepFreeze({rounds:3,drawTime:180}));
 		this._readyPromise = (async()=>{
 			/** @type {DataChannel<MessageToServer,MessageToClient>} */
-			this._dataChannel = idOrDataChannel instanceof DataChannel?idOrDataChannel:DataChannel.from(await Signaler.join(idOrDataChannel),JSON.stringify,JSON.parse);
+			this._dataChannel = dataChannel||DataChannel.from(await Signaler.join(id),JSON.stringify,JSON.parse);
 			await this._dataChannel.waitUntilReady();
 			this._dataChannel.onMessage(message=>{
 				console.log("message from server:",message);
@@ -126,6 +128,22 @@ export default class SkribblClient {
 		}
 	}
 
+	/**
+	 * The ID of the current game.
+	 * @readonly
+	 */
+	get id(){
+		return this._id;
+	}
+
+	/**
+	 * The url of the current game.
+	 * @readonly
+	 */
+	get url(){
+		return document.location.host+document.location.pathname+"#"+this._id;
+	}
+
 	/**
 	 * Whether this client is currently "host" in the sense that they have permissions to alter settings and start the game.
 	 * Doesn't actually always correlate with who is hosting the game.

client/script.js

@@ -20,7 +20,7 @@ document.addEventListener("DOMContentLoaded",async()=>{
 		const server = new SkribblServer();
 		await server.waitUntilReady();
 		console.log(server.url);
-		client = new SkribblClient(server.dataChannel);
+		client = new SkribblClient(server.id,server.dataChannel);
 	}
 	const game = new SkribblContainer(client);
 	document.body.innerHTML = "";

client/ui/SkribblGameContainer.js

@@ -8,7 +8,6 @@ import LatexJS from "../util/Latex.js";
 /**
  * Custom element `<skribbl-game-container>` for an actual ongoing skribbl game, that is, a container for the chat, canvas, playerlist etc.
  * @todo ui to show how much time is left
- * @todo add space between underscores, to make counting letters easier
  */
 export default class SkribblGameContainer extends CustomElement {
 	/**
@@ -35,6 +34,7 @@ export default class SkribblGameContainer extends CustomElement {
 				#word {
 					flex-grow: 1;
 					text-align: center;
+					letter-spacing: 0.15em;
 				}
 				#body {
 					display: flex;

client/ui/SkribblLobby.js

@@ -17,17 +17,73 @@ export default class SkribblLobby extends HTMLElement {
 				:host {
 					display: flex;
 				}
-				skribbl-settings {
+				#left {
 					width: 60%;
 				}
 				skribbl-player-list {
 					width: 40%;
 				}
+				skribbl-url {
+					margin-top: 5px;
+				}
+			</style>
+			<div id="left"></div>
+		`;
+		let settings = new SkribblSettings(client);
+		let playerList = new SkribblPlayerList(client);
+		let url = new SkribblURL(client.url);
+		let left = this.shadowRoot.querySelector("#left");
+		left.append(settings,url);
+		this.shadowRoot.append(playerList);
+	}
+}
+/**
+ * Custom element `<skribbl-url>` for the URL displayed in the lobby of the game.
+ */
+export class SkribblURL extends HTMLElement {
+	/**
+	 * @param {string} url
+	 */
+	constructor(url){
+		super();
+		this.attachShadow({mode:"open"});
+		this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+					display: flex;
+					align-items: center;
+					background: #ffffff;
+					border-radius: 10px;
+					padding: 10px;
+				}
+				:host > div {
+					flex-grow: 1;
+					flex-shrink: 1;
+				}
+				button {
+					margin: -5px -5px -5px 0;
+					padding: 4px 15px;
+					font-size: 16px;
+					background: orange;
+					color: white;
+					border: none;
+					border-radius: 4px;
+					cursor: pointer;
+				}
 			</style>
+			<div>
+				<b>Invite link:</b> <span id="link"></span>
+			</div>
+			<button>Copy</button>
 		`;
-		this._settings = new SkribblSettings(client);
-		this._playerList = new SkribblPlayerList(client);
-		this.shadowRoot.append(this._settings,this._playerList);
+		this._url = url;
+		this._urlSpan = this.shadowRoot.getElementById("link");
+		this._urlSpan.textContent = url;
+		this._button = this.shadowRoot.querySelector("button");
+		this._button.addEventListener("click",e=>{
+			navigator.clipboard.writeText(url);
+		});
 	}
 }
-customElements.define("skribbl-lobby",SkribblLobby);
\ No newline at end of file
+customElements.define("skribbl-lobby",SkribblLobby);
+customElements.define("skribbl-url",SkribblURL);
\ No newline at end of file