kompaktes Design für die Spielerliste hinzugefügt

client/SkribblPlayerList.js

@@ -15,16 +15,49 @@ export default class SkribblPlayerList extends HTMLElement {
 			<style>
 				:host {
 					display: block;
+				}
+				:host(:not([compact])) {
 					margin: 10px;
 					color: #ffffff;
 					text-shadow: 0 0 5px #00000080;
 				}
+				:host(:not([compact])) > span {
+					display: inline-block;
+					width: 100px;
+					margin: 0 10px 10px 0;
+					text-align: center;
+				}
+				:host([compact]) > span {
+					display: block;
+					width: 100%;
+					padding: 5px;
+					box-sizing: border-box;
+					background: #ffffff;
+					border-radius: 3px;
+					margin: 0 0 3px 0;
+				}
+				span.name {
+					font-wheight: bold;
+				}
+				:host(:not([compact])) span.points {
+					display: none;
+				}
 			</style>
-			Players: <span></span>
 		`;
 		this._span = this.shadowRoot.querySelector("span");
 		client.onPlayersListChange(players=>{
-			this._span.innerHTML = players.map(({name})=>name).join(", ");
+			let oldSpans = this.shadowRoot.querySelectorAll(":host > span");
+			Array.from(oldSpans).forEach(span=>span.remove());
+			players.forEach(({name,points=0})=>{
+				let span = document.createElement("span");
+				span.innerHTML = `
+					<span class="name"></span><br>
+					<span class="points"></span>
+				`;
+				span.querySelector(".name").textContent = name;
+				span.querySelector(".points").textContent = points.toString();
+				this.shadowRoot.appendChild(span);
+			});
 		});
 		this.compact = compact;
 	}