Lobby-gui weiter ausgebaut

client/SkribblContainer.js

@@ -31,6 +31,10 @@ export default class SkribblContainer extends HTMLElement {
 					top: 50%;
 					transform: translate(-50%,-50%);
 				}
+				skribbl-lobby {
+					width: 80%;
+					max-width: 1000px;
+				}
 			</style>
 		`;
 		(async()=>{

client/SkribblLobby.js

 import SkribblClient from "./SkribblClient.js";
+import SkribblPlayerList from "./SkribblPlayerList.js";
+import SkribblSettings from "./SkribblSettings.js";
 
 /**
  * Custom element `<skribbl-lobby>` for the lobby of a game.
@@ -13,18 +15,19 @@ export default class SkribblLobby extends HTMLElement {
 		this.shadowRoot.innerHTML = `
 			<style>
 				:host {
-					display: block;
-					background: #ffffff;
-					border-radius: 10px;
-					padding: 15px;
+					display: flex;
+				}
+				skribbl-settings {
+					width: 60%;
+				}
+				skribbl-player-list {
+					width: 40%;
 				}
 			</style>
-			Players: <span></span>
 		`;
-		this._jens = this.shadowRoot.querySelector("span");
-		client.onPlayersListChange(players=>{
-			this._jens.innerText = players.join(", ");
-		});
+		this._settings = new SkribblSettings();
+		this._playerList = new SkribblPlayerList(client);
+		this.shadowRoot.append(this._settings,this._playerList);
 	}
 }
 customElements.define("skribbl-lobby",SkribblLobby);
\ No newline at end of file

client/SkribblPlayerList.js

+import SkribblClient from "./SkribblClient.js";
+
+/**
+ * Custom element `<skribbl-player-list>` for the player list that appears in the lobby of a game.
+ */
+export default class SkribblPlayerList extends HTMLElement {
+	/**
+	 * Constructs a new SkribblPlayerList for the given client. The list is automatically updated as players join and leave.
+	 * @param {SkribblClient} client
+	 */
+	constructor(client){
+		super();
+		this.attachShadow({mode:"open"});
+		this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+					display: block;
+					margin: 10px;
+					color: #ffffff;
+					text-shadow: 0 0 5px #00000080;
+				}
+			</style>
+			Players: <span></span>
+		`;
+		this._span = this.shadowRoot.querySelector("span");
+		client.onPlayersListChange(players=>{
+			this._span.innerHTML = players.join(", ");
+		});
+	}
+}
+customElements.define("skribbl-player-list",SkribblPlayerList);
\ No newline at end of file

client/SkribblSettings.js

+/**
+ * Custom element `<skribbl-settings>` for the settings that appear in the lobby of the game.
+ */
+export default class SkribblSettings extends HTMLElement {
+	constructor(){
+		super();
+		this.attachShadow({mode:"open"});
+		this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+					display: block;
+					background: #ffffff;
+					border-radius: 10px;
+					padding: 15px;
+				}
+				h2 {
+					margin: 0;
+					text-align: center;
+				}
+				select {
+					display: block;
+					margin: 3px 5px 5px 5px;
+					padding: 3px;
+					width: 100%;
+				}
+				button {
+					padding: 8px 25px;
+					font-size: 20px;
+					background: orange;
+					color: white;
+					border: none;
+					border-radius: 4px;
+					cursor: pointer;
+				}
+			</style>
+			<h2>Lobby</h2>
+			<b>Rounds:</b>
+			<select>
+				<option value="2">2</option>
+				<option value="3" selected="">3</option>
+				<option value="4">4</option>
+				<option value="5">5</option>
+				<option value="6">6</option>
+				<option value="7">7</option>
+				<option value="8">8</option>
+				<option value="9">9</option>
+				<option value="10">10</option>
+			</select><br>
+			<b>Draw time:</b>
+			<select>
+				<option value="30">30s</option>
+				<option value="45">45s</option>
+				<option value="60">60s</option>
+				<option value="90">90s</option>
+				<option value="120">120s</option>
+				<option value="180">180s</option>
+			</select><br>
+			<div style="text-align:center">
+				<button>Start Game</button>
+			</div>
+		`;
+		this._roundsInput = this.querySelectorAll("select")[0];
+		this._drawTimeInput = this.querySelectorAll("select")[1];
+	}
+
+	get settings(){
+		return {rounds:parseInt(this._roundsInput.value),drawTime:parseInt(this._drawTimeInput.value)};
+	}
+}
+customElements.define("skribbl-settings",SkribblSettings);
\ No newline at end of file

client/jsconfig.json

@@ -4,5 +4,6 @@
 		"noImplicitAny": true,
 		"target": "esnext",
 		"module": "esnext"
-	}
+	},
+	"exclude": ["lib/"]
 }
\ No newline at end of file

client/networking/Signaler.js

@@ -55,7 +55,7 @@ export default class Signaler {
 }
 /** 
  * An implementation of "perfect negotiaton" as described [here](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Perfect_negotiation).
- * @param {DataChannel} signalingChannel
+ * @param {DataChannel<string,string>} signalingChannel
  * @param {boolean} polite
  * @returns {Promise<PeerDataChannel>}
  */