From c7dd7058a1a48c7eee3c8fd39928755791f6e4c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Wed, 23 Jan 2019 23:26:08 +0100
Subject: [PATCH] Update for Home Assistant 0.86

---
 README.md       |  5 ++---
 state-switch.js | 23 ++++++++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index c562ea6..8b05826 100644
--- a/README.md
+++ b/README.md
@@ -3,15 +3,14 @@ state-switch
 
 Allows you to display different cards depending on the state of an entity, the currently logged in user or the current device-browser combination
 
-This card requires [card-tools](https://github.com/thomasloven/lovelace-card-tools) to be installed.
-
 ![state-switch mov](https://user-images.githubusercontent.com/1299821/48923691-05479700-eeb1-11e8-8c8b-91ea14cfecf1.gif)
 
 > Note in the animation above that the two browser windows have two different users logged in, which changes the rightmost card.
 
 ## Installation
+This card requires [card-tools](https://github.com/thomasloven/lovelace-card-tools) to be installed.
 
-Please read and follow this guide: [Lovelace Plugins](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
+For installation instructions [see this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins).
 
 ## Options
 
diff --git a/state-switch.js b/state-switch.js
index fb03154..6752a40 100644
--- a/state-switch.js
+++ b/state-switch.js
@@ -1,26 +1,27 @@
-var LitElement = LitElement || Object.getPrototypeOf(customElements.get('hui-error-entity-row'));
-class StateSwitch extends LitElement {
+customElements.whenDefined('card-tools').then(() => {
+class StateSwitch extends cardTools.litElement() {
 
   setConfig(config) {
+    cardTools.checkVersion(0.3);
     this.config = config;
 
     this.cardSize = 1;
     this.cards = {}
 
     for(var k in this.config.states) {
-      this.cards[k] = window.cardTools.createCard(this.config.states[k]);
+      this.cards[k] = cardTools.createCard(this.config.states[k]);
       this.cardSize = Math.max(this.cardSize, this.cards[k].getCardSize());
     }
 
-    this.idCard = window.cardTools.createCard({
+    this.idCard = cardTools.createCard({
       type: "markdown",
       title: "Device ID",
-      content: `Your device id is: \`${window.cardTools.deviceID}\``,
+      content: `Your device id is: \`${cardTools.deviceID()}\``,
     });
   }
 
   render() {
-    return window.cardTools.litHtml`
+    return cardTools.litHtml()`
     <div id="root">${this.currentCard}</div>
     `;
   }
@@ -33,7 +34,7 @@ class StateSwitch extends LitElement {
       this.currentCard = this.cards[hass.user.name]
         || this.cards[this.config.default];
     } else if(this.config.entity == 'browser') {
-      this.currentCard = this.cards[window.cardTools.deviceID]
+      this.currentCard = this.cards[cardTools.deviceID]
         || ((this.config.default)
           ? this.cards[this.config.default]
           : this.idCard);
@@ -56,3 +57,11 @@ class StateSwitch extends LitElement {
 }
 
 customElements.define('state-switch', StateSwitch);
+});
+
+setTimeout(() => {
+  if(customElements.get('card-tools')) return;
+  customElements.define('state-switch', class extends HTMLElement{
+    setConfig() { throw new Error("Can't find card-tools. See https://github.com/thomasloven/lovelace-card-tools");}
+  });
+}, 2000);