From 7df1deee2bb01e9819d22dd5415b724e13fe4ee5 Mon Sep 17 00:00:00 2001
From: Ben Eltschig <43812953+peabrainiac@users.noreply.github.com>
Date: Sun, 14 Mar 2021 02:15:24 +0100
Subject: [PATCH] =?UTF-8?q?kompaktes=20Design=20f=C3=BCr=20die=20Spielerli?=
=?UTF-8?q?ste=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
client/SkribblPlayerList.js | 37 +++++++++++++++++++++++++++++++++++--
1 file changed, 35 insertions(+), 2 deletions(-)
diff --git a/client/SkribblPlayerList.js b/client/SkribblPlayerList.js
index e6956c0..f793633 100644
--- a/client/SkribblPlayerList.js
+++ b/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;
}
--
GitLab