Release/new release

README.md

@@ -1,13 +1,16 @@
 <p align="center">
-  <a href="https://github.com/Kibibit/kb-steam-card/" target="blank"><img src="screenshots/logo.png" width="500" alt="achievibit Logo" />
+  <a href="https://github.com/Kibibit/kb-steam-card/" target="blank"><img src="https://thatkookooguy.github.io/https-assets/screenshots/kb-steam-card-logo.png" width="500" alt="achievibit Logo" />
   </a>
   <h2 align="center">
     @kibibit/hass-kibibit-theme
   </h2>
 </p>
 <p align="center">
-  <a href="https://github.com/custom-components/hacs"><img src="https://img.shields.io/badge/HACS-Default-orange.svg?style=for-the-badge"></a>
-  <a href="https://imgur.com/gallery/SQJNbWb"><img src="https://img.shields.io/badge/Screenshots-Click_Here-ff3860.svg?style=for-the-badge"></a>
+  <a href="https://www.npmjs.com/package/@kibibit/kb-steam-card"><img src="https://img.shields.io/npm/v/@kibibit/kb-steam-card/latest.svg?style=for-the-badge&logo=npm&color=CB3837"></a>
+</p>
+<p align="center">
+  <a href="https://github.com/custom-components/hacs"><img src="https://img.shields.io/badge/HACS-Default-orange.svg"></a>
+  <a href="https://imgur.com/gallery/SQJNbWb"><img src="https://img.shields.io/badge/Screenshots-Click_Here-ff3860.svg"></a>
 </p>
 <p align="center">
   A Home Assistant card for Steam integrations
@@ -20,15 +23,15 @@
 
 ### away \ offline state
 
-![away \ offline state](screenshots/offline.jpeg)
+![away \ offline state](https://thatkookooguy.github.io/https-assets/screenshots/kb-steam-card-offline.jpeg)
 
 ### online state
 
-![online state](screenshots/online.jpeg)
+![online state](https://thatkookooguy.github.io/https-assets/screenshots/kb-steam-card-online.jpeg)
 
 ### while playing a game
 
-![now playing](screenshots/now-playing.jpeg)
+![now playing](https://thatkookooguy.github.io/https-assets/screenshots/kb-steam-card-now-playing.jpeg)
 
 ## Installation
 

package.json

@@ -14,7 +14,6 @@
   "module": "dist/kb-steam-card.js",
   "files": [
     "/dist",
-    "/screenshots",
     "info.md",
     "/themes",
     "hacs.json"

src/kb-steam-card.ts

@@ -68,13 +68,41 @@ class KbSteamCard extends LitElement {
   }
 
   createEntitiesCard(entities): TemplateResult[] {
+    if (typeof entities === 'string') {
+      const newEntities = [] as string[];
+
+      Object.values(this.hass.states).forEach((entity: any) => {
+        if (entity.entity_id.startsWith(entities)) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+
+      entities = newEntities;
+    }
+
+    if (this.config.online_only) {
+      const newEntities = [] as string[];
+
+      entities.forEach((entity: string) => {
+        const entityObj = this.hass.states[entity];
+        if (entityObj && entityObj.state && entityObj.state === 'online') {
+          newEntities.push(entity);
+        }
+      });
+
+      entities = newEntities;
+    }
+
     return [
       html` <div class="card-header"><div class="name">Steam Friends</div></div> `,
       ...entities.map((ent, index) => {
         const entity = this.hass.states[ent];
         return entity
           ? html`
-              <div class="kb-steam-multi ${index === entities.length - 1 ? 'kb-last' : ''} ${entity.state}">
+              <div
+                class="kb-steam-multi kb-clickable ${index === entities.length - 1 ? 'kb-last' : ''} ${entity.state}"
+                @click=${() => this.handlePopup(entity)}
+              >
                 <div class="kb-steam-user">
                   <img src="${entity.attributes.entity_picture}" class="kb-steam-avatar" />
                   <div class="kb-steam-username">${entity.attributes.friendly_name}</div>
@@ -90,28 +118,36 @@ class KbSteamCard extends LitElement {
     ];
   }
 
+  handlePopup(entity) {
+    const entityId = entity.entity_id;
+    const e = new Event('hass-more-info', { composed: true }) as any;
+    e.detail = { entityId };
+    this.dispatchEvent(e);
+  }
+
   createEntityCard(entity): TemplateResult {
-    console.log(entity);
     return html`
-      <div class="kb-steam-username">
-        ${this.config.friendly_name ? this.config.friendly_name : entity.attributes.friendly_name}
-      </div>
-      ${this.renderUserAvatar(entity)}
-      <div class="kb-steam-online-status">${entity.state}</div>
-      <div class="kb-steam-level">
-        <span class="kb-steam-level-text-container">
-          <span class="kb-steam-level-text">${entity.attributes.level}</span>
-        </span>
-        <ha-icon icon="mdi:shield"></ha-icon>
+      <div class="kb-container kb-clickable" @click=${() => this.handlePopup(entity)}>
+        <div class="kb-steam-username">
+          ${this.config.friendly_name ? this.config.friendly_name : entity.attributes.friendly_name}
+        </div>
+        ${this.renderUserAvatar(entity)}
+        <div class="kb-steam-online-status">${entity.state}</div>
+        <div class="kb-steam-level">
+          <span class="kb-steam-level-text-container">
+            <span class="kb-steam-level-text">${entity.attributes.level}</span>
+          </span>
+          <ha-icon icon="mdi:shield"></ha-icon>
+        </div>
+        <div class="kb-steam-last-online">
+          <span>
+            <ha-icon icon="mdi:clock-outline"></ha-icon>
+            ${entity.state === 'online' ? 'Online Since' : 'Last Online'}
+          </span>
+          <span> ${this.formatLastOnline(entity.attributes.last_online)} </span>
+        </div>
+        ${this.renderCurrentlyPlayingGame(entity)}
       </div>
-      <div class="kb-steam-last-online">
-        <span>
-          <ha-icon icon="mdi:clock-outline"></ha-icon>
-          ${entity.state === 'online' ? 'Online Since' : 'Last Online'}
-        </span>
-        <span> ${this.formatLastOnline(entity.attributes.last_online)} </span>
-      </div>
-      ${this.renderCurrentlyPlayingGame(entity)}
     `;
   }
 
@@ -150,6 +186,10 @@ class KbSteamCard extends LitElement {
         padding-bottom: 8px;
       }
 
+      .kb-clickable {
+        cursor: pointer;
+      }
+
       .kb-steam-value {
         padding: 0 0.3em;
       }
@@ -177,13 +217,18 @@ class KbSteamCard extends LitElement {
         padding: 8px;
       }
 
-      ha-card {
+      ha-card,
+      ha-card > .kb-container {
         padding: 16px;
         display: flex;
         flex-direction: column;
         align-items: center;
       }
 
+      .kb-container {
+        width: 100%;
+      }
+
       .kb-steam-avatar {
         border-radius: 50%;
         width: 40px;