room groups and grouping.

frontend/src/routes/+page.svelte

@@ -1,31 +1,48 @@
 <script lang="ts">
 	import DeviceIcon from "$lib/components/DeviceIcon.svelte";
   import Lamp, { DARK_COLOR } from "$lib/components/Lamp.svelte";
+	import MetaLamp from "$lib/components/MetaLamp.svelte";
+	import RoomHeader from "$lib/components/RoomHeader.svelte";
 	import { getStateContext } from "$lib/contexts/StateContext.svelte";
 	import { rgb } from "$lib/models/color";
 
-  const {deviceList, roomList} = getStateContext();
+  const {roomList} = getStateContext();
+
+  $: console.log($roomList);
 </script>
 
 <div class="page">
-  {#each $deviceList as device (device.id) }
-    <Lamp compact={device.name.includes("Square")} device={device} />
+  {#each $roomList as room (room.name)}
+    <RoomHeader devices={room.devices} name={room.name} />
+    <div class="devices">
+      {#each room.devices as device (device.id) }
+        <Lamp device={device} />
+      {/each}
+    </div>
+    <div class="devices">
+      {#each room.groups as group (group.name)}
+        <MetaLamp name={group.name} devices={group.devices} />
+      {/each}
+    </div>
   {/each}
-</div>
-<div class="page" style="font-size: 8em">
-  <DeviceIcon name="hue_go" brightColor={rgb(0.517,0.537,1.000)} darkColor={DARK_COLOR} />
+
 </div>
 
 <style>
   div.page {
     margin: 0 auto;
-    width: 100ch;
+    width: 200ch;
     max-width: 95%;
     margin-top: 1em;
-    font-size: 2em;
-  
+    font-size: 1.33rem;
+  }
+
+  div.devices { 
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
   }
+  div.devices + div.devices {
+    margin-top: 0.25em;
+  }
 </style>