WIP: Responsive map

README.md

@@ -119,6 +119,7 @@ Then use map_scale and crop to make it fit.
 | vacuum_color                        | string  | '--primary-text-color'                                              | The color to use for the vacuum icon                                                                                                                                                                                
 | map_scale                           | number  | 1                                                                   | Scale the map by this value                                                                                                                                                                                         
 | icon_scale                          | number  | 1                                                                   | Scale the icons (vacuum & dock) by this value                                                                                                                                                                       
+| full_width                          | boolean | false                                                               | Scale the map to fit the whole card                                                                                                                                                                                  
 | rotate                              | number  | 0                                                                   | Value to rotate the map by (default is in deg, but a value like `2rad` is valid too)                                                                                                                                
 | left_padding                        | number  | 0                                                                   | Value that moves the map `number` pixels from left to right                                                                                                                                                         
 | crop                                | Object  | {top: 0, bottom: 0, left: 0, right: 0}                              | Crop the map                                                                                                                                                                                                        
@@ -138,6 +139,21 @@ Custom buttons can be added to this card when vacuum_entity is set. Each custom
 | icon         | string | mdi:radiobox-blank | The icon that will represent the custom button           
 | text         | string | ""                 | Optional text to display next to the icon                
 
+## Development
+
+1. Run Rollup in watch mode
+
+    ```sh
+    npm run dev
+    ```
+
+2. Enable **Advanced Mode** in your Home Assistant profile
+
+3. Add the bundle as a Lovelace resource in Home Assistant (**Settings > Dashboards > ⋮ > Resources > + Add Resource**)
+    ```
+    http://localhost:5000/valetudo-map-card.js
+    ```
+
 ## License
 
 Lovelace Valetudo Map Card is licensed under the MIT license.

package.json

@@ -7,7 +7,8 @@
     "lint": "eslint -c .automated.eslintrc.json .",
     "lint_fix": "eslint -c .automated.eslintrc.json . --fix",
 
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "dev": "rollup -c -w"
   },
   "repository": {
     "type": "git",
@@ -34,6 +35,7 @@
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-typescript2": "0.33.0",
+    "rollup-plugin-serve": "1.1.1",
     "typescript": "4.8.2",
     "@rollup/plugin-json": "4.1.0",
     "babel-plugin-inline-json-import": "0.3.2",

rollup.config.js

@@ -4,6 +4,19 @@ import nodeResolve from "rollup-plugin-node-resolve";
 import babel from "rollup-plugin-babel";
 import { terser } from "rollup-plugin-terser";
 import json from "@rollup/plugin-json";
+import serve from 'rollup-plugin-serve';
+
+const dev = process.env.ROLLUP_WATCH;
+
+/** @type {import("rollup-plugin-serve").ServeOptions} */
+const serveOpts = {
+    contentBase: ['./dist'],
+    host: '0.0.0.0',
+    port: 5000,
+    headers: {
+        'Access-Control-Allow-Origin': '*'
+    }
+};
 
 const plugins = [
     nodeResolve({}),
@@ -16,7 +29,8 @@ const plugins = [
             ["inline-json-import", {}]
         ]
     }),
-    terser(),
+    dev && serve(serveOpts),
+    !dev && terser(),
 ];
 
 export default [